feat(worklist): new investigational use text (#3999)

platform/ui/src/components/Header/Header.tsx

@@ -58,7 +58,6 @@ function Header({
         </div>
         <div className="flex items-center">{children}</div>
         <div className="flex items-center">
-          <span className="text-common-light mr-3 text-lg">{t('INVESTIGATIONAL USE ONLY')}</span>
           <Dropdown
             id="options"
             showDropdownIcon={false}

platform/ui/src/components/Icon/getIcon.js

@@ -145,6 +145,10 @@ import oldTrash from './../../assets/icons/old-trash.svg';
 import oldPlay from './../../assets/icons/old-play.svg';
 import oldStop from './../../assets/icons/old-stop.svg';
 
+/** New investigational use */
+
+import investigationalUse from './../../assets/icons/illustration-investigational-use.svg';
+
 const ICONS = {
   'arrow-down': arrowDown,
   'arrow-left': arrowLeft,
@@ -290,6 +294,9 @@ const ICONS = {
   'old-trash': oldTrash,
   'old-play': oldPlay,
   'old-stop': oldStop,
+
+  /** New investigational use */
+  'illustration-investigational-use': investigationalUse,
 };
 
 function addIcon(iconName, iconSVG) {

platform/ui/src/components/InvestigationalUseDialog/InvestigationalUseDialog.tsx

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Icon from '../Icon';
+import Button, { ButtonEnums } from '../Button';
+
+export enum showDialogOption {
+  NeverShowDialog = 'never',
+  AlwaysShowDialog = 'always',
+  ShowOnceAndConfigure = 'configure',
+}
+
+const InvestigationalUseDialog = ({ dialogConfiguration }) => {
+  const { option, days } = dialogConfiguration;
+  const [isHidden, setIsHidden] = useState(true);
+
+  useEffect(() => {
+    const dialogLocalState = localStorage.getItem('investigationalUseDialog');
+    const dialogSessionState = sessionStorage.getItem('investigationalUseDialog');
+
+    switch (option) {
+      case showDialogOption.NeverShowDialog:
+        setIsHidden(true);
+        break;
+      case showDialogOption.AlwaysShowDialog:
+        setIsHidden(!!dialogSessionState);
+        break;
+      case showDialogOption.ShowOnceAndConfigure:
+        if (dialogLocalState) {
+          const { expiryDate } = JSON.parse(dialogLocalState);
+          const isExpired = new Date() > new Date(expiryDate);
+          setIsHidden(!isExpired);
+        } else {
+          setIsHidden(false);
+        }
+        break;
+      default:
+        setIsHidden(true);
+    }
+  }, [option, days]);
+
+  const handleConfirmAndHide = () => {
+    const expiryDate = new Date();
+
+    switch (option) {
+      case showDialogOption.ShowOnceAndConfigure:
+        expiryDate.setDate(expiryDate.getDate() + days);
+        localStorage.setItem('investigationalUseDialog', JSON.stringify({ expiryDate }));
+        break;
+      case showDialogOption.AlwaysShowDialog:
+        sessionStorage.setItem('investigationalUseDialog', 'hidden');
+        break;
+    }
+    setIsHidden(true);
+  };
+
+  if (isHidden) {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-2 z-50 flex h-[86px] w-full justify-center">
+      <div className="bg-secondary-dark border-primary-dark flex w-[90%] items-center justify-between rounded-lg border-2 pl-[22px] pr-[22px] pt-[10px] pb-[10px] shadow-lg">
+        <div className="flex items-center gap-4">
+          <Icon
+            name="illustration-investigational-use"
+            className="h-18 w-18"
+          />
+          <div className="flex flex-col">
+            <div className="text-[19px] text-white">
+              OHIF Viewer is{' '}
+              <span className="text-primary-light">for investigational use only</span>
+            </div>
+            <div className="text-[13px] text-white">
+              <span
+                className="text-primary-active cursor-pointer"
+                onClick={() => window.open('https://ohif.org/', '_blank')}
+              >
+                Learn more about OHIF Viewer
+              </span>
+            </div>
+          </div>
+        </div>
+        <Button
+          type={ButtonEnums.type.primary}
+          onClick={handleConfirmAndHide}
+          className="bg-primary-main"
+        >
+          Confirm and Hide
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+InvestigationalUseDialog.propTypes = {
+  dialogConfiguration: PropTypes.shape({
+    option: PropTypes.oneOf(Object.values(showDialogOption)).isRequired,
+    days: PropTypes.number,
+  }).isRequired,
+};
+
+InvestigationalUseDialog.defaultProps = {
+  dialogConfiguration: {
+    option: showDialogOption.AlwaysShowDialog,
+  },
+};
+
+export default InvestigationalUseDialog;

platform/ui/src/components/InvestigationalUseDialog/index.js

@@ -0,0 +1,3 @@
+import InvestigationalUseDialog from './InvestigationalUseDialog';
+
+export default InvestigationalUseDialog;

platform/ui/src/components/index.js

@@ -79,6 +79,7 @@ import PanelSection from './PanelSection';
 import AdvancedToolbox from './AdvancedToolbox';
 import InputDoubleRange from './InputDoubleRange';
 import LegacyButtonGroup from './LegacyButtonGroup';
+import InvestigationalUseDialog from './InvestigationalUseDialog';
 import MeasurementItem from './MeasurementTable/MeasurementItem';
 
 export {
@@ -164,5 +165,6 @@ export {
   ViewportPane,
   ViewportOverlay,
   WindowLevelMenuItem,
+  InvestigationalUseDialog,
   MeasurementItem,
 };