Web: Disabled security settings.

packages/client/src/pages/PortalSettings/categories/security/audit-trail/RowView/AuditContent.js

@@ -3,6 +3,7 @@ import React from "react";
 import Text from "@docspace/components/text";
 import moment from "moment";
 import styled from "styled-components";
+import { UnavailableStyles } from "../../../../utils/commonSettingsStyles";
 
 const StyledRowContent = styled(RowContent)`
   .row-main-container-wrapper {
@@ -10,9 +11,11 @@ const StyledRowContent = styled(RowContent)`
     justify-content: space-between;
     width: 100%;
   }
+
+  ${(props) => props.isSettingNotPaid && UnavailableStyles}
 `;
 
-export const AuditContent = ({ sectionWidth, item }) => {
+export const AuditContent = ({ sectionWidth, item, isSettingNotPaid }) => {
   const DATE_FORMAT = "YYYY-MM-DD LT";
   const to = moment(item.date).local();
 
@@ -22,9 +25,15 @@ export const AuditContent = ({ sectionWidth, item }) => {
       sideColor="#A3A9AE"
       nameColor="#D0D5DA"
       sectionWidth={sectionWidth}
+      isSettingNotPaid={isSettingNotPaid}
     >
       <div className="user-container-wrapper">
-        <Text fontWeight={600} fontSize="14px" isTextOverflow={true}>
+        <Text
+          fontWeight={600}
+          fontSize="14px"
+          isTextOverflow={true}
+          className="settings_unavailable"
+        >
           {item.user}
         </Text>
       </div>
@@ -34,10 +43,16 @@ export const AuditContent = ({ sectionWidth, item }) => {
         fontSize="12px"
         fontWeight={600}
         truncate={true}
+        className="settings_unavailable"
       >
         {dateStr}
       </Text>
-      <Text fontSize="12px" as="div" fontWeight={600}>
+      <Text
+        fontSize="12px"
+        as="div"
+        fontWeight={600}
+        className="settings_unavailable"
+      >
         {`${item.room} | ${item.action}`}
       </Text>
     </StyledRowContent>

packages/client/src/pages/PortalSettings/categories/security/audit-trail/TableView/TableContainer.js

@@ -6,7 +6,14 @@ import TableHeader from "./TableHeader";
 import TableBody from "@docspace/components/table-container/TableBody";
 import { isMobile } from "react-device-detect";
 
-const Table = ({ auditTrailUsers, sectionWidth, viewAs, setViewAs, theme }) => {
+const Table = ({
+  auditTrailUsers,
+  sectionWidth,
+  viewAs,
+  setViewAs,
+  theme,
+  isSettingNotPaid,
+}) => {
   const ref = useRef(null);
   useEffect(() => {
     if (!sectionWidth) return;
@@ -22,7 +29,12 @@ const Table = ({ auditTrailUsers, sectionWidth, viewAs, setViewAs, theme }) => {
       <TableHeader sectionWidth={sectionWidth} containerRef={ref} />
       <TableBody>
         {auditTrailUsers.map((item) => (
-          <TableRow theme={theme} key={item.id} item={item} />
+          <TableRow
+            theme={theme}
+            key={item.id}
+            item={item}
+            isSettingNotPaid={isSettingNotPaid}
+          />
         ))}
       </TableBody>
     </TableContainer>

packages/client/src/pages/PortalSettings/categories/security/audit-trail/TableView/TableRow.js

@@ -5,6 +5,7 @@ import TableCell from "@docspace/components/table-container/TableCell";
 import Text from "@docspace/components/text";
 import styled from "styled-components";
 import moment from "moment";
+import { UnavailableStyles } from "../../../../utils/commonSettingsStyles";
 
 const StyledPeopleRow = styled(TableRow)`
   .table-container_cell {
@@ -29,10 +30,11 @@ const StyledPeopleRow = styled(TableRow)`
   .table-cell_username {
     margin-right: 12px;
   }
+  ${(props) => props.isSettingNotPaid && UnavailableStyles}
 `;
 
 const PeopleTableRow = (props) => {
-  const { item, contextOptionsProps } = props;
+  const { item, contextOptionsProps, isSettingNotPaid } = props;
   const { email, position } = item;
 
   const DATE_FORMAT = "YYYY-MM-DD LT";
@@ -41,7 +43,11 @@ const PeopleTableRow = (props) => {
   const dateStr = to.format(DATE_FORMAT);
 
   return (
-    <StyledPeopleRow key={item.id} {...contextOptionsProps}>
+    <StyledPeopleRow
+      key={item.id}
+      {...contextOptionsProps}
+      isSettingNotPaid={isSettingNotPaid}
+    >
       <TableCell>
         <Text
           type="page"
@@ -49,6 +55,7 @@ const PeopleTableRow = (props) => {
           fontSize="12px"
           fontWeight={600}
           truncate
+          className="settings_unavailable"
         >
           {item.user}
         </Text>
@@ -60,6 +67,7 @@ const PeopleTableRow = (props) => {
           fontSize="12px"
           fontWeight={600}
           truncate
+          className="settings_unavailable"
         >
           {dateStr}
         </Text>
@@ -71,6 +79,7 @@ const PeopleTableRow = (props) => {
           fontSize="12px"
           fontWeight={600}
           isTextOverflow
+          className="settings_unavailable"
         >
           {item.room}
         </Text>
@@ -83,6 +92,7 @@ const PeopleTableRow = (props) => {
           fontSize="12px"
           fontWeight={600}
           isTextOverflow
+          className="settings_unavailable"
         >
           {item.action}
         </Text>

packages/client/src/pages/PortalSettings/categories/security/audit-trail/index.js

@@ -19,6 +19,7 @@ const AuditTrail = (props) => {
     getLifetimeAuditSettings,
     getAuditTrailReport,
     securityLifetime,
+    isAuditAvailable,
   } = props;
 
   useEffect(() => {
@@ -40,11 +41,15 @@ const AuditTrail = (props) => {
                   theme={theme}
                   auditTrailUsers={auditTrailUsers}
                   sectionWidth={context.sectionWidth}
+                  isSettingNotPaid={!isAuditAvailable}
                 />
               </>
             ) : (
               <>
-                <AuditRowContainer sectionWidth={context.sectionWidth} />
+                <AuditRowContainer
+                  sectionWidth={context.sectionWidth}
+                  isSettingNotPaid={!isAuditAvailable}
+                />
               </>
             )
           }
@@ -69,6 +74,7 @@ const AuditTrail = (props) => {
           content={getContent()}
           downloadReport={t("DownloadReportBtn")}
           getReport={getAuditTrailReport}
+          isSettingNotPaid={!isAuditAvailable}
         />
       )}
     </>
@@ -85,8 +91,9 @@ export default inject(({ setup, auth }) => {
     getAuditTrailReport,
     securityLifetime,
   } = setup;
-  const { theme } = auth.settingsStore;
+  const { settingsStore, currentQuotaStore } = auth;
-
+  const { theme } = settingsStore;
+  const { isAuditAvailable } = currentQuotaStore;
   return {
     getAuditTrail,
     auditTrailUsers: security.auditTrail.users,
@@ -96,5 +103,6 @@ export default inject(({ setup, auth }) => {
     setLifetimeAuditSettings,
     getAuditTrailReport,
     securityLifetime,
+    isAuditAvailable,
   };
 })(withTranslation("Settings")(withRouter(AuditTrail)));

packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js

@@ -6,8 +6,9 @@ import SaveCancelButtons from "@docspace/components/save-cancel-buttons";
 import styled from "styled-components";
 import Button from "@docspace/components/button";
 import toastr from "@docspace/components/toast/toastr";
-
+import { UnavailableStyles } from "../../../utils/commonSettingsStyles";
 import { hugeMobile, tablet } from "@docspace/components/utils/device";
+import Badge from "@docspace/components/badge";
 
 const StyledTextInput = styled(TextInput)`
   margin-top: 4px;
@@ -74,6 +75,8 @@ const MainContainer = styled.div`
       width: 100%;
     }
   }
+
+  ${(props) => props.isSettingNotPaid && UnavailableStyles}
 `;
 
 const HistoryMainContent = (props) => {
@@ -92,6 +95,7 @@ const HistoryMainContent = (props) => {
     content,
     downloadReport,
     getReport,
+    isSettingNotPaid,
   } = props;
 
   const [lifeTime, setLifeTime] = useState(String(lifetime) || "180");
@@ -149,14 +153,18 @@ const HistoryMainContent = (props) => {
   }, [lifeTime]);
 
   return (
-    <MainContainer>
+    <MainContainer isSettingNotPaid={isSettingNotPaid}>
+      {isSettingNotPaid && <Badge backgroundColor="#EDC409" label="Paid" />}
       <div className="main-wrapper">
-        <Text fontSize="13px" color="#657077">
+        <Text fontSize="13px" color="#657077" className="settings_unavailable">
           {subHeader}
         </Text>
-        <Text className="latest-text">{latestText} </Text>
+        <Text className="latest-text settings_unavailable">{latestText} </Text>
 
-        <label className="storage-label" htmlFor="storage-period">
+        <label
+          className="storage-label settings_unavailable"
+          htmlFor="storage-period"
+        >
           {storagePeriod}
         </label>
         <StyledTextInput
@@ -165,6 +173,7 @@ const HistoryMainContent = (props) => {
           size="base"
           id="storage-period"
           type="text"
+          isDisabled={isSettingNotPaid}
         />
         <SaveCancelButtons
           className="save-cancel"
@@ -175,8 +184,9 @@ const HistoryMainContent = (props) => {
           showReminder={showReminder}
           displaySettings={true}
           hasScroll={false}
+          isDisabled={isSettingNotPaid}
         />
-        <Text className="latest-text">{downloadText}</Text>
+        <Text className="latest-text settings_unavailable">{downloadText}</Text>
       </div>
       {content}
       <Button
@@ -186,6 +196,7 @@ const HistoryMainContent = (props) => {
         size="normal"
         minwidth="auto"
         onClick={() => getReport()}
+        isDisabled={isSettingNotPaid}
       />
     </MainContainer>
   );