Web: Added receiving a link for payment if the user has stopped his choice.

packages/client/src/pages/PortalSettings/categories/payments/PriceCalculation.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import Text from "@docspace/components/text";
 import { inject, observer } from "mobx-react";
@@ -6,6 +6,11 @@ import { inject, observer } from "mobx-react";
 import SelectUsersCountContainer from "./sub-components/SelectUsersCountContainer";
 import TotalTariffContainer from "./sub-components/TotalTariffContainer";
 import { smallTablet } from "@docspace/components/utils/device";
+import toastr from "client/toastr";
+import AppServerConfig from "@docspace/common/constants/AppServerConfig";
+import axios from "axios";
+import { combineUrl } from "@docspace/common/utils";
+import api from "@docspace/common/api";
 
 const StyledBody = styled.div`
   border-radius: 12px;
@@ -28,12 +33,90 @@ const step = 1,
   maxUsersCount = 1000,
   maxSliderNumber = 999;
 
-const PriceCalculation = ({ t, price, rights, theme }) => {
+let timeout = null,
+  timerId = null,
+  CancelToken,
+  source;
+
+const PriceCalculation = ({
+  t,
+  price,
+  rights,
+  theme,
+  setPaymentLink,
+  portalQuota,
+  paymentLink,
+  setIsLoading,
+}) => {
   const [usersCount, setUsersCount] = useState(minUsersCount);
+  const isAlreadyPaid = !portalQuota.trial && !portalQuota.free;
+
+  const setStartLink = async () => {
+    const link = await api.portal.getPaymentLink(minUsersCount);
+    setPaymentLink(link);
+  };
+
+  useEffect(() => {
+    setStartLink();
+    return () => {
+      timerId && clearTimeout(timerId);
+      timerId = null;
+
+      timeout && clearTimeout(timeout);
+      timeout = null;
+    };
+  }, []);
 
   const onSliderChange = (e) => {
     const count = parseFloat(e.target.value);
-    count > minUsersCount ? setUsersCount(count) : setUsersCount(minUsersCount);
+    if (count > minUsersCount) {
+      setShoppingLink(count);
+      setUsersCount(count);
+    } else {
+      setShoppingLink(minUsersCount);
+      setUsersCount(minUsersCount);
+    }
+  };
+
+  const setShoppingLink = (value) => {
+    if (isAlreadyPaid || value > maxSliderNumber) {
+      timeout && clearTimeout(timeout);
+      return;
+    }
+
+    setIsLoading(true);
+
+    timeout && clearTimeout(timeout);
+    timeout = setTimeout(async () => {
+      if (source) {
+        source.cancel();
+      }
+
+      CancelToken = axios.CancelToken;
+      source = CancelToken.source();
+
+      await axios
+        .put(
+          combineUrl(AppServerConfig.apiPrefixURL, "/portal/payment/url"),
+          { quantity: { admin: value } },
+          {
+            cancelToken: source.token,
+          }
+        )
+        .then((response) => {
+          setPaymentLink(response.data.response);
+          setIsLoading(false);
+        })
+        .catch((thrown) => {
+          setIsLoading(false);
+          if (axios.isCancel(thrown)) {
+            console.log("Request canceled", thrown.message);
+          } else {
+            console.error(thrown);
+          }
+          return;
+        });
+    }, 1000);
   };
 
   const onClickOperations = (e) => {
@@ -56,7 +139,10 @@ const PriceCalculation = ({ t, price, rights, theme }) => {
       }
     }
 
-    value !== +usersCount && setUsersCount(value);
+    if (value !== +usersCount) {
+      setShoppingLink(value);
+      setUsersCount(value);
+    }
   };
   const onChangeNumber = (e) => {
     const { target } = e;
@@ -75,9 +161,36 @@ const PriceCalculation = ({ t, price, rights, theme }) => {
       return;
     }
 
+    setShoppingLink(numberValue);
     setUsersCount(numberValue);
   };
 
+  const updateMethod = async () => {
+    try {
+      timerId = setTimeout(() => {
+        setIsLoading(true);
+      }, 500);
+
+      await updatePayment();
+      toastr.success("the changes will be applied soon");
+    } catch (e) {
+      toastr.error(e);
+    }
+
+    setIsLoading(false);
+    clearTimeout(timerId);
+    timerId = null;
+  };
+
+  const onUpdateTariff = () => {
+    if (isAlreadyPaid) {
+      updateMethod();
+      return;
+    }
+
+    if (paymentLink) window.open(paymentLink, "_blank");
+  };
+
   const isDisabled = rights === "3" || rights === "2" ? true : false;
 
   const color = isDisabled ? { color: theme.text.disableColor } : {};
@@ -104,16 +217,26 @@ const PriceCalculation = ({ t, price, rights, theme }) => {
         usersCount={usersCount}
         price={price}
         isDisabled={isDisabled}
+        onClick={onUpdateTariff}
       />
     </StyledBody>
   );
 };
 
 export default inject(({ auth, payments }) => {
-  const { tariffsInfo } = payments;
+  const { tariffsInfo, setPaymentLink, paymentLink, setIsLoading } = payments;
   const { theme } = auth.settingsStore;
+  const { portalQuota } = auth;
   //const rights = "2";
   //const rights = "3";
   const rights = "1";
-  return { tariffsInfo, rights, theme };
+  return {
+    tariffsInfo,
+    rights,
+    theme,
+    setPaymentLink,
+    portalQuota,
+    paymentLink,
+    setIsLoading,
+  };
 })(observer(PriceCalculation));

packages/client/src/pages/PortalSettings/categories/payments/sub-components/TotalTariffContainer.js

@@ -61,6 +61,8 @@ const TotalTariffContainer = ({
   pricePerManager,
   isDisabled,
   theme,
+  onClick,
+  isLoading,
 }) => {
   useEffect(() => {}, []);
 
@@ -127,7 +129,9 @@ const TotalTariffContainer = ({
         label={isNeedRequest ? t("SendRequest") : t("UpgradeNow")}
         size={"medium"}
         primary
-        isDisabled={isDisabled}
+        isDisabled={isLoading || isDisabled}
+        onClick={onClick}
+        isLoading={isLoading}
       />
     </StyledBody>
   );
@@ -135,6 +139,6 @@ const TotalTariffContainer = ({
 
 export default inject(({ auth, payments }) => {
   const { theme } = auth.settingsStore;
-  const { pricePerManager } = payments;
-  return { theme, pricePerManager };
+  const { pricePerManager, isLoading } = payments;
+  return { theme, pricePerManager, isLoading };
 })(observer(TotalTariffContainer));

packages/client/src/store/PaymentStore.js

@@ -5,6 +5,7 @@ import {
 } from "@docspace/common/api/settings";
 import { makeAutoObservable } from "mobx";
 import api from "@docspace/common/api";
+import toastr from "client/toastr";
 
 class PaymentStore {
   salesEmail = "sales@onlyoffice.com";
@@ -18,6 +19,8 @@ class PaymentStore {
   };
 
   pricePerManager = null;
+  paymentLink = null;
+  isLoading = false;
 
   constructor() {
     makeAutoObservable(this);
@@ -75,6 +78,29 @@ class PaymentStore {
   getPaymentAccount = async () => {
     return await api.portal.getPaymentAccount();
   };
+
+  setPaymentLink = async (link) => {
+    this.paymentLink = link;
+    // try {
+    //   const res = await api.portal.getPaymentLink(adminCount, currency);
+    //   console.log("getPaymentLink", res);
+    //   if (res) this.paymentLink = res;
+    // } catch (e) {
+    //   toastr.error(e);
+    // }
+  };
+  updatePayment = async (adminCount, currency) => {
+    try {
+      const res = await api.portal.updatePayment(adminCount, currency);
+      console.log("updatePayment", res);
+    } catch (e) {
+      toastr.error(e);
+    }
+  };
+
+  setIsLoading = (isLoading) => {
+    this.isLoading = isLoading;
+  };
 }
 
 export default PaymentStore;

packages/common/api/portal/index.js

@@ -181,3 +181,23 @@ export function getPortalTariff() {
 export function getPaymentAccount() {
   return request({ method: "get", url: "/portal/payment/account" });
 }
+
+export function getPaymentLink(adminCount, currency) {
+  return request({
+    method: "put",
+    url: `/portal/payment/url`,
+    data: {
+      quantity: { admin: adminCount }
+    },
+  });
+}
+
+export function updatePayment(adminCount) {
+  return request({
+    method: "put",
+    url: `/portal/payment/url`,
+    data: {
+      quantity: { admin: adminCount },
+    },
+  });
+}