Web:Client:Fix translation "BreakpointWarningTextPrompt", "CompanyInfoSettingsDescription".

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

@@ -49,7 +49,7 @@
   "BrandingSubtitle": "Use this option to provide on-brand experience to your users. These settings will be effective for all of your portals.",
   "BrowserNoCanvasSupport": "Your browser does not support the HTML5 canvas tag.",
   "BreakpointWarningText": "This section is only available in desktop version",
-  "BreakpointWarningTextPrompt": "Please use the desktop site to access",
+  "BreakpointWarningTextPrompt": "Please use the desktop site to access <1>{{content}}</1>",
   "ByApp": "By authenticator app",
   "BySms": "By sms",
   "ChangeLogoButton": "Change Logo",
@@ -59,7 +59,7 @@
   "ClearBackupList": "Delete all backups",
   "CompanyInfoSettings": "Company info settings",
   "CompanyNameForCanvasLogo": "Company name",
-  "CompanyInfoSettingsDescription": "This information will be displayed in the",
+  "CompanyInfoSettingsDescription": "This information will be displayed in the <1>{{link}}</1> window.",
   "ConfirmEmailSended": "Confirmation e-mail has been sent to {{ownerName}}",
   "CustomDomains": "Custom domains",
   "CustomTitles": "Custom titles",
@@ -191,8 +191,6 @@
   "Template": "Template",
   "TemporaryStorage": "Temporary storage",
   "TemporaryStorageDescription": "Backup is stored in the 'Backup' section, you will be able to download it within 24 hours after creating.",
-  "TheAppearanceSettings": "the Appearance settings",
-  "TheBrandingSettings": "the Branding settings",
   "ThirdPartyAuthorization": "Third-party Authorization",
   "ThirdPartyBodyDescription": "Detailed instructions in our <2>Help Center</2>.",
   "ThirdPartyBottomDescription": "Need help? Contact our <2>Support Team.</2>",

packages/client/src/components/BreakpointWarning/BreakpointWarning.js

@@ -1,9 +1,8 @@
 import React from "react";
-
-import { withTranslation } from "react-i18next";
-
+import { Trans, withTranslation } from "react-i18next";
 import StyledBreakpointWarning from "./sub-components/StyledBreakpointWarning";
 import Loader from "./sub-components/loader";
+
 const BreakpointWarning = ({ t, content, tReady }) => {
   return !tReady ? (
     <Loader />
@@ -14,7 +13,9 @@ const BreakpointWarning = ({ t, content, tReady }) => {
       <div className="description">
         <div className="text-breakpoint">{t("BreakpointWarningText")}</div>
         <div className="text-prompt">
-          {t("BreakpointWarningTextPrompt")} {content}
+          <Trans t={t} i18nKey="BreakpointWarningTextPrompt" ns="Settings">
+            "Please use the desktop site to access {{ content }}"
+          </Trans>
         </div>
       </div>
     </StyledBreakpointWarning>

packages/client/src/pages/PortalSettings/categories/common/appearance.js

@@ -355,7 +355,7 @@ const Appearance = (props) => {
   );
 
   return viewMobile ? (
-    <BreakpointWarning content={t("Settings:TheAppearanceSettings")} />
+    <BreakpointWarning content="the Appearance settings" />
   ) : !tReady ? (
     <Loader />
   ) : (

packages/client/src/pages/PortalSettings/categories/common/branding.js

@@ -68,7 +68,7 @@ const Branding = ({ t, isLoadedCompanyInfoSettingsData }) => {
   };
 
   if (!viewDesktop)
-    return <BreakpointWarning content={t("Settings:TheBrandingSettings")} />;
+    return <BreakpointWarning content="the Branding settings" />;
 
   return (
     <StyledComponent>

packages/client/src/pages/PortalSettings/categories/common/settingsBranding/companyInfoSettings.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { withTranslation } from "react-i18next";
+import { Trans, withTranslation } from "react-i18next";
 import toastr from "@docspace/components/toast/toastr";
 import FieldContainer from "@docspace/components/field-container";
 import TextInput from "@docspace/components/text-input";
@@ -75,6 +75,8 @@ const CompanyInfoSettings = (props) => {
 
   const previewData = { companyName, email, phone, site, address };
 
+  const link = "About this program";
+
   useEffect(() => {
     if (!(companyInfoSettingsData && tReady)) return;
 
@@ -245,15 +247,17 @@ const CompanyInfoSettings = (props) => {
       <StyledComponent isPortalPaid={isPortalPaid}>
         <div className="header">{t("Settings:CompanyInfoSettings")}</div>
         <div className="description">
-          {t("Settings:CompanyInfoSettingsDescription")}&nbsp;
-          {isPortalPaid ? (
-            <Link className="link" onClick={onShowExample} noHover={true}>
-              {t("Common:AboutCompanyTitle")}
-            </Link>
-          ) : (
-            <span className="link">{t("Common:AboutCompanyTitle")}</span>
-          )}
-          &nbsp;{t("Common:Window")}.
+          <Trans t={t} i18nKey="CompanyInfoSettingsDescription" ns="Settings">
+            "This information will be displayed in the
+            {isPortalPaid ? (
+              <Link className="link" onClick={onShowExample} noHover={true}>
+                {{ link }}
+              </Link>
+            ) : (
+              <span className="link"> {{ link }}</span>
+            )}
+            window."
+          </Trans>
         </div>
         <div className="settings-block">
           <FieldContainer