Web: Added possibility to change number through the input, changed the display of the maximum number, added border numbers for the track.

packages/client/src/pages/TariffsPage/PriceCalculation.js

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import { useTranslation, Trans } from "react-i18next";
 import Text from "@docspace/components/text";
 import { inject, observer } from "mobx-react";
 
@@ -24,9 +23,10 @@ const StyledBody = styled.div`
   }
 `;
 
-const step = "1",
+const step = 1,
   minUsersCount = 1,
-  maxUsersCount = 1000;
+  maxUsersCount = 1000,
+  maxSliderNumber = 999;
 
 const PriceCalculation = ({ t, price }) => {
   const [usersCount, setUsersCount] = useState(minUsersCount);
@@ -36,12 +36,46 @@ const PriceCalculation = ({ t, price }) => {
     count > minUsersCount ? setUsersCount(count) : setUsersCount(minUsersCount);
   };
 
-  const onPlusClick = () => {
-    usersCount < maxUsersCount && setUsersCount(usersCount + 1);
-  };
+  const onClickOperations = (e) => {
+    const operation = e.currentTarget.dataset.operation;
 
-  const onMinusClick = () => {
-    usersCount > minUsersCount && setUsersCount(usersCount - 1);
+    let value = +usersCount;
+
+    if (operation === "plus") {
+      if (usersCount < maxUsersCount) {
+        value += step;
+      }
+    }
+    if (operation === "minus") {
+      if (usersCount >= maxUsersCount) {
+        value = maxSliderNumber;
+      } else {
+        if (usersCount > minUsersCount) {
+          value -= step;
+        }
+      }
+    }
+
+    value !== +usersCount && setUsersCount(value);
+  };
+  const onChangeNumber = (e) => {
+    const { target } = e;
+    let value = target.value;
+
+    if (usersCount >= maxUsersCount) {
+      value = value.slice(0, -1);
+    }
+
+    const numberValue = +value;
+
+    if (isNaN(numberValue)) return;
+
+    if (numberValue === 0) {
+      setUsersCount(minUsersCount);
+      return;
+    }
+
+    setUsersCount(numberValue);
   };
 
   return (
@@ -51,11 +85,12 @@ const PriceCalculation = ({ t, price }) => {
       </Text>
       <SelectUsersCountContainer
         maxUsersCount={maxUsersCount}
+        maxSliderNumber={maxSliderNumber}
         step={step}
         usersCount={usersCount}
-        onMinusClick={onMinusClick}
-        onPlusClick={onPlusClick}
+        onClickOperations={onClickOperations}
         onSliderChange={onSliderChange}
+        onChangeNumber={onChangeNumber}
       />
       <TotalTariffContainer t={t} usersCount={usersCount} price={price} />
     </StyledBody>

packages/client/src/pages/TariffsPage/index.js

@@ -13,6 +13,7 @@ import PriceCalculation from "./PriceCalculation";
 import BenefitsContainer from "./BenefitsContainer";
 import { smallTablet } from "@docspace/components/utils/device";
 import ContactContainer from "./ContactContainer";
+import toastr from "@docspace/components/toast/toastr";
 
 const StyledBody = styled.div`
   max-width: 660px;
@@ -54,7 +55,7 @@ const TariffsPageWrapper = ({
   useEffect(() => {
     (async () => {
       try {
-        await Promise.all([setQuota(), setTariffsInfo()]);
+        await Promise.all([setQuota()]);
       } catch (error) {
         toastr.error(error);
       }

packages/client/src/pages/TariffsPage/sub-components/SelectUsersCountContainer.js

@@ -6,6 +6,9 @@ import Slider from "@docspace/components/slider";
 import PlusIcon from "../../../../public/images/plus.react.svg";
 import MinusIcon from "../../../../public/images/minus.react.svg";
 import { smallTablet } from "@docspace/components/utils/device";
+import TextInput from "@docspace/components/text-input";
+import { inject, observer } from "mobx-react";
+
 const StyledBody = styled.div`
   max-width: 272px;
   margin: 0 auto;
@@ -14,6 +17,36 @@ const StyledBody = styled.div`
     max-width: 520px;
   }
 
+  .slider-track {
+    display: flex;
+    position: relative;
+    margin-top: -10px;
+    height: 16px;
+
+    .slider-track-value_min,
+    .slider-track-value_max {
+      color: ${(props) =>
+        props.theme.avatarEditorBody.slider.trackNumber.color};
+    }
+
+    .slider-track-value_max {
+      position: absolute;
+      right: 0;
+    }
+    .slider-track-value_min {
+      position: absolute;
+      left: 0;
+    }
+  }
+
+  .payments-operations_input {
+    width: 111px;
+    font-size: 44px;
+    text-align: center;
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+
   .tariff-users {
     display: flex;
     align-items: center;
@@ -48,36 +81,55 @@ const StyledBody = styled.div`
   }
 `;
 
+const min = 0;
 const SelectUsersCountContainer = ({
   maxUsersCount,
   step,
+  maxSliderNumber,
   usersCount,
-  onMinusClick,
-  onPlusClick,
   onSliderChange,
+  onClickOperations,
+  onChangeNumber,
+  theme,
 }) => {
   const { t } = useTranslation("Payments");
 
+  const value =
+    usersCount >= maxUsersCount ? maxSliderNumber + "+" : usersCount + "";
+
+  console.log("usersCount", usersCount, "value", value);
   return (
-    <StyledBody>
+    <StyledBody theme={theme}>
       <Text noSelect fontWeight={600} className="tariff-users_text">
         {t("ManagersNumber")}
       </Text>
       <div className="tariff-users">
-        <div className="circle" onClick={onMinusClick}>
-          <MinusIcon onClick={onMinusClick} className="tariff-score" />
+        <div
+          className="circle"
+          onClick={onClickOperations}
+          data-operation={"minus"}
+        >
+          <MinusIcon onClick={onClickOperations} className="tariff-score" />
         </div>
-        <Text noSelect fontSize={"44px"} className="tariff-users_count" isBold>
-          {usersCount}
-        </Text>
-        <div className="circle" onClick={onPlusClick}>
-          <PlusIcon onClick={onPlusClick} className="tariff-score" />
+
+        <TextInput
+          withBorder={false}
+          className="payments-operations_input"
+          value={value}
+          onChange={onChangeNumber}
+        />
+        <div
+          className="circle"
+          onClick={onClickOperations}
+          data-operation={"plus"}
+        >
+          <PlusIcon onClick={onClickOperations} className="tariff-score" />
         </div>
       </div>
 
       <Slider
         type="range"
-        min={"0"}
+        min={min}
         max={maxUsersCount.toString()}
         step={step}
         withPouring
@@ -85,8 +137,15 @@ const SelectUsersCountContainer = ({
         onChange={onSliderChange}
         colorPouring={"#20D21F"}
       />
+      <div className="slider-track">
+        <Text className="slider-track-value_min">{min}</Text>
+        <Text className="slider-track-value_max">{maxSliderNumber + "+"}</Text>
+      </div>
     </StyledBody>
   );
 };
 
-export default SelectUsersCountContainer;
+export default inject(({ auth }) => {
+  const { theme } = auth.settingsStore;
+  return { theme };
+})(observer(SelectUsersCountContainer));

packages/client/src/pages/TariffsPage/sub-components/TotalTariffContainer.js

@@ -19,7 +19,7 @@ const StyledBody = styled.div`
     align-items: center;
     justify-content: center;
     background: #f3f4f4;
-
+    margin-top: 24px;
     p:first-child {
       margin-right: 8px;
     }

packages/components/themes/base.js

@@ -1177,6 +1177,10 @@ const Base = {
         height: "8px",
       },
 
+      trackNumber: {
+        color: "#A3A9AE",
+      },
+
       fillLower: {
         background: grayLightMid,
         focusBackground: grayLightMid,

packages/components/themes/dark.js

@@ -1174,6 +1174,10 @@ const Dark = {
         height: "8px",
       },
 
+      trackNumber: {
+        color: "#A3A9AE",
+      },
+
       fillLower: {
         background: "#242424",
         focusBackground: "#242424",