diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx index 58a8052..90c6539 100644 --- a/src/components/AuthPages/Login/index.jsx +++ b/src/components/AuthPages/Login/index.jsx @@ -81,7 +81,6 @@ export default function Login() { } } } catch (error) { - console.log(error) setMsgError('An error occurred') } finally { setTimeout(() => { diff --git a/src/components/AuthPages/SignUp/index.jsx b/src/components/AuthPages/SignUp/index.jsx index 8fbc6b8..f902d38 100644 --- a/src/components/AuthPages/SignUp/index.jsx +++ b/src/components/AuthPages/SignUp/index.jsx @@ -1,144 +1,254 @@ -import React, { useState } from "react"; -import loginThumb from "../../../assets/images/auth-thumb.svg"; -import googleLogo from "../../../assets/images/google-logo.svg"; -import logo from "../../../assets/images/light-logo.png"; //logo-1.svg"; -import titleShape from "../../../assets/images/shape/title-shape-two.svg"; +import React, { useEffect, useState } from "react"; +import { useNavigate, Link } from "react-router-dom"; +import facebookLogo from "../../../assets/images/facebook-4.svg"; +import WrenchBoard from "../../../assets/images/wrenchboard.png"; +import usersService from "../../../services/UsersService"; import InputCom from "../../Helpers/Inputs/InputCom"; export default function SignUp() { + const [signUpLoading, setSignUpLoading] = useState(false) const [checked, setValue] = useState(false); + // for the catch error + const [msgError, setMsgError] = useState(''); + const [showPassword, setShowPassword] = useState(false); + const [countries, setCountries] = useState([]); + + const [formData, setFormData] = useState({ + country: "", + first_name: "", + last_name: "", + email: "", + password: "" + }); + + const handleInputChange = (event) => { + const { name, value } = event?.target; + setFormData({ ...formData, [name]: value }); + }; + + // To Show and Hide Password + const togglePasswordVisibility = () => { + setShowPassword(!showPassword); + // return console.log('showPassword') + }; const rememberMe = () => { setValue(!checked); }; + + const navigate = useNavigate(); + const userApi = new usersService(); + // Get Country Api + const getCountryList = async () => { + const res = await userApi.getSignupCountryData() + + try { + if (res.status === 200) { + const { signup_country } = await res.data + setCountries(signup_country) + } else if (res.data.result != 100) { + setCountries('Nothing see here!') + } + } catch (error) { + throw new Error(error) + } + } + + const handleSignUp = async () => { + let { country, first_name, last_name, email, password } = formData + + if (email == '' && password == '' && first_name == '') { + setMsgError('Please fill in fields') + } + + try { + if (email !== '' && password !== '' && first_name !== '' && last_name !== '') { + const reqData = { + country: country, + firstname: first_name, + lastname: last_name, + email: email, + username: email, + password: password, + terms: 1, + news: 1 + } + + const res = await userApi.CreateUser(reqData) + if (res.status === 200) { + const { data } = res + if (data.status == -1 && data.acc == 'DULPICATE') { + setMsgError('This account has been already created') + } + if (data.status > 0 && data.internal_return == 100 && data.session != '') { + localStorage.setItem("email", `${data.email}`); + localStorage.setItem("country", `${data.country}`); + localStorage.setItem("firstname", `${data.firstname}`); + localStorage.setItem("lastname", `${data.lastname}`); + setSignUpLoading(true) + + setTimeout(() => { + navigate("/", { replace: true }); + setSignUpLoading(false) + }, 2000) + console.log('Success') + } else { + setMsgError(data.status) + } + } + } + } catch (error) { + throw new Error(error) + setMsgError('An error occurred') + } finally { + setTimeout(() => { + setMsgError(null) + }, 7000) + } + } + + useEffect(() => { + getCountryList() + }, []) + return ( <> -
-
-
+
+
+
-
-
-
-

- Create Account -

-
- shape +
+
+ + wrenchboard + +
+
+
+
+

+ Create Account +

+ Already have an account? Sign in here
-
-
-
-
+ +
+
+ OR +
+
+
+ +
+
+ +
+
+ +
+
+
-
+
-
-
- -
-
- -
-
- -
-
-
- - - I agree all - {msgError}
} +
+
+ + + I agree with all + + terms and condition + + +
+
+
+
+ +
-
- -
-

- Already have account? - - Log In - -

@@ -150,3 +260,32 @@ export default function SignUp() { ); } + +const SelectOption = ({ + label, + name, + inputHandler, + value, + data // passing the data from parent +}) => { + return ( +
+
+ +
+
+ +
+
+ ) +} diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx index 8fe4ade..3e14056 100644 --- a/src/components/Helpers/Inputs/InputCom/index.jsx +++ b/src/components/Helpers/Inputs/InputCom/index.jsx @@ -8,9 +8,11 @@ export default function InputCom({ name, placeholder, iconName, + passIcon, inputHandler, value, - forgotPassword + forgotPassword, + onClick }) { return (
@@ -25,7 +27,7 @@ export default function InputCom({ )} {forgotPassword && Forgot Password?}
-
+
{iconName && ( -
+
)} + {passIcon && ( +
+ +
+ )}
); diff --git a/src/components/Referral/ReferralDisplay.jsx b/src/components/Referral/ReferralDisplay.jsx index 033b4f7..2b514e0 100644 --- a/src/components/Referral/ReferralDisplay.jsx +++ b/src/components/Referral/ReferralDisplay.jsx @@ -1,14 +1,61 @@ -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { toast } from "react-toastify"; +import usersService from '../../services/UsersService'; function ReferralDisplay() { - let [referralList, setReferralList] = useState([]) // dummy remove later and call from API + const apiCall = new usersService() // GET API CALL + const navigate = useNavigate() + + let [refHistoryReload, setRefHistoryReload] = useState(false) // Determines when referral history reloads + + // STATE TO HOLD REFERRAL HISTORY + let [referralList, setReferralList] = useState({ + loading: true, + error: false, + data: [] + }) + + let [error, setError] = useState({message: '', loading: false}) // for displaying error message on the page + + //function to call referral history API + const allReferrals = () => { + setReferralList({ + loading: true, + error: false, + data: [] + }) + apiCall.getReferralHx().then((res)=>{ + setReferralList((prev)=>{ + return {...prev, loading: false, data:[...res.data.result_list]} + }) + }).catch((error)=>{ + setReferralList(prev => ({...prev, loading: false, error: true})) + }) + } + + //FUNCTION TO SEND REFERRAL MESSAGE + const sendReferralMsg = (postData) => { + apiCall.sendReferralMsg(postData).then((res)=>{ + if(res.data.internal_return < 0){ + setError({message:'Email already referred', loading: false}) + return + }else{ + setInputs({ firstname: '', lastname: '', email: '',}) + toast.success("Message Sent"); + setError({message:'', loading: false}) + setRefHistoryReload(prev => !prev) + } + }).catch((error)=>{ + setError({message:'Opps! an error occured, try again later', loading: false}) + }) + } //STATE FOR CONTROLLED INPUTS let [inputs, setInputs] = useState({ firstname: '', lastname: '', - email: '', - status: 'pending' + email: '' }) // FUNCTION TO HANDLE INPUT CHANGE @@ -19,17 +66,30 @@ function ReferralDisplay() { //FUNCTION TO HANDLE SUBMIT const handleSubmit = (e) => { e.preventDefault(); + setError({message: '', loading: true}) + let {firstname, lastname, email} = inputs + if(!firstname || !lastname || !email){ + setError({message: 'Please fill all fields', loading: false}) + return + } - //valid inputs before submitting. Just for texting remove later - setReferralList(prev => [...prev, inputs]) - setInputs({ - firstname: '', - lastname: '', - email: '', - status: 'pending' - }) + var postData = { + uid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + action: 11032, + ref_firstname: firstname, + ref_lastname: lastname, + ref_email: email + }; + + sendReferralMsg(postData) // FUNCTION TO SEND REFERRAL MESSAGE } + useEffect(()=>{ + allReferrals() + }, [refHistoryReload]) + return (
@@ -43,7 +103,6 @@ function ReferralDisplay() { name='firstname' type="text" placeholder='Firstname' - required onChange={handleChange} />
@@ -55,7 +114,6 @@ function ReferralDisplay() { name='lastname' type="text" placeholder='Lastname' - required onChange={handleChange} />
@@ -67,46 +125,80 @@ function ReferralDisplay() { name='email' type="email" placeholder='Email' - required onChange={handleChange} />
+ {error.message != '' &&

{error.message}

}
+ {error.loading ? +
+
+ +
+
+ : + }
-
-

Referral List

+
+

Referral List

+ {referralList.loading ? + ( +
+
+ +
+
+ ) + : + ( - - - + + + - {referralList.length ? - referralList.map(item => ( - - - - + {referralList.data.length ? + referralList.data.map((item, index) => ( + + + + )) : - ( + ( + referralList.error ? + + + + : + ( + ) + ) }
Added/NameEmailStatusAdded/NameEmailStatus
{item.firstname} {item.lastname}{item.email}{item.status}
{item.added_date} / {item.firstname} {item.lastname}{item.email}{item.status}
Opps! couldn't get referral history. Try reloading the page
No Item Found on referral List
+ ) + }
diff --git a/src/index.css b/src/index.css index b2004bf..313642e 100644 --- a/src/index.css +++ b/src/index.css @@ -712,4 +712,18 @@ TODO: Responsive =========================== .content-wrapper.login{ --bg-color: 255,255,255; background: linear-gradient(90deg, rgba(236,237,240,1) 0%, rgba(255,255,255,1) 50%, rgba(236,237,240,1) 100%); +} + +.content-wrapper select { + /* for Firefox */ + -moz-appearance: none; + /* for Chrome */ + -webkit-appearance: none; + appearance: none; + padding-inline: 1rem; +} + +/* For IE10 */ +.content-wrapper select::-ms-expand { + display: none; } \ No newline at end of file diff --git a/src/services/UsersService.js b/src/services/UsersService.js index 433c132..042067d 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -48,9 +48,9 @@ class usersService { return this.postAuxEnd("/apigate", null); } - CreateUser(){ - // localStorage.setItem("session_token", ``); - return this.postAuxEnd("/createuser", null); + CreateUser(reqData){ + localStorage.setItem("session_token", ``); + return this.postAuxEnd("/createuser", reqData); } getLoadProfile(){ @@ -176,6 +176,22 @@ class usersService { action: 15046 }; return this.postAuxEnd("/paymenthx", postData); + //END POINT CALL FOR REFERRAL HISTORY + getReferralHx(){ + var postData = { + uid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + offset: 1, + limit :100, + action: 11064 + }; + return this.postAuxEnd("/refferhx", postData); + } + + //END POINT CALL FOR SENDING REFERRAL MESSAGE + sendReferralMsg(postData){ + return this.postAuxEnd("/sendreferral", postData); } getCouponRedeem(){ @@ -189,6 +205,11 @@ class usersService { return this.postAuxEnd("/couponredeem", postData); } + // Country Data {GET} + getSignupCountryData() { + return this.postAuxEnd("/signupcountry", null); + } + /* - 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username) - 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(password)