feat(console): add activation error for custom domain (#3994)

packages/console/src/components/InlineNotification/index.module.scss

@@ -21,6 +21,8 @@
 
   .content {
     flex: 1;
+    overflow: hidden;
+    overflow-wrap: break-word;
   }
 
   &.info {

packages/console/src/consts/custom-domain.ts

@@ -0,0 +1 @@
+export const customDomainSyncInterval = 10; // In seconds

packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/ActivationProcess/index.module.scss

@@ -4,3 +4,12 @@
   border-top: 1px solid var(--color-divider);
   padding: _.unit(5) _.unit(6) 0;
 }
+
+.errorNotification {
+  margin-bottom: _.unit(6);
+
+  .hint {
+    margin-top: _.unit(1);
+    color: var(--color-text-secondary);
+  }
+}

packages/console/src/pages/TenantSettings/TenantDomainSettings/CustomDomain/ActivationProcess/index.tsx

@@ -1,5 +1,9 @@
 import { type Domain, type DomainDnsRecords, type DomainDnsRecord } from '@logto/schemas';
 
+import DynamicT from '@/components/DynamicT';
+import InlineNotification from '@/components/InlineNotification';
+import { customDomainSyncInterval } from '@/consts/custom-domain';
+
 import DnsRecordsTable from './DnsRecordsTable';
 import Step from './Step';
 import * as styles from './index.module.scss';
@@ -12,7 +16,7 @@ const isSetupSslDnsRecord = ({ type, name }: DomainDnsRecord) =>
   type.toUpperCase() === 'TXT' && name.includes('_acme-challenge');
 
 function ActivationProcess({ customDomain }: Props) {
-  const { dnsRecords, status: domainStatus } = customDomain;
+  const { dnsRecords, status: domainStatus, errorMessage } = customDomain;
 
   const { verifyDomainDnsRecord, setupSslDnsRecord } = dnsRecords.reduce<{
     verifyDomainDnsRecord: DomainDnsRecords;
@@ -36,6 +40,17 @@ function ActivationProcess({ customDomain }: Props) {
 
   return (
     <div className={styles.container}>
+      {errorMessage && (
+        <InlineNotification className={styles.errorNotification} severity="error">
+          {errorMessage}
+          <div className={styles.hint}>
+            <DynamicT
+              forKey="domain.error_hint"
+              interpolation={{ value: customDomainSyncInterval }}
+            />
+          </div>
+        </InlineNotification>
+      )}
       <Step
         step={1}
         title="domain.custom.verify_domain"

packages/console/src/pages/TenantSettings/TenantDomainSettings/index.tsx

@@ -4,6 +4,7 @@ import useSWR from 'swr';
 
 import FormCard from '@/components/FormCard';
 import FormField from '@/components/FormField';
+import { customDomainSyncInterval } from '@/consts/custom-domain';
 import useApi, { type RequestError } from '@/hooks/use-api';
 import useSwrFetcher from '@/hooks/use-swr-fetcher';
 
@@ -16,8 +17,7 @@ function TenantDomainSettings() {
   const api = useApi();
   const fetcher = useSwrFetcher<Domain[]>(api);
   const { data, error, mutate } = useSWR<Domain[], RequestError>('api/domains', fetcher, {
-    // Note: check the custom domain status every 10 seconds.
-    refreshInterval: 10_000,
+    refreshInterval: customDomainSyncInterval * 1000,
   });
 
   const isLoading = !data && !error;