Web: PortalSettings: Payments: Added disable button for free tariff.

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

@@ -30,8 +30,9 @@ const UpdatePlanButtonContainer = ({
   isLessCountThanAcceptable,
   currentTariffPlanTitle,
   t,
+  canPayTariff,
 }) => {
-  const updateMethod = async () => {
+  const onUpdateTariff = async () => {
     try {
       timerId = setTimeout(() => {
         setIsLoading(true);
@@ -105,12 +106,7 @@ const UpdatePlanButtonContainer = ({
     }, 2000);
   };
 
-  const onUpdateTariff = () => {
+  const goToStripePortal = () => {
-    if (isAlreadyPaid) {
-      updateMethod();
-      return;
-    }
-
     paymentLink
       ? window.open(paymentLink, "_blank")
       : toastr.error(t("ErrorNotification"));
@@ -126,18 +122,20 @@ const UpdatePlanButtonContainer = ({
     };
   }, []);
 
-  const switchPlanButton = (
+  const payTariffButton = (
     <Button
       label={t("UpgradeNow")}
       size={"medium"}
       primary
-      isDisabled={isLessCountThanAcceptable || isLoading || isDisabled}
+      isDisabled={
-      onClick={onUpdateTariff}
+        isLessCountThanAcceptable || !canPayTariff || isLoading || isDisabled
+      }
+      onClick={goToStripePortal}
       isLoading={isLoading}
     />
   );
 
-  const updatingPlanButton = () => {
+  const updatingCurrentTariffButton = () => {
     const isDowngradePlan = managersCount < maxCountManagersByQuota;
     const isTheSameCount = managersCount === maxCountManagersByQuota;
 
@@ -163,7 +161,7 @@ const UpdatePlanButtonContainer = ({
 
   return (
     <StyledBody>
-      {isAlreadyPaid ? updatingPlanButton() : switchPlanButton}
+      {isAlreadyPaid ? updatingCurrentTariffButton() : payTariffButton}
     </StyledBody>
   );
 };
@@ -187,9 +185,11 @@ export default inject(({ auth, payments }) => {
     isLessCountThanAcceptable,
     accountLink,
     isAlreadyPaid,
+    canPayTariff,
   } = payments;
 
   return {
+    canPayTariff,
     isAlreadyPaid,
     setIsLoading,
     paymentLink,

packages/client/src/store/PaymentStore.js

@@ -305,6 +305,15 @@ class PaymentStore {
     return this.isPayer;
   }
 
+  get canPayTariff() {
+    const { currentQuotaStore } = authStore;
+    const { addedManagersCount } = currentQuotaStore;
+
+    if (this.managersCount >= addedManagersCount) return true;
+
+    return false;
+  }
+
   setRangeStepByQuota = () => {
     const { paymentQuotasStore } = authStore;
     const {