diff --git a/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx b/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx index cca0a2734e6..714b169a69a 100644 --- a/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx +++ b/src/app/Components/ArtworkGrids/ArtworkGridItem.tsx @@ -27,7 +27,7 @@ import { DurationProvider } from "app/Components/Countdown" import { Disappearable, DissapearableArtwork } from "app/Components/Disappearable" import { ProgressiveOnboardingSaveArtwork } from "app/Components/ProgressiveOnboarding/ProgressiveOnboardingSaveArtwork" import { HEART_ICON_SIZE } from "app/Components/constants" -import { PartnerOffer } from "app/Scenes/Activity/components/NotificationArtworkList" +import { PartnerOffer } from "app/Scenes/Activity/components/PartnerOfferCreatedNotification" import { GlobalStore } from "app/store/GlobalStore" import { navigate } from "app/system/navigation/navigate" import { useArtworkBidding } from "app/utils/Websockets/auctions/useArtworkBidding" @@ -73,7 +73,7 @@ export interface ArtworkProps extends ArtworkActionTrackingProps { /** Overrides onPress and prevents the default behaviour. */ onPress?: (artworkID: string, artwork?: ArtworkGridItem_artwork$data) => void partnerNameTextStyle?: TextProps - partnerOffer?: PartnerOffer + partnerOffer?: PartnerOffer | null priceOfferMessage?: PriceOfferMessage saleInfoTextStyle?: TextProps /** Show the lot number (Lot 213) */ diff --git a/src/app/Components/ArtworkGrids/MasonryArtworkGridItem.tsx b/src/app/Components/ArtworkGrids/MasonryArtworkGridItem.tsx index 476cfb2bcb7..ea696da807f 100644 --- a/src/app/Components/ArtworkGrids/MasonryArtworkGridItem.tsx +++ b/src/app/Components/ArtworkGrids/MasonryArtworkGridItem.tsx @@ -2,7 +2,7 @@ import { ContextModule, ScreenOwnerType } from "@artsy/cohesion" import { Flex, useScreenDimensions, useSpace } from "@artsy/palette-mobile" import { ArtworkGridItem_artwork$data } from "__generated__/ArtworkGridItem_artwork.graphql" import ArtworkGridItem, { PriceOfferMessage } from "app/Components/ArtworkGrids/ArtworkGridItem" -import { PartnerOffer } from "app/Scenes/Activity/components/NotificationArtworkList" +import { PartnerOffer } from "app/Scenes/Activity/components/PartnerOfferCreatedNotification" import { NUM_COLUMNS_MASONRY } from "app/utils/masonryHelpers" import { ViewProps } from "react-native" import { FragmentRefs } from "relay-runtime" @@ -31,7 +31,7 @@ interface MasonryArtworkGridItemProps { item: Artwork numColumns?: number onPress?: (artworkID: string, artwork?: ArtworkGridItem_artwork$data) => void - partnerOffer?: PartnerOffer + partnerOffer?: PartnerOffer | null priceOfferMessage?: PriceOfferMessage hideSaveIcon?: boolean hideSaleInfo?: boolean diff --git a/src/app/Components/ArtworkGrids/MasonryInfiniteScrollArtworkGrid.tsx b/src/app/Components/ArtworkGrids/MasonryInfiniteScrollArtworkGrid.tsx index 152aef75bf6..90fc6ed6a2b 100644 --- a/src/app/Components/ArtworkGrids/MasonryInfiniteScrollArtworkGrid.tsx +++ b/src/app/Components/ArtworkGrids/MasonryInfiniteScrollArtworkGrid.tsx @@ -3,7 +3,7 @@ import { useSpace } from "@artsy/palette-mobile" import { MasonryFlashList, MasonryFlashListProps } from "@shopify/flash-list" import { PriceOfferMessage } from "app/Components/ArtworkGrids/ArtworkGridItem" import { MasonryArtworkGridItem } from "app/Components/ArtworkGrids/MasonryArtworkGridItem" -import { PartnerOffer } from "app/Scenes/Activity/components/NotificationArtworkList" +import { PartnerOffer } from "app/Scenes/Activity/components/PartnerOfferCreatedNotification" import { ESTIMATED_MASONRY_ITEM_SIZE, MASONRY_LIST_PAGE_SIZE, @@ -36,7 +36,7 @@ interface MasonryInfiniteScrollArtworkGridProps extends MasonryFlashListOmittedP loadMore?: (pageSize: number) => void onPress?: (artworkID: string) => void pageSize?: number - partnerOffer?: PartnerOffer + partnerOffer?: PartnerOffer | null priceOfferMessage?: PriceOfferMessage } diff --git a/src/app/Scenes/Activity/components/NotificationArtworkList.tsx b/src/app/Scenes/Activity/components/NotificationArtworkList.tsx index de98a18b8b7..9850f3c978b 100644 --- a/src/app/Scenes/Activity/components/NotificationArtworkList.tsx +++ b/src/app/Scenes/Activity/components/NotificationArtworkList.tsx @@ -1,39 +1,29 @@ import { OwnerType } from "@artsy/cohesion" -import { Flex, Screen, Text, useColor } from "@artsy/palette-mobile" +import { Flex, Screen } from "@artsy/palette-mobile" import { NotificationArtworkList_artworksConnection$key } from "__generated__/NotificationArtworkList_artworksConnection.graphql" import { PriceOfferMessage } from "app/Components/ArtworkGrids/ArtworkGridItem" import { MasonryInfiniteScrollArtworkGrid } from "app/Components/ArtworkGrids/MasonryInfiniteScrollArtworkGrid" -import { CommercialButtonsQueryRenderer } from "app/Scenes/Activity/components/NotificationCommercialButtons" +import { PartnerOffer } from "app/Scenes/Activity/components/PartnerOfferCreatedNotification" import { extractNodes } from "app/utils/extractNodes" import { FC } from "react" -import { ImageBackground } from "react-native" import { graphql, useFragment } from "react-relay" -export interface PartnerOffer { - internalID: string - endAt: string - isAvailable: boolean - note?: string -} - interface NotificationArtworkListProps { artworksConnection?: NotificationArtworkList_artworksConnection$key | null priceOfferMessage?: PriceOfferMessage - showArtworkCommercialButtons?: boolean - partnerOffer?: PartnerOffer + partnerOffer?: PartnerOffer | null } -export const NotificationArtworkList: FC = (props) => { - const { artworksConnection, priceOfferMessage, showArtworkCommercialButtons, partnerOffer } = - props +export const NotificationArtworkList: FC = ({ + artworksConnection, + priceOfferMessage, + partnerOffer, +}) => { const { scrollHandler } = Screen.useListenForScreenScroll() const artworksConnectionData = useFragment(notificationArtworkListFragment, artworksConnection) const artworks = extractNodes(artworksConnectionData) - const note = partnerOffer?.note - const partnerIcon = artworks[0].partner?.profile?.icon?.url - const color = useColor() return ( // Setting the min heiht here because Flashlist needs a container with a valid height. @@ -50,37 +40,6 @@ export const NotificationArtworkList: FC = (props) partnerOffer={partnerOffer} priceOfferMessage={priceOfferMessage} /> - - {!!showArtworkCommercialButtons && ( - - )} - - {!!note && ( - - - {!!partnerIcon && ( - - - - )} - - - Note from the gallery - - - "{note}" - - - - - )} ) } @@ -93,13 +52,6 @@ export const notificationArtworkListFragment = graphql` id slug href - partner { - profile { - icon { - url(version: "square140") - } - } - } image(includeAll: false) { aspectRatio } diff --git a/src/app/Scenes/Activity/components/NotificationCommercialButtons.tsx b/src/app/Scenes/Activity/components/NotificationCommercialButtons.tsx index ca271b22a64..dad0c4767ef 100644 --- a/src/app/Scenes/Activity/components/NotificationCommercialButtons.tsx +++ b/src/app/Scenes/Activity/components/NotificationCommercialButtons.tsx @@ -6,7 +6,7 @@ import { NotificationCommercialButtonsQuery } from "__generated__/NotificationCo import { NotificationCommercialButtons_artwork$key } from "__generated__/NotificationCommercialButtons_artwork.graphql" import { useSendInquiry_me$key } from "__generated__/useSendInquiry_me.graphql" import { CreateArtworkAlertModal } from "app/Components/Artist/ArtistArtworks/CreateArtworkAlertModal" -import { PartnerOffer } from "app/Scenes/Activity/components/NotificationArtworkList" +import { PartnerOffer } from "app/Scenes/Activity/components/PartnerOfferCreatedNotification" import { BuyNowButton } from "app/Scenes/Artwork/Components/CommercialButtons/BuyNowButton" import { ContactGalleryButton } from "app/Scenes/Artwork/Components/CommercialButtons/ContactGalleryButton" import { MakeOfferButtonFragmentContainer } from "app/Scenes/Artwork/Components/CommercialButtons/MakeOfferButton" @@ -15,13 +15,13 @@ import { getRelayEnvironment } from "app/system/relay/defaultEnvironment" import { getTimer } from "app/utils/getTimer" import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag" import { renderWithPlaceholder } from "app/utils/renderWithPlaceholder" -import { useState, Children } from "react" +import { Children, useState } from "react" import { QueryRenderer, graphql, useFragment } from "react-relay" import { useTracking } from "react-tracking" export const CommercialButtonsQueryRenderer: React.FC<{ artworkID: string - partnerOffer?: PartnerOffer + partnerOffer?: PartnerOffer | null }> = ({ artworkID, partnerOffer }) => { return ( diff --git a/src/app/Scenes/Activity/components/PartnerOfferCreatedNotification.tsx b/src/app/Scenes/Activity/components/PartnerOfferCreatedNotification.tsx index d17d0928965..e7eb78fc608 100644 --- a/src/app/Scenes/Activity/components/PartnerOfferCreatedNotification.tsx +++ b/src/app/Scenes/Activity/components/PartnerOfferCreatedNotification.tsx @@ -1,16 +1,33 @@ -import { DEFAULT_HIT_SLOP, Flex, Screen, Spacer, Text, Touchable } from "@artsy/palette-mobile" +import { + DEFAULT_HIT_SLOP, + Flex, + Screen, + Spacer, + Text, + Touchable, + useColor, +} from "@artsy/palette-mobile" import { PartnerOfferCreatedNotification_notification$key } from "__generated__/PartnerOfferCreatedNotification_notification.graphql" import { ExpiresInTimer, shouldDisplayExpiresInTimer, } from "app/Scenes/Activity/components/ExpiresInTimer" import { NotificationArtworkList } from "app/Scenes/Activity/components/NotificationArtworkList" +import { CommercialButtonsQueryRenderer } from "app/Scenes/Activity/components/NotificationCommercialButtons" import { PartnerOfferBadge } from "app/Scenes/Activity/components/PartnerOffeBadge" import { goBack, navigate } from "app/system/navigation/navigate" import { extractNodes } from "app/utils/extractNodes" import { getTimer } from "app/utils/getTimer" +import { ImageBackground } from "react-native" import { graphql, useFragment } from "react-relay" +export interface PartnerOffer { + internalID: string + endAt: string | null | undefined + isAvailable: boolean | null | undefined + note: string | null | undefined +} + interface PartnerOfferCreatedNotificationProps { notification: PartnerOfferCreatedNotification_notification$key } @@ -18,9 +35,12 @@ interface PartnerOfferCreatedNotificationProps { export const PartnerOfferCreatedNotification: React.FC = ({ notification, }) => { - const notificationData = useFragment(PartnerOfferCreatedNotificationFragment, notification) + const { headline, item, notificationType, artworksConnection } = useFragment( + PartnerOfferCreatedNotificationFragment, + notification + ) - const { headline, item, notificationType, artworksConnection } = notificationData + const color = useColor() const { hasEnded } = getTimer(item?.partnerOffer?.endAt || "") const noLongerAvailable = !item?.partnerOffer?.isAvailable @@ -37,6 +57,11 @@ export const PartnerOfferCreatedNotification: React.FC { navigate("/settings/saves") } @@ -78,18 +103,44 @@ export const PartnerOfferCreatedNotification: React.FC + + + + {!!item?.partnerOffer?.note && ( + + + {!!partnerIcon && ( + + + + )} + + + Note from the gallery + + + "{note}" + + + + + )} @@ -121,6 +172,14 @@ export const PartnerOfferCreatedNotificationFragment = graphql` ...NotificationArtworkList_artworksConnection edges { node { + internalID + partner { + profile { + icon { + url(version: "square140") + } + } + } price } }