isom-1678 dynamic blocks for muis fix (#922)

* update CSP to use env.NEXT_PUBLIC_S3_ASSETS_DOMAIN_NAME

* fix: replace useQuery with useState and useEffect

* npm run format:fix

* add error state

* add errorMessage to schema

* add error state UI + use twVariant

* update stories

* fix - separate error and loading state

* add errorMessage to studio default block

* format

* update preview-tw

* fix - screen wide component

Author: adriangohjw

apps/studio/next.config.mjs

@@ -74,7 +74,11 @@ const ContentSecurityPolicy = `
     https://*.wogaa.sg
     https://placehold.co
     https://cdn.growthbook.io
-    ${env.NODE_ENV === "production" ? "https://isomer-user-content.by.gov.sg" : "https://*.by.gov.sg"}
+    ${
+      !!env.NEXT_PUBLIC_S3_ASSETS_DOMAIN_NAME
+        ? `https://${env.NEXT_PUBLIC_S3_ASSETS_DOMAIN_NAME}`
+        : "https://*.by.gov.sg"
+    }
     https://via.intercom.io
     https://api.intercom.io
     https://api.au.intercom.io

apps/studio/public/assets/css/preview-tw.css

@@ -4929,6 +4929,10 @@ video {
     padding-bottom: 5rem;
   }
 
+  .md\:pb-3 {
+    padding-bottom: 0.75rem;
+  }
+
   .md\:pt-16 {
     padding-top: 4rem;
   }
@@ -5139,6 +5143,10 @@ video {
     align-items: flex-start;
   }
 
+  .lg\:items-end {
+    align-items: flex-end;
+  }
+
   .lg\:justify-start {
     justify-content: flex-start;
   }
@@ -5147,6 +5155,10 @@ video {
     justify-content: flex-end;
   }
 
+  .lg\:justify-center {
+    justify-content: center;
+  }
+
   .lg\:justify-between {
     justify-content: space-between;
   }
@@ -5219,6 +5231,11 @@ video {
     padding-right: 2rem;
   }
 
+  .lg\:py-0 {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
   .lg\:py-16 {
     padding-top: 4rem;
     padding-bottom: 4rem;

apps/studio/src/components/PageEditor/constants.ts

@@ -209,6 +209,12 @@ export const DEFAULT_BLOCKS: Record<
     ],
     url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
     label: "View all dates",
+    errorMessage: [
+      {
+        type: "text",
+        text: "Oops! Having trouble loading the data. Try refreshing — that usually does the trick!",
+      },
+    ],
   },
 }
 

package-lock.json

@@ -107,7 +107,6 @@
     "@govtechsg/sgds-react": "^2.5.1",
     "@headlessui/react": "^2.1.2",
     "@sinclair/typebox": "^0.33.12",
-    "@tanstack/react-query": "^4.36.1",
     "date-fns": "^4.1.0",
     "interweave": "^13.1.0",
     "interweave-ssr": "^2.0.0",

packages/components/package.json

@@ -2,6 +2,7 @@ import type { Static } from "@sinclair/typebox"
 import { Type } from "@sinclair/typebox"
 
 import type { IsomerSiteProps, LinkComponentType } from "~/types"
+import { TextSchema } from "../native/Text"
 
 export const DYNAMIC_DATA_BANNER_TYPE = "dynamicdatabanner"
 
@@ -47,6 +48,10 @@ export const DynamicDataBannerSchema = Type.Object(
         maxItems: NUMBER_OF_DATA,
       },
     ),
