Web: PortalSettings: Payments: Added trial container.

packages/client/public/locales/en/Payments.json

@@ -20,13 +20,14 @@
   "DowngradeNow": "Downgrade now",
   "ErrorNotification": "Failed to update tariff plan. Try again later or contact the sales department.",
   "EnterpriseEdition": "You are using ONLYOFFICE DocSpace Enterprise Edition.",
-  "EnterpriseSubscriptionExpiresDate": "Your subscription expires on {{finalDate}}",
+  "EnterpriseExpiresDate": "Your subscription expires on {{finalDate}}",
   "EnterpriseSubscriptionExpired": "Your subscription to support and updates has expired",
   "EnterpriseRenewal": "To continue getting support and updates, buy a renewal",
   "EnterpriseRenewSubscription": "Renew subscription for Enterprise",
   "EnterprisePersonalRenewal": "To get your personal renewal terms, contact your dedicated manager or write us at <1>{{email}}</1>",
   "FullEnterpriseVersion": "Buy the full Enterprise version to get",
   "FreeProFeatures": "Get free access to pro features for 30 days",
+  "FreeDaysLeft": "{{count}} Free days left",
   "GracePeriodActivatedDescription": "During the grace period, admins cannot create new rooms and add new users. After the due date of the grace period, DocSpace will become unavailable until the payment is made.",
   "GracePeriodActivatedInfo": "Grace period is effective <1>from {{fromDate}} to {{byDate}}</1> (days remaining: {{delayDaysCount}}).",
   "InvalidEmailWithActiveSubscription": "Your subscription remains active, but we recommend choosing a new Payer who gets access to subscription settings in DocSpace.",
@@ -46,8 +47,11 @@
   "StartupSuggestion": "Do more with {{planName}} plan",
   "StartupTitle": "You are using free {{planName}} plan",
   "StripeCustomerPortal": "go to the Stripe customer portal",
+  "SwitchFullEnterprise": "Switch to full Enterprise version",
   "TotalPricePerMonth": "<1>{{currencySymbol}}</1><2>{{price}}</2><3>/month</3>",
   "TechAssistance": "Get tech assistance <1>{{helpUrl}}</1>",
+  "TrialExpiresDate": "Your trial expires on {{finalDate}}",
+  "TrialExpired": "Trial expired",
   "UpgradeNow": "Upgrade now",
   "UpgradePlan": "Upgrade plan",
   "UpgradePlanInfo": "By adding new users you will exceed the maximum number of room members allowed by your current pricing plan.",

packages/client/src/pages/PortalSettings/categories/payments/Standalone/EnterpriseContainer.js

@@ -4,60 +4,33 @@ import { inject, observer } from "mobx-react";
 import { Trans } from "react-i18next";
 
 import Text from "@docspace/components/text";
-import Button from "@docspace/components/button";
 import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
 
-import {
+import { StyledEnterpriseComponent } from "./StyledComponent";
-  StyledEnterpriseComponent,
-  StyledButtonComponent,
-} from "./StyledComponent";
 import BenefitsContainer from "./sub-components/BenefitsContainer";
