Feat/add wizgov widget (#1195)

* add WizgovWidgetProps interface and update exports in internal index

(cherry picked from commit b6632d97bc166abd16c18c930ff7e1c823003659)

* add wizgov property to IsomerSiteConfigProps interface

* add WizgovWidgetClient component

* integrate WizgovWidgetClient into Skeleton layout

* add conditional rendering of prod/staging link

* refactor WizgovWidget to use environment prop instead of site; update Skeleton layout accordingly

* refactor WizgovWidget: remove WizgovWidgetClient, integrate script loading directly, and simplify props handling

Author: adriangohjw

packages/components/src/interfaces/internal/Wizgov.ts

@@ -0,0 +1,9 @@
+import type { IsomerSiteProps } from "~/types"
+
+export interface WizgovProps {
+  "data-agency": string
+}
+
+export interface WizgovWidgetProps extends WizgovProps {
+  environment: IsomerSiteProps["environment"]
+}

packages/components/src/interfaces/internal/index.ts

@@ -42,3 +42,4 @@ export type {
   GoogleTagManagerBodyProps,
 } from "./GoogleTagManager"
 export type { AttrsDirProps } from "./AttrsDir"
+export type { WizgovWidgetProps, WizgovProps } from "./Wizgov"

packages/components/src/templates/next/components/internal/Wizgov/WizgovWidget.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import { useEffect } from "react"
+
+import type { WizgovWidgetProps } from "~/interfaces"
+
+// Reference: https://github.com/opengovsg/wizgov
+export const WizgovWidget = ({
+  environment,
+  ...wizgovProps
+}: WizgovWidgetProps) => {
+  const scriptUrl =
+    environment === "production"
+      ? "https://script.wiz.gov.sg/widget.js"
+      : "https://script-staging.wiz.gov.sg/widget.js"
+
+  const reloadWizgovScript = () => {
+    const scriptId = "isomer-wizgov-script"
+
+    const existingScriptTag = document.getElementById(scriptId)
+    if (existingScriptTag) {
+      existingScriptTag.remove()
+    }
+
+    const scriptTag = document.createElement("script")
+    scriptTag.id = scriptId
+    scriptTag.async = true
+    scriptTag.type = "text/javascript"
+    scriptTag.src = scriptUrl
+    scriptTag.referrerPolicy = "origin"
+    document.body.appendChild(scriptTag)
+  }
+
+  useEffect(() => {
+    // to not render during static site generation on the server
+    if (typeof window === "undefined") return
+
+    // Only inject the script after everything else has finished loading
+    // This is to replicate Next.js lazyOnload behaviour (as recommended for widgets)
+    if (document.readyState === "complete") {
+      reloadWizgovScript()
+    } else {
+      window.addEventListener("load", () => reloadWizgovScript())
+      return () =>
+        window.removeEventListener("load", () => reloadWizgovScript())
+    }
+  }, [])
+
+  return <div id="wizgov-widget" data-agency={wizgovProps["data-agency"]} />
+}

packages/components/src/templates/next/components/internal/Wizgov/index.ts

@@ -0,0 +1 @@
+export { WizgovWidget } from "./WizgovWidget"

packages/components/src/templates/next/components/internal/index.ts

@@ -32,3 +32,4 @@ export {
 export { BlogCard } from "./BlogCard"
 export { FontPreload } from "./FontPreload"
 export { ScrollToTop } from "./ScrollToTop"
+export { WizgovWidget } from "./Wizgov"

packages/components/src/templates/next/layouts/Skeleton/Skeleton.tsx

@@ -14,6 +14,7 @@ import {
   UnsupportedBrowserBanner,
   VicaStylesheet,
   VicaWidget,
+  WizgovWidget,
   Wogaa,
 } from "../../components/internal"
 import { SKIP_TO_CONTENT_ANCHOR_ID } from "../../constants"
@@ -111,7 +112,11 @@ export const Skeleton = ({
       )}
 
       {/* Ensures that the webchat widget only loads after the page has loaded */}
+      {/* Note: did not account for both being added to the config as it's a very unlikely scenario and there's "correct" way to handle this */}
       {site.vica && <VicaWidget site={site} {...site.vica} />}
+      {site.wizgov && (
+        <WizgovWidget environment={site.environment} {...site.wizgov} />
+      )}
     </>
   )
 }

packages/components/src/types/site.ts

@@ -3,6 +3,7 @@ import type {
   NavbarProps,
   NotificationProps,
   VicaWidgetProps,
+  WizgovProps,
 } from "~/interfaces"
 import type { SiteConfigFooterProps } from "~/interfaces/internal/Footer"
 
@@ -31,6 +32,7 @@ export interface IsomerSiteConfigProps {
   notification?: Omit<NotificationProps, "LinkComponent" | "site">
   siteGtmId?: string
   vica?: VicaWidgetProps
+  wizgov?: WizgovProps
 }
 
 export type IsomerSiteProps = IsomerGeneratedSiteProps &