Introduce AccountStatusBadge

Author: louischan-oursky

portal/src/graphql/adminapi/UserDetailSummary.tsx

@@ -1,20 +1,13 @@
 import React from "react";
 import cn from "classnames";
 import { Link } from "react-router-dom";
-import { Persona, PersonaSize, Text, FontIcon, IStyle } from "@fluentui/react";
+import { Persona, PersonaSize, Text, FontIcon } from "@fluentui/react";
 import { Context, FormattedMessage } from "@oursky/react-messageformat";
-
 import { formatDatetime } from "../../util/formatDatetime";
+import { AccountStatus, AccountStatusBadge } from "./UserDetailsAccountStatus";
 
 import styles from "./UserDetailSummary.module.css";
 
-const warnBadgeStyle: IStyle = {
-  padding: 4,
-  borderRadius: 4,
-  color: "#ffffff",
-  backgroundColor: "#e23d3d",
-};
-
 interface UserDetailSummaryProps {
   className?: string;
   isAnonymous: boolean;
@@ -26,25 +19,7 @@ interface UserDetailSummaryProps {
   profileImageEditable: boolean;
   createdAtISO: string | null;
   lastLoginAtISO: string | null;
-  badgeTextId: string | null;
-}
-
-interface WarnUserStatusBadgeProps {
-  badgeTextId: string;
-}
-
-function WarnUserStatusBadge(props: WarnUserStatusBadgeProps) {
-  const { badgeTextId } = props;
-  return (
-    <Text
-      className={cn(styles.inlineGridItem)}
-      styles={{
-        root: warnBadgeStyle,
-      }}
-    >
-      <FormattedMessage id={badgeTextId} />
-    </Text>
-  );
+  accountStatus: AccountStatus;
 }
 
 const UserDetailSummary: React.VFC<UserDetailSummaryProps> =
@@ -60,7 +35,7 @@ const UserDetailSummary: React.VFC<UserDetailSummaryProps> =
       createdAtISO,
       lastLoginAtISO,
       className,
-      badgeTextId,
+      accountStatus,
     } = props;
     const { locale } = React.useContext(Context);
     const formatedSignedUp = React.useMemo(() => {
@@ -100,9 +75,10 @@ const UserDetailSummary: React.VFC<UserDetailSummaryProps> =
           <Text className={styles.formattedName} variant="medium">
             {formattedName ? formattedName : ""}
           </Text>
-          {badgeTextId ? (
-            <WarnUserStatusBadge badgeTextId={badgeTextId} />
-          ) : null}
+          <AccountStatusBadge
+            className={styles.inlineGridItem}
+            accountStatus={accountStatus}
+          />
           <Text variant="small">
             <FormattedMessage
               id="UserDetails.signed-up"

portal/src/graphql/adminapi/UserDetailsAccountStatus.tsx

@@ -1707,4 +1707,53 @@ export function AccountStatusDialog(
   );
 }
 
+export interface AccountStatusBadgeProps {
+  className?: string;
+  accountStatus: AccountStatus;
+}
+
+const warnBadgeStyle: IStyle = {
+  padding: 4,
+  borderRadius: 4,
+  color: "#ffffff",
+  backgroundColor: "#e23d3d",
+};
+
+export function AccountStatusBadge(
+  props: AccountStatusBadgeProps
+): React.ReactElement | null {
+  const now = new Date();
+  const { accountStatus, className } = props;
+  const id =
+    accountStatus.deleteAt != null
+      ? "AccountStatusBadge.scheduled-deletion"
+      : accountStatus.isAnonymized
+      ? "AccountStatusBadge.anonymized"
+      : accountStatus.anonymizeAt != null
+      ? "AccountStatusBadge.scheduled-anonymization"
+      : accountStatus.accountValidFrom != null &&
+        now.getTime() < new Date(accountStatus.accountValidFrom).getTime()
+      ? "AccountStatusBadge.account-outside-valid-period"
+      : accountStatus.accountValidUntil != null &&
+        now.getTime() >= new Date(accountStatus.accountValidUntil).getTime()
+      ? "AccountStatusBadge.account-outside-valid-period"
+      : accountStatus.isDisabled
+      ? "AccountStatusBadge.disabled"
+      : null;
+  if (id == null) {
+    return null;
+  }
+
+  return (
+    <Text
+      className={className}
+      styles={{
+        root: warnBadgeStyle,
+      }}
+    >
+      <FormattedMessage id={id} />
+    </Text>
+  );
+}
+
 export default UserDetailsAccountStatus;

portal/src/graphql/adminapi/UserDetailsScreen.tsx

@@ -315,23 +315,6 @@ const UserDetails: React.VFC<UserDetailsProps> = function UserDetails(
     return level === "readwrite";
   }, [standardAttributeAccessControl]);
 
