diff --git a/packages/client/src/components/TariffBar/helpers.js b/packages/client/src/components/TariffBar/helpers.js
new file mode 100644
index 0000000000..5d90547430
--- /dev/null
+++ b/packages/client/src/components/TariffBar/helpers.js
@@ -0,0 +1,63 @@
+const ORANGE = "#F97A0B";
+const RED = "#F2665A";
+
+export const getSaasBar = (
+ t,
+ isPaymentPageAvailable,
+ isNonProfit,
+ isFreeTariff,
+ isGracePeriod
+) => {
+ if (
+ isPaymentPageAvailable &&
+ !isNonProfit &&
+ (isFreeTariff || isGracePeriod)
+ ) {
+ if (isFreeTariff) return { label: t("Common:TryBusiness"), color: ORANGE };
+ if (isGracePeriod) return { label: t("Common:LatePayment"), color: RED };
+ }
+};
+
+export const getEnterpriseBar = (
+ t,
+ isPaymentPageAvailable,
+ isEnterprise,
+ isTrial,
+ isLicenseExpiring,
+ isLicenseDateExpired,
+ trialDaysLeft,
+ paymentDate
+) => {
+ if (
+ isPaymentPageAvailable &&
+ isEnterprise &&
+ (isTrial || isLicenseExpiring || isLicenseDateExpired)
+ ) {
+ if (isTrial) {
+ if (isLicenseDateExpired)
+ return { label: t("Common:TrialExpired"), color: ORANGE };
+ return {
+ label: t("Common:TrialDaysLeft", { count: trialDaysLeft }),
+ color: ORANGE,
+ };
+ } else {
+ if (isLicenseDateExpired)
+ return {
+ label: t("Common:SubscriptionExpiredTitle"),
+ color: RED,
+ };
+ return {
+ label: t("Common:SubscriptionIsExpiring", { date: paymentDate }),
+ color: ORANGE,
+ };
+ }
+ }
+};
+
+export const checkBar = () => {
+ const el = document.getElementById("tariff-bar-text");
+ el?.classList?.remove("hidden");
+ if (el?.offsetWidth < el?.scrollWidth) {
+ el?.classList?.add("hidden");
+ }
+};
diff --git a/packages/client/src/components/TariffBar/index.js b/packages/client/src/components/TariffBar/index.js
new file mode 100644
index 0000000000..1104fd3a26
--- /dev/null
+++ b/packages/client/src/components/TariffBar/index.js
@@ -0,0 +1,135 @@
+import { useEffect } from "react";
+import styled from "styled-components";
+import { useNavigate } from "react-router-dom";
+import { inject, observer } from "mobx-react";
+import { useTranslation } from "react-i18next";
+
+import { combineUrl } from "@docspace/shared/utils/combineUrl";
+import { Text } from "@docspace/shared/components/text";
+import { getSaasBar, getEnterpriseBar, checkBar } from "./helpers";
+
+const StyledWrapper = styled.div`
+ display: grid;
+ cursor: pointer;
+
+ #tariff-bar-text:hover {
+ opacity: 0.85;
+ }
+
+ #tariff-bar-text:active {
+ filter: brightness(0.9);
+ }
+
+ .hidden {
+ visibility: hidden;
+ }
+`;
+
+const PROXY_BASE_URL = combineUrl(
+ window.DocSpaceConfig?.proxy?.url,
+ "/portal-settings"
+);
+
+const TariffBar = ({
+ isEnterprise,
+ isNonProfit,
+ isGracePeriod,
+ isFreeTariff,
+ isPaymentPageAvailable,
+ isLicenseExpiring,
+ isLicenseDateExpired,
+ isTrial,
+ standalone,
+ paymentDate,
+ trialDaysLeft,
+ title,
+}) => {
+ const navigate = useNavigate();
+ const { t } = useTranslation("Common");
+
+ const onClick = () => {
+ const paymentPageUrl = combineUrl(
+ PROXY_BASE_URL,
+ "/payments/portal-payments"
+ );
+ navigate(paymentPageUrl);
+ };
+
+ useEffect(() => {
+ checkBar();
+ }, []);
+
+ useEffect(() => {
+ checkBar();
+ }, [title]);
+
+ const tariffBar = !standalone
+ ? getSaasBar(
+ t,
+ isPaymentPageAvailable,
+ isNonProfit,
+ isFreeTariff,
+ isGracePeriod
+ )
+ : getEnterpriseBar(
+ t,
+ isPaymentPageAvailable,
+ isEnterprise,
+ isTrial,
+ isLicenseExpiring,
+ isLicenseDateExpired,
+ trialDaysLeft,
+ paymentDate
+ );
+
+ if (!tariffBar) return <>>;
+ return (
+
+
+ {tariffBar.label}
+
+
+ );
+};
+
+export default inject(({ auth }) => {
+ const {
+ settingsStore,
+ currentQuotaStore,
+ isPaymentPageAvailable,
+ currentTariffStatusStore,
+ isEnterprise,
+ } = auth;
+ const { isFreeTariff, isNonProfit, isTrial } = currentQuotaStore;
+ const {
+ isGracePeriod,
+ isLicenseExpiring,
+ isLicenseDateExpired,
+ paymentDate,
+ trialDaysLeft,
+ } = currentTariffStatusStore;
+ const { standalone } = settingsStore;
+
+ return {
+ isEnterprise,
+ isNonProfit,
+ isGracePeriod,
+ isFreeTariff,
+ isPaymentPageAvailable,
+ isLicenseExpiring,
+ isLicenseDateExpired,
+ isTrial,
+ standalone,
+ paymentDate,
+ trialDaysLeft,
+ };
+})(observer(TariffBar));
diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/handlers/TagHandler.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/handlers/TagHandler.js
index a9d9d7cd65..c994ba6869 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/handlers/TagHandler.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/handlers/TagHandler.js
@@ -22,6 +22,11 @@ class TagHandler {
addTag(name) {
let newTags = [...this.tags];
+
+ if (this.isAlreadyAdded(name)) {
+ return; //already added
+ }
+
newTags.push({
id: this.createRandomTagId(),
name,
@@ -29,11 +34,26 @@ class TagHandler {
this.setTags(newTags);
}
+ isAlreadyAdded(name) {
+ return !!this.tags.find((t) => t.name.toLowerCase() === name.toLowerCase());
+ }
+
+ isNew(name) {
+ return !this.fetchedTags.find(
+ (t) => t.toLowerCase() === name.toLowerCase()
+ );
+ }
+
addNewTag(name) {
let newTags = [...this.tags];
+
+ if (this.isAlreadyAdded(name)) {
+ return; //already added
+ }
+
newTags.push({
id: this.createRandomTagId(),
- isNew: true,
+ isNew: this.isNew(name),
name,
});
this.setTags(newTags);
diff --git a/packages/client/src/components/dialogs/ReportDialog/index.js b/packages/client/src/components/dialogs/ReportDialog/index.js
index 993590305e..bdaa60b60b 100644
--- a/packages/client/src/components/dialogs/ReportDialog/index.js
+++ b/packages/client/src/components/dialogs/ReportDialog/index.js
@@ -119,7 +119,7 @@ const ReportDialog = (props) => {
onChange={onChangeTextareaValue}
autoFocus
areaSelect
- heightTextArea={72}
+ heightTextArea="72px"
fontSize={13}
/>
diff --git a/packages/client/src/components/panels/EmbeddingPanel/EmbeddingBody.js b/packages/client/src/components/panels/EmbeddingPanel/EmbeddingBody.js
index 56038605cc..deb2efeb83 100644
--- a/packages/client/src/components/panels/EmbeddingPanel/EmbeddingBody.js
+++ b/packages/client/src/components/panels/EmbeddingPanel/EmbeddingBody.js
@@ -145,7 +145,7 @@ const EmbeddingBody = ({ t, link, requestToken, roomId }) => {
iconName={CopyReactSvgUrl}
onClick={onCopyLink}
/>
-
+
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/CommentEditor.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/CommentEditor.js
index 2f5caf823b..8ac5424d13 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/CommentEditor.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/CommentEditor.js
@@ -97,7 +97,7 @@ const CommentEditor = ({
onChange={onChangeInputValue}
autoFocus
areaSelect
- heightTextArea={54}
+ heightTextArea="54px"
fontSize={13}
/>
diff --git a/packages/client/src/pages/Home/Section/Header/index.js b/packages/client/src/pages/Home/Section/Header/index.js
index 9f4575d2e5..c32a9bd943 100644
--- a/packages/client/src/pages/Home/Section/Header/index.js
+++ b/packages/client/src/pages/Home/Section/Header/index.js
@@ -64,6 +64,7 @@ import {
getCategoryUrl,
} from "SRC_DIR/helpers/utils";
import { getLogoFromPath } from "@docspace/shared/utils";
+import TariffBar from "SRC_DIR/components/TariffBar";
const StyledContainer = styled.div`
width: 100%;
@@ -209,6 +210,7 @@ const SectionHeaderContent = (props) => {
getAccountsCheckboxItemLabel,
setAccountsSelected,
isOwner,
+ isCollaborator,
setInvitePanelOptions,
isEmptyPage,
@@ -776,8 +778,11 @@ const SectionHeaderContent = (props) => {
label: t("Files:CreateRoom"),
key: "create-room",
icon: CatalogRoomsReactSvgUrl,
- onClick: onClickCreateRoom,
- disabled: selectedFolder.rootFolderType !== FolderType.USER,
+ onClick: () => {
+ onClickCreateRoom({ title: selectedFolder.title, isFolder: true });
+ },
+ disabled:
+ isCollaborator || selectedFolder.rootFolderType !== FolderType.USER,
},
{
id: "option_leave-room",
@@ -1108,6 +1113,7 @@ const SectionHeaderContent = (props) => {
showRootFolderTitle={insideTheRoom}
currentDeviceType={currentDeviceType}
isFrame={isFrame}
+ tariffBar={}
/>
)}
@@ -1135,6 +1141,7 @@ export default inject(
}) => {
const isOwner = auth.userStore.user?.isOwner;
const isAdmin = auth.userStore.user?.isAdmin;
+ const isCollaborator = auth?.userStore?.user?.isCollaborator;
const {
setSelected,
@@ -1397,6 +1404,7 @@ export default inject(
setAccountsSelected,
isOwner,
isAdmin,
+ isCollaborator,
setInvitePanelOptions,
isEmptyPage,
diff --git a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
index a5e241d24b..35b41a558e 100644
--- a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
+++ b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
@@ -11,7 +11,7 @@ import { IconButton } from "@docspace/shared/components/icon-button";
import { TableGroupMenu } from "@docspace/shared/components/table";
import { DropDownItem } from "@docspace/shared/components/drop-down-item";
import LoaderSectionHeader from "../loaderSectionHeader";
-import { tablet, desktop } from "@docspace/shared/utils";
+import { mobile, tablet, desktop } from "@docspace/shared/utils";
import withLoading from "SRC_DIR/HOCs/withLoading";
import { Badge } from "@docspace/shared/components/badge";
import {
@@ -21,6 +21,7 @@ import {
checkPropertyByLink,
} from "../../../utils";
import { combineUrl } from "@docspace/shared/utils/combineUrl";
+import TariffBar from "SRC_DIR/components/TariffBar";
const HeaderContainer = styled.div`
position: relative;
@@ -105,6 +106,24 @@ const HeaderContainer = styled.div`
line-height: 59px !important;
}
}
+
+ @media ${mobile} {
+ h1 {
+ line-height: 53px;
+ font-size: ${(props) => props.theme.getCorrectFontSize("18px")};
+ }
+ }
+
+ .tariff-bar {
+ ${(props) =>
+ props.theme.interfaceDirection === "rtl"
+ ? css`
+ margin-right: auto;
+ `
+ : css`
+ margin-left: auto;
+ `}
+ }
`;
const StyledContainer = styled.div`
@@ -326,6 +345,10 @@ const SectionHeaderContent = (props) => {
)}
+
+
+
+
{props.addUsers && (
(props.width ? props.width : "100%")};
- height: ${(props) => (props.height ? props.height : "400px")};
+ height: calc(${(props) => (props.height ? props.height : "400px")} + 2px);
@media ${tablet} {
margin-top: 4px;
@@ -508,7 +508,7 @@ const PortalIntegration = (props) => {
{t("CopyWindowCode")}
-
+
>
);
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/GetCodeDialog.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/GetCodeDialog.js
index 69bc38e46d..8ccca3c3e0 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/GetCodeDialog.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/GetCodeDialog.js
@@ -27,7 +27,7 @@ const GetCodeDialog = (props) => {
{t("CopyWindowCode")}
-
+