[FE][Classroom] Add a warning if the expiration date is in less than a month

frontend/src/OnlineClassroom/ClassroomUserInfo/AccountExpiration.tsx

@@ -8,6 +8,12 @@ import { AxiosError } from "axios";
 import { WarningIcon } from "../../icons/WarningIcon";
 import { PlusIcon } from "../../icons/PlusIcon";
 
+enum ExpiryStatus {
+    Ok,
+    Soon,
+    Expired,
+}
+
 export function AccountExpiration(props: {userId: number}) {
     const [expirationDate, setExpirationDate] = createSignal<string | null>(null); // YYYY-MM-DD
     const [localExpirationDate, setLocalExpirationDate] = createSignal<string | null>(null); // YYYY-MM-DD
@@ -15,17 +21,38 @@ export function AccountExpiration(props: {userId: number}) {
 
     const loading = createMemo(() => status() === LoadingStatus.Loading);
 
-    const expired = createMemo(() => {
+    const expired = createMemo<ExpiryStatus>(() => {
         if (expirationDate() === null) {
-            return false;
+            return ExpiryStatus.Ok;
         }
 
-        const date = new Date(`${expirationDate()}T00:00:00`);
+        const expiryDate = new Date(`${expirationDate()}T00:00:00`);
-        const today = new Date();
 
-        return date < today;
+        const today = new Date();
+        const aMonthFromNow = new Date();
+        aMonthFromNow.setDate(aMonthFromNow.getDate() + 30);
+
+        if (expiryDate < today) {
+            return ExpiryStatus.Expired;
+        } else if (expiryDate < aMonthFromNow) {
+            return ExpiryStatus.Soon;
+        } else {
+            return ExpiryStatus.Ok;
+        }
     });
 
+    const dateColor = createMemo(() => {
+        switch (expired()) {
+            case ExpiryStatus.Ok:
+                return "var(--c-success)";
+            case ExpiryStatus.Soon:
+                return "#9e4300";
+            case ExpiryStatus.Expired:
+                return "var(--c-error)";
+        }
+    });
+
+
     const loadExpiration = () => {
         setError("");
         setStatus(LoadingStatus.Loading);
@@ -98,8 +125,8 @@ export function AccountExpiration(props: {userId: number}) {
 
                     <span
                         class="font-mono font-bold text-center"
-                        style={{color: expired() ? "var(--c-error)" : "var(--c-on-surface)"}}
+                        style={{color: dateColor()}}
-                        title={expired() ? "Esta cuenta ha expirado" : ""}
+                        title={expired() === ExpiryStatus.Expired ? "Esta cuenta ha expirado" : ""}
                     >
                         <Show when={loading()}>
                             <LoadingIcon
@@ -108,9 +135,9 @@ export function AccountExpiration(props: {userId: number}) {
                             />
                         </Show>
                         <Show when={!loading()}>
-                            {formatDate(expirationDate() ?? "")}
+                            {formatDate(expirationDate() ?? "0-0-0")}
                         </Show>
-                        <Show when={expired()}>
+                        <Show when={expired() === ExpiryStatus.Expired}>
                             <WarningIcon
                                 class="mx-2"
                                 fill="var(--c-error)"
@@ -123,7 +150,7 @@ export function AccountExpiration(props: {userId: number}) {
 
                 <div class="grid grid-cols-2">
                     <div class="border-r border-c-outline pt-2 pr-1">
-                        <p>Ampliar por preset:</p>
+                        <p>Establecer expiracion:</p>
 
                         <button
                             class="bg-c-primary text-c-on-primary px-3 py-2 rounded-full cursor-pointer
@@ -133,7 +160,7 @@ export function AccountExpiration(props: {userId: number}) {
                             onclick={setExpiration2Months}
                         >
                             <span class="mr-6">
-                                Agregar 2 meses
+                                2 meses d. hoy
                             </span>
                             <span
                                 class="absolute top-1 right-2"
@@ -155,7 +182,7 @@ export function AccountExpiration(props: {userId: number}) {
                         </button>
                     </div>
                     <div class="pt-2 pl-1 text-right">
-                        <p>Ampliar manualmente:</p>
+                        <p>Establecer expiracion:</p>
 
                         <input
                             class="bg-c-surface text-c-on-surface border border-c-outline rounded-lg py-1 px-2 font-mono
@@ -176,7 +203,7 @@ export function AccountExpiration(props: {userId: number}) {
                             onclick={setExpiration}
                         >
                             <span class="mr-6">
-                            Actualizar
+                                Establecer
                             </span>
                             <span
                                 class="absolute top-1 right-2"