feat(hack-15): activity panel notification for saved artwork price or availability changes

src/Components/Notifications/Notification.tsx

@@ -27,7 +27,7 @@ import type {
 } from "__generated__/NotificationQuery.graphql"
 import { Suspense, useEffect } from "react"
 import { graphql, useLazyLoadQuery } from "react-relay"
-
+import { SavedArtworkChangesNotification } from "./SavedArtworkChangesNotification"
 const logger = createLogger("NotificationItem")
 
 // FIXME: Should probably be a column span
@@ -40,6 +40,7 @@ export const SUPPORTED_NOTIFICATION_TYPES: NotificationTypesEnum[] = [
   "VIEWING_ROOM_PUBLISHED",
   "PARTNER_SHOW_OPENED",
   "COLLECTOR_PROFILE_UPDATE_PROMPT",
+  "SAVED_ARTWORK_CHANGES",
 ]
 
 interface NotificationProps {
@@ -122,6 +123,9 @@ const Notification: React.FC<React.PropsWithChildren<NotificationProps>> = ({
     case "VIEWING_ROOM_PUBLISHED":
       return <ViewingRoomPublishedNotification notification={notification} />
 
+    case "SAVED_ARTWORK_CHANGES":
+      return <SavedArtworkChangesNotification notification={notification} />
+
     default:
       return null
   }
@@ -161,6 +165,7 @@ const notificationQuery = graphql`
         ...PartnerOfferCreatedNotification_notification
         ...PartnerShowOpenedNotification_notification
         ...ViewingRoomPublishedNotification_notification
+        ...SavedArtworkChangesNotification_notification
         id
         internalID
         notificationType

src/Components/Notifications/SavedArtworkChangesNotification.tsx

@@ -0,0 +1,48 @@
+import { Spacer, Text } from "@artsy/palette"
+import { NotificationArtworkList } from "Components/Notifications/NotificationArtworkList"
+import { NotificationErrorMessage } from "Components/Notifications/NotificationErrorMessage"
+import { NotificationTypeLabel } from "Components/Notifications/NotificationTypeLabel"
+import type { SavedArtworkChangesNotification_notification$key } from "__generated__/SavedArtworkChangesNotification_notification.graphql"
+import type { FC } from "react"
+import { graphql, useFragment } from "react-relay"
+
+interface SavedArtworkChangesNotificationProps {
+  notification: SavedArtworkChangesNotification_notification$key
+}
+
+export const SavedArtworkChangesNotification: FC<
+  React.PropsWithChildren<SavedArtworkChangesNotificationProps>
+> = ({ notification }) => {
+  const notificationData = useFragment(
+    SavedArtworkChangesNotificationFragment,
+    notification,
+  )
+
+  const { artworksConnection, headline } = notificationData
+
+  return (
+    <>
+      <Text variant="lg-display">{headline}</Text>
+
+      <Spacer y={1} />
+
+      <NotificationTypeLabel notification={notificationData} />
+
+      <Spacer y={4} />
+
+      <NotificationArtworkList artworksConnection={artworksConnection} />
+    </>
+  )
+}
+
+export const SavedArtworkChangesNotificationFragment = graphql`
+  fragment SavedArtworkChangesNotification_notification on Notification {
+    artworksConnection(first: 10) {
+      ...NotificationArtworkList_artworksConnection
+      totalCount
+    }
+    headline
+    notificationType
+    ...NotificationTypeLabel_notification
+  }
+`