implement reusable telegram and subscribe link buttons on topic pages

dominicarrojado · Dec 12, 2024 · 1d5b8f4 · 1d5b8f4
1 parent 9f50a78
commit 1d5b8f4
Show file tree

Hide file tree

Showing 17 changed files with 247 additions and 211 deletions.
diff --git a/app/topics/bbdc-appointment-slots/page.tsx b/app/topics/bbdc-appointment-slots/page.tsx
@@ -2,12 +2,11 @@ import { Metadata } from "next";
 import React from "react";
 import { Container } from "@/components/ui/container";
 import { Anchor } from "@/components/ui/anchor";
-import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
-import { Routes, TelegramChannel } from "@/lib/enums";
-import { TELEGRAM_SHORT_URL } from "@/lib/constants";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import { Routes, TelegramChannel, TopicTitle } from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
 import BbdcLessonSlotsInfo from "./bbdc-lesson-slots-info";
 
@@ -99,12 +98,11 @@ export default function BBDCAppointmentSlots() {
         as one of the topics you want to subscribe to.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.BbdcAppointmentSlots}`}
-          isExternal
-        >
-          <Button variant="secondary">Subscribe Now</Button>
-        </Anchor>
+        <TelegramLinkButton
+          channel={TelegramChannel.BbdcAppointmentSlots}
+          linkText="Subscribe Now"
+          topicTitle={TopicTitle.BbdcAppointmentSlots}
+        />
       </div>
     </Container>
   );

diff --git a/app/topics/cdc-appointment-slots/page.tsx b/app/topics/cdc-appointment-slots/page.tsx
@@ -1,14 +1,12 @@
 import { Metadata } from "next";
-import Link from "next/link";
 import React from "react";
 import { Container } from "@/components/ui/container";
 import { Anchor } from "@/components/ui/anchor";
-import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
-import { Routes, TelegramChannel } from "@/lib/enums";
-import { TELEGRAM_SHORT_URL } from "@/lib/constants";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import { Routes, TelegramChannel, TopicTitle } from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
 import { CdcSlotsTable } from "./cdc-slots-table";
 
@@ -90,39 +88,17 @@ export default function CdcAppointmentSlots() {
         To get started, simply click either of the buttons below to subscribe to
         the Telegram channel and start receiving notifications.
       </Paragraph>
-      <div className="mt-8 text-center flex flex-col gap-4">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.CdcEyesightTest}`}
-          isExternal
-        >
-          <Button variant="secondary">
-            <span>
-              <abbr
-                title="ComfortDelGro Driving Centre"
-                className="no-underline"
-              >
-                CDC
-              </abbr>{" "}
-              Appointment Slots (Eyesight Test)
-            </span>
-          </Button>
-        </Anchor>
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.CdcCounterServices}`}
-          isExternal
-        >
-          <Button variant="secondary" className="!inline-block">
-            <span>
-              <abbr
-                title="ComfortDelGro Driving Centre"
-                className="no-underline"
-              >
-                CDC
-              </abbr>{" "}
-              Appointment Slots (Counter Services)
-            </span>
-          </Button>
-        </Anchor>
+      <div className="mt-8 flex flex-col items-center gap-4">
+        <TelegramLinkButton
+          channel={TelegramChannel.CdcEyesightTest}
+          linkText="Subscribe to Eyesight Test"
+          topicTitle={TopicTitle.CdcEyesightTest}
+        />
+        <TelegramLinkButton
+          channel={TelegramChannel.CdcCounterServices}
+          linkText="Subscribe to Counter Services"
+          topicTitle={TopicTitle.CdcCounterServices}
+        />
       </div>
     </Container>
   );

diff --git a/app/topics/cdc-practical-lesson-slots/page.tsx b/app/topics/cdc-practical-lesson-slots/page.tsx
@@ -1,14 +1,12 @@
 import { Metadata } from "next";
-import Link from "next/link";
 import React from "react";
 import { Container } from "@/components/ui/container";
 import { Anchor } from "@/components/ui/anchor";
-import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
-import { Routes, TelegramChannel } from "@/lib/enums";
-import { TELEGRAM_SHORT_URL } from "@/lib/constants";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import { Routes, TelegramChannel, TopicTitle } from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
 import CdcLessonSlotsInfo from "./cdc-lesson-slots-info";
 
@@ -110,12 +108,11 @@ export default function CdcPracticalLessonSlots() {
         Telegram channel and start receiving notifications.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.CdcLessonsAutoCar}`}
