Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
00c83b357f | ||
 ameye
|
0b7ec73409 | ||
|
victorAnumudu
|
f58e8834fb | ||
|
ameye
|
1a829789d4 |
@@ -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 />} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
import React, {useState, useEffect} from 'react'
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
|
||||
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'
|
||||
|
||||
export default function Promo() {
|
||||
|
||||
const {name, id} = useParams()
|
||||
// console.log(name, id)
|
||||
|
||||
const email = `${name}@${name}.com`.toLowerCase()
|
||||
|
||||
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 = () => {
|
||||
setCompleteSignUp({loading:true, status:false, message: ''})
|
||||
if(!password){
|
||||
setCompleteSignUp({loading:false, status:false, message: 'Please Enter Password'})
|
||||
return setTimeout(()=>{
|
||||
setCompleteSignUp({loading:false, status:false, message: ''})
|
||||
},2000)
|
||||
}
|
||||
setTimeout(()=>{
|
||||
setCompleteSignUp({loading:false, status:true, message: ''})
|
||||
},2000)
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
const timer = setTimeout(()=>{
|
||||
setRequestStatus({loading:false, data:[]})
|
||||
},2000)
|
||||
return () => clearTimeout(timer)
|
||||
},[])
|
||||
|
||||
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>
|
||||
:
|
||||
<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={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"}
|
||||
forgotPassword
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</PromoPageLayout>
|
||||
)
|
||||
}
|
||||
@@ -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-home-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" ? bgImgNig : 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">
|
||||
© {new Date().getFullYear()} -
|
||||
</span>
|
||||
<Link to="/" className="text-[#009ef7] ml-1">
|
||||
WrenchBoard
|
||||
</Link>{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -125,148 +125,147 @@ function ReferralDisplay() {
|
||||
}, [refHistoryReload]);
|
||||
|
||||
return (
|
||||
<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 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">
|
||||
<span>Refer a Friend</span>
|
||||
</h1>
|
||||
</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]">
|
||||
<>
|
||||
<div className='hidden'>
|
||||
<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">
|
||||
<span>Refer a Friend</span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{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}
|
||||
<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}
|
||||
/>
|
||||
{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">
|
||||
{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
|
||||
</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>
|
||||
{referralList.loading ? (
|
||||
<LoadingSpinner size="22" color="sky-blue" />
|
||||
) : (
|
||||
<ReferralTable history={referralList} />
|
||||
)}
|
||||
<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">
|
||||
{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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from 'react'
|
||||
import Promo from '../components/AuthPages/Promo/Promo'
|
||||
|
||||
export default function PromoPage() {
|
||||
return (
|
||||
<>
|
||||
<Promo />
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user