+    errorMessage: Type.Array(TextSchema, {
+      title: "Error message",
+      description: "The error message to display if the data is not loaded",
+    }),
     label: Type.Optional(
       Type.String({
         title: "Link text",

packages/components/src/interfaces/complex/DynamicDataBanner.ts

@@ -2,32 +2,129 @@ import type { Meta, StoryObj } from "@storybook/react"
 
 import { withChromaticModes } from "@isomer/storybook-config"
 
-import { DynamicDataBannerUI } from "./DynamicDataBannerClient"
+import { DynamicDataBanner } from "./DynamicDataBanner"
+import { getSingaporeDateYYYYMMDD } from "./utils"
 
-const meta: Meta<typeof DynamicDataBannerUI> = {
+const meta: Meta<typeof DynamicDataBanner> = {
   title: "Next/Components/DynamicDataBanner",
-  component: DynamicDataBannerUI,
+  component: DynamicDataBanner,
   parameters: {
     layout: "fullscreen",
     chromatic: withChromaticModes(["mobile", "tablet", "desktop"]),
   },
+  args: {
+    site: {
+      siteName: "Isomer Next",
+      siteMap: {
+        id: "1",
+        title: "Home",
+        permalink: "/",
+        lastModified: "",
+        layout: "homepage",
+        summary: "",
+      },
+      theme: "isomer-next",
+      isGovernment: true,
+      logoUrl: "https://www.isomer.gov.sg/images/isomer-logo.svg",
+      navBarItems: [],
+      footerItems: {
+        privacyStatementLink: "https://www.isomer.gov.sg/privacy",
+        termsOfUseLink: "https://www.isomer.gov.sg/terms",
+        siteNavItems: [],
+      },
+      lastUpdated: "1 Jan 2021",
+      search: {
+        type: "searchSG",
+        clientId: "",
+      },
+    },
+    apiEndpoint: "https://jsonplaceholder.com/muis_prayers_time",
+    title: "hijriDate",
+    data: [
+      {
+        label: "Subuh",
+        key: "subuh",
+      },
+      {
+        label: "Syuruk",
+        key: "syuruk",
+      },
+      {
+        label: "Zohor",
+        key: "zohor",
+      },
+      {
+        label: "Asar",
+        key: "asar",
+      },
+      {
+        label: "Maghrib",
+        key: "maghrib",
+      },
+      {
+        label: "Ishak",
+        key: "isyak",
+      },
+    ],
+    url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+    label: "View all dates",
+    errorMessage: [
+      {
+        text: "Not seeing the prayer times? ",
+        type: "text",
+      },
+      {
+        text: "Report an issue",
+        type: "text",
+        marks: [
+          { type: "bold" },
+          {
+            type: "link",
+            attrs: {
+              href: "https://www.form.gov.sg/some-link",
+            },
+          },
+        ],
+      },
+    ],
+  },
 }
 
 export default meta
-type Story = StoryObj<typeof DynamicDataBannerUI>
+type Story = StoryObj<typeof DynamicDataBanner>
 
 export const Default: Story = {
-  args: {
-    title: "1 Rejab 1446H",
-    data: [
-      { label: "Subuh", value: "5:43am" },
-      { label: "Syuruk", value: "7:07am" },
-      { label: "Zohor", value: "1:09pm" },
-      { label: "Asar", value: "4.33pm" },
-      { label: "Maghrib", value: "7.10pm" },
-      { label: "Isyak", value: "8.25pm" },
+  parameters: {
+    mockData: [
+      {
+        url: "https://jsonplaceholder.com/muis_prayers_time",
+        method: "GET",
+        status: 200,
+        response: {
+          [getSingaporeDateYYYYMMDD()]: {
+            hijriDate: "17 Jamadilawal 1442H",
+            subuh: "5:44am",
+            syuruk: "7:08am",
+            zohor: "1:10pm",
+            asar: "4:34pm",
+            maghrib: "7:11pm",
+            isyak: "8:25pm",
+          },
+        },
+      },
+    ],
+  },
+}
+
+export const Error: Story = {
+  parameters: {
+    mockData: [
+      {
+        url: "https://jsonplaceholder.com/muis_prayers_time",
+        method: "GET",
+        status: 500,
+        response: {},
+      },
     ],
-    url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
-    label: "View all dates",
   },
 }

packages/components/src/templates/next/components/complex/DynamicDataBanner/DynamicDataBanner.stories.tsx

@@ -1,5 +1,6 @@
 import type { DynamicDataBannerProps } from "~/interfaces"
-import { getReferenceLinkHref } from "~/utils"
+import { getReferenceLinkHref, getTextAsHtml } from "~/utils"
+import BaseParagraph from "../../internal/BaseParagraph/BaseParagraph"
 import { DynamicDataBannerClient } from "./DynamicDataBannerClient"
 
 export const DynamicDataBanner = ({
@@ -8,6 +9,7 @@ export const DynamicDataBanner = ({
   data,
   url,
   label,
+  errorMessage,
   site,
   LinkComponent,
 }: DynamicDataBannerProps) => {
@@ -18,7 +20,17 @@ export const DynamicDataBanner = ({
       data={data}
       url={getReferenceLinkHref(url, site.siteMap, site.assetsBaseUrl)}
       label={label}
-      LinkComponent={LinkComponent}
+      errorMessageBaseParagraph={
+        <BaseParagraph
+          content={getTextAsHtml({
+            site,
+            content: errorMessage,
+          })}
+          className="prose-body-sm [&:not(:first-child)]:mt-0 [&:not(:last-child)]:mb-0"
+          site={site}
+          LinkComponent={LinkComponent}
+        />
+      }
     />
   )
 }