+import ButtonContainer from "./sub-components/ButtonContainer";
+import TariffTitleContainer from "./sub-components/TariffTitleContainer";
 
 const EnterpriseContainer = (props) => {
-  const { buyUrl, salesEmail, t, isSubscriptionExpired, theme } = props;
+  const { salesEmail, t, isSubscriptionExpired, theme } = props;
-  const onClickBuy = () => {
-    window.open(buyUrl, "_blank");
-  };
-
-  const subscriptionDescription = isSubscriptionExpired ? (
-    <Text className="payments_subscription-expired" isBold fontSize="14px">
-      {t("EnterpriseSubscriptionExpired")}
-    </Text>
-  ) : (
-    <Text as="span" fontWeight={400} fontSize="14px">
-      {t("EnterpriseSubscriptionExpiresDate", {
-        finalDate: "Tuesday, December 19, 2023.",
-      })}
-    </Text>
-  );
 
   return (
     <StyledEnterpriseComponent theme={theme}>
       <Text fontWeight={700} fontSize={"16px"}>
         {t("EnterpriseRenewSubscription")}
       </Text>
-      <div className="payments_subscription">
+
-        <Text isBold fontSize="14px" as="span">
+      <TariffTitleContainer
-          {t("EnterpriseEdition")}{" "}
+        t={t}
-        </Text>
+        limitedWidth={isSubscriptionExpired}
-        {subscriptionDescription}
+        isSubscriptionExpired={isSubscriptionExpired}
-      </div>
+      />
+
       {isSubscriptionExpired && <BenefitsContainer t={t} />}
-      <Text
+      <Text fontSize="14px" className="payments_renew-subscription">
-        fontWeight={400}
-        fontSize="14px"
-        className="payments_renew-subscription"
-      >
         {isSubscriptionExpired ? t("BuyLicense") : t("EnterpriseRenewal")}
       </Text>
-      <StyledButtonComponent>
+      <ButtonContainer t={t} />
-        <Button
-          label={t("BuyNow")}
-          size={"small"}
-          primary
-          onClick={onClickBuy}
-        />
-      </StyledButtonComponent>
 
       <div className="payments_support">
         <Text>
@@ -84,7 +57,7 @@ export default inject(({ auth, payments }) => {
   const { buyUrl, salesEmail } = payments;
   const { settingsStore } = auth;
   const { theme } = settingsStore;
-  const isSubscriptionExpired = true;
+  const isSubscriptionExpired = false;
 
   return { theme, buyUrl, salesEmail, isSubscriptionExpired };
 })(withRouter(observer(EnterpriseContainer)));

packages/client/src/pages/PortalSettings/categories/payments/Standalone/StyledComponent.js

@@ -43,11 +43,7 @@ const StyledEnterpriseComponent = styled.div`
   margin-bottom: 35px;
   margin-top: 12px;
 
-  .payments_subscription {
+  .payments_renew-subscription {
-    margin-top: 12px;
-  }
-  .payments_renew-subscription,
-  .payments_subscription {
     max-width: 660px;
   }
   .payments_renew-subscription {
@@ -56,15 +52,39 @@ const StyledEnterpriseComponent = styled.div`
   .payments_support {
     max-width: 503px;
   }
+`;
+
+const StyledTitleComponent = styled.div`
+  .payments_subscription {
+    max-width: 660px;
+    margin-top: 8px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: baseline;
+    .title {
+      line-height: 16px;
+      ${(props) => props.limitedWidth && "max-width: 376px"};
+      span:first-child {
+        ${(props) => props.isSubscriptionExpired && "margin-top: 5px"};
+      }
+    }
+  }
 
   .payments_subscription-expired {
     max-width: fit-content;
     border: 1px solid
-      ${(props) => props.theme.client.settings.payment.warningColor};
+      ${(props) =>
+        props.theme.client.settings.payment[
+          props.isSubscriptionExpired ? "warningColor" : "color"
+        ]};
     border-radius: 3px;
-    color: ${(props) => props.theme.client.settings.payment.warningColor};
+    color: ${(props) =>
-    padding: 5px 8px;
+      props.theme.client.settings.payment[
-    margin-top: 8px;
+        props.isSubscriptionExpired ? "warningColor" : "color"
+      ]};
+    padding: 2px 8px;
+    height: fit-content;
   }
 `;
 
@@ -74,7 +94,7 @@ const StyledBenefitsBody = styled.div`
   border: ${(props) => props.theme.client.settings.payment.border};
   max-width: 660px;
 
-  padding: 24px;
+  padding: 23px;
 
   background: ${(props) =>
     props.theme.client.settings.payment.backgroundBenefitsColor};
@@ -107,4 +127,5 @@ export {
   StyledEnterpriseComponent,
   StyledButtonComponent,
   StyledBenefitsBody,
+  StyledTitleComponent,
 };

packages/client/src/pages/PortalSettings/categories/payments/Standalone/TrialContainer.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { withRouter } from "react-router";
+import { inject, observer } from "mobx-react";
+
+import Text from "@docspace/components/text";
+
+import { StyledEnterpriseComponent } from "./StyledComponent";
+import BenefitsContainer from "./sub-components/BenefitsContainer";
+import ButtonContainer from "./sub-components/ButtonContainer";
+import TariffTitleContainer from "./sub-components/TariffTitleContainer";
+
+const TrialContainer = (props) => {
+  const { salesEmail, t, isSubscriptionExpired, theme } = props;
+
+  return (
+    <StyledEnterpriseComponent theme={theme}>
+      <Text fontWeight={700} fontSize={"16px"}>
+        {t("SwitchFullEnterprise")}
+      </Text>
+      <TariffTitleContainer
+        isSubscriptionExpired={isSubscriptionExpired}
+        t={t}
+        isTrial
+      />
+
+      <BenefitsContainer t={t} />
+      <Text fontSize="14px" className="payments_renew-subscription">
+        {t("BuyLicense")}
+      </Text>
+      <ButtonContainer t={t} />
+    </StyledEnterpriseComponent>
+  );
+};
+
+export default inject(({ auth, payments }) => {
+  const { buyUrl, salesEmail } = payments;
+  const { settingsStore } = auth;
+  const { theme } = settingsStore;
+  const isSubscriptionExpired = true;
+
+  return { theme, buyUrl, salesEmail, isSubscriptionExpired };
+})(withRouter(observer(TrialContainer)));

packages/client/src/pages/PortalSettings/categories/payments/Standalone/index.js

@@ -11,6 +11,7 @@ import LicenseContainer from "./LicenseContainer";
 import { StyledComponent } from "./StyledComponent";
 import ContactContainer from "./ContactContainer";
 import EnterpriseContainer from "./EnterpriseContainer";
+import TrialContainer from "./TrialContainer";
 
 const StandalonePage = (props) => {
   const {
@@ -19,6 +20,7 @@ const StandalonePage = (props) => {
     isLoadedTariffStatus,
     isLoadedCurrentQuota,
     isEnterpriseEdition,
+    isTrial,
   } = props;
   const { t, ready } = useTranslation([
     "Payments",
@@ -56,7 +58,7 @@ const StandalonePage = (props) => {
 
   return (
     <StyledComponent>
-      <EnterpriseContainer t={t} />
+      {true ? <TrialContainer t={t} /> : <EnterpriseContainer t={t} />}
       <LicenseContainer t={t} />
       <ContactContainer t={t} />
     </StyledComponent>
@@ -74,7 +76,11 @@ export default inject(({ auth, payments }) => {
   const { isLoaded: isLoadedCurrentQuota } = currentQuotaStore;
   const { isLoaded: isLoadedTariffStatus } = currentTariffStatusStore;
 
+  const isTrial = true,
+    isEnterprise = false;
+
   return {
+    isTrial,
     enterpriseInit,
     isInitPaymentPage,
     isLoadedTariffStatus,

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

@@ -66,7 +66,7 @@ const BenefitsContainer = ({
         <div className="payments-benefits" key={index}>
           <ReactSVG src={item.imag} className="benefits-svg" />
           <div className="benefits-description">
-            <Text isBold>{item.title}</Text>
+            <Text fontWeight={600}>{item.title}</Text>
             <Text>{item.description}</Text>
           </div>
         </div>
@@ -76,7 +76,7 @@ const BenefitsContainer = ({
 
   return (
     <StyledBenefitsBody className="benefits-container" theme={theme}>
-      <Text fontSize={"16px"} isBold className="benefits-title">
+      <Text fontSize={"16px"} fontWeight={600} className="benefits-title">
         {title}
       </Text>
       {features()}
@@ -89,8 +89,8 @@ export default inject(({ auth }) => {
   const { theme } = settingsStore;
   const { portalPaymentQuotasFeatures } = paymentQuotasStore;
 
-  const isTrial = false,
+  const isTrial = true,
-    isEnterprise = true,
+    isEnterprise = false,
     isCommunity = false;
   return {
     theme,

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { inject, observer } from "mobx-react";
+
+import Button from "@docspace/components/button";
+
+import { StyledButtonComponent } from "../StyledComponent";
+
+const ButtonContainer = ({ t, buyUrl }) => {
+  const onClickBuy = () => {
+    window.open(buyUrl, "_blank");
+  };
+  return (
+    <StyledButtonComponent>
+      <Button label={t("BuyNow")} size={"small"} primary onClick={onClickBuy} />
+    </StyledButtonComponent>
+  );
+};
+
+export default inject(({ payments }) => {
+  const { buyUrl } = payments;
+
+  return {
+    buyUrl,
+  };
+})(observer(ButtonContainer));

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

@@ -0,0 +1,79 @@
+import React from "react";
+import { inject, observer } from "mobx-react";
+
+import Text from "@docspace/components/text";
+import { StyledTitleComponent } from "../StyledComponent";
+
+const TariffTitleContainer = ({
+  t,
+  limitedWidth = true,
+  isSubscriptionExpired,
+  isTrial,
+}) => {
+  const alertComponent = () => {
+    if (isTrial) {
+      return isSubscriptionExpired ? (
+        <Text
+          className="payments_subscription-expired"
+          fontWeight={600}
+          fontSize="14px"
+        >
+          {t("TrialExpired")}
+        </Text>
+      ) : (
+        <Text
+          className="payments_subscription-expired"
+          fontWeight={600}
+          fontSize="14px"
+        >
+          {t("FreeDaysLeft", { count: "12" })}
+        </Text>
+      );
+    }
+
+    return (
+      isSubscriptionExpired && (
+        <Text className="payments_subscription-expired" isBold fontSize="14px">
+          {t("EnterpriseSubscriptionExpired")}
+        </Text>
+      )
+    );
+  };
+
+  const expiresDate = () => {
+    if (isTrial) {
+      return t("TrialExpiresDate", {
+        finalDate: "Monday, May 15, 2023",
+      });
+    }
+    return t("EnterpriseExpiresDate", {
+      finalDate: "Tuesday, December 19, 2023.",
+    });
+  };
+  return (
+    <StyledTitleComponent
+      isSubscriptionExpired={isSubscriptionExpired}
+      limitedWidth={limitedWidth}
+    >
+      <div className="payments_subscription">
+        <div className="title">
+          <Text fontWeight={600} fontSize="14px" as="span">
+            {t("EnterpriseEdition")}{" "}
+          </Text>
+          {!isSubscriptionExpired && (
+            <Text fontSize="14px" as="span">
+              {expiresDate()}
+            </Text>
+          )}
+        </div>
+        {alertComponent()}
+      </div>
+    </StyledTitleComponent>
+  );
+};
+
+export default inject(({ payments }) => {
+  const {} = payments;
+
+  return {};
+})(observer(TariffTitleContainer));

packages/components/themes/base.js

@@ -3045,6 +3045,7 @@ const Base = {
         },
 
         warningColor: "#F21C0E",
+        color: "#F97A0B",
       },
     },
 

packages/components/themes/dark.js

@@ -3042,10 +3042,11 @@ const Dark = {
           iconsColor: "#858585",
         },
         contactContainer: {
-          textColor: "#A3A9AE",
+          textColor: "#ADADAD",
-          linkColor: "#657077",
+          linkColor: "#858585",
         },
         warningColor: "#E06451",
+        color: "#E17415",
       },
     },