-          isExternal
-        >
-          <Button variant="secondary">Subscribe Now</Button>
-        </Anchor>
+        <TelegramLinkButton
+          channel={TelegramChannel.CdcLessonsAutoCar}
+          linkText="Subscribe Now"
+          topicTitle={TopicTitle.CdcPracticalLessonSlots}
+        />
       </div>
     </Container>
   );

diff --git a/app/topics/coe-bidding-results/page.tsx b/app/topics/coe-bidding-results/page.tsx
@@ -1,14 +1,12 @@
 import { Metadata } from "next";
-import Link from "next/link";
 import React from "react";
 import { Container } from "@/components/ui/container";
-import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
 import { Anchor } from "@/components/ui/anchor";
+import SubscribeLinkButton from "@/components/subscribe-link-button";
 import { Routes } from "@/lib/enums";
-import { SUBSCRIBE_FORM_ID } from "@/lib/constants";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
 import { CoeBiddingResultsTable } from "./coe-bidding-results-table";
 
@@ -129,11 +127,10 @@ export default function CoeBiddingResults() {
         want to subscribe to.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Button variant="secondary" asChild>
-          <Link href={`${Routes.DrivingCategory}#${SUBSCRIBE_FORM_ID}`}>
-            Subscribe Now
-          </Link>
-        </Button>
+        <SubscribeLinkButton
+          route={Routes.DrivingCategory}
+          linkText="Subscribe Now"
+        />
       </div>
     </Container>
   );

diff --git a/app/topics/fixed-deposit-rates/page.tsx b/app/topics/fixed-deposit-rates/page.tsx
@@ -1,15 +1,13 @@
 import { Metadata } from "next";
 import React from "react";
 import { Container } from "@/components/ui/container";
-import { Button } from "@/components/ui/button";
-import { Anchor } from "@/components/ui/anchor";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
-import { Routes, TelegramChannel } from "@/lib/enums";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import { Routes, TelegramChannel, TopicTitle } from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
 import { FixedDepositRatesTable } from "./fixed-deposit-rates-table";
-import { TELEGRAM_SHORT_URL } from "@/lib/constants";
 
 const title = "Fixed Deposit Rates";
 const description =
@@ -63,12 +61,11 @@ export default function FixedDepositRates() {
         Telegram channel and start receiving notifications.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.FixedDepositRates}`}
-          isExternal
-        >
-          <Button variant="secondary">Subscribe Now</Button>
-        </Anchor>
+        <TelegramLinkButton
+          channel={TelegramChannel.FixedDepositRates}
+          linkText="Subscribe Now"
+          topicTitle={TopicTitle.FixedDepositRates}
+        />
       </div>
     </Container>
   );

diff --git a/app/topics/japan-visa-appointment-slots/page.tsx b/app/topics/japan-visa-appointment-slots/page.tsx
@@ -1,14 +1,13 @@
 import { Metadata } from "next";
-import Link from "next/link";
 import React from "react";
 import { Container } from "@/components/ui/container";
 import { Anchor } from "@/components/ui/anchor";
-import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
-import { Routes, TelegramChannel } from "@/lib/enums";
-import { SUBSCRIBE_FORM_ID, TELEGRAM_SHORT_URL } from "@/lib/constants";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import SubscribeLinkButton from "@/components/subscribe-link-button";
+import { Routes, TelegramChannel, TopicTitle } from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
 import { JapanVisaSlotsTable } from "./japan-visa-slots-table";
 
@@ -83,45 +82,27 @@ export default function JapanVisa() {
         notifications subscription page (for other visa applications and
         services).
       </Paragraph>
-      <div className="mt-8 text-center flex flex-col justify-center gap-4 sm:flex-row">
+      <div className="mt-8 flex flex-col justify-center gap-4 text-center sm:flex-row">
         <div>
-          <Button variant="secondary" asChild>
-            <Anchor
-              href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.JapanVisaTourism}`}
-              className="no-underline !inline-block"
-              isExternal
-            >
-              For Tourism
-            </Anchor>
-          </Button>
+          <TelegramLinkButton
+            channel={TelegramChannel.JapanVisaTourism}
+            linkText="Subscribe to Tourism"
+            topicTitle={TopicTitle.JapanVisaTourism}
+          />
         </div>
         <div>
-          <Button variant="secondary" asChild>
-            <Link href={`${Routes.JapanVisaCategory}#${SUBSCRIBE_FORM_ID}`}>
-              <span>
-                For Business/
-                <abbr
-                  title="Certificate of Eligibility"
-                  className="no-underline"
-                >
-                  COE
-                </abbr>
-                /Spouse
-              </span>
-            </Link>
-          </Button>
+          <SubscribeLinkButton
+            route={Routes.JapanVisaCategory}
+            linkText="Subscribe to For Business/COE/Spouse"
+          />
         </div>
       </div>
       <div className="mt-4 text-center">
