feat: add generic title/content notice type (#1677)

libs/gql-schema/notice.ts

@@ -30,7 +30,15 @@ export const schema = `
     id: ID!
   }
 
-  union Notice = Register10DlcBrandNotice | Register10DlcCampaignNotice | Pending10DlcCampaignNotice | Pricing10DlcNotice | PricingTollFreeNotice
+  type TitleContentNotice {
+    id: ID!
+    title: String!
+    avatarIcon: String!
+    avatarColor: String!
+    markdownContent: String!
+  }
+
+  union Notice = Register10DlcBrandNotice | Register10DlcCampaignNotice | Pending10DlcCampaignNotice | Pricing10DlcNotice | PricingTollFreeNotice | TitleContentNotice
 
   type NoticeEdge {
     cursor: Cursor!

libs/spoke-codegen/src/graphql/notifications.graphql

@@ -5,6 +5,13 @@ query getOrganizationNotifications($organizationId: String!) {
     }
     edges {
       node {
+        ... on TitleContentNotice {
+          id
+          title
+          avatarIcon
+          avatarColor
+          markdownContent
+        }
         ... on Register10DlcBrandNotice {
           id
           tcrRegistrationUrl
@@ -25,4 +32,4 @@ query getOrganizationNotifications($organizationId: String!) {
       }
     }
   }
-}
+}

src/api/notice.ts

@@ -4,10 +4,18 @@ import type {
   Pricing10DlcNotice,
   PricingTollFreeNotice,
   Register10DlcBrandNotice,
-  Register10DlcCampaignNotice
+  Register10DlcCampaignNotice,
+  TitleContentNotice
 } from "@spoke/spoke-codegen";
 import type { GraphQLType } from "graphql";
 
+export function isTitleContentNotice(obj: Notice): obj is TitleContentNotice {
+  return (
+    (obj as TitleContentNotice & GraphQLType).__typename ===
+    "TitleContentNotice"
+  );
+}
+
 export function isRegister10DlcBrandNotice(
   obj: Notice
 ): obj is Register10DlcBrandNotice {

src/containers/AdminDashboard/components/NotificationCard.tsx

@@ -9,12 +9,14 @@ import {
   isPricing10DlcNotice,
   isPricingTollFreeNotice,
   isRegister10DlcBrandNotice,
-  isRegister10DlcCampaignNotice
+  isRegister10DlcCampaignNotice,
+  isTitleContentNotice
 } from "../../../api/notice";
 import Pending10DlcCampaignNoticeCard from "./Pending10DlcCampaignNoticeCard";
 import PricingNoticeCard from "./PricingNoticeCard";
 import Register10DlcNoticeCard from "./Register10DlcNoticeCard";
 import ShutdownNoticeCard from "./ShutdownNoticeCard";
+import TitleContentNoticeCard from "./TitleContentNoticeCard";
 
 interface NotificationCardProps {
   organizationId: string;
@@ -42,6 +44,17 @@ export const NotificationCard: React.FC<NotificationCardProps> = ({
   return (
     <div>
       {data?.notices.edges.map(({ node }) => {
+        if (isTitleContentNotice(node)) {
+          return (
+            <TitleContentNoticeCard
+              key={node.id}
+              title={node.title}
+              avatarIcon={node.avatarIcon}
+              avatarColor={node.avatarColor as any}
+              markdownContent={node.markdownContent}
+            />
+          );
+        }
         if (window.SHOW_10DLC_REGISTRATION_NOTICES) {
           if (
             isRegister10DlcBrandNotice(node) ||

src/containers/AdminDashboard/components/TitleContentNoticeCard.tsx

@@ -0,0 +1,52 @@
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import CardHeader from "@material-ui/core/CardHeader";
+import Announcement from "@material-ui/icons/Announcement";
+import React from "react";
+import type { Components } from "react-markdown";
+import ReactMarkdown from "react-markdown";
+
+type TitleContentNoticeCardProps = {
+  title: string;
+  avatarIcon: string;
+  avatarColor:
+    | "error"
+    | "inherit"
+    | "disabled"
+    | "action"
+    | "primary"
+    | "secondary"
+    | undefined;
+  markdownContent: string;
+};
+
+// Force links to open in a new window/tab
+const components: Components = {
+  a: ({ node: _node, children, href, title, ...props }) => (
+    <a href={href} title={title} rel="noreferrer" target="_blank" {...props}>
+      {children}
+    </a>
+  )
+};
+
+const TitleContentNoticeCard: React.FC<TitleContentNoticeCardProps> = (
+  props
+) => {
+  const avatar =
+    props.avatarIcon === "announcement" ? (
+      <Announcement color={props.avatarColor} />
+    ) : null;
+
+  return (
+    <Card variant="outlined" style={{ marginBottom: "2em" }}>
+      <CardHeader title={props.title} avatar={avatar} />
+      <CardContent>
+        <ReactMarkdown components={components}>
+          {props.markdownContent}
+        </ReactMarkdown>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default TitleContentNoticeCard;

src/schema.graphql

@@ -889,7 +889,15 @@ type PricingTollFreeNotice implements PricingNotice {
   id: ID!
 }
 
-union Notice = Register10DlcBrandNotice | Register10DlcCampaignNotice | Pending10DlcCampaignNotice | Pricing10DlcNotice | PricingTollFreeNotice
+type TitleContentNotice {
+  id: ID!
+  title: String!
+  avatarIcon: String!
+  avatarColor: String!
+  markdownContent: String!
+}
+
+union Notice = Register10DlcBrandNotice | Register10DlcCampaignNotice | Pending10DlcCampaignNotice | Pricing10DlcNotice | PricingTollFreeNotice | TitleContentNotice
 
 type NoticeEdge {
   cursor: Cursor!

src/server/api/notice.ts

@@ -6,13 +6,17 @@ import {
   isPricing10DlcNotice,
   isPricingTollFreeNotice,
   isRegister10DlcBrandNotice,
-  isRegister10DlcCampaignNotice
+  isRegister10DlcCampaignNotice,
+  isTitleContentNotice
 } from "../../api/notice";
 
 // explicitly setting typename
 export const resolvers = {
   Notice: {
     __resolveType(obj: Notice) {
+      if (isTitleContentNotice(obj)) {
+        return "TitleContentNotice";
+      }
       if (isRegister10DlcBrandNotice(obj)) {
         return "Register10DlcBrandNotice";
       }