Web: VDR-lifetime: added logic for displaying the file lifetime icon

packages/client/src/HOCs/withQuickButtons.js

@@ -26,9 +26,12 @@
 
 import React from "react";
 import { inject, observer } from "mobx-react";
+import moment from "moment";
 import { toastr } from "@docspace/shared/components/toast";
 import { copyShareLink } from "@docspace/shared/utils/copy";
 import QuickButtons from "../components/QuickButtons";
+import { LANGUAGE } from "@docspace/shared/constants";
+import { getCookie, getCorrectDate } from "@docspace/shared/utils";
 
 export default function withQuickButtons(WrappedComponent) {
   class WithQuickButtons extends React.Component {
@@ -100,6 +103,39 @@ export default function withQuickButtons(WrappedComponent) {
       }
     };
 
+    getStartDate = () => {
+      const { period, value } = this.props.roomLifetime;
+      const date = new Date(this.props.item.expired);
+
+      switch (period) {
+        case 0:
+          return new Date(date.setDate(date.getDate() - value));
+        case 1:
+          return new Date(date.setMonth(date.getMonth() - value));
+        case 2:
+          return new Date(date.setFullYear(date.getFullYear() - value));
+        default:
+          break;
+      }
+    };
+
+    getShowLifetimeIcon = () => {
+      const { item } = this.props;
+
+      const startDate = this.getStartDate();
+      const dateDiff = moment(startDate).diff(item.expired) * 0.1;
+      const showDate = moment(item.expired).add(dateDiff, "milliseconds");
+
+      return moment().valueOf() >= showDate.valueOf();
+    };
+
+    getItemExpiredDate = () => {
+      const { culture, item } = this.props;
+
+      const locale = getCookie(LANGUAGE) || culture;
+      return getCorrectDate(locale, item.expired);
+    };
+
     render() {
       const { isLoading } = this.state;
 
@@ -115,8 +151,14 @@ export default function withQuickButtons(WrappedComponent) {
         isPersonalRoom,
         isArchiveFolder,
         currentDeviceType,
+        roomLifetime,
       } = this.props;
 
+      const showLifetimeIcon =
+        item.expired && roomLifetime ? this.getShowLifetimeIcon() : false;
+      const expiredDate =
+        item.expired && roomLifetime ? this.getItemExpiredDate() : null;
+
       const quickButtonsComponent = (
         <QuickButtons
           t={t}
@@ -136,6 +178,8 @@ export default function withQuickButtons(WrappedComponent) {
           onCopyPrimaryLink={this.onCopyPrimaryLink}
           isArchiveFolder={isArchiveFolder}
           currentDeviceType={currentDeviceType}
+          showLifetimeIcon={showLifetimeIcon}
+          expiredDate={expiredDate}
         />
       );
 
@@ -175,10 +219,12 @@ export default function withQuickButtons(WrappedComponent) {
         isTrashFolder || isArchiveFolderRoot || isPersonalFolderRoot;
 
       const { isPublicRoom } = publicRoomStore;
-      const { getPrimaryFileLink, setShareChanged } = infoPanelStore;
+      const { getPrimaryFileLink, setShareChanged, infoPanelRoom } =
+        infoPanelStore;
 
       return {
         theme: settingsStore.theme,
+        culture: settingsStore.culture,
         currentDeviceType: settingsStore.currentDeviceType,
         isAdmin: authStore.isAdmin,
         lockFileAction,
@@ -192,6 +238,7 @@ export default function withQuickButtons(WrappedComponent) {
         isArchiveFolder,
         getPrimaryFileLink,
         setShareChanged,
+        roomLifetime: infoPanelRoom?.lifetime,
       };
     },
   )(observer(WithQuickButtons));

packages/client/src/components/QuickButtons.js

@@ -37,7 +37,7 @@ import LockedReact12SvgUrl from "PUBLIC_DIR/images/icons/12/lock.react.svg?url";
 
 import React, { useMemo } from "react";
 import styled from "styled-components";
-import { isTablet, isMobile, commonIconsStyles } from "@docspace/shared/utils";
+import { isTablet } from "@docspace/shared/utils";
 import {
   DeviceType,
   FileStatus,
@@ -82,6 +82,8 @@ const QuickButtons = (props) => {
     isPersonalRoom,
     isArchiveFolder,
     currentDeviceType,
+    showLifetimeIcon,
+    expiredDate,
   } = props;
 
   const isMobile = currentDeviceType === DeviceType.mobile;
@@ -153,14 +155,9 @@ const QuickButtons = (props) => {
     !isArchiveFolder &&
     !isTile;
 
-  //const showLifetimeIcon = item.lifetime < item.lifetime * 0.1
-  const showLifetimeIcon = true;
-
-  const fileDeleteDate = "22.02 12:08 PM"; // TODO:
-
   const getTooltipContent = () => (
     <Text fontSize="12px" fontWeight={400} noSelect>
-      {t("Files:FileWillBeDeleted", { date: fileDeleteDate })}.
+      {t("Files:FileWillBeDeleted", { date: expiredDate })}.
     </Text>
   );
 

packages/client/src/store/FilesStore.js

@@ -3172,6 +3172,7 @@ class FilesStore {
         providerId,
         startFilling,
         draftLocation,
+        expired,
       } = item;
 
       const thirdPartyIcon = this.thirdPartyStore.getThirdPartyIcon(
@@ -3347,6 +3348,7 @@ class FilesStore {
         providerId,
         startFilling,
         draftLocation,
+        expired,
       };
     });
   };