feat(hack-15): follow / unfollow marketing collections and be notified about new artworks

src/Apps/Collect/Routes/Collection/Components/Header/index.tsx

@@ -7,6 +7,7 @@ import {
   Spacer,
   Text,
 } from "@artsy/palette"
+import { FollowMarketingCollectionButtonQueryRenderer } from "Components/FollowButton/FollowMarketingCollectionButton"
 import type { Header_collection$data } from "__generated__/Header_collection.graphql"
 import { Link } from "found"
 import type * as React from "react"
@@ -37,6 +38,11 @@ export const CollectionHeader: React.FC<
               {collection.category}
             </Link>
           </Breadcrumbs>
+
+          <FollowMarketingCollectionButtonQueryRenderer
+            id={collection.slug}
+            mt={2}
+          />
         </Column>
 
         {collection.description && (

src/Components/FollowButton/FollowMarketingCollectionButton.tsx

@@ -0,0 +1,163 @@
+import { type AuthContextModule, ContextModule, Intent } from "@artsy/cohesion"
+import type { ButtonProps } from "@artsy/palette"
+import { useAuthDialog } from "Components/AuthDialog"
+import { useSystemContext } from "System/Hooks/useSystemContext"
+import { SystemQueryRenderer } from "System/Relay/SystemQueryRenderer"
+import { useMutation } from "Utils/Hooks/useMutation"
+import type { FollowMarketingCollectionButtonQuery } from "__generated__/FollowMarketingCollectionButtonQuery.graphql"
+import type { FollowMarketingCollectionButton_marketingCollection$data } from "__generated__/FollowMarketingCollectionButton_marketingCollection.graphql"
+import type * as React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { FollowButton } from "./Button"
+
+interface FollowMarketingCollectionButtonProps
+  extends Omit<ButtonProps, "variant"> {
+  children?: React.ReactNode
+  // FIXME: REACT_18_UPGRADE
+  // children?: FollowButtonRenderProps
+  marketingCollection: FollowMarketingCollectionButton_marketingCollection$data
+  contextModule?: AuthContextModule
+  onFollow?: (followed: boolean) => void
+}
+
+const FollowMarketingCollectionButton: React.FC<
+  React.PropsWithChildren<FollowMarketingCollectionButtonProps>
+> = ({
+  marketingCollection,
+  contextModule = ContextModule.geneHeader, // TODO: Change to collection header
+  onFollow,
+  ...rest
+}) => {
+  const { isLoggedIn } = useSystemContext()
+
+  const { submitMutation } = useMutation({
+    mutation: graphql`
+      mutation FollowMarketingCollectionButtonMutation(
+        $input: FollowMarketingCollectionInput!
+      ) {
+        followMarketingCollection(input: $input) {
+          marketingCollection {
+            id
+            isFollowed
+          }
+        }
+      }
+    `,
+    optimisticResponse: {
+      followMarketingCollection: {
+        marketingCollection: {
+          id: marketingCollection.id,
+          isFollowed: !marketingCollection.isFollowed,
+        },
+      },
+    },
+  })
+
+  const { showAuthDialog } = useAuthDialog()
+
+  const handleClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    event.preventDefault()
+
+    if (!isLoggedIn) {
+      showAuthDialog({
+        options: {
+          title: `Sign up or log in to follow ${marketingCollection.title}`,
+          afterAuthAction: {
+            action: "follow",
+            kind: "marketingCollection",
+            objectId: marketingCollection.slug,
+          },
+        },
+        analytics: {
+          intent: Intent.followGene, // TODO: add marketing collection intent
+          contextModule,
+        },
+      })
+
+      return
+    }
+
+    submitMutation({
+      variables: {
+        input: {
+          marketingCollectionID: marketingCollection.internalID,
+          unfollow: marketingCollection.isFollowed,
+        },
+      },
+    })
+
+    onFollow?.(!marketingCollection.isFollowed)
+  }
+
+  return (
+    <FollowButton
+      isFollowed={!!marketingCollection.isFollowed}
+      handleFollow={handleClick}
+      aria-label={
+        marketingCollection.isFollowed
+          ? `Unfollow ${marketingCollection.title}`
+          : `Follow ${marketingCollection.title}`
+      }
+      {...rest}
+    />
+  )
+}
+
+export const FollowMarketingCollectionButtonFragmentContainer =
+  createFragmentContainer(FollowMarketingCollectionButton, {
+    marketingCollection: graphql`
+      fragment FollowMarketingCollectionButton_marketingCollection on MarketingCollection
+      @argumentDefinitions(
+        isLoggedIn: { type: "Boolean", defaultValue: false }
+      ) {
+        id
+        slug
+        title
+        internalID
+        isFollowed @include(if: $isLoggedIn)
+      }
+    `,
+  })
+
+interface FollowMarketingCollectionButtonQueryRendererProps
+  extends Omit<FollowMarketingCollectionButtonProps, "marketingCollection"> {
+  id: string
+}
+
+export const FollowMarketingCollectionButtonQueryRenderer: React.FC<
+  React.PropsWithChildren<FollowMarketingCollectionButtonQueryRendererProps>
+> = ({ id, ...rest }) => {
+  const { isLoggedIn } = useSystemContext()
+  return (
+    <SystemQueryRenderer<FollowMarketingCollectionButtonQuery>
+      lazyLoad
+      query={graphql`
+        query FollowMarketingCollectionButtonQuery(
+          $id: String!
+          $isLoggedIn: Boolean!
+        ) {
+          marketingCollection(slug: $id) {
+            ...FollowMarketingCollectionButton_marketingCollection
+              @arguments(isLoggedIn: $isLoggedIn)
+          }
+        }
+      `}
+      placeholder={<FollowButton {...rest} />}
+      variables={{ id, isLoggedIn }}
+      render={({ error, props }) => {
+        if (error || !props?.marketingCollection) {
+          return <FollowButton {...rest} />
+        }
+
+        return (
+          <FollowMarketingCollectionButtonFragmentContainer
+            {...rest}
+            marketingCollection={props.marketingCollection}
+          />
+        )
+      }}
+    />
+  )
+}

src/Components/Notifications/MarketingCollectionHitNotification.tsx

@@ -0,0 +1,75 @@
+import { Flex, Spacer, Text } from "@artsy/palette"
+import { NotificationArtworkList } from "Components/Notifications/NotificationArtworkList"
+import { NotificationErrorMessage } from "Components/Notifications/NotificationErrorMessage"
+import { NotificationTypeLabel } from "Components/Notifications/NotificationTypeLabel"
+import { RouterLink } from "System/Components/RouterLink"
+import type { MarketingCollectionHitNotification_notification$key } from "__generated__/MarketingCollectionHitNotification_notification.graphql"
+import type { FC } from "react"
+import { graphql, useFragment } from "react-relay"
+
+interface MarketingCollectionHitNotificationProps {
+  notification: MarketingCollectionHitNotification_notification$key
+}
+
+export const MarketingCollectionHitNotification: FC<
+  React.PropsWithChildren<MarketingCollectionHitNotificationProps>
+> = ({ notification }) => {
+  const notificationData = useFragment(
+    MarketingCollectionHitNotificationFragment,
+    notification,
+  )
+
+  const { artworksConnection, headline, item } = notificationData
+
+  const marketingCollection = item?.marketingCollection
+
+  if (!marketingCollection) {
+    return <NotificationErrorMessage />
+  }
+
+  return (
+    <>
+      <Flex width="100%" justifyContent="space-between">
+        <Flex flex={1} mr={1}>
+          <Text variant="lg-display">{headline}</Text>
+        </Flex>
+      </Flex>
+
+      <Spacer y={1} />
+
+      <NotificationTypeLabel notification={notificationData} />
+
+      <Spacer y={4} />
+
+      <NotificationArtworkList artworksConnection={artworksConnection} />
+
+      <Spacer y={4} />
+
+      <RouterLink to={`/collection/${marketingCollection?.slug}`}>
+        <Text fontWeight="bold">
+          View all works in "{marketingCollection.title}"
+        </Text>
+      </RouterLink>
+    </>
+  )
+}
+
+export const MarketingCollectionHitNotificationFragment = graphql`
+  fragment MarketingCollectionHitNotification_notification on Notification {
+    artworksConnection(first: 10) {
+      ...NotificationArtworkList_artworksConnection
+      totalCount
+    }
+    headline
+    item {
+      ... on MarketingCollectionHitNotificationItem {
+        marketingCollection {
+          title
+          slug
+        }
+      }
+    }
+    notificationType
+    ...NotificationTypeLabel_notification
+  }
+`

src/Components/Notifications/Notification.tsx

@@ -27,6 +27,7 @@ import type {
 } from "__generated__/NotificationQuery.graphql"
 import { Suspense, useEffect } from "react"
 import { graphql, useLazyLoadQuery } from "react-relay"
+import { MarketingCollectionHitNotification } from "./MarketingCollectionHitNotification"
 
 const logger = createLogger("NotificationItem")
 
@@ -40,6 +41,7 @@ export const SUPPORTED_NOTIFICATION_TYPES: NotificationTypesEnum[] = [
   "VIEWING_ROOM_PUBLISHED",
   "PARTNER_SHOW_OPENED",
   "COLLECTOR_PROFILE_UPDATE_PROMPT",
+  "MARKETING_COLLECTION_HIT",
 ]
 
 interface NotificationProps {
@@ -122,6 +124,9 @@ const Notification: React.FC<React.PropsWithChildren<NotificationProps>> = ({
     case "VIEWING_ROOM_PUBLISHED":
       return <ViewingRoomPublishedNotification notification={notification} />
 
+    case "MARKETING_COLLECTION_HIT":
+      return <MarketingCollectionHitNotification notification={notification} />
+
     default:
       return null
   }
@@ -161,6 +166,7 @@ const notificationQuery = graphql`
         ...PartnerOfferCreatedNotification_notification
         ...PartnerShowOpenedNotification_notification
         ...ViewingRoomPublishedNotification_notification
+        ...MarketingCollectionHitNotification_notification
         id
         internalID
         notificationType

src/Utils/Hooks/useAuthIntent/index.tsx

@@ -10,6 +10,7 @@ import { createOfferOrderMutation } from "./mutations/AuthIntentCreateOfferOrder
 import { createOrderMutation } from "./mutations/AuthIntentCreateOrderMutation"
 import { followArtistMutation } from "./mutations/AuthIntentFollowArtistMutation"
 import { followGeneMutation } from "./mutations/AuthIntentFollowGeneMutation"
+import { followMarketingCollectionMutation } from "./mutations/AuthIntentFollowMarketingCollectionMutation"
 import { followProfileMutation } from "./mutations/AuthIntentFollowProfileMutation"
 import { saveArtworkMutation } from "./mutations/AuthIntentSaveArtworkMutation"
 
@@ -22,6 +23,7 @@ export type AfterAuthAction =
   | { action: "createAlert"; kind: "artworks"; objectId: string }
   | { action: "follow"; kind: "artist"; objectId: string }
   | { action: "follow"; kind: "gene"; objectId: string }
+  | { action: "follow"; kind: "marketingCollection"; objectId: string }
   | { action: "follow"; kind: "profile"; objectId: string }
   | { action: "save"; kind: "artworks"; objectId: string }
   | { action: "saveArtworkToLists"; kind: "artworks"; objectId: string }
@@ -89,6 +91,11 @@ export const runAuthIntent = async ({
               return followGeneMutation(relayEnvironment, value.objectId)
             case "profile":
               return followProfileMutation(relayEnvironment, value.objectId)
+            case "marketingCollection":
+              return followMarketingCollectionMutation(
+                relayEnvironment,
+                value.objectId,
+              )
           }
 
           break

src/Utils/Hooks/useAuthIntent/mutations/AuthIntentFollowMarketingCollectionMutation.ts

@@ -0,0 +1,49 @@
+import type { AuthIntentFollowMarketingCollectionMutation } from "__generated__/AuthIntentFollowMarketingCollectionMutation.graphql"
+import { commitMutation, graphql } from "react-relay"
+import type { Environment } from "react-relay"
+import type { AuthIntentMutation } from "./types"
+export const followMarketingCollectionMutation: AuthIntentMutation = (
+  relayEnvironment: Environment,
+  id: string,
+) => {
+  return new Promise((resolve, reject) => {
+    commitMutation<AuthIntentFollowMarketingCollectionMutation>(
+      relayEnvironment,
+      {
+        onCompleted: (res, errors) => {
+          if (errors !== null) {
+            reject(errors)
+            return
+          }
+
+          resolve(res)
+        },
+        mutation: graphql`
+          mutation AuthIntentFollowMarketingCollectionMutation(
+            $input: FollowMarketingCollectionInput!
+          ) @raw_response_type {
+            followMarketingCollection(input: $input) {
+              marketingCollection {
+                id
+                isFollowed
+              }
+            }
+          }
+        `,
+        optimisticResponse: {
+          followMarketingCollection: {
+            marketingCollection: {
+              id,
+              isFollowed: true,
+            },
+          },
+        },
+        variables: {
+          input: {
+            marketingCollectionID: id,
+          },
+        },
+      },
+    )
+  })
+}