refactor(console): update PaymentOverDueModal display logic (#7908)

* refactor(console): update PaymentOverDueModal display logic

update PaymentOverDueModal display logic

* fix(console): fix overdue label

fix overdue label

Author: simeng-li

packages/connectors/connector-logto-email/package.json

@@ -52,7 +52,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@logto/cloud": "0.2.5-299028a",
+    "@logto/cloud": "0.2.5-c450763",
     "@silverhand/eslint-config": "6.0.1",
     "@silverhand/ts-config": "6.0.0",
     "@types/node": "^22.14.0",

packages/console/package.json

@@ -28,7 +28,7 @@
     "@fontsource/roboto-mono": "^5.0.0",
     "@inkeep/cxkit-react": "^0.5.66",
     "@jest/types": "^29.5.0",
-    "@logto/cloud": "0.2.5-299028a",
+    "@logto/cloud": "0.2.5-c450763",
     "@logto/connector-kit": "workspace:^",
     "@logto/core-kit": "workspace:^",
     "@logto/language-kit": "workspace:^",

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

@@ -3,12 +3,12 @@ import { Trans, useTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
 
 import { contactEmailLink } from '@/consts';
-import { isCloud } from '@/consts/env';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import Button from '@/ds-components/Button';
 import FormField from '@/ds-components/FormField';
 import InlineNotification from '@/ds-components/InlineNotification';
 import ModalLayout from '@/ds-components/ModalLayout';
+import useOverdueInvoices from '@/hooks/use-overdue-invoices';
 import useSubscribe from '@/hooks/use-subscribe';
 import modalStyles from '@/scss/modal.module.scss';
 
@@ -23,20 +23,15 @@ function PaymentOverdueModal() {
 
   const { visitManagePaymentPage } = useSubscribe();
   const [isActionLoading, setIsActionLoading] = useState(false);
-
   const [hasClosed, setHasClosed] = useState(false);
 
-  // TODO: this is a temporary fix to hide the modal for enterprise tenants
-  // Enterprise tenants' invoices are manually paid and has a due date in the future
-  // Should show the modal only if the invoices are overdue
-  const isEnterprise = currentTenant?.subscription.isEnterprisePlan;
+  const { hasOverdueInvoices } = useOverdueInvoices();
 
   const handleCloseModal = () => {
     setHasClosed(true);
   };
 
-  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-  if (!isCloud || openInvoices.length === 0 || isEnterprise || hasClosed) {
+  if (!hasOverdueInvoices || hasClosed) {
     return null;
   }
 

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

@@ -1,6 +1,7 @@
 import { type TenantResponse } from '@/cloud/types/router';
 import DynamicT from '@/ds-components/DynamicT';
 import Tag from '@/ds-components/Tag';
+import useOverdueInvoices from '@/hooks/use-overdue-invoices';
 import { isPaidPlan } from '@/utils/subscription';
 
 type Props = {
@@ -12,11 +13,12 @@ function TenantStatusTag({ tenantData, className }: Props) {
   const {
     usage,
     quota,
-    openInvoices,
     isSuspended,
     subscription: { planId, isEnterprisePlan },
   } = tenantData;
 
+  const { hasOverdueInvoices } = useOverdueInvoices();
+
   /**
    * Tenant status priority:
    * 1. suspend
@@ -33,7 +35,7 @@ function TenantStatusTag({ tenantData, className }: Props) {
     );
   }
 
-  if (openInvoices.length > 0) {
+  if (hasOverdueInvoices) {
     return (
       <Tag className={className}>
         <DynamicT forKey="tenants.status.overdue" />

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

@@ -0,0 +1,51 @@
+import { useContext, useMemo } from 'react';
+
+import { isCloud } from '@/consts/env';
+import { TenantsContext } from '@/contexts/TenantsProvider';
+
+function useOverdueInvoices() {
+  const { currentTenant } = useContext(TenantsContext);
+  const { openInvoices = [] } = currentTenant ?? {};
+  const isEnterprise = currentTenant?.subscription.isEnterprisePlan;
+
+  const hasOverdueInvoices = useMemo(() => {
+    if (!isCloud || openInvoices.length === 0) {
+      return false;
+    }
+
+    // Enterprise tenants' invoices are manually paid and has a due date in the future
+    // Should show the modal only if the invoices are overdue.
+    // Keep this for now as some legacy invoices data might not have the `collectionMethod` and `dueDate` fields
+    // TODO: this is a temporary fix to hide the modal for enterprise tenants. Remove this after all legacy invoices are handled.
+    if (isEnterprise) {
+      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 useMemo(
+    () => ({
+      hasOverdueInvoices,
+      openInvoices,
+    }),
+    [hasOverdueInvoices, openInvoices]
+  );
+}
+
+export default useOverdueInvoices;

packages/core/package.json

@@ -101,7 +101,7 @@
     "zod": "3.24.3"
   },
   "devDependencies": {
-    "@logto/cloud": "0.2.5-299028a",
+    "@logto/cloud": "0.2.5-c450763",
     "@silverhand/eslint-config": "6.0.1",
     "@silverhand/ts-config": "6.0.0",
     "@types/adm-zip": "^0.5.5",