blog id added

src/Routers.jsx

@@ -68,6 +68,7 @@ import FamilyWalletPage from "./views/FamilyWalletPage";
 import FamilyActivitiesPage from "./views/FamilyActivitiesPage";
 import FamGamesPage from "./views/FamGamesPage";
 import FamilyRoutesPage from "./views/FamilyRoutesPage";
+import PromoPage from "./views/PromoPage";
 
 export default function Routers() {
   return (
@@ -93,6 +94,7 @@ export default function Routers() {
             <Route exact path="/outmessage" element={<VerifyYouPagesTwo />} />
             <Route exact path="/eoffer" element={<LoginPageTwo />} />
             <Route exact path="/invite" element={<LoginPageTwo />} />
+            <Route exact path="/promo/:name/:id" element={<PromoPage />} />
           </>
         ) : (
           <>

src/components/AuthPages/Promo/Promo.jsx

@@ -0,0 +1,252 @@
+import React, {useState, useEffect} from 'react'
+import { Link, useParams, useNavigate } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { updateUserDetails } from "../../../store/UserDetails";
+
+import usersService from "../../../services/UsersService";
+
+import PromoPageLayout from '../PromoPageLayout'
+import InputCom from "../../Helpers/Inputs/InputCom";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import LoadingSpinner from '../../../components/Spinners/LoadingSpinner'
+
+import GoogleDownload from '../../../assets/images/download/andriod.jpg'
+import IOSDownload from '../../../assets/images/download/apple.jpg'
+
+export default function Promo() {
+
+  const api = new usersService()
+
+  const {name, id} = useParams() // PARAMETERS COMING FROM THE LINK
+  // console.log(name, id)
+
+  const navigate = useNavigate()
+
+  const dispatch = useDispatch();
+
+  const [requestStatus, setRequestStatus] = useState({loading:true, data:{}})
+
+  const [completeSignUp, setCompleteSignUp] = useState({loading:false, status:false, message: ''});
+
+  const [showPassword, setShowPassword] = useState(false);
+
+  const [password, setPassword] = useState("");
+
+  const handlePassword = (e) => {
+    setPassword(e.target.value);
+  };
+
+  // To Show and Hide Password
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const handleContinue = () => {
+    let reqData = { // API REQUEST DATA/PAYLOAD
+      username: requestStatus?.data?.email,
+      promo: name,
+      promo_owner: id,
+      password: password,
+      sessionid: '24271A99426'
+      }
+    setCompleteSignUp({loading:true, status:false, message: ''})
+    if(!password){ // CHECKS FOR EMPTY PASSWORD
+      setCompleteSignUp({loading:false, status:false, message: 'Please Enter Password'})
+      return setTimeout(()=>{
+        setCompleteSignUp({loading:false, status:false, message: ''})
+      },2000)
+    }
+    api.loginPromo(reqData).then(res => { //loginPromo
+      console.log('RES', res)
+      if(res.data?.internal_return < 0 || !res?.data?.member_id || !res?.data?.uid || !res?.data?.session || res?.data?.status_message == 'VALID_LINK_NOT_FOUND'){
+        setCompleteSignUp({loading:false, status:false, message: 'Unable to login'})
+        return setTimeout(()=>{
+          setCompleteSignUp({loading:false, status:false, message: ''})
+        },4000)
+      }
+
+      // Do LOGIN HERE
+      localStorage.setItem("member_id", `${res.data.member_id}`);
+      localStorage.setItem("uid", `${res.data.uid}`);
+      localStorage.setItem("session_token", `${res.data.session}`);
+      localStorage.setItem("wallet_available_status", `${res.data.wallet_available_status}`);
+      if (res.data?.account_type == "FAMILY") {
+        sessionStorage.setItem("family_uid", res.data?.family_uid);
+        sessionStorage.setItem("parent_uid", res.data?.parent_uid);
+      }
+      dispatch(updateUserDetails({ ...res.data }));
+      setTimeout(() => {
+        navigate("/", { replace: true });
+        setCompleteSignUp({loading:false, status:true, message: ''})
+      }, 2000);
+
+    }).catch(err => {
+      setCompleteSignUp({loading:false, status:false, message: 'Opps! try again'})
+      setTimeout(()=>{
+        setCompleteSignUp({loading:false, status:false, message: ''})
+      },4000)
+    })
+  }
+
+  useEffect(()=>{
+    let reqData = { // API REQUEST DATA/PAYLOAD
+      promo: name,
+      promo_owner: id,
+      sessionid: '79970A12501'
+      }
+    api.verifyPromo(reqData).then(res => {
+      if(res?.data?.internal_return < 0 || !res?.data?.email || res?.data?.status_message != 'VALID_LINK_FOUND'){
+        return setRequestStatus({loading:false, data:{}})
+      }
+      setRequestStatus({loading:false, data:res?.data})
+    }).catch(err => {
+      setRequestStatus({loading:false, data:{}})
+    })
+  },[])
+
+  return (
+    <PromoPageLayout>
+      <div className="w-full">
+        <div className="mb-5">
+          <Link to="#">
+            <img
+              src={WrenchBoard}
+              alt="wrenchboard"
+              className="h-10 mx-auto"
+            />
+          </Link>
+        </div>
+        {requestStatus.loading ?
+          <div className='flex flex-col justify-center items-center'>
+            <LoadingSpinner height='h-40' size='8' />
+            <p>Loading...</p>
+            <p>please do not refresh</p>
+          </div>
+          : Object.keys(requestStatus.data).length > 0 ?
+          <div className="flex place-content-center">
+              <div className="w-10/12 pb-3">
+                <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
+                  <div className="input-item mb-5">
+                    <InputCom
+                      labelClass="tracking-wider"
+                      fieldClass="sm:px-6 px-2"
+                      value={requestStatus?.data?.email}
+                      // inputHandler={handleEmail}
+                      placeholder="Your Email"
+                      label="Email"
+                      name="email"
+                      type="email"
+                      iconName="message"
+                      disable={true}
+                    />
+                  </div>
+
+                  <div className="input-item mb-5">
+                    <InputCom
+                      labelClass="tracking-wider"
+                      fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+                      value={password}
+                      inputHandler={handlePassword}
+                      placeholder="● ● ● ● ● ●"
+                      label="Set Password"
+                      name="password"
+                      type={showPassword ? "text" : "password"}
+                      onClick={togglePasswordVisibility}
+                      passIcon={showPassword ? "password" : "password"}
+                    />
+                  </div>
+
+                  {completeSignUp.message && (
+                    <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]">
+                      {completeSignUp.message}
+                    </div>
+                  )}
+
+                  <div className="flex justify-center">
+                    <button
+                      name="full"
+                      onClick={handleContinue}
+                      type="button"
+                      disabled={completeSignUp.loading}
+                      className={`btn-login  rounded-full text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+                    >
+                      {completeSignUp.loading ? (
+                        <div className="signup btn-loader"></div>
+                      ) : (
+                        <>Continue</>
+                      )}
+                    </button>
+                  </div>
+                </div>
+
+                              {/* APP DOWNLOAD STORE */}
+              <div className="w-full mt-4">
+                <div className="w-full flex justify-between items-center gap-10 sm:gap-32">
+                  <div className="w-full">
+                    <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"
+                      rel="noreferrer"
+                      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> */}
+                      <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
+                    </a>
+                  </div>
+                  <div className="w-full">
+                    <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"
+                      rel="noreferrer"
+                      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> */}
+                      <img src={GoogleDownload} className='w-full h-auto' alt='IOS Download' />
+                    </a>
+                  </div>
+                </div>
+              </div>
+              </div>
+          </div>
+          :
+          <ErrorComponent onClick={() => navigate("/login")} />
+        }
+      </div>
+    </PromoPageLayout>
+  )
+}
+
+
+const ErrorComponent = ({ onClick }) => (
+  <div className="input-area">
+    <div className="my-5">
+      <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+        This error occurs because you have already verified this link or the
+        link has expired. Try login or reset password. If none worked, try to
+        create the account from the start.
+      </p>
+    </div>
+
+    <div className="signin-area flex justify-center mb-3.5">
+      <button
+        onClick={onClick}
+        type="button"
+        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+      >
+        <span>Return Home</span>
+      </button>
+    </div>
+  </div>
+);

src/components/AuthPages/PromoPageLayout.jsx

@@ -0,0 +1,80 @@
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+import { localImgLoad } from "../../lib";
+
+import DarkModeContext from "../Contexts/DarkModeContext";
+
+export default function PromoPageLayout({ children }) {
+  const bgImg = localImgLoad("images/left-wrenchboard.jpg");
+  const bgImgNig = localImgLoad("images/wrench-home-back-nigeria.jpg");
+  const bgImgCom = localImgLoad("images/wrench-promo-back-common.jpg");
+
+  const { countryMode } = useContext(DarkModeContext);
+
+  return (
+    <div
+      className={`min-h-screen overflow-y-auto bg-cover bg-center flex flex-col justify-between items-center`}
+      style={{
+        backgroundImage: `url(${countryMode == "NG" ? bgImgCom : bgImgCom})`,
+      }}
+    >
+      
+      <div className={`w-full grid grid-cols-1`}>
+        {/* <div 
+            className={`auth-bg hidden xl:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
+            style={{backgroundImage: `url(${bgImg})`}}
+        >
+        </div> */}
+        <div className="p-5 sm:p-7 flex place-content-center">
+          <div className="py-5 w-full sm:w-11/12 max-w-[550px] shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
+            <div className="w-full flex justify-center items-center">
+              {children && children}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className='hidden w-full shadow-md bg-slate-50 dark:bg-dark-white'>
+        <div className="w-full flex flex-col md:flex-row justify-center items-center px-10 py-2">
+          <div className="flex justify-center items-center">
+            <div className="flex items-center">
+              <a
+                href="https://www.wrenchboard.com/about-us"
+                className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                target="_blank"
+                rel="noreferrer"
+              >
+                About
+              </a>
+              <a
+                href="https://www.wrenchboard.com/service"
+                className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Services
+              </a>
+              <a
+                href="https://www.wrenchboard.com/contact"
+                className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Contact Us
+              </a>
+            </div>
+          </div>
+          <p className="text-black text-[15px] px-2 font-medium flex items-center gap-1">
+            <span className="dark:text-white">
+              &copy; {new Date().getFullYear()} -
+            </span>
+            <Link to="/" className="text-[#009ef7] ml-1">
+              WrenchBoard
+            </Link>{" "}
+          </p>
+        </div>
+      </div>
+
+    </div>
+  );
+}

src/components/AuthPages/VerifyYou/index2.jsx

@@ -28,21 +28,14 @@ export default function VerifyYou() {
                 </span>
               </div>
               <div className="input-area">
-                <div className="mb-5">
+              <div className="mb-5">
                   <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                    <b>Verify Email.</b> Help us secure your WrenchBoard account
-                    by verifying your email registration address. Verification
-                    will let you access all of WrenchBoard's features.
+                    Please <span className="font-semibold tracking-wide">verify your email</span> to secure your account.
                   </p>
                 </div>
                 <div className="mb-5">
                   <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                    If you do not receive the confirmation message within a few
-                    minutes of signing up, please check your Junk E-mail folder
-                    just in case the confirmation email got delivered there
-                    instead of your inbox. If so, select the confirmation
-                    message and click Not Junk, which will allow future messages
-                    to get through.
+                    If you don't see the confirmation email, check your <span className='font-semibold tracking-wide'>Junk</span> or <span className='font-semibold tracking-wide'>Spam</span> folder and mark it as "Not Junk"
                   </p>
                 </div>
               </div>

src/components/Blogs/index.jsx

@@ -28,7 +28,7 @@ export default function BlogItem(props) {
     
     useEffect(()=>{
         if(!blog_id){
-            navigate('/',{replace:true})
+            return navigate('/',{replace:true})
         }
         apiCall.getSingleBlogData({blog_id}).then(res => {
             setBlogdata({loading: false, data:res.data})

src/components/Dashboards/AccountDashboard.jsx

@@ -14,7 +14,6 @@ const AccountDashboard = ({ className, bannerList }) => {
     }
   };
 
-  console.log(getLowerBanner);
   return (
     <div
       className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
@@ -25,7 +24,7 @@ const AccountDashboard = ({ className, bannerList }) => {
         {getUpperBanner?.map((props, idx) => {
           let image = getImage(props);
 
-          let { short_title, short_description, short_button_text, link_path } =
+          let { short_title, short_description, short_button_text, link_path, card_type, blog_id } =
             props;
 
           return (
@@ -35,7 +34,7 @@ const AccountDashboard = ({ className, bannerList }) => {
                 image={image}
                 title={short_title}
                 desc={short_description}
-                link_path={link_path}
+                link_path={card_type=='BLOG' ? `${link_path}?blog_id=${blog_id}` : link_path}
               />
             </div>
           );
@@ -71,25 +70,25 @@ export default AccountDashboard;
 
 const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
   return (
-    <div className="flex flex-col shadow-md rounded-xl dark:border-[#5356fb29]" key={key}>
-      <Link to={link_path} className="h-[12rem] rounded-t-xl">
+    <div className="flex flex-col shadow-md rounded-xl dark:border-[#5356fb29] overflow-hidden" key={key}>
+      <Link to={link_path} className="h-[12rem] bg-white">
         <img
           src={image}
           alt="banner-img"
           loading="lazy"
-          className="w-full h-full rounded-t-xl object-cover"
+          className="w-auto mx-auto h-full"
         />
       </Link>
-      <div className="h-[7rem] rounded-b-xl bg-white dark:bg-dark-white">
+      <div className="rounded-b-xl bg-white dark:bg-dark-white">
         <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem] flex flex-col gap-2 dark:text-white">
-          <Link to={link_path} className="font-bold text-lg">
+          <Link to={link_path} className="font-bold text-lg line-clamp-1">
             {title}
           </Link>
           <Link to={link_path} className="text-sm">
             {desc}
           </Link>
         </div>
-        <div className="flex justify-between w-full px-2 items-center pt-[0.2rem]">
+        <div className="flex justify-between w-full p-1 items-center">
           <Link to={link_path} className="text-slate-300 font-semibold text-sm">
             {btn}
           </Link>
@@ -113,7 +112,7 @@ const LowerBanner = ({ image, title = "", desc = "", btn, link_path, card_type,
       className="flex flex-col bg-white shadow-md h-full rounded-xl dark:border-[#5356fb29] dark:bg-dark-white"
     >
       <div className="w-full xxs:flex justify-between items-center border-b border-slate-300 p-2">
-        <div className="min-h-[150px] sm:min-h-[130px] flex justify-between items-center">
+        <div className="min-h-[130px] sm:min-h-[100px] flex justify-between items-center">
           <div className="px-2 flex flex-col gap-2 dark:text-white">
             <Link to={newLinkPath} className="text-lg font-bold">
               {title}
@@ -132,7 +131,7 @@ const LowerBanner = ({ image, title = "", desc = "", btn, link_path, card_type,
           />
         </Link>
       </div>
-      <div className="flex justify-between w-full px-2 items-center">
+      <div className="flex justify-between w-full p-1 items-center">
         <Link to={newLinkPath} className="text-slate-300 font-semibold text-sm">
           {btn}
         </Link>
@@ -181,7 +180,7 @@ const BannerSection = ({ banners, variant }) => {
                 variant === "top"
                   ? "rounded-b-xl bg-white"
                   : "border-b border-slate-300"
-              } h-[7rem]`}
+              }`}
             >
               <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem] flex flex-col gap-2">
                 <Link to={link_path} className="font-bold text-lg">
@@ -191,7 +190,7 @@ const BannerSection = ({ banners, variant }) => {
                   {short_description}
                 </Link>
               </div>
-              <div className="flex justify-between w-full px-2 items-center">
+              <div className="flex justify-between w-full p-1 items-center">
                 <Link to={link_path} className="text-slate-300 font-semibold">
                   {short_button_text}
                 </Link>

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -94,7 +94,7 @@ export default function InputCom({
           placeholder={placeholder}
           value={value}
           onChange={inputHandler}
-          className={`input-field placeholder:text-base text-dark-gray w-full h-full ${
+          className={`input-field placeholder:text-base text-dark-gray w-full h-full ${iconName && 'pr-6'} ${
             inputBg && inputBg} tracking-wide focus:ring-0 focus:outline-none ${fieldClass}`}
           type={type}
           id={name}

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
+import { useSelector } from "react-redux";
 import { toast } from "react-toastify";
 import usersService from "../../../services/UsersService";
 import ModalCom from "../../Helpers/ModalCom";
@@ -9,6 +10,11 @@ import LockJob from "./LockJob";
 
 const MarketPopUp = ({ details, onClose, situation, marketInt, marketPlaceProduct }) => {
 
+  let { jobLists } = useSelector((state) => state.jobLists);
+  const interestCount = jobLists?.interest_list?.filter(item => item.job_uid == details.job_uid);
+  // console.log('interestList', interest_count)
+  // console.log('MEMO', jobLists?.interest_list, datas.job_uid)
+
   let {sendJobInterestToOwner} = SocketValues() // function to emit job interest request
   const emitOfferInterest = () => {
     let message = {
@@ -326,7 +332,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt, marketPlaceProduc
 
                 <div className="text-slate-900">
                   <p className="flex items-center tracking-wide">
-                    <span className="job-label">Interest: </span> <b className="ml-1">{details.interest_count}</b>
+                    <span className="job-label">Interest: </span> <b className="ml-1">{interestCount.length > 0 ? interestCount[0].interest_count : '0'}</b>
                   </p>
                   <hr />
                   <p className="my-1 flex flex-col">

src/components/Referral/ReferralDisplay.jsx

@@ -7,6 +7,7 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 import ReferralTable from "../MyWallet/WalletComponent/ReferralTable";
+import TabButton from "../customTabs/TabButton";
 
 const validationSchema = Yup.object().shape({
   ref_email: Yup.string()
@@ -105,13 +106,27 @@ function ReferralDisplay() {
     sendReferralMsg({...values}); // FUNCTION TO SEND REFERRAL MESSAGE
   };
 
+  const [selectedTab, setSelectedTab] = useState("Send Referral");
+  const tabs = [  //STATE FOR SWITCHING BETWEEN TABS
+      {
+        id: 1,
+        title: "Send Referral",
+        iconName: "history",
+      },
+      {
+        id: 2,
+        title: "Referral List",
+        iconName: "history",
+      },
+  ]
+
   useEffect(() => {
     allReferrals();
   }, [refHistoryReload]);
 
   return (
-    <div className="content-wrapper w-full lg:flex xl:space-x-8  bottomMargin">
-      <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
+    <>
+      <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 inline-flex gap-3 text-dark-gray dark:text-white items-center">
@@ -119,111 +134,138 @@ function ReferralDisplay() {
             </h1>
           </div>
         </div>
-
-        <div className="referral w-full  md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
-          <h2 className="mb-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
-            Send Referral
-          </h2>
-          <Formik
-            initialValues={initialValues}
-            validationSchema={validationSchema}
-            onSubmit={handleSubmit}
-          >
-            {(props) => (
-              <Form className="referral-info">
-                <div className="block md:mb-6 md:flex gap-10">
-                  {/* Firstname */}
-                  <div className="field w-full mb-6 md:mb-0">
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Firstname"
-                      type="text"
-                      name="ref_firstname"
-                      placeholder="Firstname"
-                      value={props.values.ref_firstname}
-                      inputHandler={props.handleChange}
-                      blurHandler={props.handleBlur}
-                    />
-                    {props.errors.ref_firstname &&
-                      props.touched.ref_firstname && (
-                        <p className="text-sm text-red-500">
-                          {props.errors.ref_firstname}
-                        </p>
-                      )}
-                  </div>
-
-                  {/* Lastname */}
-                  <div className="field w-full mb-6 md:mb-0">
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Lastname"
-                      type="text"
-                      name="ref_lastname"
-                      placeholder="Lastname"
-                      value={props.values.ref_lastname}
-                      inputHandler={props.handleChange}
-                      blurHandler={props.handleBlur}
-                    />
-                    {props.errors.ref_lastname &&
-                      props.touched.ref_lastname && (
-                        <p className="text-sm text-red-500">
-                          {props.errors.ref_lastname}
-                        </p>
-                      )}
-                  </div>
-                </div>
-
-                <div className="field w-full mb-6">
-                  <InputCom
-                    fieldClass="px-6"
-                    label="Email"
-                    type="text"
-                    name="ref_email"
-                    placeholder="Email"
-                    value={props.values.ref_email}
-                    inputHandler={props.handleChange}
-                    blurHandler={props.handleBlur}
-                  />
-                  {props.errors.ref_email && props.touched.ref_email && (
-                    <p className="text-sm text-red-500">
-                      {props.errors.ref_email}
-                    </p>
-                  )}
-                </div>
-
-                <hr />
-                {error.message != "" && (
-                  <p className="text-base text-red-500 py-2">{error.message}</p>
-                )}
-                <div className="referral-btn flex justify-end items-center py-4 border-b-4">
-                  {error.loading ? (
-                    <LoadingSpinner size="6" color="sky-blue" />
-                  ) : (
-                    <button
-                      type="submit"
-                      className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                    >
-                      Send Message
-                    </button>
-                  )}
-                </div>
-              </Form>
-            )}
-          </Formik>
+      </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'>
+                {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]">
+          <>
+            {selectedTab == 'Send Referral' &&
+              <div className="referral w-full p-4">
+                <h2 className="mb-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+                  Send Referral
+                </h2>
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema}
+                  onSubmit={handleSubmit}
+                >
+                  {(props) => (
+                    <Form className="referral-info">
+                      <div className="block md:mb-6 md:flex gap-10">
+                        {/* Firstname */}
+                        <div className="field w-full mb-6 md:mb-0">
+                          <InputCom
+                            fieldClass="px-6"
+                            label="Firstname"
+                            type="text"
+                            name="ref_firstname"
+                            placeholder="Firstname"
+                            value={props.values.ref_firstname}
+                            inputHandler={props.handleChange}
+                            blurHandler={props.handleBlur}
+                          />
+                          {props.errors.ref_firstname &&
+                            props.touched.ref_firstname && (
+                              <p className="text-sm text-red-500">
+                                {props.errors.ref_firstname}
+                              </p>
+                            )}
+                        </div>
 
-        <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
-          <h2 className="mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
-            Referral List
-          </h2>
-          {referralList.loading ? (
-            <LoadingSpinner size="32" color="sky-blue" />
-          ) : (
-            <ReferralTable history={referralList} />
-          )}
+                        {/* Lastname */}
+                        <div className="field w-full mb-6 md:mb-0">
+                          <InputCom
+                            fieldClass="px-6"
+                            label="Lastname"
+                            type="text"
+                            name="ref_lastname"
+                            placeholder="Lastname"
+                            value={props.values.ref_lastname}
+                            inputHandler={props.handleChange}
+                            blurHandler={props.handleBlur}
+                          />
+                          {props.errors.ref_lastname &&
+                            props.touched.ref_lastname && (
+                              <p className="text-sm text-red-500">
+                                {props.errors.ref_lastname}
+                              </p>
+                            )}
+                        </div>
+                      </div>
+
+                      <div className="field w-full mb-6">
+                        <InputCom
+                          fieldClass="px-6"
+                          label="Email"
+                          type="text"
+                          name="ref_email"
+                          placeholder="Email"
+                          value={props.values.ref_email}
+                          inputHandler={props.handleChange}
+                          blurHandler={props.handleBlur}
+                        />
+                        {props.errors.ref_email && props.touched.ref_email && (
+                          <p className="text-sm text-red-500">
+                            {props.errors.ref_email}
+                          </p>
+                        )}
+                      </div>
+
+                      <hr />
+                      {error.message != "" && (
+                        <p className="text-base text-red-500 py-2">{error.message}</p>
+                      )}
+                      <div className="referral-btn flex justify-end items-center py-4">
+                        {error.loading ? (
+                          <LoadingSpinner size="6" color="sky-blue" />
+                        ) : (
+                          <button
+                            type="submit"
+                            className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                          >
+                            Send Message
+                          </button>
+                        )}
+                      </div>
+                    </Form>
+                  )}
+                </Formik>
+              </div>
+            }
+
+            {selectedTab == 'Referral List' &&
+              <>
+                <div className="w-full p-4">
+                  <h2 className="mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+                    Referral List
+                  </h2>
+                  {referralList.loading ? (
+                    <LoadingSpinner size="22" color="sky-blue" />
+                  ) : (
+                    <ReferralTable history={referralList} />
+                  )}
+                </div>
+              </>
+            }
+          </>
         </div>
       </div>
-    </div>
+    </>
   );
 }
 

src/components/jobPopout/NewJobListPopout.jsx

@@ -344,11 +344,11 @@ function NewJobListPopout({
                         {selectedTab == 'family' ?
                             'Assign to family'
                             : selectedTab == 'public' ?
-                            'Offer this job to public'
+                            'Place in Market'
                             : selectedTab == 'individual' ?
-                            'Offer this job to individual'
+                            'Assign to individual'
                             : selectedTab == 'group' ?
-                            'Offer this job to your Group'
+                            'Preferred List'
                             :
                             null
                         }

src/components/jobPopout/popoutcomponent/AssignToFamily.jsx

@@ -48,7 +48,7 @@ export default function AssignToFamily({
           </div>
           <div className="mt-3 mb-1 flex justify-end items-center">
             <button
-              className={`px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
+              className={`uppercase px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
               type="submit"
               name='family'
             >

src/components/jobPopout/popoutcomponent/AssignToGroup.jsx

@@ -48,14 +48,14 @@ export default function AssignToGroup({
           </div>
           <div className="mt-3 mb-1 flex justify-end items-center">
             <button
-              className={`px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
+              className={`uppercase px-4 h-11 flex justify-center items-center btn-gradient text-sm rounded-full text-white`}
               type="submit"
               name='group'
             >
               {loader?.jobFields ? 
                 <LoadingSpinner size={5} /> 
                 :
-                'Send Order to Group'
+                'Send Task to Group'
               }
             </button>
           </div>

src/components/jobPopout/popoutcomponent/AssignToIndividual.jsx

@@ -53,7 +53,7 @@ export default function AssignToIndividual({
           </div>
           <div className="mt-3 mb-1 flex justify-end items-center">
             <button
-              className={`px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
+              className={`uppercase px-4 h-11 flex justify-center items-center btn-gradient text-sm rounded-full text-white`}
               type="submit"
               name='individual'
             >

src/components/jobPopout/popoutcomponent/AssignToPublic.jsx

@@ -102,14 +102,14 @@ export default function AssignToPublic({
             </div>
           <div className="mt-3 mb-1 flex justify-end items-center">
             <button
-              className={`px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
+              className={`uppercase px-4 h-11 flex justify-center items-center btn-gradient text-sm rounded-full text-white`}
               type="submit"
               name='public'
             >
               {loader?.jobFields ? 
                 <LoadingSpinner size={5} /> 
                 :
-                'Show Task to Public'
+                'Place Task to the Market'
               }
             </button>
           </div>

src/lib/apiConst.js

@@ -278,5 +278,8 @@ export const apiConst = {
     PAY_MODE_CCARD: 1,
     PAY_MODE_BONUS: 9,
     APPROVED_BALANCE: 5,
-    DISAPROVE_BALANCE: 3
+    DISAPROVE_BALANCE: 3,
+
+    WRENCHBOARD_VERIFY_PROMO: 55056,
+    WRENCHBOARD_LOGIN_PROMO: 55057,
 };

src/services/UsersService.js

@@ -208,7 +208,7 @@ class usersService {
   // }
   getHeroJBanners() {
     var postData = {
-      uuid: localStorage.getItem("uid"),
+      uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       page: 0,
@@ -1493,6 +1493,24 @@ class usersService {
     return this.postAuxEnd("/verifycompleted", postData);
   }
 
+  // API FUNCTION TO VERIFY PROMO LINK
+  verifyPromo(reqData) {
+    var postData = {
+      action: apiConst.WRENCHBOARD_VERIFY_PROMO,
+      ...reqData
+    };
+    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);
+    }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)

src/views/PromoPage.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import Promo from '../components/AuthPages/Promo/Promo'
+
+export default function PromoPage() {
+  return (
+    <>
+        <Promo />
+    </>
+  )
+}