Added BetaBadge

packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/index.js

@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 
 import Avatar from "@docspace/components/avatar";
+
 import Text from "@docspace/components/text";
 import Box from "@docspace/components/box";
 import Link from "@docspace/components/link";
@@ -17,6 +18,7 @@ import { isMobileOnly } from "react-device-detect";
 import toastr from "@docspace/components/toast/toastr";
 import { showEmailActivationToast } from "SRC_DIR/helpers/people-helpers";
 import { getUserRole, convertLanguage } from "@docspace/common/utils";
+import BetaBadge from "@docspace/common/components/BetaBadge";
 
 import { Trans } from "react-i18next";
 //import TimezoneCombo from "./timezoneCombo";
@@ -151,6 +153,8 @@ const MainProfile = (props) => {
       });
   };
 
+  const isBetaLanguage = selectedLanguage?.isBeta;
+
   return (
     <StyledWrapper>
       <StyledAvatarWrapper>
@@ -316,6 +320,7 @@ const MainProfile = (props) => {
                 fillIcon={false}
                 modernView={!isMobile()}
               />
+              {isBetaLanguage && <BetaBadge />}
             </div>
           </div>
         </div>
@@ -417,6 +422,7 @@ const MainProfile = (props) => {
                 tooltipContent={tooltipLanguage}
               />
             </Text>
+            <div className="mobile-language__wrapper-combo-box">
               <ComboBox
                 className="language-combo-box"
                 directionY={isMobileHorizontalOrientation ? "bottom" : "both"}
@@ -439,6 +445,8 @@ const MainProfile = (props) => {
                 fillIcon={false}
                 modernView={!isMobile()}
               />
+              {isBetaLanguage && <BetaBadge />}
+            </div>
           </div>
         </div>
         {/* <TimezoneCombo title={t("Common:ComingSoon")} /> */}

packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/styled-main-profile.js

@@ -120,6 +120,11 @@ export const StyledInfo = styled.div`
         height: 28px;
         align-items: center;
         margin-top: 11px;
+        gap: 8px;
+
+        .language-combo-box .combo-button {
+          padding-inline-end: 0px;
+        }
 
         @media ${tablet} {
           height: 36px;
@@ -320,6 +325,12 @@ export const StyledInfo = styled.div`
           margin-top: 8px;
         }
 
+        &__wrapper-combo-box {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
         .mobile-profile-label {
           display: flex;
           align-items: center;

packages/common/components/BetaBadge/BetaBadge.props.ts

@@ -0,0 +1,7 @@
+interface BetaBadgeProps {
+  documentationEmail?: string;
+  currentColorScheme?: any;
+  currentDeviceType?: "desktop" | "tablet" | "mobile";
+}
+
+export default BetaBadgeProps;

packages/common/components/BetaBadge/BetaBadge.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { inject, observer } from "mobx-react";
+import { Trans, useTranslation } from "react-i18next";
+
+import InfoBadge from "@docspace/components/info-badge";
+import Link from "@docspace/components/link";
+
+import type BetaBadgeProps from "./BetaBadge.props";
+import { DeviceType } from "../../constants";
+
+function BetaBadge({
+  currentColorScheme,
+  documentationEmail,
+  currentDeviceType,
+}: BetaBadgeProps) {
+  const { t } = useTranslation(["Common,Settings"]);
+
+  const tooltipLanguage = (
+    <Trans t={t} i18nKey="BetaBadgeDescription" ns="Common">
+      Please note: you can enable RTL languages for the DocSpace interface in
+      the beta mode. RTL support for the editors will be available soon. If you
+      have found a bug, please submit it via
+      {/*@ts-ignore */}
+      <Link
+        href={`mailto:${documentationEmail}`}
+        color={currentColorScheme?.main?.accent}
+      >
+        form
+      </Link>
+      or contact us at
+      {/*@ts-ignore */}
+      <Link
+        href={`mailto:${documentationEmail}`}
+        color={currentColorScheme?.main?.accent}
+      >
+        {{ supportEmail: documentationEmail }}
+      </Link>
+    </Trans>
+  );
+
+  const isMobile = currentDeviceType === DeviceType.mobile;
+
+  const offset = isMobile ? 4 : 10;
+
+  return (
+    <InfoBadge
+      offset={offset}
+      noArrow={isMobile}
+      place={"bottom-end"}
+      label={t("Settings:BetaLabel")}
+      tooltipDescription={tooltipLanguage}
+      tooltipTitle={t("Common:BetaBadgeTitle")}
+    />
+  );
+}
+
+export default inject<any>(({ auth }) => {
+  const {
+    helpLink,
+    currentColorScheme,
+    documentationEmail,
+    currentDeviceType,
+  } = auth.settingsStore;
+
+  return { documentationEmail, currentColorScheme, currentDeviceType };
+})(observer(BetaBadge));

packages/common/components/BetaBadge/index.ts

@@ -0,0 +1 @@
+export { default } from "./BetaBadge";

public/locales/en/Common.json

@@ -24,6 +24,8 @@
   "Authorization": "Authorization",
   "BarMaintenanceDescription": "We apologize for any short-term technical issues in service functioning that may appear on {{targetDate}} during the update of {{productName}}.",
   "BarMaintenanceDisclaimer": "Please, make sure that all the changes are successfully saved during this day.",
+  "BetaBadgeDescription": "Please note: you can enable RTL languages for the DocSpace interface in the beta mode. RTL support for the editors will be available soon. If you have found a bug, please submit it via <1>forum</1> or contact us at <3>{{supportEmail}}</3>.",
+  "BetaBadgeTitle": "RTL interface",
   "Bonus": "Bonus",
   "BookNow": "Book now",
   "BookTeamTraining": "Book a team training session with our best specialists",