Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
956abc8411 |
@@ -69,6 +69,7 @@ import FamilyActivitiesPage from "./views/FamilyActivitiesPage";
|
||||
import FamGamesPage from "./views/FamGamesPage";
|
||||
import FamilyRoutesPage from "./views/FamilyRoutesPage";
|
||||
import PromoPage from "./views/PromoPage";
|
||||
import LearnMorePage from "./views/LearnMorePage";
|
||||
|
||||
export default function Routers() {
|
||||
return (
|
||||
@@ -203,6 +204,7 @@ export default function Routers() {
|
||||
<Route exact path="/sell" element={<SellPage />} />
|
||||
<Route exact path="/saved" element={<SavedPage />} />
|
||||
<Route exact path="/history" element={<HistoryPage />} />
|
||||
<Route exact path="/learnmore" element={<LearnMorePage />} />
|
||||
{/*<Route exact path="/upload-product" element={<UploadProductPage />} />*/}
|
||||
<Route exact path="/my-uploads" element={<UploadProductPage />} />
|
||||
<Route exact path="/profile" element={<AuthProfilePage />} />
|
||||
|
||||
@@ -9,7 +9,7 @@ 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
|
||||
let offersListLength = offersList?.length > 2 ? 2 : offersList?.length
|
||||
|
||||
// getting the upper three banners for the home layout
|
||||
const getUpperBanner = bannerList?.filter((value, idx) => idx <= 2 - offersListLength);
|
||||
@@ -44,7 +44,7 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) =>
|
||||
);
|
||||
|
||||
let image = `${imageServer}${localStorage.getItem("session_token")}/job/${item.job_uid}`
|
||||
if(index < 3){
|
||||
if(index < offersListLength){
|
||||
return (
|
||||
<div key={item.offer_uid}>
|
||||
<NewOfferCard datas={item} image={image} price={thePrice} setOfferPopout={setOfferPopout} />
|
||||
@@ -78,7 +78,7 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) =>
|
||||
{/* for flat banner section */}
|
||||
<div className="w-full grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 grid items-center justify-center gap-2 md:gap-4">
|
||||
{/* OFFER LIST DISPLAY */}
|
||||
<>
|
||||
{/* <>
|
||||
{(offersList && offersList?.length > 0) &&
|
||||
offersList.map((item, index) => {
|
||||
let thePrice = PriceFormatter(
|
||||
@@ -96,7 +96,7 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) =>
|
||||
)
|
||||
}
|
||||
})}
|
||||
</>
|
||||
</> */}
|
||||
{getLowerBanner?.map((props, idx) => {
|
||||
let image = getImage(props);
|
||||
|
||||
|
||||
@@ -0,0 +1,152 @@
|
||||
import React, {useState, useEffect} from "react";
|
||||
import Layout from "../Partials/Layout";
|
||||
|
||||
import usersService from "../../services/UsersService";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
|
||||
import TabButton from "../customTabs/TabButton";
|
||||
|
||||
export default function LearnMore() {
|
||||
|
||||
const apiCall = new usersService()
|
||||
|
||||
const [selectedTab, setSelectedTab] = useState("topic 1");
|
||||
|
||||
const [tabs, setTabs] = useState(
|
||||
[ //STATE FOR SWITCHING BETWEEN TABS
|
||||
{
|
||||
id: 1,
|
||||
title: "topic 1",
|
||||
iconName: "history",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "topic 2",
|
||||
iconName: "history",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "topic 3",
|
||||
iconName: "history",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "topic 4",
|
||||
iconName: "history",
|
||||
},
|
||||
]
|
||||
)
|
||||
|
||||
// const tabs = [ //STATE FOR SWITCHING BETWEEN TABS
|
||||
// {
|
||||
// id: 1,
|
||||
// title: "topic 1",
|
||||
// iconName: "history",
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// title: "topic 2",
|
||||
// iconName: "history",
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// title: "topic 3",
|
||||
// iconName: "history",
|
||||
// },
|
||||
// {
|
||||
// id: 4,
|
||||
// title: "topic 4",
|
||||
// iconName: "history",
|
||||
// },
|
||||
// ]
|
||||
|
||||
let [topics, setTopics] = useState({ // FOR PAYMENT HISTORY
|
||||
loading: true,
|
||||
data: [],
|
||||
})
|
||||
|
||||
//FUNCTION TO GET LEARN MORE TOPIC
|
||||
|
||||
useEffect(()=>{
|
||||
apiCall.getLearnmoreTopics().then((res)=>{
|
||||
if(res.data.internal_return < 0){ // success but no data
|
||||
setTopics(prev => ({...prev, loading: false}))
|
||||
return
|
||||
}
|
||||
const resData = res?.data?.result_list
|
||||
setTopics(prev => ({...prev, loading: false, data: resData}))
|
||||
setTabs(prev => {
|
||||
return prev.map((item, index) => ({...item, title:resData[index].topic}))
|
||||
})
|
||||
setSelectedTab(resData[0].topic)
|
||||
// console.log('RES', resData)
|
||||
}).catch((error)=>{
|
||||
setTopics(prev => ({...prev, loading: false}))
|
||||
})
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Layout>
|
||||
<div className="history-wrapper w-full mb-10">
|
||||
<div className="w-full">
|
||||
<div className="sm:flex justify-between items-center mb-6">
|
||||
<div className="mb-5 sm:mb-0">
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">
|
||||
|
||||
Learn More
|
||||
|
||||
</h1>
|
||||
</div>
|
||||
<div className="slider-btns flex space-x-4">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow lg:flex lg:px-10 px-4 justify-between">
|
||||
<div className="content-tab-items lg:w-[230px] w-full mr-2">
|
||||
<div className='overflow-hidden mb-5 lg:mb-0 py-2 lg:py-8'>
|
||||
{(!topics.loading && topics?.data?.length > 0) && tabs.map((item) => (
|
||||
<div key={item.id} className='w-full'>
|
||||
<TabButton
|
||||
key={item.id}
|
||||
item={item.title}
|
||||
iconName={item.iconName}
|
||||
selectedTab={selectedTab}
|
||||
setSelectedTab={setSelectedTab}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533] mr-10"></div>
|
||||
<div className="flex-1 overflow-y-auto min-h-[520px]">
|
||||
<>
|
||||
{/* TOPICS SECTION */}
|
||||
<div className="w-full py-2 lg:py-8">
|
||||
{topics.loading ?
|
||||
<LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
|
||||
:
|
||||
<>
|
||||
{(topics?.data && topics?.data?.length > 0) ?
|
||||
<div dangerouslySetInnerHTML={{
|
||||
__html: topics?.data?.filter(item => item.topic == selectedTab)[0]?.contents,
|
||||
}} className='prose dark:text-white dark:bg-dark-white'
|
||||
>
|
||||
{/* {topics?.data?.filter(item => item.topic == selectedTab)[0]?.contents} */}
|
||||
</div>
|
||||
:
|
||||
<p className='p-2 text-slate-500 flex flex-col grow justify-center items-center'>No Topics found</p>}
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
{/* END OF TOPICS SECTION */}
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -15,7 +15,7 @@ export default function TabButton({ item='', iconName='', selectedTab='', setSel
|
||||
<Icons name={iconName} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-18 tracking-wide">{item[0].toUpperCase() + item.slice(1)}</p>
|
||||
<p className="text-18 tracking-wide">{item[0]?.toUpperCase() + item?.slice(1)}</p>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
|
||||
@@ -141,52 +141,39 @@ function OfferJobPopout({ details, onClose, situation }) {
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-4 bg-white dark:bg-dark-white rounded-lg">
|
||||
<div className="p-4 w-full md:col-span-3 md:border-r-2">
|
||||
<div className="md:flex bg-white dark:bg-dark-white rounded-lg">
|
||||
<div className="p-4 w-full md:w-3/4 md:border-r-2">
|
||||
|
||||
{/* INPUT SECTION */}
|
||||
<div className='grid md:grid-cols-2'>
|
||||
<div className="my-2 md:flex">
|
||||
{/* <Detail
|
||||
label="Date :"
|
||||
<Detail
|
||||
label="Date"
|
||||
value={
|
||||
(details.offer_added && details.offer_added?.split(" ")[0]) ||
|
||||
"default"
|
||||
}
|
||||
/> */}
|
||||
<label className='job-label w-full md:w-[150px] md:text-right'>Date :</label>
|
||||
<p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>
|
||||
{
|
||||
(details.offer_added && details.offer_added?.split(" ")[0]) ||
|
||||
"default"
|
||||
}
|
||||
</p>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="my-2 md:flex">
|
||||
{/* <Detail
|
||||
label="Offer Expire :"
|
||||
<Detail
|
||||
label="Offer Expire"
|
||||
value={details.expire && details.expire.split(" ")[0]}
|
||||
/> */}
|
||||
<label className='job-label w-full md:w-[150px] md:text-right'>Expire :</label>
|
||||
<p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>{details.expire && details.expire.split(" ")[0]}</p>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='grid md:grid-cols-2'>
|
||||
<div className="my-2 md:flex">
|
||||
{/* <Detail label="Reward :" value={thePrice} /> */}
|
||||
<label className='job-label w-full md:w-[150px] md:text-right'>Reward :</label>
|
||||
<p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>{thePrice}</p>
|
||||
<Detail label="Reward" value={thePrice} />
|
||||
</div>
|
||||
|
||||
<div className="my-2 md:flex">
|
||||
{/* <Detail
|
||||
label="Duration :"
|
||||
<Detail
|
||||
label="Duration"
|
||||
value={`${details.timeline_days} day(s)`}
|
||||
/> */}
|
||||
<label className='job-label w-full md:w-[150px] md:text-right'>Duration :</label>
|
||||
<p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>{`${details.timeline_days} day(s)`}</p>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -195,7 +182,7 @@ function OfferJobPopout({ details, onClose, situation }) {
|
||||
</p>
|
||||
|
||||
<div className="my-2 md:flex">
|
||||
<label className='job-label w-full md:w-[150px]'>Description :</label>
|
||||
<label className='job-label w-full md:w-[150px]'>Description</label>
|
||||
<p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white max-h-[200px] overflow-y-auto`}>{details.description}</p>
|
||||
{/* <Detail label="Description" value={details.description} /> */}
|
||||
</div>
|
||||
@@ -206,7 +193,7 @@ function OfferJobPopout({ details, onClose, situation }) {
|
||||
{/* <label className='job-label w-full md:w-[150px]'>Detail</label>
|
||||
<p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white min-h-[100px] max-h-[200px] overflow-y-auto border-2 rounded-md`}>{details.job_description || details.job_detail}</p> */}
|
||||
<label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
|
||||
Delivery Detail :
|
||||
Delivery Detail
|
||||
</label>
|
||||
<textarea
|
||||
className={`p-2 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
|
||||
@@ -219,7 +206,7 @@ function OfferJobPopout({ details, onClose, situation }) {
|
||||
</div>
|
||||
|
||||
{/* ACTION SECTION */}
|
||||
<div className="p-4 w-full md:col-span-1 h-full flex flex-col justify-between">
|
||||
<div className="p-4 w-full md:w-1/4 h-full">
|
||||
<div className="my-3 md:flex flex-col md:justify-center">
|
||||
<h1 className='mb-2 text-base font-semibold text-slate-900 dark:text-white tracking-wide'>I understand the task</h1>
|
||||
{requestStatus.loading && requestStatus.trigger == "offer" ? (
|
||||
|
||||
@@ -1502,14 +1502,25 @@ class usersService {
|
||||
return this.postAuxEnd("/promoverify", postData);
|
||||
}
|
||||
|
||||
// API FUNCTION TO LOGIN USER THROUGH PROMO LINK
|
||||
loginPromo(reqData) {
|
||||
var postData = {
|
||||
action: apiConst.WRENCHBOARD_LOGIN_PROMO,
|
||||
...reqData
|
||||
};
|
||||
return this.postAuxEnd("/loginpromo", postData);
|
||||
}
|
||||
// API FUNCTION TO LOGIN USER THROUGH PROMO LINK
|
||||
loginPromo(reqData) {
|
||||
var postData = {
|
||||
action: apiConst.WRENCHBOARD_LOGIN_PROMO,
|
||||
...reqData
|
||||
};
|
||||
return this.postAuxEnd("/loginpromo", postData);
|
||||
}
|
||||
|
||||
// API FUNCTION TO GET LEARN MORE TOPICS
|
||||
getLearnmoreTopics() {
|
||||
var postData = {
|
||||
member_uid: localStorage.getItem("uid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
sessionid: localStorage.getItem("session_token"),
|
||||
// action: apiConst.WRENCHBOARD_LOGIN_PROMO,
|
||||
};
|
||||
return this.postAuxEnd("/learnmore", postData);
|
||||
}
|
||||
|
||||
/*
|
||||
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username)
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from "react";
|
||||
import LearnMore from "../components/LearnMore/LearnMore";
|
||||
|
||||
export default function LearnMorePage() {
|
||||
return (
|
||||
<>
|
||||
<LearnMore />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user