-        <Button variant="secondary" asChild>
-          <Anchor
-            href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.JapanVisaOthers}`}
-            className="no-underline !inline-block"
-            isExternal
-          >
-            For Other Visa Applications/Services
-          </Anchor>
-        </Button>
+        <TelegramLinkButton
+          channel={TelegramChannel.JapanVisaOthers}
+          linkText="Subscribe to Other Visa Applications/Services"
+          topicTitle={TopicTitle.JapanVisaOthers}
+        />
       </div>
     </Container>
   );

diff --git a/app/topics/jetstar-flights/page.tsx b/app/topics/jetstar-flights/page.tsx
@@ -1,15 +1,19 @@
 import { Metadata } from "next";
 import React from "react";
 import { Container } from "@/components/ui/container";
-import { Button } from "@/components/ui/button";
 import { Anchor } from "@/components/ui/anchor";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
-import { FlightAirline, Routes, TelegramChannel } from "@/lib/enums";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import {
+  FlightAirline,
+  Routes,
+  TelegramChannel,
+  TopicTitle,
+} from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
 import { FlightsTable } from "@/components/flights-table";
-import { TELEGRAM_SHORT_URL } from "@/lib/constants";
 
 const title = "Jetstar Flights";
 const description =
@@ -70,12 +74,11 @@ export default function JetstarFlights() {
         Telegram channel and start receiving notifications.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.JetstarFlights}`}
-          isExternal
-        >
-          <Button variant="secondary">Subscribe Now</Button>
-        </Anchor>
+        <TelegramLinkButton
+          channel={TelegramChannel.JetstarFlights}
+          linkText="Subscribe Now"
+          topicTitle={TopicTitle.JetstarFlights}
+        />
       </div>
     </Container>
   );

diff --git a/app/topics/ktm-train-tickets/page.tsx b/app/topics/ktm-train-tickets/page.tsx
@@ -1,15 +1,13 @@
 import { Metadata } from "next";
-import Link from "next/link";
 import React from "react";
 import { Container } from "@/components/ui/container";
-import { Button } from "@/components/ui/button";
 import { Anchor } from "@/components/ui/anchor";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
-import { Routes, TelegramChannel } from "@/lib/enums";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import { Routes, TelegramChannel, TopicTitle } from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
-import { TELEGRAM_SHORT_URL } from "@/lib/constants";
 import { TrainTicketsTable } from "./train-tickets-table";
 import { TrainScheduleTable } from "./train-schedule-table";
 
@@ -127,12 +125,11 @@ export default function KtmTrainTickets() {
         Telegram channel and start receiving notifications.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.KtmTrainTickets}`}
-          isExternal
-        >
-          <Button variant="secondary">Subscribe Now</Button>
-        </Anchor>
+        <TelegramLinkButton
+          channel={TelegramChannel.KtmTrainTickets}
+          linkText="Subscribe Now"
+          topicTitle={TopicTitle.KtmTrainTickets}
+        />
       </div>
     </Container>
   );

diff --git a/app/topics/scoot-flights/page.tsx b/app/topics/scoot-flights/page.tsx
@@ -2,13 +2,12 @@ import { Metadata } from "next";
 import React from "react";
 import { Anchor } from "@/components/ui/anchor";
 import { Container } from "@/components/ui/container";
-import { Button } from "@/components/ui/button";
 import Heading from "@/components/ui/heading";
 import Subheading from "@/components/ui/subheading";
 import Paragraph from "@/components/ui/paragraph";
-import { Routes, TelegramChannel } from "@/lib/enums";
+import TelegramLinkButton from "@/components/telegram-link-button";
+import { Routes, TelegramChannel, TopicTitle } from "@/lib/enums";
 import { META_OPEN_GRAPH, META_TWITTER } from "@/app/shared-metadata";
-import { TELEGRAM_SHORT_URL } from "@/lib/constants";
 import TravelDealsInfo from "./travel-deals-info";
 
 const title = "Scoot Flights";
@@ -71,12 +70,11 @@ export default function ScootFlights() {
         Telegram channel and start receiving notifications.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.ScootFlights}`}
-          isExternal
-        >
-          <Button variant="secondary">Subscribe Now</Button>
-        </Anchor>
+        <TelegramLinkButton
+          channel={TelegramChannel.ScootFlights}
+          linkText="Subscribe Now"
+          topicTitle={TopicTitle.ScootFlights}
+        />
       </div>
     </Container>
   );