From 8632e2858498b085521890b52a36aa8423b84602 Mon Sep 17 00:00:00 2001
From: Wilfred Asomani <devwilfredagyei@gmail.com>
Date: Mon, 17 Apr 2023 17:10:55 +0000
Subject: [PATCH] web/satellite: show freeze warning banner

This change displays a freeze warning banner if the user has a freeze
warning event.

Change-Id: Ia221dedd885f80ff0b8fd0de80269a94c59eaefb
---
 web/satellite/src/api/auth.ts                 |  8 +++--
 web/satellite/src/store/modules/usersStore.ts |  2 +-
 web/satellite/src/types/users.ts              | 14 +++++++--
 web/satellite/src/views/DashboardArea.vue     | 29 +++++++++++++++----
 .../views/all-dashboard/AllDashboardArea.vue  | 22 +++++++++++++-
 5 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/web/satellite/src/api/auth.ts b/web/satellite/src/api/auth.ts
index d15d278e0..376c8909b 100644
--- a/web/satellite/src/api/auth.ts
+++ b/web/satellite/src/api/auth.ts
@@ -5,6 +5,7 @@ import { ErrorBadRequest } from '@/api/errors/ErrorBadRequest';
 import { ErrorMFARequired } from '@/api/errors/ErrorMFARequired';
 import { ErrorTooManyRequests } from '@/api/errors/ErrorTooManyRequests';
 import {
+    FreezeStatus,
     SetUserSettingsData,
     TokenInfo,
     UpdatedUser,
@@ -233,13 +234,16 @@ export class AuthHttpApi implements UsersApi {
      *
      * @throws Error
      */
-    public async getFrozenStatus(): Promise<boolean> {
+    public async getFrozenStatus(): Promise<FreezeStatus> {
         const path = `${this.ROOT_PATH}/account/freezestatus`;
         const response = await this.http.get(path);
         if (response.ok) {
             const responseData = await response.json();
 
-            return responseData.frozen;
+            return new FreezeStatus(
+                responseData.frozen,
+                responseData.warned,
+            );
         }
 
         throw new Error('can not get user frozen status');
diff --git a/web/satellite/src/store/modules/usersStore.ts b/web/satellite/src/store/modules/usersStore.ts
index 4d1de7c5c..72f31ffb8 100644
--- a/web/satellite/src/store/modules/usersStore.ts
+++ b/web/satellite/src/store/modules/usersStore.ts
@@ -52,7 +52,7 @@ export const useUsersStore = defineStore('users', () => {
     }
 
     async function getFrozenStatus(): Promise<void> {
-        state.user.isFrozen = await api.getFrozenStatus();
+        state.user.freezeStatus = await api.getFrozenStatus();
     }
 
     async function disableUserMFA(request: DisableMFARequest): Promise<void> {
diff --git a/web/satellite/src/types/users.ts b/web/satellite/src/types/users.ts
index 4eb59ac1c..a8c7bf7dd 100644
--- a/web/satellite/src/types/users.ts
+++ b/web/satellite/src/types/users.ts
@@ -27,7 +27,7 @@ export interface UsersApi {
      * @returns boolean
      * @throws Error
      */
-    getFrozenStatus(): Promise<boolean>;
+    getFrozenStatus(): Promise<FreezeStatus>;
 
     /**
      * Fetches user frozen status.
@@ -94,7 +94,7 @@ export class User {
         public mfaRecoveryCodeCount: number = 0,
         public _createdAt: string | null = null,
         public signupPromoCode: string = '',
-        public isFrozen: boolean = false,
+        public freezeStatus: FreezeStatus = new FreezeStatus(),
     ) {}
 
     public get createdAt(): Date | null {
@@ -180,3 +180,13 @@ export interface SetUserSettingsData {
     onboardingStep?: string | null;
     sessionDuration?: number;
 }
+
+/**
+ * FreezeStatus represents a freeze-status endpoint response.
+ */
+export class FreezeStatus {
+    public constructor(
+        public frozen = false,
+        public warned = false,
+    ) {}
+}
diff --git a/web/satellite/src/views/DashboardArea.vue b/web/satellite/src/views/DashboardArea.vue
index 7c9dd2159..7eaff3cfb 100644
--- a/web/satellite/src/views/DashboardArea.vue
+++ b/web/satellite/src/views/DashboardArea.vue
@@ -38,6 +38,17 @@
                                 </template>
                             </v-banner>
 
+                            <v-banner
+                                v-if="isAccountWarned && !isLoading && dashboardContent"
+                                severity="warning"
+                                :dashboard-ref="dashboardContent"
+                            >
+                                <template #text>
+                                    <p class="medium">Your account will be frozen soon due to billing issues. Please update your payment information.</p>
+                                    <p class="link" @click.stop.self="redirectToBillingPage">To Billing Page</p>
+                                </template>
+                            </v-banner>
+
                             <v-banner
                                 v-if="limitState.hundredIsShown && !isLoading && dashboardContent"
                                 severity="critical"
@@ -215,7 +226,14 @@ const debugTimerShown = computed((): boolean => {
  * Indicates if account was frozen due to billing issues.
  */
 const isAccountFrozen = computed((): boolean => {
-    return usersStore.state.user.isFrozen;
+    return usersStore.state.user.freezeStatus.frozen;
+});
+
+/**
+ * Indicates if account was warned due to billing issues.
+ */
+const isAccountWarned = computed((): boolean => {
+    return usersStore.state.user.freezeStatus.warned;
 });
 
 /**
@@ -752,6 +770,11 @@ onBeforeUnmount(() => {
     }
 
     .banner-container {
+        padding-top: 0 !important;
+
+        &:empty {
+            display: none;
+        }
 
         &__bottom {
             flex-grow: 1;
@@ -761,10 +784,6 @@ onBeforeUnmount(() => {
         }
     }
 
-    .banner-container:empty {
-        display: none;
-    }
-
     .dashboard {
         height: 100%;
         background-color: #f5f6fa;
diff --git a/web/satellite/src/views/all-dashboard/AllDashboardArea.vue b/web/satellite/src/views/all-dashboard/AllDashboardArea.vue
index 3403ed901..67fcdab36 100644
--- a/web/satellite/src/views/all-dashboard/AllDashboardArea.vue
+++ b/web/satellite/src/views/all-dashboard/AllDashboardArea.vue
@@ -43,6 +43,18 @@
                     </template>
                 </v-banner>
 
+                <v-banner
+                    v-if="isAccountWarned && !isLoading && dashboardContent"
+                    class="all-dashboard__banners__warning"
+                    severity="warning"
+                    :dashboard-ref="dashboardContent"
+                >
+                    <template #text>
+                        <p class="medium">Your account will be frozen soon due to billing issues. Please update your payment information.</p>
+                        <p class="link" @click.stop.self="redirectToBillingPage">To Billing Page</p>
+                    </template>
+                </v-banner>
+
                 <v-banner
                     v-if="limitState.hundredIsShown && !isLoading && dashboardContent"
                     class="all-dashboard__banners__hundred-limit"
@@ -197,7 +209,14 @@ const debugTimerShown = computed((): boolean => {
  * Indicates if account was frozen due to billing issues.
  */
 const isAccountFrozen = computed((): boolean => {
-    return usersStore.state.user.isFrozen;
+    return usersStore.state.user.freezeStatus.frozen;
+});
+
+/**
+ * Indicates if account was warned due to billing issues.
+ */
+const isAccountWarned = computed((): boolean => {
+    return usersStore.state.user.freezeStatus.warned;
 });
 
 /**
@@ -681,6 +700,7 @@ onBeforeUnmount(() => {
         &__upgrade,
         &__project-limit,
         &__freeze,
+        &__warning,
         &__hundred-limit,
         &__eighty-limit {
             margin: 20px 0 0;