diff --git a/libs/gql-schema/notice.ts b/libs/gql-schema/notice.ts index 436dabbc2..7c1c8c1ac 100644 --- a/libs/gql-schema/notice.ts +++ b/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! diff --git a/libs/spoke-codegen/src/graphql/notifications.graphql b/libs/spoke-codegen/src/graphql/notifications.graphql index fbc2f9711..049b764f5 100644 --- a/libs/spoke-codegen/src/graphql/notifications.graphql +++ b/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!) { } } } -} \ No newline at end of file +} diff --git a/src/api/notice.ts b/src/api/notice.ts index 43234cc5f..20f0f3e66 100644 --- a/src/api/notice.ts +++ b/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 { diff --git a/src/containers/AdminDashboard/components/NotificationCard.tsx b/src/containers/AdminDashboard/components/NotificationCard.tsx index 5c00aeb22..c48349a0a 100644 --- a/src/containers/AdminDashboard/components/NotificationCard.tsx +++ b/src/containers/AdminDashboard/components/NotificationCard.tsx @@ -1,64 +1,79 @@ -// import Card from "@material-ui/core/Card"; -// import CardContent from "@material-ui/core/CardContent"; -// import Divider from "@material-ui/core/Divider"; -// import { useGetOrganizationNotificationsQuery } from "@spoke/spoke-codegen"; +import Card from "@material-ui/core/Card"; +import CardContent from "@material-ui/core/CardContent"; +import Divider from "@material-ui/core/Divider"; +import { useGetOrganizationNotificationsQuery } from "@spoke/spoke-codegen"; import React from "react"; -// import { -// isPending10DlcCampaignNotice, -// isPricing10DlcNotice, -// isPricingTollFreeNotice, -// isRegister10DlcBrandNotice, -// isRegister10DlcCampaignNotice -// } from "../../../api/notice"; -// import Pending10DlcCampaignNoticeCard from "./Pending10DlcCampaignNoticeCard"; -// import PricingNoticeCard from "./PricingNoticeCard"; -// import Register10DlcNoticeCard from "./Register10DlcNoticeCard"; +import { + isPending10DlcCampaignNotice, + isPricing10DlcNotice, + isPricingTollFreeNotice, + isRegister10DlcBrandNotice, + 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; } -export const NotificationCard: React.FC = () => { +export const NotificationCard: React.FC = ({ + organizationId +}) => { return ; - // const { data, loading, error } = useGetOrganizationNotificationsQuery({ - // variables: { organizationId } - // }); + const { data, loading, error } = useGetOrganizationNotificationsQuery({ + variables: { organizationId } + }); - // if (loading) return null; + if (loading) return null; - // if (error || !data?.notices) { - // return ( - // - // There was an error fetching notifications. - // - // ); - // } + if (error || !data?.notices) { + return ( + + There was an error fetching notifications. + + ); + } - // return ( - //
- // {data?.notices.edges.map(({ node }) => { - // if (window.SHOW_10DLC_REGISTRATION_NOTICES) { - // if ( - // isRegister10DlcBrandNotice(node) || - // isRegister10DlcCampaignNotice(node) - // ) { - // return ; - // } - // if (isPending10DlcCampaignNotice(node)) { - // return ; - // } - // if (isPricing10DlcNotice(node) || isPricingTollFreeNotice(node)) { - // return ; - // } - // } - // return null; - // })} - // {data?.notices.pageInfo.totalCount > 0 && } - //
- // ); + return ( +
+ {data?.notices.edges.map(({ node }) => { + if (isTitleContentNotice(node)) { + return ( + + ); + } + if (window.SHOW_10DLC_REGISTRATION_NOTICES) { + if ( + isRegister10DlcBrandNotice(node) || + isRegister10DlcCampaignNotice(node) + ) { + return ; + } + if (isPending10DlcCampaignNotice(node)) { + return ; + } + if (isPricing10DlcNotice(node) || isPricingTollFreeNotice(node)) { + return ; + } + } + return null; + })} + {data?.notices.pageInfo.totalCount > 0 && } +
+ ); }; export default NotificationCard; diff --git a/src/containers/AdminDashboard/components/TitleContentNoticeCard.tsx b/src/containers/AdminDashboard/components/TitleContentNoticeCard.tsx new file mode 100644 index 000000000..e322083ce --- /dev/null +++ b/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 }) => ( + + {children} + + ) +}; + +const TitleContentNoticeCard: React.FC = ( + props +) => { + const avatar = + props.avatarIcon === "announcement" ? ( + + ) : null; + + return ( + + + + + {props.markdownContent} + + + + ); +}; + +export default TitleContentNoticeCard; diff --git a/src/schema.graphql b/src/schema.graphql index b95be587c..ea14a2ca9 100644 --- a/src/schema.graphql +++ b/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! diff --git a/src/server/api/notice.ts b/src/server/api/notice.ts index c1d2f48b6..41877fe76 100644 --- a/src/server/api/notice.ts +++ b/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"; }