From 0ea988fcea04c083652de7e5db37183dd1675248 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Tue, 24 Sep 2024 21:05:01 +0100 Subject: [PATCH 1/4] repositioned offer list display --- .../Dashboards/AccountDashboard.jsx | 192 +++++++++++++----- src/components/Home/FullAccountDash.jsx | 2 +- 2 files changed, 147 insertions(+), 47 deletions(-) diff --git a/src/components/Dashboards/AccountDashboard.jsx b/src/components/Dashboards/AccountDashboard.jsx index 4cd6187..0f5f361 100644 --- a/src/components/Dashboards/AccountDashboard.jsx +++ b/src/components/Dashboards/AccountDashboard.jsx @@ -1,7 +1,14 @@ -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 }) => { + + let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW -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); @@ -15,54 +22,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?.result_list?.length > 0) && + offersList.result_list.map((item, index) => { + let thePrice = PriceFormatter( + item?.price * 0.01, + item?.currency_code, + item?.currency + ); + + let image = `${offersList.session_image_server}${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 +145,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..226c74f 100644 --- a/src/components/Home/FullAccountDash.jsx +++ b/src/components/Home/FullAccountDash.jsx @@ -62,7 +62,7 @@ export default function FullAccountDash(props) {
{renderDashboard()} {process.env.REACT_APP_SHOW_ACCOUNT_DASH == "1" && ( - + )} {props?.dashTypes !== "undefined" && -- 2.34.1 From 19c25002633318597ad3e480a7a82a20d49ba3f2 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Tue, 24 Sep 2024 21:13:03 +0100 Subject: [PATCH 2/4] added dark color for offer list card --- src/components/Dashboards/AccountDashboard.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Dashboards/AccountDashboard.jsx b/src/components/Dashboards/AccountDashboard.jsx index 0f5f361..7fe72ce 100644 --- a/src/components/Dashboards/AccountDashboard.jsx +++ b/src/components/Dashboards/AccountDashboard.jsx @@ -147,7 +147,7 @@ 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" ? -- 2.34.1 From 24e2a905d2e97d1cadadc289e375b6225e2cf60c Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Tue, 24 Sep 2024 22:07:33 +0100 Subject: [PATCH 3/4] moved refer friend section --- src/components/Dashboards/AccountDashboard.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Dashboards/AccountDashboard.jsx b/src/components/Dashboards/AccountDashboard.jsx index 7fe72ce..eecd4c2 100644 --- a/src/components/Dashboards/AccountDashboard.jsx +++ b/src/components/Dashboards/AccountDashboard.jsx @@ -10,8 +10,8 @@ const AccountDashboard = ({ className, bannerList, offersList }) => { let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW // 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); + const getLowerBanner = bannerList?.filter((value, idx) => idx >= 2); let getImage = ({ banner_location, banner }) => { if (banner_location == "LOCAL") { -- 2.34.1 From f286960bed98e4fb44e77e02a537544330ce03ae Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Wed, 25 Sep 2024 00:45:54 +0100 Subject: [PATCH 4/4] top banner offer list display fixed --- .../Dashboards/AccountDashboard.jsx | 14 ++++---- src/components/Home/FullAccountDash.jsx | 19 ++++++----- src/components/Home/index.jsx | 32 ++++++++++++------- src/views/HomePages.jsx | 2 ++ 4 files changed, 41 insertions(+), 26 deletions(-) diff --git a/src/components/Dashboards/AccountDashboard.jsx b/src/components/Dashboards/AccountDashboard.jsx index eecd4c2..5562580 100644 --- a/src/components/Dashboards/AccountDashboard.jsx +++ b/src/components/Dashboards/AccountDashboard.jsx @@ -5,13 +5,15 @@ import OfferJobPopout from '../../components/jobPopout/OfferJobPopout' import { PriceFormatter } from "../Helpers/PriceFormatter"; import CountDown from '../Helpers/CountDown' -const AccountDashboard = ({ className, bannerList, offersList }) => { +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 + // 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") { @@ -33,15 +35,15 @@ const AccountDashboard = ({ className, bannerList, offersList }) => { {/* OFFER LIST DISPLAY */} <> - {(offersList && offersList?.result_list?.length > 0) && - offersList.result_list.map((item, index) => { + {(offersList && offersList?.length > 0) && + offersList.map((item, index) => { let thePrice = PriceFormatter( item?.price * 0.01, item?.currency_code, item?.currency ); - let image = `${offersList.session_image_server}${localStorage.getItem("session_token")}/job/${item.job_uid}` + let image = `${imageServer}${localStorage.getItem("session_token")}/job/${item.job_uid}` return (
diff --git a/src/components/Home/FullAccountDash.jsx b/src/components/Home/FullAccountDash.jsx index 226c74f..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 ( -- 2.34.1