-  const dataStatusBadgeTextId = React.useMemo(() => {
-    let badgeTextId = null;
-    if (data.isDisabled) {
-      badgeTextId = "UserDetails.disabled.badge";
-    }
-    if (data.anonymizeAt) {
-      badgeTextId = "UserDetails.scheduled-anonymization.badge";
-    }
-    if (data.isAnonymized) {
-      badgeTextId = "UserDetails.anonymized.badge";
-    }
-    if (data.deleteAt) {
-      badgeTextId = "UserDetails.scheduled-removal.badge";
-    }
-    return badgeTextId;
-  }, [data.isDisabled, data.anonymizeAt, data.isAnonymized, data.deleteAt]);
-
   if (data.isAnonymized) {
     return (
       <div className={styles.widget}>
@@ -345,7 +328,7 @@ const UserDetails: React.VFC<UserDetailsProps> = function UserDetails(
           endUserAccountIdentifier={data.endUserAccountID ?? undefined}
           createdAtISO={data.createdAt ?? null}
           lastLoginAtISO={data.lastLoginAt ?? null}
-          badgeTextId={dataStatusBadgeTextId}
+          accountStatus={data}
         />
         <MessageBar messageBarType={MessageBarType.info}>
           <FormattedMessage id="UserDetailsScreen.user-anonymized.message" />
@@ -381,7 +364,7 @@ const UserDetails: React.VFC<UserDetailsProps> = function UserDetails(
         endUserAccountIdentifier={data.endUserAccountID ?? undefined}
         createdAtISO={data.createdAt ?? null}
         lastLoginAtISO={data.lastLoginAt ?? null}
-        badgeTextId={dataStatusBadgeTextId}
+        accountStatus={data}
       />
       <AGPivot
         styles={{

portal/src/locale-data/en.json

@@ -426,11 +426,6 @@
   "UserDetails.account-security.disabled": "(Disabled)",
   "UserDetails.account-status.header": "Account Status",
 
-  "UserDetails.disabled.badge": "Disabled",
-  "UserDetails.scheduled-anonymization.badge": "Anonymization scheduled",
-  "UserDetails.anonymized.badge": "Anonymized",
-  "UserDetails.scheduled-removal.badge": "Removal scheduled",
-
   "UserDetailsAccountStatus.title": "Account Status",
   "UserDetailsAccountStatus.disable-user.title": "Disable User",
   "UserDetailsAccountStatus.disable-user.body": "Temporarily disables the user’s account, preventing them from logging in or using the system. Active sessions will be removed.",
@@ -493,6 +488,12 @@
   "AccountStatusDialog.account-valid-period.action.save": "Save",
   "AccountStatusDialog.account-valid-period.action.edit": "Update valid period",
 
+  "AccountStatusBadge.disabled": "Disabled",
+  "AccountStatusBadge.account-outside-valid-period": "Account outside valid period",
+  "AccountStatusBadge.scheduled-anonymization": "Anonymization scheduled",
+  "AccountStatusBadge.scheduled-deletion": "Removal scheduled",
+  "AccountStatusBadge.anonymized": "Anonymized",
+
   "Add2FAScreen.title.phone": "Add 2FA Phone",
   "Add2FAScreen.title.email": "Add 2FA Email",
   "Add2FAScreen.title.password": "Add 2FA Password",