debug error handling in user panel and using new hooks of request instead axios

src/components/register/RequestOtp.jsx

@@ -1,18 +1,16 @@
 import LinkRouting from "@/core/components/LinkRouting";
-import Notifications from "@/core/components/notifications";
 import StyledForm from "@/core/components/StyledForm";
 import {SEND_OTP_TOKEN} from "@/core/data/apiRoutes";
 import CenterLayout from "@/layouts/CenterLayout";
 import FullPageLayout from "@/layouts/FullPageLayout";
-import useDirection from "@/lib/app/hooks/useDirection";
 import FingerprintIcon from "@mui/icons-material/Fingerprint";
 import {Button, Container, Paper, Stack, TextField, Typography,} from "@mui/material";
-import axios from "axios";
 import {Field, Formik} from "formik";
 import {useTranslations} from "next-intl";
 import {useSearchParams} from "next/navigation";
 import * as Yup from "yup";
 import SvgLogin from "@/core/components/svgs/SvgLogin";
+import useRequest from "@/lib/app/hooks/useRequest";
 
 const RequestOtpComponent = ({
                                  setOtpToken,
@@ -22,7 +20,7 @@ const RequestOtpComponent = ({
                                  initialTimerValue,
                              }) => {
     const t = useTranslations();
-    const {directionApp} = useDirection();
+    const requestServer = useRequest();
 
     const searchParams = useSearchParams();
     const backUrlDecodedPath = searchParams.get("back_url");
@@ -37,21 +35,18 @@ const RequestOtpComponent = ({
     });
 
     const handleSubmit = async (values, props) => {
-        Notifications(t, undefined);
-        await axios
-            .post(SEND_OTP_TOKEN, {
+        requestServer(SEND_OTP_TOKEN, "post", {
+            auth: false, data: {
                 phone_number: values.phone_number,
-            })
+            }
+        })
             .then(function (response) {
-                Notifications(t, response);
                 setPhoneNumber(values.phone_number);
                 setOtpToken(true);
                 setTimer(initialTimerValue);
-            })
-            .catch(function (error) {
-                Notifications(t, error.response);
-                props.setSubmitting(false);
-            });
+            }).catch(function (error) {
+            props.setSubmitting(false);
+        });
     };
 
     return (
@@ -87,10 +82,7 @@ const RequestOtpComponent = ({
                                                 )}
                                                 type={"text"}
                                                 error={
-                                                    props.touched.phone_number &&
-                                                    props.errors.phone_number
-                                                        ? true
-                                                        : false
+                                                    !!(props.touched.phone_number && props.errors.phone_number)
                                                 }
                                                 fullWidth
                                                 helperText={
@@ -105,7 +97,7 @@ const RequestOtpComponent = ({
                                                 variant="contained"
                                                 size="large"
                                                 endIcon={<FingerprintIcon/>}
-                                                disabled={props.isSubmitting ? true : false}
+                                                disabled={props.isSubmitting}
                                             >
                                                 {t("RegisterPage.button_request_verification")}
                                             </Button>