From 5c97efbdac0dea34afa020581a5235c3bb1413d3 Mon Sep 17 00:00:00 2001
From: akcodez <ariakesh@yahoo.com>
Date: Thu, 29 May 2025 09:09:15 -0700
Subject: [PATCH] Add moment-timezone dependency and implement countdown timer
 in AlertBanner component

---
 @theme/components/Navbar/Navbar.tsx | 48 +++++++++++++++++++++++++++--
 package-lock.json                   | 13 ++++++++
 package.json                        |  1 +
 3 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/@theme/components/Navbar/Navbar.tsx b/@theme/components/Navbar/Navbar.tsx
index 83b844cd51..253c05301a 100644
--- a/@theme/components/Navbar/Navbar.tsx
+++ b/@theme/components/Navbar/Navbar.tsx
@@ -6,6 +6,7 @@ import { Link } from "@redocly/theme/components/Link/Link";
 import { ColorModeSwitcher } from "@redocly/theme/components/ColorModeSwitcher/ColorModeSwitcher";
 import { Search } from "@redocly/theme/components/Search/Search";
 import arrowUpRight from "../../../static/img/icons/arrow-up-right-custom.svg";
+import moment from "moment";
 
 // @ts-ignore
 
@@ -14,12 +15,53 @@ const alertBanner = {
   message: "APEX 2025",
   button: "REGISTER",
   link: "https://www.xrpledgerapex.com/?utm_source=xrplwebsite&utm_medium=direct&utm_campaign=xrpl-event-ho-xrplapex-glb-2025-q1_xrplwebsite_ari_arp_bf_rsvp&utm_content=cta_btn_english_pencilbanner",
-  date: "AGENDA NOW LIVE",
+  targetDate: "2025-06-11 08:00:00", // June 11, 2025 at 8AM Singapore time
 };
-export function AlertBanner({ message, date, button, link, show }) {
+
+function useCountdown(targetDate: string) {
+  const [timeLeft, setTimeLeft] = React.useState("");
+
+  React.useEffect(() => {
+    const calculateTimeLeft = () => {
+      // Target: June 11, 2025 at 8AM Singapore time (GMT+8)
+      // Singapore is UTC+8, so 8AM Singapore = 0AM UTC (midnight UTC)
+      const targetSingaporeTime = moment(targetDate, "YYYY-MM-DD HH:mm:ss");
+      const target = targetSingaporeTime.clone().subtract(8, 'hours').utc();
+      const now = moment().utc();
+      const diff = target.diff(now);
+
+      if (diff <= 0) {
+        setTimeLeft("EVENT STARTED");
+        return;
+      }
+
+      const duration = moment.duration(diff);
+      const days = Math.floor(duration.asDays());
+      const hours = duration.hours();
+      const minutes = duration.minutes();
+      const seconds = duration.seconds();
+
+      const formattedTime = `${days.toString().padStart(2, '0')}:${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+      setTimeLeft(`IN ${formattedTime}`);
+    };
+
+    // Calculate immediately
+    calculateTimeLeft();
+
+    // Update every second
+    const interval = setInterval(calculateTimeLeft, 1000);
+
+    return () => clearInterval(interval);
+  }, [targetDate]);
+
+  return timeLeft;
+}
+
+export function AlertBanner({ message, button, link, show, targetDate }) {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const bannerRef = React.useRef(null);
+  const countdown = useCountdown(targetDate);
 
   React.useEffect(() => {
     const banner = bannerRef.current;
@@ -47,7 +89,7 @@ export function AlertBanner({ message, date, button, link, show }) {
       >
         <div className="banner-event-details">
           <div className="event-info">{translate(message)}</div>
-          <div className="event-date">{translate(date)}</div>
+          <div className="event-date">{countdown}</div>
         </div>
         <div className="banner-button">
           <div className="button-text">{translate(button)}</div>
diff --git a/package-lock.json b/package-lock.json
index c57f9bd59e..21a20b3419 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "five-bells-condition": "^5.0.1",
         "lottie-react": "^2.4.0",
         "moment": "^2.29.4",
+        "moment-timezone": "^0.6.0",
         "node-fetch": "^3.3.2",
         "react": "^18.2.0",
         "react-alert": "^7.0.3",
@@ -5940,6 +5941,18 @@
         "node": "*"
       }
     },
+    "node_modules/moment-timezone": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.6.0.tgz",
+      "integrity": "sha512-ldA5lRNm3iJCWZcBCab4pnNL3HSZYXVb/3TYr75/1WCTWYuTqYUb5f/S384pncYjJ88lbO8Z4uPDvmoluHJc8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "moment": "^2.29.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
diff --git a/package.json b/package.json
index 14609d1bb9..83cb05e14e 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "five-bells-condition": "^5.0.1",
     "lottie-react": "^2.4.0",
     "moment": "^2.29.4",
+    "moment-timezone": "^0.6.0",
     "node-fetch": "^3.3.2",
     "react": "^18.2.0",
     "react-alert": "^7.0.3",