fix(console): fix overdue invoices notification (#7922)

fix(console): fix overdue payment notification

fix overdue payment notification

Author: simeng-li

packages/console/src/components/PaymentOverdueModal/index.tsx

@@ -19,13 +19,12 @@ import styles from './index.module.scss';
 function PaymentOverdueModal() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { currentTenant, currentTenantId } = useContext(TenantsContext);
-  const { openInvoices = [] } = currentTenant ?? {};
 
   const { visitManagePaymentPage } = useSubscribe();
   const [isActionLoading, setIsActionLoading] = useState(false);
   const [hasClosed, setHasClosed] = useState(false);
 
-  const { hasOverdueInvoices } = useOverdueInvoices();
+  const { hasOverdueInvoices, overdueInvoices } = useOverdueInvoices(currentTenant);
 
   const handleCloseModal = () => {
     setHasClosed(true);
@@ -73,7 +72,7 @@ function PaymentOverdueModal() {
         )}
         <FormField title="upsell.payment_overdue_modal.unpaid_bills">
           <BillInfo
-            cost={openInvoices.reduce(
+            cost={overdueInvoices.reduce(
               (total, currentInvoice) => total + currentInvoice.amountDue,
               0
             )}

packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/TenantStatusTag.tsx

@@ -17,7 +17,7 @@ function TenantStatusTag({ tenantData, className }: Props) {
     subscription: { planId, isEnterprisePlan },
   } = tenantData;
 
-  const { hasOverdueInvoices } = useOverdueInvoices();
+  const { hasOverdueInvoices } = useOverdueInvoices(tenantData);
 
   /**
    * Tenant status priority:

packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.tsx

@@ -22,7 +22,7 @@ function TenantDropdownItem({ tenantData, isSelected, onClick }: Props) {
     name,
     tag,
     regionName,
-    subscription: { planId, isEnterprisePlan },
+    subscription: { planId },
   } = tenantData;
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 

packages/console/src/hooks/use-overdue-invoices.ts

@@ -1,15 +1,36 @@
-import { useContext, useMemo } from 'react';
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
 
+import { type TenantResponse } from '@/cloud/types/router';
 import { isCloud } from '@/consts/env';
-import { TenantsContext } from '@/contexts/TenantsProvider';
 
-function useOverdueInvoices() {
-  const { currentTenant } = useContext(TenantsContext);
-  const { openInvoices = [] } = currentTenant ?? {};
-  const isEnterprise = currentTenant?.subscription.isEnterprisePlan;
+function useOverdueInvoices(tenantData: TenantResponse | undefined) {
+  const { openInvoices = [] } = tenantData ?? {};
+  const isEnterprise = tenantData?.subscription.isEnterprisePlan;
+
+  const overdueInvoices = useMemo(
+    () =>
+      openInvoices.filter(({ dueDate, collectionMethod }) => {
+        switch (collectionMethod) {
+          // For automatic collection method, consider open invoices always overdue
+          case 'charge_automatically': {
+            return true;
+          }
+          // For manual collection method, consider invoices overdue if past due date
+          case 'send_invoice': {
+            return dueDate && dayjs().isAfter(dayjs(dueDate));
+          }
+          default: {
+            // For legacy invoices without collection method, consider them overdue
+            return true;
+          }
+        }
+      }),
+    [openInvoices]
+  );
 
   const hasOverdueInvoices = useMemo(() => {
-    if (!isCloud || openInvoices.length === 0) {
+    if (!isCloud) {
       return false;
     }
 
@@ -21,30 +42,16 @@ function useOverdueInvoices() {
       return false;
     }
 
-    return openInvoices.some(({ dueDate, collectionMethod }) => {
-      switch (collectionMethod) {
-        // For automatic collection method, consider open invoices always overdue
-        case 'charge_automatically': {
-          return true;
-        }
-        // For manual collection method, consider invoices overdue if past due date
-        case 'send_invoice': {
-          return dueDate && dueDate < new Date();
-        }
-        default: {
-          // For legacy invoices without collection method, consider them overdue
-          return true;
-        }
-      }
-    });
-  }, [isEnterprise, openInvoices]);
+    return overdueInvoices.length > 0;
+  }, [isEnterprise, overdueInvoices]);
 
   return useMemo(
     () => ({
       hasOverdueInvoices,
+      overdueInvoices,
       openInvoices,
     }),
-    [hasOverdueInvoices, openInvoices]
+    [hasOverdueInvoices, openInvoices, overdueInvoices]
   );
 }