Web: Refactoring, added checking of the free portal with the payer's email.

2022-09-21 12:42:08 +03:00 · 2022-09-21 12:42:08 +03:00 · beb3acc55b
commit beb3acc55b
parent 55fc747e96
5 changed files with 120 additions and 72 deletions
--- a/packages/client/src/pages/PortalSettings/categories/payments/PriceCalculation.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/PriceCalculation.js
@ -65,11 +65,13 @@ const PriceCalculation = ({
  initializeInfo,
  priceManagerPerMonth,
  currencySymbol,
+  isAlreadyPaid,
+  isFreeAfterPaidPeriod,
+  setStartPaymentLink,
 }) => {
-  const isAlreadyPaid = !isFreeTariff || (isFreeTariff && isNotPaidPeriod);
-
  useEffect(() => {
-    initializeInfo(isAlreadyPaid);
+    initializeInfo();
+    !isAlreadyPaid && setStartPaymentLink();

    return () => {
      timeout && clearTimeout(timeout);
@ -170,11 +172,13 @@ const PriceCalculation = ({
        {...color}
        className="payment_main-title"
      >
-        {!isGracePeriod && !isNotPaidPeriod
-          ? t("PriceCalculation")
-          : t("YourPrice")}
+        {isGracePeriod || isNotPaidPeriod || isFreeAfterPaidPeriod
+          ? t("YourPrice")
+          : t("PriceCalculation")}
      </Text>
-      {!isGracePeriod && !isNotPaidPeriod && (
+      {isGracePeriod || isNotPaidPeriod || isFreeAfterPaidPeriod ? (
+        <></>
+      ) : (
        <SelectUsersCountContainer
          isDisabled={isDisabled}
          setShoppingLink={setShoppingLink}
@ -189,6 +193,7 @@ const PriceCalculation = ({
        isDisabled={isDisabled}
        t={t}
        isAlreadyPaid={isAlreadyPaid}
+        isFreeAfterPaidPeriod={isFreeAfterPaidPeriod}
      />
    </StyledBody>
  );
@ -202,6 +207,7 @@ export default inject(({ auth, payments }) => {
    setManagersCount,
    maxAvailableManagersCount,
    initializeInfo,
+    setStartPaymentLink,
  } = payments;
  const { theme } = auth.settingsStore;
  const {
@ -216,6 +222,7 @@ export default inject(({ auth, payments }) => {
  const { user } = userStore;

  return {
+    setStartPaymentLink,
    isFreeTariff,
    setManagersCount,
    tariffsInfo,
--- a/packages/client/src/pages/PortalSettings/categories/payments/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/index.js
@ -51,6 +51,7 @@ const StyledBody = styled.div`
 `;

 let paymentTerm,
+  isValidDelayDueDate,
  fromDate,
  byDate,
  delayDaysCount,
@ -76,11 +77,14 @@ const PaymentsPage = ({
  replaceFeaturesValues,
  portalPaymentQuotasFeatures,
  currentTariffPlanTitle,
+  tariffPlanTitle,
 }) => {
  const { t, ready } = useTranslation(["Payments", "Settings"]);

  const [isInitialLoading, setIsInitialLoading] = useState(true);

+  const isAlreadyPaid = payerEmail.length !== 0 || !isFreeTariff;
+
  useEffect(() => {
    setDocumentTitle(t("Settings:Payments"));
  }, [ready]);
@ -103,6 +107,9 @@ const PaymentsPage = ({
    paymentTerm = moment(
      isGracePeriod || isNotPaidPeriod ? delayDueDate : dueDate
    ).format("LL");
+    const paymentTermYear = moment(delayDueDate).year();
+
+    isValidDelayDueDate = paymentTermYear !== 9999;

    isGracePeriod && gracePeriodDays();
  };
@ -130,7 +137,7 @@ const PaymentsPage = ({
      }

      try {
-        if (!isFreeTariff) payerInfo = await getUserByEmail(payerEmail);
+        if (isAlreadyPaid) payerInfo = await getUserByEmail(payerEmail);
      } catch (e) {
        console.error(e);
      }
@ -160,86 +167,100 @@ const PaymentsPage = ({
    );
  };

-  const textComponent = (elem, className) => {
+  const currentPlanTitle = () => {
+    if (isPaidPeriod || isGracePeriod) {
      return (
-      <Text noSelect fontSize="16px" isBold className={className}>
-        {elem}
+        <Text noSelect fontSize="16px" isBold>
+          <Trans t={t} i18nKey="BusinessTitle" ns="Payments">
+            {{ planName: currentTariffPlanTitle }}
+          </Trans>
+        </Text>
+      );
+    }
+
+    return (
+      <Text noSelect fontSize="16px" isBold>
+        <Trans t={t} i18nKey="StartupTitle" ns="Payments">
+          {{ planName: currentTariffPlanTitle }}
+        </Trans>
      </Text>
    );
  };

-  const currentPlanTitle = () => {
-    if (isFreeTariff) {
-      return textComponent(
-        <Trans t={t} i18nKey="StartupTitle" ns="Payments">
-          {{ planName: currentTariffPlanTitle }}
-        </Trans>
-      );
-    }
-
-    if (isPaidPeriod || isGracePeriod) {
-      return textComponent(
-        <Trans t={t} i18nKey="BusinessTitle" ns="Payments">
-          {{ planName: currentTariffPlanTitle }}
-        </Trans>
-      );
-    }
-
-    return;
-  };
-
  const expiredTitleSubscriptionWarning = () => {
-    return textComponent(
-      <Trans
-        t={t}
-        i18nKey="BusinessExpired"
-        ns="Payments"
+    return (
+      <Text
+        noSelect
+        fontSize="16px"
+        isBold
        color={theme.client.settings.payment.warningColor}
      >
-        {{ date: paymentTerm }} {{ planName: currentTariffPlanTitle }}
+        <Trans t={t} i18nKey="BusinessExpired" ns="Payments">
+          {{ date: paymentTerm }} {{ planName: tariffPlanTitle }}
        </Trans>
+      </Text>
    );
  };

  const planSuggestion = () => {
    if (isFreeTariff) {
-      return textComponent(
+      return (
+        <Text
+          noSelect
+          fontSize="16px"
+          isBold
+          className={"payment-info_suggestion"}
+        >
          <Trans t={t} i18nKey="StartupSuggestion" ns="Payments">
-          {{ planName: currentTariffPlanTitle }}
-        </Trans>,
-        "payment-info_suggestion"
+            {{ planName: tariffPlanTitle }}
+          </Trans>
+        </Text>
      );
    }

    if (isPaidPeriod) {
-      return textComponent(
+      return (
+        <Text
+          noSelect
+          fontSize="16px"
+          isBold
+          className={"payment-info_suggestion"}
+        >
          <Trans t={t} i18nKey="BusinessSuggestion" ns="Payments">
-          {{ planName: currentTariffPlanTitle }}
-        </Trans>,
-        "payment-info_suggestion"
+            {{ planName: tariffPlanTitle }}
+          </Trans>
+        </Text>
      );
    }

    if (isNotPaidPeriod) {
-      return textComponent(
+      return (
+        <Text
+          noSelect
+          fontSize="16px"
+          isBold
+          className={"payment-info_suggestion"}
+        >
          <Trans t={t} i18nKey="RenewSubscription" ns="Payments">
-          {{ planName: currentTariffPlanTitle }}
-        </Trans>,
-        "payment-info_suggestion"
+            {{ planName: tariffPlanTitle }}
+          </Trans>
+        </Text>
      );
    }

    if (isGracePeriod) {
-      return textComponent(
-        <Trans
-          t={t}
-          i18nKey="DelayedPayment"
-          ns="Payments"
+      return (
+        <Text
+          noSelect
+          fontSize="16px"
+          isBold
+          className={"payment-info_grace-period"}
          color={theme.client.settings.payment.warningColor}
        >
+          <Trans t={t} i18nKey="DelayedPayment" ns="Payments">
            {{ date: paymentTerm }} {{ planName: currentTariffPlanTitle }}
-        </Trans>,
-        "payment-info_grace-period"
+          </Trans>
+        </Text>
      );
    }

@ -249,13 +270,17 @@ const PaymentsPage = ({
  const convertedPrice = `${currencySymbol}${startValue}`;
  const isPayer = user.email === payerEmail;

+  const isFreeAfterPaidPeriod = isFreeTariff && payerEmail.length !== 0;
+
  return isInitialLoading || !ready ? (
    <Loaders.PaymentsLoader />
  ) : (
    <StyledBody theme={theme}>
-      {isNotPaidPeriod ? expiredTitleSubscriptionWarning() : currentPlanTitle()}
+      {isNotPaidPeriod && isValidDelayDueDate
+        ? expiredTitleSubscriptionWarning()
+        : currentPlanTitle()}

-      {(!isFreeTariff || (isFreeTariff && isNotPaidPeriod)) && (
+      {isAlreadyPaid && (
        <PayerInformationContainer
          payerInfo={payerInfo}
          isPayer={isPayer}
@ -277,7 +302,7 @@ const PaymentsPage = ({
        </Text>
      )}

-      {isPaidPeriod && (
+      {isPaidPeriod && !isFreeAfterPaidPeriod && (
        <Text
          noSelect
          fontSize={"14px"}
@ -305,8 +330,18 @@ const PaymentsPage = ({
        {renderTooltip()}
      </div>
      <div className="payment-info">
-        <PriceCalculation t={t} isPayer={isPayer} />
-        {!isGracePeriod && !isNotPaidPeriod && <BenefitsContainer t={t} />}
+        <PriceCalculation
+          t={t}
+          isPayer={isPayer}
+          isAlreadyPaid={isAlreadyPaid}
+          isFreeAfterPaidPeriod={isFreeAfterPaidPeriod}
+        />
+
+        {isGracePeriod || isNotPaidPeriod || isFreeAfterPaidPeriod ? (
+          <></>
+        ) : (
+          <BenefitsContainer t={t} />
+        )}
      </div>
      <ContactContainer t={t} />
    </StyledBody>
@ -342,6 +377,7 @@ export default inject(({ auth, payments }) => {
    planCost,
    replaceFeaturesValues,
    portalPaymentQuotasFeatures,
+    tariffPlanTitle,
  } = paymentQuotasStore;
  const { organizationName, theme } = auth.settingsStore;

@ -356,7 +392,7 @@ export default inject(({ auth, payments }) => {

  return {
    isFreeTariff,
-
+    tariffPlanTitle,
    language,
    organizationName,
    tariffsInfo,
--- a/packages/client/src/pages/PortalSettings/categories/payments/sub-components/ButtonContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/sub-components/ButtonContainer.js
@ -1,7 +1,7 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
 import Button from "@docspace/components/button";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import RequestButtonContainer from "./RequestButtonContainer";
 import UpdatePlanButtonContainer from "./UpdatePlanButtonContainer";

@ -20,6 +20,7 @@ const ButtonContainer = ({
  isNotPaidPeriod,
  isGracePeriod,
  accountLink,
+  isFreeAfterPaidPeriod,
 }) => {
  const goToStripeAccount = () => {
    if (accountLink) window.open(accountLink, "_blank");
@ -27,7 +28,7 @@ const ButtonContainer = ({

  return (
    <StyledBody>
-      {isNotPaidPeriod || isGracePeriod ? (
+      {isNotPaidPeriod || isGracePeriod || isFreeAfterPaidPeriod ? (
        <Button
          label={t("Pay")}
          size={"medium"}
@ -53,6 +54,7 @@ export default inject(({ auth, payments }) => {
  const { currentTariffStatusStore } = auth;
  const { isNeedRequest, isLoading, accountLink } = payments;
  const { isNotPaidPeriod, isGracePeriod } = currentTariffStatusStore;
+
  return {
    isNeedRequest,
    isLoading,
--- a/packages/client/src/store/PaymentStore.js
+++ b/packages/client/src/store/PaymentStore.js
@ -125,10 +125,9 @@ class PaymentStore {
    return this.managersCount * this.stepByQuotaForTotalSize;
  }

-  initializeInfo = (isAlreadyPaid) => {
+  initializeInfo = () => {
    this.initializeTotalPrice();
    this.initializeManagersCount();
-    !isAlreadyPaid && this.setStartPaymentLink();
  };
  initializeTotalPrice = () => {
    const currentTotalPrice = authStore.currentQuotaStore.currentPlanCost.value;
--- a/packages/common/store/PaymentQuotasStore.js
+++ b/packages/common/store/PaymentQuotasStore.js
@ -70,6 +70,10 @@ class PaymentQuotasStore {
    );
    return result.priceTitle;
  }
+
+  get tariffPlanTitle() {
+    return this.portalPaymentQuotas.title;
+  }
  setPortalPaymentQuotas = async (t) => {
    if (this.isLoaded) return;