refer-route added

src/Routers.jsx

@@ -70,6 +70,10 @@ const FamGamesPage = lazy(()=> import("./views/FamGamesPage"));
 const FamilyRoutesPage = lazy(()=> import("./views/FamilyRoutesPage"));
 const PromoPage = lazy(()=> import("./views/PromoPage"));
 
+const PromoRefer = lazy(() => import('./views/PromoRefer'))
+const InviteRefer = lazy(() => import('./views/InviteRefer'))
+const MyRefer = lazy(() => import('./views/MyRefer'))
+
 export default function Routers() {
   return (
     <ScrollToTop>
@@ -94,8 +98,10 @@ export default function Routers() {
             <Route path="/complereset" element={<VerifyPasswordPagesTwo />} />
             <Route exact path="/outmessage" element={<VerifyYouPagesTwo />} />
             <Route exact path="/eoffer" element={<LoginPageTwo />} />
-            <Route exact path="/invite" element={<SignupPageTwo />} />
             <Route exact path="/promo/:name/:id" element={<PromoPage />} />
+            <Route exact path="/promoref" element={<PromoRefer />} />
+            <Route exact path="/invite" element={<InviteRefer />} />
+            <Route exact path="/myrefer/:refer_link" element={<MyRefer />} />
           </>
         ) : (
           <>

src/components/AuthPages/SignUp/index2.jsx

@@ -8,7 +8,13 @@ import AuthLayout from "../AuthLayout2";
 import GoogleDownload from '../../../assets/images/download/andriod.jpg'
 import IOSDownload from '../../../assets/images/download/apple.jpg'
 
-export default function SignUp({details}) {
+/* Note 
+The Props in this component
+1. refer_link holds the value to be sent as the referral code
+2. details holds the value of the person either referred via invite or promo
+*/
+
+export default function SignUp({refer_link, details}) {
   const location = useLocation();
 
   // eslint-disable-next-line no-restricted-globals
@@ -28,8 +34,8 @@ export default function SignUp({details}) {
 
   const [formData, setFormData] = useState({
     country: country ? country : "",
-    first_name: details ? details.first_name : "",
-    last_name: details ? details.last_name : "",
+    first_name: details ? details.firstname : "",
+    last_name: details ? details.lastname : "",
     email: details ? details.email : "",
     password: "",
   });
@@ -104,6 +110,7 @@ export default function SignUp({details}) {
         }
 
         setSignUpLoading(true);
+        let referral_link = refer_link ? {refer_link} : {} // FOR USER COMING FROM REFERRAL PROCESS
         const reqData = {
           country: country,
           firstname: first_name,
@@ -113,6 +120,7 @@ export default function SignUp({details}) {
           password: password,
           terms: 1,
           news: 1,
+          ...referral_link
         };
 
         const res = await userApi.CreateUser(reqData);
@@ -202,7 +210,7 @@ export default function SignUp({details}) {
                       type="text"
                       value={formData.first_name}
                       inputHandler={handleInputChange}
-                      disable={details.first_name}
+                      disable={details ? true : false}
                     />
                   </div>
                   <div className="input-item flex-1">
@@ -214,7 +222,7 @@ export default function SignUp({details}) {
                       type="text"
                       value={formData.last_name}
                       inputHandler={handleInputChange}
-                      disable={details.last_name}
+                      disable={details ? true : false}
                     />
                   </div>
                 </div>
@@ -227,7 +235,7 @@ export default function SignUp({details}) {
                     type="email"
                     value={formData.email}
                     inputHandler={handleInputChange}
-                    disable={details.email}
+                    disable={details ? true : false}
                   />
                 </div>
                 <div className="input-item mb-4">

src/lib/apiConst.js

@@ -59,6 +59,7 @@ export const apiConst = {
     WRENCHBOARD_RESET_PASSWORD: 11013 ,
     WRENCHBOARD_ACCOUNT_JOBLIST:11014 ,
     WRENCHBOARD_VERIFY_PENDING_LINK: 11015,
+    WRENCHBOARD_LOAD_REFERLINK: 11072,
     WRENCHBOARD_ACCOUNT_RESETPASS: 11016,
     WRENCHBOARD_ACCOUNT_SETPASSWD: 11017,
     WRENCHBOARD_DELETE_PENDING_LINK: 11018,

src/services/UsersService.js

@@ -1032,6 +1032,14 @@ class usersService {
     return this.postAuxEnd("/verifysignuplink", reqData);
   }
 
+  loadRefer(reqData) { // GETS THE INFORMATION OF A USER REFERRED VIA PROMO
+    const postData = {
+      action: apiConst.WRENCHBOARD_LOAD_REFERLINK,
+      ...reqData
+    };
+    return this.postAuxEnd("/loadrefer", postData);
+  }
+
   // END POINT FOR OFFER RESPONSE (i.e TO ACCEPT, REJECT, CANCEL, ETC OFFER)
   offersResponse(reqData) {
     var postData = {

src/views/InviteRefer.jsx

@@ -0,0 +1,78 @@
+import React, {useState, useEffect} from "react";
+import { useLocation } from "react-router-dom";
+import usersService from '../services/UsersService'
+
+import SignUp from "../components/AuthPages/SignUp/index2";
+import LoadingSpinner from '../components/Spinners/LoadingSpinner'
+import AuthLayout from '../components/AuthPages/AuthLayout2'
+
+function InviteRefer() {
+  const api = new usersService()
+
+  const location = useLocation();
+
+  const queryParams = new URLSearchParams(location?.search);
+  const refer_link = queryParams.get("refer_link")?.toUpperCase();
+
+  const [reload, setReload] = useState(false)
+
+  let [details, setDetails] = useState({loading:true, error:false, data:{}})
+
+  useEffect(()=>{
+    setDetails({loading:true, error:false, data:{}})
+    if(refer_link){
+      const reqData = {
+        refer_link: refer_link,
+        path: ''
+      }
+      api.loadRefer(reqData).then(res => {
+        if(res?.data?.internal_return < 0){
+          return setDetails({loading:false, error:true, data:{}})
+        }
+        setDetails({loading:false, error:false, data:res.data})
+      }).catch(err => {
+        setDetails({loading:false, error:true, data:{}})
+      })
+    }else{
+      setDetails({loading:false, error:false, data:{}})
+    }
+  },[reload])
+  return (
+    <>
+    {details.loading ?
+      <LoadingSpinner size="32" color="sky-blue" height="h-screen" />
+    : details.error ?
+      <AuthLayout>
+        <ErrorComponent onClick={()=>setReload(prev => !prev)} />
+      </AuthLayout>
+    :
+      <SignUp details={details.data} />
+    }
+    </>
+  );
+}
+
+export default InviteRefer;
+
+
+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>Try Again</span>
+      </button>
+    </div>
+  </div>
+);

src/views/MyRefer.jsx

@@ -0,0 +1,17 @@
+import React, {useState, useEffect} from "react";
+import { useParams } from "react-router-dom";
+
+import SignUp from "../components/AuthPages/SignUp/index2";
+
+function MyRefer() {
+
+  const {refer_link} = useParams()
+
+  return (
+    <>
+      <SignUp refer_link={refer_link ? refer_link : ''} />
+    </>
+  );
+}
+
+export default MyRefer;

src/views/PromoRefer.jsx

@@ -0,0 +1,78 @@
+import React, {useState, useEffect} from "react";
+import { useLocation } from "react-router-dom";
+import usersService from '../services/UsersService'
+
+import SignUp from "../components/AuthPages/SignUp/index2";
+import LoadingSpinner from '../components/Spinners/LoadingSpinner'
+import AuthLayout from '../components/AuthPages/AuthLayout2'
+
+function PromoRefer() {
+  const api = new usersService()
+
+  const location = useLocation();
+
+  const queryParams = new URLSearchParams(location?.search);
+  const refer_link = queryParams.get("refer_link")?.toUpperCase();
+
+  const [reload, setReload] = useState(false)
+
+  let [details, setDetails] = useState({loading:true, error:false, data:{}})
+
+  useEffect(()=>{
+    setDetails({loading:true, error:false, data:{}})
+    if(refer_link){
+      const reqData = {
+        refer_link: refer_link,
+        path: 'promoref'
+      }
+      api.loadRefer(reqData).then(res => {
+        if(res?.data?.internal_return < 0){
+          return setDetails({loading:false, error:true, data:{}})
+        }
+        setDetails({loading:false, error:false, data:res.data})
+      }).catch(err => {
+        setDetails({loading:false, error:true, data:{}})
+      })
+    }else{
+      setDetails({loading:false, error:false, data:{}})
+    }
+  },[reload])
+  return (
+    <>
+    {details.loading ?
+      <LoadingSpinner size="32" color="sky-blue" height="h-screen" />
+    : details.error ?
+      <AuthLayout>
+        <ErrorComponent onClick={()=>setReload(prev => !prev)} />
+      </AuthLayout>
+    :
+      <SignUp details={details.data} />
+    }
+    </>
+  );
+}
+
+export default PromoRefer;
+
+
+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>Try Again</span>
+      </button>
+    </div>
+  </div>
+);

src/views/SignupPageTwo.jsx

@@ -1,79 +1,13 @@
-import React, {useState, useEffect} from "react";
-import { useLocation } from "react-router-dom";
-import usersService from '../services/UsersService'
+import React from "react";
 
 import SignUp from "../components/AuthPages/SignUp/index2";
-import LoadingSpinner from '../components/Spinners/LoadingSpinner'
-import AuthLayout from '../components/AuthPages/AuthLayout2'
 
 function SignupPageTwo() {
-  const api = new usersService()
-
-  const location = useLocation();
-
-  const queryParams = new URLSearchParams(location?.search);
-  const refer_link = queryParams.get("refer_link")?.toUpperCase();
-
-  const [reload, setReload] = useState(false)
-
-  let [details, setDetails] = useState({loading:true, error:false, data:{}})
-
-  useEffect(()=>{
-    setDetails({loading:true, error:false, data:{}})
-    if(refer_link){
-      // const timer = setTimeout(()=>{
-      //   setDetails({loading:false, data:{
-      //     first_name: 'Emeka',
-      //     last_name: 'John',
-      //     email: 'example@example.com'
-      //   }})
-      // },[1000])
-      api.verifyEmail(refer_link).then(res => {
-        setDetails({loading:false, error:false, data:{}})
-        console.log('RES', rres)
-      }).catch(err => {
-        setDetails({loading:false, error:true, data:{}})
-      })
-    }else{
-      setDetails({loading:false, error:false, data:{}})
-    }
-  },[reload])
   return (
     <>
-    {details.loading ?
-      <LoadingSpinner size="32" color="sky-blue" height="h-screen" />
-    : details.error ?
-      <AuthLayout>
-        <ErrorComponent onClick={()=>setReload(prev => !prev)} />
-      </AuthLayout>
-    :
-      <SignUp details={details.data} />
-    }
+      <SignUp />
     </>
   );
 }
 
-export default SignupPageTwo;
-
-
-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>Try Again</span>
-      </button>
-    </div>
-  </div>
-);
+export default SignupPageTwo;