feat: add estimated removal date in the timeline

assets/components/search/DomainResult.tsx

@@ -96,7 +96,7 @@ export function DomainResult({domain}: { domain: Domain }) {
                             {
                                 domain.events.length > 0 && <>
                                     <Divider orientation='left'>{t`Timeline`}</Divider>
-                                    <EventTimeline events={domainEvents}/>
+                                    <EventTimeline events={domainEvents} expiresInDays={domain.expiresInDays}/>
                                 </>
                             }
                             {

assets/components/search/EventTimeline.tsx

@@ -5,19 +5,56 @@ import useBreakpoint from '../../hooks/useBreakpoint'
 import {rdapEventDetailTranslation, rdapEventNameTranslation} from '../../utils/functions/rdapTranslation'
 import {actionToColor} from '../../utils/functions/actionToColor'
 import {actionToIcon} from '../../utils/functions/actionToIcon'
+import {ThunderboltOutlined} from "@ant-design/icons"
+import {t} from "ttag"
 
-export function EventTimeline({events}: { events: Event[] }) {
+function getWhoisRemoveTimelineEvent(expiresInDays: number) {
+    const locale = navigator.language.split('-')[0]
+    const sm = useBreakpoint('sm')
+    const eventName = t`Estimated removal`
+    const eventDetail = t`Estimated date when the WHOIS record is removed`
+
+    const dateStr =
+        <Typography.Text>
+            {new Date(new Date().getTime() + expiresInDays * 24 * 60 * 60 * 1e3).toLocaleDateString(locale)}
+        </Typography.Text>
+
+    const text = sm
+        ? {
+            children: <Tooltip placement='bottom' title={eventDetail}>
+                {eventName}&emsp;{dateStr}
+            </Tooltip>
+        }
+        : {
+            label: dateStr,
+            children: <Tooltip placement='left' title={eventDetail}>{eventName}</Tooltip>
+        }
+
+    return {
+        color: 'yellow',
+        dot: <ThunderboltOutlined style={{fontSize: '16px'}}/>,
+        pending: true,
+        ...text
+    }
+}
+
+
+export function EventTimeline({events, expiresInDays}: { events: Event[], expiresInDays?: number }) {
     const sm = useBreakpoint('sm')
 
     const locale = navigator.language.split('-')[0]
     const rdapEventNameTranslated = rdapEventNameTranslation()
     const rdapEventDetailTranslated = rdapEventDetailTranslation()
 
-    return (
-        <>
-            <Timeline
-                mode={sm ? 'left' : 'right'}
-                items={events.map(e => {
+    const items = []
+    if (expiresInDays !== undefined) {
+        items.push(getWhoisRemoveTimelineEvent(expiresInDays))
+    }
+
+    items.push(
+        ...events
+            .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+            .map(e => {
                     const eventName = (
                         <Typography.Text style={{color: e.deleted ? 'grey' : 'default'}}>
                             {rdapEventNameTranslated[e.action as keyof typeof rdapEventNameTranslated] || e.action}
@@ -51,8 +88,11 @@ export function EventTimeline({events}: { events: Event[] }) {
                         ...text
                     }
                 }
-                )}
-            />
-        </>
             )
+    )
+
+    return <Timeline
+        mode={sm ? 'left' : 'right'}
+        items={items}
+    />
 }

translations/translations.pot

@@ -172,6 +172,14 @@ msgstr ""
 msgid "This domain name does not appear to be valid"
 msgstr ""
 
+#: assets/components/search/EventTimeline.tsx:14
+msgid "Estimated removal"
+msgstr ""
+
+#: assets/components/search/EventTimeline.tsx:15
+msgid "Estimated date when the WHOIS record is removed"
+msgstr ""
+
 #: assets/components/Sider.tsx:35
 msgid "Home"
 msgstr ""