web-menu-react-version-/src/pages/login/page.tsx

/* eslint-disable @typescript-eslint/no-explicit-any */

import { Button, Form, Input, message } from "antd";
import DatePickerBottomSheet from "components/CustomBottomSheet/DatePickerBottomSheet";
import LoginManIcon from "components/Icons/LoginManIcon";
import ProPhoneInput from "components/ProPhoneInput";
import ProText from "components/ProText";
import ProTitle from "components/ProTitle";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import "react-phone-input-2/lib/style.css";
import { useNavigate, useParams } from "react-router-dom";
import { useSendOtpMutation } from "redux/api/auth";
import { useAppSelector } from "redux/hooks";
import { colors, DisabledColor, ProGray1 } from "ThemeConstants";
import styles from "./login.module.css";

export default function LoginPage() {
  const { t } = useTranslation();
  const { isRTL } = useAppSelector((state) => state.locale);
  const { themeName } = useAppSelector((state) => state.theme);
  const [form] = Form.useForm();
  const [sendOtp, { isLoading }] = useSendOtpMutation();
  const { subdomain } = useParams();

  // const [phone, setPhone] = useState<string>("");
  const [selectedDate, setSelectedDate] = useState<string>("");
  const [isOpen, setIsOpen] = useState(false);
  const navigate = useNavigate();

  const handleLogin = async () => {
    form.validateFields().then(() => {
      if (form.getFieldsValue()) {
        localStorage.setItem("userPhone", form.getFieldValue("phone"));
        sendOtp(form.getFieldsValue()).then((response: any) => {
          message.info(t("login.OTPSentToYourPhoneNumber"));
          navigate(`/${subdomain}/otp`);
          localStorage.setItem("otp", response.data.result.otp);
        });
      }
    });
  };

  return (
    <div
      style={{
        padding: 24,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        height: "100vh",
      }}
      className={styles.loginPage}
    >
      <ProTitle
        level={5}
        style={{ textAlign: "center", margin: "20px 0 10% 0", fontSize: 18 }}
      >
        {t("login.singup/Login")}
      </ProTitle>

      <div
        style={{
          position: "relative",
          marginBottom: 20,
          [isRTL ? "right" : "left"]: "50%",
          width: "fit-content",
          transform: isRTL ? "translateX(50%)" : "translateX(-50%)",
        }}
      >
        <LoginManIcon />
      </div>

      <ProTitle level={5}>{t("login.EnterYourNumber")} 👋</ProTitle>
      <ProText style={{ fontSize: 12, color: ProGray1 }}>
        {t("login.WeWillSendYouAWhatsAppMessageWithAOneTimeVerificationCode")}
      </ProText>

      <Form
        layout="vertical"
        style={{ marginTop: 20 }}
        name="loginForm"
        form={form}
      >
        <Form.Item
          label={t("login.name")}
          name="name"
          rules={[{ required: true, message: "" }]}
        >
          <Input
            placeholder={t("login.EnterYourName")}
            size="large"
            style={{
              height: 50,
              fontSize: 14,
            }}
          />
        </Form.Item>

        <Form.Item
          label={t("login.date")}
          name="date"
          rules={[{ required: true, message: "" }]}
        >
          <Input
            placeholder={t("login.DateOfBirth")}
            size="large"
            onClick={() => setIsOpen(true)}
            readOnly
            value={selectedDate}
            style={{
              cursor: "pointer",
              height: 50,
              fontSize: 14,
            }}
          />
        </Form.Item>

        <ProPhoneInput label={t("login.phone")} propName="phone" />

        <Form.Item label={null}>
          <Button
            onClick={handleLogin}
            type="primary"
            size="large"
            loading={isLoading}
            style={{
              width: "100%",
              borderRadius: 1000,
              backgroundColor: isLoading
                ? themeName === "light"
                  ? "rgba(233, 233, 233, 1)"
                  : DisabledColor
                : colors.primary,
              color: "#FFF",
              height: 50,
              border: "none",
              marginTop: "2rem",
              boxShadow: "none",
            }}
            disabled={isLoading}
            htmlType="submit"
          >
            {t("login.sendCode")}
          </Button>
        </Form.Item>
      </Form>

      <DatePickerBottomSheet
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onDateSelect={(date) => {
          const formattedDate = `${date.month}/${date.day}/${date.year}`;
          setSelectedDate(formattedDate);
          form.setFieldValue("date", formattedDate);
        }}
        initialDate={new Date(1990, 0, 1)}
      />
    </div>
  );
}