From 08e695b9addebbe7b3d96148066f89f8ed62047c Mon Sep 17 00:00:00 2001
From: Johnton Chen <504071088@qq.com>
Date: Fri, 31 Jul 2026 17:01:23 +0800
Subject: [PATCH] feat(company): enhance expiry warning with rich i18n and day
 ranges

Add red rich-text style to useRichI18n. Update CompanyExpireWarning to
show info/warning/error states based on remaining days and render rich
formatted countdown text.
---
 src/components/CompanyExpireWarning/index.tsx | 18 ++++++++++++------
 src/hooks/useRichI18n.tsx                     |  6 ++++++
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/CompanyExpireWarning/index.tsx b/src/components/CompanyExpireWarning/index.tsx
index 6bdc844..c7aa749 100644
--- a/src/components/CompanyExpireWarning/index.tsx
+++ b/src/components/CompanyExpireWarning/index.tsx
@@ -2,21 +2,23 @@ import { ClockCircleOutlined } from '@ant-design/icons';
 import { useBreakpoint } from '@ant-design/pro-components';
 import { history as umiHistory, useAccess } from '@umijs/max';
 import { Alert, Popover, Space } from 'antd';
+import useRichI18n from '@/hooks/useRichI18n';
 import useUserInfo from '@/hooks/useUserInfo';
 import { $t } from '@/utils/i18n';
 import { utcInstance as dayjs } from '@/utils/timeFormat';
 
 const CompanyExpireWarning: React.FC = () => {
+  const { richFormat } = useRichI18n();
   const { isGlobalCompany } = useAccess();
   const { userInfo } = useUserInfo();
   const screens = useBreakpoint();
   const { validityEndTime, validityStatus } = userInfo?.company || {};
-  if (isGlobalCompany) {
+  if (isGlobalCompany || !validityEndTime) {
     return null;
   }
 
   const expireInDays = dayjs(`${validityEndTime}T23:59:59`).diff(
-    dayjs().utc(),
+    dayjs.utc(),
     'day',
   );
 
@@ -25,11 +27,15 @@ const CompanyExpireWarning: React.FC = () => {
       message={
         validityStatus === 2
           ? $t('pages.company.expireTitle')
-          : expireInDays <= 0
-            ? $t('pages.company.expireToday')
-            : `${$t('pages.company.expireInDays', { days: Math.abs(expireInDays) })}`
+          : expireInDays >= 30
+            ? `${$t('pages.company.expireInfo')}${validityEndTime} (UTC+0)`
+            : richFormat('pages.company.expireInDays', {
+                days: Math.abs(expireInDays + 1),
+              })
+      }
+      type={
+        validityStatus === 2 ? 'error' : expireInDays >= 30 ? 'info' : 'warning'
       }
-      type={validityStatus === 2 ? 'error' : 'warning'}
       showIcon
     />
   );
diff --git a/src/hooks/useRichI18n.tsx b/src/hooks/useRichI18n.tsx
index 134fcb5..83d2b3b 100644
--- a/src/hooks/useRichI18n.tsx
+++ b/src/hooks/useRichI18n.tsx
@@ -39,6 +39,12 @@ const richTextMap: Record<string, RichTextInfo> = {
       color: '#818cf8',
     },
   },
+  red: {
+    tag: 'b',
+    style: {
+      color: '#f56565',
+    },
+  },
 };
 const mapKeys = Object.keys(richTextMap);
 const collection = {} as Record<string, (chunks: Node) => Node>;