front-hub/src/pages/Payment/Payment.tsx

import {
  Box,
  Button,
  IconButton,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import SectionWrapper from "@components/SectionWrapper";
import PaymentMethodCard from "./PaymentMethodCard";
import mastercardLogo from "@root/assets/bank-logo/logo-mastercard.png";
import visaLogo from "@root/assets/bank-logo/logo-visa.png";
import qiwiLogo from "@root/assets/bank-logo/logo-qiwi.png";
import mirLogo from "@root/assets/bank-logo/logo-mir.png";
import tinkoffLogo from "@root/assets/bank-logo/logo-tinkoff.png";
import rsPayLogo from "@root/assets/bank-logo/rs-pay.png";
import { cardShadow } from "@root/utils/theme";
import { useEffect, useLayoutEffect, useState } from "react";
import InputTextfield from "@root/components/InputTextfield";
import { sendPayment, sendRSPayment } from "@root/api/wallet";
import { getMessageFromFetchError } from "@frontend/kitui";
import { enqueueSnackbar } from "notistack";
import { currencyFormatter } from "@root/utils/currencyFormatter";
import { useLocation, useNavigate } from "react-router-dom";
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
import { useUserStore } from "@root/stores/user";
import { VerificationStatus } from "@root/model/account";
import { WarnModal } from "./WarnModal";
import { SorryModal } from "./SorryModal";

type PaymentMethod = {
  label: string;
  name: string;
  image: string;
  unpopular?: boolean;
};

const paymentMethods: PaymentMethod[] = [
  { label: "Mastercard", name: "mastercard", image: mastercardLogo },
  { label: "Visa", name: "visa", image: visaLogo },
  { label: "QIWI Кошелек", name: "qiwi", image: qiwiLogo },
  { label: "Мир", name: "mir", image: mirLogo },
  { label: "Тинькофф", name: "tinkoff", image: tinkoffLogo },
];

type PaymentMethodType = (typeof paymentMethods)[number]["name"];

export default function Payment() {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const upSm = useMediaQuery(theme.breakpoints.up("sm"));
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));

  const [selectedPaymentMethod, setSelectedPaymentMethod] =
    useState<PaymentMethodType | null>(null);
  const [warnModalOpen, setWarnModalOpen] = useState<boolean>(false);
  const [sorryModalOpen, setSorryModalOpen] = useState<boolean>(false);
  const [paymentValueField, setPaymentValueField] = useState<string>("0");
  const [paymentLink, setPaymentLink] = useState<string>("");
  const [fromSquiz, setIsFromSquiz] = useState<boolean>(false);
  const location = useLocation();
  const verificationStatus = useUserStore((state) => state.verificationStatus);
  const navigate = useNavigate();

  const notEnoughMoneyAmount =
    (location.state?.notEnoughMoneyAmount as number) ?? 0;

  const paymentValue = parseFloat(paymentValueField) * 100;

  useLayoutEffect(() => {
    setPaymentValueField((notEnoughMoneyAmount / 100).toString());
    const params = new URLSearchParams(window.location.search);
    const fromSquiz = params.get("action");
    if (fromSquiz === "squizpay") {
      setIsFromSquiz(true);
      setPaymentValueField((Number(params.get("dif") || "0") / 100).toString());
    }
    history.pushState(null, document.title, "/payment");
    console.log(fromSquiz);
  }, []);

  useEffect(() => {
    setPaymentLink("");
  }, [selectedPaymentMethod]);

  async function handleChoosePaymentClick() {
    if (Number(paymentValueField) === 0) {
      return;
    }

    if (selectedPaymentMethod !== "rspay") {
      const [sendPaymentResponse, sendPaymentError] = await sendPayment({
        fromSquiz,
      });

      if (sendPaymentError) {
        return enqueueSnackbar(sendPaymentError);
      }

      if (sendPaymentResponse) {
        setPaymentLink(sendPaymentResponse.link);
      }

      return;
    }

  }

  const handleCustomBackNavigation = useHistoryTracker();

  return (
    <SectionWrapper
      maxWidth="lg"
      sx={{
        mt: "25px",
        mb: "70px",
        px: isTablet ? (upMd ? "40px" : "18px") : "20px",
      }}
    >
      <Box
        sx={{
          mt: "20px",
          mb: "40px",
          display: "flex",
          gap: "10px",
        }}
      >
        {!upMd && (
          <IconButton
            onClick={handleCustomBackNavigation}
            sx={{ p: 0, height: "28px", width: "28px", color: "black" }}
          >
            <ArrowBackIcon />
          </IconButton>
        )}
        <Typography variant="h4">Способ оплаты</Typography>
      </Box>
      {!upMd && (
        <Typography variant="body2" mb="30px">
          Выберите способ оплаты
        </Typography>
      )}
      <Box
        sx={{
          backgroundColor: upMd ? "white" : undefined,
          display: "flex",
          flexDirection: upMd ? "row" : "column",
          borderRadius: "12px",
          boxShadow: upMd ? cardShadow : undefined,
        }}
      >
        <Box
          sx={{
            width: upMd ? "68.5%" : undefined,
            p: upMd ? "20px" : undefined,
            display: "flex",
            flexDirection: upSm ? "row" : "column",
            flexWrap: "wrap",
            gap: upMd ? "14px" : "20px",
            alignContent: "start",
          }}
        >
          {paymentMethods.map(({ name, label, image, unpopular = false }) => (
            <PaymentMethodCard
              isSelected={false}
              key={name}
              label={label}
              image={image}
              onClick={() => {
                setSorryModalOpen(true)
                // setSelectedPaymentMethod(name)
              }}
              unpopular={true}
            />
          ))}
          <PaymentMethodCard
            isSelected={false}
            label={"Расчётный счёт"}
            image={rsPayLogo}
            onClick={async() => {

              if (verificationStatus !== VerificationStatus.VERIFICATED) {
                setWarnModalOpen(true);

                return;
              }
              console.log(paymentValueField)
              if (Number(paymentValueField) < 900){
                  enqueueSnackbar("Минимальная сумма 900р")

                  return;
              }

              const sendRSPaymentError = await sendRSPayment(Number(paymentValueField));

              if (sendRSPaymentError) {
                return enqueueSnackbar(sendRSPaymentError);
              }

              enqueueSnackbar(
                "Cпасибо за заявку, в течении 24 часов вам будет выставлен счёт для оплаты услуг."
              );

              navigate("/settings");
            }}
            unpopular={false}
          />
        </Box>
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            alignItems: "start",
            color: theme.palette.gray.dark,
            width: upMd ? "31.5%" : undefined,
            p: upMd ? "20px" : undefined,
            pl: upMd ? "33px" : undefined,
            mt: upMd ? undefined : "30px",
            borderLeft: upMd
              ? `1px solid ${theme.palette.gray.main}`
              : undefined,
          }}
        >
          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
              maxWidth: "85%",
            }}
          >
            {upMd && <Typography mb="56px">Выберите способ оплаты</Typography>}
            <Typography mb="20px">К оплате</Typography>
            {paymentLink ? (
              <Typography
                sx={{
                  fontWeight: 500,
                  fontSize: "20px",
                  lineHeight: "48px",
                  mb: "28px",
                }}
              >
                {currencyFormatter.format(paymentValue / 100)}
              </Typography>
            ) : (
              <InputTextfield
                TextfieldProps={{
                  placeholder: "К оплате",
                  value: paymentValueField,
                  type: "number",
                }}
                onChange={(e) => setPaymentValueField(e.target.value)}
                id="payment-amount"
                gap={upMd ? "16px" : "10px"}
                color={"#F2F3F7"}
                FormInputSx={{ mb: "28px" }}
              />
            )}
          </Box>
          {paymentLink ? (
            <Button
              variant="pena-outlined-light"
              component="a"
              href={paymentLink}
              sx={{
                mt: "auto",
                color: "black",
                border: `1px solid ${theme.palette.purple.main}`,
                "&:hover": {
                  backgroundColor: theme.palette.purple.dark,
                  border: `1px solid ${theme.palette.purple.dark}`,
                },
              }}
            >
              Оплатить
            </Button>
          ) : (
            <Button
              variant="pena-outlined-light"
              disabled={!isFinite(paymentValue)}
              onClick={handleChoosePaymentClick}
              sx={{
                mt: "auto",
                color: "black",
                border: `1px solid ${theme.palette.purple.main}`,
                "&:hover": {
                  color: "white",
                },
                "&:active": {
                  color: "white",
                },
              }}
            >
              Выбрать
            </Button>
          )}
        </Box>
      </Box>
      <WarnModal open={warnModalOpen} setOpen={setWarnModalOpen} />
      <SorryModal open={sorryModalOpen} setOpen={setSorryModalOpen} />
    </SectionWrapper>
  );
}