user-front/src/components/register-welfare-services/SendUserData.jsx

import LinkRouting from "@/core/components/LinkRouting";
import Notifications from "@/core/components/notifications";
import StyledForm from "@/core/components/StyledForm";
import { REGISTER_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 {
  Box,
  Button,
  Container,
  Paper,
  Stack,
  TextField,
  Typography,
} from "@mui/material";
import axios from "axios";
import { Field, Formik } from "formik";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { useSearchParams } from "next/navigation";
import * as Yup from "yup";

const SendUserData = ({
  setOtpToken,
  setPhoneNumber,
  setNationalId,
  setTypeId,
}) => {
  const t = useTranslations();
  const { directionApp } = useDirection();

  const searchParams = useSearchParams();
  const backUrlDecodedPath = searchParams.get("back_url");

  const initialValues = {
    type_id: "2",
    phone_number: "",
    national_id: "",
  };
  const validationSchema = Yup.object().shape({
    phone_number: Yup.string().required(
      t("RegisterPage.error_message_required")
    ),
    national_id: Yup.string().required(
      t("RegisterPage.error_message_required")
    ),
  });

  const handleSubmit = async (values, props) => {
    Notifications(directionApp, t, undefined);
    await axios
      .post(REGISTER_SEND_OTP_TOKEN, {
        type_id: values.type_id,
        national_id: values.national_id,
        phone_number: values.phone_number,
      })
      .then(function (response) {
        Notifications(directionApp, t, response);
        setPhoneNumber(values.phone_number);
        setNationalId(values.national_id);
        setTypeId(values.type_id);
        setOtpToken(true);
      })
      .catch(function (error) {
        Notifications(directionApp, t, error.response);
        props.setSubmitting(false);
      });
  };

  return (
    <FullPageLayout sx={{ p: 1 }}>
      <CenterLayout>
        <Container maxWidth="sm">
          <Paper elevation={0}>
            <Formik
              initialValues={initialValues}
              onSubmit={handleSubmit}
              validationSchema={validationSchema}
            >
              {(props) => (
                <Stack spacing={2} sx={{ p: 2 }}>
                  <Box
                    sx={{ position: "relative", width: "100%", height: 200 }}
                  >
                    <Image
                      fill
                      src="/images/register.svg"
                      alt={t("app_name")}
                    />
                  </Box>
                  <Typography margin={2} variant="h4" textAlign="center">
                    {t("register_welfare_services")}
                  </Typography>
                  <StyledForm sx={{ width: "100%" }}>
                    <Stack spacing={3} sx={{ p: 2 }}>
                      <Field
                        as={TextField}
                        name="phone_number"
                        variant="outlined"
                        label={t("RegisterPage.text_field_phone_number")}
                        placeholder={t(
                          "RegisterPage.text_field_enter_your_phone_number"
                        )}
                        type={"text"}
                        error={
                          props.touched.phone_number &&
                          props.errors.phone_number
                            ? true
                            : false
                        }
                        fullWidth
                        helperText={
                          props.touched.phone_number
                            ? props.errors.phone_number
                            : null
                        }
                      />
                      <Field
                        as={TextField}
                        name="national_id"
                        variant="outlined"
                        label={t("RegisterPage.text_field_national_id")}
                        placeholder={t(
                          "RegisterPage.text_field_enter_your_national_id"
                        )}
                        type={"text"}
                        error={
                          props.touched.national_id && props.errors.national_id
                            ? true
                            : false
                        }
                        fullWidth
                        helperText={
                          props.touched.national_id
                            ? props.errors.national_id
                            : null
                        }
                      />
                      <Button
                        fullWidth
                        type="submit"
                        variant="contained"
                        size="large"
                        endIcon={<FingerprintIcon />}
                        disabled={props.isSubmitting ? true : false}
                      >
                        {t("RegisterPage.button_request_verification")}
                      </Button>
                    </Stack>
                  </StyledForm>
                </Stack>
              )}
            </Formik>
          </Paper>
        </Container>
      </CenterLayout>
      <Stack direction="row" alignItems="center" justifyContent="center">
        <LinkRouting
          sx={{ margin: 2 }}
          href={
            backUrlDecodedPath
              ? decodeURIComponent(backUrlDecodedPath)
              : "/login-navy"
          }
        >
          {t("RegisterPage.link_routing_back_to")}{" "}
          {t("RegisterPage.link_routing_login_navy")}
        </LinkRouting>
      </Stack>
    </FullPageLayout>
  );
};

export default SendUserData;