user-front/src/components/register-navy/SendToken.jsx

import LinkRouting from "@/core/components/LinkRouting";
import Notifications from "@/core/components/notifications";
import StyledForm from "@/core/components/StyledForm";
import { REGISTER } from "@/core/data/apiRoutes";
import CenterLayout from "@/layouts/CenterLayout";
import FullPageLayout from "@/layouts/FullPageLayout";
import useDirection from "@/lib/app/hooks/useDirection";
import useUser from "@/lib/app/hooks/useUser";
import LoginIcon from "@mui/icons-material/Login";
import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
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 * as Yup from "yup";

const SendToken = ({
  PhoneNumber,
  nationalId,
  navganId,
  typeId,
  setOtpToken,
}) => {
  const t = useTranslations();
  const { directionApp } = useDirection();
  const { setToken } = useUser();

  const initialValues = {
    phone_number: PhoneNumber,
    national_id: nationalId,
    navgan_id: navganId,
    type_id: typeId,
    verification_code: "",
  };
  const validationSchema = Yup.object().shape({
    verification_code: Yup.string().required(
      t("RegisterPage.error_message_required")
    ),
  });

  const handleSubmit = async (values, props) => {
    Notifications(directionApp, t, undefined);
    await axios
      .post(REGISTER, {
        phone_number: values.phone_number,
        national_id: values.national_id,
        navgan_id: values.navgan_id,
        type_id: values.type_id,
        verification_code: values.verification_code,
      })
      .then(function (response) {
        Notifications(directionApp, t, response);
        setToken(response.data.token);
      })
      .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")}
                      priority
                    />
                  </Box>
                  <Typography margin={2} variant="h4" textAlign="center">
                    {t("register_navy")}
                  </Typography>
                  <StyledForm sx={{ width: "100%" }}>
                    <Stack spacing={3} sx={{ p: 2 }}>
                      <Box
                        sx={{
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "space-between",
                        }}
                      >
                        <Typography variant="button">
                          {t("RegisterPage.sent_token_to")}: {PhoneNumber}{" "}
                        </Typography>
                        <Button
                          size="small"
                          startIcon={<ChangeCircleIcon />}
                          variant="outlined"
                          onClick={() => setOtpToken(false)}
                        >
                          {t("RegisterPage.change_phone_number")}
                        </Button>
                      </Box>
                      <Field
                        as={TextField}
                        name="verification_code"
                        variant="outlined"
                        label={t("RegisterPage.text_field_verification_code")}
                        placeholder={t(
                          "RegisterPage.text_field_enter_your_verification_code"
                        )}
                        type={"text"}
                        error={
                          props.touched.verification_code &&
                          props.errors.verification_code
                            ? true
                            : false
                        }
                        fullWidth
                        helperText={
                          props.touched.verification_code
                            ? props.errors.verification_code
                            : null
                        }
                      />
                      <Button
                        fullWidth
                        type="submit"
                        variant="contained"
                        size="large"
                        endIcon={<LoginIcon />}
                        disabled={props.isSubmitting ? true : false}
                      >
                        {t("RegisterPage.button_submit")}
                      </Button>
                    </Stack>
                  </StyledForm>
                </Stack>
              )}
            </Formik>
          </Paper>
        </Container>
      </CenterLayout>
    </FullPageLayout>
  );
};

export default SendToken;