diff --git a/src/components/Dashboards/AccountDashboard.jsx b/src/components/Dashboards/AccountDashboard.jsx index 4cd6187..5562580 100644 --- a/src/components/Dashboards/AccountDashboard.jsx +++ b/src/components/Dashboards/AccountDashboard.jsx @@ -1,10 +1,19 @@ -import React from "react"; +import React, { Suspense, lazy, useState } from "react"; import { Link } from "react-router-dom"; +import VideoElement from '../../components/VideoCom/VideoElement' +import OfferJobPopout from '../../components/jobPopout/OfferJobPopout' +import { PriceFormatter } from "../Helpers/PriceFormatter"; +import CountDown from '../Helpers/CountDown' + +const AccountDashboard = ({ className, bannerList, offersList, imageServer }) => { + + let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW + + let offersListLength = offersList?.length -const AccountDashboard = ({ className, bannerList }) => { // getting the upper three banners for the home layout - const getUpperBanner = bannerList?.filter((value, idx) => idx <= 2); - const getLowerBanner = bannerList?.filter((value, idx) => idx > 2); + const getUpperBanner = bannerList?.filter((value, idx) => idx <= 2 - offersListLength); + const getLowerBanner = bannerList?.filter((value, idx) => !getUpperBanner?.map(item => item?.title)?.includes(value.title)); let getImage = ({ banner_location, banner }) => { if (banner_location == "LOCAL") { @@ -15,54 +24,89 @@ const AccountDashboard = ({ className, bannerList }) => { }; return ( -
-
- {getUpperBanner?.map((props, idx) => { - let image = getImage(props); + <> +
- let { short_title, short_description, short_button_text, link_path, card_type, blog_id } = - props; +
- return ( -
- -
- ); - })} + {/* OFFER LIST DISPLAY */} + <> + {(offersList && offersList?.length > 0) && + offersList.map((item, index) => { + let thePrice = PriceFormatter( + item?.price * 0.01, + item?.currency_code, + item?.currency + ); + + let image = `${imageServer}${localStorage.getItem("session_token")}/job/${item.job_uid}` + return ( +
+ +
+ ) + })} + + + {getUpperBanner?.map((props, idx) => { + let image = getImage(props); + + let { short_title, short_description, short_button_text, link_path, card_type, blog_id } = + props; + + return ( +
+ +
+ ); + })} +
+
+ {getLowerBanner?.map((props, idx) => { + let image = getImage(props); + + let { short_title, short_description, short_button_text, link_path, card_type, blog_id } = + props; + + return ( +
+ +
+ ); + })} +
-
- {getLowerBanner?.map((props, idx) => { - let image = getImage(props); - let { short_title, short_description, short_button_text, link_path, card_type, blog_id } = - props; - - return ( -
- -
- ); - })} -
-
+ {/* Offer Job Popout */} + {offerPopout.show && ( + { + setOfferPopout({ show: false, data: {} }); + }} + situation={offerPopout.show} + /> + )} + {/* End of Offer Job Popout */} + ); }; @@ -103,6 +147,64 @@ const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => { ); }; +const NewOfferCard = ({ datas, hidden = false, price, setOfferPopout, image }) => { + return ( +
+
+ {/* thumbnail image/video */} + {datas.job_type == "MEDIA" ? + Loading...

}> + + + : +
+ {hidden &&
} +
+ } +
+
+
+

+ {datas?.title} +

+ {/* + {desc} + */} +
+ +
+
+
+
+

Expires

+

+ +

+
+ +
+
+
+ ); +}; + const LowerBanner = ({ image, title = "", desc = "", btn, link_path, card_type, blog_id, key }) => { const newLinkPath = card_type == 'BLOG' ? `${link_path}?blog_id=${blog_id}` : link_path diff --git a/src/components/Home/FullAccountDash.jsx b/src/components/Home/FullAccountDash.jsx index 748b7e3..9cf5528 100644 --- a/src/components/Home/FullAccountDash.jsx +++ b/src/components/Home/FullAccountDash.jsx @@ -62,16 +62,19 @@ export default function FullAccountDash(props) {
{renderDashboard()} {process.env.REACT_APP_SHOW_ACCOUNT_DASH == "1" && ( - + )} - {props?.dashTypes !== "undefined" && - props.offersList?.data?.result_list?.length ? ( - - ) : props.MyActiveJobList?.data?.length ? ( + { + // props?.dashTypes !== "undefined" && + // props.offersList?.data?.result_list?.length ? ( + // + // ) + // : + props.MyActiveJobList?.data?.length ? ( <>

diff --git a/src/components/Home/index.jsx b/src/components/Home/index.jsx index 46e1e6b..6f30cc8 100644 --- a/src/components/Home/index.jsx +++ b/src/components/Home/index.jsx @@ -5,6 +5,7 @@ import usersService from "../../services/UsersService"; import { useSelector } from "react-redux"; import FamilyDash from "./FamilyDash"; import FullAccountDash from "./FullAccountDash"; +import LoadingSpinner from '../../components/Spinners/LoadingSpinner' export default function Home(props) { // console.log("PROPS IN HOME->", props); @@ -12,7 +13,8 @@ export default function Home(props) { const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner); let [nextDueTask, setNextDueTask] = useState({}); - const [MyOffersList, setMyOffersList] = useState({loading: true, data: []}); + + // const [MyOffersList, setMyOffersList] = useState({loading: true, data: []}); const { userDetails } = useSelector((state) => state?.userDetails); @@ -46,19 +48,19 @@ export default function Home(props) { }); }; - const getMyOffersList = async () => { - try { - const res = await userApi.getOffersList(); - setMyOffersList({loading:false, data:res.data}); - } catch (error) { - setMyOffersList({loading:false, data:[]}); - console.log("Error getting offers", error); - } - }; + // const getMyOffersList = async () => { + // try { + // const res = await userApi.getOffersList(); + // setMyOffersList({loading:false, data:res.data}); + // } catch (error) { + // setMyOffersList({loading:false, data:[]}); + // console.log("Error getting offers", error); + // } + // }; useEffect(() => { const fetchData = async () => { - await Promise.all([getHomeDate(), getMyOffersList(), getMyActiveJobList()]); + await Promise.all([getHomeDate(), getMyActiveJobList()]); }; if(userDetails?.account_type == 'FULL'){ fetchData(); @@ -67,6 +69,9 @@ export default function Home(props) { return ( + {Object.keys(commonHeadBanner).length < 1 ? + + :
{userDetails && userDetails?.account_type == "FAMILY" ? ( ) : (
@@ -90,6 +97,7 @@ export default function Home(props) {
)}
+ } ); } diff --git a/src/views/HomePages.jsx b/src/views/HomePages.jsx index 132fa30..e7da228 100644 --- a/src/views/HomePages.jsx +++ b/src/views/HomePages.jsx @@ -7,6 +7,8 @@ export default function HomePages() { const bannerOptions = { bannerList: commonHeadBanner?.result_list, dashTypes: commonHeadBanner?.home_dash_type, + offersList: commonHeadBanner?.offers_list, + imageServer: commonHeadBanner?.session_image_server }; return (