Merge branch 'dev' into 'staging'

Dev

See merge request frontend/marketplace!146

src/components/FloatingSupportChat/FloatingSupportChat.tsx

@@ -1,4 +1,4 @@
-import { useState, forwardRef } from "react";
+import { useState, useEffect, forwardRef } from "react";
 import {
   Box,
   Fab,
@@ -38,6 +38,7 @@ const Transition = forwardRef(function Transition(
 });
 
 export default function FloatingSupportChat() {
+  const [monitorType, setMonitorType] = useState<"desktop" | "mobile" | "">("");
   const [isChatOpened, setIsChatOpened] = useState<boolean>(false);
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(800));
@@ -71,6 +72,24 @@ export default function FloatingSupportChat() {
     },
   };
 
+  useEffect(() => {
+    const onResize = () => {
+      if (document.fullscreenElement) {
+        setMonitorType(isMobile ? "mobile" : "desktop");
+
+        return;
+      }
+
+      setMonitorType("");
+    };
+
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, [isMobile]);
+
   return (
     <Box
       sx={{
@@ -85,17 +104,17 @@ export default function FloatingSupportChat() {
       }}
     >
       <Chat
-        open={isChatOpened && !isMobile}
+        open={isChatOpened && (monitorType === "desktop" || !isMobile)}
         sx={{ alignSelf: "start", width: "clamp(200px, 100%, 400px)" }}
       />
       <Dialog
         fullScreen
-        open={isChatOpened && isMobile}
+        open={isChatOpened && (monitorType === "mobile" || isMobile)}
         onClose={() => setIsChatOpened(false)}
         TransitionComponent={Transition}
       >
         <Chat
-          open={isChatOpened && isMobile}
+          open={isChatOpened && (monitorType === "mobile" || isMobile)}
           onclickArrow={() => setIsChatOpened(false)}
         />
       </Dialog>

src/model/wallet.ts

@@ -1,5 +1,5 @@
 export interface SendPaymentRequest {
-    type: "bankCard";
+    type: string;
     currency: string;
     amount: number;
     bankCard: {

src/pages/Payment/Payment.tsx

@@ -9,10 +9,10 @@ import {
 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 umoneyLogo from "@root/assets/bank-logo/umaney.png";
+import b2bLogo from "@root/assets/bank-logo/b2b.png";
+import spbLogo from "@root/assets/bank-logo/spb.png";
+import sberpayLogo from "@root/assets/bank-logo/sberpay.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";
@@ -37,11 +37,11 @@ type PaymentMethod = {
 };
 
 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 },
+  { label: "Тинькофф", name: "tinkoffBank", image: tinkoffLogo },
+  { label: "СБП", name: "sbp", image: spbLogo },
+  { label: "SberPay", name: "sberbank", image: sberpayLogo },
+  { label: "B2B Сбербанк", name: "b2bSperbank", image: b2bLogo },
+  { label: "ЮMoney", name: "yoomoney", image: umoneyLogo },
 ];
 
 type PaymentMethodType = (typeof paymentMethods)[number]["name"];
@@ -53,7 +53,7 @@ export default function Payment() {
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
 
   const [selectedPaymentMethod, setSelectedPaymentMethod] =
-    useState<PaymentMethodType | null>("rspay");
+    useState<PaymentMethodType | null>("");
   const [warnModalOpen, setWarnModalOpen] = useState<boolean>(false);
   const [sorryModalOpen, setSorryModalOpen] = useState<boolean>(false);
   const [paymentValueField, setPaymentValueField] = useState<string>("0");
@@ -95,9 +95,50 @@ export default function Payment() {
 
     if (selectedPaymentMethod !== "rspay") {
       const [sendPaymentResponse, sendPaymentError] = await sendPayment({
-        fromSquiz,
+          fromSquiz,
+          body: {
+              type: selectedPaymentMethod,
+              amount: Number(paymentValueField),
+              currency: "RUB",
+              bankCard: {
+                  number: "RUB",
+                  expiryYear: "2021",
+                  expiryMonth: "05",
+                  csc: "05",
+                  cardholder: "IVAN IVANOV",
+              },
+              phoneNumber: "79000000000",
+              login: "login_test",
+              returnUrl: window.location.origin + "/wallet",
+          },
       });
 
+      if (selectedPaymentMethod === "rspay") {
+          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");
+      }
+
       if (sendPaymentError) {
         return enqueueSnackbar(sendPaymentError);
       }
@@ -172,10 +213,9 @@ export default function Payment() {
               label={label}
               image={image}
               onClick={() => {
-                setSorryModalOpen(true)
-                // setSelectedPaymentMethod(name)
+                setSelectedPaymentMethod(name)
               }}
-              unpopular={true}
+              unpopular={false}
             />
           ))}
           <PaymentMethodCard
@@ -183,30 +223,7 @@ export default function Payment() {
             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");
+                setSelectedPaymentMethod("rspay")
             }}
             unpopular={false}
           />
@@ -262,49 +279,7 @@ export default function Payment() {
               />
             )}
           </Box>
-            <Button
-              variant="pena-outlined-light"
-              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");
-              
-              }}
-              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>
-          {/* {paymentLink ? (
+           {paymentLink ? (
             <Button
               variant="pena-outlined-light"
               component="a"
@@ -340,7 +315,7 @@ export default function Payment() {
             >
               Выбрать
             </Button>
-          )} */}
+          )}
         </Box>
       </Box>
       <WarnModal open={warnModalOpen} setOpen={setWarnModalOpen} />