From ea86159ed75760f4050eece3360e8c0269960d74 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 19 Jan 2023 09:21:22 -0500
Subject: [PATCH] Fleet UI CX: Add license expiration to user settings page
 (#9396)

---
 changes/9370-license-expiry                   |  1 +
 .../UserSidePanel/UserSidePanel.tsx           | 19 +++++++++++++++++--
 .../admin/IntegrationsPage/cards/Mdm/Mdm.tsx  | 11 +----------
 frontend/utilities/helpers.ts                 | 11 +++++++++++
 4 files changed, 30 insertions(+), 12 deletions(-)
 create mode 100644 changes/9370-license-expiry

diff --git a/changes/9370-license-expiry b/changes/9370-license-expiry
new file mode 100644
index 0000000000..feda817d03
--- /dev/null
+++ b/changes/9370-license-expiry
@@ -0,0 +1 @@
+- Add license expiry to account information page for premium users
diff --git a/frontend/pages/UserSettingsPage/UserSidePanel/UserSidePanel.tsx b/frontend/pages/UserSettingsPage/UserSidePanel/UserSidePanel.tsx
index a9215b8940..30ca948bd5 100644
--- a/frontend/pages/UserSettingsPage/UserSidePanel/UserSidePanel.tsx
+++ b/frontend/pages/UserSettingsPage/UserSidePanel/UserSidePanel.tsx
@@ -11,7 +11,12 @@ import Avatar from "components/Avatar";
 import Button from "components/buttons/Button";
 import HumanTimeDiffWithDateTip from "components/HumanTimeDiffWithDateTip";
 
-import { generateRole, generateTeam, greyCell } from "utilities/helpers";
+import {
+  generateRole,
+  generateTeam,
+  greyCell,
+  readableDate,
+} from "utilities/helpers";
 
 interface IUserSidePanelProps {
   currentUser: IUser;
@@ -26,7 +31,7 @@ const UserSidePanel = ({
   onChangePassword,
   onGetApiToken,
 }: IUserSidePanelProps): JSX.Element => {
-  const { isPremiumTier } = useContext(AppContext);
+  const { isPremiumTier, config } = useContext(AppContext);
   const [versionData, setVersionData] = useState<IVersionData>();
 
   useEffect(() => {
@@ -91,6 +96,16 @@ const UserSidePanel = ({
           {roleText}
         </p>
       </div>
+      {isPremiumTier && config && (
+        <div className={`${baseClass}__more-info-detail`}>
+          <p className={`${baseClass}__header`}>License expiration date</p>
+          <p
+            className={`${baseClass}__description ${baseClass}__license-expiration`}
+          >
+            {readableDate(config.license.expiration)}
+          </p>
+        </div>
+      )}
       <div className={`${baseClass}__more-info-detail`}>
         <p className={`${baseClass}__header`}>Password</p>
       </div>
diff --git a/frontend/pages/admin/IntegrationsPage/cards/Mdm/Mdm.tsx b/frontend/pages/admin/IntegrationsPage/cards/Mdm/Mdm.tsx
index 7165c2c886..eea1ea3633 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/Mdm/Mdm.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/Mdm/Mdm.tsx
@@ -15,6 +15,7 @@ import Spinner from "components/Spinner";
 import DataError from "components/DataError";
 import Icon from "components/Icon";
 import TooltipWrapper from "components/TooltipWrapper";
+import { readableDate } from "utilities/helpers";
 
 import RequestCSRModal from "./components/RequestCSRModal";
 import EditTeamModal from "./components/EditTeamModal";
@@ -24,16 +25,6 @@ import EditTeamModal from "./components/EditTeamModal";
 
 const baseClass = "mdm-integrations";
 
-const readableDate = (date: string) => {
-  const dateString = new Date(date);
-
-  return new Intl.DateTimeFormat(navigator.language, {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-  }).format(dateString);
-};
-
 const Mdm = (): JSX.Element => {
   const { isPremiumTier } = useContext(AppContext);
   const { renderFlash } = useContext(NotificationContext);
diff --git a/frontend/utilities/helpers.ts b/frontend/utilities/helpers.ts
index 22370f0ed9..901b98ced1 100644
--- a/frontend/utilities/helpers.ts
+++ b/frontend/utilities/helpers.ts
@@ -683,6 +683,16 @@ export const licenseExpirationWarning = (expiration: string): boolean => {
   return isAfter(new Date(), new Date(expiration));
 };
 
+export const readableDate = (date: string) => {
+  const dateString = new Date(date);
+
+  return new Intl.DateTimeFormat(navigator.language, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  }).format(dateString);
+};
+
 export const performanceIndicator = (
   scheduledQueryStats: IScheduledQueryStats
 ): string => {
@@ -850,6 +860,7 @@ export default {
   humanQueryLastRun,
   inMilliseconds,
   licenseExpirationWarning,
+  readableDate,
   secondsToHms,
   secondsToDhms,
   labelSlug,