|
@ -4,26 +4,29 @@ import axiosInstance from "@/components/api/axios"; |
|
|
import { useUserContext } from "@/components/contexts/userContext"; |
|
|
import { useUserContext } from "@/components/contexts/userContext"; |
|
|
import ButtonPrimary from "@/shared/ButtonPrimary"; |
|
|
import ButtonPrimary from "@/shared/ButtonPrimary"; |
|
|
import { useRouter } from "next/navigation"; |
|
|
import { useRouter } from "next/navigation"; |
|
|
import { useContext, useState } from "react"; |
|
|
|
|
|
|
|
|
import { useEffect, useState } from "react"; |
|
|
import { FaWhatsapp } from "react-icons/fa"; |
|
|
import { FaWhatsapp } from "react-icons/fa"; |
|
|
import { MdOutlineTextsms } from "react-icons/md"; |
|
|
import { MdOutlineTextsms } from "react-icons/md"; |
|
|
|
|
|
|
|
|
function SelectMethods() { |
|
|
function SelectMethods() { |
|
|
const router = useRouter(); |
|
|
const router = useRouter(); |
|
|
const { user } = useUserContext(); |
|
|
|
|
|
// if (Object.keys(user).length) {
|
|
|
|
|
|
// return router.replace("/");
|
|
|
|
|
|
// }
|
|
|
|
|
|
const { form } = useUserContext(); |
|
|
|
|
|
|
|
|
const { user, form } = useUserContext(); |
|
|
|
|
|
|
|
|
const [selectedMethod, setSelectedMethod] = useState(""); |
|
|
const [selectedMethod, setSelectedMethod] = useState(""); |
|
|
const [error, setError] = useState(""); |
|
|
const [error, setError] = useState(""); |
|
|
const [loading, setLoading] = useState(false); |
|
|
const [loading, setLoading] = useState(false); |
|
|
|
|
|
|
|
|
const enabled = { |
|
|
|
|
|
watsapp: form.verification_methodes.join().includes("watsapp"), |
|
|
|
|
|
sms: form.verification_methodes.join().includes("sms"), |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
// Initialize 'enabled' with default values
|
|
|
|
|
|
const [enabled, setEnabled] = useState({ watsapp: false, sms: false }); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
// Safely access 'form.verification_methods' and update 'enabled'
|
|
|
|
|
|
setEnabled({ |
|
|
|
|
|
watsapp: form.verification_methodes?.includes("watsapp") ?? false, |
|
|
|
|
|
sms: form.verification_methodes?.includes("sms") ?? false, |
|
|
|
|
|
}); |
|
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
const handleMethodChange = (e) => { |
|
|
const handleMethodChange = (e) => { |
|
|
if (!enabled.watsapp && !enabled.sms) { |
|
|
if (!enabled.watsapp && !enabled.sms) { |
|
|
setSelectedMethod(""); |
|
|
setSelectedMethod(""); |
|
@ -35,65 +38,46 @@ function SelectMethods() { |
|
|
setSelectedMethod(e.target.value); |
|
|
setSelectedMethod(e.target.value); |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
console.log(form); |
|
|
|
|
|
|
|
|
|
|
|
const handleSubmit = async () => { |
|
|
const handleSubmit = async () => { |
|
|
setLoading(true); |
|
|
setLoading(true); |
|
|
switch (form.method) { |
|
|
|
|
|
case "register": |
|
|
|
|
|
try { |
|
|
|
|
|
const response = await axiosInstance.post( |
|
|
|
|
|
`/api/account/register/`, |
|
|
|
|
|
{ |
|
|
|
|
|
fullname: form.name, |
|
|
|
|
|
phone_number: form.phoneNumber, |
|
|
|
|
|
verification_method: selectedMethod, |
|
|
|
|
|
range_phone: form.countryCode, |
|
|
|
|
|
password: form.password, |
|
|
|
|
|
password_confirmation: form.confirmPassword, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
headers: { |
|
|
|
|
|
Accept: "application/json", |
|
|
|
|
|
}, |
|
|
|
|
|
} |
|
|
|
|
|
); |
|
|
|
|
|
response.status === 202 && |
|
|
|
|
|
(setLoading(false), router.replace("signup/otp-code")); |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
setError(error); |
|
|
|
|
|
console.log(error); |
|
|
|
|
|
|
|
|
try { |
|
|
|
|
|
const payload = { |
|
|
|
|
|
phone_number: form.phoneNumber, |
|
|
|
|
|
verification_method: selectedMethod, |
|
|
|
|
|
range_phone: form.countryCode, |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
if (form.method === "register") { |
|
|
|
|
|
payload.fullname = form.name; |
|
|
|
|
|
payload.password = form.password; |
|
|
|
|
|
payload.password_confirmation = form.confirmPassword; |
|
|
|
|
|
|
|
|
|
|
|
const response = await axiosInstance.post(`/api/account/register/`, payload, { |
|
|
|
|
|
headers: { Accept: "application/json" }, |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
if (response.status === 202) { |
|
|
setLoading(false); |
|
|
setLoading(false); |
|
|
|
|
|
router.replace("signup/otp-code"); |
|
|
} |
|
|
} |
|
|
break; |
|
|
|
|
|
case "reset": |
|
|
|
|
|
try { |
|
|
|
|
|
const response = await axiosInstance.post( |
|
|
|
|
|
`/api/account/recover/`, |
|
|
|
|
|
{ |
|
|
|
|
|
phone_number: form.phoneNumber, |
|
|
|
|
|
verification_method: selectedMethod, |
|
|
|
|
|
range_phone: form.countryCode, |
|
|
|
|
|
password: form.password, |
|
|
|
|
|
password_confirmation: form.confirmPassword, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
headers: { |
|
|
|
|
|
Accept: "application/json", |
|
|
|
|
|
}, |
|
|
|
|
|
} |
|
|
|
|
|
); |
|
|
|
|
|
response.status === 202 && |
|
|
|
|
|
(setLoading(false), router.replace("signup/otp-code")); |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
setError(error); |
|
|
|
|
|
console.log(error); |
|
|
|
|
|
|
|
|
} else if (form.method === "reset") { |
|
|
|
|
|
payload.password = form.password; |
|
|
|
|
|
payload.password_confirmation = form.confirmPassword; |
|
|
|
|
|
|
|
|
|
|
|
const response = await axiosInstance.post(`/api/account/recover/`, payload, { |
|
|
|
|
|
headers: { Accept: "application/json" }, |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
if (response.status === 202) { |
|
|
setLoading(false); |
|
|
setLoading(false); |
|
|
|
|
|
router.replace("signup/otp-code"); |
|
|
} |
|
|
} |
|
|
break; |
|
|
|
|
|
|
|
|
|
|
|
default: |
|
|
|
|
|
break; |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
setError(error); |
|
|
|
|
|
console.log(error); |
|
|
|
|
|
setLoading(false); |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
@ -104,6 +88,7 @@ function SelectMethods() { |
|
|
</h2> |
|
|
</h2> |
|
|
|
|
|
|
|
|
<form className="grid grid-cols-1 gap-6"> |
|
|
<form className="grid grid-cols-1 gap-6"> |
|
|
|
|
|
{/* WhatsApp Option */} |
|
|
<div |
|
|
<div |
|
|
className={`${ |
|
|
className={`${ |
|
|
!enabled.watsapp ? "opacity-40" : "" |
|
|
!enabled.watsapp ? "opacity-40" : "" |
|
@ -126,12 +111,13 @@ function SelectMethods() { |
|
|
name="method" |
|
|
name="method" |
|
|
value="whatsapp" |
|
|
value="whatsapp" |
|
|
checked={selectedMethod === "whatsapp"} |
|
|
checked={selectedMethod === "whatsapp"} |
|
|
onChange={(e) => handleMethodChange(e)} |
|
|
|
|
|
|
|
|
onChange={handleMethodChange} |
|
|
disabled={!enabled.watsapp} |
|
|
disabled={!enabled.watsapp} |
|
|
className="cursor-pointer form-radio accent-black text-black focus:ring-primary-500 focus:ring-2" |
|
|
className="cursor-pointer form-radio accent-black text-black focus:ring-primary-500 focus:ring-2" |
|
|
/> |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
{/* SMS Option */} |
|
|
<div |
|
|
<div |
|
|
className={`${ |
|
|
className={`${ |
|
|
!enabled.sms ? "opacity-40" : "" |
|
|
!enabled.sms ? "opacity-40" : "" |
|
@ -154,14 +140,16 @@ function SelectMethods() { |
|
|
name="method" |
|
|
name="method" |
|
|
value="sms" |
|
|
value="sms" |
|
|
checked={selectedMethod === "sms"} |
|
|
checked={selectedMethod === "sms"} |
|
|
onChange={(e) => handleMethodChange(e)} |
|
|
|
|
|
|
|
|
onChange={handleMethodChange} |
|
|
disabled={!enabled.sms} |
|
|
disabled={!enabled.sms} |
|
|
className="cursor-pointer form-radio accent-black text-black focus:ring-primary-500 focus:ring-2" |
|
|
className="cursor-pointer form-radio accent-black text-black focus:ring-primary-500 focus:ring-2" |
|
|
/> |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
{/* Continue Button */} |
|
|
|
|
|
|
|
|
{/* Error Message */} |
|
|
{error && <p className="text-xs text-red-500">{error.message}</p>} |
|
|
{error && <p className="text-xs text-red-500">{error.message}</p>} |
|
|
|
|
|
|
|
|
|
|
|
{/* Continue Button */} |
|
|
<ButtonPrimary |
|
|
<ButtonPrimary |
|
|
loading={loading} |
|
|
loading={loading} |
|
|
onClick={(e) => { |
|
|
onClick={(e) => { |
|
|