= props => {
+ const { artist } = props
+ const { sidebarAggregations } = artist
+
+ const isClient = typeof window !== "undefined"
+ const showRecommendations =
+ isClient &&
+ get(artist, a => a.related.artistsConnection.edges.length, 0) > 0
+
+ return (
+ <>
+
+
+
+
+
+
+ {showRecommendations && (
+
+
+ )}
+
+ )
+}
+
+export const WorksRouteFragmentContainer = createFragmentContainer(WorksRoute, {
+ artist: graphql`
+ fragment Works_artist on Artist
+ @argumentDefinitions(
+ acquireable: { type: "Boolean" }
+ aggregations: { type: "[ArtworkAggregation]" }
+ artistID: { type: "String" }
+ atAuction: { type: "Boolean" }
+ attributionClass: { type: "[String]" }
+ color: { type: "String" }
+ forSale: { type: "Boolean" }
+ height: { type: "String" }
+ inquireableOnly: { type: "Boolean" }
+ keyword: { type: "String" }
+ majorPeriods: { type: "[String]" }
+ medium: { type: "String", defaultValue: "*" }
+ offerable: { type: "Boolean" }
+ page: { type: "Int" }
+ partnerID: { type: "ID" }
+ priceRange: { type: "String" }
+ sort: { type: "String", defaultValue: "-partner_updated_at" }
+ width: { type: "String" }
+ ) {
+ internalID
+
+ related {
+ artistsConnection(first: 1) {
+ edges {
+ node {
+ id
+ }
+ }
+ }
+ }
+
+ sidebarAggregations: filterArtworksConnection(
+ sort: $sort
+ page: $page
+ aggregations: $aggregations
+ first: 30
+ after: ""
+ ) {
+ aggregations {
+ slice
+ counts {
+ name
+ value
+ }
+ }
+ # FIXME: Might need to reenable the below.
+ # Include the below fragment so that this will match
+ # the initial load (w/ no filter applied), and thus MP
+ # will consolidate aggregations _and_ the grid into one call.
+ # Leave out this fragment if navigating to the artist page
+ # with a filter applied, as those can't be consolidated and
+ # this is extra data.
+ # artworks_connection: artworksConnection(first: 30, after: "")
+ # @skip(if: $hasFilter) {
+ # edges {
+ # node {
+ # slug
+ # }
+ # }
+ # }
+ }
+ ...ArtistArtworkFilter_artist
+ @arguments(
+ acquireable: $acquireable
+ aggregations: $aggregations
+ artistID: $artistID
+ atAuction: $atAuction
+ attributionClass: $attributionClass
+ color: $color
+ forSale: $forSale
+ height: $height
+ inquireableOnly: $inquireableOnly
+ keyword: $keyword
+ majorPeriods: $majorPeriods
+ medium: $medium
+ offerable: $offerable
+ page: $page
+ partnerID: $partnerID
+ priceRange: $priceRange
+ sort: $sort
+ width: $width
+ )
+ }
+ `,
+})
+
+// Top-level route needs to be exported for bundle splitting in the router
+export default WorksRouteFragmentContainer
diff --git a/src/v2/Apps/Artist/__tests__/routes.jest.tsx b/src/v2/Apps/Artist/__tests__/routes.jest.tsx
new file mode 100644
index 00000000000..961e674b7b5
--- /dev/null
+++ b/src/v2/Apps/Artist/__tests__/routes.jest.tsx
@@ -0,0 +1,240 @@
+import { routes_ArtistTopLevelQueryRawResponse } from "v2/__generated__/routes_ArtistTopLevelQuery.graphql"
+import { routes } from "v2/Apps/Artist/routes"
+import { createMockNetworkLayer2 } from "v2/DevTools/createMockNetworkLayer"
+import { Resolver } from "found-relay"
+import { FarceRedirectResult } from "found/lib/server"
+import getFarceResult from "found/lib/server/getFarceResult"
+import React from "react"
+import { Environment, RecordSource, Store } from "relay-runtime"
+
+describe("Artist/routes", () => {
+ async function render(url, mockData: routes_ArtistTopLevelQueryRawResponse) {
+ const network = createMockNetworkLayer2({ mockData })
+ const source = new RecordSource()
+ const store = new Store(source)
+ const environment = new Environment({ network, store })
+
+ const result = await getFarceResult({
+ url,
+ routeConfig: routes,
+ resolver: new Resolver(environment),
+ render: () => hello
,
+ })
+
+ return result as FarceRedirectResult
+ }
+
+ const mockResolver = (
+ artist: routes_ArtistTopLevelQueryRawResponse["artist"]
+ ) => ({
+ artist,
+ })
+
+ it("renders the overview page if there is sufficient data", async () => {
+ const { redirect } = await render(
+ "/artist/juan-gris",
+ mockResolver(overviewArtist)
+ )
+
+ expect(redirect).toBe(undefined)
+ })
+
+ it("redirects trailing a trailing slash on the artist page back to the root", async () => {
+ const { redirect } = await render(
+ "/artist/juan-gris/",
+ mockResolver(overviewArtist)
+ )
+
+ expect(redirect.url).toBe("/artist/juan-gris")
+ })
+
+ it("doesn't redirect from /auction-results to /works-for-sale if auction-results", async () => {
+ const { redirect } = await render(
+ "/artist/juan-gris/auction-results",
+ mockResolver({
+ ...overviewArtist,
+ statuses: {
+ ...overviewArtist.statuses,
+ auctionLots: true,
+ },
+ })
+ )
+ expect(redirect).toBe(undefined)
+ })
+
+ it("redirects from /overview to /", async () => {
+ const { redirect } = await render(
+ "/artist/juan-gris/overview",
+ mockResolver({
+ ...overviewArtist,
+ })
+ )
+
+ expect(redirect.url).toBe("/artist/juan-gris")
+ })
+
+ it("renders the /works-for-sale page if there is no data", async () => {
+ const { redirect } = await render(
+ "/artist/juan-gris/works-for-sale",
+ mockResolver({
+ ...overviewArtist,
+ highlights: {
+ partnersConnection: null,
+ },
+ statuses: {
+ shows: false,
+ articles: false,
+ cv: false,
+ auctionLots: false,
+ artworks: false,
+ },
+ biographyBlurb: {
+ text: null,
+ },
+ related: {
+ genes: null,
+ },
+ })
+ )
+
+ expect(redirect).toBe(undefined)
+ })
+
+ it("redirects from / to the /works-for-sale page if there is no data", async () => {
+ const { redirect } = await render(
+ "/artist/juan-gris",
+ mockResolver({
+ ...overviewArtist,
+ highlights: {
+ partnersConnection: null,
+ },
+ statuses: {
+ shows: false,
+ articles: false,
+ cv: false,
+ auctionLots: false,
+ artworks: false,
+ },
+ biographyBlurb: {
+ text: null,
+ },
+ related: {
+ genes: null,
+ },
+ })
+ )
+
+ expect(redirect.url).toBe("/artist/juan-gris/works-for-sale")
+ })
+
+ it("does not redirect from /cv", async () => {
+ const { redirect } = await render(
+ "/artist/juan-gris/cv",
+ mockResolver(overviewArtist)
+ )
+
+ expect(redirect).toBe(undefined)
+ })
+
+ it("does not redirect from /shows", async () => {
+ const { redirect } = await render(
+ "/artist/juan-gris/shows",
+ mockResolver(overviewArtist)
+ )
+
+ expect(redirect).toBe(undefined)
+ })
+
+ it("does not redirect from /articles", async () => {
+ const { redirect } = await render(
+ "/artist/juan-gris/articles",
+ mockResolver(overviewArtist)
+ )
+
+ expect(redirect).toBe(undefined)
+ })
+
+ it("redirects from /cv to the /works-for-sale page if there is no data", async () => {
+ const { redirect } = await render(
+ "/artist/juan-gris/cv",
+ mockResolver({
+ ...overviewArtist,
+ statuses: {
+ shows: false,
+ articles: false,
+ cv: false,
+ auctionLots: false,
+ artworks: false,
+ },
+ biographyBlurb: {
+ text: null,
+ },
+ related: {
+ genes: null,
+ },
+ })
+ )
+
+ expect(redirect.url).toBe("/artist/juan-gris/works-for-sale")
+ })
+})
+
+const overviewArtist: routes_ArtistTopLevelQueryRawResponse["artist"] = {
+ id: "opaque-artist-id",
+ slug: "juan-gris",
+ formattedNationalityAndBirthday: "British, 1890-1970",
+ carousel: null,
+ is_followed: false,
+ statuses: {
+ shows: true,
+ articles: true,
+ cv: true,
+ auctionLots: true,
+ artworks: true,
+ },
+ biographyBlurb: {
+ text:
+ 'Originally trained in math and physics, Juan Gris moved to Paris in 1906, where he met Pablo Picasso and Georges Braque and became involved in the Cubist movement. Gris took a highly mathematical approach to Cubist painting, rendering discrete forms with precision and exactitude, the resulting images almost resembling technical drawings. The composition of Jar, Flask, and Glass (1911), for example, was derived from an underlying grid structure, the different modules depicting different planar perspectives and yielding an overall composition that is both fractured and flattened. Gris also experimented with Pointillism in works such as Newspaper and Fruit Dish Jean-Baptiste-Camille Corot and Paul Cézanne through both style and subject matter.
\n',
+ },
+ related: {
+ genes: {
+ edges: [
+ {
+ node: {
+ id: "opaque-gene-id",
+ slug: "cubism",
+ },
+ },
+ ],
+ },
+ },
+ internalID: "4d8b928e4eb68a1b2c000222",
+ highlights: {
+ partnersConnection: {
+ edges: [],
+ },
+ },
+ artistHightlights: {
+ partnersConnection: {
+ edges: [],
+ },
+ },
+ insights: [],
+ name: "Juan Gris",
+ nationality: "",
+ birthday: "Feb 15",
+ gender: "male",
+ deathday: null,
+ href: "/artist/juan-gris",
+ meta: null,
+ alternate_names: null,
+ image: null,
+ counts: {
+ artworks: 12,
+ follows: 1234,
+ forSaleArtworks: 10,
+ },
+ blurb: "blurb",
+ artworks_connection: null,
+ auctionResultsConnection: null,
+}
diff --git a/src/v2/Apps/Artist/routes.tsx b/src/v2/Apps/Artist/routes.tsx
new file mode 100644
index 00000000000..8f4639272e1
--- /dev/null
+++ b/src/v2/Apps/Artist/routes.tsx
@@ -0,0 +1,334 @@
+import loadable from "@loadable/component"
+import { Redirect, RedirectException, RouteConfig } from "found"
+import * as React from "react"
+import { graphql } from "react-relay"
+
+import { hasSections as showMarketInsights } from "v2/Apps/Artist/Components/MarketInsights/MarketInsights"
+
+import { isDefaultFilter } from "v2/Components/v2/ArtworkFilter/Utils/isDefaultFilter"
+import { paramsToCamelCase } from "v2/Components/v2/ArtworkFilter/Utils/urlBuilder"
+
+import { hasOverviewContent } from "./Components/NavigationTabs"
+
+import {
+ ArtworkFilters,
+ initialArtworkFilterState,
+} from "v2/Components/v2/ArtworkFilter/ArtworkFilterContext"
+
+graphql`
+ fragment routes_Artist on Artist {
+ slug
+ statuses {
+ shows
+ cv(minShowCount: 0)
+ articles
+ }
+ counts {
+ forSaleArtworks
+ }
+ related {
+ genes {
+ edges {
+ node {
+ slug
+ }
+ }
+ }
+ }
+ highlights {
+ partnersConnection(
+ first: 10
+ displayOnPartnerProfile: true
+ representedBy: true
+ partnerCategory: ["blue-chip", "top-established", "top-emerging"]
+ ) {
+ edges {
+ node {
+ categories {
+ slug
+ }
+ }
+ }
+ }
+ }
+ insights {
+ type
+ }
+ biographyBlurb(format: HTML, partnerBio: true) {
+ text
+ }
+ }
+`
+
+const ArtistApp = loadable(() => import("./ArtistApp"))
+const OverviewRoute = loadable(() => import("./Routes/Overview"))
+const WorksForSaleRoute = loadable(() => import("./Routes/Works"))
+const AuctionResultsRoute = loadable(() => import("./Routes/AuctionResults"))
+const ConsignRoute = loadable(() => import("./Routes/Consign"))
+const CVRoute = loadable(() => import("./Routes/CV"))
+const ArticlesRoute = loadable(() => import("./Routes/Articles"))
+const ShowsRoute = loadable(() => import("./Routes/Shows"))
+
+// Artist pages tend to load almost instantly, so just preload it up front
+if (typeof window !== "undefined") {
+ ArtistApp.preload()
+ ConsignRoute.preload()
+}
+
+// FIXME:
+// * `render` functions requires casting
+// * `Redirect` needs to be casted, as it’s not compatible with `RouteConfig`
+export const routes: RouteConfig[] = [
+ {
+ path: "/artist/:artistID",
+ getComponent: () => ArtistApp,
+ prepare: () => {
+ ArtistApp.preload()
+ },
+ query: graphql`
+ query routes_ArtistTopLevelQuery($artistID: String!) @raw_response_type {
+ artist(id: $artistID) @principalField {
+ ...ArtistApp_artist
+ ...routes_Artist @relay(mask: false)
+ }
+ }
+ `,
+ render: ({ Component, props, match }) => {
+ if (!(Component && props)) {
+ return null
+ }
+
+ const { artist } = props as any
+ const { pathname } = match.location
+
+ if (!artist) {
+ return undefined
+ }
+
+ const showArtistInsights =
+ showMarketInsights(artist) ||
+ (artist.insights && artist.insights.length > 0)
+ const hasArtistContent = hasOverviewContent(artist)
+
+ const alreadyAtWorksForSalePath = pathname.includes(
+ `${artist.slug}/works-for-sale`
+ )
+
+ const canShowOverview = showArtistInsights || hasArtistContent
+
+ if (pathname === `/artist/${artist.slug}/`) {
+ throw new RedirectException(`/artist/${artist.slug}`)
+ }
+
+ if (!canShowOverview && !alreadyAtWorksForSalePath) {
+ throw new RedirectException(`/artist/${artist.slug}/works-for-sale`)
+ }
+
+ return {
+ /**
+ * On mount, trigger a page view and product view
+ *
+ * FIXME: We're manually invoking pageView tracking here, instead of within
+ * the `trackingMiddleware` file as we need to pass along additional metadata.
+ * Waiting on analytics team to decide if there's a better way to capture this
+ * data that remains consistent with the rest of the app.
+ */
+ componentDidMount() {
+ this.track()
+ }
+
+ componentDidUpdate() {
+ if (this.props.shouldTrackPageView) {
+ this.track()
+ }
+ }
+
+ track() {
+ this.trackPageview()
+ this.trackProductView()
+ this.trackLotView()
+ }
+
+ trackPageview() {
+ const {
+ artwork: { listPrice, availability, is_offerable, is_acquireable },
+ referrer,
+ } = this.props
+
+ const path = window.location.pathname
+ // FIXME: This breaks our global pageview tracking in the router level.
+ // Can these props be tracked on mount using our typical @track() or
+ // trackEvent() patterns as used in other apps?
+ const properties = {
+ path,
+ acquireable: is_acquireable,
+ offerable: is_offerable,
+ availability,
+ price_listed: !!listPrice,
+ referrer,
+ url: sd.APP_URL + path,
+ }
+
+ if (typeof window.analytics !== "undefined") {
+ // See trackingMiddleware.ts
+ window.analytics.__artsyReferrer = referrer
+ window.analytics.page(properties, { integrations: { Marketo: false } })
+
+ // TODO: Remove after EXPERIMENTAL_APP_SHELL AB test ends.
+ // if (sd.CLIENT_NAVIGATION_V5) {
+ // trackExperimentViewed("client_navigation_v5", properties)
+ // }
+ }
+ }
+
+ trackProductView() {
+ const {
+ tracking,
+ artwork: { is_acquireable, is_in_auction, internalID },
+ } = this.props
+
+ if (is_acquireable || is_in_auction) {
+ const trackingData = {
+ action_type: Schema.ActionType.ViewedProduct,
+ product_id: internalID,
+ }
+ if (tracking) {
+ tracking.trackEvent(trackingData)
+ }
+ }
+ }
+
+ trackLotView() {
+ const {
+ tracking,
+ artwork: { is_in_auction, slug, internalID, sale },
+ } = this.props
+
+ if (tracking && is_in_auction) {
+ const trackingData = {
+ action_type: Schema.ActionType.ViewedLot,
+ artwork_id: internalID,
+ artwork_slug: slug,
+ sale_id: sale.internalID,
+ auction_slug: sale.slug,
+ }
+ tracking.trackEvent(trackingData)
+ }
+ }
+
+ enableIntercomForBuyers(mediator) {
+ const {
+ artwork: { is_offerable, is_acquireable },
+ } = this.props
+ mediator &&
+ mediator.trigger &&
+ mediator.trigger("enableIntercomForBuyers", {
+ is_offerable,
+ is_acquireable,
+ })
+ }
+
+ renderArtists() {
+ const artists = this.props.artwork?.artists
+
+ if (!artists?.length) {
+ return null
+ }
+
+ return (
+ <>
+ {artists.map((artist, index) => {
+ const addSpacer = artists.length > 1 && index < artists.length - 1
+ return (
+
+
+
+ {addSpacer &&
+ )
+ })}
+
+ )
+ }
+
+ render() {
+ const { artwork, me } = this.props
+ return (
+
+
+ {/* NOTE: react-head automatically moves these tags to the element */}
+
+
+
+ {/* Mobile */}
+
+
+
+
+
+ {/* Desktop */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {artwork.artist && (
+
+
+ )}
+
+ {typeof window !== "undefined" && (
+
+
+
+
+ )}
+
+
+
+
+
+
+ {({ mediator }) => <>{this.enableIntercomForBuyers(mediator)}}
+
+
+
+ )
+ }
+}
+
+export const ArtworkAppFragmentContainer = createFragmentContainer(
+ (props: Props) => {
+ const {
+ match: {
+ location: { pathname, state },
+ },
+ } = useContext(RouterContext)
+
+ const referrer = state && state.previousHref
+ const shouldTrackPageView = useRouteTracking()
+
+ return (
+ {children}
+)
+
+@track(
+ {
+ context_module: Schema.ContextModule.Biography,
+ },
+ {
+ dispatch: data => Events.postEvent(data),
+ }
+)
+export class ArtistInfo extends Component {
+ state = {
+ showArtistInsights: false,
+ }
+
+ @track({
+ action_type: Schema.ActionType.Click,
+ flow: Schema.Flow.ArtworkAboutTheArtist,
+ subject: Schema.Subject.ReadMore,
+ type: Schema.Type.Button,
+ })
+ trackArtistBioReadMoreClick() {
+ // noop
+ }
+
+ @track({
+ action_type: Schema.ActionType.Click,
+ flow: Schema.Flow.ArtworkAboutTheArtist,
+ subject: Schema.Subject.ShowArtistInsights,
+ type: Schema.Type.Button,
+ })
+ openArtistInsights() {
+ this.setState({
+ showArtistInsights: true,
+ })
+ }
+
+ closeArtistInsights() {
+ this.setState({
+ showArtistInsights: false,
+ })
+ }
+
+ handleOpenAuth = (mediator, artist) => {
+ openAuthToFollowSave(mediator, {
+ entity: artist,
+ contextModule: ContextModule.aboutTheWork,
+ intent: Intent.followArtist,
+ })
+ }
+
+ render() {
+ const { artist } = this.props
+ const { biographyBlurb, image, slug, internalID } = this.props.artist
+ const showArtistBio = !!biographyBlurb.text
+ const imageUrl = get(this.props, p => image.cropped.url)
+ const showArtistInsightsButton =
+ (artist.exhibition_highlights &&
+ artist.exhibition_highlights.length >= MIN_EXHIBITIONS) ||
+ (artist.auctionResultsConnection &&
+ artist.auctionResultsConnection.edges.length > 0) ||
+ (artist.collections && artist.collections.length > 0) ||
+ (artist.highlights.partnersConnection &&
+ artist.highlights.partnersConnection.edges.length > 0)
+ const buttonText = this.state.showArtistInsights
+ ? "Hide artist insights"
+ : "Show artist insights"
+
+ return (
+
+ {({ user, mediator }) => (
+ <>
+
+
+ this.handleOpenAuth(mediator, this.props.artist)
+ }
+ render={({ is_followed }) => {
+ return (
+
+ {is_followed ? "Following" : "Follow"}
+
+ )
+ }}
+ />
+ }
+ />
+ {showArtistBio && (
+ <>
+
+
+ {buttonText}
+
+
+ )}
+
+ {this.state.showArtistInsights && (
+ <>
+
+ View all
+
+ }
+ Container={Container}
+ />
+
+ )}
+
+ )}
+
+ )
+ }
+}
+
+// ADDED COLLECTIONS, HIGHLIGHTS, AND AUCTION RESULTS TO FRAGMENT FOR SHOW ARTIST INSIGHTS BUTTON VISIBLILITY CHECK
+
+export const ArtistInfoFragmentContainer = createFragmentContainer(ArtistInfo, {
+ artist: graphql`
+ fragment ArtistInfo_artist on Artist
+ @argumentDefinitions(
+ partnerCategory: {
+ type: "[String]"
+ defaultValue: ["blue-chip", "top-established", "top-emerging"]
+ }
+ ) {
+ internalID
+ slug
+ name
+ href
+ image {
+ cropped(width: 100, height: 100) {
+ url
+ }
+ }
+ formatted_nationality_and_birthday: formattedNationalityAndBirthday
+ counts {
+ partner_shows: partnerShows
+ }
+ exhibition_highlights: exhibitionHighlights(size: 3) {
+ ...SelectedExhibitions_exhibitions
+ }
+ collections
+ highlights {
+ partnersConnection(
+ first: 10
+ displayOnPartnerProfile: true
+ representedBy: true
+ partnerCategory: $partnerCategory
+ ) {
+ edges {
+ node {
+ __typename
+ }
+ }
+ }
+ }
+ auctionResultsConnection(
+ recordsTrusted: true
+ first: 1
+ sort: PRICE_AND_DATE_DESC
+ ) {
+ edges {
+ node {
+ __typename
+ }
+ }
+ }
+ ...ArtistBio_bio
+ ...ArtistMarketInsights_artist
+ ...FollowArtistButton_artist
+ # The below data is only used to determine whether a section
+ # should be rendered
+ biographyBlurb: biographyBlurb(format: HTML, partnerBio: true) {
+ text
+ }
+ }
+ `,
+})
+
+export const ArtistInfoQueryRenderer = ({ artistID }: { artistID: string }) => {
+ return (
+
+ {({ relayEnvironment }) => {
+ return (
+
+ environment={relayEnvironment}
+ variables={{ artistID }}
+ query={graphql`
+ query ArtistInfoQuery($artistID: String!) {
+ artist(id: $artistID) {
+ ...ArtistInfo_artist
+ }
+ }
+ `}
+ render={renderWithLoadProgress(ArtistInfoFragmentContainer)}
+ />
+ )
+ }}
+
+ )
+}
diff --git a/src/v2/Apps/Artwork/Components/ArtworkBanner/Banner.tsx b/src/v2/Apps/Artwork/Components/ArtworkBanner/Banner.tsx
new file mode 100644
index 00000000000..6b0ef033d8c
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkBanner/Banner.tsx
@@ -0,0 +1,81 @@
+import { Avatar, Flex, Link, Sans, Serif } from "@artsy/palette"
+import { Truncator } from "v2/Components/Truncator"
+import React from "react"
+import styled from "styled-components"
+import { Media } from "v2/Utils/Responsive"
+
+export interface BannerProps {
+ /** Image for avatar */
+ imageUrl?: string
+ /** Fallback partner initials in case image is not there. */
+ initials?: string
+ /** In auction / at fair / in show */
+ meta?: string
+ /** Auction / fair / show name */
+ name?: string
+ /** Partner name */
+ subHeadline?: string
+ /** Link to auction */
+ href?: string
+}
+
+const StyledLink = styled(Link)`
+ &:hover {
+ text-decoration: none;
+ }
+`
+
+const withLink = (href: string, children: React.ReactNode) => {
+ if (href) {
+ return (
+
+ {children}
+
+ )
+ }
+
+ return children
+}
+
+export const Banner: React.SFC = props => {
+ return (
+ <>
+ {withLink(props.href,
+
+ {withLink(props.href,
+
+ )
+}
+
+export const LargeBanner = props => (
+
+
+
+ {props.meta}
+
+ {props.name}
+
+ {props.subHeadline}
+
+
+
+)
+
+export const SmallBanner = props => (
+
+
+
+ {props.meta}
+
+
+ {props.name}
+
+
+ {props.subHeadline}
+
+
+
+)
diff --git a/src/v2/Apps/Artwork/Components/ArtworkBanner/__tests__/ArtworkBanner.jest.tsx b/src/v2/Apps/Artwork/Components/ArtworkBanner/__tests__/ArtworkBanner.jest.tsx
new file mode 100644
index 00000000000..6d8fea0cebe
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkBanner/__tests__/ArtworkBanner.jest.tsx
@@ -0,0 +1,103 @@
+import { ArtworkBanner_Test_QueryRawResponse } from "v2/__generated__/ArtworkBanner_Test_Query.graphql"
+import {
+ ArtworkAuctionBannerFixture,
+ ArtworkBenefitAuctionBannerFixture,
+ ArtworkFairBannerFixture,
+ ArtworkNoBannerFixture,
+ ArtworkUpcomingShowBannerFixture,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkBanner"
+import { ArtworkBannerFragmentContainer } from "v2/Apps/Artwork/Components/ArtworkBanner"
+import { renderRelayTree } from "v2/DevTools"
+import { graphql } from "react-relay"
+
+jest.unmock("react-relay")
+
+describe("ArtworkBanner", () => {
+ const getWrapper = async (
+ response: ArtworkBanner_Test_QueryRawResponse["artwork"]
+ ) => {
+ return await renderRelayTree({
+ Component: ArtworkBannerFragmentContainer,
+ query: graphql`
+ query ArtworkBanner_Test_Query @raw_response_type {
+ artwork(id: "richard-anuszkiewicz-lino-yellow-318") {
+ ...ArtworkBanner_artwork
+ }
+ }
+ `,
+ mockData: { artwork: response } as ArtworkBanner_Test_QueryRawResponse,
+ })
+ }
+
+ let wrapper
+
+ describe("ArtworkBanner for artwork with no banner", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper(ArtworkNoBannerFixture)
+ })
+ it("renders nothing", () => {
+ const html = wrapper.html()
+ expect(html).toBeFalsy()
+ })
+ })
+
+ describe("ArtworkBanner for artwork with regular auction banner", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper(ArtworkAuctionBannerFixture)
+ })
+ it("renders a correct data for the auction", () => {
+ const html = wrapper.html()
+
+ expect(html).toContain("In auction")
+ // expect(html).toContain("Doyle: Post-War & Contemporary Art")
+ expect(html).toContain(
+ "https://d32dm0rphc51dk.cloudfront.net/teoB9Znrq-78iSh6_Vh6Og/square.jpg"
+ )
+ expect(html).toContain("Doyle")
+ })
+ })
+
+ describe("ArtworkBanner for artwork with benefit auction banner", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper(ArtworkBenefitAuctionBannerFixture)
+ })
+ it("renders a correct data for the auction", () => {
+ const html = wrapper.html()
+
+ expect(html).toContain("In auction")
+ // expect(html).toContain("BFAMI: Live Benefit Auction 2019")
+ expect(html).toContain(
+ "https://d32dm0rphc51dk.cloudfront.net/0XJ7rzO9dlu60lXl2OuH6g/square.jp"
+ )
+ expect(html).not.toContain(
+ "BFAMI: Live Benefit Auction 2019 partner name"
+ )
+ })
+ })
+
+ describe("ArtworkBanner for artwork with fair banner", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper(ArtworkFairBannerFixture)
+ })
+
+ it("renders a correct data for the fair", () => {
+ const html = wrapper.html()
+ expect(html).toContain("At fair")
+ // expect(html).toContain("West Bund Art & Design 2018")
+ expect(html).toContain("White Cube")
+ })
+ })
+
+ describe("ArtworkBanner for artwork with partner show banner", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper(ArtworkUpcomingShowBannerFixture)
+ })
+
+ it("renders a correct data for the show", () => {
+ const html = wrapper.html()
+ expect(html).toContain("In upcoming show")
+ // expect(html).toContain("Claudia Giraudo | The age of innocence")
+ expect(html).toContain("Galleria Punto Sull'Arte")
+ })
+ })
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkBanner/index.tsx b/src/v2/Apps/Artwork/Components/ArtworkBanner/index.tsx
new file mode 100644
index 00000000000..41a3e92592e
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkBanner/index.tsx
@@ -0,0 +1,157 @@
+import { ArtworkBanner_artwork } from "v2/__generated__/ArtworkBanner_artwork.graphql"
+import { ArtworkBannerQuery } from "v2/__generated__/ArtworkBannerQuery.graphql"
+import { SystemContext } from "v2/Artsy"
+import { renderWithLoadProgress } from "v2/Artsy/Relay/renderWithLoadProgress"
+import { SystemQueryRenderer as QueryRenderer } from "v2/Artsy/Relay/SystemQueryRenderer"
+import React, { useContext } from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { get } from "v2/Utils/get"
+import { Banner } from "./Banner"
+
+export interface ArtworkBannerProps {
+ artwork: ArtworkBanner_artwork
+}
+
+export const ArtworkBanner: React.SFC = props => {
+ const { context, partner, sale } = props.artwork
+
+ if (!context) {
+ return null
+ }
+
+ switch (context.__typename) {
+ case "Sale": {
+ const auctionImage = get(sale, s => s.is_auction && s.cover_image.url)
+
+ if (!sale) {
+ return null
+ }
+
+ return (
+
+ environment={relayEnvironment}
+ variables={{ artworkID }}
+ query={graphql`
+ query ArtworkBannerQuery($artworkID: String!) {
+ artwork(id: $artworkID) {
+ ...ArtworkBanner_artwork
+ }
+ }
+ `}
+ render={renderWithLoadProgress(ArtworkBannerFragmentContainer)}
+ />
+ )
+}
diff --git a/src/v2/Apps/Artwork/Components/ArtworkDetails/ArtworkDetailsAboutTheWorkFromArtsy.tsx b/src/v2/Apps/Artwork/Components/ArtworkDetails/ArtworkDetailsAboutTheWorkFromArtsy.tsx
new file mode 100644
index 00000000000..a2169fc89ed
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkDetails/ArtworkDetailsAboutTheWorkFromArtsy.tsx
@@ -0,0 +1,74 @@
+import { Box, ReadMore, Serif } from "@artsy/palette"
+import React, { Component } from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { Media } from "v2/Utils/Responsive"
+
+import { ArtworkDetailsAboutTheWorkFromArtsy_artwork } from "v2/__generated__/ArtworkDetailsAboutTheWorkFromArtsy_artwork.graphql"
+
+import { track } from "v2/Artsy/Analytics"
+import * as Schema from "v2/Artsy/Analytics/Schema"
+
+export const READ_MORE_MAX_CHARS = {
+ xs: 100,
+ default: 320,
+}
+
+export interface ArtworkDetailsAboutTheWorkFromArtsyProps {
+ artwork: ArtworkDetailsAboutTheWorkFromArtsy_artwork
+}
+
+@track({
+ context_module: Schema.ContextModule.AboutTheWork,
+})
+export class ArtworkDetailsAboutTheWorkFromArtsy extends Component<
+ArtworkDetailsAboutTheWorkFromArtsyProps
+> {
+ @track({
+ action_type: Schema.ActionType.Click,
+ flow: Schema.Flow.ArtworkAboutTheWork,
+ subject: Schema.Subject.ReadMore,
+ type: Schema.Type.Button,
+ })
+ trackReadMoreClick() {
+ // noop
+ }
+
+ renderReadMore(breakpoint?: string) {
+ const { description } = this.props.artwork
+ const xs = breakpoint === "xs"
+ const maxChars = xs ? READ_MORE_MAX_CHARS.xs : READ_MORE_MAX_CHARS.default
+
+ return (
+
+
+ {this.renderReadMore("xs")}
+ {this.renderReadMore()}
+
+
+ )
+ }
+}
+
+export const ArtworkDetailsAboutTheWorkFromArtsyFragmentContainer = createFragmentContainer(
+ ArtworkDetailsAboutTheWorkFromArtsy,
+ {
+ artwork: graphql`
+ fragment ArtworkDetailsAboutTheWorkFromArtsy_artwork on Artwork {
+ description(format: HTML)
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Artwork/Components/ArtworkDetails/ArtworkDetailsAboutTheWorkFromPartner.tsx b/src/v2/Apps/Artwork/Components/ArtworkDetails/ArtworkDetailsAboutTheWorkFromPartner.tsx
new file mode 100644
index 00000000000..a890bd199e7
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkDetails/ArtworkDetailsAboutTheWorkFromPartner.tsx
@@ -0,0 +1,201 @@
+import { filterLocations } from "v2/Apps/Artwork/Utils/filterLocations"
+import { limitWithCount } from "v2/Apps/Artwork/Utils/limitWithCount"
+import { SystemContextConsumer } from "v2/Artsy"
+import { FollowProfileButtonFragmentContainer as FollowProfileButton } from "v2/Components/FollowButton/FollowProfileButton"
+import React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { get } from "v2/Utils/get"
+import { Media } from "v2/Utils/Responsive"
+import { READ_MORE_MAX_CHARS } from "./ArtworkDetailsAboutTheWorkFromArtsy"
+
+import { ArtworkDetailsAboutTheWorkFromPartner_artwork } from "v2/__generated__/ArtworkDetailsAboutTheWorkFromPartner_artwork.graphql"
+import { data as sd } from "sharify"
+
+import { track } from "v2/Artsy/Analytics"
+import * as Schema from "v2/Artsy/Analytics/Schema"
+import Events from "v2/Utils/Events"
+
+import { Intent, ContextModule } from "@artsy/cohesion"
+import {
+ Box,
+ EntityHeader,
+ ReadMore,
+ Sans,
+ Serif,
+ Spacer,
+ StackableBorderBox,
+} from "@artsy/palette"
+import { FollowProfileButton_profile } from "v2/__generated__/FollowProfileButton_profile.graphql"
+import { openAuthToFollowSave } from "v2/Utils/openAuthModal"
+
+export interface ArtworkDetailsAboutTheWorkFromPartnerProps {
+ artwork: ArtworkDetailsAboutTheWorkFromPartner_artwork
+}
+
+@track(
+ {
+ context_module: Schema.ContextModule.AboutTheWorkPartner,
+ },
+ {
+ dispatch: data => Events.postEvent(data),
+ }
+)
+export class ArtworkDetailsAboutTheWorkFromPartner extends React.Component<
+ArtworkDetailsAboutTheWorkFromPartnerProps
+> {
+ @track({
+ action_type: Schema.ActionType.Click,
+ flow: Schema.Flow.ArtworkAboutTheWork,
+ subject: Schema.Subject.ReadMore,
+ type: Schema.Type.Button,
+ })
+ trackReadMoreClick() {
+ // noop
+ }
+
+ handleOpenAuth = (mediator, partner) => {
+ openAuthToFollowSave(mediator, {
+ entity: partner,
+ contextModule: ContextModule.aboutTheWork,
+ intent: Intent.followPartner,
+ })
+ }
+
+ renderReadMore(breakpoint?: string) {
+ const { additional_information } = this.props.artwork
+ const xs = breakpoint === "xs"
+ const maxChars = xs ? READ_MORE_MAX_CHARS.xs : READ_MORE_MAX_CHARS.default
+
+ return (
+
+ {({ user, mediator }) => {
+ return (
+
+
+
+ this.handleOpenAuth(mediator, partner)
+ }
+ render={(profile: FollowProfileButton_profile) => {
+ const is_followed = profile.is_followed || false
+ return (
+
+ {is_followed ? "Following" : "Follow"}
+
+ )
+ }}
+ >
+ Follow
+
+ )
+ }
+ />
+ {additional_information && (
+
+
+ {this.renderReadMore("xs")}
+ {this.renderReadMore()}
+
+
+ )}
+
+
+ )
+ }}
+
+ )
+ }
+}
+
+export const ArtworkDetailsAboutTheWorkFromPartnerFragmentContainer = createFragmentContainer(
+ ArtworkDetailsAboutTheWorkFromPartner,
+ {
+ artwork: graphql`
+ fragment ArtworkDetailsAboutTheWorkFromPartner_artwork on Artwork {
+ additional_information: additionalInformation(format: HTML)
+ sale {
+ isBenefit
+ isGalleryAuction
+ }
+ partner {
+ internalID
+ slug
+ type
+ href
+ name
+ initials
+ locations {
+ city
+ }
+ is_default_profile_public: isDefaultProfilePublic
+ profile {
+ ...FollowProfileButton_profile
+ slug
+ icon {
+ url(version: "square140")
+ }
+ }
+ }
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Artwork/Components/ArtworkDetails/ArtworkDetailsAdditionalInfo.tsx b/src/v2/Apps/Artwork/Components/ArtworkDetails/ArtworkDetailsAdditionalInfo.tsx
new file mode 100644
index 00000000000..5cffbd8cbb9
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkDetails/ArtworkDetailsAdditionalInfo.tsx
@@ -0,0 +1,138 @@
+import {
+ Col,
+ Grid,
+ ReadMore,
+ Row,
+ Sans,
+ StackableBorderBox,
+} from "@artsy/palette"
+import { ArtworkDetailsAdditionalInfo_artwork } from "v2/__generated__/ArtworkDetailsAdditionalInfo_artwork.graphql"
+import React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+
+import { RequestConditionReportQueryRenderer } from "./RequestConditionReport"
+
+export interface ArtworkDetailsAdditionalInfoProps {
+ artwork: ArtworkDetailsAdditionalInfo_artwork
+}
+
+export class ArtworkDetailsAdditionalInfo extends React.Component<
+ ArtworkDetailsAdditionalInfoProps
+ > {
+ render() {
+ const {
+ category,
+ series,
+ publisher,
+ manufacturer,
+ image_rights,
+ internalID,
+ canRequestLotConditionsReport,
+ framed,
+ signatureInfo,
+ conditionDescription,
+ certificateOfAuthenticity,
+ } = this.props.artwork
+
+ const listItems = [
+ {
+ title: "Medium",
+ value: category,
+ },
+ {
+ title: "Condition",
+ value: canRequestLotConditionsReport ? (
+
+
+ {displayItems.map(({ title, value }, index) => (
+
+
+ {title}
+
+
+
+ {React.isValidElement(value) ? (
+ value
+ ) : (
+
+
+
+ ))}
+
+
+ )
+ }
+}
+
+export const ArtworkDetailsAdditionalInfoFragmentContainer = createFragmentContainer(
+ ArtworkDetailsAdditionalInfo,
+ {
+ artwork: graphql`
+ fragment ArtworkDetailsAdditionalInfo_artwork on Artwork {
+ category
+ series
+ publisher
+ manufacturer
+ image_rights: imageRights
+ canRequestLotConditionsReport
+ internalID
+ framed {
+ label
+ details
+ }
+ signatureInfo {
+ label
+ details
+ }
+ conditionDescription {
+ label
+ details
+ }
+ certificateOfAuthenticity {
+ label
+ details
+ }
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Artwork/Components/ArtworkDetails/ArtworkDetailsArticles.tsx b/src/v2/Apps/Artwork/Components/ArtworkDetails/ArtworkDetailsArticles.tsx
new file mode 100644
index 00000000000..7d9decfadf4
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkDetails/ArtworkDetailsArticles.tsx
@@ -0,0 +1,63 @@
+import { Box, Col, Row } from "@artsy/palette"
+import { ArticleItem } from "v2/Apps/Artist/Routes/Articles/ArtistArticle"
+import React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { get } from "v2/Utils/get"
+
+import { ArtworkDetailsArticles_artwork } from "v2/__generated__/ArtworkDetailsArticles_artwork.graphql"
+
+export interface ArtworkDetailsArticlesProps {
+ artwork: ArtworkDetailsArticles_artwork
+}
+
+export const ArtworkDetailsArticles: React.SFC = props => {
+ const { articles } = props.artwork
+ if (!articles || articles.length < 1) {
+ return null
+ }
+ return (
+
+
+ {articles.map((article, index) => {
+ const imageUrl = get(article, p => p.thumbnail_image.resized.url)
+ return (
+
+
+
+ )
+}
+
+export const ArtworkDetailsArticlesFragmentContainer = createFragmentContainer(
+ ArtworkDetailsArticles,
+ {
+ artwork: graphql`
+ fragment ArtworkDetailsArticles_artwork on Artwork {
+ articles(size: 10) {
+ author {
+ name
+ }
+ href
+ published_at: publishedAt(format: "MMM Do, YYYY")
+ thumbnail_image: thumbnailImage {
+ resized(width: 300) {
+ url
+ }
+ }
+ thumbnail_title: thumbnailTitle
+ }
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Artwork/Components/ArtworkDetails/RequestConditionReport.tsx b/src/v2/Apps/Artwork/Components/ArtworkDetails/RequestConditionReport.tsx
new file mode 100644
index 00000000000..8dd7c184643
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkDetails/RequestConditionReport.tsx
@@ -0,0 +1,268 @@
+import {
+ Button,
+ Col,
+ Link,
+ Modal,
+ Row,
+ Sans,
+ Serif,
+ Spinner,
+} from "@artsy/palette"
+import React, { useState } from "react"
+import { commitMutation, createFragmentContainer, graphql } from "react-relay"
+
+import {
+ AnalyticsSchema as Schema,
+ track,
+ useSystemContext,
+ useTracking,
+} from "v2/Artsy"
+import { SystemQueryRenderer as QueryRenderer } from "v2/Artsy/Relay/SystemQueryRenderer"
+import { ErrorModal } from "v2/Components/Modal/ErrorModal"
+import createLogger from "v2/Utils/logger"
+import { openAuthModal } from "v2/Utils/openAuthModal"
+
+import { ContextModule, Intent } from "@artsy/cohesion"
+import { RequestConditionReport_artwork } from "v2/__generated__/RequestConditionReport_artwork.graphql"
+import { RequestConditionReport_me } from "v2/__generated__/RequestConditionReport_me.graphql"
+import {
+ RequestConditionReportMutation,
+ RequestConditionReportMutationResponse,
+} from "v2/__generated__/RequestConditionReportMutation.graphql"
+import { RequestConditionReportQuery } from "v2/__generated__/RequestConditionReportQuery.graphql"
+import { ModalType } from "v2/Components/Authentication/Types"
+
+const logger = createLogger(
+ "Apps/Artwork/Components/ArtworkDetails/RequestConditionReport"
+)
+
+interface RequestConditionReportProps {
+ artwork: RequestConditionReport_artwork
+ me: RequestConditionReport_me
+}
+
+export const RequestConditionReport: React.FC = props => {
+ const { mediator, relayEnvironment } = useSystemContext()
+ const { trackEvent } = useTracking()
+
+ const [requesting, setRequesting] = useState(false)
+ const [showRequestedModal, setShowRequestedModal] = useState(false)
+ const [showErrorModal, setShowErrorModal] = useState(false)
+
+ const { me, artwork } = props
+ const isLoggedIn = Boolean(me)
+
+ const requestConditionReport = () => {
+ return new Promise(
+ async (resolve, reject) => {
+ commitMutation(relayEnvironment, {
+ onCompleted: data => {
+ resolve(data)
+ },
+ onError: error => {
+ reject(error)
+ },
+ mutation: graphql`
+ mutation RequestConditionReportMutation(
+ $input: RequestConditionReportInput!
+ ) {
+ requestConditionReport(input: $input) {
+ conditionReportRequest {
+ internalID
+ }
+ }
+ }
+ `,
+ variables: {
+ input: { saleArtworkID: artwork.saleArtwork.internalID },
+ },
+ })
+ }
+ )
+ }
+
+ const handleMutationError = (error: Error) => {
+ logger.error(error)
+
+ setRequesting(false)
+ setShowErrorModal(true)
+ }
+
+ function trackRequestClick() {
+ trackEvent({
+ action_type: Schema.ActionType.ClickedRequestConditionReport,
+ subject: Schema.Subject.RequestConditionReport,
+ })
+ }
+
+ const handleLoginClick = () => {
+ // TODO: do we need this tracking?
+ trackEvent({
+ action_type: Schema.ActionType.Click,
+ subject: Schema.Subject.Login,
+ sale_artwork_id: artwork.saleArtwork.internalID,
+ })
+ openAuthModal(mediator, {
+ mode: ModalType.login,
+ redirectTo: location.href,
+ contextModule: ContextModule.aboutTheWork,
+ intent: Intent.requestConditionReport,
+ })
+ }
+
+ const handleRequestConditionReportClick = () => {
+ setRequesting(true)
+ trackRequestClick()
+
+ requestConditionReport()
+ .then(data => {
+ if (data.requestConditionReport) {
+ setRequesting(false)
+ setShowRequestedModal(true)
+ } else {
+ handleMutationError(new Error("Unknown error"))
+ }
+ })
+ .catch(error => {
+ handleMutationError(error)
+ })
+ }
+
+ const UnauthenticatedContent: React.FC = () => (
+ <>
+
+ Log in
+
+
+ to request
+
+
+ )
+
+ const AuthenticatedContent: React.FC = () => (
+
+ {requesting ?
+ )
+
+ const RequestedConditionReportModal: React.FC = () => (
+ {
+ setShowRequestedModal(false)
+ }}
+ show={showRequestedModal}
+ >
+
+ We have received your request. The condition report will be sent to{" "}
+ {me && me.email}.
+
+
+
+ For questions, contact{" "}
+
+
+ setShowRequestedModal(false)}>
+ OK
+
+
+ )
+
+ return (
+ <>
+
+
+ {
+ setShowErrorModal(false)
+ }}
+ />
+
+ )
+}
+
+const TrackingWrappedRequestConditionReport: React.FC = track<
+ RequestConditionReportProps
+>(props => {
+ return {
+ context_page: Schema.PageName.ArtworkPage,
+ context_module: Schema.ContextModule.AboutTheWorkCondition,
+ context_page_owner_id: props.artwork.internalID,
+ context_page_owner_slug: props.artwork.slug,
+ context_page_owner_type: "Artwork",
+ sale_artwork_id: props.artwork.saleArtwork.internalID,
+ }
+})(RequestConditionReport)
+
+export const RequestConditionReportQueryRenderer: React.FC<{
+ artworkID: string
+}> = ({ artworkID }) => {
+ const { relayEnvironment } = useSystemContext()
+
+ return (
+
+ environment={relayEnvironment}
+ variables={{ artworkID }}
+ query={graphql`
+ query RequestConditionReportQuery($artworkID: String!) {
+ me {
+ ...RequestConditionReport_me
+ }
+
+ artwork(id: $artworkID) {
+ ...RequestConditionReport_artwork
+ }
+ }
+ `}
+ render={({ props }) => {
+ if (props) {
+ return (
+
+
+ )
+ },
+ query: graphql`
+ query ArtworkDetails_Test_Query @raw_response_type {
+ artwork(id: "richard-prince-untitled-fashion") {
+ ...ArtworkDetails_artwork
+ }
+ }
+ `,
+ wrapper: n => {n} ,
+ mockData: { artwork: response } as ArtworkDetails_Test_QueryRawResponse,
+ })
+ }
+ let wrapper
+
+ describe("ArtworkDetailsAdditionalInfo for a live sale artwork", () => {
+ it("displays a request lot condition report button when canRequestLotConditionsReport is true", async () => {
+ wrapper = await getWrapper({
+ ...ArtworkDetailsFixture,
+ canRequestLotConditionsReport: true,
+ })
+
+ expect(wrapper.html()).toContain("Condition")
+ expect(wrapper.html()).not.toContain(
+ "Slight discoloration from sun exposure"
+ )
+ })
+
+ it("display condition description when canRequestLotConditionsReport is false but has condition description", async () => {
+ wrapper = await getWrapper({
+ ...ArtworkDetailsFixture,
+ canRequestLotConditionsReport: false,
+ conditionDescription: {
+ label: "Condition details",
+ details: "Slight discoloration from sun exposure",
+ },
+ })
+
+ expect(wrapper.html()).toContain("Condition")
+ expect(wrapper.html()).toContain("Slight discoloration from sun exposure")
+ })
+
+ it("does not display the condition section at all when canRequestLotConditionsReport is false and condition Description is missing", async () => {
+ wrapper = await getWrapper({
+ ...ArtworkDetailsFixture,
+ canRequestLotConditionsReport: false,
+ conditionDescription: null,
+ })
+
+ expect(wrapper.html()).not.toContain("Condition")
+ })
+ })
+
+ describe("ArtworkDetails for a gallery artwork that is missing some fields", () => {
+ it("renders additional info with just what is present", async () => {
+ wrapper = await getWrapper({
+ ...ArtworkDetailsFixture,
+ series: null,
+ publisher: null,
+ manufacturer: null,
+ image_rights: null,
+ framed: null,
+ })
+ expect(wrapper.html()).toContain("Medium")
+ expect(wrapper.html()).toContain("Signature")
+ expect(wrapper.html()).toContain("Condition")
+ expect(wrapper.html()).toContain("Certificate of authenticity")
+ expect(
+ wrapper.find("ArtworkDetailsAdditionalInfo").find("Row").length
+ ).toBe(4)
+ })
+ })
+
+ it("Does not render the additional details section for an artwork who has no metadata", async () => {
+ const emptyData = {
+ ...ArtworkDetailsFixture,
+ category: null,
+ series: null,
+ publisher: null,
+ manufacturer: null,
+ image_rights: null,
+ framed: null,
+ signatureInfo: null,
+ conditionDescription: null,
+ certificateOfAuthenticity: null,
+ }
+
+ const emptyDataWrapper = await getWrapper(emptyData)
+ expect(
+ emptyDataWrapper.find("ArtworkDetailsAdditionalInfo").find("Row").length
+ ).toBe(0)
+ })
+
+ describe("ArtworkDetails for gallery artwork with complete details", () => {
+ it("renders a correct component tree", async () => {
+ wrapper = await getWrapper()
+ const html = wrapper.html()
+ expect(html).toContain("About the work")
+ expect(html).toContain("Following")
+ expect(html).toContain("Articles")
+ expect(html).toContain("Exhibition history")
+ expect(html).toContain("Bibliography")
+ expect(html).toContain("Provenance")
+ })
+ })
+
+ describe("ArtworkDetailsAboutTheWorkFromPartner", () => {
+ it("displays partner name", async () => {
+ wrapper = await getWrapper()
+ expect(wrapper.html()).toContain("Salon 94")
+ })
+
+ it("displays partner icon when info is available", async () => {
+ wrapper = await getWrapper()
+ expect(wrapper.find("img").prop("src")).toContain("https://profile_url")
+ })
+
+ it("displays partner Initials when profile is present but icon is not", async () => {
+ wrapper = await getWrapper({
+ ...ArtworkDetailsFixture,
+ partner: {
+ ...ArtworkDetailsFixture.partner,
+ profile: {
+ ...ArtworkDetailsFixture.partner.profile,
+ icon: null,
+ },
+ },
+ })
+ expect(wrapper.find("img").length).toBe(0)
+ expect(wrapper.html()).toContain("S9")
+ })
+
+ it("does not display partner Icon if artwork is from benefit auction", async () => {
+ wrapper = await getWrapper({
+ ...ArtworkDetailsFixture,
+ sale: {
+ id: "opaque-sale-id",
+ isBenefit: true,
+ isGalleryAuction: false,
+ },
+ })
+ expect(wrapper.find("img").length).toBe(0)
+ expect(wrapper.html()).not.toContain("S9")
+ })
+
+ it("does not display partner Icon if artwork is from gallery auction", async () => {
+ wrapper = await getWrapper({
+ ...ArtworkDetailsFixture,
+ sale: {
+ id: "opaque-sale-id",
+ isBenefit: false,
+ isGalleryAuction: true,
+ },
+ })
+ expect(wrapper.find("img").length).toBe(0)
+ expect(wrapper.html()).not.toContain("S9")
+ })
+
+ it("displays partner additional_information for artwork", async () => {
+ wrapper = await getWrapper()
+ expect(wrapper.html()).toContain(
+ "Here is some addition info for this work
\n"
+ )
+ })
+
+ it("does not display avatar when profile is not available and no initials for partner", async () => {
+ wrapper = await getWrapper({
+ ...ArtworkDetailsFixture,
+ partner: {
+ ...ArtworkDetailsFixture.partner,
+ profile: null,
+ initials: null,
+ },
+ })
+ expect(wrapper.find("img").length).toBe(0)
+ // This checks that Avatar div is not rendered.
+ expect(wrapper.find("EntityHeader").children.length).toBe(1)
+ })
+
+ it("renders truncated list of partner locations", async () => {
+ wrapper = await getWrapper()
+ expect(wrapper.html()).toContain("New York, Kharkov, +2 more")
+ })
+
+ it("renders partner follow button for regular partner with profile", async () => {
+ wrapper = await getWrapper({
+ ...ArtworkDetailsFixture,
+ partner: {
+ ...ArtworkDetailsFixture.partner,
+ type: "NOT Auction House",
+ },
+ })
+ expect(wrapper.html()).toContain("Following")
+ })
+
+ it("does not render partner follow button if artwork is from an auction partner", async () => {
+ wrapper = await getWrapper({
+ ...ArtworkDetailsFixture,
+ partner: {
+ ...ArtworkDetailsFixture.partner,
+ type: "Auction House",
+ },
+ })
+ expect(wrapper.html()).not.toContain("Following")
+ })
+
+ it("works without a partner", async () => {
+ wrapper = await getWrapper({
+ ...ArtworkDetailsFixture,
+ partner: null,
+ })
+ expect(wrapper).toBeTruthy()
+ })
+ })
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkDetails/__tests__/ArtworkDetailsAboutTheWorkFromPartner.jest.tsx b/src/v2/Apps/Artwork/Components/ArtworkDetails/__tests__/ArtworkDetailsAboutTheWorkFromPartner.jest.tsx
new file mode 100644
index 00000000000..b78fabc5758
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkDetails/__tests__/ArtworkDetailsAboutTheWorkFromPartner.jest.tsx
@@ -0,0 +1,3 @@
+xit("opens auth modal with expected args when following an artist", () => {
+ // TODO
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkDetails/__tests__/RequestConditionReport.jest.tsx b/src/v2/Apps/Artwork/Components/ArtworkDetails/__tests__/RequestConditionReport.jest.tsx
new file mode 100644
index 00000000000..9eef3cbca44
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkDetails/__tests__/RequestConditionReport.jest.tsx
@@ -0,0 +1,126 @@
+import React from "react"
+import { graphql } from "react-relay"
+
+import { createTestEnv } from "v2/DevTools/createTestEnv"
+
+import { RequestConditionReportQueryResponse } from "v2/__generated__/RequestConditionReportQuery.graphql"
+import { AnalyticsSchema as Schema } from "v2/Artsy"
+import { RequestConditionReportFragmentContainer } from "../RequestConditionReport"
+import { RequestConditionReportTestPage } from "./Utils/RequestConditionReportTestPage"
+
+jest.unmock("react-relay")
+jest.unmock("react-tracking")
+jest.mock("v2/Utils/Events", () => ({
+ postEvent: jest.fn(),
+}))
+const mockPostEvent = require("v2/Utils/Events").postEvent as jest.Mock
+
+const mediator = {
+ trigger: jest.fn(),
+}
+
+const setupTestEnv = () => {
+ return createTestEnv({
+ TestPage: RequestConditionReportTestPage,
+ Component: (props: RequestConditionReportQueryResponse) => (
+ {
+ @track((_props, _state, [{ data }]) => {
+ return {
+ flow: Schema.Flow.ArtworkAboutTheArtist,
+ type: Schema.Type.Tab,
+ label: data.trackingLabel,
+ action_type: Schema.ActionType.Click,
+ }
+ })
+ trackTabChange() {
+ // noop
+ }
+
+ render() {
+ const { artwork } = this.props
+ return (
+
+
+
+
+ {artwork.articles && artwork.articles.length && (
+
+
+ )}
+ {artwork.exhibition_history && (
+
+
+ )}
+ {artwork.literature && (
+
+
+ )}
+ {artwork.provenance && (
+
+
+ )}
+
+
+ )
+ }
+}
+
+export const ArtworkDetailsFragmentContainer = createFragmentContainer(
+ ArtworkDetails,
+ {
+ artwork: graphql`
+ fragment ArtworkDetails_artwork on Artwork {
+ ...ArtworkDetailsAboutTheWorkFromArtsy_artwork
+ ...ArtworkDetailsAboutTheWorkFromPartner_artwork
+ ...ArtworkDetailsAdditionalInfo_artwork
+ ...ArtworkDetailsArticles_artwork
+ articles(size: 10) {
+ slug
+ }
+ literature(format: HTML)
+ exhibition_history: exhibitionHistory(format: HTML)
+ provenance(format: HTML)
+ }
+ `,
+ }
+)
+
+export const ArtworkDetailsQueryRenderer = ({
+ artworkID,
+}: {
+ artworkID: string
+}) => {
+ const { relayEnvironment } = useContext(SystemContext)
+
+ return (
+
+ environment={relayEnvironment}
+ variables={{ artworkID }}
+ query={graphql`
+ query ArtworkDetailsQuery($artworkID: String!) {
+ artwork(id: $artworkID) {
+ ...ArtworkDetails_artwork
+ }
+ }
+ `}
+ render={renderWithLoadProgress(ArtworkDetailsFragmentContainer)}
+ />
+ )
+}
+
+// For block-level HTML (CMS) tab content collapse the first element's top margin
+// so that content properly aligns to the top of the container.
+const TabContainer = styled(Box)`
+ > * {
+ margin-block-start: 0;
+ }
+`
+
+const ArtworkDetailsContainer = TabContainer
+const ExhibitionHistory = TabContainer
+const Literature = TabContainer
+const Provenance = TabContainer
diff --git a/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/ArtworkActions.tsx b/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/ArtworkActions.tsx
new file mode 100644
index 00000000000..8d99a171e60
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/ArtworkActions.tsx
@@ -0,0 +1,474 @@
+import { ArtworkActions_artwork } from "v2/__generated__/ArtworkActions_artwork.graphql"
+import { Mediator, SystemContext } from "v2/Artsy"
+import { track } from "v2/Artsy/Analytics"
+import * as Schema from "v2/Artsy/Analytics/Schema"
+import SaveButton, { SaveProps, SaveState } from "v2/Components/Artwork/Save"
+import { compact } from "lodash"
+import { isNull } from "lodash"
+import React, { useContext } from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { data as sd } from "sharify"
+import styled from "styled-components"
+import { slugify } from "underscore.string"
+import { Media } from "v2/Utils/Responsive"
+import { ArtworkSharePanelFragmentContainer as ArtworkSharePanel } from "./ArtworkSharePanel"
+
+import { ContextModule } from "@artsy/cohesion"
+import {
+ BellFillIcon,
+ BellIcon,
+ color,
+ DownloadIcon,
+ EditIcon,
+ Flex,
+ GenomeIcon,
+ HeartFillIcon,
+ HeartIcon,
+ Join,
+ Link,
+ MoreIcon,
+ OpenEyeIcon,
+ Sans,
+ ShareIcon,
+ Spacer,
+} from "@artsy/palette"
+import { userIsAdmin } from "v2/Utils/user"
+import { ArtworkPopoutPanel } from "./ArtworkPopoutPanel"
+
+interface ArtworkActionsProps {
+ artwork: ArtworkActions_artwork
+ user?: User
+ mediator?: Mediator
+ selectDefaultSlide(): void
+}
+
+interface ArtworkActionsState {
+ showSharePanel: boolean
+ showMorePanel: boolean
+}
+
+@track()
+export class ArtworkActions extends React.Component<
+ArtworkActionsProps,
+ArtworkActionsState
+> {
+ state = {
+ showSharePanel: false,
+ showMorePanel: false,
+ }
+
+ @track({
+ flow: Schema.Flow.ArtworkShare,
+ action_type: Schema.ActionType.Click,
+ context_module: Schema.ContextModule.ShareButton,
+ type: Schema.Type.Button,
+ })
+ toggleSharePanel() {
+ const showSharePanel = !this.state.showSharePanel
+ this.setState({
+ showSharePanel,
+ showMorePanel: false,
+ })
+ }
+
+ toggleMorePanel() {
+ const showMorePanel = !this.state.showMorePanel
+ this.setState({ showMorePanel, showSharePanel: false })
+ }
+
+ get isAdmin() {
+ return userIsAdmin(this.props.user)
+ }
+
+ getDownloadableImageUrl() {
+ const {
+ artwork: { is_downloadable, href, artists, title, date },
+ } = this.props
+
+ if (is_downloadable || this.isAdmin) {
+ const artistNames = artists.map(({ name }) => name).join(", ")
+ const filename = slugify(compact([artistNames, title, date]).join(" "))
+ const downloadableImageUrl = `${href}/download/${filename}.jpg` // prettier-ignore
+ return downloadableImageUrl
+ }
+ }
+
+ @track({
+ flow: Schema.Flow.ArtworkViewInRoom,
+ action_type: Schema.ActionType.Click,
+ context_module: Schema.ContextModule.ViewInRoom,
+ type: Schema.Type.Button,
+ })
+ openViewInRoom() {
+ this.props.selectDefaultSlide()
+
+ setTimeout(() => {
+ const {
+ artwork: { dimensions, image },
+ mediator,
+ } = this.props
+
+ mediator &&
+ mediator.trigger &&
+ mediator.trigger("openViewInRoom", {
+ dimensions,
+ image,
+ })
+ }, 300)
+ }
+
+ renderSaveButton() {
+ return (
+ this.openViewInRoom()}
+ label="View in room"
+ />
+ )
+ }
+
+ renderShareButton() {
+ return (
+
+
+
+ {showableActions.map(action => {
+ return (
+ {action.renderer.bind(this)()}
+ )
+ })}
+
+
+
+
+
+ {initialActions.map(action => {
+ return (
+ {action.renderer.bind(this)()}
+ )
+ })}
+
+ {moreActions && moreActions.length > 0 && (
+
+
+
+
+ {this.state.showSharePanel && (
+
+
+ {moreActions.map(action => {
+ return (
+
+ {action.renderer.bind(this)()}
+
+ )
+ })}
+
+
+ )}
+
+
+ )
+ }
+}
+
+export const ArtworkActionsFragmentContainer = createFragmentContainer(
+ (props: ArtworkActionsProps) => {
+ const { user, mediator } = useContext(SystemContext)
+ return this.setState({ hovered: true })}
+ onMouseOut={() =>
+ this.setState({
+ hovered: false,
+ })
+ }
+ onClick={onClick}
+ >
+ {href ? (
+
+
+ {label}
+
+ )}
+
+ ) : (
+ <>
+
+ {label}
+
+ )}
+
+ )}
+
+ )
+ }
+}
+
+const UtilButtonLink = styled(Link)`
+ display: flex;
+
+ &:hover {
+ color: ${color("purple100")} !important;
+ text-decoration: none !important;
+ }
+`
+
+const UtilButtonContainer = styled(Flex)`
+ cursor: pointer;
+ justify-content: center;
+
+ &:hover {
+ color: ${color("purple100")};
+ }
+`
+
+const Container = styled(Flex).attrs({
+ justifyContent: "center",
+ mb: 2,
+ ml: 0.5,
+ pt: 3,
+})`
+ position: relative;
+ user-select: none;
+`
+
+/**
+ * Custom renderer for SaveButton
+ */
+const Save = (actionProps: ArtworkActionsProps) => (
+ props: SaveProps,
+ state: SaveState
+) => {
+ // Grab props from ArtworkActions to check if sale is open
+ const { sale } = actionProps.artwork
+ const isOpenSale = sale && sale.is_auction && !sale.is_closed
+
+ // Check if saved by evaluating props from SaveButton
+ const isSaved = isNull(state.is_saved)
+ ? props.artwork.is_saved
+ : state.is_saved
+
+ // If an Auction, use Bell (for notifications); if a standard artwork use Heart
+ if (isOpenSale) {
+ const FilledIcon = () =>
+
+
+
+
+ )
+}
+
+export class LargeArtworkImageBrowser extends React.Component<
+ ArtworkBrowserProps
+ > {
+ render() {
+ const hasMultipleImages = this.props.images.length > 1
+ const { imageAlt, images, setCarouselRef } = this.props
+
+ // FIXME: During SSR pass want to hide other images. Work around for lack
+ // of SSR support in Flickity.
+ const carouselImages = typeof window === "undefined" ? [images[0]] : images
+
+ const options = {
+ prevNextButtons: false,
+ wrapAround: true,
+ pageDots: hasMultipleImages,
+ cellAlign: "left",
+ draggable: false,
+ lazyLoad: true,
+ }
+
+ // The maxHeight was added in order to fix how Google bot renders the page
+ return (
+
+ (
+ {
+ // FIXME: Flickity.prototype.previous typing is missing second
+ // `isInstant` method.
+ // @ts-ignore
+ flickity.previous(false, true)
+ }}
+ />
+
+ )}
+ renderRightArrow={({ flickity }) => (
+ {
+ // FIXME: Flickity.prototype.next typing is missing second
+ // `isInstant` method.
+ // @ts-ignore
+ flickity.next(false, true)
+ }}
+ />
+
+ )}
+ // maxHeight is needed for google search indexing
+ render={(image: Image) => {
+ return (
+
+
+ )
+ }}
+ />
+
+ )
+ }
+}
+
+export class SmallArtworkImageBrowser extends React.Component<
+ ArtworkBrowserProps
+ > {
+ render() {
+ const { images, imageAlt, setCarouselRef } = this.props
+ // FIXME: During SSR pass want to hide other images. Work around for lack
+ // of SSR support in Flickity.
+ const carouselImages = typeof window === "undefined" ? [images[0]] : images
+ const hasMultipleImages = this.props.images.length > 1
+ const options = {
+ prevNextButtons: false,
+ wrapAround: true,
+ draggable: hasMultipleImages,
+ groupCells: 1,
+ pageDots: hasMultipleImages,
+ }
+
+ // The maxHeight was added in order to fix how Google bot renders the page
+ return (
+
+ {
+ return (
+
+
+ )
+ }}
+ />
+
+ )
+ }
+}
+
+const ArrowButton = ({ direction, onClick }) => {
+ return (
+
+
+ )
+}
+
+const ArrowButtonContainer = styled(Flex)`
+ cursor: pointer;
+ opacity: 0.1;
+ transition: opacity 0.25s;
+
+ &:hover {
+ opacity: 1;
+ }
+`
+
+const Container = styled(Box)`
+ user-select: none;
+
+ .flickity-viewport {
+ overflow: hidden;
+ }
+
+ .flickity-slider > div {
+ margin-left: 5px;
+ margin-right: 5px;
+ width: 100%;
+ }
+
+ .flickity-page-dots {
+ text-align: center;
+ height: 0;
+ padding-top: ${space(1)}px;
+
+ .dot {
+ width: 4px;
+ height: 4px;
+ border-radius: 100%;
+ display: inline-block;
+ margin: ${space(0.5)}px;
+ background-color: ${color("black10")};
+ }
+
+ .dot.is-selected {
+ background-color: ${color("black100")};
+ }
+ }
+`
+
+const PageIndicator = styled.span`
+ &::after {
+ content: "•";
+ }
+`
+
+// @ts-ignore
+PageIndicator.displayName = "PageIndicator"
diff --git a/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/ArtworkPopoutPanel.tsx b/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/ArtworkPopoutPanel.tsx
new file mode 100644
index 00000000000..9c3d58142be
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/ArtworkPopoutPanel.tsx
@@ -0,0 +1,46 @@
+import { Box, color, Flex, Sans, space } from "@artsy/palette"
+import Icon from "v2/Components/Icon"
+import React from "react"
+import styled from "styled-components"
+
+interface ArtworkPopoutPanelProps {
+ onClose: () => void
+ title: string
+}
+
+export class ArtworkPopoutPanel extends React.Component<
+ ArtworkPopoutPanelProps
+ > {
+ render() {
+ return (
+
+
+
+
+
+
+ {this.props.title}
+
+
+ {this.props.children}
+
+
+ )
+ }
+}
+
+const Container = styled.div`
+ position: absolute;
+ width: 300px;
+ bottom: 40px;
+ border-radius: 2px;
+ background-color: #ffffff;
+ box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
+`
+
+const CloseIcon = styled(Icon)`
+ color: ${color("black30")};
+ cursor: pointer;
+ font-size: 12px;
+`
diff --git a/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/ArtworkSharePanel.tsx b/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/ArtworkSharePanel.tsx
new file mode 100644
index 00000000000..c43dedf8053
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/ArtworkSharePanel.tsx
@@ -0,0 +1,233 @@
+import { color, Flex, media, Sans, Separator } from "@artsy/palette"
+import { ArtworkSharePanel_artwork } from "v2/__generated__/ArtworkSharePanel_artwork.graphql"
+import Icon from "v2/Components/Icon"
+import React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { data as sd } from "sharify"
+import styled from "styled-components"
+import { ArtworkPopoutPanel } from "./ArtworkPopoutPanel"
+
+interface ArtworkSharePanelProps {
+ artwork: ArtworkSharePanel_artwork
+ onClose: () => void
+}
+
+interface ArtworkSharePanelState {
+ copyLabelText: string
+ copyLocked: boolean
+}
+
+const MODAL = {
+ width: 750,
+ height: 400,
+}
+
+const COPY_LABELS = {
+ copy: "Copy",
+ copied: "Copied",
+}
+
+export class ArtworkSharePanel extends React.Component<
+ ArtworkSharePanelProps,
+ ArtworkSharePanelState
+ > {
+ private input: HTMLInputElement
+
+ state = {
+ copyLabelText: COPY_LABELS.copy,
+ copyLocked: false,
+ }
+
+ handleCopy = () => {
+ if (!this.state.copyLocked) {
+ this.input.focus()
+ this.input.setSelectionRange(0, this.input.value.length)
+ document.execCommand("copy")
+
+ this.setState(
+ {
+ copyLabelText: COPY_LABELS.copied,
+ copyLocked: true,
+ },
+ () => {
+ setTimeout(() => {
+ this.setState({
+ copyLabelText: COPY_LABELS.copy,
+ copyLocked: false,
+ })
+ }, 500)
+ }
+ )
+ }
+ }
+
+ openShareModal = ({ service, url }) => event => {
+ event.preventDefault()
+
+ // Extracted from https://github.com/artsy/force/blob/master/src/desktop/components/share/view.coffee#L19
+ const wLeft = window.screenLeft || window.screenX
+ const wTop = window.screenTop || window.screenY
+ const width = MODAL.width
+ const height = MODAL.height
+ const left = wLeft + window.innerWidth / 2 - width / 2 || 0
+ const top = wTop + window.innerHeight / 2 - height / 2 || 0
+
+ const options = Object.entries({
+ status: 1,
+ width,
+ height,
+ top,
+ left,
+ })
+ .map(([key, value]) => `${key}=${value}`)
+ .join(",")
+
+ window.open(url, service, options)
+ }
+
+ renderShareButton({ service, label, message, url }) {
+ return (
+
+
+ {label}
+
+
+ )
+ }
+
+ render() {
+ const {
+ artwork: {
+ href,
+ artworkMeta: { share },
+ images,
+ },
+ } = this.props
+
+ const shareImageUrl = images && images[0].url
+ const url = sd.APP_URL + href
+
+ return (
+
+
+
+ (this.input = input)}
+ onClick={this.handleCopy}
+ />
+
+
+ {this.state.copyLabelText}
+
+
+
+ {this.renderShareButton({
+ service: "facebook",
+ label: "Facebook",
+ message: "Post to Facebook",
+ url: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
+ })}
+ {this.renderShareButton({
+ service: "twitter",
+ label: "Twitter",
+ message: "Share on Twitter",
+ url: `https://twitter.com/intent/tweet?original_referer=${url}&text=${share}&url=${url}&via=artsy`,
+ })}
+
+ {/*
+ NOTE: Safari requires direct user interaction.
+ See: https://developer.apple.com/safari/technology-preview/release-notes/#r15
+ */}
+
+
+
+ Mail
+
+
+
+
+ {this.renderShareButton({
+ service: "pinterest",
+ label: "Pinterest",
+ message: "Pin It on Pinterest",
+ url: `https://pinterest.com/pin/create/button/?url=${url}&media=${shareImageUrl}&description=${share}`,
+ })}
+ {this.renderShareButton({
+ service: "tumblr",
+ label: "Tumblr",
+ message: "",
+ url: `https://www.tumblr.com/share/photo?source=${shareImageUrl}&caption=${share}&clickthru=${url}`,
+ })}
+
+
+ )
+ }
+}
+
+export const ArtworkSharePanelFragmentContainer = createFragmentContainer(
+ ArtworkSharePanel,
+ {
+ artwork: graphql`
+ fragment ArtworkSharePanel_artwork on Artwork {
+ href
+ images {
+ url
+ }
+ artworkMeta: meta {
+ share
+ }
+ }
+ `,
+ }
+)
+
+const SansGrow = styled(Sans)`
+ display: flex;
+ flex-grow: 1;
+`
+
+const URLInput = styled.input`
+ border: 0;
+ text-overflow: ellipsis;
+ display: flex;
+ flex-grow: 1;
+ color: inherit;
+ font-family: Arial, Helvetica, sans-serif;
+
+ ${media.xs`
+ font-size: 16px;
+ `};
+
+ &:hover {
+ color: ${color("black100")};
+ }
+
+ &::selection {
+ color: ${color("white100")};
+ background: ${color("purple100")};
+ }
+`
+
+const UnstyledLink = styled.a`
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: none;
+ }
+`
diff --git a/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/__stories__/ArtworkActions.story.tsx b/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/__stories__/ArtworkActions.story.tsx
new file mode 100644
index 00000000000..00b5a63a3bc
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/__stories__/ArtworkActions.story.tsx
@@ -0,0 +1,60 @@
+import { Flex } from "@artsy/palette"
+import { FullArtworkFixture } from "v2/Apps/__tests__/Fixtures/Artwork/FullArtwork.fixture"
+import { MockRelayRenderer } from "v2/DevTools"
+import { cloneDeep } from "lodash"
+import React from "react"
+import { graphql } from "react-relay"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+import { ArtworkActionsFragmentContainer } from "../ArtworkActions"
+
+const ArtworkActionsAuctionFixture = { artwork: cloneDeep(FullArtworkFixture) }
+ArtworkActionsAuctionFixture.artwork.sale = {
+ is_closed: false,
+ is_auction: true,
+}
+
+const ArtworkActionsNonAdminFixture = {
+ artwork: cloneDeep(FullArtworkFixture),
+ user: { type: null },
+}
+ArtworkActionsNonAdminFixture.user.type = "User"
+
+const MockArtworkActions = ({ artwork }) => {
+ return (
+
+ {children}
+
+ ),
+ })
+ }
+
+ it("renders proper components for an admin", async () => {
+ const wrapper = await getWrapper()
+ expect(wrapper.find(EditIcon).length).toBe(1)
+ expect(wrapper.find(GenomeIcon).length).toBe(1)
+ expect(wrapper.find(MoreIcon).length).toBe(0)
+ })
+
+ it("renders proper components for a non-admin", async () => {
+ const data = cloneDeep(ArtworkActionsFixture)
+ data.user.type = "User"
+ const wrapper = await getWrapper("lg", data)
+ expect(wrapper.find(HeartFillIcon).length).toBe(1)
+ expect(wrapper.find(ShareIcon).length).toBe(1)
+ expect(wrapper.find(OpenEyeIcon).length).toBe(1)
+ expect(wrapper.find(DownloadIcon).length).toBe(1)
+ expect(wrapper.find(EditIcon).length).toBe(0)
+ expect(wrapper.find(GenomeIcon).length).toBe(0)
+ expect(wrapper.find(MoreIcon).length).toBe(0)
+ })
+
+ describe("concerning SaveButton states icon states", () => {
+ it("renders heart icon when not sale", async () => {
+ const data = {
+ ...ArtworkActionsFixture,
+ artwork: {
+ ...ArtworkActionsFixture.artwork,
+ sale: null,
+ },
+ }
+ const wrapper = await getWrapper("lg", data)
+ expect(wrapper.find(HeartFillIcon).length).toBe(1)
+ expect(wrapper.find(BellFillIcon).length).toBe(0)
+ })
+
+ it("renders heart icon when sale is closed", async () => {
+ const data = {
+ ...ArtworkActionsFixture,
+ artwork: {
+ ...ArtworkActionsFixture.artwork,
+ sale: {
+ ...ArtworkActionsFixture.artwork.sale,
+ is_closed: true,
+ },
+ },
+ }
+ const wrapper = await getWrapper("lg", data)
+ expect(wrapper.find(HeartFillIcon).length).toBe(1)
+ expect(wrapper.find(BellFillIcon).length).toBe(0)
+ })
+
+ it("renders bell icon when sale is open", async () => {
+ const data = {
+ ...ArtworkActionsFixture,
+ artwork: {
+ ...ArtworkActionsFixture.artwork,
+ sale: {
+ ...ArtworkActionsFixture.artwork.sale,
+ is_auction: true,
+ is_closed: false,
+ },
+ },
+ }
+ const wrapper = await getWrapper("lg", data)
+ expect(wrapper.find(HeartFillIcon).length).toBe(0)
+ expect(wrapper.find(BellFillIcon).length).toBe(1)
+ })
+ })
+
+ describe("view in a room", () => {
+ it("available for artworks that are hangable", async () => {
+ const data = {
+ ...ArtworkActionsFixture,
+ artwork: {
+ ...ArtworkActionsFixture.artwork,
+ is_hangable: true,
+ },
+ user: {
+ ...ArtworkActionsFixture.user,
+ type: "Admin",
+ },
+ }
+ const wrapper = await getWrapper("lg", data)
+ expect(wrapper.find(OpenEyeIcon).length).toBe(1)
+ })
+
+ it("is not available for non hangable artworks", async () => {
+ const data = {
+ ...ArtworkActionsFixture,
+ artwork: {
+ ...ArtworkActionsFixture.artwork,
+ is_hangable: false,
+ },
+ user: {
+ ...ArtworkActionsFixture.user,
+ type: "Admin",
+ },
+ }
+ const wrapper = await getWrapper("lg", data)
+ expect(wrapper.find(OpenEyeIcon).length).toBe(0)
+ })
+ })
+
+ describe("concerning other utility actions", () => {
+ describe("download link", () => {
+ it("renders link if is_downloadable", async () => {
+ const data = {
+ ...ArtworkActionsFixture,
+ artwork: {
+ ...ArtworkActionsFixture.artwork,
+ is_downloadable: true,
+ },
+ user: {
+ ...ArtworkActionsFixture.user,
+ type: "User",
+ },
+ }
+ const wrapper = await getWrapper("lg", data)
+ expect(wrapper.find(DownloadIcon).length).toBe(1)
+ })
+
+ it("renders link if admin", async () => {
+ const data = {
+ ...ArtworkActionsFixture,
+ artwork: {
+ ...ArtworkActionsFixture.artwork,
+ is_downloadable: false,
+ },
+ user: {
+ ...ArtworkActionsFixture.user,
+ type: "Admin",
+ },
+ }
+ const wrapper = await getWrapper("lg", data)
+ expect(wrapper.find(DownloadIcon).length).toBe(1)
+ })
+
+ it("hides link if is_downloadable=false and the user is not an admin", async () => {
+ const data = {
+ ...ArtworkActionsFixture,
+ artwork: {
+ ...ArtworkActionsFixture.artwork,
+ is_downloadable: false,
+ },
+ user: {
+ ...ArtworkActionsFixture.user,
+ type: "User",
+ },
+ }
+ const wrapper = await getWrapper("lg", data)
+ expect(wrapper.find(DownloadIcon).length).toBe(0)
+ })
+ })
+ })
+
+ describe("in the xs breakpoint", () => {
+ it("shows the More icon", async () => {
+ const wrapper = await getWrapper("xs")
+ expect(wrapper.find(HeartFillIcon).length).toBe(1)
+ expect(wrapper.find(ShareIcon).length).toBe(1)
+ expect(wrapper.find(OpenEyeIcon).length).toBe(1)
+ expect(wrapper.find(MoreIcon).length).toBe(1)
+ expect(wrapper.find(DownloadIcon).length).toBe(0)
+ expect(wrapper.find(EditIcon).length).toBe(0)
+ expect(wrapper.find(GenomeIcon).length).toBe(0)
+ })
+
+ it("clicking the More icon shows the download link if non-admin", async () => {
+ const wrapper = await getWrapper("xs")
+ wrapper.find(MoreIcon).simulate("click")
+ expect(wrapper.find(DownloadIcon).length).toBe(1)
+ expect(wrapper.find(EditIcon).length).toBe(1)
+ expect(wrapper.find(GenomeIcon).length).toBe(1)
+ })
+
+ it("shows no More icon if there are <= 3 actions", async () => {
+ const data = {
+ ...ArtworkActionsFixture,
+ artwork: {
+ ...ArtworkActionsFixture.artwork,
+ is_downloadable: false,
+ },
+ user: {
+ ...ArtworkActionsFixture.user,
+ type: "User",
+ },
+ }
+ const wrapper = await getWrapper("xs", data)
+ expect(wrapper.find(HeartFillIcon).length).toBe(1)
+ expect(wrapper.find(ShareIcon).length).toBe(1)
+ expect(wrapper.find(OpenEyeIcon).length).toBe(1)
+ expect(wrapper.find(DownloadIcon).length).toBe(0)
+ expect(wrapper.find(EditIcon).length).toBe(0)
+ expect(wrapper.find(GenomeIcon).length).toBe(0)
+ expect(wrapper.find(MoreIcon).length).toBe(0)
+ })
+ })
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/__tests__/ArtworkImageBrowser.jest.tsx b/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/__tests__/ArtworkImageBrowser.jest.tsx
new file mode 100644
index 00000000000..286a8004a1f
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/__tests__/ArtworkImageBrowser.jest.tsx
@@ -0,0 +1,85 @@
+import { ArtworkImageBrowser_Test_QueryRawResponse } from "v2/__generated__/ArtworkImageBrowser_Test_Query.graphql"
+import { ArtworkImageBrowserFixture } from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkImageBrowser.fixture"
+import { MockBoot, renderRelayTree } from "v2/DevTools"
+import { ReactWrapper } from "enzyme"
+import { cloneDeep } from "lodash"
+import React from "react"
+import { graphql } from "react-relay"
+import { Breakpoint } from "v2/Utils/Responsive"
+import { ArtworkImageBrowserFragmentContainer as ArtworkImageBrowser } from "../"
+
+jest.unmock("react-relay")
+
+describe("ArtworkImageBrowser", () => {
+ const getWrapper = async (
+ breakpoint: Breakpoint = "lg",
+ data: ArtworkImageBrowser_Test_QueryRawResponse = ArtworkImageBrowserFixture
+ ) => {
+ return await renderRelayTree({
+ Component: ArtworkImageBrowser,
+ query: graphql`
+ query ArtworkImageBrowser_Test_Query($artworkID: String!)
+ @raw_response_type {
+ artwork(id: $artworkID) {
+ ...ArtworkImageBrowser_artwork
+ }
+ }
+ `,
+ mockData: data as ArtworkImageBrowser_Test_QueryRawResponse,
+ variables: {
+ artworkID: "matt-z-and-percy-still-life",
+ },
+ wrapper: children => (
+ {children}
+ ),
+ })
+ }
+
+ describe("desktop", () => {
+ let wrapper: ReactWrapper
+
+ beforeAll(async () => {
+ wrapper = await getWrapper()
+ })
+
+ it("renders correct container components", () => {
+ expect(wrapper.find("ArtworkImageBrowser").length).toBe(1)
+ })
+
+ it("renders correct number of images", () => {
+ expect(wrapper.find("Image").length).toBe(4)
+ })
+
+ it("renders directional arrows", () => {
+ expect(wrapper.find("ArrowButton").length).toBe(2)
+ })
+
+ it("returns null if missing images", async () => {
+ const data = cloneDeep(ArtworkImageBrowserFixture) as any
+ data.artwork.images = []
+ wrapper = await getWrapper("lg", data)
+ expect(wrapper.find("ArtworkImageBrowser").length).toBe(0)
+ expect(wrapper.find("ArtworkActions").length).toBe(0)
+ })
+ })
+
+ describe("mobile", () => {
+ let wrapper: ReactWrapper
+
+ beforeAll(async () => {
+ wrapper = await getWrapper("xs")
+ })
+
+ it("renders correct container components", () => {
+ expect(wrapper.find("ArtworkImageBrowser").length).toBe(1)
+ })
+
+ it("renders correct number of images", () => {
+ expect(wrapper.find("Image").length).toBe(4)
+ })
+
+ it("renders does not render directional arrows", () => {
+ expect(wrapper.find("ArrowButton").length).toBe(0)
+ })
+ })
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/index.tsx b/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/index.tsx
new file mode 100644
index 00000000000..1b9910a3e76
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkImageBrowser/index.tsx
@@ -0,0 +1,107 @@
+import { ArtworkImageBrowser_artwork } from "v2/__generated__/ArtworkImageBrowser_artwork.graphql"
+import { ArtworkImageBrowserQuery } from "v2/__generated__/ArtworkImageBrowserQuery.graphql"
+import { SystemContext } from "v2/Artsy"
+import { renderWithLoadProgress } from "v2/Artsy/Relay/renderWithLoadProgress"
+import { SystemQueryRenderer as QueryRenderer } from "v2/Artsy/Relay/SystemQueryRenderer"
+import React, { useContext } from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { ArtworkActionsFragmentContainer as ArtworkActions } from "./ArtworkActions"
+import { ArtworkImageBrowser } from "./ArtworkImageBrowser"
+import { Box } from "@artsy/palette"
+import { ContextModule } from "@artsy/cohesion"
+
+export interface ImageBrowserProps {
+ artwork: ArtworkImageBrowser_artwork
+}
+
+export class ArtworkImageBrowserContainer extends React.Component<
+ ImageBrowserProps
+ > {
+ carousel = null
+
+ render() {
+ const { images, image, image_alt } = this.props.artwork
+ if (!images.length) {
+ return null
+ }
+
+ const defaultImageIndex = images.findIndex(
+ e => e.internalID === image.internalID
+ )
+ return (
+
+ (this.carousel = f)}
+ images={images}
+ imageAlt={image_alt}
+ />
+ {
+ this.carousel.select(defaultImageIndex, false, true)
+ }}
+ artwork={this.props.artwork}
+ />
+
+ )
+ }
+}
+
+export const ArtworkImageBrowserFragmentContainer = createFragmentContainer<
+ ImageBrowserProps
+>(ArtworkImageBrowserContainer, {
+ artwork: graphql`
+ fragment ArtworkImageBrowser_artwork on Artwork {
+ image_alt: formattedMetadata
+ ...ArtworkActions_artwork
+ image {
+ internalID
+ }
+ images {
+ internalID
+ uri: url(version: ["large"])
+ placeholder: resized(width: 30, height: 30, version: "small") {
+ url
+ }
+ aspectRatio: aspectRatio
+ is_zoomable: isZoomable
+ is_default: isDefault
+ deepZoom: deepZoom {
+ Image {
+ xmlns
+ Url
+ Format
+ TileSize
+ Overlap
+ Size {
+ Width
+ Height
+ }
+ }
+ }
+ }
+ }
+ `,
+})
+
+export const ArtworkImageBrowserQueryRenderer = ({
+ artworkID,
+}: {
+ artworkID: string
+}) => {
+ const { relayEnvironment } = useContext(SystemContext)
+
+ return (
+
+ environment={relayEnvironment}
+ variables={{ artworkID }}
+ query={graphql`
+ query ArtworkImageBrowserQuery($artworkID: String!) {
+ artwork(id: $artworkID) {
+ ...ArtworkImageBrowser_artwork
+ }
+ }
+ `}
+ render={renderWithLoadProgress(ArtworkImageBrowserFragmentContainer)}
+ />
+ )
+}
diff --git a/src/v2/Apps/Artwork/Components/ArtworkMeta.tsx b/src/v2/Apps/Artwork/Components/ArtworkMeta.tsx
new file mode 100644
index 00000000000..1d9caf3fbcb
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkMeta.tsx
@@ -0,0 +1,189 @@
+import { ArtworkMeta_artwork } from "v2/__generated__/ArtworkMeta_artwork.graphql"
+import React, { Component } from "react"
+import { Link, Meta, Title } from "react-head"
+import { createFragmentContainer, graphql } from "react-relay"
+import { data as sd } from "sharify"
+import { get } from "v2/Utils/get"
+
+import { withSystemContext } from "v2/Artsy"
+import { SeoDataForArtworkFragmentContainer as SeoDataForArtwork } from "./Seo/SeoDataForArtwork"
+
+interface ArtworkMetaProps {
+ artwork: ArtworkMeta_artwork
+ googleAdId?: string
+}
+
+export class ArtworkMeta extends Component {
+ renderImageMetaTags() {
+ const { artwork } = this.props
+ const { meta_image, is_shareable } = artwork
+ const imageURL = get(meta_image, img => img.resized.url)
+
+ if (is_shareable && imageURL) {
+ return (
+ <>
+ {artwork.meta.title}
+ = track()(
+ props => {
+ const { trackEvent } = useTracking()
+ const { mediator, user } = useSystemContext()
+ const [fetchingNextPage, setFetchingNextPage] = useState(false)
+
+ const {
+ artwork: { artist },
+ relay,
+ } = props
+ if (hideGrid(artist.related.artistsConnection)) {
+ return null
+ }
+
+ const fetchData = () => {
+ if (!relay.hasMore() || relay.isLoading()) {
+ return
+ }
+ setFetchingNextPage(true)
+ relay.loadMore(PAGE_SIZE, error => {
+ if (error) {
+ logger.error(error)
+ }
+ setFetchingNextPage(false)
+ })
+ }
+
+ return (
+
+
+
+ Related artists
+
+
+
+ {artist.related.artistsConnection.edges.map(({ node }, index) => {
+ return (
+
+ {
+ trackEvent({
+ context_module: Schema.ContextModule.RelatedArtists,
+ type: Schema.Type.ArtistCard,
+ action_type: Schema.ActionType.Click,
+ })
+ }}
+ />
+
+ )
+ })}
+
+
+ {relay.hasMore() && (
+
+ )
+ }
+)
+
+const ShowMoreButton: React.FC<{ onClick: () => void; loading: boolean }> = ({
+ onClick,
+ loading,
+}) => {
+ return (
+
+
+ Show more
+
+
+ )
+}
+
+export const ArtworkRelatedArtistsPaginationContainer = createPaginationContainer(
+ ArtworkRelatedArtists,
+ {
+ artwork: graphql`
+ fragment ArtworkRelatedArtists_artwork on Artwork
+ @argumentDefinitions(
+ count: { type: "Int", defaultValue: 4 }
+ cursor: { type: "String", defaultValue: "" }
+ ) {
+ slug
+ artist {
+ href
+ related {
+ artistsConnection(kind: MAIN, first: $count, after: $cursor)
+ @connection(key: "ArtworkRelatedArtists_artistsConnection") {
+ pageInfo {
+ hasNextPage
+ }
+ edges {
+ node {
+ ...ArtistCard_artist
+ }
+ }
+ }
+ }
+ }
+ }
+ `,
+ },
+ {
+ direction: "forward",
+ getConnectionFromProps(props) {
+ return props.artwork.artist.related.artistsConnection
+ },
+ getFragmentVariables(prevVars, count) {
+ return {
+ ...prevVars,
+ count,
+ }
+ },
+ getVariables(props, { count, cursor }, fragmentVariables) {
+ return {
+ ...fragmentVariables,
+ count,
+ cursor,
+ artworkID: props.artwork.slug,
+ }
+ },
+ query: graphql`
+ query ArtworkRelatedArtistsPaginationQuery(
+ $count: Int!
+ $cursor: String
+ $artworkID: String!
+ ) {
+ artwork(id: $artworkID) {
+ ...ArtworkRelatedArtists_artwork
+ @arguments(count: $count, cursor: $cursor)
+ }
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarArtists.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarArtists.tsx
new file mode 100644
index 00000000000..662e8f0646c
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarArtists.tsx
@@ -0,0 +1,132 @@
+import { Box, Serif } from "@artsy/palette"
+import { SystemContextConsumer } from "v2/Artsy"
+import * as Schema from "v2/Artsy/Analytics/Schema"
+
+import { FollowIcon } from "v2/Components/FollowIcon"
+import React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+
+import { Intent, ContextModule } from "@artsy/cohesion"
+import { ArtworkSidebarArtists_artwork } from "v2/__generated__/ArtworkSidebarArtists_artwork.graphql"
+import { FollowArtistButtonFragmentContainer as FollowArtistButton } from "v2/Components/FollowButton/FollowArtistButton"
+import { openAuthToFollowSave } from "v2/Utils/openAuthModal"
+
+export interface ArtistsProps {
+ artwork: ArtworkSidebarArtists_artwork
+}
+
+type Artist = ArtworkSidebarArtists_artwork["artists"][0]
+
+export class ArtworkSidebarArtists extends React.Component {
+ private renderArtistName(artist: Artist) {
+ return artist.href ? (
+
+ {artist.name}
+
+ ) : (
+
+ {artist.name}
+
+ )
+ }
+
+ handleOpenAuth = (mediator, artist) => {
+ openAuthToFollowSave(mediator, {
+ entity: artist,
+ contextModule: ContextModule.artworkSidebar,
+ intent: Intent.followArtist,
+ })
+ }
+
+ private renderSingleArtist = (artist: Artist, user, mediator) => {
+ return (
+
+ {this.renderArtistName(artist)}
+ this.handleOpenAuth(mediator, artist)}
+ triggerSuggestions
+ render={({ is_followed }) => {
+ return
+
+ )
+ }
+
+ renderMultipleArtists() {
+ const {
+ artwork: { artists },
+ } = this.props
+ return artists.map((artist, index) => {
+ return (
+
+ {this.renderArtistName(artist)}
+ {index !== artists.length - 1 && ", "}
+
+ )
+ })
+ }
+
+ renderCulturalMaker(cultural_maker: string) {
+ return (
+
+ {cultural_maker}
+
+ )
+ }
+ render() {
+ const {
+ artwork: { artists, cultural_maker },
+ } = this.props
+ return (
+
+ {({ user, mediator }) => {
+ return (
+
+ {artists.length === 1
+ ? this.renderSingleArtist(artists[0], user, mediator)
+ : this.renderMultipleArtists()}
+ {artists.length === 0 &&
+ cultural_maker &&
+ this.renderCulturalMaker(cultural_maker)}
+
+ )
+ }}
+
+ )
+ }
+}
+
+export const ArtworkSidebarArtistsFragmentContainer = createFragmentContainer(
+ ArtworkSidebarArtists,
+ {
+ artwork: graphql`
+ fragment ArtworkSidebarArtists_artwork on Artwork
+ @argumentDefinitions(
+ showFollowSuggestions: { type: "Boolean", defaultValue: true }
+ ) {
+ cultural_maker: culturalMaker
+ artists {
+ id
+ internalID
+ slug
+ name
+ href
+ ...FollowArtistButton_artist
+ @arguments(showFollowSuggestions: $showFollowSuggestions)
+ }
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarAuctionPartnerInfo.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarAuctionPartnerInfo.tsx
new file mode 100644
index 00000000000..2a74695f8d2
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarAuctionPartnerInfo.tsx
@@ -0,0 +1,54 @@
+import { Box, Serif } from "@artsy/palette"
+import { createFragmentContainer, graphql } from "react-relay"
+import React from "react"
+
+import { ArtworkSidebarAuctionPartnerInfo_artwork } from "v2/__generated__/ArtworkSidebarAuctionPartnerInfo_artwork.graphql"
+
+export interface ArtworkSidebarAuctionPartnerInfoProps {
+ artwork: ArtworkSidebarAuctionPartnerInfo_artwork
+}
+
+export class ArtworkSidebarAuctionPartnerInfo extends React.Component<
+ ArtworkSidebarAuctionPartnerInfoProps
+ > {
+ render() {
+ const { partner, sale_artwork, sale } = this.props.artwork
+ if (sale.is_closed) {
+ return null
+ }
+ return (
+
+ {partner && (
+
+ {partner.name}
+
+ )}
+ {sale_artwork && sale_artwork.estimate && (
+
+ Estimated value: {sale_artwork.estimate}
+
+ )}
+
+ )
+ }
+}
+
+export const ArtworkSidebarAuctionPartnerInfoFragmentContainer = createFragmentContainer(
+ ArtworkSidebarAuctionPartnerInfo,
+ {
+ artwork: graphql`
+ fragment ArtworkSidebarAuctionPartnerInfo_artwork on Artwork {
+ partner {
+ name
+ }
+ sale_artwork: saleArtwork {
+ estimate
+ }
+ sale {
+ internalID
+ is_closed: isClosed
+ }
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarBidAction.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarBidAction.tsx
new file mode 100644
index 00000000000..44999b81c0f
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarBidAction.tsx
@@ -0,0 +1,314 @@
+import {
+ Box,
+ Button,
+ Flex,
+ HelpIcon,
+ LargeSelect,
+ Link,
+ Sans,
+ Separator,
+ Serif,
+ Spacer,
+ Tooltip,
+} from "@artsy/palette"
+import React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+
+import { ArtworkSidebarBidAction_artwork } from "v2/__generated__/ArtworkSidebarBidAction_artwork.graphql"
+import { ArtworkSidebarBidAction_me } from "v2/__generated__/ArtworkSidebarBidAction_me.graphql"
+import * as Schema from "v2/Artsy/Analytics/Schema"
+import track from "react-tracking"
+import { getENV } from "v2/Utils/getENV"
+import { bidderNeedsIdentityVerification } from "v2/Utils/identityVerificationRequirements"
+
+export interface ArtworkSidebarBidActionProps {
+ artwork: ArtworkSidebarBidAction_artwork
+ me: ArtworkSidebarBidAction_me
+}
+
+export interface ArtworkSidebarBidActionState {
+ selectedMaxBidCents?: number
+}
+
+const RegisterToBidButton: React.FC<{ onClick: () => void }> = ({
+ onClick,
+}) => {
+ return (
+
+ Register to bid
+
+ )
+}
+
+const IdentityVerificationDisclaimer: React.FC = () => {
+ return (
+
+ Identity verification required to bid.{" "}
+
+ )
+}
+
+@track()
+export class ArtworkSidebarBidAction extends React.Component<
+ArtworkSidebarBidActionProps,
+ArtworkSidebarBidActionState
+> {
+ state: ArtworkSidebarBidActionState = {
+ selectedMaxBidCents: null,
+ }
+
+ setMaxBid = (newVal: number) => {
+ this.setState({ selectedMaxBidCents: newVal })
+ }
+
+ redirectToRegister = () => {
+ const { sale } = this.props.artwork
+ const href = `/auction-registration/${sale.slug}`
+ window.location.href = href
+ }
+
+ @track((props: ArtworkSidebarBidActionProps) => ({
+ artwork_slug: props.artwork.slug,
+ products: [
+ {
+ product_id: props.artwork.internalID,
+ quantity: 1,
+ price:
+ props.artwork.myLotStanding &&
+ props.artwork.myLotStanding[0] &&
+ props.artwork.myLotStanding[0].most_recent_bid.max_bid.cents / 100,
+ },
+ ],
+ auction_slug: props.artwork.sale.slug,
+ context_page: Schema.PageName.ArtworkPage,
+ action_type: Schema.ActionType.ClickedBid,
+ }))
+ redirectToBid(firstIncrement: number) {
+ const { slug, sale } = this.props.artwork
+ const bid = this.state.selectedMaxBidCents || firstIncrement
+ const href = `/auction/${sale.slug}/bid/${slug}?bid=${bid}`
+ window.location.href = href
+ }
+
+ @track({
+ type: Schema.Type.Button,
+ flow: Schema.Flow.Auctions,
+ subject: Schema.Subject.EnterLiveAuction,
+ context_module: Schema.ContextModule.Sidebar,
+ action_type: Schema.ActionType.Click,
+ })
+ redirectToLiveBidding(me: ArtworkSidebarBidAction_me | null) {
+ const { slug } = this.props.artwork.sale
+ const liveUrl = `${getENV("PREDICTION_URL")}/${slug}`
+ if (me) {
+ window.location.href = `${liveUrl}/login`
+ } else {
+ window.location.href = liveUrl
+ }
+ }
+
+ render() {
+ const {
+ artwork,
+ artwork: { sale },
+ me,
+ } = this.props
+
+ if (sale.is_closed) return null
+
+ const registrationAttempted = !!sale.registrationStatus
+ const qualifiedForBidding =
+ registrationAttempted && sale.registrationStatus.qualified_for_bidding
+
+ /**
+ * NOTE: This is making an incorrect assumption that there could only ever
+ * be 1 live sale with this work. When we run into that case, there is
+ * likely design work to be done too, so we can adjust this then.
+ */
+ const myLotStanding = artwork.myLotStanding && artwork.myLotStanding[0]
+ const hasMyBids = !!(myLotStanding && myLotStanding.most_recent_bid)
+
+ const userNeedsIdentityVerification = bidderNeedsIdentityVerification({
+ sale,
+ user: me,
+ bidder: sale.registrationStatus,
+ })
+
+ if (sale.is_preview) {
+ let PreviewAction: React.FC
+
+ if (registrationAttempted) {
+ if (qualifiedForBidding) {
+ PreviewAction = () => (
+
+ Registration complete
+
+ )
+ } else {
+ PreviewAction = () => (
+
+ Registration pending
+
+ )
+ }
+ } else {
+ PreviewAction = () => (
+
+
+ )
+ }
+
+ if (sale.is_live_open) {
+ const notApprovedBidderBeforeRegistrationClosed: boolean =
+ sale.is_registration_closed && !qualifiedForBidding
+
+ if (notApprovedBidderBeforeRegistrationClosed) {
+ return (
+
+
+ Registration closed
+
+ this.redirectToLiveBidding(me)}
+ >
+ Watch live bidding
+
+
+ )
+ } else {
+ return (
+
+ this.redirectToLiveBidding(me)}
+ >
+ Enter live bidding
+
+ {userNeedsIdentityVerification && (
+
+ )
+ }
+ }
+
+ if (sale.is_open) {
+ if (registrationAttempted && !qualifiedForBidding) {
+ return (
+
+
+ Registration pending
+
+ {userNeedsIdentityVerification && (
+
+ )
+ }
+ if (sale.is_registration_closed && !qualifiedForBidding) {
+ return (
+
+ Registration closed
+
+ )
+ }
+
+ const myLastMaxBid =
+ hasMyBids && myLotStanding.most_recent_bid.max_bid.cents
+ const increments = artwork.sale_artwork.increments.filter(
+ increment => increment.cents > (myLastMaxBid || 0)
+ )
+ const firstIncrement = increments[0]
+ const selectOptions = increments.map(increment => ({
+ value: increment.cents.toString(),
+ text: increment.display,
+ }))
+
+ if (userNeedsIdentityVerification) {
+ return (
+
+
+ )
+ } else {
+ return (
+
+
+
+ Place max bid
+
+
+
+
+ this.redirectToBid(firstIncrement.cents)}
+ >
+ {hasMyBids ? "Increase max bid" : "Bid"}
+
+
+ )
+ }
+ }
+ }
+}
+
+export const ArtworkSidebarBidActionFragmentContainer = createFragmentContainer(
+ (props: ArtworkSidebarBidActionProps) => {
+ return
+ this.closeModal(), isFixed: false }}
+ >
+
+
+
+
+ {artwork.attribution_class.short_description}
+
+ .
+
+
+
+ )
+ }
+}
+
+export const ArtworkSidebarClassificationFragmentContainer = createFragmentContainer(
+ ArtworkSidebarClassification,
+ {
+ artwork: graphql`
+ fragment ArtworkSidebarClassification_artwork on Artwork {
+ attribution_class: attributionClass {
+ short_description: shortDescription
+ }
+ }
+ `,
+ }
+)
+
+export const ClassificationLink = styled.span`
+ cursor: pointer;
+ text-decoration: underline;
+`
+const ClassificationContainer = Box
+
+const ClassificationDetails = () => {
+ const classificationOptions = [
+ {
+ name: "Unique",
+ long_description: "One of a kind piece, created by the artist.",
+ },
+ {
+ name: "Limited edition",
+ long_description: [
+ "Original works created in multiple with direct involvement of the artist.",
+ "Generally, less than 150 pieces total.",
+ ].join(" "),
+ },
+ {
+ name: "Made-to-order",
+ long_description:
+ "A piece that is made-to-order, taking into account the collector’s preferences.",
+ },
+ {
+ name: "Reproduction",
+ long_description: [
+ "Reproduction of an original work authorized by artist’s studio or estate.",
+ "The artist was not directly involved in production.",
+ ].join(" "),
+ },
+ {
+ name: "Editioned multiple",
+ long_description: [
+ "Pieces created in larger limited editions, authorized by the artist’s studio or estate.",
+ "Not produced with direct involvement of the artist.",
+ ].join(" "),
+ },
+ {
+ name: "Non-editioned multiple",
+ long_description: [
+ "Works made in unlimited or unknown numbers of copies, authorized by the artist’s studio or estate.",
+ "Not produced with direct involvement of the artist.",
+ ].join(" "),
+ },
+ {
+ name: "Ephemera",
+ long_description: [
+ "Items related to the artist, created or manufactured for a specific, limited use.",
+ "This includes exhibition materials, memorabilia, autographs, etc.",
+ ].join(" "),
+ },
+ ]
+
+ return (
+ <>
+
+ {classificationOptions.map(option => {
+ return (
+
+
+ {option.name}
+
+
+ {option.long_description}
+
+
+ )
+ })}
+
+
+ Our partners are responsible for providing accurate classification
+ information for all works.
+
+
+ )
+}
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarCommercial.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarCommercial.tsx
new file mode 100644
index 00000000000..2cf5f7273b1
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarCommercial.tsx
@@ -0,0 +1,520 @@
+import { Intent, ContextModule } from "@artsy/cohesion"
+import {
+ Box,
+ Button,
+ Flex,
+ FlexProps,
+ Radio,
+ RadioGroup,
+ Sans,
+ Separator,
+ Serif,
+ Spacer,
+} from "@artsy/palette"
+import { ArtworkSidebarCommercial_artwork } from "v2/__generated__/ArtworkSidebarCommercial_artwork.graphql"
+import { ArtworkSidebarCommercialOfferOrderMutation } from "v2/__generated__/ArtworkSidebarCommercialOfferOrderMutation.graphql"
+import { ArtworkSidebarCommercialOrderMutation } from "v2/__generated__/ArtworkSidebarCommercialOrderMutation.graphql"
+import { Mediator, SystemContext } from "v2/Artsy"
+import { track } from "v2/Artsy/Analytics"
+import * as Schema from "v2/Artsy/Analytics/Schema"
+import { ModalType } from "v2/Components/Authentication/Types"
+import { ErrorModal } from "v2/Components/Modal/ErrorModal"
+import currency from "currency.js"
+import { Router } from "found"
+import React, { FC, useContext } from "react"
+import {
+ commitMutation,
+ createFragmentContainer,
+ graphql,
+ RelayProp,
+} from "react-relay"
+import { ErrorWithMetadata } from "v2/Utils/errors"
+import { get } from "v2/Utils/get"
+import createLogger from "v2/Utils/logger"
+import { openAuthModal } from "v2/Utils/openAuthModal"
+import { ArtworkSidebarSizeInfoFragmentContainer as SizeInfo } from "./ArtworkSidebarSizeInfo"
+
+type EditionSet = ArtworkSidebarCommercial_artwork["edition_sets"][0]
+
+export interface ArtworkSidebarCommercialContainerProps
+ extends ArtworkSidebarCommercialProps {
+ mediator: Mediator
+ router?: Router
+ user: User
+ EXPERIMENTAL_APP_SHELL?: boolean
+}
+
+export interface ArtworkSidebarCommercialContainerState {
+ isCommittingCreateOrderMutation: boolean
+ isCommittingCreateOfferOrderMutation: boolean
+ isErrorModalOpen: boolean
+ selectedEditionSet: EditionSet
+}
+
+const Row: React.SFC = ({ children, ...others }) => (
+
+ {children}
+
+)
+
+const logger = createLogger(
+ "Artwork/Components/ArtworkSidebar/ArtworkSidebarCommercial.tsx"
+)
+
+@track()
+export class ArtworkSidebarCommercialContainer extends React.Component<
+ArtworkSidebarCommercialContainerProps,
+ArtworkSidebarCommercialContainerState
+> {
+ state: ArtworkSidebarCommercialContainerState = {
+ isCommittingCreateOrderMutation: false,
+ isCommittingCreateOfferOrderMutation: false,
+ isErrorModalOpen: false,
+ selectedEditionSet: this.firstAvailableEcommerceEditionSet(),
+ }
+
+ firstAvailableEcommerceEditionSet(): EditionSet {
+ const editionSets = this.props.artwork.edition_sets
+
+ return editionSets.find(editionSet => {
+ return editionSet.is_acquireable || editionSet.is_offerable
+ })
+ }
+
+ renderSaleMessage(saleMessage: string) {
+ return (
+
+ {saleMessage}
+
+ )
+ }
+
+ renderEditionSet(editionSet: EditionSet, includeSelectOption: boolean) {
+ const editionEcommerceAvailable =
+ editionSet.is_acquireable || editionSet.is_offerable
+
+ const editionFragment = (
+ <>
+
+ {editionSet.sale_message}
+
+
+ )
+ if (includeSelectOption) {
+ return (
+
+ {
+ this.setState({ selectedEditionSet: editionSet })
+ }}
+ selected={this.state.selectedEditionSet === editionSet}
+ disabled={!editionEcommerceAvailable}
+ label={editionFragment}
+ />
+
+ )
+ } else {
+ return {editionFragment}
+ }
+ }
+
+ renderEditionSets(includeSelectOption: boolean) {
+ const editionSets = this.props.artwork.edition_sets
+
+ const editionSetsFragment = editionSets.map((editionSet, index) => {
+ return (
+
+
+ {this.renderEditionSet(editionSet, includeSelectOption)}
+
+ {index !== editionSets.length - 1 &&
+ )
+ })
+
+ return {editionSetsFragment}
+ }
+
+ onMutationError = (error: ErrorWithMetadata) => {
+ logger.error(error)
+ this.setState({
+ isCommittingCreateOrderMutation: false,
+ isErrorModalOpen: true,
+ })
+ }
+
+ onCloseModal = () => {
+ this.setState({ isErrorModalOpen: false })
+ }
+
+ @track(props => ({
+ context_module: Schema.ContextModule.Sidebar,
+ action_type: Schema.ActionType.ClickedContactGallery,
+ subject: Schema.Subject.ContactGallery,
+ artwork_id: props.artwork.internalID,
+ artwork_slug: props.artwork.slug,
+ }))
+ handleInquiry() {
+ get(this.props, props => props.mediator.trigger) &&
+ this.props.mediator.trigger("launchInquiryFlow", {
+ artworkId: this.props.artwork.internalID,
+ })
+ }
+
+ @track((props, state, args) => ({
+ action_type: Schema.ActionType.ClickedBuyNow,
+ flow: Schema.Flow.BuyNow,
+ type: Schema.Type.Button,
+ artwork_id: props.artwork.internalID,
+ artwork_slug: props.artwork.slug,
+ products: [
+ {
+ product_id: props.artwork.internalID,
+ quantity: 1,
+ price: currency(props.artwork.listPrice.display).value,
+ },
+ ],
+ }))
+ handleCreateOrder() {
+ const { user, mediator } = this.props
+ if (user && user.id) {
+ this.setState({ isCommittingCreateOrderMutation: true }, () => {
+ if (get(this.props, props => props.relay.environment)) {
+ commitMutation(
+ this.props.relay.environment,
+ {
+ // TODO: Inputs to the mutation might have changed case of the keys!
+ mutation: graphql`
+ mutation ArtworkSidebarCommercialOrderMutation(
+ $input: CommerceCreateOrderWithArtworkInput!
+ ) {
+ commerceCreateOrderWithArtwork(input: $input) {
+ orderOrError {
+ ... on CommerceOrderWithMutationSuccess {
+ __typename
+ order {
+ internalID
+ mode
+ }
+ }
+ ... on CommerceOrderWithMutationFailure {
+ error {
+ type
+ code
+ data
+ }
+ }
+ }
+ }
+ }
+ `,
+ variables: {
+ input: {
+ artworkId: this.props.artwork.internalID,
+ editionSetId: get(
+ this.state,
+ state => state.selectedEditionSet.internalID
+ ),
+ },
+ },
+ onCompleted: data => {
+ this.setState(
+ { isCommittingCreateOrderMutation: false },
+ () => {
+ const {
+ commerceCreateOrderWithArtwork: { orderOrError },
+ } = data
+ if (orderOrError.error) {
+ this.onMutationError(
+ new ErrorWithMetadata(
+ orderOrError.error.code,
+ orderOrError.error
+ )
+ )
+ } else {
+ const url = `/orders/${orderOrError.order.internalID}`
+
+ // FIXME: Remove once A/B test completes
+ if (this.props.EXPERIMENTAL_APP_SHELL) {
+ this.props.router.push(url)
+ } else {
+ window.location.assign(url)
+ }
+ }
+ }
+ )
+ },
+ onError: this.onMutationError,
+ }
+ )
+ }
+ })
+ } else {
+ openAuthModal(mediator, {
+ mode: ModalType.signup,
+ redirectTo: location.href,
+ contextModule: ContextModule.artworkSidebar,
+ intent: Intent.buyNow,
+ })
+ }
+ }
+
+ @track((props, state, args) => ({
+ action_type: Schema.ActionType.ClickedMakeOffer,
+ flow: Schema.Flow.MakeOffer,
+ type: Schema.Type.Button,
+ artwork_id: props.artwork.internalID,
+ artwork_slug: props.artwork.slug,
+ }))
+ handleCreateOfferOrder() {
+ const { user, mediator } = this.props
+ if (user && user.id) {
+ this.setState({ isCommittingCreateOfferOrderMutation: true }, () => {
+ if (get(this.props, props => props.relay.environment)) {
+ commitMutation(
+ this.props.relay.environment,
+ {
+ // TODO: Inputs to the mutation might have changed case of the keys!
+ mutation: graphql`
+ mutation ArtworkSidebarCommercialOfferOrderMutation(
+ $input: CommerceCreateOfferOrderWithArtworkInput!
+ ) {
+ commerceCreateOfferOrderWithArtwork(input: $input) {
+ orderOrError {
+ ... on CommerceOrderWithMutationSuccess {
+ __typename
+ order {
+ internalID
+ mode
+ }
+ }
+ ... on CommerceOrderWithMutationFailure {
+ error {
+ type
+ code
+ data
+ }
+ }
+ }
+ }
+ }
+ `,
+ variables: {
+ input: {
+ artworkId: this.props.artwork.internalID,
+ editionSetId: get(
+ this.state,
+ state => state.selectedEditionSet.internalID
+ ),
+ },
+ },
+ onCompleted: data => {
+ this.setState(
+ { isCommittingCreateOfferOrderMutation: false },
+ () => {
+ const {
+ commerceCreateOfferOrderWithArtwork: { orderOrError },
+ } = data
+ if (orderOrError.error) {
+ this.onMutationError(
+ new ErrorWithMetadata(
+ orderOrError.error.code,
+ orderOrError.error
+ )
+ )
+ } else {
+ const url = `/orders/${orderOrError.order.internalID}/offer`
+
+ // FIXME: Remove once A/B test completes
+ if (this.props.EXPERIMENTAL_APP_SHELL) {
+ this.props.router.push(url)
+ } else {
+ window.location.assign(url)
+ }
+ }
+ }
+ )
+ },
+ onError: this.onMutationError,
+ }
+ )
+ }
+ })
+ } else {
+ openAuthModal(mediator, {
+ mode: ModalType.signup,
+ redirectTo: location.href,
+ contextModule: ContextModule.artworkSidebar,
+ intent: Intent.makeOffer,
+ })
+ }
+ }
+
+ render() {
+ const { artwork } = this.props
+ const {
+ isCommittingCreateOrderMutation,
+ isCommittingCreateOfferOrderMutation,
+ selectedEditionSet,
+ } = this.state
+ const artworkEcommerceAvailable =
+ artwork.is_acquireable || artwork.is_offerable
+
+ if (!artwork.sale_message && !artwork.is_inquireable) {
+ return
+ {artwork.sale_message &&
+ Ships from {artwork.shippingOrigin}
+
+ )}
+ {artworkEcommerceAvailable && artwork.shippingInfo && (
+
+ {artwork.shippingInfo}
+
+ )}
+ {artworkEcommerceAvailable && artwork.priceIncludesTaxDisplay && (
+
+ {artwork.priceIncludesTaxDisplay}
+
+ )}
+
+ {artwork.is_inquireable ||
+ artwork.is_acquireable ||
+ artwork.is_offerable ? (
+ artwork.sale_message &&
+ Buy now
+
+ )}
+ {artwork.is_offerable && (
+ <>
+
+ Make offer
+
+
+ )}
+ {artwork.is_inquireable &&
+ !artwork.is_acquireable &&
+ !artwork.is_offerable && (
+
+ Contact gallery
+
+ )}
+
+
+ )
+ }
+}
+
+interface ArtworkSidebarCommercialProps {
+ artwork: ArtworkSidebarCommercial_artwork
+ relay?: RelayProp
+}
+
+export const ArtworkSidebarCommercial: FC = props => {
+ const { mediator, router, user, EXPERIMENTAL_APP_SHELL } = useContext(
+ SystemContext
+ )
+
+ return (
+
+
+ Bidding closed
+
+
+ )
+ }
+
+ // Don't display anything if there is no starting bid info
+ if (!artwork.sale_artwork || !artwork.sale_artwork.current_bid) return null
+
+ const bidsCount = get(artwork, a => a.sale_artwork.counts.bidder_positions)
+ const bidsPresent = bidsCount > 0
+ const bidColor =
+ artwork.sale_artwork.is_with_reserve &&
+ bidsPresent &&
+ artwork.sale_artwork.reserve_status === "reserve_not_met"
+ ? "red100"
+ : "black60"
+
+ const bidTextParts = []
+ let reserveMessage = artwork.sale_artwork.reserve_message
+ if (bidsPresent) {
+ bidTextParts.push(bidsCount === 1 ? "1 bid" : bidsCount + " bids")
+ if (reserveMessage) reserveMessage = reserveMessage.toLocaleLowerCase()
+ }
+ if (reserveMessage) {
+ reserveMessage = reserveMessage + "."
+ bidTextParts.push(reserveMessage)
+ }
+ const bidText = bidTextParts.join(", ")
+
+ /**
+ * NOTE: This is making an incorrect assumption that there could only ever
+ * be 1 live sale with this work. When we run into that case, there is
+ * likely design work to be done too, so we can adjust this then.
+ */
+ const myLotStanding = artwork.myLotStanding && artwork.myLotStanding[0]
+ const myBidPresent = !!(myLotStanding && myLotStanding.most_recent_bid)
+ const myMostRecent = myBidPresent && myLotStanding.most_recent_bid
+ const myBidWinning =
+ myBidPresent && get(myLotStanding, s => s.active_bid.is_winning)
+ const myMaxBid = get(myMostRecent, bid => bid.max_bid.display)
+ return (
+
+ {({ mediator }) => (
+
+
+
+ {bidsPresent ? "Current bid" : "Starting bid"}
+
+
+ {myBidPresent && (
+
+ {myBidWinning ? (
+
+ )}
+
+ {artwork.sale_artwork.current_bid.display}
+
+
+
+
+
+ {bidText}
+
+ {myMaxBid && (
+
+ Your max: {myMaxBid}
+
+ )}
+
+ {artwork.sale && artwork.sale.is_with_buyers_premium && (
+
+
+ )}
+
+ )}
+
+ )
+ }
+}
+
+export const ArtworkSidebarCurrentBidInfoFragmentContainer = createFragmentContainer(
+ ArtworkSidebarCurrentBidInfo,
+ {
+ artwork: graphql`
+ fragment ArtworkSidebarCurrentBidInfo_artwork on Artwork {
+ sale {
+ is_closed: isClosed
+ is_live_open: isLiveOpen
+ internalID
+ is_with_buyers_premium: isWithBuyersPremium
+ }
+ sale_artwork: saleArtwork {
+ is_with_reserve: isWithReserve
+ reserve_message: reserveMessage
+ reserve_status: reserveStatus
+ current_bid: currentBid {
+ display
+ }
+ counts {
+ bidder_positions: bidderPositions
+ }
+ }
+ myLotStanding(live: true) {
+ active_bid: activeBid {
+ is_winning: isWinning
+ }
+ most_recent_bid: mostRecentBid {
+ max_bid: maxBid {
+ display
+ }
+ }
+ }
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarExtraLinks.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarExtraLinks.tsx
new file mode 100644
index 00000000000..212390b1fbf
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarExtraLinks.tsx
@@ -0,0 +1,238 @@
+import { Box, Link, Sans, Separator, Spacer } from "@artsy/palette"
+import { Mediator, SystemContext } from "v2/Artsy"
+import { track } from "v2/Artsy/Analytics"
+import * as Schema from "v2/Artsy/Analytics/Schema"
+import React, { SFC, useContext } from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { data as sd } from "sharify"
+
+import { ArtworkSidebarExtraLinks_artwork } from "v2/__generated__/ArtworkSidebarExtraLinks_artwork.graphql"
+
+export interface ArtworkSidebarExtraLinksProps {
+ artwork: ArtworkSidebarExtraLinks_artwork
+}
+
+export interface ArtworkSidebarExtraLinksContainerProps
+ extends ArtworkSidebarExtraLinksProps {
+ mediator: Mediator
+}
+
+const Container = ({ children }) => (
+
+ {children}
+
+)
+
+@track({
+ context_module: Schema.ContextModule.Sidebar,
+})
+class ArtworkSidebarExtraLinksContainer extends React.Component<
+ArtworkSidebarExtraLinksContainerProps
+> {
+ @track(() => ({
+ action_type: Schema.ActionType.Click,
+ subject: Schema.Subject.AuctionConditionsOfSale,
+ type: Schema.Type.Link,
+ }))
+ onClickConditionsOfSale() {
+ window.open(sd.APP_URL + "/conditions-of-sale", "_blank")
+ }
+
+ @track(() => ({
+ action_type: Schema.ActionType.Click,
+ subject: Schema.Subject.AuctionFAQ,
+ type: Schema.Type.Link,
+ }))
+ onClickAuctionFAQ() {
+ this.props.mediator &&
+ this.props.mediator.trigger &&
+ this.props.mediator.trigger("openAuctionFAQModal")
+ }
+
+ @track(() => ({
+ action_type: Schema.ActionType.Click,
+ subject: Schema.Subject.BNMOReadFAQ,
+ type: Schema.Type.Link,
+ }))
+ onClickBuyNowFAQ() {
+ window.open(sd.APP_URL + "/buy-now-feature-faq", "_blank")
+ }
+
+ @track(() => ({
+ action_type: Schema.ActionType.Click,
+ subject: Schema.Subject.CollectorFAQ,
+ type: Schema.Type.Link,
+ }))
+ onClickCollectorFAQ() {
+ this.props.mediator &&
+ this.props.mediator.trigger &&
+ this.props.mediator.trigger("openCollectorFAQModal")
+ }
+
+ @track(() => ({
+ action_type: Schema.ActionType.Click,
+ subject: Schema.Subject.AuctionAskSpecialist,
+ type: Schema.Type.Link,
+ }))
+ onClickAuctionAskSpecialist() {
+ this.props.mediator &&
+ this.props.mediator.trigger &&
+ this.props.mediator.trigger("openAuctionAskSpecialistModal", {
+ artworkId: this.props.artwork.internalID,
+ })
+ }
+
+ @track(() => ({
+ action_type: Schema.ActionType.Click,
+ subject: Schema.Subject.BNMOAskSpecialist,
+ type: Schema.Type.Link,
+ }))
+ onClickBuyNowAskSpecialist() {
+ this.props.mediator &&
+ this.props.mediator.trigger &&
+ this.props.mediator.trigger("openBuyNowAskSpecialistModal", {
+ artworkId: this.props.artwork.internalID,
+ })
+ }
+
+ @track(() => ({
+ action_type: Schema.ActionType.Click,
+ subject: Schema.Subject.ConsignLearnMore,
+ type: Schema.Type.Link,
+ }))
+ onClickConsign() {
+ window.open(sd.APP_URL + "/consign", "_blank")
+ }
+
+ conditionsOfSaleText() {
+ const first = "By placing your bid you agree to Artsy's "
+ if (
+ !this.props.artwork.sale.isBenefit &&
+ !!this.props.artwork.sale.partner
+ ) {
+ const partnerName = this.props.artwork.sale.partner.name
+ const possessivePartnerName = partnerName.endsWith("'s")
+ ? partnerName
+ : partnerName + "'s"
+ return first + "and " + possessivePartnerName + " "
+ } else {
+ return first
+ }
+ }
+
+ renderAuctionTerms() {
+ return (
+
+ {this.conditionsOfSaleText()}
+
+ )
+ }
+ renderAuctionQuestionsLine() {
+ return (
+
+ Have a question? Read our{" "}
+
+ )
+ }
+ renderForSaleQuestionsLine() {
+ const { is_acquireable, is_inquireable } = this.props.artwork
+
+ if (is_acquireable)
+ return (
+
+ Have a question?{" "}
+
+ )
+
+ if (is_inquireable)
+ return (
+
+ Have a question?{" "}
+
+ )
+ }
+
+ renderConsignmentsLine(artistsCount) {
+ return (
+
+ Want to sell a work by{" "}
+ {artistsCount === 1 ? "this artist" : "these artists"}?{" "}
+
+ )
+ }
+
+ render() {
+ const { artwork } = this.props
+ const consignableArtistsCount = artwork.artists.filter(
+ artist => artist.is_consignable
+ ).length
+ const isInOpenAuction =
+ artwork.is_in_auction && artwork.sale && !artwork.sale.is_closed
+ const renderQuestionsLine = artwork.is_for_sale || isInOpenAuction
+ if (!renderQuestionsLine && !!!consignableArtistsCount) return null
+
+ return (
+
+
+ )
+ }
+}
+
+export const ArtworkSidebarExtraLinks: SFC = props => {
+ const { mediator } = useContext(SystemContext)
+ return
+ {lotLabel && (
+
+ Lot {lotLabel}
+
+ )}
+
+ )
+ }
+}
+
+export const ArtworkSidebarMetadataFragmentContainer = createFragmentContainer(
+ ArtworkSidebarMetadata,
+ {
+ artwork: graphql`
+ fragment ArtworkSidebarMetadata_artwork on Artwork {
+ is_biddable: isBiddable
+ edition_sets: editionSets {
+ __typename
+ }
+ sale_artwork: saleArtwork {
+ lot_label: lotLabel
+ }
+ ...ArtworkSidebarTitleInfo_artwork
+ ...ArtworkSidebarSizeInfo_piece
+ ...ArtworkSidebarClassification_artwork
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarPartnerInfo.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarPartnerInfo.tsx
new file mode 100644
index 00000000000..2492f3bd1d1
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarPartnerInfo.tsx
@@ -0,0 +1,97 @@
+import { Box, Flex, LocationIcon, Serif, Spacer } from "@artsy/palette"
+import { filterLocations } from "v2/Apps/Artwork/Utils/filterLocations"
+import React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+
+import { ArtworkSidebarPartnerInfo_artwork } from "v2/__generated__/ArtworkSidebarPartnerInfo_artwork.graphql"
+
+export interface ArtworkSidebarPartnerInfoProps {
+ artwork: ArtworkSidebarPartnerInfo_artwork
+}
+
+export class ArtworkSidebarPartnerInfo extends React.Component<
+ ArtworkSidebarPartnerInfoProps
+ > {
+ renderPartnerName() {
+ const sale = this.props.artwork.sale
+ if (sale) {
+ return (
+
+ {sale.name}
+
+ )
+ }
+
+ const partner = this.props.artwork.partner
+ if (!partner) {
+ return null
+ }
+
+ return partner.href ? (
+
+ {partner.name}
+
+ ) : (
+
+ {partner.name}
+
+ )
+ }
+ renderLocations(locationNames) {
+ return (
+
+ {locationNames.join(", ")}
+
+ )
+ }
+
+ render() {
+ const { artwork } = this.props
+ const locationNames =
+ artwork &&
+ artwork.partner &&
+ artwork.partner.locations &&
+ artwork.partner.locations.length > 0 &&
+ filterLocations(artwork.partner.locations)
+ return (
+
+
+
+
+
+
+ {this.renderLocations(locationNames)}
+
+
+
+ )}
+
+ )
+ }
+}
+
+export const ArtworkSidebarPartnerInfoFragmentContainer = createFragmentContainer(
+ ArtworkSidebarPartnerInfo,
+ {
+ artwork: graphql`
+ fragment ArtworkSidebarPartnerInfo_artwork on Artwork {
+ partner {
+ name
+ href
+ locations {
+ city
+ }
+ }
+ sale {
+ name
+ href
+ }
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarSizeInfo.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarSizeInfo.tsx
new file mode 100644
index 00000000000..26a683663ac
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarSizeInfo.tsx
@@ -0,0 +1,47 @@
+import { Box, Serif } from "@artsy/palette"
+import React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+
+import { ArtworkSidebarSizeInfo_piece } from "v2/__generated__/ArtworkSidebarSizeInfo_piece.graphql"
+
+export interface ArtworkSidebarSizeInfoProps {
+ piece: ArtworkSidebarSizeInfo_piece
+}
+
+export class ArtworkSidebarSizeInfo extends React.Component<
+ ArtworkSidebarSizeInfoProps
+ > {
+ render() {
+ const {
+ piece: { dimensions, edition_of },
+ } = this.props
+ if (
+ !(edition_of && edition_of.length) &&
+ !(dimensions && (dimensions.in || dimensions.cm))
+ ) {
+ return null
+ }
+ return (
+
+ {dimensions.in && {dimensions.in} }
+ {dimensions.cm && {dimensions.cm} }
+ {edition_of && {edition_of} }
+
+ )
+ }
+}
+
+export const ArtworkSidebarSizeInfoFragmentContainer = createFragmentContainer(
+ ArtworkSidebarSizeInfo,
+ {
+ piece: graphql`
+ fragment ArtworkSidebarSizeInfo_piece on Sellable {
+ dimensions {
+ in
+ cm
+ }
+ edition_of: editionOf
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarTitleInfo.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarTitleInfo.tsx
new file mode 100644
index 00000000000..01a44e6e09a
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarTitleInfo.tsx
@@ -0,0 +1,41 @@
+import { Box, Serif } from "@artsy/palette"
+import React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+
+import { ArtworkSidebarTitleInfo_artwork } from "v2/__generated__/ArtworkSidebarTitleInfo_artwork.graphql"
+
+export interface ArtworkSidebarTitleInfoProps {
+ artwork: ArtworkSidebarTitleInfo_artwork
+}
+
+export class ArtworkSidebarTitleInfo extends React.Component<
+ ArtworkSidebarTitleInfoProps
+ > {
+ render() {
+ const { artwork } = this.props
+ return (
+
+
+ {artwork.title}
+ {artwork.date &&
+ artwork.date.replace(/\s+/g, "").length > 0 &&
+ ", " + artwork.date}
+
+ {artwork.medium && {artwork.medium} }
+
+ )
+ }
+}
+
+export const ArtworkSidebarTitleInfoFragmentContainer = createFragmentContainer(
+ ArtworkSidebarTitleInfo,
+ {
+ artwork: graphql`
+ fragment ArtworkSidebarTitleInfo_artwork on Artwork {
+ title
+ date
+ medium
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarArtists.story.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarArtists.story.tsx
new file mode 100644
index 00000000000..be944485ed4
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarArtists.story.tsx
@@ -0,0 +1,43 @@
+import {
+ MultipleArtists,
+ SingleFollowedArtist,
+ SingleNonFollowedArtist,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarArtists"
+import { ArtworkSidebarArtistsFragmentContainer as Artists } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarArtists"
+import { MockRelayRenderer } from "v2/DevTools"
+import React from "react"
+import { graphql } from "react-relay"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+
+const MockArtworkSidebarArtists = ({ artwork }) => {
+ return (
+
+
+
+
+
+ )
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarAuctionPartnerInfo.story.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarAuctionPartnerInfo.story.tsx
new file mode 100644
index 00000000000..48e373779ec
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarAuctionPartnerInfo.story.tsx
@@ -0,0 +1,36 @@
+import {
+ ArtworkAuctionPreview,
+ ArtworkClosedAuction,
+ ArtworkNoEstimateNoPremium,
+ ArtworkWithEstimateAndPremium,
+ ArtworkWithEstimateNoPremium,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarAuctionPartnerInfo"
+import { ArtworkSidebarAuctionPartnerInfo as AuctionPartnerInfo } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarAuctionPartnerInfo"
+import React from "react"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+
+storiesOf("Apps/Artwork/Components/Sidebar", module).add(
+ "AuctionPartnerInfo",
+ () => {
+ return (
+
+
+
+
+
+
+
+ )
+ }
+)
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarBidActionStory.story.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarBidActionStory.story.tsx
new file mode 100644
index 00000000000..8a43ead1fd3
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarBidActionStory.story.tsx
@@ -0,0 +1,444 @@
+import {
+ ArtworkFromAuctionPreview,
+ ArtworkFromClosedAuction,
+ ArtworkFromLiveAuctionRegistrationClosed,
+ ArtworkFromLiveAuctionRegistrationOpen,
+ ArtworkFromTimedAuctionRegistrationClosed,
+ ArtworkFromTimedAuctionRegistrationOpen,
+ BidderPendingApproval,
+ IDVedUser,
+ NotIDVedUser,
+ NotRegisteredToBid,
+ RegistedBidderWithBids,
+ RegisteredBidder,
+ SaleRequiringIDV,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarBidAction"
+import { ArtworkSidebarBidAction as BidAction } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarBidAction"
+import { merge as _merge } from "lodash"
+import React from "react"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+
+const merge: (...args: object[]) => any = _merge
+
+storiesOf("Apps/Artwork/Components/Sidebar", module).add("BidAction", () => {
+ return (
+
+ {/* Auction in preview state */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Auction in Open state and live bidding is not started */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Auction in Open state and live bidding is in progress */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Auction in Closed */}
+
+
+ )
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarClassification.story.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarClassification.story.tsx
new file mode 100644
index 00000000000..51276417bdd
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarClassification.story.tsx
@@ -0,0 +1,24 @@
+import {
+ ArtworkWithClassification,
+ ArtworkWithoutClassification,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarClassification"
+import { ArtworkSidebarClassification as Classification } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarClassification"
+import React from "react"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+
+storiesOf("Apps/Artwork/Components/Sidebar", module).add(
+ "Classification",
+ () => {
+ return (
+
+
+
+
+ )
+ }
+)
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarCommercial.story.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarCommercial.story.tsx
new file mode 100644
index 00000000000..84a1093de31
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarCommercial.story.tsx
@@ -0,0 +1,90 @@
+import {
+ ArtworkBuyNow,
+ ArtworkBuyNowMakeOffer,
+ ArtworkBuyNowSoldWithMultipleEditions,
+ ArtworkBuyNowWithMultipleEditions,
+ ArtworkMakeOffer,
+ ArtworkSold,
+ ContactForPriceWork,
+ ForSaleArtworkNoEditions,
+ ForSaleArtworkWithMultipleEditions,
+ ForSaleArtworkWithOneEdition,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarCommercial"
+import { ArtworkSidebarCommercialFragmentContainer as Commercial } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarCommercial"
+import { MockRelayRenderer } from "v2/DevTools"
+import React from "react"
+import { graphql } from "react-relay"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+
+const MockArtworkSidebarCommercial = ({ artwork }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+)
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarExtraLinks.story.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarExtraLinks.story.tsx
new file mode 100644
index 00000000000..33ab01ac4f7
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarExtraLinks.story.tsx
@@ -0,0 +1,66 @@
+import {
+ AcquireableArtworkWithOneConsignableArtist,
+ InquireableArtworkWithMultipleConsignableArtists,
+ InquireableArtworkWithNoConsignableArtists,
+ InquireableArtworkWithOneConsignableArtist,
+ LiveAuctionArtwork,
+ NotForSaleArtworkWithMultipleConsignableArtist,
+ NotForSaleArtworkWithNoConsignableArtists,
+ NotForSaleArtworkWithOneConsignableArtist,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarExtraLinks"
+import { ArtworkSidebarExtraLinks as ExtraLinks } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarExtraLinks"
+import React from "react"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+
+storiesOf("Apps/Artwork/Components/Sidebar", module).add("ExtraLinks", () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarMetadata.story.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarMetadata.story.tsx
new file mode 100644
index 00000000000..950d36819d9
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarMetadata.story.tsx
@@ -0,0 +1,69 @@
+import {
+ EmptyMetadataMultipleEditionSets,
+ EmptyMetadataNoEditions,
+ EmptyMetadataOneEditionSet,
+ FilledOutMetadataMultipleEditionSets,
+ FilledOutMetadataNoEditions,
+ FilledOutMetadataOneEditionSet,
+ MetadataForAuctionWork,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarMetadata"
+import { ArtworkSidebarMetadataFragmentContainer as Metadata } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarMetadata"
+import { MockRelayRenderer } from "v2/DevTools"
+import React from "react"
+import { graphql } from "react-relay"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+
+const MockArtworkSidebarMetadata = ({ artwork }) => {
+ return (
+
+
+
+
+
+
+
+
+
+ )
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarPartnerInfo.story.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarPartnerInfo.story.tsx
new file mode 100644
index 00000000000..6ff39583b61
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarPartnerInfo.story.tsx
@@ -0,0 +1,25 @@
+import {
+ ArtworkFromPartnerWithLocations,
+ ArtworkFromPartnerWithoutLocations,
+ ArtworkWithCollectingInstitution,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarPartnerInfo"
+import { ArtworkSidebarPartnerInfo as PartnerInfo } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarPartnerInfo"
+import React from "react"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+
+storiesOf("Apps/Artwork/Components/Sidebar", module).add("PartnerInfo", () => {
+ return (
+
+
+
+
+
+ )
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarSizeInfo.story.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarSizeInfo.story.tsx
new file mode 100644
index 00000000000..530c4a2e2c7
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarSizeInfo.story.tsx
@@ -0,0 +1,25 @@
+import {
+ ArtworkWithEditionOfOnly,
+ ArtworkWithSizeAndEditionOf,
+ ArtworkWithSizeOnly,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarSizeInfo"
+import { ArtworkSidebarSizeInfo as SizeInfo } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarSizeInfo"
+import React from "react"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+
+storiesOf("Apps/Artwork/Components/Sidebar", module).add("SizeInfo", () => {
+ return (
+
+
+
+
+
+ )
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarTitleInfo.story.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarTitleInfo.story.tsx
new file mode 100644
index 00000000000..ed11f81343e
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__stories__/ArtworkSidebarTitleInfo.story.tsx
@@ -0,0 +1,29 @@
+import {
+ ArtworkWithTitlAndDate,
+ ArtworkWithTitleAndMedium,
+ ArtworkWithTitleDateAndMedium,
+ ArtworkWithTitleOnly,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarTitleInfo"
+import { ArtworkSidebarTitleInfo as TitleInfo } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarTitleInfo"
+import React from "react"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+
+storiesOf("Apps/Artwork/Components/Sidebar", module).add("TitleInfo", () => {
+ return (
+
+
+
+
+
+
+ )
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebar.jest.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebar.jest.tsx
new file mode 100644
index 00000000000..817a36088b4
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebar.jest.tsx
@@ -0,0 +1,42 @@
+import { ArtworkSidebar_Test_QueryRawResponse } from "v2/__generated__/ArtworkSidebar_Test_Query.graphql"
+import { ArtworkSidebarFixture } from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar"
+import { ArtworkSidebarFragmentContainer } from "v2/Apps/Artwork/Components/ArtworkSidebar"
+import { ArtworkSidebarArtists } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarArtists"
+import { ArtworkSidebarMetadata } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarMetadata"
+import { renderRelayTree } from "v2/DevTools"
+import { graphql } from "react-relay"
+
+jest.unmock("react-relay")
+
+describe("ArtworkSidebar", () => {
+ const getWrapper = async (
+ response: ArtworkSidebar_Test_QueryRawResponse["artwork"] = ArtworkSidebarFixture
+ ) => {
+ return await renderRelayTree({
+ Component: ArtworkSidebarFragmentContainer,
+ query: graphql`
+ query ArtworkSidebar_Test_Query @raw_response_type {
+ artwork(id: "josef-albers-homage-to-the-square-85") {
+ ...ArtworkSidebar_artwork
+ }
+ }
+ `,
+ mockData: {
+ artwork: response,
+ } as ArtworkSidebar_Test_QueryRawResponse,
+ })
+ }
+
+ let wrapper
+
+ beforeAll(async () => {
+ wrapper = await getWrapper()
+ })
+
+ it("renders ArtworkSidebarArtists component", () => {
+ expect(wrapper.find(ArtworkSidebarArtists).length).toBe(1)
+ })
+ it("renders Metadata component", () => {
+ expect(wrapper.find(ArtworkSidebarMetadata).length).toBe(1)
+ })
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarArtists.jest.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarArtists.jest.tsx
new file mode 100644
index 00000000000..bc9e967097c
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarArtists.jest.tsx
@@ -0,0 +1,125 @@
+import { ArtworkSidebarArtists_Test_QueryRawResponse } from "v2/__generated__/ArtworkSidebarArtists_Test_Query.graphql"
+import {
+ CulturalMakerWork,
+ MultipleArtists,
+ SingleFollowedArtist,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarArtists"
+import { ArtworkSidebarArtistsFragmentContainer } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarArtists"
+import { Mediator, SystemContextProvider } from "v2/Artsy"
+import { FollowArtistButton } from "v2/Components/FollowButton/FollowArtistButton"
+import { renderRelayTree } from "v2/DevTools"
+import React from "react"
+import { graphql } from "react-relay"
+
+jest.unmock("react-relay")
+
+describe("ArtworkSidebarArtists", () => {
+ let mediator: Mediator
+ beforeEach(() => {
+ mediator = { trigger: jest.fn() }
+ Object.defineProperty(window, "location", {
+ writable: true,
+ value: { assign: jest.fn() },
+ })
+ })
+
+ const getWrapper = async (
+ response: ArtworkSidebarArtists_Test_QueryRawResponse["artwork"] = SingleFollowedArtist,
+ context = { mediator, user: null }
+ ) => {
+ return await renderRelayTree({
+ Component: ({ artwork }: any) => {
+ return (
+
+
+ )
+ },
+ query: graphql`
+ query ArtworkSidebarArtists_Test_Query @raw_response_type {
+ artwork(id: "josef-albers-homage-to-the-square-85") {
+ ...ArtworkSidebarArtists_artwork
+ }
+ }
+ `,
+ mockData: {
+ artwork: response,
+ } as ArtworkSidebarArtists_Test_QueryRawResponse,
+ })
+ }
+
+ let wrapper
+
+ describe("ArtworkSidebarArtists with one artist", () => {
+ beforeEach(async () => {
+ wrapper = await getWrapper()
+ })
+
+ it("displays artist name for single artist", () => {
+ expect(wrapper.html()).toContain("Josef Albers")
+ expect(wrapper.find({ href: "/artist/josef-albers" }).length).toBe(1)
+ })
+
+ it("renders artist follow button for single artist", () => {
+ expect(wrapper.find(FollowArtistButton)).toHaveLength(1)
+ expect(wrapper.find(FollowArtistButton).text()).not.toMatch("Following")
+ })
+
+ it("Opens auth with expected args when following an artist", () => {
+ wrapper
+ .find(FollowArtistButton)
+ .at(0)
+ .simulate("click")
+ expect(mediator.trigger).toBeCalledWith("open:auth", {
+ afterSignUpAction: {
+ action: "follow",
+ kind: "artist",
+ objectId: "josef-albers",
+ },
+ contextModule: "artworkSidebar",
+ copy: "Sign up to follow Josef Albers",
+ intent: "followArtist",
+ mode: "signup",
+ })
+ })
+ })
+
+ describe("ArtworkSidebarArtists with multiple artists", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper(MultipleArtists)
+ })
+
+ it("displays artist names for multiople artists", () => {
+ expect(wrapper.html()).toContain("Josef Albers")
+ expect(
+ wrapper.find({
+ href: "/artist/josef-albers",
+ }).length
+ ).toBe(1)
+ expect(wrapper.html()).toContain("Ed Ruscha")
+ expect(
+ wrapper.find({
+ href: "/artist/ed-ruscha",
+ }).length
+ ).toBe(1)
+ })
+
+ it("does not display follow buttons", () => {
+ expect(wrapper.html()).not.toContain(FollowArtistButton)
+ })
+
+ it("separates artist names by comma", () => {
+ expect(wrapper.text()).toBe("Josef Albers, Ed Ruscha")
+ })
+ })
+
+ describe("ArtworkSidebarArtists with cultural maker work", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper(CulturalMakerWork)
+ })
+
+ it("displays cultural maker", () => {
+ expect(wrapper.html()).toContain("American 18th Century")
+ })
+ })
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarAuctionPartnerInfo.jest.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarAuctionPartnerInfo.jest.tsx
new file mode 100644
index 00000000000..efb76cb66c4
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarAuctionPartnerInfo.jest.tsx
@@ -0,0 +1,74 @@
+import { ArtworkSidebarAuctionPartnerInfo_Test_QueryRawResponse } from "v2/__generated__/ArtworkSidebarAuctionPartnerInfo_Test_Query.graphql"
+import { ArtworkWithEstimateAndPremium } from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarAuctionPartnerInfo"
+import { ArtworkSidebarAuctionPartnerInfoFragmentContainer } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarAuctionPartnerInfo"
+import { renderRelayTree } from "v2/DevTools"
+import { graphql } from "react-relay"
+
+jest.unmock("react-relay")
+
+describe("ArtworkSidebarAuctionPartnerInfo", () => {
+ const getWrapper = async (
+ response: ArtworkSidebarAuctionPartnerInfo_Test_QueryRawResponse["artwork"]
+ ) => {
+ return renderRelayTree({
+ Component: ArtworkSidebarAuctionPartnerInfoFragmentContainer,
+ query: graphql`
+ query ArtworkSidebarAuctionPartnerInfo_Test_Query @raw_response_type {
+ artwork(id: "auction_artwork_estimate_premium") {
+ ...ArtworkSidebarAuctionPartnerInfo_artwork
+ }
+ }
+ `,
+ mockData: {
+ artwork: response,
+ } as ArtworkSidebarAuctionPartnerInfo_Test_QueryRawResponse,
+ })
+ }
+
+ describe("ArtworkSidebarAuctionPartnerInfo", () => {
+ it("displays partner name and estimate", async () => {
+ const wrapper = await getWrapper(ArtworkWithEstimateAndPremium)
+
+ expect(wrapper.text()).toContain("Bruun Rasmussen")
+ expect(wrapper.text()).toContain(
+ "Estimated value: DKK 100,000–DKK 125,000"
+ )
+ })
+
+ xit("displays artwork without premium", async () => {
+ const wrapper = await getWrapper({
+ ...ArtworkWithEstimateAndPremium,
+ sale: {
+ ...ArtworkWithEstimateAndPremium.sale,
+ // FIXME: This selection doesn't seem to exist, is this test obsolete?
+ // is_with_buyers_premium: null,
+ },
+ })
+
+ expect(wrapper.text()).not.toContain("buyer's premium")
+ })
+
+ it("displays artwork without estimate", async () => {
+ const wrapper = await getWrapper({
+ ...ArtworkWithEstimateAndPremium,
+ sale_artwork: {
+ ...ArtworkWithEstimateAndPremium.sale_artwork,
+ estimate: null,
+ },
+ })
+
+ expect(wrapper.text()).not.toContain("Estimated value")
+ })
+
+ it("does not display anything for closed auctions", async () => {
+ const wrapper = await getWrapper({
+ ...ArtworkWithEstimateAndPremium,
+ sale: {
+ ...ArtworkWithEstimateAndPremium.sale,
+ is_closed: true,
+ },
+ })
+ expect(wrapper.html()).toBeFalsy()
+ })
+ })
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarBidAction.jest.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarBidAction.jest.tsx
new file mode 100644
index 00000000000..6f5327eebe4
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarBidAction.jest.tsx
@@ -0,0 +1,615 @@
+import { ArtworkSidebarBidAction_Test_QueryRawResponse } from "v2/__generated__/ArtworkSidebarBidAction_Test_Query.graphql"
+import {
+ ArtworkFromAuctionPreview,
+ ArtworkFromClosedAuction,
+ ArtworkFromLiveAuctionRegistrationClosed,
+ ArtworkFromLiveAuctionRegistrationOpen,
+ ArtworkFromTimedAuctionRegistrationClosed,
+ ArtworkFromTimedAuctionRegistrationOpen,
+ BidderPendingApproval,
+ IDVedUser,
+ NotIDVedUser,
+ NotRegisteredToBid,
+ NoUser,
+ RegistedBidderWithBids,
+ RegisteredBidder,
+ SaleRequiringIDV,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarBidAction"
+import { ArtworkSidebarBidActionFragmentContainer } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarBidAction"
+import { renderRelayTree } from "v2/DevTools"
+import { merge } from "lodash"
+import { graphql } from "react-relay"
+
+jest.unmock("react-relay")
+
+describe("ArtworkSidebarBidAction", () => {
+ const getWrapper = async (
+ response: ArtworkSidebarBidAction_Test_QueryRawResponse
+ ) => {
+ return renderRelayTree({
+ Component: ArtworkSidebarBidActionFragmentContainer,
+ query: graphql`
+ query ArtworkSidebarBidAction_Test_Query @raw_response_type {
+ artwork(id: "auction_artwork") {
+ ...ArtworkSidebarBidAction_artwork
+ }
+ me {
+ ...ArtworkSidebarBidAction_me
+ }
+ }
+ `,
+ mockData: {
+ artwork: response.artwork,
+ me: response.me,
+ } as ArtworkSidebarBidAction_Test_QueryRawResponse,
+ })
+ }
+
+ describe("for closed auction", () => {
+ it("does not display anything", async () => {
+ const wrapper = await getWrapper({
+ artwork: ArtworkFromClosedAuction,
+ me: NotIDVedUser,
+ })
+
+ expect(wrapper.html()).toBeFalsy()
+ })
+ })
+
+ describe("for auction preview", () => {
+ it("and not registered bidder", async () => {
+ const wrapper = await getWrapper({
+ artwork: ArtworkFromAuctionPreview,
+ me: NotIDVedUser,
+ })
+
+ expect(wrapper.text()).toContain("Register to bid")
+ })
+
+ it("with bidder registration pending approval", async () => {
+ const artwork = merge(ArtworkFromAuctionPreview, BidderPendingApproval)
+ const wrapper = await getWrapper({
+ artwork,
+ me: NotIDVedUser,
+ })
+
+ expect(wrapper.text()).toContain("Registration pending")
+ })
+
+ it("with registered bidder", async () => {
+ const artwork = merge({}, ArtworkFromAuctionPreview, RegisteredBidder)
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).toContain("Registration complete")
+ })
+
+ describe("when the sale requires identity verification", () => {
+ describe("when there is no logged in user", () => {
+ it("displays that identity verification is required to bid", async () => {
+ const me = NoUser
+ const SaleWithArtwork = merge(ArtworkFromAuctionPreview, {
+ sale: SaleRequiringIDV,
+ })
+ const artwork = merge(SaleWithArtwork, NotRegisteredToBid)
+
+ const wrapper = await getWrapper({ artwork, me })
+
+ expect(wrapper.text()).toContain(
+ "Identity verification required to bid."
+ )
+ })
+ })
+
+ describe("when there is a logged in user", () => {
+ describe("when the user has not attempted to register to bid", () => {
+ describe("when the user is identity verified", () => {
+ it("does not display that identity verification is required to bid", async () => {
+ const me = IDVedUser
+ const SaleWithArtwork = merge(ArtworkFromAuctionPreview, {
+ sale: SaleRequiringIDV,
+ })
+ const artwork = merge(SaleWithArtwork, NotRegisteredToBid)
+ const wrapper = await getWrapper({ artwork, me })
+
+ expect(wrapper.text()).not.toContain(
+ "Identity verification required to bid."
+ )
+ })
+ })
+
+ describe("when the user is not identity verified", () => {
+ it("displays that identity verification is required to bid", async () => {
+ const artwork = merge(
+ ArtworkFromAuctionPreview,
+ NotRegisteredToBid,
+ {
+ sale: SaleRequiringIDV,
+ }
+ )
+ const me = NotIDVedUser
+ const wrapper = await getWrapper({ artwork, me })
+
+ expect(wrapper.text()).toContain(
+ "Identity verification required to bid."
+ )
+ })
+
+ it("displays a 'Register to bid' button", async () => {
+ const artwork = merge(
+ ArtworkFromAuctionPreview,
+ NotRegisteredToBid,
+ {
+ sale: SaleRequiringIDV,
+ }
+ )
+ const me = NotIDVedUser
+ const wrapper = await getWrapper({ artwork, me })
+
+ expect(wrapper.text()).toContain("Register to bid")
+ })
+ })
+ })
+
+ describe("when the user has attempted to register to bid", () => {
+ describe("when the user is identity verified", () => {
+ it("does not display that identity verification is required to bid", async () => {
+ const me = IDVedUser
+ const SaleWithArtwork = merge(ArtworkFromAuctionPreview, {
+ sale: SaleRequiringIDV,
+ })
+ const artwork = merge(SaleWithArtwork, BidderPendingApproval)
+ const wrapper = await getWrapper({ artwork, me })
+
+ expect(wrapper.text()).not.toContain(
+ "Identity verification required to bid."
+ )
+ })
+ })
+
+ describe("when the user is not identity verified", () => {
+ it("displays that identity verification is required to bid", async () => {
+ const artwork = merge(
+ ArtworkFromAuctionPreview,
+ BidderPendingApproval
+ )
+
+ const wrapper = await getWrapper({
+ artwork,
+ me: NotIDVedUser,
+ })
+
+ expect(wrapper.text()).toContain(
+ "Identity verification required to bid."
+ )
+ })
+ })
+ })
+ })
+ })
+ })
+
+ describe("for an online-only (timed) auction", () => {
+ describe("with registration open", () => {
+ it("allows the user to place a max bid when the user has not tried to register", async () => {
+ const artwork = merge(
+ ArtworkFromTimedAuctionRegistrationOpen,
+ NotRegisteredToBid
+ )
+ const data: ArtworkSidebarBidAction_Test_QueryRawResponse = {
+ artwork,
+ me: NotIDVedUser,
+ }
+ const wrapper = await getWrapper(data)
+
+ expect(wrapper.text()).toContain("Place max bid")
+ expect(wrapper.text()).toContain("$900")
+ expect(wrapper.text()).toContain("Bid")
+ })
+
+ it("allows the user to place a max bid when the user is a registered bidder", async () => {
+ const artwork = merge(
+ ArtworkFromTimedAuctionRegistrationOpen,
+ RegisteredBidder
+ )
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).toContain("Place max bid")
+ expect(wrapper.text()).toContain("$900")
+ expect(wrapper.text()).toContain("Bid")
+ })
+
+ it("allows the user to increase their max bid after an initial max bid", async () => {
+ const artwork = merge(
+ ArtworkFromTimedAuctionRegistrationOpen,
+ RegistedBidderWithBids
+ )
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).toContain("Place max bid")
+ expect(wrapper.text()).toContain("$900")
+ expect(wrapper.text()).toContain("Increase max bid")
+ })
+
+ it("displays 'Registration Pending' when the user is a pending bidder", async () => {
+ const artwork = merge(
+ ArtworkFromTimedAuctionRegistrationOpen,
+ BidderPendingApproval
+ )
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).toContain("Registration pending")
+ })
+
+ describe("when the sale requires identity verification", () => {
+ describe("when the user is not identity verified", () => {
+ describe("when user has not tried to register", () => {
+ it("allows user to 'Register to bid', but not place a max bid", async () => {
+ const artwork = merge(
+ ArtworkFromTimedAuctionRegistrationOpen,
+ NotRegisteredToBid,
+ { sale: SaleRequiringIDV }
+ )
+
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).toContain("Register to bid")
+ expect(wrapper.text()).not.toContain("Place max bid")
+ })
+
+ it("displays that identity verification is required to bid", async () => {
+ const artwork = merge(
+ ArtworkFromTimedAuctionRegistrationOpen,
+ NotRegisteredToBid,
+ { sale: SaleRequiringIDV }
+ )
+
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).toContain(
+ "Identity verification required to bid."
+ )
+ })
+ })
+
+ describe("when the user is a pending bidder", () => {
+ it("displays 'Registration Pending'", async () => {
+ const artwork = merge(
+ ArtworkFromTimedAuctionRegistrationOpen,
+ BidderPendingApproval,
+ { sale: SaleRequiringIDV }
+ )
+
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).toContain("Registration pending")
+ })
+
+ it("displays that identity verification is required to bid", async () => {
+ const artwork = merge(
+ ArtworkFromTimedAuctionRegistrationOpen,
+ BidderPendingApproval,
+ { sale: SaleRequiringIDV }
+ )
+
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).toContain(
+ "Identity verification required to bid."
+ )
+ })
+ })
+
+ describe("corner case: when the bidder is approved (bidder manually approved by admin)", () => {
+ it("allows the user to bid", async () => {
+ const artwork = merge(
+ ArtworkFromTimedAuctionRegistrationOpen,
+ RegisteredBidder,
+ { sale: SaleRequiringIDV }
+ )
+
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).toContain("Place max bid")
+ expect(wrapper.text()).toContain("$900")
+ expect(wrapper.text()).toContain("Place max bid")
+ })
+
+ it("does not display anything about identity verification", async () => {
+ const artwork = merge(
+ ArtworkFromTimedAuctionRegistrationOpen,
+ RegisteredBidder,
+ { sale: SaleRequiringIDV }
+ )
+
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).not.toContain(
+ "Identity verification required to bid."
+ )
+ })
+ })
+ })
+ describe("when the user is identity verified", () => {
+ it("does not display anything about identity verification", async () => {
+ const artwork = merge(
+ ArtworkFromTimedAuctionRegistrationOpen,
+ NotRegisteredToBid,
+ { sale: SaleRequiringIDV }
+ )
+
+ const wrapper = await getWrapper({ artwork, me: IDVedUser })
+
+ expect(wrapper.text()).not.toContain(
+ "Identity verification required to bid."
+ )
+ })
+ })
+ })
+ })
+
+ describe("with registration closed", () => {
+ it("displays 'Registration Closed' and doesn't allow the user to bid unless already registered", async () => {
+ const artwork = merge(
+ ArtworkFromTimedAuctionRegistrationClosed,
+ NotRegisteredToBid
+ )
+ const wrapper = await getWrapper({
+ artwork,
+ me: NotIDVedUser,
+ })
+
+ expect(wrapper.text()).toContain("Registration closed")
+ })
+
+ it("displays registration pending if the user is a pending bidder", async () => {
+ const artwork = merge(
+ ArtworkFromTimedAuctionRegistrationClosed,
+ BidderPendingApproval
+ )
+ const wrapper = await getWrapper({
+ artwork,
+ me: NotIDVedUser,
+ })
+
+ expect(wrapper.text()).toContain("Registration pending")
+ })
+
+ it("allows users to place bids if they are already a registered bidder", async () => {
+ const artwork = merge(
+ ArtworkFromTimedAuctionRegistrationClosed,
+ RegisteredBidder
+ )
+ const wrapper = await getWrapper({
+ artwork,
+ me: NotIDVedUser,
+ })
+
+ expect(wrapper.text()).toContain("Place max bid")
+ expect(wrapper.text()).toContain("$900")
+ expect(wrapper.text()).toContain("Bid")
+ })
+
+ describe("when the sale requires identity verification", () => {
+ describe("when the user has not tried to register", () => {
+ it("does not display anything about identity verification even if the user is not identity verified", async () => {
+ const artwork = merge(
+ ArtworkFromTimedAuctionRegistrationClosed,
+ NotRegisteredToBid,
+ { sale: SaleRequiringIDV }
+ )
+
+ const wrapper = await getWrapper({
+ artwork,
+ me: NotIDVedUser,
+ })
+
+ expect(wrapper.text()).toContain("Registration closed")
+ expect(wrapper.text()).not.toContain(
+ "Identity verification required to bid."
+ )
+ })
+ })
+
+ describe("when the user is a pending bidder", () => {
+ describe("when the user is not identity verified", () => {
+ it("displays that identity verification is required to bid", async () => {
+ const artwork = merge(
+ ArtworkFromTimedAuctionRegistrationClosed,
+ BidderPendingApproval,
+ { sale: SaleRequiringIDV }
+ )
+
+ const wrapper = await getWrapper({
+ artwork,
+ me: NotIDVedUser,
+ })
+
+ expect(wrapper.text()).toContain("Registration pending")
+ expect(wrapper.text()).toContain(
+ "Identity verification required to bid."
+ )
+ })
+ })
+
+ describe("when the user is identity verified", () => {
+ it("does not display that identity verification is required to bid", async () => {
+ const artwork = merge(
+ ArtworkFromTimedAuctionRegistrationClosed,
+ BidderPendingApproval,
+ { sale: SaleRequiringIDV }
+ )
+
+ const wrapper = await getWrapper({
+ artwork,
+ me: IDVedUser,
+ })
+
+ expect(wrapper.text()).toContain("Registration pending")
+ expect(wrapper.text()).not.toContain(
+ "Identity verification required to bid."
+ )
+ })
+ })
+ })
+ })
+ })
+ })
+
+ describe("for live auction", () => {
+ describe("when registration is open", () => {
+ describe("when user is not registered to bid", () => {
+ it("displays that the user can enter live bidding", async () => {
+ const artwork = merge(
+ ArtworkFromLiveAuctionRegistrationOpen,
+ NotRegisteredToBid
+ )
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).toContain("Enter live bidding")
+ })
+ })
+
+ describe("when the user is pending bidder approval", () => {
+ it("displays that the user can enter live bidding", async () => {
+ const artwork = merge(
+ ArtworkFromLiveAuctionRegistrationOpen,
+ BidderPendingApproval
+ )
+
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).toContain("Enter live bidding")
+ })
+ })
+
+ describe("when user is registered to bid", () => {
+ it("displays that the user can enter live bidding", async () => {
+ const artwork = merge(
+ ArtworkFromLiveAuctionRegistrationOpen,
+ RegisteredBidder
+ )
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).toContain("Enter live bidding")
+ })
+ })
+ })
+
+ describe("when registration is closed", () => {
+ describe("when user is not registered to bid", () => {
+ it("displays that registration is closed, but user can watch live bidding", async () => {
+ const artwork = merge(
+ ArtworkFromLiveAuctionRegistrationClosed,
+ NotRegisteredToBid
+ )
+
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).toContain("Registration closed")
+ expect(wrapper.text()).toContain("Watch live bidding")
+ })
+ })
+
+ describe("when the user is pending bidder approval", () => {
+ it("displays that registration is closed, but user can watch live bidding", async () => {
+ const artwork = merge(
+ ArtworkFromLiveAuctionRegistrationClosed,
+ BidderPendingApproval
+ )
+
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).toContain("Registration closed")
+ expect(wrapper.text()).toContain("Watch live bidding")
+ })
+ })
+
+ describe("most common for live auctions: when user is registered to bid", () => {
+ it("displays that the user can enter live bidding", async () => {
+ const artwork = merge(
+ ArtworkFromLiveAuctionRegistrationClosed,
+ RegisteredBidder
+ )
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).toContain("Enter live bidding")
+ expect(wrapper.text()).not.toContain("Registration closed")
+ })
+ })
+ })
+
+ describe("when the sale requires identity verification", () => {
+ describe("when registration is open", () => {
+ describe("when the user is not identity verified", () => {
+ it("displays that identity verification is required to bid", async () => {
+ const artwork = merge(
+ ArtworkFromLiveAuctionRegistrationOpen,
+ { sale: SaleRequiringIDV },
+ NotRegisteredToBid
+ )
+
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).toContain("Enter live bidding")
+ expect(wrapper.text()).toContain(
+ "Identity verification required to bid."
+ )
+ })
+ })
+
+ describe("when user is identity verified", () => {
+ it("does not display that identity verification is required to bid", async () => {
+ const artwork = merge(
+ ArtworkFromLiveAuctionRegistrationOpen,
+ { sale: SaleRequiringIDV },
+ NotRegisteredToBid
+ )
+
+ const wrapper = await getWrapper({ artwork, me: IDVedUser })
+
+ expect(wrapper.text()).toContain("Enter live bidding")
+ expect(wrapper.text()).not.toContain(
+ "Identity verification required to bid."
+ )
+ })
+ })
+ })
+
+ describe("when registration is closed", () => {
+ describe("when the user is identity verified", () => {
+ it("does not display that identity verification is required to bid", async () => {
+ const artwork = merge(
+ ArtworkFromLiveAuctionRegistrationClosed,
+ { sale: SaleRequiringIDV },
+ NotRegisteredToBid
+ )
+
+ const wrapper = await getWrapper({ artwork, me: IDVedUser })
+
+ expect(wrapper.text()).toContain("Watch live bidding")
+ expect(wrapper.text()).not.toContain(
+ "Identity verification required to bid."
+ )
+ })
+ })
+
+ describe("when the user is not identity verified", () => {
+ it("does not display that identity verification is required to bid", async () => {
+ const artwork = merge(
+ ArtworkFromLiveAuctionRegistrationClosed,
+ { sale: SaleRequiringIDV },
+ NotRegisteredToBid
+ )
+
+ const wrapper = await getWrapper({ artwork, me: NotIDVedUser })
+
+ expect(wrapper.text()).toContain("Watch live bidding")
+ expect(wrapper.text()).not.toContain(
+ "Identity verification required to bid."
+ )
+ })
+ })
+ })
+ })
+ })
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarClassification.jest.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarClassification.jest.tsx
new file mode 100644
index 00000000000..3959d00603c
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarClassification.jest.tsx
@@ -0,0 +1,87 @@
+import { ArtworkSidebarClassification_Test_QueryRawResponse } from "v2/__generated__/ArtworkSidebarClassification_Test_Query.graphql"
+import { renderRelayTree } from "v2/DevTools"
+import { ReactWrapper } from "enzyme"
+import { graphql } from "react-relay"
+import { ArtworkSidebarClassificationFragmentContainer } from "../../ArtworkSidebar/ArtworkSidebarClassification"
+import { ClassificationLink } from "../../ArtworkSidebar/ArtworkSidebarClassification"
+
+jest.unmock("react-relay")
+
+describe("ArtworkSidebarClassification", () => {
+ let wrapper = null
+
+ const getWrapper = async (
+ response: ArtworkSidebarClassification_Test_QueryRawResponse["artwork"] = {
+ id: "opaque-artwork-id",
+ attribution_class: {
+ id: "opaque-attribution-class-id",
+ short_description: "This is a unique work",
+ },
+ }
+ ) => {
+ return renderRelayTree({
+ Component: ArtworkSidebarClassificationFragmentContainer,
+ query: graphql`
+ query ArtworkSidebarClassification_Test_Query @raw_response_type {
+ artwork(id: "josef-albers-homage-to-the-square-85") {
+ ...ArtworkSidebarClassification_artwork
+ }
+ }
+ `,
+ mockData: {
+ artwork: response,
+ } as ArtworkSidebarClassification_Test_QueryRawResponse,
+ })
+ }
+
+ describe("for artwork with classification", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper()
+ })
+
+ it("displays classification", () => {
+ expect(wrapper.html()).toContain("This is a unique work")
+ })
+
+ describe("modal pop up", () => {
+ let modalWrapper: ReactWrapper
+
+ beforeAll(() => {
+ wrapper
+ .find(ClassificationLink)
+ .last()
+ .simulate("click")
+ wrapper.update()
+ modalWrapper = wrapper.find("Modal")
+ })
+
+ it("shows a modal on Classification details click", () => {
+ expect(modalWrapper.length).toEqual(1)
+ })
+
+ it("renders the proper modal content", () => {
+ const html = modalWrapper.html()
+ expect(html).toContain("Unique")
+ expect(html).toContain("Limited edition")
+ expect(html).toContain("Made-to-order")
+ expect(html).toContain("Reproduction")
+ expect(html).toContain("Editioned multiple")
+ expect(html).toContain("Non-editioned multiple")
+ expect(html).toContain("Ephemera")
+ })
+ })
+ })
+
+ describe("for artwork without classification", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper({
+ id: "opaque-artwork-id",
+ attribution_class: null,
+ })
+ })
+
+ it("does not render anything", () => {
+ expect(wrapper.html()).toBeFalsy()
+ })
+ })
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarCommercial.jest.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarCommercial.jest.tsx
new file mode 100644
index 00000000000..b2f5bb467f0
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarCommercial.jest.tsx
@@ -0,0 +1,246 @@
+import {
+ ArtworkBuyNow,
+ ArtworkBuyNowMakeOffer,
+ ArtworkMakeOffer,
+ ArtworkOfferableAndInquireable,
+ ArtworkSingleEditionHiddenAvailability,
+ ArtworkSold,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarCommercial"
+
+import {
+ OfferOrderWithFailure,
+ OfferOrderWithSuccess,
+ OrderWithFailure,
+ OrderWithSuccess,
+} from "v2/Apps/__tests__/Fixtures/Artwork/MutationResults"
+
+import { Button } from "@artsy/palette"
+import { mount } from "enzyme"
+import React from "react"
+import { commitMutation as _commitMutation, RelayProp } from "react-relay"
+
+import { ArtworkSidebarCommercialContainer } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarCommercial"
+import { ErrorModal } from "v2/Components/Modal/ErrorModal"
+import { ModalButton } from "v2/Components/Modal/ModalDialog"
+import { MockBoot } from "v2/DevTools"
+
+const commitMutation = _commitMutation as jest.Mock
+
+describe("ArtworkSidebarCommercial", () => {
+ let user
+ const mediator = { trigger: jest.fn() }
+ const getWrapper = artwork => {
+ return mount(
+
+
+ )
+ }
+
+ beforeEach(() => {
+ user = { id: "blah" }
+ window.history.pushState({}, "Artwork Title", "/artwork/the-id")
+ commitMutation.mockReset()
+ })
+
+ describe("authentication", () => {
+ beforeEach(() => {
+ user = undefined
+ })
+
+ it("opens auth modal with expected args when clicking 'buy now' button", () => {
+ const component = getWrapper(ArtworkBuyNow)
+ component.find(Button).simulate("click")
+ expect(mediator.trigger).toBeCalledWith("open:auth", {
+ mode: "signup",
+ redirectTo: "http://localhost/artwork/the-id",
+ contextModule: "artworkSidebar",
+ intent: "buyNow",
+ })
+ })
+
+ it("opens auth modal with expected args when clicking 'make offer' button", () => {
+ const component = getWrapper(ArtworkMakeOffer)
+ component.find(Button).simulate("click")
+ expect(mediator.trigger).toBeCalledWith("open:auth", {
+ mode: "signup",
+ redirectTo: "http://localhost/artwork/the-id",
+ contextModule: "artworkSidebar",
+ intent: "makeOffer",
+ })
+ })
+ })
+ it("displays if the artwork price includes tax", async () => {
+ const artwork = Object.assign(
+ {},
+ {
+ ...ArtworkBuyNowMakeOffer,
+ priceIncludesTaxDisplay: "VAT included in price",
+ is_for_sale: true,
+ }
+ )
+
+ const wrapper = await getWrapper(artwork)
+
+ expect(wrapper.text()).toContain("VAT included in price")
+ })
+
+ it("does not display artwork price includes tax if untrue", async () => {
+ const artwork = Object.assign(
+ {},
+ {
+ ...ArtworkSingleEditionHiddenAvailability,
+ priceIncludesTaxDisplay: null,
+ }
+ )
+
+ const wrapper = await getWrapper(artwork)
+
+ expect(wrapper.text()).not.toContain("VAT included in price")
+ })
+
+ it("displays single editioned hidden availability inquire work", async () => {
+ const artwork = Object.assign({}, ArtworkSingleEditionHiddenAvailability)
+
+ const wrapper = await getWrapper(artwork)
+
+ expect(wrapper.text()).not.toContain("20 × 24 in")
+ expect(wrapper.text()).not.toContain("50.8 × 61 cm")
+ expect(wrapper.text()).toContain("Contact gallery")
+ })
+
+ it("displays artwork enrolled in Buy Now", async () => {
+ const artwork = Object.assign({}, ArtworkBuyNow)
+
+ const wrapper = await getWrapper(artwork)
+
+ expect(wrapper.text()).toContain("Buy now")
+ })
+
+ it("displays sold acquireable artwork", async () => {
+ const artwork = Object.assign({}, ArtworkSold)
+
+ const wrapper = await getWrapper(artwork)
+
+ expect(wrapper.text()).toContain("Sold")
+ })
+
+ it("displays artwork enrolled in Make Offer", async () => {
+ const artwork = Object.assign({}, ArtworkMakeOffer)
+
+ const wrapper = await getWrapper(artwork)
+
+ expect(wrapper.text()).toContain("Make offer")
+ })
+
+ it("displays artwork enrolled in Make Offer when enabled for both make offer and inquiry", async () => {
+ const artwork = Object.assign({}, ArtworkOfferableAndInquireable)
+
+ const wrapper = await getWrapper(artwork)
+
+ expect(wrapper.text()).toContain("Make offer")
+ expect(wrapper.text()).not.toContain("Contact gallery")
+ })
+
+ it("displays artwork enrolled in both Buy Now and Make Offer", async () => {
+ const artwork = Object.assign({}, ArtworkBuyNowMakeOffer)
+
+ const wrapper = await getWrapper(artwork)
+
+ expect(wrapper.text()).toContain("Buy now")
+ expect(wrapper.text()).toContain("Make offer")
+ })
+
+ it("creates a Buy Now order and redirects to the order page", () => {
+ Object.defineProperty(window, "location", {
+ writable: true,
+ value: { assign: jest.fn() },
+ })
+ const component = getWrapper(ArtworkBuyNow)
+
+ commitMutation.mockImplementationOnce((_environment, { onCompleted }) => {
+ onCompleted(OrderWithSuccess)
+ })
+
+ component.find(Button).simulate("click")
+
+ expect(commitMutation).toHaveBeenCalledTimes(1)
+ expect(window.location.assign).toHaveBeenCalledWith("/orders/orderId")
+ })
+
+ it("displays an error modal when a Buy Now mutation fails", () => {
+ Object.defineProperty(window, "location", {
+ writable: true,
+ value: { assign: jest.fn() },
+ })
+ const component = getWrapper(ArtworkBuyNow)
+
+ commitMutation.mockImplementationOnce((_environment, { onCompleted }) => {
+ onCompleted(OrderWithFailure)
+ })
+
+ component.find(Button).simulate("click")
+
+ expect(commitMutation).toHaveBeenCalledTimes(1)
+ expect(window.location.assign).not.toHaveBeenCalled()
+
+ const errorComponent = component.find(ErrorModal)
+ expect(errorComponent.props().show).toBe(true)
+ expect(errorComponent.text()).toContain("An error occurred")
+ expect(errorComponent.text()).toContain(
+ "Something went wrong. Please try again or contact orders@artsy.net."
+ )
+
+ component.find(ModalButton).simulate("click")
+ expect(component.find(ErrorModal).props().show).toBe(false)
+ })
+
+ it("creates a Make Offer order and redirects to the order offer page", () => {
+ Object.defineProperty(window, "location", {
+ writable: true,
+ value: { assign: jest.fn() },
+ })
+ const component = getWrapper(ArtworkMakeOffer)
+
+ commitMutation.mockImplementationOnce((_environment, { onCompleted }) => {
+ onCompleted(OfferOrderWithSuccess)
+ })
+
+ component.find(Button).simulate("click")
+
+ expect(commitMutation).toHaveBeenCalledTimes(1)
+ expect(window.location.assign).toHaveBeenCalledWith("/orders/orderId/offer")
+ })
+
+ it("displays an error modal when a Make Offer mutation fails", () => {
+ Object.defineProperty(window, "location", {
+ writable: true,
+ value: { assign: jest.fn() },
+ })
+ const component = getWrapper(ArtworkMakeOffer)
+
+ commitMutation.mockImplementationOnce((_environment, { onCompleted }) => {
+ onCompleted(OfferOrderWithFailure)
+ })
+
+ component.find(Button).simulate("click")
+
+ expect(commitMutation).toHaveBeenCalledTimes(1)
+ expect(window.location.assign).not.toHaveBeenCalled()
+
+ const errorComponent = component.find(ErrorModal)
+ expect(errorComponent.props().show).toBe(true)
+ expect(errorComponent.text()).toContain("An error occurred")
+ expect(errorComponent.text()).toContain(
+ "Something went wrong. Please try again or contact orders@artsy.net."
+ )
+
+ component.find(ModalButton).simulate("click")
+ expect(component.find(ErrorModal).props().show).toBe(false)
+ })
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarCurrentBidInfo.jest.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarCurrentBidInfo.jest.tsx
new file mode 100644
index 00000000000..d4996adeefa
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarCurrentBidInfo.jest.tsx
@@ -0,0 +1,181 @@
+import { LosingBidIcon, WinningBidIcon } from "@artsy/palette"
+import { ArtworkSidebarCurrentBidInfo_Test_QueryRawResponse } from "v2/__generated__/ArtworkSidebarCurrentBidInfo_Test_Query.graphql"
+import {
+ AuctionPreview,
+ AuctionPreviewNoStartingBid,
+ ClosedAuctionArtwork,
+ LiveAuctionInProgress,
+ OpenAuctionNoReserveNoBids,
+ OpenAuctionNoReserveWithBids,
+ OpenAuctionReserveMetWithBids,
+ OpenAuctionReserveMetWithMyLosingBid,
+ OpenAuctionReserveMetWithMyWinningBid,
+ OpenAuctionReserveNoBids,
+ OpenAuctionReserveNotMetIncreasingOwnBid,
+ OpenAuctionReserveNotMetWithBids,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarCurrentBidInfo"
+import { ArtworkSidebarCurrentBidInfoFragmentContainer } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarCurrentBidInfo"
+import { renderRelayTree } from "v2/DevTools"
+import { graphql } from "react-relay"
+import { mockTracking } from "v2/Artsy/Analytics"
+
+jest.unmock("react-relay")
+jest.unmock("react-tracking")
+
+describe("ArtworkSidebarCurrentBidInfo", () => {
+ const { Component, dispatch: mockTrack } = mockTracking(
+ ArtworkSidebarCurrentBidInfoFragmentContainer
+ )
+ const getWrapper = async (
+ response: ArtworkSidebarCurrentBidInfo_Test_QueryRawResponse["artwork"]
+ ) => {
+ return renderRelayTree({
+ Component,
+ query: graphql`
+ query ArtworkSidebarCurrentBidInfo_Test_Query @raw_response_type {
+ artwork(id: "auction_artwork_estimate_premium") {
+ ...ArtworkSidebarCurrentBidInfo_artwork
+ }
+ }
+ `,
+ mockData: {
+ artwork: response,
+ } as ArtworkSidebarCurrentBidInfo_Test_QueryRawResponse,
+ })
+ }
+ describe("analytics", () => {
+ it("tracks a click on the buyers premium link", async () => {
+ const component = await getWrapper(OpenAuctionReserveMetWithMyWinningBid)
+ await component
+ .find("Link")
+ .filterWhere(l => l.text() === "buyer's premium")
+ .first()
+ .props()
+ .onClick({} as any)
+
+ expect(mockTrack).toBeCalledWith({
+ action_type: "Click",
+ context_module: "Sidebar",
+ subject: "Buyer premium",
+ type: "Link",
+ })
+ })
+ })
+
+ describe("for closed auction", () => {
+ it("displays Auction Closed", async () => {
+ const wrapper = await getWrapper(ClosedAuctionArtwork)
+
+ expect(wrapper.text()).toContain("Bidding closed")
+ })
+ })
+
+ describe("for live sale in progress", () => {
+ it("does not display anything", async () => {
+ const wrapper = await getWrapper(LiveAuctionInProgress)
+
+ expect(wrapper.html()).toBeFalsy()
+ })
+ })
+
+ describe("for auction preview", () => {
+ it("displays proper starting bid info", async () => {
+ const wrapper = await getWrapper(AuctionPreview)
+
+ expect(wrapper.text()).toContain("Starting bid")
+ expect(wrapper.text()).toContain("CHF 4,000")
+ })
+ })
+
+ describe("for auction preview with no start bid set", () => {
+ it("displays nothing if current bid info is unavailable", async () => {
+ const wrapper = await getWrapper(AuctionPreviewNoStartingBid)
+ expect(wrapper.html()).toBeFalsy()
+ })
+ })
+
+ describe("for open auction with no reserve and no bids", () => {
+ it("displays proper starting bid info", async () => {
+ const wrapper = await getWrapper(OpenAuctionNoReserveNoBids)
+
+ expect(wrapper.text()).toContain("Starting bid")
+ expect(wrapper.text()).toContain("$500")
+ })
+ })
+
+ describe("open auction with no reserve with bids present", () => {
+ it("displays proper current bid info including bid count", async () => {
+ const wrapper = await getWrapper(OpenAuctionNoReserveWithBids)
+
+ expect(wrapper.text()).toContain("Current bid")
+ expect(wrapper.text()).toContain("11 bids")
+ expect(wrapper.text()).toContain("$850")
+ })
+ })
+
+ describe("for open auction with reserve and no bids", () => {
+ it("displays proper starting bid info and resserve message", async () => {
+ const wrapper = await getWrapper(OpenAuctionReserveNoBids)
+
+ expect(wrapper.text()).toContain("Starting bid")
+ expect(wrapper.text()).toContain("This work has a reserve.")
+ expect(wrapper.text()).toContain("$3,000")
+ })
+ })
+
+ describe("for open auction with some bids and reserve not met", () => {
+ it("displays current bid message inculding reserve warning", async () => {
+ const wrapper = await getWrapper(OpenAuctionReserveNotMetWithBids)
+
+ expect(wrapper.text()).toContain("Current bid")
+ expect(wrapper.text()).toContain("2 bids, reserve not met.")
+ expect(wrapper.text()).toContain("$10,000")
+ })
+ })
+
+ describe("for open auction with some bids and satisfied reserve", () => {
+ it("displays current bid message inculding reserve met", async () => {
+ const wrapper = await getWrapper(OpenAuctionReserveMetWithBids)
+
+ expect(wrapper.text()).toContain("Current bid")
+ expect(wrapper.text()).toContain("2 bids, reserve met.")
+ expect(wrapper.text()).toContain("$500")
+ })
+ })
+
+ describe("for open auction with my bid winning", () => {
+ it("displays max bid and winning indicator", async () => {
+ const wrapper = await getWrapper(OpenAuctionReserveMetWithMyWinningBid)
+
+ expect(wrapper.text()).toContain("Your max: $15,000")
+ expect(wrapper.find(WinningBidIcon).length).toBe(1)
+ })
+
+ it("displays buyer's premium information", async () => {
+ const wrapper = await getWrapper(OpenAuctionReserveMetWithMyWinningBid)
+
+ expect(wrapper.text()).toContain("This auction has a buyer's premium.")
+ expect(wrapper.text()).toContain(
+ "Shipping, taxes, and additional fees may apply."
+ )
+ })
+ })
+
+ describe("for open auction with my bid losing", () => {
+ it("displays max bid and losing indicator", async () => {
+ const wrapper = await getWrapper(OpenAuctionReserveMetWithMyLosingBid)
+
+ expect(wrapper.text()).toContain("Your max: $400")
+ expect(wrapper.find(LosingBidIcon).length).toBe(1)
+ })
+ })
+
+ describe("for open auction with me increasing my max bid while winning", () => {
+ it("displays max bid and winning indicator", async () => {
+ const wrapper = await getWrapper(OpenAuctionReserveNotMetIncreasingOwnBid)
+
+ expect(wrapper.text()).toContain("Your max: $15,000")
+ expect(wrapper.find(WinningBidIcon).length).toBe(1)
+ })
+ })
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarExtraLinks.jest.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarExtraLinks.jest.tsx
new file mode 100644
index 00000000000..79cffb92359
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarExtraLinks.jest.tsx
@@ -0,0 +1,237 @@
+import { ArtworkSidebarExtraLinks_Test_QueryRawResponse } from "v2/__generated__/ArtworkSidebarExtraLinks_Test_Query.graphql"
+import {
+ AcquireableArtworkWithOneConsignableArtist,
+ BenefitAuctionArtwork,
+ InquireableArtworkWithMultipleConsignableArtists,
+ LiveAuctionArtwork,
+ LiveAuctionArtworkWithoutPartner,
+ NotForSaleArtworkWithOneConsignableArtist,
+ VanHamLiveAuctionArtwork,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarExtraLinks"
+import { renderRelayTree } from "v2/DevTools"
+import { graphql } from "react-relay"
+import { ArtworkSidebarExtraLinksFragmentContainer } from "../../ArtworkSidebar/ArtworkSidebarExtraLinks"
+
+jest.unmock("react-relay")
+
+describe("ArtworkSidebarExtraLinks", () => {
+ let wrapper = null
+
+ const getWrapper = async (
+ response: ArtworkSidebarExtraLinks_Test_QueryRawResponse["artwork"]
+ ) => {
+ return await renderRelayTree({
+ Component: ArtworkSidebarExtraLinksFragmentContainer,
+ query: graphql`
+ query ArtworkSidebarExtraLinks_Test_Query @raw_response_type {
+ artwork(id: "josef-albers-homage-to-the-square-85") {
+ ...ArtworkSidebarExtraLinks_artwork
+ }
+ }
+ `,
+ mockData: {
+ artwork: response,
+ } as ArtworkSidebarExtraLinks_Test_QueryRawResponse,
+ })
+ }
+
+ describe("for work in a benefit auction", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper(BenefitAuctionArtwork)
+ })
+ it("displays proper conditions of sale text", () => {
+ expect(wrapper.text()).toContain(
+ "By placing your bid you agree to Artsy's Conditions of Sale."
+ )
+ expect(wrapper.text()).toContain(
+ "Have a question? Read our auction FAQs or ask a specialist."
+ )
+ expect(wrapper.text()).toContain(
+ "Want to sell a work by this artist? Consign with Artsy."
+ )
+ })
+ })
+
+ describe("for work in an auction by Van Ham", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper(VanHamLiveAuctionArtwork)
+ })
+ it("displays proper conditions of sale text", () => {
+ expect(wrapper.text()).toContain(
+ "By placing your bid you agree to Artsy's and Van Ham's Conditions of Sale."
+ )
+ })
+ })
+
+ describe("for work in an auction without a partner", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper(LiveAuctionArtworkWithoutPartner)
+ })
+ it("displays proper conditions of sale text", () => {
+ expect(wrapper.text()).toContain(
+ "By placing your bid you agree to Artsy's Conditions of Sale."
+ )
+ })
+ })
+
+ describe("for work in an auction", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper(LiveAuctionArtwork)
+ })
+ it("displays proper conditions of sale text", () => {
+ expect(wrapper.text()).toContain(
+ "By placing your bid you agree to Artsy's and Christie's Conditions of Sale."
+ )
+ expect(wrapper.text()).toContain(
+ "Have a question? Read our auction FAQs or ask a specialist."
+ )
+ expect(wrapper.text()).toContain(
+ "Want to sell a work by this artist? Consign with Artsy."
+ )
+ })
+ it("displays conditions of sale link that opens conditions of sale page", () => {
+ expect(wrapper.find('a[children="Conditions of Sale"]').length).toBe(1)
+ wrapper
+ .find('a[children="Conditions of Sale"]')
+ .at(0)
+ .simulate("click")
+
+ expect(window.open).toHaveBeenCalledWith(
+ expect.stringMatching(/conditions-of-sale/),
+ "_blank"
+ )
+ })
+ it("displays FAQ link that brings auction FAQ modal", () => {
+ expect(wrapper.find('a[children="auction FAQs"]').length).toBe(1)
+ wrapper
+ .find('a[children="auction FAQs"]')
+ .at(0)
+ .simulate("click")
+ // TODO: verify mediator call with openAuctionFAQModal
+ })
+ it("displays ask a specialist link that brings ask an auction specialist modal", () => {
+ expect(wrapper.find('a[children="ask a specialist"]').length).toBe(1)
+ wrapper
+ .find('a[children="ask a specialist"]')
+ .at(0)
+ .simulate("click")
+ // TODO: verify mediator call with openAuctionAskSpecialistModal
+ })
+ it("displays consign link that opens consign page", () => {
+ expect(wrapper.find('a[children="Consign with Artsy"]').length).toBe(1)
+ wrapper
+ .find('a[children="Consign with Artsy"]')
+ .at(0)
+ .simulate("click")
+
+ expect(window.open).toHaveBeenCalledWith(
+ expect.stringMatching(/consign/),
+ "_blank"
+ )
+ })
+ })
+
+ describe("for Buy now work", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper(AcquireableArtworkWithOneConsignableArtist)
+ })
+ it("displays proper text", () => {
+ expect(wrapper.text()).toContain(
+ "Have a question? Read our FAQ or ask a specialist."
+ )
+ expect(wrapper.text()).toContain(
+ "Want to sell a work by this artist? Consign with Artsy."
+ )
+ })
+ it("displays FAQ link that opens Buy now FAQ page", () => {
+ expect(wrapper.find('a[children="Read our FAQ"]').length).toBe(1)
+ wrapper
+ .find('a[children="Read our FAQ"]')
+ .at(0)
+ .simulate("click")
+ expect(window.open).toHaveBeenCalledWith(
+ expect.stringMatching(/buy-now-feature-faq/),
+ "_blank"
+ )
+ })
+ it("displays ask a specialist link that brings ask sale specialist modal", () => {
+ expect(wrapper.find('a[children="ask a specialist"]').length).toBe(1)
+ wrapper
+ .find('a[children="ask a specialist"]')
+ .at(0)
+ .simulate("click")
+ // TODO: verify mediator call with openBuyNowAskSpecialistModal
+ })
+ it("displays consign link that opens consign page", () => {
+ expect(wrapper.find('a[children="Consign with Artsy"]').length).toBe(1)
+ wrapper
+ .find('a[children="Consign with Artsy"]')
+ .at(0)
+ .simulate("click")
+
+ expect(window.open).toHaveBeenCalledWith(
+ expect.stringMatching(/consign/),
+ "_blank"
+ )
+ })
+ })
+
+ describe("for inquireable work", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper(
+ InquireableArtworkWithMultipleConsignableArtists
+ )
+ })
+
+ it("displays proper text", () => {
+ expect(wrapper.text()).toContain("Have a question? Read our FAQ.")
+ expect(wrapper.text()).toContain(
+ "Want to sell a work by these artists? Consign with Artsy."
+ )
+ })
+ it("displays FAQ link that brings collector FAQ modal", () => {
+ expect(wrapper.find('a[children="Read our FAQ"]').length).toBe(1)
+ wrapper
+ .find('a[children="Read our FAQ"]')
+ .at(0)
+ .simulate("click")
+ // TODO: verify mediator call with openCollectorFAQModal
+ })
+ it("displays consign link that opens consign page", () => {
+ expect(wrapper.find('a[children="Consign with Artsy"]').length).toBe(1)
+ wrapper
+ .find('a[children="Consign with Artsy"]')
+ .at(0)
+ .simulate("click")
+
+ expect(window.open).toHaveBeenCalledWith(
+ expect.stringMatching(/consign/),
+ "_blank"
+ )
+ })
+ })
+
+ describe("for not for sale work", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper(NotForSaleArtworkWithOneConsignableArtist)
+ })
+ it("displays proper text", () => {
+ expect(wrapper.text()).not.toContain("Have a question? Read our FAQ")
+ expect(wrapper.text()).toContain(
+ "Want to sell a work by this artist? Consign with Artsy."
+ )
+ })
+ it("displays consign link that opens consign page", () => {
+ expect(wrapper.find('a[children="Consign with Artsy"]').length).toBe(1)
+ wrapper
+ .find('a[children="Consign with Artsy"]')
+ .at(0)
+ .simulate("click")
+
+ expect(window.open).toHaveBeenCalledWith(
+ expect.stringMatching(/consign/),
+ "_blank"
+ )
+ })
+ })
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarMetadata.jest.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarMetadata.jest.tsx
new file mode 100644
index 00000000000..889a7b66022
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarMetadata.jest.tsx
@@ -0,0 +1,169 @@
+import { ArtworkSidebarMetadata_Test_QueryRawResponse } from "v2/__generated__/ArtworkSidebarMetadata_Test_Query.graphql"
+import { renderRelayTree } from "v2/DevTools"
+import { graphql } from "react-relay"
+import {
+ EmptyMetadataNoEditions,
+ FilledOutMetadataMultipleEditionSets,
+ FilledOutMetadataNoEditions,
+ FilledOutMetadataOneEditionSet,
+ MetadataForAuctionWork,
+} from "../../../../__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarMetadata"
+import { ArtworkSidebarClassification } from "../../ArtworkSidebar/ArtworkSidebarClassification"
+import { ArtworkSidebarMetadataFragmentContainer } from "../../ArtworkSidebar/ArtworkSidebarMetadata"
+import { ArtworkSidebarSizeInfo } from "../../ArtworkSidebar/ArtworkSidebarSizeInfo"
+
+jest.unmock("react-relay")
+
+describe("ArtworkSidebarMetadata", () => {
+ let wrapper = null
+
+ const getWrapper = async (
+ response: ArtworkSidebarMetadata_Test_QueryRawResponse["artwork"] = FilledOutMetadataNoEditions
+ ) => {
+ return await renderRelayTree({
+ Component: ArtworkSidebarMetadataFragmentContainer,
+ query: graphql`
+ query ArtworkSidebarMetadata_Test_Query @raw_response_type {
+ artwork(id: "josef-albers-homage-to-the-square-85") {
+ ...ArtworkSidebarMetadata_artwork
+ }
+ }
+ `,
+ mockData: {
+ artwork: response,
+ } as ArtworkSidebarMetadata_Test_QueryRawResponse,
+ })
+ }
+
+ describe("for non editioned artwork", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper()
+ })
+
+ it("displays title and year", () => {
+ expect(wrapper.html()).toContain("Easel (Vydock) , 1995")
+ })
+
+ it("displays medium", () => {
+ expect(wrapper.html()).toContain(
+ "Acrylic and graphite on bonded aluminium"
+ )
+ })
+
+ it("displays dimentions", () => {
+ const html = wrapper.html()
+
+ expect(html).toContain("97 × 15 in")
+ expect(html).toContain("246.4 × 38.1 cm")
+ })
+
+ it("displays classification", () => {
+ expect(wrapper.html()).toContain("This is a unique work")
+ })
+ })
+
+ describe("for artwork with one edition", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper(FilledOutMetadataOneEditionSet)
+ })
+
+ it("displays title and year", () => {
+ expect(wrapper.html()).toContain("Sun Keyed , 1972")
+ })
+
+ it("displays medium", () => {
+ expect(wrapper.html()).toContain("Serigraph")
+ })
+
+ it("displays edition dimentions", () => {
+ const html = wrapper.html()
+ expect(html).toContain("14 × 18 in")
+ expect(html).toContain("35.6 × 45.7 cm")
+ })
+
+ it("displays edition details", () => {
+ expect(wrapper.html()).toContain("Edition of 3000")
+ })
+
+ it("displays classification", () => {
+ expect(wrapper.html()).toContain("This is part of a limited edition set")
+ })
+ })
+
+ describe("for artwork with multiple editions", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper(FilledOutMetadataMultipleEditionSets)
+ })
+
+ it("displays title and year", () => {
+ expect(wrapper.html()).toContain("Abstract 36742 , 2018")
+ })
+
+ it("displays medium", () => {
+ expect(wrapper.html()).toContain("Premium high gloss archival print")
+ })
+
+ it("does not render edition dimentions or details", () => {
+ expect(wrapper.find(ArtworkSidebarSizeInfo).length).toBe(0)
+ const html = wrapper.html()
+ expect(html).not.toContain("40 × 42 in")
+ expect(html).not.toContain("101.6 × 106.7 cm")
+ expect(html).not.toContain("Edition of 3000")
+ })
+
+ it("displays classification", () => {
+ expect(wrapper.html()).toContain("This is part of a limited edition set")
+ })
+ })
+
+ describe("for artwork with minimal metadata", () => {
+ it("only displays title info", async () => {
+ wrapper = await getWrapper(EmptyMetadataNoEditions)
+ const html = wrapper.html()
+ expect(html).toContain("Empty metadata / No editions ")
+ expect(html).not.toContain("Empty metadata / No editions,")
+ expect(wrapper.find(ArtworkSidebarSizeInfo).html()).toBe(null)
+ expect(wrapper.find(ArtworkSidebarClassification).html()).toBe(null)
+ })
+ })
+
+ describe("for artwork in an auction", () => {
+ beforeAll(async () => {
+ wrapper = await getWrapper(MetadataForAuctionWork)
+ })
+
+ it("displays lot number when present for biddable works", () => {
+ expect(wrapper.html()).toContain("Lot 210")
+ })
+
+ it("does not display lot number when present if work is not biddable(auction closed)", async () => {
+ const closedAuctionArtwork = {
+ ...MetadataForAuctionWork,
+ is_biddable: false,
+ }
+ wrapper = await getWrapper(closedAuctionArtwork)
+ expect(wrapper.html()).not.toContain("Lot 210")
+ })
+
+ it("displays title and year", () => {
+ expect(wrapper.html()).toContain(
+ 'Then the boy displayed to the Dervish his bosom, saying: "Look at my breasts which be goodlier than the breasts of maidens and my lipdews are sweeter than sugar candy...", from Four Tales from the Arabian Nights , 1948'
+ )
+ })
+
+ it("displays medium", () => {
+ expect(wrapper.html()).toContain("Lithograph in colors, on laid paper")
+ })
+
+ it("displays edition dimentions", () => {
+ const html = wrapper.html()
+
+ expect(html).toContain("17 × 13 in")
+ expect(html).toContain("43.2 × 33 cm")
+ })
+
+ it("displays classification", () => {
+ expect(wrapper.html()).toContain("This is part of a limited edition set")
+ })
+ })
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarPartnerInfo.jest.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarPartnerInfo.jest.tsx
new file mode 100644
index 00000000000..b60326a6832
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarPartnerInfo.jest.tsx
@@ -0,0 +1,85 @@
+import { ArtworkSidebarPartnerInfo_Test_QueryRawResponse } from "v2/__generated__/ArtworkSidebarPartnerInfo_Test_Query.graphql"
+import {
+ ArtworkFromPartnerWithLocations,
+ ArtworkInNonAuctionSale,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkSidebar/ArtworkSidebarPartnerInfo"
+import { ArtworkSidebarPartnerInfoFragmentContainer } from "v2/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarPartnerInfo"
+import { renderRelayTree } from "v2/DevTools"
+import { graphql } from "react-relay"
+
+jest.unmock("react-relay")
+
+describe("ArtworkSidebarPartnerInfo", () => {
+ const getWrapper = async (
+ response: ArtworkSidebarPartnerInfo_Test_QueryRawResponse["artwork"]
+ ) => {
+ return await renderRelayTree({
+ Component: ArtworkSidebarPartnerInfoFragmentContainer,
+ query: graphql`
+ query ArtworkSidebarPartnerInfo_Test_Query @raw_response_type {
+ artwork(id: "artwork_from_partner_with_locations") {
+ ...ArtworkSidebarPartnerInfo_artwork
+ }
+ }
+ `,
+ mockData: {
+ artwork: response,
+ } as ArtworkSidebarPartnerInfo_Test_QueryRawResponse,
+ })
+ }
+
+ let artwork
+
+ describe("Non-auction Sales display", () => {
+ beforeEach(() => {
+ artwork = Object.assign({}, ArtworkInNonAuctionSale)
+ })
+
+ it("displays sale name", async () => {
+ const wrapper = await getWrapper(artwork)
+
+ expect(wrapper.text()).toContain(artwork.sale.name)
+ expect(wrapper.find({ href: artwork.sale.href }).length).toBe(1)
+ })
+ })
+
+ describe("Partners display", () => {
+ beforeEach(() => {
+ artwork = Object.assign({}, ArtworkFromPartnerWithLocations)
+ })
+
+ it("displays partner name", async () => {
+ const wrapper = await getWrapper(artwork)
+
+ expect(wrapper.text()).toContain(artwork.partner.name)
+ expect(wrapper.find({ href: artwork.partner.href }).length).toBe(1)
+ })
+
+ it("displays partner name without href", async () => {
+ artwork.partner.href = null
+
+ const wrapper = await getWrapper(artwork)
+
+ expect(wrapper.text()).toContain(artwork.partner.name)
+ expect(wrapper.find({ href: artwork.partner.href }).length).toBe(0)
+ })
+
+ it("displays partner locations", async () => {
+ const wrapper = await getWrapper(artwork)
+
+ const text = wrapper.text()
+
+ artwork.partner.locations.forEach(location => {
+ expect(text).toContain(location.city)
+ })
+ })
+
+ it("displays partner without locations", async () => {
+ artwork.partner.locations = []
+
+ const wrapper = await getWrapper(artwork)
+
+ expect(wrapper.text()).toContain(artwork.partner.name)
+ })
+ })
+})
diff --git a/src/v2/Apps/Artwork/Components/ArtworkSidebar/index.tsx b/src/v2/Apps/Artwork/Components/ArtworkSidebar/index.tsx
new file mode 100644
index 00000000000..b7d8cccb3a6
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/ArtworkSidebar/index.tsx
@@ -0,0 +1,138 @@
+import { Box, space, Spacer } from "@artsy/palette"
+import { renderWithLoadProgress } from "v2/Artsy/Relay/renderWithLoadProgress"
+import { AuctionTimerFragmentContainer as AuctionTimer } from "v2/Components/AuctionTimer"
+import React, { Component, useContext } from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import styled from "styled-components"
+import { ArtworkSidebarArtistsFragmentContainer as Artists } from "./ArtworkSidebarArtists"
+import { ArtworkSidebarAuctionPartnerInfoFragmentContainer as AuctionPartnerInfo } from "./ArtworkSidebarAuctionPartnerInfo"
+import { ArtworkSidebarBidActionFragmentContainer as BidAction } from "./ArtworkSidebarBidAction"
+import { ArtworkSidebarCommercialFragmentContainer as Commercial } from "./ArtworkSidebarCommercial"
+import { ArtworkSidebarCurrentBidInfoFragmentContainer as CurrentBidInfo } from "./ArtworkSidebarCurrentBidInfo"
+import { ArtworkSidebarExtraLinksFragmentContainer as ExtraLinks } from "./ArtworkSidebarExtraLinks"
+import { ArtworkSidebarMetadataFragmentContainer as Metadata } from "./ArtworkSidebarMetadata"
+import { ArtworkSidebarPartnerInfoFragmentContainer as PartnerInfo } from "./ArtworkSidebarPartnerInfo"
+
+import { ContextModule } from "@artsy/cohesion"
+import { ArtworkSidebar_artwork } from "v2/__generated__/ArtworkSidebar_artwork.graphql"
+import { ArtworkSidebar_me } from "v2/__generated__/ArtworkSidebar_me.graphql"
+import { ArtworkSidebarQuery } from "v2/__generated__/ArtworkSidebarQuery.graphql"
+import { SystemContext } from "v2/Artsy"
+import { SystemQueryRenderer as QueryRenderer } from "v2/Artsy/Relay/SystemQueryRenderer"
+import { AuthenticityCertificateFragmentContainer as AuthenticityCertificate } from "../TrustSignals/AuthenticityCertificate"
+import { SecurePaymentFragmentContainer as SecurePayment } from "../TrustSignals/SecurePayment"
+import { VerifiedSellerFragmentContainer as VerifiedSeller } from "../TrustSignals/VerifiedSeller"
+
+export interface ArtworkSidebarProps {
+ artwork: ArtworkSidebar_artwork
+ me: ArtworkSidebar_me
+}
+
+const ArtworkSidebarContainer = Box
+
+const TrustSignalsContainer = styled.div`
+ > * + * {
+ margin-top: ${space(2)}px;
+ }
+ :after {
+ content: "";
+ display: block;
+ margin-bottom: ${space(3)}px;
+ }
+`
+
+export class ArtworkSidebar extends Component {
+ render() {
+ const { artwork, me } = this.props
+
+ return (
+
+
+
+
+ )}
+
+ ) : (
+
+
+ )}
+
+
+
+
+
+ )
+ }
+}
+
+export const ArtworkSidebarFragmentContainer = createFragmentContainer(
+ ArtworkSidebar,
+ {
+ artwork: graphql`
+ fragment ArtworkSidebar_artwork on Artwork {
+ is_in_auction: isInAuction
+ ...ArtworkSidebarArtists_artwork
+ ...ArtworkSidebarMetadata_artwork
+ ...ArtworkSidebarAuctionPartnerInfo_artwork
+ ...ArtworkSidebarCurrentBidInfo_artwork
+ ...ArtworkSidebarBidAction_artwork
+ ...ArtworkSidebarCommercial_artwork
+ ...ArtworkSidebarPartnerInfo_artwork
+ ...ArtworkSidebarExtraLinks_artwork
+ ...SecurePayment_artwork
+ ...VerifiedSeller_artwork
+ ...AuthenticityCertificate_artwork
+ sale {
+ is_closed: isClosed
+ ...AuctionTimer_sale
+ }
+ }
+ `,
+ me: graphql`
+ fragment ArtworkSidebar_me on Me {
+ ...ArtworkSidebarBidAction_me
+ }
+ `,
+ }
+)
+
+export const ArtworkSidebarQueryRenderer = ({
+ artworkID,
+}: {
+ artworkID: string
+}) => {
+ const { relayEnvironment } = useContext(SystemContext)
+
+ return (
+
+ environment={relayEnvironment}
+ variables={{ artworkID }}
+ query={graphql`
+ query ArtworkSidebarQuery($artworkID: String!) {
+ artwork(id: $artworkID) {
+ ...ArtworkSidebar_artwork
+ }
+ }
+ `}
+ render={renderWithLoadProgress(ArtworkSidebarFragmentContainer)}
+ />
+ )
+}
diff --git a/src/v2/Apps/Artwork/Components/OtherAuctions.tsx b/src/v2/Apps/Artwork/Components/OtherAuctions.tsx
new file mode 100644
index 00000000000..ed2a2a132c0
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/OtherAuctions.tsx
@@ -0,0 +1,67 @@
+import { Box, Flex } from "@artsy/palette"
+import { OtherAuctions_salesConnection } from "v2/__generated__/OtherAuctions_salesConnection.graphql"
+import { OtherAuctionsQuery } from "v2/__generated__/OtherAuctionsQuery.graphql"
+import { SystemContext } from "v2/Artsy"
+import { renderWithLoadProgress } from "v2/Artsy/Relay/renderWithLoadProgress"
+import { SystemQueryRenderer as QueryRenderer } from "v2/Artsy/Relay/SystemQueryRenderer"
+import { AuctionCardFragmentContainer as AuctionCard } from "v2/Components/AuctionCard"
+import React, { useContext } from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { data as sd } from "sharify"
+import { Header } from "./OtherWorks/Header"
+
+interface OtherAuctionsProps {
+ salesConnection: OtherAuctions_salesConnection
+}
+export class OtherAuctions extends React.Component {
+ render() {
+ return (
+
+
+
+ {this.props.salesConnection.edges.map(({ node: auction }, index) => {
+ return (
+
+
+ )
+ })}
+
+
+ )
+ }
+}
+
+export const OtherAuctionsFragmentContainer = createFragmentContainer(
+ OtherAuctions,
+ {
+ salesConnection: graphql`
+ fragment OtherAuctions_salesConnection on SaleConnection {
+ edges {
+ node {
+ ...AuctionCard_sale
+ }
+ }
+ }
+ `,
+ }
+)
+
+export const OtherAuctionsQueryRenderer = () => {
+ const { relayEnvironment } = useContext(SystemContext)
+
+ return (
+
+ environment={relayEnvironment}
+ variables={{ first: 4, sort: "TIMELY_AT_NAME_ASC" }}
+ query={graphql`
+ query OtherAuctionsQuery($first: Int, $sort: SaleSorts) {
+ salesConnection(first: $first, sort: $sort) {
+ ...OtherAuctions_salesConnection
+ }
+ }
+ `}
+ render={renderWithLoadProgress(OtherAuctionsFragmentContainer)}
+ />
+ )
+}
diff --git a/src/v2/Apps/Artwork/Components/OtherWorks/Header.tsx b/src/v2/Apps/Artwork/Components/OtherWorks/Header.tsx
new file mode 100644
index 00000000000..eb212476e96
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/OtherWorks/Header.tsx
@@ -0,0 +1,29 @@
+import { Button, Flex, Serif } from "@artsy/palette"
+import { RouterLink } from "v2/Artsy/Router/RouterLink"
+import React from "react"
+
+interface HeaderProps {
+ buttonHref?: string
+ children?: JSX.Element
+ title: string
+}
+
+export const Header: React.SFC = props => {
+ const { buttonHref, children, title } = props
+
+ return (
+
+
+ {title}
+
+ {buttonHref && (
+
+
+ View all
+
+
+ )}
+ {children}
+
+ )
+}
diff --git a/src/v2/Apps/Artwork/Components/OtherWorks/RelatedWorksArtworkGrid.tsx b/src/v2/Apps/Artwork/Components/OtherWorks/RelatedWorksArtworkGrid.tsx
new file mode 100644
index 00000000000..5de42a343f0
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/OtherWorks/RelatedWorksArtworkGrid.tsx
@@ -0,0 +1,197 @@
+import { Box, Spinner, Tab, Tabs } from "@artsy/palette"
+import { RelatedWorksArtworkGrid_artwork } from "v2/__generated__/RelatedWorksArtworkGrid_artwork.graphql"
+import { RelatedWorksArtworkGridQuery } from "v2/__generated__/RelatedWorksArtworkGridQuery.graphql"
+import { hideGrid } from "v2/Apps/Artwork/Components/OtherWorks"
+import { Header } from "v2/Apps/Artwork/Components/OtherWorks/Header"
+import { Mediator, SystemContext, withSystemContext } from "v2/Artsy"
+import { track } from "v2/Artsy/Analytics"
+import * as Schema from "v2/Artsy/Analytics/Schema"
+import { renderWithLoadProgress } from "v2/Artsy/Relay/renderWithLoadProgress"
+import ArtworkGrid from "v2/Components/ArtworkGrid"
+import { take } from "lodash"
+import React, { useContext } from "react"
+import styled from "styled-components"
+import createLogger from "v2/Utils/logger"
+
+import { ContextModule } from "@artsy/cohesion"
+import { SystemQueryRenderer as QueryRenderer } from "v2/Artsy/Relay/SystemQueryRenderer"
+import { createRefetchContainer, graphql, RelayRefetchProp } from "react-relay"
+import { get } from "v2/Utils/get"
+
+const logger = createLogger("RelatedWorksArtworkGrid.tsx")
+
+const MAX_TAB_ITEMS = 3
+
+interface RelatedWorksArtworkGridProps {
+ relay: RelayRefetchProp
+ artwork: RelatedWorksArtworkGrid_artwork
+ mediator?: Mediator
+}
+
+interface RelatedWorksArtworkGridState {
+ isLoading: boolean
+}
+
+@track({
+ context_module: Schema.ContextModule.RelatedWorks,
+})
+class RelatedWorksArtworkGrid extends React.Component<
+RelatedWorksArtworkGridProps,
+RelatedWorksArtworkGridState
+> {
+ state = {
+ isLoading: false,
+ }
+
+ handleTabClick = (tab: { data: { layerId: string } }) => {
+ this.setState({ isLoading: true })
+
+ this.props.relay.refetch(
+ {
+ layerId: tab.data.layerId,
+ artworkSlug: this.props.artwork.slug,
+ },
+ null,
+ error => {
+ this.setState({
+ isLoading: false,
+ })
+ if (error) {
+ logger.error(error)
+ }
+ }
+ )
+ }
+
+ @track({
+ type: Schema.Type.ArtworkBrick,
+ action_type: Schema.ActionType.Click,
+ })
+ trackBrickClick() {
+ // noop
+ }
+
+ render() {
+ const {
+ artwork: { layers, layer },
+ mediator,
+ } = this.props
+
+ // The layer might have failed to fetch, so we use the `get` helper
+ // instead of ordinary destructuring.
+ const artworksConnection = get(layer, l => l.artworksConnection)
+
+ if (hideGrid(artworksConnection)) {
+ return null
+ }
+
+ // For sale artworks are already rendered on the page so we filter them from related works
+ const names = take(
+ layers.filter(l => l.name !== "For Sale"),
+ MAX_TAB_ITEMS
+ )
+
+ if (!names.length) {
+ return <>
+ }
+
+ return (
+
+
+
+ {names.map(({ name, internalID }, key) => {
+ return (
+
+
+ {this.state.isLoading ? (
+
+
+ )
+ })}
+
+
+ )
+ }
+}
+
+export const RelatedWorksArtworkGridRefetchContainer = createRefetchContainer<
+ RelatedWorksArtworkGridProps
+>(
+ withSystemContext(RelatedWorksArtworkGrid),
+ {
+ artwork: graphql`
+ fragment RelatedWorksArtworkGrid_artwork on Artwork
+ @argumentDefinitions(layerId: { type: "String" }) {
+ layers {
+ name
+ internalID
+ }
+ slug
+ layer(id: $layerId) {
+ name
+ artworksConnection(first: 8) {
+ ...ArtworkGrid_artworks
+ # Used to check for content
+ edges {
+ node {
+ slug
+ }
+ }
+ }
+ }
+ }
+ `,
+ },
+ graphql`
+ query RelatedWorksArtworkGridRefetchQuery(
+ $artworkSlug: String!
+ $layerId: String!
+ ) {
+ artwork(id: $artworkSlug) {
+ ...RelatedWorksArtworkGrid_artwork @arguments(layerId: $layerId)
+ }
+ }
+ `
+)
+
+// FIXME: Move to storybooks
+
+export const RelatedWorksArtworkGridQueryRenderer: React.SFC<{
+ artworkSlug: string
+}> = ({ artworkSlug }) => {
+ const { relayEnvironment } = useContext(SystemContext)
+
+ return (
+
+ environment={relayEnvironment}
+ variables={{
+ artworkSlug,
+ }}
+ query={graphql`
+ query RelatedWorksArtworkGridQuery($artworkSlug: String!) {
+ artwork(id: $artworkSlug) {
+ ...RelatedWorksArtworkGrid_artwork
+ }
+ }
+ `}
+ render={renderWithLoadProgress(RelatedWorksArtworkGridRefetchContainer)}
+ />
+ )
+}
+
+// Set min-height so that spinner doesn't collapse area on tab switch
+const ArtworksContainer = styled.div`
+ position: relative;
+ min-height: 500px;
+`
diff --git a/src/v2/Apps/Artwork/Components/OtherWorks/index.tsx b/src/v2/Apps/Artwork/Components/OtherWorks/index.tsx
new file mode 100644
index 00000000000..b2667af8096
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/OtherWorks/index.tsx
@@ -0,0 +1,158 @@
+import { ContextModule } from "@artsy/cohesion"
+import { Box, Join, Spacer } from "@artsy/palette"
+import { OtherWorks_artwork } from "v2/__generated__/OtherWorks_artwork.graphql"
+import { OtherAuctionsQueryRenderer as OtherAuctions } from "v2/Apps/Artwork/Components/OtherAuctions"
+import { Header } from "v2/Apps/Artwork/Components/OtherWorks/Header"
+import { RelatedWorksArtworkGridRefetchContainer as RelatedWorksArtworkGrid } from "v2/Apps/Artwork/Components/OtherWorks/RelatedWorksArtworkGrid"
+import { Mediator, SystemContextProps, withSystemContext } from "v2/Artsy"
+import { track, useTracking } from "v2/Artsy/Analytics"
+import * as Schema from "v2/Artsy/Analytics/Schema"
+import ArtworkGrid from "v2/Components/ArtworkGrid"
+import React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { get } from "v2/Utils/get"
+
+export interface OtherWorksContextProps {
+ artwork: OtherWorks_artwork
+ mediator?: Mediator
+}
+
+/**
+ * Check to see if a connection's edges have a length; if false hide the grid.
+ */
+export function hideGrid(artworksConnection): boolean {
+ return Boolean(get(artworksConnection, p => !p?.edges.length))
+}
+
+const populatedGrids = (grids: OtherWorks_artwork["contextGrids"]) => {
+ if (grids && grids.length > 0) {
+ return grids.filter(grid => {
+ return (
+ grid.artworksConnection &&
+ grid.artworksConnection.edges &&
+ grid.artworksConnection.edges.length > 0 &&
+ grid.__typename !== "RelatedArtworkGrid"
+ )
+ })
+ }
+}
+
+const contextGridTypeToContextModule = contextGridType => {
+ switch (contextGridType) {
+ case "ArtistArtworkGrid": {
+ return Schema.ContextModule.OtherWorksByArtist
+ }
+ case "PartnerArtworkGrid": {
+ return Schema.ContextModule.OtherWorksFromGallery
+ }
+ case "AuctionArtworkGrid": {
+ return Schema.ContextModule.OtherWorksInAuction
+ }
+ case "ShowArtworkGrid": {
+ return Schema.ContextModule.OtherWorksFromShow
+ }
+ }
+}
+
+const contextGridTypeToV2ContextModule = contextGridType => {
+ switch (contextGridType) {
+ case "ArtistArtworkGrid": {
+ return ContextModule.otherWorksByArtistRail
+ }
+ case "PartnerArtworkGrid": {
+ return ContextModule.otherWorksFromPartnerRail
+ }
+ case "AuctionArtworkGrid": {
+ return ContextModule.otherWorksInAuctionRail
+ }
+ case "ShowArtworkGrid": {
+ return ContextModule.otherWorksFromShowRail
+ }
+ }
+}
+
+export const OtherWorks = track()(
+ (props: { artwork: OtherWorks_artwork } & SystemContextProps) => {
+ const { context, contextGrids, sale } = props.artwork
+ const gridsToShow = populatedGrids(contextGrids)
+ const tracking = useTracking()
+ return (
+ <>
+ {gridsToShow && gridsToShow.length > 0 && (
+
+
+
+ tracking.trackEvent({
+ type: Schema.Type.ArtworkBrick,
+ action_type: Schema.ActionType.Click,
+ context_module: contextGridTypeToContextModule(
+ grid.__typename
+ ),
+ })
+ }
+ />
+
+ )
+ })}
+
+ )}
+ {!(
+ context &&
+ context.__typename === "ArtworkContextAuction" &&
+ !(sale && sale.is_closed)
+ ) && (
+
+
+ )}
+ {context && context.__typename === "ArtworkContextAuction" && (
+ {
+ @track({
+ action_type: Schema.ActionType.Impression,
+ flow: Schema.Flow.ArtworkPriceContext,
+ subject: Schema.Subject.HistogramBar,
+ type: Schema.Type.Chart,
+ })
+ trackImpression() {
+ // noop
+ }
+
+ @track({
+ action_type: Schema.ActionType.Hover,
+ flow: Schema.Flow.ArtworkPriceContext,
+ subject: Schema.Subject.HistogramBar,
+ type: Schema.Type.Chart,
+ })
+ barchartHover() {
+ // I'm just for tracking!
+ }
+
+ @track({
+ action_type: Schema.ActionType.Click,
+ flow: Schema.Flow.ArtworkPriceContext,
+ subject: Schema.Subject.BrowseWorks,
+ type: Schema.Type.Chart,
+ })
+ collectPageLinkClick({
+ dimension,
+ category,
+ artistId,
+ }: {
+ dimension: "SMALL" | "MEDIUM" | "LARGE" | null
+ category: FilterCategory
+ artistId: string
+ }) {
+ const url = createCollectUrl({ dimension, category, artistId })
+ if (typeof window !== "undefined") {
+ window.open(url)
+ }
+ }
+
+ render() {
+ const { artwork } = this.props
+ if (!artwork.pricingContext) {
+ return null
+ }
+
+ const priceCents =
+ artwork.listPrice.__typename === "PriceRange"
+ ? artwork.listPrice.maxPrice.minor || artwork.listPrice.minPrice.minor
+ : artwork.listPrice.__typename === "Money"
+ ? artwork.listPrice.minor
+ : 0
+
+ const artworkFallsBeforeFirstBin =
+ priceCents < artwork.pricingContext.bins[0].minPriceCents
+ const artworkFallsAfterLastBin =
+ priceCents >=
+ artwork.pricingContext.bins[artwork.pricingContext.bins.length - 1]
+ .maxPriceCents
+
+ const artistId = artwork.artists[0].slug
+ return (
+
+
+
+ {artwork.pricingContext.appliedFiltersDisplay}
+
+
+ Browse works in this category
+
+ {
+ const isFirstBin = index === 0
+ const isLastBin = index === artwork.pricingContext.bins.length - 1
+ const title = isLastBin
+ ? `${bin.minPrice}+`
+ : // TODO: use artwork's currency
+ `${isFirstBin ? "$0" : bin.minPrice}–${bin.maxPrice}`
+ const artworkFallsInThisBin =
+ (isFirstBin && artworkFallsBeforeFirstBin) ||
+ (isLastBin && artworkFallsAfterLastBin) ||
+ (priceCents >= bin.minPriceCents &&
+ priceCents < bin.maxPriceCents)
+
+ const binValue =
+ artworkFallsInThisBin && bin.numArtworks === 0
+ ? 1
+ : bin.numArtworks
+ const labelSuffix = binValue === 1 ? " work" : " works"
+ return {
+ value: binValue,
+ label: {
+ title,
+ description: binValue + labelSuffix,
+ },
+ onHover: this.barchartHover.bind(this),
+ highlightLabel: artworkFallsInThisBin
+ ? {
+ title,
+ description: "This work",
+ }
+ : undefined,
+ }
+ }
+ )}
+ />
+
+ )
+ }
+}
+
+export const PricingContextFragmentContainer = createFragmentContainer(
+ PricingContext,
+ {
+ artwork: graphql`
+ fragment PricingContext_artwork on Artwork {
+ # FIXME: Does this need to support exact prices?
+ listPrice {
+ __typename
+ ... on PriceRange {
+ maxPrice {
+ minor
+ }
+ minPrice {
+ minor
+ }
+ }
+ ... on Money {
+ minor
+ }
+ }
+ artists {
+ slug
+ }
+ category
+ pricingContext {
+ appliedFiltersDisplay
+ appliedFilters {
+ dimension
+ category
+ }
+ bins {
+ maxPrice
+ maxPriceCents
+ minPrice
+ minPriceCents
+ numArtworks
+ }
+ }
+ }
+ `,
+ }
+)
+
+PricingContextFragmentContainer.displayName = "PricingContext"
diff --git a/src/v2/Apps/Artwork/Components/PricingContextModal.tsx b/src/v2/Apps/Artwork/Components/PricingContextModal.tsx
new file mode 100644
index 00000000000..78c0d800a18
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/PricingContextModal.tsx
@@ -0,0 +1,104 @@
+import {
+ Box,
+ Button,
+ Link,
+ Modal,
+ QuestionCircleIcon,
+ Serif,
+ Spacer,
+ Tooltip,
+} from "@artsy/palette"
+import { track } from "v2/Artsy/Analytics"
+import * as Schema from "v2/Artsy/Analytics/Schema"
+import React from "react"
+import { data as sd } from "sharify"
+import styled from "styled-components"
+import Events from "v2/Utils/Events"
+
+interface State {
+ isModalOpen?: boolean
+}
+
+@track(
+ {
+ context_module: Schema.ContextModule.PriceContext,
+ },
+ {
+ dispatch: data => Events.postEvent(data),
+ }
+)
+export class PricingContextModal extends React.Component {
+ state = {
+ isModalOpen: false,
+ }
+
+ @track({
+ action_type: Schema.ActionType.Click,
+ flow: Schema.Flow.ArtworkPriceContext,
+ subject: Schema.Subject.QuestionMarkIcon,
+ })
+ openModal() {
+ this.setState({ isModalOpen: true })
+ }
+
+ closeModal = () => {
+ this.setState({ isModalOpen: false })
+ }
+
+ render() {
+ return (
+
+
+ Got it
+
+ }
+ >
+
+ This feature aims to provide insight into the range of prices for an
+ artist's works and allow buyers to discover other available works by
+ the artist at different price points.
+
+
+ The graph displays current and past list prices for works that are
+ similar in size and category to the work you're viewing. The prices
+ included in the graph are only from galleries and dealers on Artsy.
+
+
+ Artwork prices are affected by{" "}
+
+
+
+
+
+ )
+ }
+}
+
+const StyledQuestionCircleIcon = styled(QuestionCircleIcon)`
+ cursor: pointer;
+`
diff --git a/src/v2/Apps/Artwork/Components/Seo/SeoDataForArtwork.tsx b/src/v2/Apps/Artwork/Components/Seo/SeoDataForArtwork.tsx
new file mode 100644
index 00000000000..feaa4035750
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/Seo/SeoDataForArtwork.tsx
@@ -0,0 +1,186 @@
+import { trim } from "lodash"
+import React from "react"
+
+import { SeoDataForArtwork_artwork } from "v2/__generated__/SeoDataForArtwork_artwork.graphql"
+import { CreativeWork } from "v2/Components/Seo/CreativeWork"
+import { Product } from "v2/Components/Seo/Product"
+import { createFragmentContainer, graphql } from "react-relay"
+import { data as sd } from "sharify"
+import { get } from "v2/Utils/get"
+
+const { APP_URL } = sd
+
+interface SeoDataForArtworkProps {
+ artwork: SeoDataForArtwork_artwork
+}
+
+export const AVAILABILITY = {
+ "for sale": "https://schema.org/InStock",
+ sold: "https://schema.org/OutOfStock",
+}
+
+export const SeoDataForArtwork: React.FC = ({
+ artwork,
+}) => {
+ const artistsName = artwork.artist_names
+
+ const dimensions = parseDimensions(get(artwork, a => a.dimensions.in, ""))
+
+ const artworkMetaData = {
+ name: artwork.meta.title,
+ image: get(artwork, a => a.meta_image.resized.url),
+ description: get(artwork, a => a.meta.description),
+ url: `${APP_URL}${artwork.href}`,
+ ...dimensions,
+ brand: {
+ "@type": "Person",
+ name: artistsName,
+ },
+ }
+
+ const partnerType = get(artwork, a => a.partner.type)
+ if (partnerType === "Institution") {
+ return {renderer} ,
+ query: graphql`
+ query SeoDataForArtwork_Test_Query @raw_response_type {
+ artwork(id: "richard-anuszkiewicz-lino-yellow-318") {
+ ...SeoDataForArtwork_artwork
+ }
+ }
+ `,
+ mockData: { artwork } as SeoDataForArtwork_Test_QueryRawResponse,
+ })
+ }
+
+ const getProductData = wrapper =>
+ wrapper
+ .find(Product)
+ .first()
+ .props().data
+
+ describe("SeoDataForArtworkFragmentContainer", () => {
+ it("Renders without a partner", async () => {
+ const wrapper = await getWrapper({
+ ...SeoDataForArtworkFixture,
+ partner: null,
+ })
+
+ expect(wrapper).toBeTruthy()
+ })
+ it("Renders a CreativeWork for an institution", async () => {
+ const wrapper = await getWrapper({
+ ...SeoDataForArtworkFixture,
+ partner: {
+ ...SeoDataForArtworkFixture.partner,
+ type: "Institution",
+ },
+ })
+
+ expect(wrapper.find(CreativeWork).length).toEqual(1)
+
+ const data = wrapper
+ .find(CreativeWork)
+ .first()
+ .props().data
+ expect(data).toEqual({
+ brand: {
+ "@type": "Person",
+ name: "Artist McArtist",
+ },
+ description: "artwork description",
+ image: "artwork-image",
+ name: "artwork title",
+ url: "test-url/artwork/an-artwork",
+ width: "1 in",
+ height: "2 in",
+ })
+ })
+
+ it("Renders a Product for a non-institution ", async () => {
+ const wrapper = await getWrapper({
+ ...SeoDataForArtworkFixture,
+ listPrice: {
+ __typename: "Money",
+ major: 1000,
+ currencyCode: "USD",
+ },
+ })
+
+ expect(wrapper.find(Product).length).toEqual(1)
+
+ const data = wrapper
+ .find(Product)
+ .first()
+ .props().data
+ expect(data).toEqual({
+ brand: { "@type": "Person", name: "Artist McArtist" },
+ category: "Design/Decorative Art",
+ description: "artwork description",
+ image: "artwork-image",
+ name: "artwork title",
+ offers: {
+ "@type": "Offer",
+ availability: "https://schema.org/InStock",
+ price: 1000,
+ priceCurrency: "USD",
+ seller: {
+ "@type": "ArtGallery",
+ name: "Wright",
+ image: "partner-image",
+ },
+ },
+ productionDate: "1950",
+ url: "test-url/artwork/an-artwork",
+ width: "1 in",
+ height: "2 in",
+ })
+ })
+
+ describe("Artwork availability", () => {
+ it("Renders InStock when 'for sale'", async () => {
+ const wrapper = await getWrapper({
+ ...SeoDataForArtworkFixture,
+ listPrice: {
+ __typename: "Money",
+ major: 1000,
+ currencyCode: "USD",
+ },
+ availability: "for sale",
+ })
+
+ expect(getProductData(wrapper).offers.availability).toEqual(
+ AVAILABILITY["for sale"]
+ )
+ })
+
+ it("Renders OutOfStock when not 'for sale'", async () => {
+ const wrapper = await getWrapper({
+ ...SeoDataForArtworkFixture,
+ listPrice: {
+ __typename: "Money",
+ major: 1000,
+ currencyCode: "USD",
+ },
+ availability: "sold",
+ })
+
+ expect(getProductData(wrapper).offers.availability).toEqual(
+ AVAILABILITY.sold
+ )
+ })
+ })
+
+ describe("Artwork price", () => {
+ it("Doesn't render offer when price is hidden", async () => {
+ const wrapper = await getWrapper({
+ ...SeoDataForArtworkFixture,
+ is_price_range: true,
+ is_price_hidden: true,
+ })
+
+ expect(getProductData(wrapper).offers).toBeFalsy()
+ })
+
+ it("Renders AggregateOffer when price range", async () => {
+ const wrapper = await getWrapper({
+ ...SeoDataForArtworkFixture,
+ is_price_range: false,
+ is_price_hidden: false,
+ listPrice: {
+ __typename: "PriceRange",
+ maxPrice: {
+ major: 1000,
+ },
+ minPrice: {
+ major: 100,
+ currencyCode: "USD",
+ },
+ },
+ })
+
+ expect(getProductData(wrapper).offers).toEqual({
+ "@type": "AggregateOffer",
+ lowPrice: 100,
+ highPrice: 1000,
+ priceCurrency: "USD",
+ availability: "https://schema.org/InStock",
+ seller: {
+ "@type": "ArtGallery",
+ image: "partner-image",
+ name: "Wright",
+ },
+ })
+ })
+
+ it("Renders AggregateOffer when price range with low and high bounds", async () => {
+ const wrapper = await getWrapper({
+ ...SeoDataForArtworkFixture,
+ is_price_range: false,
+ is_price_hidden: false,
+ listPrice: {
+ __typename: "PriceRange",
+ maxPrice: {
+ major: 1000,
+ },
+ minPrice: {
+ major: 100,
+ currencyCode: "USD",
+ },
+ },
+ })
+
+ expect(getProductData(wrapper).offers).toEqual({
+ "@type": "AggregateOffer",
+ lowPrice: 100,
+ highPrice: 1000,
+ priceCurrency: "USD",
+ availability: "https://schema.org/InStock",
+ seller: {
+ "@type": "ArtGallery",
+ image: "partner-image",
+ name: "Wright",
+ },
+ })
+ })
+
+ it("Renders AggregateOffer when price range only with low bound", async () => {
+ const wrapper = await getWrapper({
+ ...SeoDataForArtworkFixture,
+ is_price_range: false,
+ is_price_hidden: false,
+ listPrice: {
+ __typename: "PriceRange",
+ minPrice: {
+ major: 100,
+ currencyCode: "USD",
+ },
+ maxPrice: null,
+ },
+ })
+
+ expect(getProductData(wrapper).offers).toEqual({
+ "@type": "AggregateOffer",
+ lowPrice: 100,
+ priceCurrency: "USD",
+ availability: "https://schema.org/InStock",
+ seller: {
+ "@type": "ArtGallery",
+ image: "partner-image",
+ name: "Wright",
+ },
+ })
+ })
+
+ it("Doesn't render offer when price range and no low bound", async () => {
+ const wrapper = await getWrapper({
+ ...SeoDataForArtworkFixture,
+ is_price_range: false,
+ is_price_hidden: false,
+ listPrice: {
+ __typename: "PriceRange",
+ minPrice: null,
+ maxPrice: {
+ major: 1000,
+ },
+ },
+ })
+
+ expect(getProductData(wrapper).offers).toBeFalsy()
+ })
+
+ it("Does not render seller within offer when profile image (required) is not present", async () => {
+ const wrapper = await getWrapper({
+ ...SeoDataForArtworkFixture,
+ partner: {
+ id: "opaque-partner-id",
+ name: "Wright",
+ type: "Auction House",
+ profile: {
+ id: "opaque-profile-id",
+ image: null,
+ },
+ },
+ listPrice: {
+ __typename: "PriceRange",
+ maxPrice: {
+ major: 1000,
+ },
+ minPrice: {
+ major: 100,
+ currencyCode: "USD",
+ },
+ },
+ })
+
+ expect(getProductData(wrapper).offers.seller).toBeFalsy()
+ })
+ })
+ describe("Artwork dimensions", () => {
+ it("renders no dimensions when dimensions aren't parseable", async () => {
+ const wrapper = await getWrapper({
+ ...SeoDataForArtworkFixture,
+ dimensions: {
+ in: "one point twenty one gigawatts",
+ },
+ })
+
+ expect(getProductData(wrapper).width).toBeUndefined()
+ expect(getProductData(wrapper).height).toBeUndefined()
+ expect(getProductData(wrapper).depth).toBeUndefined()
+ })
+
+ it("renders width and height when given two dimensions", async () => {
+ const wrapper = await getWrapper({
+ ...SeoDataForArtworkFixture,
+ dimensions: {
+ in: "2 × 4 in",
+ },
+ })
+
+ expect(getProductData(wrapper).width).toEqual("2 in")
+ expect(getProductData(wrapper).height).toEqual("4 in")
+ expect(getProductData(wrapper).depth).toBeUndefined()
+ })
+
+ it("renders width, height, and depth when given three dimensions", async () => {
+ const wrapper = await getWrapper({
+ ...SeoDataForArtworkFixture,
+ dimensions: {
+ in: "2 × 4 × 6 in",
+ },
+ })
+
+ expect(getProductData(wrapper).width).toEqual("2 in")
+ expect(getProductData(wrapper).height).toEqual("4 in")
+ expect(getProductData(wrapper).depth).toEqual("6 in")
+ })
+
+ it("parses dimensions missing spaces", async () => {
+ const wrapper = await getWrapper({
+ ...SeoDataForArtworkFixture,
+ dimensions: {
+ in: "2×4×6 in",
+ },
+ })
+
+ expect(getProductData(wrapper).width).toEqual("2 in")
+ expect(getProductData(wrapper).height).toEqual("4 in")
+ expect(getProductData(wrapper).depth).toEqual("6 in")
+ })
+
+ it("assumes inches when no unit is included", async () => {
+ const wrapper = await getWrapper({
+ ...SeoDataForArtworkFixture,
+ dimensions: {
+ in: "2 × 4",
+ },
+ })
+
+ expect(getProductData(wrapper).width).toEqual("2 in")
+ expect(getProductData(wrapper).height).toEqual("4 in")
+ expect(getProductData(wrapper).depth).toBeUndefined()
+ })
+
+ it("successfully handles case when no dimensions a present", async () => {
+ expect(() =>
+ getWrapper({ ...SeoDataForArtworkFixture, dimensions: undefined })
+ ).not.toThrow()
+ })
+ })
+ })
+})
diff --git a/src/v2/Apps/Artwork/Components/TrustSignals/AuthenticityCertificate.tsx b/src/v2/Apps/Artwork/Components/TrustSignals/AuthenticityCertificate.tsx
new file mode 100644
index 00000000000..f8e07281a1f
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/TrustSignals/AuthenticityCertificate.tsx
@@ -0,0 +1,75 @@
+import { CertificateIcon, Flex, Modal, Serif } from "@artsy/palette"
+import { AuthenticityCertificate_artwork } from "v2/__generated__/AuthenticityCertificate_artwork.graphql"
+import React, { useState } from "react"
+import { createFragmentContainer } from "react-relay"
+import { graphql } from "react-relay"
+import { TrustSignal, TrustSignalProps } from "./TrustSignal"
+
+interface AuthenticityCertificateProps
+ extends Omit {
+ artwork: AuthenticityCertificate_artwork
+}
+
+export const AuthenticityCertificate: React.FC = ({
+ artwork,
+ ...other
+}) => {
+ const [isShowingModal, setIsShowingModal] = useState(false)
+
+ const onDismissModal = () => {
+ setIsShowingModal(false)
+ }
+
+ const onOpenModal = () => {
+ setIsShowingModal(true)
+ }
+
+ return (
+ artwork.hasCertificateOfAuthenticity &&
+ !artwork.is_biddable && (
+ <>
+
+
+
+ A certificate of authenticity (COA) is a signed document from an
+ authoritative source that verifies the artwork’s authenticity.
+ While many COAs are signed by the artist, others will be signed by
+ the representing gallery or the printmaker who collaborated with
+ the artist on the work. For secondary market works, authorized
+ estates or foundations are often the issuing party.
+
+
+ COAs typically include the name of the artist, the details (title,
+ date, medium, dimensions) of the work in question, and whenever
+ possible an image of the work.
+
+
+
+
+ )
+ )
+}
+
+export const AuthenticityCertificateFragmentContainer = createFragmentContainer(
+ AuthenticityCertificate,
+ {
+ artwork: graphql`
+ fragment AuthenticityCertificate_artwork on Artwork {
+ hasCertificateOfAuthenticity
+ is_biddable: isBiddable
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Artwork/Components/TrustSignals/SecurePayment.tsx b/src/v2/Apps/Artwork/Components/TrustSignals/SecurePayment.tsx
new file mode 100644
index 00000000000..aa8d20ff344
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/TrustSignals/SecurePayment.tsx
@@ -0,0 +1,52 @@
+import { Link, LockIcon } from "@artsy/palette"
+import { SecurePayment_artwork } from "v2/__generated__/SecurePayment_artwork.graphql"
+import React from "react"
+import { createFragmentContainer } from "react-relay"
+import { graphql } from "react-relay"
+import { TrustSignal, TrustSignalProps } from "./TrustSignal"
+
+interface SecurePaymentProps
+ extends Omit {
+ artwork: SecurePayment_artwork
+}
+
+export const SecurePayment: React.FC = ({
+ artwork,
+ ...other
+}) => {
+ return (
+ (artwork.is_acquireable || artwork.is_offerable) && (
+ {
+ Icon: JSX.Element
+ label: string
+ description: string | JSX.Element
+ onClick?: () => void
+}
+
+export const TrustSignal: FC = ({
+ Icon,
+ label,
+ description,
+ onClick,
+ ...other
+}) => {
+ return (
+
+ {Icon}
+
+
+ {label}
+
+
+
+ {description}
+
+
+
+ )
+}
diff --git a/src/v2/Apps/Artwork/Components/TrustSignals/VerifiedSeller.tsx b/src/v2/Apps/Artwork/Components/TrustSignals/VerifiedSeller.tsx
new file mode 100644
index 00000000000..a49f121c160
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/TrustSignals/VerifiedSeller.tsx
@@ -0,0 +1,44 @@
+import { VerifiedIcon } from "@artsy/palette"
+import { VerifiedSeller_artwork } from "v2/__generated__/VerifiedSeller_artwork.graphql"
+import React from "react"
+import { createFragmentContainer } from "react-relay"
+import { graphql } from "react-relay"
+import { TrustSignal, TrustSignalProps } from "./TrustSignal"
+
+interface VerifiedSellerProps
+ extends Omit {
+ artwork: VerifiedSeller_artwork
+}
+
+export const VerifiedSeller: React.FC = ({
+ artwork,
+ ...other
+}) => {
+ return (
+ !artwork.is_biddable &&
+ artwork.partner &&
+ artwork.partner.isVerifiedSeller && (
+
+ >
+) =>
+ renderRelayTree({
+ Component: (props: AuthenticityCertificateTestQueryResponse) => (
+ >
+) =>
+ renderRelayTree({
+ Component: (props: SecurePaymentTestQueryResponse) => (
+ >
+) =>
+ renderRelayTree({
+ Component: (props: VerifiedSellerTestQueryResponse) => (
+
+
+
+
+ )
+})
diff --git a/src/v2/Apps/Artwork/Components/__stories__/ArtworkBanner.story.tsx b/src/v2/Apps/Artwork/Components/__stories__/ArtworkBanner.story.tsx
new file mode 100644
index 00000000000..d9f07e09f5b
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/__stories__/ArtworkBanner.story.tsx
@@ -0,0 +1,45 @@
+import { AllAdditionalDetailsPresent } from "v2/Apps/__tests__/Fixtures/Artworks"
+import React from "react"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+import { ArtworkBanner, ArtworkBannerQueryRenderer } from "../ArtworkBanner"
+
+import {
+ ArtworkAuctionBannerFixture,
+ ArtworkBenefitAuctionBannerFixture,
+ ArtworkCurrentShowBannerFixture,
+ ArtworkFairBannerFixture,
+ ArtworkPastShowBannerFixture,
+ ArtworkUpcomingShowBannerFixture,
+} from "v2/Apps/__tests__/Fixtures/Artwork/ArtworkBanner"
+
+storiesOf("Apps/Artwork/Components", module).add("ArtworkBanner", () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+})
diff --git a/src/v2/Apps/Artwork/Components/__stories__/ArtworkDetails.story.tsx b/src/v2/Apps/Artwork/Components/__stories__/ArtworkDetails.story.tsx
new file mode 100644
index 00000000000..344935835b7
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/__stories__/ArtworkDetails.story.tsx
@@ -0,0 +1,60 @@
+import { AllAdditionalDetailsPresent } from "v2/Apps/__tests__/Fixtures/Artworks"
+import { MockRelayRenderer } from "v2/DevTools"
+import React from "react"
+import { graphql } from "react-relay"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+import {
+ ArtworkDetailsFragmentContainer,
+ ArtworkDetailsQueryRenderer,
+} from "../ArtworkDetails"
+
+const MockArtworkDetails = ({ artwork }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ )
+})
diff --git a/src/v2/Apps/Artwork/Components/__stories__/ArtworkSidebar.story.tsx b/src/v2/Apps/Artwork/Components/__stories__/ArtworkSidebar.story.tsx
new file mode 100644
index 00000000000..7f76f69d528
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/__stories__/ArtworkSidebar.story.tsx
@@ -0,0 +1,68 @@
+import { ArtworkSidebarFragmentContainer } from "v2/Apps/Artwork/Components/ArtworkSidebar"
+import React from "react"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+
+import {
+ ClosedAuctionArtwork,
+ CollecingInstitutionArtwork,
+ LiveAuctionArtwork,
+ MultipleArtistsArtwork,
+ OpenAuctionArtwork,
+ RegularArtworkWithOneEdition,
+ RegularArtworkWithTwoEditions,
+ RegularNonEditionedArtwork,
+ VideoArtwork,
+} from "v2/Apps/__tests__/Fixtures/Artworks"
+import { MockRelayRenderer } from "v2/DevTools"
+import { graphql } from "react-relay"
+
+const MockArtworkSidebar = ({ artwork }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ )
+})
diff --git a/src/v2/Apps/Artwork/Components/__stories__/ArtworkSidebarLive.story.tsx b/src/v2/Apps/Artwork/Components/__stories__/ArtworkSidebarLive.story.tsx
new file mode 100644
index 00000000000..80a954489e4
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/__stories__/ArtworkSidebarLive.story.tsx
@@ -0,0 +1,44 @@
+import { ArtworkSidebarQueryRenderer } from "v2/Apps/Artwork/Components/ArtworkSidebar"
+import React from "react"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+
+storiesOf("Apps/Artwork/Components", module).add("SidebarLive", () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+})
diff --git a/src/v2/Apps/Artwork/Components/__stories__/Banner.story.tsx b/src/v2/Apps/Artwork/Components/__stories__/Banner.story.tsx
new file mode 100644
index 00000000000..5d97c136544
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/__stories__/Banner.story.tsx
@@ -0,0 +1,38 @@
+import React from "react"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+import { Banner, LargeBanner, SmallBanner } from "../ArtworkBanner/Banner"
+
+storiesOf("Apps/Artwork/Components", module).add("ResponsiveBanner", () => {
+ return (
+
+
+
+
+
+ )
+})
diff --git a/src/v2/Apps/Artwork/Components/__stories__/OtherAuctions.story.tsx b/src/v2/Apps/Artwork/Components/__stories__/OtherAuctions.story.tsx
new file mode 100644
index 00000000000..dfe23888912
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/__stories__/OtherAuctions.story.tsx
@@ -0,0 +1,45 @@
+import { OtherAuctionsStoryQuery } from "v2/__generated__/OtherAuctionsStoryQuery.graphql"
+import { SystemContext } from "v2/Artsy"
+import { renderWithLoadProgress } from "v2/Artsy/Relay/renderWithLoadProgress"
+import { SystemQueryRenderer as QueryRenderer } from "v2/Artsy/Relay/SystemQueryRenderer"
+import React, { useContext } from "react"
+import { graphql } from "react-relay"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+import { OtherAuctionsFragmentContainer } from "../OtherAuctions"
+
+const OtherAuctions = ({ size }: { size?: number }) => {
+ const { relayEnvironment } = useContext(SystemContext)
+
+ return (
+
+ environment={relayEnvironment}
+ query={graphql`
+ query OtherAuctionsStoryQuery($size: Int!) {
+ salesConnection(first: $size, sort: TIMELY_AT_NAME_ASC) {
+ # FIXME: Need to pluck just nodes and send as array.
+ ...OtherAuctions_salesConnection
+ }
+ }
+ `}
+ variables={{ size: size || 20 }}
+ render={renderWithLoadProgress(OtherAuctionsFragmentContainer as any)}
+ />
+ )
+}
+
+storiesOf("Apps/Artwork/Components/OtherAuctions", module)
+ .add("Other Auctions (default)", () => {
+ return (
+
+ )
+ })
+ .add("Other Auctions (many)", () => {
+ return (
+
+ )
+ })
diff --git a/src/v2/Apps/Artwork/Components/__stories__/OtherWorks.story.tsx b/src/v2/Apps/Artwork/Components/__stories__/OtherWorks.story.tsx
new file mode 100644
index 00000000000..bb1cae5a8db
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/__stories__/OtherWorks.story.tsx
@@ -0,0 +1,71 @@
+import { OtherWorksQuery } from "v2/__generated__/OtherWorksQuery.graphql"
+import { SystemContext } from "v2/Artsy"
+import { renderWithLoadProgress } from "v2/Artsy/Relay/renderWithLoadProgress"
+import { SystemQueryRenderer as QueryRenderer } from "v2/Artsy/Relay/SystemQueryRenderer"
+import React, { useContext } from "react"
+import { graphql } from "react-relay"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+import { OtherWorksFragmentContainer } from "../OtherWorks"
+import { RelatedWorksArtworkGridQueryRenderer as RelatedWorksArtworkGrid } from "../OtherWorks/RelatedWorksArtworkGrid"
+
+export const OtherWorks = ({ artworkSlug }: { artworkSlug: string }) => {
+ const { relayEnvironment } = useContext(SystemContext)
+
+ return (
+
+ environment={relayEnvironment}
+ variables={{ artworkSlug }}
+ query={graphql`
+ query OtherWorksQuery($artworkSlug: String!) {
+ artwork(id: $artworkSlug) {
+ ...OtherWorks_artwork
+ }
+ }
+ `}
+ render={renderWithLoadProgress(OtherWorksFragmentContainer)}
+ />
+ )
+}
+
+storiesOf("Apps/Artwork/Components/OtherWorks", module)
+ .add("Auctions", () => {
+ return (
+ <>
+
+
+
+ )
+ })
+ .add("Artist", () => {
+ return (
+
+ )
+ })
+ .add("Fair", () => {
+ return (
+
+ )
+ })
+ .add("Partner Show (Gallery)", () => {
+ return (
+
+ )
+ })
+ .add("Related", () => {
+ return (
+
+ )
+ })
diff --git a/src/v2/Apps/Artwork/Components/__stories__/PricingContext.story.tsx b/src/v2/Apps/Artwork/Components/__stories__/PricingContext.story.tsx
new file mode 100644
index 00000000000..95ac7da35f8
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/__stories__/PricingContext.story.tsx
@@ -0,0 +1,251 @@
+import { Flex } from "@artsy/palette"
+import { PricingContextStoryQueryRawResponse } from "v2/__generated__/PricingContextStoryQuery.graphql"
+import { MockRelayRenderer } from "v2/DevTools"
+import React from "react"
+import { graphql } from "react-relay"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+import { PricingContextFragmentContainer } from "../PricingContext"
+
+const MockPricingContext = ({
+ artwork,
+}: {
+ artwork: PricingContextStoryQueryRawResponse["artwork"]
+}) => {
+ return (
+
+
+ )
+ }
+
+ beforeEach(() => {
+ context = {
+ mediator: { trigger: jest.fn() },
+ relay: { environment: {} } as RelayProp,
+ user: null,
+ }
+ props = { artist: ArtistInfoFixture }
+ })
+
+ describe("ArtistInfo for artwork with complete artist info", () => {
+ it("renders a correct component tree", () => {
+ const component = getWrapper()
+ expect(component.find("EntityHeader").length).toBe(1)
+ expect(component.find("ArtistBio").length).toBe(1)
+ expect(component.find("Button").length).toBe(1)
+ expect(component.find("Button").text()).toEqual("Show artist insights")
+ expect(component.find("MarketInsights").length).toBe(0)
+ expect(component.find("SelectedExhibitions").length).toBe(0)
+ })
+
+ it("shows artist insights when the 'Show artist insights' button is clicked", () => {
+ const component = getWrapper()
+ component.find("Button").simulate("click")
+ expect(component.find("MarketInsights").length).toBe(1)
+ expect(component.find("SelectedExhibitions").length).toBe(1)
+ })
+ })
+
+ describe("ArtistInfo for artwork with incomplete artist info", () => {
+ it("Hides 'Show artist insights' button if no market insights or selected exhibitions data", async () => {
+ const artist = {
+ ...ArtistInfoFixture,
+ highlights: {
+ ...ArtistInfoFixture.highlights,
+ partnersConnection: null,
+ },
+ collections: null,
+ auctionResultsConnection: null,
+ exhibition_highlights: null,
+ }
+ const component = getWrapper({ artist })
+ expect(component.find("Button").length).toBe(0)
+ })
+
+ it("Hides 'Show artist insights' button if exhibition count does not meet minimum", async () => {
+ const artist = {
+ ...ArtistInfoFixture,
+ highlights: {
+ ...ArtistInfoFixture.highlights,
+ partnersConnection: null,
+ },
+ collections: null,
+ auctionResultsConnection: null,
+ exhibition_highlights: {
+ ...ArtistInfoFixture.exhibition_highlights,
+ length: 1,
+ },
+ }
+ const component = getWrapper({ artist })
+ expect(component.find("Button").length).toBe(0)
+ })
+
+ it("hides ArtistBio if no data", async () => {
+ const artist = {
+ ...ArtistInfoFixture,
+ biographyBlurb: {
+ ...ArtistInfoFixture.biographyBlurb,
+ text: null,
+ },
+ }
+ const component = getWrapper({ artist })
+ expect(component.find("ArtistBio").length).toBe(0)
+ })
+
+ it("hides MarketInsights if no data", async () => {
+ const artist = {
+ ...ArtistInfoFixture,
+ highlights: {
+ ...ArtistInfoFixture.highlights,
+ partnersConnection: null,
+ },
+ collections: null,
+ auctionResultsConnection: null,
+ }
+ const component = getWrapper({ artist })
+ component.find("Button").simulate("click")
+ expect(component.find("MarketInsights").html()).toBe(null)
+ })
+
+ it("hides SelectedExhibitions if no data", async () => {
+ const artist = {
+ ...ArtistInfoFixture,
+ exhibition_highlights: [],
+ }
+ const component = getWrapper({ artist })
+ component.find("Button").simulate("click")
+ expect(component.find("SelectedExhibitions").html()).toBe(null)
+ })
+ })
+
+ it("opens auth modal with expected args when following an artist", () => {
+ const component = getWrapper()
+ component
+ .find(FollowArtistButton)
+ .first()
+ .simulate("click")
+ expect(context.mediator.trigger).toBeCalledWith("open:auth", {
+ mode: "signup",
+ contextModule: "aboutTheWork",
+ copy: "Sign up to follow Pablo Picasso",
+ intent: "followArtist",
+ afterSignUpAction: {
+ action: "follow",
+ kind: "artist",
+ objectId: "pablo-picasso",
+ },
+ })
+ })
+
+ describe("Analytics", () => {
+ it("tracks click on 'Show artist insights' button", () => {
+ const { Component, dispatch } = mockTracking(ArtistInfo)
+ const component = mount( true }} {...props} />
+ )
+ }
+
+ const trackEvent = jest.fn()
+
+ beforeEach(() => {
+ ;(useTracking as jest.Mock).mockImplementation(() => {
+ return {
+ trackEvent,
+ }
+ })
+ })
+
+ afterEach(() => {
+ jest.clearAllMocks()
+ })
+
+ it("renders related artists", () => {
+ const props = { artwork: { artist: ArtworkRelatedArtistsFixture } }
+
+ const wrapper = getWrapper(props)
+
+ expect(wrapper.find("ArtistCard").length).toEqual(4)
+ })
+
+ it("tracks ArtistCard clicks", () => {
+ const props = {
+ artwork: { artist: ArtworkRelatedArtistsFixture, " $refType": null },
+ }
+
+ const wrapper = getWrapper(props)
+
+ const artistCard = wrapper.find("ArtistCard").at(0)
+ artistCard.simulate("click")
+
+ expect(trackEvent).toBeCalledWith({
+ action_type: "Click",
+ context_module: "RelatedArtists",
+ type: "Artist card",
+ })
+ expect(trackEvent).toHaveBeenCalledTimes(1)
+ })
+})
diff --git a/src/v2/Apps/Artwork/Components/__tests__/OtherWorks.jest.tsx b/src/v2/Apps/Artwork/Components/__tests__/OtherWorks.jest.tsx
new file mode 100644
index 00000000000..7e2a7fb8301
--- /dev/null
+++ b/src/v2/Apps/Artwork/Components/__tests__/OtherWorks.jest.tsx
@@ -0,0 +1,187 @@
+import { Serif } from "@artsy/palette"
+import { mount, shallow } from "enzyme"
+import React from "react"
+import { Header } from "../OtherWorks/Header"
+import { OtherWorksFragmentContainer as OtherWorks } from "../OtherWorks/index"
+
+describe("OtherWorks", () => {
+ let genericOtherWorksData
+
+ beforeEach(() => {
+ genericOtherWorksData = {
+ contextGrids: null,
+ context: {
+ __typename: "ArtworkContextPartnerShow",
+ },
+ sale: null,
+ internalID: "artwork1",
+ gravityID: "asdbsd",
+ layers: [],
+ layer: {
+ artworksConnection: null,
+ },
+ " $fragmentRefs": null,
+ }
+ })
+
+ it("renders no grids if there are none provided", () => {
+ const component = shallow(,
+ limit: number
+) => {
+ if (!initial || initial.length < 1) {
+ return []
+ }
+ if (!limit || initial.length <= limit) {
+ return initial
+ }
+ const remainCount = initial.length - limit
+ const limited = initial.slice(0, limit)
+ limited.push(`+${remainCount} more`)
+ return limited
+}
diff --git a/src/v2/Apps/Artwork/routes.tsx b/src/v2/Apps/Artwork/routes.tsx
new file mode 100644
index 00000000000..5bef44c2e4b
--- /dev/null
+++ b/src/v2/Apps/Artwork/routes.tsx
@@ -0,0 +1,27 @@
+import loadable from "@loadable/component"
+import { graphql } from "react-relay"
+
+const ArtworkApp = loadable(() => import("./ArtworkApp"))
+
+export const routes = [
+ {
+ path: "/artwork/:artworkID/(confirm-bid)?",
+ getComponent: () => ArtworkApp,
+ prepare: () => {
+ ArtworkApp.preload()
+ },
+ query: graphql`
+ query routes_ArtworkQuery($artworkID: String!) {
+ artwork(id: $artworkID) @principalField {
+ ...ArtworkApp_artwork
+ }
+ me {
+ ...ArtworkApp_me
+ }
+ }
+ `,
+ cacheConfig: {
+ force: true,
+ },
+ },
+]
diff --git a/src/v2/Apps/Auction/Components/AuctionFAQ.tsx b/src/v2/Apps/Auction/Components/AuctionFAQ.tsx
new file mode 100644
index 00000000000..7e800bb7c4e
--- /dev/null
+++ b/src/v2/Apps/Auction/Components/AuctionFAQ.tsx
@@ -0,0 +1,149 @@
+import { Box, media, Serif, space, Spacer, Theme, Toggle } from "@artsy/palette"
+import { AuctionFAQ_viewer } from "v2/__generated__/AuctionFAQ_viewer.graphql"
+import React from "react"
+import Markdown from "react-markdown"
+import { createFragmentContainer, graphql } from "react-relay"
+import styled from "styled-components"
+
+interface AuctionFAQProps {
+ viewer: AuctionFAQ_viewer
+}
+
+export const AuctionFAQ: React.FC = ({ viewer }) => {
+ const biddingContent = viewer.bidding && viewer.bidding.content
+ const buyersPremiumTaxesAndFeesContent =
+ viewer.buyersPremiumTaxesAndFees && viewer.buyersPremiumTaxesAndFees.content
+ const paymentsAndShippingContent =
+ viewer.paymentsAndShipping && viewer.paymentsAndShipping.content
+ const emailsAndAlertsContent =
+ viewer.emailsAndAlerts && viewer.emailsAndAlerts.content
+ const conditionsOfSaleContent =
+ viewer.conditionsOfSale && viewer.conditionsOfSale.content
+
+ return (
+
+
+
+ Auction FAQs
+
+
+ How can we help you? Below are answers to some of the most common
+ questions from collectors.
+ contact us .
+
+
+
+ )}
+ {buyersPremiumTaxesAndFeesContent && (
+
+
+ )}
+ {paymentsAndShippingContent && (
+
+
+ )}
+ {emailsAndAlertsContent && (
+
+
+ )}
+ {conditionsOfSaleContent && (
+
+
+ )}
+
+
+ )
+}
+
+const AuctionWrapper = styled(Box)`
+ max-width: 600px;
+ margin: ${space(4)}px auto;
+ padding: ${space(2)}px;
+ ${media.xs`
+ margin: ${space(1)}px auto;
+ `};
+`
+
+const StyledMarkdown = styled(Markdown)`
+ h2 {
+ font-family: "Adobe Garamond W08", "adobe-garamond-pro",
+ "AGaramondPro-Regular", "Times New Roman", Times, serif;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 24px;
+ }
+
+ p {
+ margin-bottom: 20px;
+ font-family: "Adobe Garamond W08", adobe-garamond-pro, AGaramondPro-Regular,
+ "Times New Roman", Times, serif;
+ font-size: 16px;
+ line-height: 24px;
+ }
+
+ p:last-child {
+ margin-bottom: 0;
+ }
+`
+
+export const AuctionFAQFragmentContainer = createFragmentContainer(AuctionFAQ, {
+ viewer: graphql`
+ fragment AuctionFAQ_viewer on Viewer {
+ bidding: staticContent(id: "how-auctions-work-bidding") {
+ content
+ }
+ buyersPremiumTaxesAndFees: staticContent(
+ id: "how-auctions-work-buyers-premium-taxes-and-fees"
+ ) {
+ content
+ }
+ paymentsAndShipping: staticContent(
+ id: "how-auctions-work-payments-and-shipping"
+ ) {
+ content
+ }
+ emailsAndAlerts: staticContent(
+ id: "how-auctions-work-emails-and-alerts"
+ ) {
+ content
+ }
+ conditionsOfSale: staticContent(
+ id: "how-auctions-work-conditions-of-sale"
+ ) {
+ content
+ }
+ }
+ `,
+})
+
+export default AuctionFAQFragmentContainer
diff --git a/src/v2/Apps/Auction/Components/BidForm.tsx b/src/v2/Apps/Auction/Components/BidForm.tsx
new file mode 100644
index 00000000000..dd6f8e03840
--- /dev/null
+++ b/src/v2/Apps/Auction/Components/BidForm.tsx
@@ -0,0 +1,334 @@
+import {
+ Box,
+ Button,
+ Flex,
+ LargeSelect,
+ Sans,
+ Separator,
+ Serif,
+} from "@artsy/palette"
+import {
+ Form,
+ Formik,
+ FormikHelpers as FormikActions,
+ FormikValues,
+} from "formik"
+import { dropWhile, find } from "lodash"
+import React from "react"
+import { createFragmentContainer, graphql, RelayProp } from "react-relay"
+import { data as sd } from "sharify"
+import Yup from "yup"
+
+import { BidForm_me } from "v2/__generated__/BidForm_me.graphql"
+import { BidForm_saleArtwork } from "v2/__generated__/BidForm_saleArtwork.graphql"
+import { CreditCardInstructions } from "v2/Apps/Auction/Components/CreditCardInstructions"
+import { PricingTransparencyQueryRenderer as PricingTransparency } from "v2/Apps/Auction/Components/PricingTransparency"
+import { CreditCardInput } from "v2/Apps/Order/Components/CreditCardInput"
+import { Address, AddressForm } from "v2/Components/AddressForm"
+import { ConditionsOfSaleCheckbox } from "v2/Components/Auction/ConditionsOfSaleCheckbox"
+import { OnSubmitValidationError, TrackErrors } from "./RegistrationForm"
+
+interface Props {
+ artworkSlug: string
+ initialSelectedBid?: string
+ me: BidForm_me
+ onSubmit: (values: FormikValues, actions: FormikActions) => void
+ onMaxBidSelect?: (values: string) => void
+ relay: RelayProp
+ saleArtwork: BidForm_saleArtwork
+ trackSubmissionErrors: TrackErrors
+}
+
+export interface FormValues {
+ address?: Address
+ agreeToTerms: boolean
+ creditCard?: string
+ selectedBid: string
+}
+
+Yup.addMethod(Yup.string, "present", function (message) {
+ return this.test("test-present", message, value => {
+ return this.trim()
+ .required(message)
+ .isValid(value)
+ })
+})
+
+const validationSchemaForRegisteredUsers = Yup.object().shape({
+ selectedBid: Yup.string().required(),
+})
+
+const validationSchemaForUnregisteredUsersWithCreditCard = Yup.object().shape({
+ selectedBid: Yup.string().required(),
+ agreeToTerms: Yup.bool().oneOf(
+ [true],
+ "You must agree to the Conditions of Sale"
+ ),
+})
+
+const validationSchemaForUnregisteredUsersWithoutCreditCard = Yup.object().shape(
+ {
+ selectedBid: Yup.string().required(),
+ address: Yup.object({
+ name: Yup.string().present("Name is required"),
+ addressLine1: Yup.string().present("Address is required"),
+ country: Yup.string().present("Country is required"),
+ city: Yup.string().present("City is required"),
+ region: Yup.string().present("State is required"),
+ postalCode: Yup.string().present("Postal code is required"),
+ phoneNumber: Yup.string().present("Telephone is required"),
+ }),
+ agreeToTerms: Yup.bool().oneOf(
+ [true],
+ "You must agree to the Conditions of Sale"
+ ),
+ }
+)
+
+const getSelectedBid = ({
+ initialSelectedBid,
+ displayIncrements,
+}: {
+ initialSelectedBid: Props["initialSelectedBid"]
+ displayIncrements: Array<{ value: string; text: string }>
+}): string => {
+ let selectedIncrement: { value: string }
+ if (!initialSelectedBid) {
+ selectedIncrement = displayIncrements[0]
+ } else {
+ const selectedNum = Number(initialSelectedBid)
+ const lastGoodIncrement = find(
+ displayIncrements,
+ i => Number(i.value) === selectedNum
+ )
+ selectedIncrement = lastGoodIncrement || displayIncrements[0]
+ }
+ return selectedIncrement.value
+}
+
+export const determineDisplayRequirements = (
+ bidder: BidForm_saleArtwork["sale"]["registrationStatus"],
+ me: BidForm_me
+) => {
+ const isRegistered = !!bidder
+
+ return {
+ requiresCheckbox: !isRegistered,
+ requiresPaymentInformation: !(isRegistered || me.hasQualifiedCreditCards),
+ }
+}
+
+export const BidForm: React.FC = ({
+ artworkSlug,
+ initialSelectedBid,
+ me,
+ onSubmit,
+ onMaxBidSelect,
+ relay,
+ saleArtwork,
+ trackSubmissionErrors,
+}) => {
+ const { ENABLE_PRICE_TRANSPARENCY } = sd
+ const displayIncrements = dropWhile(
+ saleArtwork.increments,
+ increment => increment.cents < saleArtwork.minimumNextBid.cents
+ ).map(inc => ({ value: inc.cents.toString(), text: inc.display }))
+
+ const selectedBid = getSelectedBid({ initialSelectedBid, displayIncrements })
+ const {
+ requiresCheckbox,
+ requiresPaymentInformation,
+ } = determineDisplayRequirements(saleArtwork.sale.registrationStatus, me)
+ const validationSchema = requiresCheckbox
+ ? requiresPaymentInformation
+ ? validationSchemaForUnregisteredUsersWithoutCreditCard
+ : validationSchemaForUnregisteredUsersWithCreditCard
+ : validationSchemaForRegisteredUsers
+
+ return (
+
+
+ initialValues={{
+ selectedBid,
+ agreeToTerms: false,
+ address: {
+ name: "",
+ country: "",
+ postalCode: "",
+ addressLine1: "",
+ addressLine2: "",
+ city: "",
+ region: "",
+ phoneNumber: "",
+ },
+ }}
+ validationSchema={validationSchema}
+ onSubmit={onSubmit}
+ >
+ {({
+ values,
+ touched,
+ errors,
+ isSubmitting,
+ isValid,
+ setFieldValue,
+ setFieldTouched,
+ setSubmitting,
+ status,
+ submitCount,
+ }) => {
+ return (
+
+ )
+ }}
+
+
+ )
+}
+
+export const BidFormFragmentContainer = createFragmentContainer(BidForm, {
+ saleArtwork: graphql`
+ fragment BidForm_saleArtwork on SaleArtwork {
+ minimumNextBid: minimumNextBid {
+ cents
+ }
+ increments(useMyMaxBid: true) {
+ cents
+ display
+ }
+ sale {
+ slug
+ registrationStatus {
+ qualifiedForBidding
+ }
+ }
+ }
+ `,
+ me: graphql`
+ fragment BidForm_me on Me {
+ hasQualifiedCreditCards
+ }
+ `,
+})
diff --git a/src/v2/Apps/Auction/Components/CreditCardInstructions.tsx b/src/v2/Apps/Auction/Components/CreditCardInstructions.tsx
new file mode 100644
index 00000000000..24a8d17035b
--- /dev/null
+++ b/src/v2/Apps/Auction/Components/CreditCardInstructions.tsx
@@ -0,0 +1,18 @@
+import { Serif } from "@artsy/palette"
+import React from "react"
+
+export const CreditCardInstructions = () => {
+ return (
+ <>
+
+ Please enter your credit card information below. The name on your Artsy
+ account must match the name on the card, and a valid credit card is
+ required in order to bid.
+
+
+ Registration is free. Artsy will never charge this card without your
+ permission, and you are not required to use this card to pay if you win.
+
+
+ )
+}
diff --git a/src/v2/Apps/Auction/Components/LotInfo.tsx b/src/v2/Apps/Auction/Components/LotInfo.tsx
new file mode 100644
index 00000000000..1d4b09d982f
--- /dev/null
+++ b/src/v2/Apps/Auction/Components/LotInfo.tsx
@@ -0,0 +1,70 @@
+import { Box, Flex, ResponsiveImage, Sans, Serif } from "@artsy/palette"
+import { LotInfo_artwork } from "v2/__generated__/LotInfo_artwork.graphql"
+import { LotInfo_saleArtwork } from "v2/__generated__/LotInfo_saleArtwork.graphql"
+import React from "react"
+import { createFragmentContainer, graphql, RelayProp } from "react-relay"
+
+interface Props {
+ artwork: LotInfo_artwork
+ saleArtwork: LotInfo_saleArtwork
+ relay: RelayProp
+}
+
+export const LotInfo: React.FC = ({ artwork, saleArtwork }) => {
+ const {
+ counts: { bidderPositions: bidCount },
+ } = saleArtwork
+ return (
+
+
+
+
+
+ Lot {saleArtwork.lotLabel}
+
+
+ {artwork.title}
+ {artwork.date && `, ${artwork.date}`}
+
+
+ {artwork.artistNames}
+
+
+ Current Bid: {saleArtwork.minimumNextBid.display}
+
+ {bidCount > 0 && (
+
+ ({bidCount} bid{bidCount > 1 && "s"})
+
+ )}
+
+
+ )
+}
+
+export const LotInfoFragmentContainer = createFragmentContainer(LotInfo, {
+ artwork: graphql`
+ fragment LotInfo_artwork on Artwork {
+ internalID
+ date
+ title
+ imageUrl
+ artistNames
+ }
+ `,
+ saleArtwork: graphql`
+ fragment LotInfo_saleArtwork on SaleArtwork {
+ counts {
+ bidderPositions
+ }
+ lotLabel
+ minimumNextBid {
+ amount
+ cents
+ display
+ }
+ }
+ `,
+})
diff --git a/src/v2/Apps/Auction/Components/PricingTransparency.tsx b/src/v2/Apps/Auction/Components/PricingTransparency.tsx
new file mode 100644
index 00000000000..91c76b6f717
--- /dev/null
+++ b/src/v2/Apps/Auction/Components/PricingTransparency.tsx
@@ -0,0 +1,128 @@
+import { Box, Flex, Sans, Serif, Spinner } from "@artsy/palette"
+import React from "react"
+import { graphql } from "react-relay"
+
+import {
+ PricingTransparencyQuery,
+ PricingTransparencyQueryResponse,
+ PricingTransparencyQueryVariables,
+} from "v2/__generated__/PricingTransparencyQuery.graphql"
+import { SystemContextProps, withSystemContext } from "v2/Artsy"
+import { SystemQueryRenderer as QueryRenderer } from "v2/Artsy/Relay/SystemQueryRenderer"
+
+export const PricingTransparency: React.FC = props => {
+ const { calculatedCost } = props.artwork.saleArtwork
+
+ return (
+
+
+ Summary
+
+
+
+
+
+ Your max bid
+
+
+
+
+ {calculatedCost.bidAmount.display}
+
+
+
+
+
+
+ Buyer's Premium
+
+
+
+
+ {calculatedCost.buyersPremium.display}
+
+
+
+
+
+
+ Subtotal
+
+
+
+
+ {calculatedCost.subtotal.display}
+
+
+
+
+ Plus any applicable shipping, taxes, and fees.
+
+
+ )
+}
+
+export const PricingTransparencyQueryRenderer = withSystemContext(
+ ({
+ saleId,
+ artworkId,
+ bidAmountMinor,
+ relayEnvironment,
+ }: SystemContextProps & PricingTransparencyQueryVariables) => {
+ return (
+
+ environment={relayEnvironment}
+ query={graphql`
+ query PricingTransparencyQuery(
+ $saleId: String!
+ $artworkId: String!
+ $bidAmountMinor: Int!
+ ) {
+ artwork(id: $artworkId) {
+ saleArtwork(saleID: $saleId) {
+ calculatedCost(bidAmountMinor: $bidAmountMinor) {
+ bidAmount {
+ display
+ }
+ buyersPremium {
+ display
+ }
+ subtotal {
+ display
+ }
+ }
+ }
+ }
+ }
+ `}
+ variables={{ saleId, artworkId, bidAmountMinor }}
+ render={({ props }) => {
+ if (props) {
+ return
+
+ )
+ }
+ }}
+ />
+ )
+ }
+)
diff --git a/src/v2/Apps/Auction/Components/RegistrationForm.tsx b/src/v2/Apps/Auction/Components/RegistrationForm.tsx
new file mode 100644
index 00000000000..b59e0097a45
--- /dev/null
+++ b/src/v2/Apps/Auction/Components/RegistrationForm.tsx
@@ -0,0 +1,304 @@
+import { Box, Button, Flex, Sans, Serif } from "@artsy/palette"
+import { CreditCardInstructions } from "v2/Apps/Auction/Components/CreditCardInstructions"
+import { CreditCardInput } from "v2/Apps/Order/Components/CreditCardInput"
+import { Address, AddressForm } from "v2/Components/AddressForm"
+import { ConditionsOfSaleCheckbox } from "v2/Components/Auction/ConditionsOfSaleCheckbox"
+import { ErrorModal } from "v2/Components/Modal/ErrorModal"
+import {
+ Form,
+ Formik,
+ FormikHelpers as FormikActions,
+ FormikProps,
+} from "formik"
+import React, { useEffect, useState } from "react"
+import {
+ Elements,
+ injectStripe,
+ ReactStripeElements,
+ StripeProvider,
+} from "react-stripe-elements"
+import { data as sd } from "sharify"
+import * as Yup from "yup"
+
+export interface FormResult {
+ token: stripe.Token
+ phoneNumber: string
+}
+
+export interface FormValues {
+ address: Address
+ creditCard: string
+ agreeToTerms: boolean
+}
+
+interface InnerFormProps extends FormikProps {
+ needsIdentityVerification: boolean
+}
+
+const InnerForm: React.FC = props => {
+ const {
+ touched,
+ errors,
+ isSubmitting,
+ values,
+ setFieldValue,
+ setFieldTouched,
+ needsIdentityVerification,
+ } = props
+
+ return (
+
+ )
+}
+
+Yup.addMethod(Yup.string, "present", function (message) {
+ return this.test("test-present", message, value => {
+ return this.trim()
+ .required(message)
+ .isValid(value)
+ })
+})
+
+const validationSchema = Yup.object().shape({
+ address: Yup.object({
+ name: Yup.string().present("Name is required"),
+ addressLine1: Yup.string().present("Address is required"),
+ country: Yup.string().present("Country is required"),
+ city: Yup.string().present("City is required"),
+ region: Yup.string().present("State is required"),
+ postalCode: Yup.string().present("Postal code is required"),
+ phoneNumber: Yup.string().present("Telephone is required"),
+ }),
+ agreeToTerms: Yup.bool().oneOf(
+ [true],
+ "You must agree to the Conditions of Sale"
+ ),
+})
+
+export type TrackErrors = (errors: string[]) => void
+
+/*
+ This component exists only to capture formik's renderProps and track form
+ submission events. It essentially says:
+ - IF the form has been submitted at least once
+ - AND the form is not submitting at this moment
+ - AND the form is invalid
+ - AND (in useEffect dependencies array) the form submitting state just
+ changed (because it is false, it must have been true above)
+ - THEN run the callback prop.
+ Background:
+ https://github.com/jaredpalmer/formik/issues/1484#issuecomment-490558973
+ */
+export const OnSubmitValidationError: React.FC<{
+ cb: TrackErrors
+ formikProps: Partial>
+}> = props => {
+ const { cb, formikProps } = props
+
+ const effect = () => {
+ if (
+ formikProps.submitCount > 0 &&
+ !formikProps.isSubmitting &&
+ !formikProps.isValid
+ ) {
+ const clonedErrors = Object.assign({}, formikProps.errors)
+ const addressErrors = clonedErrors.address
+ delete clonedErrors.address
+
+ const errors = Object.assign({}, clonedErrors, addressErrors)
+
+ cb(Object.values(errors as string[]))
+ formikProps.setSubmitting(false)
+ }
+ }
+ React.useEffect(effect, [formikProps.submitCount, formikProps.isSubmitting])
+
+ return null
+}
+
+export interface RegistrationFormProps
+ extends ReactStripeElements.InjectedStripeProps {
+ onSubmit: (formikActions: FormikActions, result: FormResult) => void
+ trackSubmissionErrors: TrackErrors
+ needsIdentityVerification: boolean
+}
+
+export const RegistrationForm: React.FC = props => {
+ const initialValues: FormValues = {
+ address: {
+ name: "",
+ addressLine1: "",
+ addressLine2: "",
+ country: "US",
+ city: "",
+ region: "",
+ postalCode: "",
+ phoneNumber: "",
+ },
+ creditCard: undefined,
+ agreeToTerms: false,
+ }
+
+ function createTokenAndSubmit(
+ values: FormValues,
+ actions: FormikActions
+ ) {
+ const address = {
+ name: values.address.name,
+ address_line1: values.address.addressLine1,
+ address_line2: values.address.addressLine2,
+ address_country: values.address.country,
+ address_city: values.address.city,
+ address_state: values.address.region,
+ address_zip: values.address.postalCode,
+ }
+
+ const { setFieldError, setSubmitting } = actions
+ const { stripe } = props
+
+ stripe.createToken(address).then(({ error, token }) => {
+ if (error) {
+ setFieldError("creditCard", error.message)
+ setSubmitting(false)
+ } else {
+ const result: FormResult = {
+ phoneNumber: values.address.phoneNumber,
+ token,
+ }
+
+ props.onSubmit(actions, result)
+ }
+ })
+ }
+
+ return (
+
+
+
+ {(formikProps: FormikProps) => (
+ <>
+ {
+ formikProps.setStatus(null)
+ }}
+ />
+
+ )}
+
+
+
+ )
+}
+
+const StripeInjectedRegistrationForm = injectStripe(RegistrationForm)
+
+export const StripeWrappedRegistrationForm: React.FC = props => {
+ const [stripe, setStripe] = useState(null)
+
+ function setupStripe() {
+ setStripe(window.Stripe(sd.STRIPE_PUBLISHABLE_KEY))
+ }
+
+ useEffect(() => {
+ if (window.Stripe) {
+ setStripe(window.Stripe(sd.STRIPE_PUBLISHABLE_KEY))
+ } else {
+ document.querySelector("#stripe-js").addEventListener("load", setupStripe)
+
+ return () => {
+ document
+ .querySelector("#stripe-js")
+ .removeEventListener("load", setupStripe)
+ }
+ }
+ }, [])
+
+ return (
+
+
+
+
+ )
+}
diff --git a/src/v2/Apps/Auction/Components/__stories__/LotInfo.story.tsx b/src/v2/Apps/Auction/Components/__stories__/LotInfo.story.tsx
new file mode 100644
index 00000000000..e80dcadc7cf
--- /dev/null
+++ b/src/v2/Apps/Auction/Components/__stories__/LotInfo.story.tsx
@@ -0,0 +1,30 @@
+import React from "react"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+import { LotInfo } from "../LotInfo"
+
+storiesOf("Apps/Auction/Components", module).add("LotInfo", () => {
+ return (
+
+ )
+})
diff --git a/src/v2/Apps/Auction/Components/__stories__/PricingTransparency.story.tsx b/src/v2/Apps/Auction/Components/__stories__/PricingTransparency.story.tsx
new file mode 100644
index 00000000000..4f6abd87f58
--- /dev/null
+++ b/src/v2/Apps/Auction/Components/__stories__/PricingTransparency.story.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+import { PricingTransparency } from "../PricingTransparency"
+
+storiesOf("Apps/Auction/Components", module).add("Pricing Transparency", () => {
+ return (
+
+ )
+})
diff --git a/src/v2/Apps/Auction/Components/__stories__/RegistrationForm.story.tsx b/src/v2/Apps/Auction/Components/__stories__/RegistrationForm.story.tsx
new file mode 100644
index 00000000000..e10e084336f
--- /dev/null
+++ b/src/v2/Apps/Auction/Components/__stories__/RegistrationForm.story.tsx
@@ -0,0 +1,50 @@
+import React from "react"
+import { storiesOf } from "storybook/storiesOf"
+import { Section } from "v2/Utils/Section"
+import { StripeWrappedRegistrationForm } from "../RegistrationForm"
+
+storiesOf("Apps/Auction/Components", module)
+ .add("RegistrationForm w/o ID verification", () => {
+ return (
+
+ {
+ window.alert(
+ JSON.stringify(
+ { telephone: result.phoneNumber, token: result.token.id },
+ null,
+ 2
+ )
+ )
+ actions.setSubmitting(false)
+ }}
+ trackSubmissionErrors={errors =>
+ console.warn("Tracking errors: ", errors)
+ }
+ needsIdentityVerification={false}
+ />
+
+ )
+ })
+ .add("RegistrationForm with ID verification", () => {
+ return (
+
+ {
+ window.alert(
+ JSON.stringify(
+ { telephone: result.phoneNumber, token: result.token.id },
+ null,
+ 2
+ )
+ )
+ actions.setSubmitting(false)
+ }}
+ trackSubmissionErrors={errors =>
+ console.warn("Tracking errors: ", errors)
+ }
+ needsIdentityVerification
+ />
+
+ )
+ })
diff --git a/src/v2/Apps/Auction/Components/__tests__/AuctionFAQ.jest.tsx b/src/v2/Apps/Auction/Components/__tests__/AuctionFAQ.jest.tsx
new file mode 100644
index 00000000000..8b0cda9832a
--- /dev/null
+++ b/src/v2/Apps/Auction/Components/__tests__/AuctionFAQ.jest.tsx
@@ -0,0 +1,95 @@
+import { Sans, Toggle } from "@artsy/palette"
+import { AuctionFAQ_QueryRawResponse } from "v2/__generated__/AuctionFAQ_Query.graphql"
+import { renderRelayTree } from "v2/DevTools"
+import { graphql } from "react-relay"
+import { AuctionFAQFragmentContainer } from "../AuctionFAQ"
+
+jest.unmock("react-relay")
+
+const viewerMockResponse: AuctionFAQ_QueryRawResponse["viewer"] = {
+ bidding: {
+ id: "opaque-bidding-id",
+ content:
+ "How do I Register for an Auction?\n\nAll bidders need to register by completing an online form and providing all required information, such as their full name, contact information, and credit card details. Auction Houses often require additional vetting of bidders and may prevent registration in advance of a sale. Check the instructions for the sale you are interested in and register early. We will communicate the status of your registration via the email and contact information you provide.\n\n## How do I place a bid?\n\nBidding on Artsy is easy with our automatic bidding system. Select your bid amount as long as it is greater than or equal to the next minimum bid shown on the bidding screen, then click the “Bid” button. This will automatically place a bid for you at the next increment and save the amount you entered (if higher) as your “Maximum Bid.” \n\n## What is a Maximum Bid?\n\nIf you enter a bid amount higher than the next minimum bid, the amount you enter is treated as your “Maximum Bid.” Entering a Maximum Bid does not necessarily mean you will pay that price, and you may pay less. As the auction progresses, our system will bid automatically for you against other bidders, according to our automatic bidding increments (see below), up to (but not exceeding) your Maximum Bid, only as much as necessary to maintain your position as highest bidder. If two bidders attempt to enter the same Maximum Bid, the first bidder to enter that amount will be the winner. \n\n## What are Bidding Increments?\n\nOur automatic bidding increments determine the next minimum bid that can be placed. They are based on the current bid of each item and increase at the following intervals, when the current bid is:\n\nUnder $1,000: $50 \n$1,000 - $1,999: $100 \n$2,000 - $4,999: $250 \n$5,000 - $9,999: $500 \n$10,000 - $19,999: $1,000 \n$20,000 - $49,999: $2,000 \n$50,000 - $99,999: $5,000 \nAt or above $100,000: $10,000\n\nNote: Our usual bidding increments are listed above, but depending on the auction, we will default to the bidding increments of our auction house partners.\n\n## What is a Reserve Price?\n\nA reserve price (also known as a \"reserve\") is the confidential minimum price below which the item may not be sold in the auction. If an item has a reserve, this will be indicated on the bidding screen where you enter your bid. When you bid on an item with a reserve, if your Maximum Bid meets or exceeds the reserve, your bid will be increased to meet the reserve (according to our automatic bidding increments), and bidding will continue from there. If an item is offered with a reserve, Artsy will be authorized to bid on the seller's behalf, up to the amount of the reserve. Some live sales may have unknown reserves and we will try to represent them as accurately as we can during the live sale. In live sales, the auctioneer's decision is the final one.",
+ },
+ buyersPremiumTaxesAndFees: {
+ id: "opaque-taxes-fees-id",
+ content:
+ "What is a buyer’s premium?\nA buyer’s premium is an additional charge the winning bidder pays on top of the item's hammer price. If an item has a buyer's premium, this will be indicated on the bidding screen where you enter your bid, along with the rate of the buyer's premium. The buyer's premium is calculated as a percentage of the item's hammer price.\n\n## What about taxes?\nBuyers are responsible for paying all sales and use taxes, VAT and any other taxes that apply to their purchases. Applicable taxes will be added to the winning bidder’s invoice after the auction. \n",
+ },
+ paymentsAndShipping: {
+ id: "opaque-payment-shipping-id",
+ content:
+ "How does payment work after an auction?\nWinning bidders will receive an email after the auction with instructions for how to checkout and pay for purchased items. Depending on the sale, either Artsy or the seller will collect payment from the buyer, and buyers will be notified accordingly upon conclusion of the auction.\n\n## How does shipping work?\nAfter an auction, the buyer will be connected with the seller to arrange shipping. Normally buyers may choose between a common carrier (like FedEx) and a specialist fine art shipper. Shipping costs are the responsibility of the buyer.\n",
+ },
+ emailsAndAlerts: {
+ id: "opaque-emails-alerts-id",
+ content:
+ "Bidders will receive an email to confirm when their bid has been received, and an email to notify them when they are outbid. After the auction, winning bidders will also receive an email to notify them of their winning bid. Please be sure to register with a valid email address and to check your email frequently during an auction to make sure you receive all relevant updates. ",
+ },
+ conditionsOfSale: {
+ id: "considitions-of-sale-id",
+ content:
+ "CONDITIONS OF SALE\n\nOur standard [Conditions of Sale](/conditions-of-sale) contain important terms, conditions and information that apply to all bidders. By bidding in an auction on Artsy, you are accepting our [Conditions of Sale](/conditions-of-sale). Please read them carefully before bidding. \n",
+ },
+}
+
+const viewerEmptyMockResponse: AuctionFAQ_QueryRawResponse["viewer"] = {
+ bidding: {
+ id: "opaque-bidding-id",
+ content: null,
+ },
+ buyersPremiumTaxesAndFees: {
+ id: "opaque-taxes-fees-id",
+ content: null,
+ },
+ paymentsAndShipping: {
+ id: "opaque-payment-shipping-id",
+ content: null,
+ },
+ emailsAndAlerts: {
+ id: "opaque-emails-alerts-id",
+ content: null,
+ },
+ conditionsOfSale: {
+ id: "considitions-of-sale-id",
+ content: null,
+ },
+}
+
+describe("AuctionFAQ", () => {
+ const getWrapper = async (
+ mockResponse: AuctionFAQ_QueryRawResponse["viewer"]
+ ) => {
+ return await renderRelayTree({
+ Component: AuctionFAQFragmentContainer,
+ query: graphql`
+ query AuctionFAQ_Query @raw_response_type {
+ viewer {
+ ...AuctionFAQ_viewer
+ }
+ }
+ `,
+ mockData: {
+ viewer: mockResponse,
+ } as AuctionFAQ_QueryRawResponse,
+ })
+ }
+
+ it("renders content correctly", async () => {
+ const wrapper = await getWrapper(viewerMockResponse)
+ const biddingContent = wrapper
+ .find(Toggle)
+ .at(0)
+ .find(Sans)
+ biddingContent.simulate("click")
+ wrapper.update()
+ expect(wrapper.text()).toContain("How do I Register for an Auction?")
+ })
+
+ it("hides toggles if no content", async () => {
+ const wrapper = await getWrapper(viewerEmptyMockResponse)
+ const togglesLength = wrapper.find(Toggle).length
+ expect(togglesLength).toBe(0)
+ })
+})
diff --git a/src/v2/Apps/Auction/Routes/ConfirmBid/BidderPositionQuery.tsx b/src/v2/Apps/Auction/Routes/ConfirmBid/BidderPositionQuery.tsx
new file mode 100644
index 00000000000..dbe11339a62
--- /dev/null
+++ b/src/v2/Apps/Auction/Routes/ConfirmBid/BidderPositionQuery.tsx
@@ -0,0 +1,36 @@
+import {
+ BidderPositionQuery,
+ BidderPositionQueryVariables,
+} from "v2/__generated__/BidderPositionQuery.graphql"
+import { graphql } from "react-relay"
+import { Environment, fetchQuery } from "relay-runtime"
+
+export const bidderPositionQuery = (
+ environment: Environment,
+ variables: BidderPositionQueryVariables
+) => {
+ return fetchQuery(
+ environment,
+ graphql`
+ query BidderPositionQuery($bidderPositionID: String!) {
+ me {
+ bidderPosition(id: $bidderPositionID) {
+ status
+ messageHeader
+ position {
+ internalID
+ suggestedNextBid {
+ cents
+ display
+ }
+ }
+ }
+ }
+ }
+ `,
+ variables,
+ {
+ force: true,
+ }
+ )
+}
diff --git a/src/v2/Apps/Auction/Routes/ConfirmBid/index.tsx b/src/v2/Apps/Auction/Routes/ConfirmBid/index.tsx
new file mode 100644
index 00000000000..fdbf3b4c7d4
--- /dev/null
+++ b/src/v2/Apps/Auction/Routes/ConfirmBid/index.tsx
@@ -0,0 +1,382 @@
+import { Box, Separator, Serif } from "@artsy/palette"
+import { Location, Match } from "found"
+
+import { BidderPositionQueryResponse } from "v2/__generated__/BidderPositionQuery.graphql"
+import { ConfirmBid_me } from "v2/__generated__/ConfirmBid_me.graphql"
+import {
+ ConfirmBidCreateBidderPositionMutation,
+ ConfirmBidCreateBidderPositionMutationResponse,
+} from "v2/__generated__/ConfirmBidCreateBidderPositionMutation.graphql"
+import { routes_ConfirmBidQueryResponse } from "v2/__generated__/routes_ConfirmBidQuery.graphql"
+import {
+ BidFormFragmentContainer as BidForm,
+ determineDisplayRequirements,
+ FormValues,
+} from "v2/Apps/Auction/Components/BidForm"
+import { LotInfoFragmentContainer as LotInfo } from "v2/Apps/Auction/Components/LotInfo"
+import { bidderPositionQuery } from "v2/Apps/Auction/Routes/ConfirmBid/BidderPositionQuery"
+import { createCreditCardAndUpdatePhone } from "v2/Apps/Auction/Routes/Register"
+import { AppContainer } from "v2/Apps/Components/AppContainer"
+import { track } from "v2/Artsy"
+import * as Schema from "v2/Artsy/Analytics/Schema"
+import { useTracking } from "v2/Artsy/Analytics/useTracking"
+import { FormikHelpers as FormikActions } from "formik"
+import { isEmpty } from "lodash"
+import React, { useEffect, useState } from "react"
+import { Title } from "react-head"
+import {
+ commitMutation,
+ createFragmentContainer,
+ graphql,
+ RelayProp,
+} from "react-relay"
+import {
+ Elements,
+ injectStripe,
+ ReactStripeElements,
+ StripeProvider,
+} from "react-stripe-elements"
+import { data as sd } from "sharify"
+import { get } from "v2/Utils/get"
+import createLogger from "v2/Utils/logger"
+
+const logger = createLogger("Apps/Auction/Routes/ConfirmBid")
+
+type BidFormActions = FormikActions
+
+interface OptionalQueryStrings {
+ bid?: string
+}
+
+interface ConfirmBidProps extends ReactStripeElements.InjectedStripeProps {
+ artwork: routes_ConfirmBidQueryResponse["artwork"]
+ me: ConfirmBid_me
+ relay: RelayProp
+ match: Match
+}
+
+const MAX_POLL_ATTEMPTS = 20
+
+export const ConfirmBidRoute: React.FC = props => {
+ let pollCount = 0
+ let registrationTracked = false
+
+ const { artwork, me, relay, stripe } = props
+ const { saleArtwork } = artwork
+ const { sale } = saleArtwork
+ const { environment } = relay
+ const { trackEvent } = useTracking()
+ const { requiresPaymentInformation } = determineDisplayRequirements(
+ (sale as any).registrationStatus,
+ me as any
+ )
+
+ let bidderId: string | null =
+ sale.registrationStatus && sale.registrationStatus.internalID
+
+ function createBidderPosition(maxBidAmountCents: number) {
+ return new Promise(
+ (resolve, reject) => {
+ commitMutation(environment, {
+ onCompleted: data => resolve(data),
+ onError: error => reject(error),
+ mutation: graphql`
+ mutation ConfirmBidCreateBidderPositionMutation(
+ $input: BidderPositionInput!
+ ) {
+ createBidderPosition(input: $input) {
+ result {
+ position {
+ internalID
+ saleArtwork {
+ sale {
+ registrationStatus {
+ internalID
+ qualifiedForBidding
+ }
+ }
+ }
+ }
+ status
+ messageHeader
+ }
+ }
+ }
+ `,
+ variables: {
+ input: {
+ saleID: sale.internalID,
+ artworkID: artwork.internalID,
+ maxBidAmountCents,
+ },
+ },
+ })
+ }
+ )
+ }
+
+ function onJsError(actions: BidFormActions, error: Error) {
+ logger.error(error)
+ trackConfirmBidFailed([`JavaScript error: ${error.message}`])
+ actions.setSubmitting(false)
+ actions.setStatus(
+ "Something went wrong while processing your bid. Please make sure your internet connection is active and try again"
+ )
+ }
+
+ function trackConfirmBidFailed(errors: string[]) {
+ trackEvent({
+ action_type: Schema.ActionType.ConfirmBidFailed,
+ bidder_id: bidderId,
+ error_messages: errors,
+ })
+ }
+
+ function trackConfirmBidSuccess(
+ positionId: string,
+ selectedBidAmountCents: number
+ ) {
+ trackEvent({
+ action_type: Schema.ActionType.ConfirmBidSubmitted,
+ bidder_position_id: positionId,
+ bidder_id: bidderId,
+ order_id: bidderId,
+ products: [
+ {
+ product_id: artwork.internalID,
+ quantity: 1,
+ price: selectedBidAmountCents / 100,
+ },
+ ],
+ })
+ }
+
+ function trackMaxBidSelected(maxBid: string) {
+ trackEvent({
+ action_type: Schema.ActionType.SelectedMaxBid,
+ bidder_id: bidderId,
+ order_id: bidderId,
+ selected_max_bid_minor: maxBid,
+ })
+ }
+
+ const createTokenFromAddress = async (address: stripe.TokenOptions) => {
+ const { error, token } = await stripe.createToken(address)
+
+ if (error) {
+ throw new Error(`Stripe error: ${error.message || error.decline_code}`)
+ } else {
+ return token
+ }
+ }
+
+ async function handleSubmit(values: FormValues, actions: BidFormActions) {
+ const selectedBid = Number(values.selectedBid)
+
+ if (requiresPaymentInformation) {
+ try {
+ const { address } = values
+ const stripeAddress = {
+ name: address.name,
+ address_line1: address.addressLine1,
+ address_line2: address.addressLine2,
+ address_country: address.country,
+ address_city: address.city,
+ address_state: address.region,
+ address_zip: address.postalCode,
+ }
+
+ const token = await createTokenFromAddress(stripeAddress)
+ await createCreditCardAndUpdatePhone(
+ environment,
+ address.phoneNumber,
+ token.id
+ )
+ } catch (error) {
+ onJsError(actions, error)
+ return
+ }
+ }
+
+ createBidderPosition(selectedBid)
+ .then(data => verifyBidderPosition({ actions, data, selectedBid }))
+ .catch(error => onJsError(actions, error))
+ }
+
+ function verifyBidderPosition({
+ actions,
+ data,
+ selectedBid,
+ }: {
+ actions: BidFormActions
+ data: ConfirmBidCreateBidderPositionMutationResponse
+ selectedBid: number
+ }) {
+ const { result } = data.createBidderPosition
+ const { position, messageHeader } = result
+
+ if (!bidderId && !registrationTracked) {
+ const newBidderId =
+ position &&
+ position.saleArtwork &&
+ position.saleArtwork.sale &&
+ position.saleArtwork.sale.registrationStatus.internalID
+
+ trackEvent({
+ action_type: Schema.ActionType.RegistrationSubmitted,
+ bidder_id: newBidderId,
+ })
+ registrationTracked = true
+ }
+
+ bidderId =
+ bidderId ||
+ (position &&
+ position.saleArtwork &&
+ position.saleArtwork.sale &&
+ position.saleArtwork.sale.registrationStatus.internalID)
+
+ if (result.status === "SUCCESS") {
+ bidderPositionQuery(environment, {
+ bidderPositionID: position.internalID,
+ })
+ .then(res => checkBidderPosition({ actions, data: res, selectedBid }))
+ .catch(error => onJsError(actions, error))
+ } else {
+ actions.setStatus(messageHeader)
+ actions.setSubmitting(false)
+ trackConfirmBidFailed([messageHeader])
+ }
+ }
+
+ function checkBidderPosition({
+ actions,
+ data,
+ selectedBid,
+ }: {
+ actions: BidFormActions
+ data: BidderPositionQueryResponse
+ selectedBid: number
+ }) {
+ const { bidderPosition } = data.me
+ const { status, position, messageHeader } = bidderPosition
+
+ if (status === "PENDING" && pollCount < MAX_POLL_ATTEMPTS) {
+ // initiating new request here (vs setInterval) to make sure we wait for
+ // the previous call to return before making a new one
+ setTimeout(
+ () =>
+ bidderPositionQuery(environment, {
+ bidderPositionID: position.internalID,
+ })
+ .then(res =>
+ checkBidderPosition({ actions, data: res, selectedBid })
+ )
+ .catch(error => onJsError(actions, error)),
+ 1000
+ )
+
+ pollCount += 1
+ } else if (status === "WINNING") {
+ trackConfirmBidSuccess(position.internalID, selectedBid)
+ const href = `/artwork/${artwork.slug}`
+ window.location.assign(href)
+ } else {
+ actions.setStatus(messageHeader)
+ actions.setSubmitting(false)
+ trackConfirmBidFailed([messageHeader])
+ }
+ }
+
+ return (
+
+ Confirm Bid | Artsy
+
+
+ Confirm your bid
+
+
+ !isEmpty(errors) && trackConfirmBidFailed(errors)
+ }
+ />
+
+
+ )
+}
+
+const getInitialSelectedBid = (location: Location): string | undefined => {
+ return get(
+ location,
+ ({ query }) => (query as OptionalQueryStrings).bid,
+ undefined
+ )
+}
+
+const StripeInjectedConfirmBidRoute = injectStripe(ConfirmBidRoute)
+
+export const StripeWrappedConfirmBidRoute: React.FC = props => {
+ const [stripe, setStripe] = useState(null)
+
+ function setupStripe() {
+ setStripe(window.Stripe(sd.STRIPE_PUBLISHABLE_KEY))
+ }
+
+ useEffect(() => {
+ if (window.Stripe) {
+ setStripe(window.Stripe(sd.STRIPE_PUBLISHABLE_KEY))
+ } else {
+ document.querySelector("#stripe-js").addEventListener("load", setupStripe)
+
+ return () => {
+ document
+ .querySelector("#stripe-js")
+ .removeEventListener("load", setupStripe)
+ }
+ }
+ }, [])
+
+ return (
+
+
+
+
+ )
+}
+
+const TrackingWrappedConfirmBidRoute = track(props => ({
+ context_page: Schema.PageName.AuctionConfirmBidPage,
+ auction_slug: props.artwork.saleArtwork.sale.slug,
+ artwork_slug: props.artwork.slug,
+ sale_id: props.artwork.saleArtwork.sale.internalID,
+ user_id: props.me.internalID,
+}))(StripeWrappedConfirmBidRoute)
+
+export const ConfirmBidRouteFragmentContainer = createFragmentContainer(
+ TrackingWrappedConfirmBidRoute,
+ {
+ me: graphql`
+ fragment ConfirmBid_me on Me {
+ internalID
+ hasQualifiedCreditCards
+ ...BidForm_me
+ }
+ `,
+ }
+)
+
+// For bundle splitting in router
+export default ConfirmBidRouteFragmentContainer
diff --git a/src/v2/Apps/Auction/Routes/Register/index.tsx b/src/v2/Apps/Auction/Routes/Register/index.tsx
new file mode 100644
index 00000000000..55d6228d7ff
--- /dev/null
+++ b/src/v2/Apps/Auction/Routes/Register/index.tsx
@@ -0,0 +1,244 @@
+import { Box, Separator, Serif } from "@artsy/palette"
+import { Register_me } from "v2/__generated__/Register_me.graphql"
+import { Register_sale } from "v2/__generated__/Register_sale.graphql"
+import {
+ RegisterCreateBidderMutation,
+ RegisterCreateBidderMutationResponse,
+} from "v2/__generated__/RegisterCreateBidderMutation.graphql"
+import { RegisterCreateCreditCardAndUpdatePhoneMutation } from "v2/__generated__/RegisterCreateCreditCardAndUpdatePhoneMutation.graphql"
+import {
+ FormResult,
+ StripeWrappedRegistrationForm,
+} from "v2/Apps/Auction/Components/RegistrationForm"
+import { AppContainer } from "v2/Apps/Components/AppContainer"
+import { track } from "v2/Artsy"
+import * as Schema from "v2/Artsy/Analytics/Schema"
+import { FormikHelpers as FormikActions } from "formik"
+import React from "react"
+import { Title } from "react-head"
+import {
+ commitMutation,
+ createFragmentContainer,
+ graphql,
+ RelayProp,
+} from "react-relay"
+import { TrackingProp } from "react-tracking"
+import { data as sd } from "sharify"
+import { bidderNeedsIdentityVerification } from "v2/Utils/identityVerificationRequirements"
+import createLogger from "v2/Utils/logger"
+
+const logger = createLogger("Apps/Auction/Routes/Register")
+
+interface RegisterProps {
+ sale: Register_sale
+ me: Register_me
+ relay: RelayProp
+ tracking: TrackingProp
+}
+
+// TODO: Extract.
+export function createCreditCardAndUpdatePhone(relayEnvironment, phone, token) {
+ return new Promise(async (resolve, reject) => {
+ commitMutation(
+ relayEnvironment,
+ {
+ onCompleted: (data, errors) => {
+ const {
+ createCreditCard: { creditCardOrError },
+ } = data
+
+ if (creditCardOrError.creditCardEdge) {
+ resolve()
+ } else {
+ if (errors) {
+ reject(errors)
+ } else {
+ reject(creditCardOrError.mutationError)
+ }
+ }
+ },
+ onError: reject,
+ mutation: graphql`
+ mutation RegisterCreateCreditCardAndUpdatePhoneMutation(
+ $creditCardInput: CreditCardInput!
+ $profileInput: UpdateMyProfileInput!
+ ) {
+ updateMyUserProfile(input: $profileInput) {
+ user {
+ internalID
+ }
+ }
+
+ createCreditCard(input: $creditCardInput) {
+ creditCardOrError {
+ ... on CreditCardMutationSuccess {
+ creditCardEdge {
+ node {
+ lastDigits
+ }
+ }
+ }
+ ... on CreditCardMutationFailure {
+ mutationError {
+ type
+ message
+ detail
+ }
+ }
+ }
+ }
+ }
+ `,
+ variables: {
+ creditCardInput: { token },
+ profileInput: { phone },
+ },
+ }
+ )
+ })
+}
+
+export const RegisterRoute: React.FC = props => {
+ const { me, relay, sale, tracking } = props
+
+ const commonProperties = {
+ auction_slug: sale.slug,
+ auction_state: sale.status,
+ sale_id: sale.internalID,
+ user_id: me.internalID,
+ }
+
+ function trackRegistrationFailed(errors: string[]) {
+ tracking.trackEvent({
+ action_type: Schema.ActionType.RegistrationSubmitFailed,
+ error_messages: errors,
+ ...commonProperties,
+ })
+ }
+
+ function trackRegistrationSuccess(bidderId: string) {
+ tracking.trackEvent({
+ action_type: Schema.ActionType.RegistrationSubmitted,
+ bidder_id: bidderId,
+ ...commonProperties,
+ })
+ }
+
+ function createBidder() {
+ return new Promise(async (resolve, reject) => {
+ commitMutation(relay.environment, {
+ onCompleted: data => {
+ resolve(data)
+ },
+ onError: error => {
+ reject(error)
+ },
+ // TODO: Inputs to the mutation might have changed case of the keys!
+ mutation: graphql`
+ mutation RegisterCreateBidderMutation($input: CreateBidderInput!) {
+ createBidder(input: $input) {
+ bidder {
+ internalID
+ }
+ }
+ }
+ `,
+ variables: {
+ input: { saleID: sale.internalID },
+ },
+ })
+ })
+ }
+
+ function handleMutationError(actions: FormikActions, error: Error) {
+ logger.error(error)
+
+ let errorMessages: string[]
+ if (Array.isArray(error)) {
+ errorMessages = error.map(e => e.message)
+ } else if (typeof error === "string") {
+ errorMessages = [error]
+ } else if (error.message) {
+ errorMessages = [error.message]
+ }
+
+ trackRegistrationFailed(errorMessages)
+
+ actions.setSubmitting(false)
+ actions.setStatus("submissionFailed")
+ }
+
+ function handleSubmit(actions: FormikActions, result: FormResult) {
+ createCreditCardAndUpdatePhone(
+ relay.environment,
+ result.phoneNumber,
+ result.token.id
+ )
+ .then(() => {
+ createBidder()
+ .then((data: RegisterCreateBidderMutationResponse) => {
+ trackRegistrationSuccess(data.createBidder.bidder.internalID)
+
+ window.location.assign(
+ `${sd.APP_URL}/auction/${sale.slug}/confirm-registration`
+ )
+ })
+ .catch(error => {
+ handleMutationError(actions, error)
+ })
+ })
+ .catch(error => {
+ handleMutationError(actions, error)
+ })
+ }
+
+ return (
+
+ Auction Registration
+
+ Register to Bid on Artsy
+
+
+ )
+}
+
+const TrackingWrappedRegisterRoute: React.FC = props => {
+ const Component = track({
+ context_page: Schema.PageName.AuctionRegistrationPage,
+ })(RegisterRoute)
+
+ return
,
+ __stripeMock: stripeMock,
+ injectStripe: Component => props => (
+ = {
+ query: {
+ bid: null,
+ },
+}
+
+const setupTestEnv = ({
+ location = mockLocation,
+}: {
+ location?: Partial
+} = {}) => {
+ return createTestEnv({
+ TestPage: ConfirmBidTestPage,
+ Component: (
+ props: routes_ConfirmBidQueryResponse & { tracking: TrackingProp }
+ ) => (
+
,
+ __stripeMock: stripeMock,
+ injectStripe: Component => props => (
+
+ }
+
+ const mockRegisterResolver = (
+ data: routes_RegisterQueryRawResponse
+ ): routes_RegisterQueryRawResponse => ({
+ sale: data.sale,
+ me: data.me,
+ })
+
+ const mockConfirmBidResolver = (
+ data: DeepPartial = {}
+ ): routes_ConfirmBidQueryRawResponse =>
+ deepMerge<
+ routes_ConfirmBidQueryRawResponse,
+ DeepPartial
+ >(ConfirmBidQueryResponseFixture, data)
+
+ it("renders the Auction FAQ view", async () => {
+ const { status } = await render("/auction-faq", {} as any)
+
+ expect(status).toBe(200)
+ })
+
+ describe("Confirm Bid: /:saleId/bid/:artworkId", () => {
+ it("does not redirect if the user is qualified to bid in the sale, the sale is open, and the artwork is biddable", async () => {
+ const fixture = mockConfirmBidResolver()
+ const { redirect, status } = await render(
+ `/auction/${fixture.artwork.saleArtwork.sale.slug}/bid/${fixture.artwork.slug}`,
+ fixture
+ )
+
+ expect(status).toBe(200)
+ expect(redirect).toBeUndefined
+ })
+
+ it("redirects to confirm registration page if user is registered but not qualified to bid (to remind them)", async () => {
+ const fixture = mockConfirmBidResolver({
+ artwork: {
+ saleArtwork: {
+ sale: { registrationStatus: { qualifiedForBidding: false } },
+ },
+ },
+ })
+ const { redirect } = await render(
+ `/auction/${fixture.artwork.saleArtwork.sale.slug}/bid/${fixture.artwork.slug}`,
+ fixture
+ )
+
+ expect(redirect.url).toBe(
+ `/auction/${fixture.artwork.saleArtwork.sale.slug}/confirm-registration`
+ )
+ })
+
+ it("redirects to sale artwork page if the sale is closed", async () => {
+ const fixture = mockConfirmBidResolver({
+ artwork: {
+ saleArtwork: {
+ sale: {
+ isClosed: true,
+ },
+ },
+ },
+ })
+ const { redirect } = await render(
+ `/auction/${fixture.artwork.saleArtwork.sale.slug}/bid/${fixture.artwork.slug}`,
+ fixture
+ )
+ expect(redirect.url).toBe(
+ `/auction/${fixture.artwork.saleArtwork.sale.slug}/artwork/${fixture.artwork.slug}`
+ )
+ })
+
+ it("redirects to the login (plus redirect_uri of sale artwork bid page) if user is not signed in", async () => {
+ const fixture = mockConfirmBidResolver({
+ me: null,
+ })
+
+ const { redirect } = await render(
+ `/auction/${fixture.artwork.saleArtwork.sale.slug}/bid/${fixture.artwork.slug}`,
+ fixture
+ )
+ expect(redirect.url).toBe(
+ "/log_in?redirect_uri=%2Fauction%2Fsaleslug%2Fbid%2Fartworkslug"
+ )
+ })
+
+ it("redirects to the sale artwork page if user is not registered and registration is closed", async () => {
+ const fixture = mockConfirmBidResolver({
+ artwork: {
+ saleArtwork: {
+ sale: {
+ registrationStatus: null,
+ isRegistrationClosed: true,
+ },
+ },
+ },
+ })
+ const { redirect } = await render(
+ `/auction/${fixture.artwork.saleArtwork.sale.slug}/bid/${fixture.artwork.slug}`,
+ fixture
+ )
+ expect(redirect.url).toBe(
+ `/auction/${fixture.artwork.saleArtwork.sale.slug}/artwork/${fixture.artwork.slug}`
+ )
+ })
+
+ it("does not redirect if user is not registered but registration is open", async () => {
+ const fixture = mockConfirmBidResolver({
+ artwork: {
+ saleArtwork: {
+ sale: {
+ registrationStatus: null,
+ isRegistrationClosed: false,
+ },
+ },
+ },
+ })
+ const { redirect, status } = await render(
+ `/auction/${fixture.artwork.saleArtwork.sale.slug}/bid/${fixture.artwork.slug}`,
+ fixture
+ )
+
+ expect(status).toBe(200)
+ expect(redirect).toBeUndefined
+ })
+ })
+
+ describe("Register: /auction-registration/:saleId", () => {
+ it("does not redirect if a sale is found", async () => {
+ const { redirect, status } = await render(
+ `/auction-registration/${RegisterQueryResponseFixture.sale.slug}`,
+ mockRegisterResolver(RegisterQueryResponseFixture)
+ )
+
+ expect(status).toBe(200)
+ expect(redirect).toBeUndefined
+ })
+
+ it("also responds to auction-registration2 route", async () => {
+ const { status } = await render(
+ `/auction-registration2/${RegisterQueryResponseFixture.sale.slug}`,
+ mockRegisterResolver(RegisterQueryResponseFixture)
+ )
+
+ expect(status).toBe(200)
+ })
+
+ it("redirects to the auction registration modal if the user has a qualified credit card", async () => {
+ const { redirect } = await render(
+ `/auction-registration/${RegisterQueryResponseFixture.sale.slug}`,
+ mockRegisterResolver({
+ ...RegisterQueryResponseFixture,
+ me: {
+ ...RegisterQueryResponseFixture.me,
+ hasQualifiedCreditCards: true,
+ },
+ })
+ )
+
+ expect(redirect.url).toBe(
+ `/auction/${RegisterQueryResponseFixture.sale.slug}/registration-flow`
+ )
+ })
+
+ it("redirects back to the auction if the registration window has closed", async () => {
+ const { redirect } = await render(
+ `/auction-registration/${RegisterQueryResponseFixture.sale.slug}`,
+ mockRegisterResolver({
+ ...RegisterQueryResponseFixture,
+ sale: {
+ ...RegisterQueryResponseFixture.sale,
+ isRegistrationClosed: true,
+ },
+ })
+ )
+
+ expect(redirect.url).toBe(
+ `/auction/${RegisterQueryResponseFixture.sale.slug}`
+ )
+ })
+
+ it("redirects to the auction confirm registration route if bidder has already registered", async () => {
+ const { redirect } = await render(
+ `/auction-registration/${RegisterQueryResponseFixture.sale.slug}`,
+ mockRegisterResolver({
+ ...RegisterQueryResponseFixture,
+ sale: {
+ ...RegisterQueryResponseFixture.sale,
+ registrationStatus: {
+ ...RegisterQueryResponseFixture.sale.registrationStatus,
+ qualifiedForBidding: true,
+ },
+ },
+ })
+ )
+
+ expect(redirect.url).toBe(
+ `/auction/${RegisterQueryResponseFixture.sale.slug}/confirm-registration`
+ )
+ })
+ })
+})
diff --git a/src/v2/Apps/Auction/getRedirect.ts b/src/v2/Apps/Auction/getRedirect.ts
new file mode 100644
index 00000000000..3b854a32970
--- /dev/null
+++ b/src/v2/Apps/Auction/getRedirect.ts
@@ -0,0 +1,98 @@
+import { routes_ConfirmBidQueryResponse } from "v2/__generated__/routes_ConfirmBidQuery.graphql"
+import { routes_RegisterQueryResponse } from "v2/__generated__/routes_RegisterQuery.graphql"
+
+export interface Redirect {
+ path: string
+ reason: string
+}
+
+export function registerRedirect({
+ me,
+ sale,
+}: routes_RegisterQueryResponse): Redirect | null {
+ if (me.hasQualifiedCreditCards) {
+ return {
+ path: registrationFlowPath(sale),
+ reason: "user already has a qualified credit card",
+ }
+ } else if (!sale.isAuction) {
+ return {
+ path: `/sale/${sale.slug}`,
+ reason: "sale must be an auction",
+ }
+ } else if (!isRegisterable(sale)) {
+ return {
+ path: auctionPath(sale),
+ reason: "auction must be registerable",
+ }
+ } else if (userRegisteredToBid(sale)) {
+ return {
+ path: confirmRegistrationPath(sale),
+ reason: "user is already registered to bid",
+ }
+ }
+
+ return null
+}
+
+export function confirmBidRedirect(
+ data: routes_ConfirmBidQueryResponse,
+ location: Location
+): Redirect | null {
+ const { artwork, me } = data
+ const { saleArtwork } = artwork
+
+ const { sale } = saleArtwork
+ const { registrationStatus } = sale
+
+ if (!me) {
+ return {
+ path: "/log_in?redirect_uri=" + encodeURIComponent(location.pathname),
+ reason: "user is not signed in",
+ }
+ }
+
+ if (!registrationStatus && sale.isRegistrationClosed) {
+ return {
+ path: artworkPath(sale, artwork),
+ reason: "user is not registered, registration closed",
+ }
+ }
+ if (registrationStatus && !registrationStatus.qualifiedForBidding) {
+ return {
+ path: confirmRegistrationPath(sale),
+ reason: "user is not qualified for bidding",
+ }
+ }
+ if (sale.isClosed) {
+ return {
+ path: artworkPath(sale, artwork),
+ reason: "sale is closed",
+ }
+ }
+ return null
+}
+
+const auctionPath = (sale: { slug: string }): string => `/auction/${sale.slug}`
+const registrationFlowPath = (sale: { slug: string }): string =>
+ auctionPath(sale) + "/registration-flow"
+const confirmRegistrationPath = (sale: { slug: string }): string =>
+ auctionPath(sale) + "/confirm-registration"
+const artworkPath = (
+ sale: { slug: string },
+ artwork: { slug: string }
+): string => auctionPath(sale) + `/artwork/${artwork.slug}`
+
+function isRegisterable(sale: {
+ isPreview: boolean
+ isOpen: boolean
+ isRegistrationClosed: boolean
+}): boolean {
+ return (sale.isPreview || sale.isOpen) && !sale.isRegistrationClosed
+}
+
+function userRegisteredToBid(sale: {
+ registrationStatus: { qualifiedForBidding: boolean }
+}): boolean {
+ return !!sale.registrationStatus
+}
diff --git a/src/v2/Apps/Auction/routes.tsx b/src/v2/Apps/Auction/routes.tsx
new file mode 100644
index 00000000000..f4cef748b78
--- /dev/null
+++ b/src/v2/Apps/Auction/routes.tsx
@@ -0,0 +1,132 @@
+import loadable from "@loadable/component"
+import { ErrorPage } from "v2/Components/ErrorPage"
+import { RedirectException, RouteConfig } from "found"
+import React from "react"
+import { graphql } from "react-relay"
+import createLogger from "v2/Utils/logger"
+import { confirmBidRedirect, Redirect, registerRedirect } from "./getRedirect"
+
+const logger = createLogger("Apps/Auction/routes")
+
+const AuctionFAQRoute = loadable(() => import("./Components/AuctionFAQ"))
+const ConfirmBidRoute = loadable(() => import("./Routes/ConfirmBid"))
+const RegisterRoute = loadable(() => import("./Routes/Register"))
+
+export const routes: RouteConfig[] = [
+ {
+ path: "/auction-faq",
+ getComponent: () => AuctionFAQRoute,
+ prepare: () => {
+ AuctionFAQRoute.preload()
+ },
+ query: graphql`
+ query routes_AuctionFAQQuery {
+ viewer {
+ ...AuctionFAQ_viewer
+ }
+ }
+ `,
+ fetchIndicator: "overlay",
+ },
+ {
+ path: "/auction/:saleID/bid(2)?/:artworkID",
+ getComponent: () => ConfirmBidRoute,
+ prepare: () => {
+ ConfirmBidRoute.preload()
+ },
+ render: ({ Component, props }) => {
+ if (Component && props) {
+ const { artwork, me, match } = props as any
+ if (!artwork) {
+ return {
+ render() {
+ const { artworks } = this.props
+
+ // here the filtering is necessary so we can re-use the artwork list shown in the page (could include
+ // non-acquireable artworks) without making an extra request. Also, seller image is a required field
+ // so excluding those that don't have `partner.profile.icon.url`.
+ const artworksForSeoProduct = artworks.edges.filter(edge => {
+ return get(edge, e => {
+ return e!.node!.is_acquireable && e!.node!.partner!.profile!.icon!.url
+ })
+ })
+
+ return artworksForSeoProduct!.map(a => {
+ if (a!.node !== null) {
+ const node = a!.node
+ const {
+ artists,
+ availability,
+ image,
+ is_price_range,
+ partner,
+ listPrice: { display },
+ } = node
+ const location = partner && partner.locations && partner.locations[0]
+ const artistsName = artists
+ ? toSentence(artists.map(artist => artist!.name))
+ : null
+ const isInstitution = partner && partner.type === "Institution"
+ const partnerImg = get(partner, p => {
+ return p.profile.icon.url
+ })
+
+ return (
+ {
+ render() {
+ const {
+ descending_artworks,
+ ascending_artworks,
+ collectionDescription,
+ collectionName,
+ collectionURL,
+ } = this.props
+
+ const handledItems = getMaxMinPrice(descending_artworks, ascending_artworks)
+ if (!handledItems.min && !handledItems.max) {
+ // If we don't know any prices, we can't build an offer.
+ // And if we try to render a Product without an offer, we'll get an error
+ // from Google. So just don't render anything.
+ return null
+ }
+
+ return (
+ <>
+
+
+ )
+ }
+
+ it("renders collection metadata", () => {
+ const wrapper = renderProducts()
+
+ const html = wrapper.html()
+ expect(html).toContain('"name":"A fake name for collection"')
+ expect(html).toContain('"url":"A fake URL for collection"')
+ expect(html).toContain('"description":"A fake description for collection"')
+ })
+
+ it("renders pricing data for collections with price ranges", () => {
+ const wrapper = renderProducts()
+
+ const html = wrapper.html()
+ expect(html).toContain('"lowPrice":10')
+ expect(html).toContain('"highPrice":9000')
+ })
+
+ it("falls back to maxPrice if the ascending artwork range is missing minPrice", () => {
+ props.ascending_artworks = buildAscendingArtworks(buildPriceRange(null, 25))
+
+ const wrapper = renderProducts()
+
+ const html = wrapper.html()
+ expect(html).toContain('"lowPrice":25')
+ expect(html).toContain('"highPrice":9000')
+ })
+
+ it("falls back to minPrice if the descending artwork range is missing maxPrice", () => {
+ props.descending_artworks = buildDescendingArtworks(
+ buildPriceRange(500, null)
+ )
+
+ const wrapper = renderProducts()
+
+ const html = wrapper.html()
+ expect(html).toContain('"lowPrice":10')
+ expect(html).toContain('"highPrice":500')
+ })
+
+ it("renders pricing data for collections with individual prices", () => {
+ props.descending_artworks = buildDescendingArtworks(
+ buildIndividualPrice(30)
+ )
+ props.ascending_artworks = buildAscendingArtworks(buildIndividualPrice(15))
+ const wrapper = renderProducts()
+
+ const html = wrapper.html()
+ expect(html).toContain('"lowPrice":15')
+ expect(html).toContain('"highPrice":30')
+ })
+
+ describe("no prices for descending artwork", () => {
+ beforeEach(() => {
+ props.descending_artworks = buildDescendingArtworks(buildEmptyPrice())
+ })
+
+ it("renders price from individual ascending artwork price", () => {
+ props.ascending_artworks = buildAscendingArtworks(
+ buildIndividualPrice(20)
+ )
+ const wrapper = renderProducts()
+
+ const html = wrapper.html()
+ expect(html).toContain('"lowPrice":20')
+ expect(html).toContain('"highPrice":20')
+ })
+
+ it("renders price from ascending artwork price range", () => {
+ props.ascending_artworks = buildAscendingArtworks(buildPriceRange(11, 14))
+ const wrapper = renderProducts()
+
+ const html = wrapper.html()
+ expect(html).toContain('"lowPrice":11')
+ expect(html).toContain('"highPrice":14')
+ })
+ })
+
+ describe("no prices for ascending artwork", () => {
+ beforeEach(() => {
+ props.ascending_artworks = buildAscendingArtworks(buildEmptyPrice())
+ })
+
+ it("renders price from individual descending artwork price", () => {
+ props.descending_artworks = buildDescendingArtworks(
+ buildIndividualPrice(20)
+ )
+ const wrapper = renderProducts()
+
+ const html = wrapper.html()
+ expect(html).toContain('"lowPrice":20')
+ expect(html).toContain('"highPrice":20')
+ })
+
+ it("renders price from ascending artwork price range", () => {
+ props.descending_artworks = buildDescendingArtworks(
+ buildPriceRange(11, 14)
+ )
+ const wrapper = renderProducts()
+
+ const html = wrapper.html()
+ expect(html).toContain('"lowPrice":11')
+ expect(html).toContain('"highPrice":14')
+ })
+ })
+
+ describe("when both a Money and a PriceRange are present", () => {
+ it("it uses the maxPrice when the descending is a PriceRange", () => {
+ props.ascending_artworks = buildAscendingArtworks(
+ buildIndividualPrice(42)
+ )
+ props.descending_artworks = buildDescendingArtworks(
+ buildPriceRange(400, 420)
+ )
+
+ const wrapper = renderProducts()
+
+ const html = wrapper.html()
+ expect(html).toContain('"lowPrice":42')
+ expect(html).toContain('"highPrice":420')
+ })
+
+ it("it uses the minPrice when the ascending is a PriceRange", () => {
+ props.ascending_artworks = buildAscendingArtworks(
+ buildPriceRange(42, 100)
+ )
+ props.descending_artworks = buildDescendingArtworks(
+ buildIndividualPrice(420)
+ )
+
+ const wrapper = renderProducts()
+
+ const html = wrapper.html()
+ expect(html).toContain('"lowPrice":42')
+ expect(html).toContain('"highPrice":420')
+ })
+ })
+
+ it("does not render anything if there is no ascending or descending artwork price", () => {
+ props.descending_artworks = buildDescendingArtworks(buildEmptyPrice())
+ props.ascending_artworks = buildAscendingArtworks(buildEmptyPrice())
+ const wrapper = renderProducts()
+
+ const html = wrapper.html()
+ expect(html).toBeFalsy()
+ })
+})
diff --git a/src/v2/Apps/Collect/Routes/Collect/Components/CollectMediumMetadata.ts b/src/v2/Apps/Collect/Routes/Collect/Components/CollectMediumMetadata.ts
new file mode 100644
index 00000000000..4751914937e
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collect/Components/CollectMediumMetadata.ts
@@ -0,0 +1,68 @@
+export function getMetadataForMedium(medium) {
+ let title = ""
+ let mediumDescription = ""
+
+ switch (medium) {
+ case "painting":
+ title = "Paintings"
+ mediumDescription = "250,000 paintings"
+ break
+ case "photography":
+ title = "Photography"
+ mediumDescription = "140,000 photographs"
+ break
+ case "sculpture":
+ title = "Sculptures"
+ mediumDescription = "90,000 sculptures"
+ break
+ case "prints":
+ title = "Prints"
+ mediumDescription = "75,000 prints"
+ break
+ case "work-on-paper":
+ title = "Works on Paper"
+ mediumDescription = "80,000 works on paper"
+ break
+ case "drawing":
+ title = "Drawings"
+ mediumDescription = "32,000 drawings"
+ break
+ case "design":
+ title = "Design Works"
+ mediumDescription = "16,000 design works"
+ break
+ case "installation":
+ title = "Installations"
+ mediumDescription = "13,000 installations"
+ break
+ case "film-slash-video":
+ title = "Films & Videos"
+ mediumDescription = "4,000 Films & Videos works"
+ break
+ case "jewelry":
+ title = "Jewelry"
+ mediumDescription = "3,000 pieces of jewelry"
+ break
+ case "performance-art":
+ title = "Performance Art Works"
+ mediumDescription = "3,000 performance art works"
+ break
+ default:
+ null
+ }
+
+ if (title && mediumDescription) {
+ return {
+ title: `${title} - For Sale on Artsy`,
+ breadcrumbTitle: title,
+ description: `Buy, bid, and inquire on over ${mediumDescription} on Artsy, the world’s largest online marketplace for art and design.`,
+ }
+ } else {
+ return {
+ title: "Collect | Artsy",
+ breadcrumbTitle: "Collect",
+ description:
+ "Find artworks by subject matter, style/technique, movement, price, and gallery/institution.",
+ }
+ }
+}
diff --git a/src/v2/Apps/Collect/Routes/Collect/index.tsx b/src/v2/Apps/Collect/Routes/Collect/index.tsx
new file mode 100644
index 00000000000..a6ef5176f6c
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collect/index.tsx
@@ -0,0 +1,143 @@
+import { Box, Separator, Serif, Spacer } from "@artsy/palette"
+import { Match, Router } from "found"
+import React from "react"
+import { Link, Meta, Title } from "react-head"
+import { createFragmentContainer, graphql } from "react-relay"
+import { data as sd } from "sharify"
+
+import { SeoProductsForArtworks } from "v2/Apps/Collect/Components/SeoProductsForArtworks"
+import { buildUrlForCollectApp } from "v2/Apps/Collect/Utils/urlBuilder"
+import { AppContainer } from "v2/Apps/Components/AppContainer"
+
+import { track } from "v2/Artsy/Analytics"
+import * as Schema from "v2/Artsy/Analytics/Schema"
+import { FrameWithRecentlyViewed } from "v2/Components/FrameWithRecentlyViewed"
+import { BreadCrumbList } from "v2/Components/Seo"
+
+import { getMetadataForMedium } from "./Components/CollectMediumMetadata"
+
+import { Collect_marketingHubCollections } from "v2/__generated__/Collect_marketingHubCollections.graphql"
+import { collectRoutes_ArtworkFilterQueryResponse } from "v2/__generated__/collectRoutes_ArtworkFilterQuery.graphql"
+import { CollectionsHubsNavFragmentContainer as CollectionsHubsNav } from "v2/Components/CollectionsHubsNav"
+import { ArtworkFilter } from "v2/Components/v2/ArtworkFilter"
+
+export interface CollectAppProps {
+ match: Match
+ router: Router
+ marketingHubCollections: Collect_marketingHubCollections
+ viewer: collectRoutes_ArtworkFilterQueryResponse["viewer"]
+ filterArtworks: collectRoutes_ArtworkFilterQueryResponse["filterArtworks"]
+}
+
+export const CollectApp = track({
+ context_page: Schema.PageName.CollectPage,
+})((props: CollectAppProps) => {
+ const {
+ viewer,
+ match: { location, params },
+ } = props
+ const medium = params && params.medium
+ const { description, breadcrumbTitle, title } = getMetadataForMedium(medium)
+
+ const canonicalHref = medium
+ ? `${sd.APP_URL}/collect/${medium}`
+ : `${sd.APP_URL}/collect`
+
+ const { filterArtworks } = props
+
+ const items = [{ path: "/collect", name: "Collect" }]
+ if (medium) {
+ items.push({
+ path: `/collect/${medium}`,
+ name: breadcrumbTitle,
+ })
+ }
+
+ return (
+
+
+ {title}
+
+
+ Collect art and design online
+
+
+
+
+ {
+ const url = buildUrlForCollectApp(filters)
+
+ if (typeof window !== "undefined") {
+ // FIXME: Is this the best way to guard against history updates
+ // in Storybooks?
+ if (!process.env.IS_STORYBOOK) {
+ window.history.replaceState({}, "", url)
+ }
+ }
+
+ /**
+ * FIXME: Ideally we route using our router, but are running into
+ * synchronization issues between router state and URL bar state.
+ *
+ * See below example as an illustration:
+ *
+ const newLocation = router.createLocation(url)
+
+ router.replace({
+ ...newLocation,
+ state: {
+ scrollTo: "#jump--artworkFilter"
+ },
+ })
+ *
+ */
+ }}
+ />
+
+
+
+ )
+})
+
+export const CollectAppFragmentContainer = createFragmentContainer(CollectApp, {
+ marketingHubCollections: graphql`
+ fragment Collect_marketingHubCollections on MarketingCollection
+ @relay(plural: true) {
+ ...CollectionsHubsNav_marketingHubCollections
+ }
+ `,
+})
+
+// Top-level route needs to be exported for bundle splitting in the router
+export default CollectAppFragmentContainer
diff --git a/src/v2/Apps/Collect/Routes/Collection/CollectionAppQuery.tsx b/src/v2/Apps/Collect/Routes/Collection/CollectionAppQuery.tsx
new file mode 100644
index 00000000000..41f7c683e59
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collection/CollectionAppQuery.tsx
@@ -0,0 +1,52 @@
+import { graphql } from "react-relay"
+
+// FIXME: Move this back into ./index.tsx once esmodules are enabled
+// TODO: Add `@principalField` to below query
+// when KAWS returns a 404 in `errors` for non-existent collections.
+// Currently it doesn't send any errors so there isn't anything
+// for Metaphysics to propagate.
+export const CollectionAppQuery = graphql`
+ query CollectionAppQuery(
+ $acquireable: Boolean
+ $aggregations: [ArtworkAggregation] = [
+ MERCHANDISABLE_ARTISTS
+ MEDIUM
+ MAJOR_PERIOD
+ TOTAL
+ ]
+ $atAuction: Boolean
+ $color: String
+ $forSale: Boolean
+ $height: String
+ $inquireableOnly: Boolean
+ $majorPeriods: [String]
+ $medium: String
+ $offerable: Boolean
+ $page: Int
+ $priceRange: String
+ $sort: String
+ $slug: String!
+ $width: String
+ ) {
+ collection: marketingCollection(slug: $slug) {
+ ...Collection_collection
+ @arguments(
+ acquireable: $acquireable
+ aggregations: $aggregations
+ atAuction: $atAuction
+ color: $color
+ forSale: $forSale
+ height: $height
+ inquireableOnly: $inquireableOnly
+ majorPeriods: $majorPeriods
+ medium: $medium
+ offerable: $offerable
+ page: $page
+ priceRange: $priceRange
+ sort: $sort
+ width: $width
+ first: 30
+ )
+ }
+ }
+`
diff --git a/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/ArtistSeriesRail/ArtistSeriesEntity.tsx b/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/ArtistSeriesRail/ArtistSeriesEntity.tsx
new file mode 100644
index 00000000000..5a6ab731840
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/ArtistSeriesRail/ArtistSeriesEntity.tsx
@@ -0,0 +1,180 @@
+import { Box, color, Flex, Sans, Serif } from "@artsy/palette"
+import { ArtistSeriesEntity_member } from "v2/__generated__/ArtistSeriesEntity_member.graphql"
+import { AnalyticsSchema } from "v2/Artsy/Analytics"
+import { useTracking } from "v2/Artsy/Analytics/useTracking"
+import { RouterLink } from "v2/Artsy/Router/RouterLink"
+import { Truncator } from "v2/Components/Truncator"
+import currency from "currency.js"
+import React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { data as sd } from "sharify"
+import styled from "styled-components"
+import { get } from "v2/Utils/get"
+
+export interface ArtistSeriesEntityProps {
+ member: ArtistSeriesEntity_member
+ itemNumber: number
+}
+
+export const ArtistSeriesEntity: React.FC = ({
+ member,
+ itemNumber,
+}) => {
+ const {
+ headerImage,
+ artworksConnection,
+ price_guidance,
+ slug,
+ title,
+ } = member
+ const artworks = artworksConnection.edges.map(({ node }) => node)
+ const bgImages = artworks.map(({ image }) => image && image.url)
+ const imageSize =
+ bgImages!.length === 1 ? 221 : bgImages!.length === 2 ? 109 : 72
+
+ const { trackEvent } = useTracking()
+
+ const handleLinkClick = () => {
+ trackEvent({
+ action_type: AnalyticsSchema.ActionType.Click,
+ context_page: AnalyticsSchema.PageName.CollectionPage,
+ context_module: AnalyticsSchema.ContextModule.ArtistCollectionsRail,
+ context_page_owner_type: AnalyticsSchema.OwnerType.Collection,
+ type: AnalyticsSchema.Type.Thumbnail,
+ destination_path: `${sd.APP_URL}/collection/${slug}`,
+ item_number: itemNumber,
+ })
+ }
+
+ return (
+
+
+
+ {bgImages!.length
+ ? bgImages.map((url, i) => {
+ const hit = artworks![i]
+ const artistName = get(hit!.artist, a => a!.name)
+ const alt = `${artistName ? artistName + ", " : ""}${
+ hit!.title
+ }`
+ return (
+
+
+ )
+ })
+ : headerImage &&
+ {
+
+ {title}
+
+ }
+ {price_guidance && (
+
+ From $
+ {currency(price_guidance, {
+ separator: ",",
+ precision: 0,
+ }).format()}
+
+ )}
+
+
+ )
+}
+
+export const ArtworkImage = styled.img<{ width: number }>`
+ width: ${({ width }) => width}px;
+ height: 125px;
+ background-color: ${color("black10")};
+ object-fit: cover;
+ object-position: center;
+ opacity: 0.9;
+`
+
+const ImgOverlay = styled(Box) <{ width: number }>`
+ height: 125px;
+ background-color: ${color("black30")};
+ opacity: 0.1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 7;
+`
+
+export const Container = styled(Box)`
+ border: 1px solid ${color("black10")};
+ border-radius: 2px;
+
+ &:hover {
+ text-decoration: none;
+ border: 1px solid ${color("black60")};
+ }
+`
+
+const SingleImgContainer = styled(Box)`
+ position: relative;
+ margin-right: 2px;
+
+ &:last-child {
+ margin-right: 0;
+ }
+`
+
+const CollectionTitle = styled(Serif)`
+ width: 100%;
+`
+
+export const ImgWrapper = styled(Flex)`
+ width: 221px;
+`
+
+export const StyledLink = styled(RouterLink)`
+ text-decoration: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+ &:hover {
+ text-decoration: none;
+ }
+`
+
+export const ArtistSeriesRailContainer = createFragmentContainer(
+ ArtistSeriesEntity,
+ {
+ member: graphql`
+ fragment ArtistSeriesEntity_member on MarketingCollection {
+ slug
+ headerImage
+ thumbnail
+ title
+ price_guidance: priceGuidance
+ artworksConnection(
+ first: 3
+ aggregations: [TOTAL]
+ sort: "-decayed_merch"
+ ) {
+ edges {
+ node {
+ artist {
+ name
+ }
+ title
+ image {
+ url(version: "small")
+ }
+ }
+ }
+ }
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/ArtistSeriesRail/__tests__/ArtistSeriesEntity.jest.tsx b/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/ArtistSeriesRail/__tests__/ArtistSeriesEntity.jest.tsx
new file mode 100644
index 00000000000..707131a878b
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/ArtistSeriesRail/__tests__/ArtistSeriesEntity.jest.tsx
@@ -0,0 +1,129 @@
+import { CollectionsHubLinkedCollections } from "v2/Apps/__tests__/Fixtures/Collections"
+import { useTracking } from "v2/Artsy/Analytics/useTracking"
+import { mount } from "enzyme"
+import React from "react"
+import {
+ ArtistSeriesEntity,
+ ArtworkImage,
+ StyledLink,
+} from "../ArtistSeriesEntity"
+
+jest.mock("v2/Artsy/Analytics/useTracking")
+jest.mock("found", () => ({
+ Link: ({ children, ...props }) => {children}
,
+ RouterContext: jest.requireActual("found").RouterContext,
+}))
+
+describe("ArtistSeriesEntity", () => {
+ let props
+ const trackEvent = jest.fn()
+
+ beforeEach(() => {
+ props = {
+ member: CollectionsHubLinkedCollections.linkedCollections[0].members[0],
+ }
+ ;(useTracking as jest.Mock).mockImplementation(() => {
+ return {
+ trackEvent,
+ }
+ })
+ })
+
+ it("showing the correct text, price guidance, amount of hits and image", () => {
+ const component = mount({props.children}
,
+ RouterContext: jest.requireActual("found").RouterContext,
+}))
+
+describe("ArtistSeriesRail", () => {
+ let props
+ const trackEvent = jest.fn()
+
+ function singleData() {
+ return {
+ title: "1787 keyboard",
+ price_guidance: 10000,
+ artworksConnection: {
+ edges: [
+ {
+ node: {
+ artist: {
+ name: "Jasper Johns",
+ },
+ title: "keyborad",
+ image: {
+ url:
+ "https://d32dm0rphc51dk.cloudfront.net/4izTOpDv-ew-g1RFXeREcQ/small.jpg",
+ },
+ },
+ },
+ ],
+ },
+ }
+ }
+
+ beforeEach(() => {
+ props = {
+ collectionGroup: CollectionsHubLinkedCollections.linkedCollections[0],
+ }
+ ;(useTracking as jest.Mock).mockImplementation(() => {
+ return {
+ trackEvent,
+ }
+ })
+ })
+
+ it("showing the correct text, price guidance, and title", () => {
+ const component = mount( = ({
+ collectionGroup,
+}) => {
+ const { members, name } = collectionGroup
+ const { trackEvent } = useTracking()
+
+ const trackArrowClick = () => {
+ trackEvent({
+ action_type: AnalyticsSchema.ActionType.Click,
+ context_module: AnalyticsSchema.ContextModule.ArtistCollectionsRail,
+ context_page_owner_type: AnalyticsSchema.OwnerType.Collection,
+ context_page: AnalyticsSchema.PageName.CollectionPage,
+ type: AnalyticsSchema.Type.Button,
+ subject: AnalyticsSchema.Subject.ClickedNextButton,
+ })
+ }
+
+ return (
+
+
+ {name}
+
+ {
+ return (
+
+ )
+}
+
+const Content = styled(Box)`
+ border-top: 1px solid ${color("black10")};
+`
+
+export const ArrowContainer = styled(Box)`
+ align-self: flex-start;
+
+ ${ArrowButton} {
+ height: 85%;
+ }
+`
+
+export const ArtistSeriesRailContainer = createFragmentContainer(
+ ArtistSeriesRail,
+ {
+ collectionGroup: graphql`
+ fragment ArtistSeriesRail_collectionGroup on MarketingCollectionGroup {
+ groupType
+ name
+ members {
+ slug
+ ...ArtistSeriesEntity_member
+ }
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/FeaturedCollectionsRails/__tests__/FeaturedCollectionsRails.jest.tsx b/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/FeaturedCollectionsRails/__tests__/FeaturedCollectionsRails.jest.tsx
new file mode 100644
index 00000000000..3606e3a590b
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/FeaturedCollectionsRails/__tests__/FeaturedCollectionsRails.jest.tsx
@@ -0,0 +1,151 @@
+import { CollectionHubFixture } from "v2/Apps/__tests__/Fixtures/Collections"
+import { useTracking } from "v2/Artsy/Analytics/useTracking"
+import { ArrowButton } from "v2/Components/Carousel"
+import { mount } from "enzyme"
+import "jest-styled-components"
+import React from "react"
+import {
+ FeaturedCollectionEntity,
+ FeaturedCollectionsRails,
+ FeaturedImage,
+ StyledLink,
+} from "../index"
+
+jest.mock("v2/Artsy/Analytics/useTracking")
+
+jest.mock("found", () => ({
+ Link: ({ children, ...props }) => {children}
,
+ RouterContext: jest.requireActual("found").RouterContext,
+}))
+
+describe("FeaturedCollectionsRails", () => {
+ let props
+ const trackEvent = jest.fn()
+
+ beforeEach(() => {
+ props = {
+ collectionGroup: CollectionHubFixture.linkedCollections[1],
+ }
+ ;(useTracking as jest.Mock).mockImplementation(() => {
+ return {
+ trackEvent,
+ }
+ })
+ })
+
+ const memberData = () => {
+ return {
+ description:
+ "From SpongeBob SquarePants to Snoopy, many beloved childhood cartoons have made an impact on the history of art.
",
+ price_guidance: 60,
+ slug: "art-inspired-by-cartoons",
+ thumbnail: "http://files.artsy.net/images/cartoons_thumbnail.png",
+ title: "Art Inspired by Cartoons",
+ }
+ }
+
+ it("Renders expected fields", () => {
+ const component = mount(From SpongeBob SquarePants to Snoopy, many beloved childhood cartoons have made an impact on the history of art.
",
+ price_guidance: null,
+ slug: "art-inspired-by-cartoons",
+ thumbnail: "http://files.artsy.net/images/cartoons_thumbnail.png",
+ title: "Art Inspired by Cartoons",
+ }
+ }
+
+ beforeEach(() => {
+ props = {
+ collectionGroup: CollectionHubFixture.linkedCollections[1],
+ }
+ ;(useTracking as jest.Mock).mockImplementation(() => {
+ return {
+ trackEvent,
+ }
+ })
+ })
+
+ it("Renders expected fields for FeaturedCollectionEntity", () => {
+ const component = mount( {
+ return (
+ = ({
+ collectionGroup,
+}) => {
+ const { members, name } = collectionGroup
+ const { trackEvent } = useTracking()
+
+ const trackArrowClick = () => {
+ trackEvent({
+ action_type: Schema.ActionType.Click,
+ context_module: Schema.ContextModule.FeaturedCollectionsRail,
+ context_page_owner_type: Schema.OwnerType.Collection,
+ context_page: Schema.PageName.CollectionPage,
+ type: Schema.Type.Button,
+ subject: Schema.Subject.ClickedNextButton,
+ })
+ }
+
+ return (
+
+
+ {name}
+
+
+ {renderCarousel(members, trackArrowClick, "430px")}
+
+
+ {renderCarousel(members, trackArrowClick, "500px")}
+
+
+ )
+}
+
+interface FeaturedCollectionEntityProps {
+ member: any
+ itemNumber: number
+}
+
+export const FeaturedCollectionEntity: React.FC = ({
+ itemNumber,
+ member,
+}) => {
+ const { description, price_guidance, slug, thumbnail, title } = member
+ const { trackEvent } = useTracking()
+ const formattedPrice = currency(price_guidance, {
+ separator: ",",
+ precision: 0,
+ }).format()
+
+ const handleClick = () => {
+ trackEvent({
+ action_type: Schema.ActionType.Click,
+ context_page: Schema.PageName.CollectionPage,
+ context_module: Schema.ContextModule.FeaturedCollectionsRail,
+ context_page_owner_type: Schema.OwnerType.Collection,
+ type: Schema.Type.Thumbnail,
+ destination_path: `${sd.APP_URL}/collection/${slug}`,
+ item_number: itemNumber,
+ })
+ }
+
+ const getTruncatedDescription = (lines: number) => {
+ return (
+ {
+ return (
+ <>
+ {`... `}
+
+ Read more
+
+
+ )
+ }}
+ >
+ <>
+ {description && (
+
+ )
+ }
+
+ return (
+
+
+
+
+
+ {title}
+
+ {price_guidance && (
+ {`From $${formattedPrice}`}
+ )}
+
+ {getTruncatedDescription(4)}
+ {getTruncatedDescription(3)}
+
+
+
+ )
+}
+
+export const FeaturedCollectionsRailsContainer = createFragmentContainer(
+ FeaturedCollectionsRails,
+ {
+ collectionGroup: graphql`
+ fragment FeaturedCollectionsRails_collectionGroup on MarketingCollectionGroup {
+ groupType
+ name
+ members {
+ slug
+ slug
+ title
+ description
+ price_guidance: priceGuidance
+ thumbnail
+ }
+ }
+ `,
+ }
+)
+
+const Container = styled(Box)`
+ border: 1px solid ${color("black10")};
+ border-radius: 2px;
+
+ &:hover {
+ text-decoration: none;
+ border: 1px solid ${color("black60")};
+ }
+`
+
+const FeaturedCollectionsContainer = styled(Box)`
+ border-top: 1px solid ${color("black10")};
+
+ ${Container} {
+ &:first-of-type {
+ margin-left: 2px;
+ }
+ }
+`
+
+const ExtendedSerif = styled(Serif)`
+ div span {
+ span p {
+ display: inline;
+ }
+
+ div p {
+ display: inline;
+ }
+ }
+`
+export const FeaturedImage = styled(ResponsiveImage)`
+ background-position: top;
+`
+
+export const ArrowContainer = styled(Box)`
+ align-self: flex-start;
+
+ ${ArrowButton} {
+ height: 100%;
+ }
+`
+
+export const StyledLink = styled(RouterLink)`
+ text-decoration: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+ &:hover {
+ text-decoration: none;
+ }
+`
+
+const ReadMoreLink = styled(Sans)`
+ text-decoration: underline;
+`
diff --git a/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/OtherCollectionsRail/OtherCollectionEntity.tsx b/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/OtherCollectionsRail/OtherCollectionEntity.tsx
new file mode 100644
index 00000000000..c3ab2f4676d
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/OtherCollectionsRail/OtherCollectionEntity.tsx
@@ -0,0 +1,100 @@
+import { Box, color, Flex, ResponsiveImage, Serif } from "@artsy/palette"
+import { OtherCollectionEntity_member } from "v2/__generated__/OtherCollectionEntity_member.graphql"
+import * as Schema from "v2/Artsy/Analytics/Schema"
+import { useTracking } from "v2/Artsy/Analytics/useTracking"
+import { RouterLink } from "v2/Artsy/Router/RouterLink"
+import React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { data as sd } from "sharify"
+import styled from "styled-components"
+import { resize } from "v2/Utils/resizer"
+
+export interface CollectionProps {
+ member: OtherCollectionEntity_member
+ itemNumber: number
+}
+
+export const OtherCollectionEntity: React.FC = ({
+ itemNumber,
+ member,
+}) => {
+ const { slug, thumbnail, title } = member
+ const { trackEvent } = useTracking()
+
+ const handleClick = () => {
+ trackEvent({
+ action_type: Schema.ActionType.Click,
+ context_page: Schema.PageName.CollectionPage,
+ context_module: Schema.ContextModule.OtherCollectionsRail,
+ context_page_owner_type: Schema.OwnerType.Collection,
+ type: Schema.Type.Thumbnail,
+ destination_path: `${sd.APP_URL}/collection/${slug}`,
+ item_number: itemNumber,
+ })
+ }
+
+ return (
+
+
+ {thumbnail && (
+
+
+ )}
+
+
+ {title}
+
+
+
+
+ )
+}
+
+export const OtherCollectionsRailsContainer = createFragmentContainer(
+ OtherCollectionEntity,
+ {
+ member: graphql`
+ fragment OtherCollectionEntity_member on MarketingCollection {
+ slug
+ thumbnail
+ title
+ }
+ `,
+ }
+)
+
+export const StyledLink = styled(RouterLink)`
+ display: block;
+ text-decoration: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ border: 1px solid ${color("black10")};
+ border-radius: 2px;
+ margin-right: 10px;
+
+ &:hover {
+ text-decoration: none;
+ border: 1px solid ${color("black60")};
+ }
+`
+
+export const ImageContainer = styled(Box)`
+ height: 60px;
+ width: 60px;
+`
+
+export const ThumbnailImage = styled(ResponsiveImage)`
+ background-size: cover;
+ border-radius: 2px 1px 1px 2px;
+`
+
+const TitleContainer = styled(Serif)`
+ width: max-content;
+ white-space: nowrap;
+`
diff --git a/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/OtherCollectionsRail/__tests__/OtherCollectionEntity.jest.tsx b/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/OtherCollectionsRail/__tests__/OtherCollectionEntity.jest.tsx
new file mode 100644
index 00000000000..be8e8432a1f
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/OtherCollectionsRail/__tests__/OtherCollectionEntity.jest.tsx
@@ -0,0 +1,80 @@
+import { CollectionHubFixture } from "v2/Apps/__tests__/Fixtures/Collections"
+import { useTracking } from "v2/Artsy/Analytics/useTracking"
+import { mount } from "enzyme"
+import React from "react"
+import {
+ OtherCollectionEntity,
+ StyledLink,
+ ThumbnailImage,
+} from "../OtherCollectionEntity"
+
+jest.mock("v2/Artsy/Analytics/useTracking")
+jest.mock("found", () => ({
+ Link: ({ children, ...props }) => {children}
,
+ RouterContext: jest.requireActual("found").RouterContext,
+}))
+
+describe("OtherCollectionEntity", () => {
+ let props
+ const trackEvent = jest.fn()
+
+ beforeEach(() => {
+ props = {
+ member: CollectionHubFixture.linkedCollections[0].members[0],
+ }
+ ;(useTracking as jest.Mock).mockImplementation(() => {
+ return {
+ trackEvent,
+ }
+ })
+ })
+
+ it("Renders collection's meta data", () => {
+ const component = mount({props.children}
,
+ RouterContext: jest.requireActual("found").RouterContext,
+}))
+
+describe("CollectionsRail", () => {
+ let props
+ const trackEvent = jest.fn()
+
+ beforeEach(() => {
+ props = {
+ collectionGroup: CollectionHubFixture.linkedCollections[0],
+ }
+ ;(useTracking as jest.Mock).mockImplementation(() => {
+ return {
+ trackEvent,
+ }
+ })
+ })
+
+ const memberData = () => {
+ return {
+ description:
+ "From SpongeBob SquarePants to Snoopy, many beloved childhood cartoons have made an impact on the history of art.
",
+ price_guidance: 60,
+ slug: "art-inspired-by-cartoons",
+ thumbnail: "http://files.artsy.net/images/cartoons_thumbnail.png",
+ title: "Art Inspired by Cartoons",
+ }
+ }
+
+ it("Renders expected fields", () => {
+ const component = mount( = ({
+ collectionGroup,
+}) => {
+ const { name, members } = collectionGroup
+ const { trackEvent } = useTracking()
+
+ const trackArrowClick = () => {
+ trackEvent({
+ action_type: Schema.ActionType.Click,
+ context_module: Schema.ContextModule.OtherCollectionsRail,
+ context_page_owner_type: Schema.OwnerType.Collection,
+ context_page: Schema.PageName.CollectionPage,
+ type: Schema.Type.Button,
+ subject: Schema.Subject.ClickedNextButton,
+ })
+ }
+
+ return (
+
+
+ {name}
+
+ {
+ return (
+
+ )
+}
+
+const Container = styled(Box)`
+ border-top: 1px solid ${color("black10")};
+
+ ${ArrowButton} {
+ height: 60%;
+ }
+`
+
+export const OtherCollectionsRailsContainer = createFragmentContainer(
+ OtherCollectionsRail,
+ {
+ collectionGroup: graphql`
+ fragment OtherCollectionsRail_collectionGroup on MarketingCollectionGroup {
+ groupType
+ name
+ members {
+ ...OtherCollectionEntity_member
+ }
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/index.tsx b/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/index.tsx
new file mode 100644
index 00000000000..55a1673a4ca
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collection/Components/CollectionsHubRails/index.tsx
@@ -0,0 +1,49 @@
+import { CollectionsHubRails_linkedCollections } from "v2/__generated__/CollectionsHubRails_linkedCollections.graphql"
+import React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { ArtistSeriesRailContainer as ArtistSeriesRail } from "./ArtistSeriesRail"
+import { FeaturedCollectionsRailsContainer as FeaturedCollectionsRails } from "./FeaturedCollectionsRails"
+import { OtherCollectionsRailsContainer as OtherCollectionsRail } from "./OtherCollectionsRail"
+
+const railForGroupType = collectionGroup => {
+ const { groupType } = collectionGroup
+ switch (groupType) {
+ case "ArtistSeries":
+ return {railForGroupType(collectionGroup)}
+ ))}
+
+ )
+}
+
+export const CollectionsHubRailsContainer = createFragmentContainer(
+ CollectionsHubRails,
+ {
+ linkedCollections: graphql`
+ fragment CollectionsHubRails_linkedCollections on MarketingCollectionGroup
+ @relay(plural: true) {
+ groupType
+ ...FeaturedCollectionsRails_collectionGroup
+ ...OtherCollectionsRail_collectionGroup
+ ...ArtistSeriesRail_collectionGroup
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Collect/Routes/Collection/Components/Header/DefaultHeader.tsx b/src/v2/Apps/Collect/Routes/Collection/Components/Header/DefaultHeader.tsx
new file mode 100644
index 00000000000..081ff49bdee
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collection/Components/Header/DefaultHeader.tsx
@@ -0,0 +1,132 @@
+import { Box, space } from "@artsy/palette"
+import { DefaultHeader_headerArtworks } from "v2/__generated__/DefaultHeader_headerArtworks.graphql"
+import React, { FC } from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import styled from "styled-components"
+import { useWindowSize } from "v2/Utils/Hooks/useWindowSize"
+import { Media } from "v2/Utils/Responsive"
+import { Writable } from "v2/Utils/typeSupport"
+import { DefaultHeaderArtworkFragmentContainer as DefaultHeaderArtwork } from "./DefaultHeaderArtwork"
+
+const Rail = styled(Box)`
+ display: flex;
+ flex-direction: row;
+`
+
+export const fitHeaderArtworks = (
+ artworks: DefaultHeader_headerArtworks["edges"],
+ headerWidth: number,
+ isSmallViewport: boolean
+): DefaultHeader_headerArtworks["edges"] => {
+ if (artworks.length < 1) return []
+
+ // Initially render all the artworks
+ if (headerWidth === 0) return artworks
+
+ // Once we have a viewport width, possibly pad them out to fill out the remaining width,
+ // or trim them to fit (which is largely unnecessary but left alone here for simplicity).
+ let artworkWidths = 0
+ const headerArtworks: Writable = []
+
+ while (true) {
+ for (const artwork of artworks) {
+ headerArtworks.push(artwork)
+
+ if (artworkWidths > headerWidth) {
+ return headerArtworks
+ }
+
+ if (!artwork.node.image) continue
+
+ isSmallViewport
+ ? (artworkWidths += artwork.node.image.small.width + space(1))
+ : (artworkWidths += artwork.node.image.large.width + space(1))
+ }
+ }
+}
+
+export interface CollectionDefaultHeaderProps {
+ headerArtworks: DefaultHeader_headerArtworks
+ collectionId: string
+ collectionSlug: string
+}
+
+export const CollectionDefaultHeader: FC = ({
+ headerArtworks,
+ collectionId,
+ collectionSlug,
+}) => {
+ const { width: viewportWidth } = useWindowSize()
+
+ if (headerArtworks.edges.length === 0) return null
+
+ const largeArtworks = fitHeaderArtworks(
+ headerArtworks.edges,
+ viewportWidth,
+ false
+ )
+
+ const smallArtworks = fitHeaderArtworks(
+ headerArtworks.edges,
+ viewportWidth,
+ true
+ )
+
+ return (
+
+
+
+ {largeArtworks.map(artwork => (
+
+
+
+
+
+ {smallArtworks.map(artwork => (
+
+
+
+ )
+}
+
+export const CollectionDefaultHeaderFragmentContainer = createFragmentContainer(
+ CollectionDefaultHeader,
+ {
+ headerArtworks: graphql`
+ fragment DefaultHeader_headerArtworks on FilterArtworksConnection {
+ edges {
+ node {
+ id
+ image {
+ # TODO: Should accept arguments
+ large: resized(height: 230) {
+ width
+ height
+ }
+ small: resized(height: 160) {
+ width
+ height
+ }
+ }
+ }
+ ...DefaultHeaderArtwork_artwork
+ }
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Collect/Routes/Collection/Components/Header/DefaultHeaderArtwork.tsx b/src/v2/Apps/Collect/Routes/Collection/Components/Header/DefaultHeaderArtwork.tsx
new file mode 100644
index 00000000000..215be52b1c7
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collection/Components/Header/DefaultHeaderArtwork.tsx
@@ -0,0 +1,90 @@
+import { Image } from "@artsy/palette"
+import { DefaultHeaderArtwork_artwork } from "v2/__generated__/DefaultHeaderArtwork_artwork.graphql"
+import { AnalyticsSchema } from "v2/Artsy/Analytics"
+import { useTracking } from "v2/Artsy/Analytics/useTracking"
+import { RouterLink } from "v2/Artsy/Router/RouterLink"
+import React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import styled from "styled-components"
+
+const Link = styled(RouterLink)`
+ display: flex;
+ align-items: flex-end;
+`
+
+export type DefaultHeaderArtworkProps = React.HTMLAttributes<
+ HTMLAnchorElement
+> & {
+ artwork: DefaultHeaderArtwork_artwork
+ small?: boolean
+ collectionId: string
+ collectionSlug: string
+}
+
+export const DefaultHeaderArtwork: React.FC = ({
+ artwork,
+ small = false,
+ collectionId,
+ collectionSlug,
+ ...rest
+}) => {
+ const { trackEvent } = useTracking()
+
+ if (!artwork.node.image) return null
+
+ const handleClick = () => {
+ trackEvent({
+ action_type: AnalyticsSchema.ActionType.Click,
+ context_module: AnalyticsSchema.ContextModule.ArtworkBanner,
+ context_page_owner_type: AnalyticsSchema.OwnerType.Collection,
+ context_page: AnalyticsSchema.PageName.CollectionPage,
+ context_page_owner_id: collectionId,
+ context_page_owner_slug: collectionSlug,
+ destination_path: artwork.node.href,
+ })
+ }
+
+ return (
+ = props => {
+ const { featuredArtists, breakpointSize, hasMultipleArtists } = props
+ const artistCount = getArtistCountAtBreakpoint(breakpointSize)
+ const remainingCount = featuredArtists.length - artistCount
+ const truncatedArtists = featuredArtists.slice(0, artistCount)
+ const [showAll, setShowMore] = useState(false)
+ const headlineLabel = "Featured Artist" + (hasMultipleArtists ? "s" : "")
+
+ return (
+
+
+ {headlineLabel}
+
+
+ {showAll || featuredArtists.length <= artistCount ? (
+ featuredArtists
+ ) : (
+ <>
+ {truncatedArtists}
+ {
+ setShowMore(true)
+ }}
+ >
+
+
+
+
+ )}
+
+
+ )
+}
+
+const ViewMore = styled(Sans)`
+ div {
+ div {
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ div:first-child {
+ text-decoration: none;
+ }
+ }
+`
+
+ViewMore.displayName = "ViewMore"
+
+const getArtistCountAtBreakpoint = breakpointSize => {
+ switch (breakpointSize) {
+ case "xs":
+ case "sm":
+ return 3
+ case "md":
+ return 5
+ case "lg":
+ case "xl":
+ return 7
+ default:
+ return 3
+ }
+}
diff --git a/src/v2/Apps/Collect/Routes/Collection/Components/Header/__tests__/DefaultHeader.jest.tsx b/src/v2/Apps/Collect/Routes/Collection/Components/Header/__tests__/DefaultHeader.jest.tsx
new file mode 100644
index 00000000000..c901272982f
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collection/Components/Header/__tests__/DefaultHeader.jest.tsx
@@ -0,0 +1,90 @@
+import { defaultCollectionHeaderArtworks } from "v2/Apps/Collect/Routes/Collection/Components/Header/__tests__/fixtures/artworks"
+import {
+ CollectionDefaultHeader,
+ fitHeaderArtworks,
+} from "v2/Apps/Collect/Routes/Collection/Components/Header/DefaultHeader"
+import { useTracking } from "v2/Artsy/Analytics/useTracking"
+import { mount } from "enzyme"
+import React from "react"
+
+jest.mock("v2/Artsy/Analytics/useTracking")
+
+describe("default collections header artworks", () => {
+ it("duplicates header artworks when the quantity of artworks in collection are small in a large viewport", () => {
+ const artworks = defaultCollectionHeaderArtworks.edges.slice(0, 3)
+ const headerArtworks = fitHeaderArtworks(artworks as any, 1275, false)
+
+ expect(headerArtworks.length).toBeGreaterThan(artworks.length)
+ expect(headerArtworks).toHaveLength(10)
+ })
+
+ it("duplicates header artworks when the quantity of artworks in collection are small in a small viewport", () => {
+ const artworks = defaultCollectionHeaderArtworks.edges.slice(0, 2)
+ const headerArtworks = fitHeaderArtworks(artworks as any, 375, true)
+
+ expect(headerArtworks.length).toBeGreaterThan(artworks.length)
+ expect(headerArtworks).toHaveLength(7)
+ })
+
+ it("returns only the number of artworks necessary to fill the header", () => {
+ const artworks = defaultCollectionHeaderArtworks.edges
+ const headerArtworks = fitHeaderArtworks(artworks as any, 675, false)
+
+ expect(headerArtworks.length).toBeLessThan(artworks.length)
+ expect(headerArtworks).toHaveLength(5)
+ })
+})
+
+describe("default header component", () => {
+ let props
+ const trackEvent = jest.fn()
+
+ beforeEach(() => {
+ props = {
+ headerArtworks: defaultCollectionHeaderArtworks,
+ defaultHeaderImageHeight: 1000,
+ }
+ ;(useTracking as jest.Mock).mockImplementation(() => {
+ return {
+ trackEvent,
+ }
+ })
+ })
+
+ const getWrapper = headerProps => {
+ return mount({props.children}
,
+ RouterContext: jest.requireActual("found").RouterContext,
+}))
+
+jest.mock("v2/Artsy/Analytics/useTracking", () => {
+ return {
+ useTracking: () => ({
+ trackEvent: jest.fn(),
+ }),
+ }
+})
+
+describe("collections header", () => {
+ const context = { mediator: { trigger: jest.fn() }, user: null }
+ const props: Props = {
+ artworks: collectionHeaderArtworks,
+ collection: {
+ " $refType": null,
+ id: "abcdefg1234",
+ title: "KAWS: Toys",
+ credit: null,
+ description: null,
+ category: "Collectible Sculptures",
+ slug: "kaws-toys",
+ headerImage:
+ "https://d32dm0rphc51dk.cloudfront.net/WhacjFyMKlMkNVzncPjlRA/square.jpg",
+ query: {
+ artistIDs: ["4e934002e340fa0001005336"],
+ },
+ featuredArtistExclusionIds: [],
+ },
+ }
+
+ function mountComponent(
+ theProps: Props,
+ breakpoint: "xs" | "sm" | "md" | "lg" = "sm"
+ ) {
+ return mount(
+
+
+
+
+ )
+ }
+
+ it("doesnt blow up if missing merchandisableArtists or artistIDs", () => {
+ const noArtistsOrIDs = cloneDeep(props) as any
+ noArtistsOrIDs.collection.query.artistIDs = null
+ noArtistsOrIDs.artworks.merchandisableArtists = null
+ expect(() => {
+ mountComponent(noArtistsOrIDs)
+ }).not.toThrowError()
+ })
+
+ it("renders the default collections header when there is no header image", () => {
+ const component = mountComponent({
+ ...props,
+ artworks: defaultCollectionHeaderArtworks as any,
+ collection: {
+ ...props.collection,
+ headerImage: "",
+ },
+ })
+
+ const defaultHeader = component.find("CollectionDefaultHeader")
+ const singleImageHeader = component.find("CollectionSingleImageHeader")
+
+ expect(defaultHeader.length).toEqual(1)
+ expect(singleImageHeader.length).toEqual(0)
+ })
+
+ describe("getFeaturedArtists", () => {
+ it("returns the queried artists when there is explicit artistIDs", () => {
+ const { collection, artworks } = props
+ const results = getFeaturedArtists(
+ 9,
+ collection,
+ artworks.merchandisableArtists
+ )
+
+ expect(results!.length).toEqual(1)
+ })
+
+ it("returns merchandisable artists when there is no explicit artistIDs", () => {
+ const { collection, artworks } = props
+ const results = getFeaturedArtists(
+ 9,
+ {
+ ...collection,
+ query: {
+ ...collection.query,
+ artistIDs: [],
+ },
+ },
+ artworks.merchandisableArtists
+ )
+
+ expect(results!.length).toEqual(4)
+ })
+
+ it("passes correct arguments featuredArtistsEntityCollection", () => {
+ const { collection, artworks } = props
+
+ const results = getFeaturedArtists(
+ 9,
+ collection,
+ artworks.merchandisableArtists
+ )
+
+ expect(results.length).toBe(1)
+ const artist = results[0]
+
+ expect(artist).toMatchObject({
+ name: "KAWS",
+ image: {
+ resized: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=45&height=45&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FWhacjFyMKlMkNVzncPjlRA%2Fsquare.jpg",
+ },
+ },
+ birthday: "1974",
+ nationality: "American",
+ })
+ })
+
+ it("return artists with featuredArtistExclusionIds removed", () => {
+ // artists ids for Robert Lazzarini and Medicom
+ const excludedIds = [
+ "4f5f64c23b555230ac0003ae",
+ "58fe85ee275b2450a0fd2b51",
+ ]
+ const { collection, artworks } = props
+ const results = getFeaturedArtists(
+ 9,
+ {
+ ...collection,
+ featuredArtistExclusionIds: excludedIds,
+ query: {
+ ...collection.query,
+ artistIDs: [],
+ },
+ },
+ artworks.merchandisableArtists
+ )
+
+ const artistIds = results.map(artist => artist.slug)
+ expect(artistIds).toEqual(expect.not.arrayContaining(excludedIds))
+ })
+ })
+
+ describe("collection meta data", () => {
+ it("renders the title", () => {
+ const component = mountComponent({
+ ...props,
+ collection: {
+ ...props.collection,
+ title: "Scooby Doo",
+ },
+ })
+
+ expect(component.find("h1").text()).toContain("Scooby Doo")
+ })
+
+ it("renders breadcrumb category", () => {
+ const component = mountComponent({
+ ...props,
+ collection: {
+ ...props.collection,
+ category: "Nachos",
+ },
+ })
+
+ expect(component.text()).toContain("All works")
+ expect(component.text()).toContain("Nachos")
+ })
+
+ describe("description", () => {
+ describe("smaller screen", () => {
+ it("renders truncated description if description exists", () => {
+ const component = mountComponent({
+ ...props,
+ collection: {
+ ...props.collection,
+ description: "some description",
+ },
+ })
+
+ const readMore = component.find("ReadMore")
+ expect(readMore.length).toEqual(1)
+ expect(readMore.text()).toContain("some description")
+ })
+
+ it("renders truncation with no text if description does not exist", () => {
+ const component = mountComponent({
+ ...props,
+ collection: {
+ ...props.collection,
+ description: undefined,
+ },
+ })
+
+ const readMore = component.find("ReadMore")
+ expect(readMore!.length).toEqual(1)
+ expect(readMore.text()).toEqual("")
+ })
+ })
+
+ describe("larger screen", () => {
+ it("renders description untruncated if description exists", () => {
+ const component = mountComponent(
+ {
+ ...props,
+ collection: {
+ ...props.collection,
+ description: "some description",
+ },
+ },
+ "lg"
+ )
+
+ expect(component.find("ReadMore").length).toEqual(0)
+ expect(component.text()).toContain("some description")
+ })
+ })
+
+ it("renders a formatted string description", () => {
+ const component = mountComponent({
+ ...props,
+ collection: {
+ ...props.collection,
+ description: "your description ",
+ },
+ })
+
+ expect(component.html()).toContain("your description ")
+ })
+ })
+ })
+
+ describe("collection header featured artists rail", () => {
+ it("renders featured artists when featured artists exist", () => {
+ const component = mountComponent(
+ {
+ ...props,
+ collection: {
+ ...props.collection,
+ query: {
+ ...props.collection.query,
+ artistIDs: [],
+ },
+ },
+ },
+ "lg"
+ )
+ const entityHeaders = component.find(EntityHeader)
+
+ expect(component.text()).toContain("Featured Artists")
+ expect(entityHeaders.length).toEqual(4)
+ })
+
+ it("does not render featured artists when they don't exist", () => {
+ const component = mountComponent(
+ {
+ ...props,
+ artworks: {
+ ...props.artworks,
+ merchandisableArtists: [],
+ },
+ },
+ "lg"
+ )
+ const entities = component.find(EntityHeader)
+
+ expect(component.text()).not.toContain("Featured Artists")
+ expect(entities.length).toEqual(0)
+ })
+
+ function anArtist(): Header_artworks["merchandisableArtists"][number] {
+ return {
+ slug: "medicom-toy-slash-china",
+ internalID: "5b9821af86c8aa21d364dde5",
+ name: "Medicom Toy/China",
+ image: {
+ resized: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=45&height=45&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FnpEmyaOeaPzkfEHX5VsmQg%2Fsquare.jpg",
+ },
+ },
+ birthday: "",
+ nationality: "",
+ " $fragmentRefs": null,
+ }
+ }
+
+ it("shows 3 featured artists on mobile when not filtered by artist ids", () => {
+ const overrideData = jest.spyOn(sharify, "data", "get")
+ overrideData.mockReturnValueOnce({ IS_MOBILE: true } as any)
+
+ const component = mountComponent(
+ {
+ ...props,
+ collection: {
+ ...props.collection,
+ query: {
+ ...props.collection.query,
+ artistIDs: [],
+ },
+ },
+ },
+ "xs"
+ )
+ const entityHeaders = component.find(EntityHeader)
+
+ expect(component.text()).toContain("Featured Artists")
+ expect(entityHeaders.length).toEqual(4) // 4 = 3 artists + 1 "View More"
+ })
+
+ it("shows 3 featured artists at small breakpoint when not filtered by artist ids", () => {
+ const component = mountComponent(
+ {
+ ...props,
+ artworks: {
+ ...props.artworks,
+ merchandisableArtists: [
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ ],
+ },
+ collection: {
+ ...props.collection,
+ query: {
+ ...props.collection.query,
+ artistIDs: [],
+ },
+ },
+ },
+ "sm"
+ )
+ const entityHeaders = component.find(EntityHeader)
+
+ expect(component.text()).toContain("Featured Artists")
+ expect(entityHeaders.length).toEqual(4) // 4 = 3 artists + 1 "View More"
+ })
+
+ it("shows 5 featured artists at medium breakpoint when not filtered by artist ids", () => {
+ const component = mountComponent(
+ {
+ ...props,
+ artworks: {
+ ...props.artworks,
+ merchandisableArtists: [
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ ],
+ },
+ collection: {
+ ...props.collection,
+ query: {
+ ...props.collection.query,
+ artistIDs: [],
+ },
+ },
+ },
+ "md"
+ )
+ const entityHeaders = component.find(EntityHeader)
+
+ expect(component.text()).toContain("Featured Artists")
+ expect(entityHeaders.length).toEqual(6) // 6 = 5 artists + 1 "View More"
+ })
+
+ it("shows 7 featured artists at large breakpoint when not filtered by artist ids", () => {
+ const component = mountComponent(
+ {
+ ...props,
+ artworks: {
+ ...props.artworks,
+ merchandisableArtists: [
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ ],
+ },
+ collection: {
+ ...props.collection,
+ query: {
+ ...props.collection.query,
+ artistIDs: [],
+ },
+ },
+ },
+ "lg"
+ )
+ const entityHeaders = component.find(EntityHeader)
+
+ expect(component.text()).toContain("Featured Artists")
+ expect(entityHeaders.length).toEqual(8) // 8 = 7 artists + 1 "View More"
+ })
+
+ it("shows all featured artists after clicking 'show more'", () => {
+ const component = mountComponent(
+ {
+ ...props,
+ artworks: {
+ ...props.artworks,
+ merchandisableArtists: [
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ anArtist(),
+ ],
+ },
+ collection: {
+ ...props.collection,
+ query: {
+ ...props.collection.query,
+ artistIDs: [],
+ },
+ },
+ },
+ "xs"
+ )
+ const entityHeaders = component.find(EntityHeader)
+
+ expect(entityHeaders.length).toEqual(4) // 4 = 3 artists + 1 "View More"
+
+ const viewMore = component.find("ViewMore")
+ viewMore.simulate("click")
+
+ expect(component.find(EntityHeader).length).toEqual(6)
+ })
+
+ it("opens auth modal with expected args when following an artist", () => {
+ const component = mountComponent(props)
+ component
+ .find(FollowArtistButton)
+ .first()
+ .simulate("click")
+ expect(context.mediator.trigger).toBeCalledWith("open:auth", {
+ mode: "signup",
+ contextModule: "featuredArtistsRail",
+ copy: "Sign up to follow KAWS",
+ intent: "followArtist",
+ afterSignUpAction: {
+ action: "follow",
+ kind: "artist",
+ objectId: "kaws",
+ },
+ })
+ })
+ })
+})
diff --git a/src/v2/Apps/Collect/Routes/Collection/Components/Header/__tests__/fixtures/artworks.ts b/src/v2/Apps/Collect/Routes/Collection/Components/Header/__tests__/fixtures/artworks.ts
new file mode 100644
index 00000000000..1d16fe4b09a
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collection/Components/Header/__tests__/fixtures/artworks.ts
@@ -0,0 +1,279 @@
+import { DefaultHeaderArtwork_artwork } from "v2/__generated__/DefaultHeaderArtwork_artwork.graphql"
+import { Header_artworks } from "v2/__generated__/Header_artworks.graphql"
+import { DeFraged } from "v2/Utils/typeSupport"
+
+export const collectionHeaderArtworks: Header_artworks = {
+ " $refType": null,
+ " $fragmentRefs": null,
+ merchandisableArtists: [
+ {
+ slug: "kaws",
+ internalID: "4e934002e340fa0001005336",
+ name: "KAWS",
+ image: {
+ resized: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=45&height=45&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FWhacjFyMKlMkNVzncPjlRA%2Fsquare.jpg",
+ },
+ },
+ birthday: "1974",
+ nationality: "American",
+ " $fragmentRefs": null,
+ },
+ {
+ slug: "robert-lazzarini",
+ internalID: "4f5f64c23b555230ac0003ae",
+ name: "Robert Lazzarini",
+ image: {
+ resized: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=45&height=45&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2F1npk1i_Xua5q8Hv0YOq_3g%2Fsquare.jpg",
+ },
+ },
+ birthday: "1965",
+ nationality: "American",
+ " $fragmentRefs": null,
+ },
+ {
+ slug: "medicom",
+ internalID: "58fe85ee275b2450a0fd2b51",
+ name: "Medicom",
+ image: {
+ resized: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=45&height=45&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FjUMOidRmCQ0RyynXM_sFzQ%2Fsquare.jpg",
+ },
+ },
+ birthday: "",
+ nationality: "",
+ " $fragmentRefs": null,
+ },
+ {
+ slug: "medicom-toy-slash-china",
+ internalID: "5b9821af86c8aa21d364dde5",
+ name: "Medicom Toy/China",
+ image: {
+ resized: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=45&height=45&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FnpEmyaOeaPzkfEHX5VsmQg%2Fsquare.jpg",
+ },
+ },
+ birthday: "",
+ nationality: "",
+ " $fragmentRefs": null,
+ },
+ ],
+}
+
+export const defaultCollectionHeaderArtworks: {
+ edges: Array>
+} = {
+ edges: [
+ {
+ node: {
+ id: "1",
+ href:
+ "/artwork/carrie-mae-weems-untitled-woman-and-daughter-with-children",
+ slug: "carrie-mae-weems-untitled-woman-and-daughter-with-children",
+ image: null, // intentionally null
+ },
+ },
+ {
+ node: {
+ id: "2",
+ href: "/artwork/carrie-mae-weems-untitled-woman-feeding-bird",
+ slug: "carrie-mae-weems-untitled-woman-feeding-bird",
+ image: {
+ small: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=159&height=160&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2F6EcgtVvPwlklnB96Xo582Q%2Flarge.jpg",
+ width: 159,
+ height: 160,
+ },
+ large: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=219&height=220&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2F6EcgtVvPwlklnB96Xo582Q%2Flarge.jpg",
+ width: 219,
+ height: 220,
+ },
+ },
+ },
+ },
+ {
+ node: {
+ id: "3",
+ href:
+ "/artwork/carrie-mae-weems-untitled-man-reading-newspaper-and-kitchen-table-series-book",
+ slug:
+ "carrie-mae-weems-untitled-man-reading-newspaper-and-kitchen-table-series-book",
+ image: {
+ small: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=160&height=160&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FgK6jwJ3DvAJwfRN86QVkXg%2Flarge.jpg",
+ width: 160,
+ height: 160,
+ },
+ large: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=220&height=220&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FgK6jwJ3DvAJwfRN86QVkXg%2Flarge.jpg",
+ width: 220,
+ height: 220,
+ },
+ },
+ },
+ },
+ {
+ node: {
+ id: "4",
+ href: "/artwork/carrie-mae-weems-untitled-woman-standing",
+ slug: "carrie-mae-weems-untitled-woman-standing",
+ image: {
+ small: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=155&height=160&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FclW8TSShyic1OZjPrQ2ZMQ%2Flarge.jpg",
+ width: 155,
+ height: 160,
+ },
+ large: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=213&height=220&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FclW8TSShyic1OZjPrQ2ZMQ%2Flarge.jpg",
+ width: 213,
+ height: 220,
+ },
+ },
+ },
+ },
+ {
+ node: {
+ id: "5",
+ href:
+ "/artwork/carrie-mae-weems-untitled-woman-and-daughter-with-makeup-from-kitchen-table-series-1",
+ slug:
+ "carrie-mae-weems-untitled-woman-and-daughter-with-makeup-from-kitchen-table-series-1",
+ image: {
+ small: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=159&height=160&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2F6im4v__40Y7_SkuaZTCVaQ%2Flarge.jpg",
+ width: 159,
+ height: 160,
+ },
+ large: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=218&height=220&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2F6im4v__40Y7_SkuaZTCVaQ%2Flarge.jpg",
+ width: 218,
+ height: 220,
+ },
+ },
+ },
+ },
+ {
+ node: {
+ id: "6",
+ href: "/artwork/carrie-mae-weems-untitled-brushing-hair",
+ slug: "carrie-mae-weems-untitled-brushing-hair",
+ image: {
+ small: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=160&height=160&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FjUtnjk72Wp_WtNsFdvYzZg%2Flarge.jpg",
+ width: 160,
+ height: 160,
+ },
+ large: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=220&height=220&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FjUtnjk72Wp_WtNsFdvYzZg%2Flarge.jpg",
+ width: 220,
+ height: 220,
+ },
+ },
+ },
+ },
+ {
+ node: {
+ id: "7",
+ href:
+ "/artwork/carrie-mae-weems-untitled-man-smoking-from-kitchen-table-series",
+ slug: "carrie-mae-weems-untitled-man-smoking-from-kitchen-table-series",
+ image: {
+ small: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=158&height=160&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2Ft6sAir5cRqSVcVKeP3NJQA%2Flarge.jpg",
+ width: 158,
+ height: 160,
+ },
+ large: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=217&height=220&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2Ft6sAir5cRqSVcVKeP3NJQA%2Flarge.jpg",
+ width: 217,
+ height: 220,
+ },
+ },
+ },
+ },
+ {
+ node: {
+ id: "8",
+ href:
+ "/artwork/carrie-mae-weems-untitled-from-the-kitchen-table-series",
+ slug: "carrie-mae-weems-untitled-from-the-kitchen-table-series",
+ image: {
+ small: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=162&height=160&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FIbCYjysUtSW7xkQ_kj0D8w%2Flarge.jpg",
+ width: 162,
+ height: 160,
+ },
+ large: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=223&height=220&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FIbCYjysUtSW7xkQ_kj0D8w%2Flarge.jpg",
+ width: 223,
+ height: 220,
+ },
+ },
+ },
+ },
+ {
+ node: {
+ id: "9",
+ href:
+ "/artwork/carrie-mae-weems-untitled-woman-and-phone-from-the-series-the-kitchen-table",
+ slug:
+ "carrie-mae-weems-untitled-woman-and-phone-from-the-series-the-kitchen-table",
+ image: {
+ small: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=159&height=160&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FkZSmv3CeHhIzV9DrE1gcug%2Flarge.jpg",
+ width: 159,
+ height: 160,
+ },
+ large: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=219&height=220&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FkZSmv3CeHhIzV9DrE1gcug%2Flarge.jpg",
+ width: 219,
+ height: 220,
+ },
+ },
+ },
+ },
+ {
+ node: {
+ id: "10",
+ href: "/artwork/carrie-mae-weems-untitled-from-kitchen-table-series",
+ slug: "carrie-mae-weems-untitled-from-kitchen-table-series",
+ image: {
+ small: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=161&height=160&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FSsSCXZj6gJgfsyzbA4ffCw%2Flarge.jpg",
+ width: 161,
+ height: 160,
+ },
+ large: {
+ url:
+ "https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&width=222&height=220&quality=80&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FSsSCXZj6gJgfsyzbA4ffCw%2Flarge.jpg",
+ width: 222,
+ height: 220,
+ },
+ },
+ },
+ },
+ ],
+}
diff --git a/src/v2/Apps/Collect/Routes/Collection/Components/Header/index.tsx b/src/v2/Apps/Collect/Routes/Collection/Components/Header/index.tsx
new file mode 100644
index 00000000000..2bb469425bf
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collection/Components/Header/index.tsx
@@ -0,0 +1,383 @@
+import { Intent, ContextModule } from "@artsy/cohesion"
+import { breakpoints, EntityHeader, ReadMore } from "@artsy/palette"
+import {
+ Box,
+ Col,
+ color,
+ Flex,
+ Grid,
+ media,
+ Row,
+ Sans,
+ Serif,
+ Spacer,
+} from "@artsy/palette"
+import { Header_artworks } from "v2/__generated__/Header_artworks.graphql"
+import { Header_collection } from "v2/__generated__/Header_collection.graphql"
+import { CollectionDefaultHeaderFragmentContainer as CollectionDefaultHeader } from "v2/Apps/Collect/Routes/Collection/Components/Header/DefaultHeader"
+import { HorizontalPadding } from "v2/Apps/Components/HorizontalPadding"
+import { useSystemContext } from "v2/Artsy"
+import { AnalyticsSchema } from "v2/Artsy/Analytics"
+import { unica } from "v2/Assets/Fonts"
+import { FollowArtistButtonFragmentContainer as FollowArtistButton } from "v2/Components/FollowButton/FollowArtistButton"
+import { Link } from "found"
+import { filter, take } from "lodash"
+import React, { FC } from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import styled from "styled-components"
+import { slugify } from "underscore.string"
+import { openAuthToFollowSave } from "v2/Utils/openAuthModal"
+import { resize } from "v2/Utils/resizer"
+import { Responsive } from "v2/Utils/Responsive"
+import { FeaturedArtists } from "./FeaturedArtists"
+
+export interface Props {
+ collection: Header_collection
+ artworks: Header_artworks
+}
+
+const handleOpenAuth = (mediator, artist) => {
+ openAuthToFollowSave(mediator, {
+ entity: artist,
+ contextModule: ContextModule.featuredArtistsRail,
+ intent: Intent.followArtist,
+ })
+}
+
+export const getFeaturedArtists = (
+ artistsCount: number,
+ collection: Header_collection,
+ merchandisableArtists: Header_artworks["merchandisableArtists"]
+): Header_artworks["merchandisableArtists"] => {
+ if (collection.query.artistIDs?.length > 0) {
+ return filter(merchandisableArtists, artist =>
+ collection.query.artistIDs.includes(artist.internalID)
+ )
+ }
+
+ if (merchandisableArtists?.length > 0) {
+ const filteredArtistsIds = merchandisableArtists.filter(artist => {
+ return !collection.featuredArtistExclusionIds.includes(artist.internalID)
+ })
+ return take(filteredArtistsIds, artistsCount)
+ }
+
+ // No artists
+ return []
+}
+
+export const featuredArtistsEntityCollection: (
+ artists: Header_artworks["merchandisableArtists"],
+ mediator: any,
+ user: any
+) => JSX.Element[] = (artists, mediator, user) => {
+ return artists.map((artist, index) => {
+ const hasArtistMetaData = artist.nationality && artist.birthday
+ return (
+
+ handleOpenAuth(mediator, artist)}
+ render={({ is_followed }) => {
+ return (
+
+ {is_followed ? "Following" : "Follow"}
+
+ )
+ }}
+ />
+ }
+ />
+
+ )
+ })
+}
+
+const maxChars = {
+ xs: 350,
+ sm: 730,
+ md: 670,
+ lg: 660,
+ xl: 820,
+}
+
+const imageWidthSizes = {
+ xs: 320,
+ sm: 688,
+ md: 820,
+ lg: 944,
+ xl: 1112,
+}
+
+const imageHeightSizes = {
+ xs: 160,
+ sm: 250,
+}
+
+export const CollectionHeader: FC = ({ artworks, collection }) => {
+ const { user, mediator } = useSystemContext()
+ const hasMultipleArtists =
+ artworks.merchandisableArtists && artworks.merchandisableArtists.length > 1
+
+ const htmlUnsafeDescription = collection.description && (
+
+ {({ xs, sm, md, lg }) => {
+ const size = xs ? "xs" : sm ? "sm" : md ? "md" : lg ? "lg" : "xl"
+ const imageWidth = imageWidthSizes[size]
+ const smallerScreen = xs || sm
+ const imageHeight = smallerScreen
+ ? imageHeightSizes.xs
+ : imageHeightSizes.sm
+ const chars = maxChars[size]
+ const categoryTarget = `/collections#${slugify(collection.category)}`
+ const artistsCount = xs ? 9 : 12
+ const featuredArtists = featuredArtistsEntityCollection(
+ getFeaturedArtists(
+ artistsCount,
+ collection,
+ artworks.merchandisableArtists
+ ),
+ mediator,
+ user
+ )
+ const resizedHeaderImage =
+ collection.headerImage &&
+ resize(collection.headerImage, {
+ width: imageWidth * (xs ? 2 : 1),
+ height: imageHeight * (xs ? 2 : 1),
+ quality: 80,
+ convert_to: "jpg",
+ })
+
+ return (
+
+
+
+ {resizedHeaderImage ? (
+
+
+ ) : (
+
+
+
+
+
+
+
+ {collection.title}
+
+
+
+
+
+
+
+ {smallerScreen ? (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }}
+
+ )
+}
+
+const CollectionSingleImageHeader = styled(Box) <{
+ headerImageUrl: string
+ height: number
+}>`
+ position: relative;
+ background: ${color("black30")};
+ height: ${props => props.height}px;
+ background-image: url(${props => props.headerImageUrl});
+ background-size: cover;
+ background-position: center;
+
+ ${media.xs`
+ margin-left: -20px;
+ margin-right: -20px;
+ `};
+`
+export const Overlay = styled.div`
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background-image: linear-gradient(
+ to bottom,
+ rgba(0, 0, 0, 0),
+ rgba(0, 0, 0, 0.25)
+ );
+ z-index: 0;
+`
+
+const MetaContainer = styled(Box)`
+ position: relative;
+ z-index: 1;
+`
+
+const BreadcrumbContainer = styled(Sans)`
+ a {
+ text-decoration: none;
+ }
+`
+
+const ImageCaption = styled(Box)`
+ ${unica("s12")};
+ position: absolute;
+ bottom: 10px;
+ left: 20px;
+ right: 20px;
+ text-align: right;
+ color: ${color("white100")};
+ z-index: 7;
+ text-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
+`
+
+const ExtendedSerif = styled(Serif)`
+ div span {
+ span p {
+ display: inline;
+ }
+
+ div p {
+ display: inline;
+ ${unica("s12")};
+ }
+ }
+`
+
+export const CollectionFilterFragmentContainer = createFragmentContainer(
+ CollectionHeader,
+ {
+ collection: graphql`
+ fragment Header_collection on MarketingCollection {
+ category
+ credit
+ description
+ featuredArtistExclusionIds
+ headerImage
+ id
+ query {
+ artistIDs
+ }
+ slug
+ title
+ }
+ `,
+ artworks: graphql`
+ fragment Header_artworks on FilterArtworksConnection {
+ ...DefaultHeader_headerArtworks
+ merchandisableArtists {
+ slug
+ internalID
+ name
+ image {
+ resized(width: 45, height: 45, version: "square") {
+ url
+ }
+ }
+ birthday
+ nationality
+ ...FollowArtistButton_artist
+ }
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Collect/Routes/Collection/Components/__stories__/CollectionsHubRails.story.tsx b/src/v2/Apps/Collect/Routes/Collection/Components/__stories__/CollectionsHubRails.story.tsx
new file mode 100644
index 00000000000..d37c9cceaef
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collection/Components/__stories__/CollectionsHubRails.story.tsx
@@ -0,0 +1,63 @@
+import { Box } from "@artsy/palette"
+import { CollectionsHubRailsStoryQuery } from "v2/__generated__/CollectionsHubRailsStoryQuery.graphql"
+import { SystemContext } from "v2/Artsy"
+import { SystemQueryRenderer as QueryRenderer } from "v2/Artsy/Relay/SystemQueryRenderer"
+import React, { useContext } from "react"
+import { graphql } from "react-relay"
+import { storiesOf } from "storybook/storiesOf"
+import styled from "styled-components"
+import { CollectionsHubRailsContainer as CollectionsHubRails } from "../CollectionsHubRails"
+
+const RailsContainer = styled(Box)`
+ max-width: 1250px;
+`
+
+storiesOf("Apps/Collect/Collection/Components", module).add(
+ "Collection Hub Rails",
+ () => (
+
+
+
+
+ )
+)
+
+interface Props {
+ collectionID: string
+}
+
+export const CollectionHubRailsQueryRenderer: React.FC = ({
+ collectionID,
+}) => {
+ const { relayEnvironment } = useContext(SystemContext)
+ if (relayEnvironment) {
+ return (
+
+ environment={relayEnvironment}
+ variables={{
+ collectionID,
+ }}
+ query={graphql`
+ query CollectionsHubRailsStoryQuery($collectionID: String!) {
+ marketingCollection(slug: $collectionID) {
+ linkedCollections {
+ ...CollectionsHubRails_linkedCollections
+ }
+ }
+ }
+ `}
+ render={({ props }) => {
+ if (props) {
+ const { linkedCollections } = props.marketingCollection
+ return (props => ({
+ context_module: Schema.ContextModule.CollectionDescription,
+ context_page_owner_slug: props.collection && props.collection.slug,
+ context_page_owner_id: props.collection && props.collection.slug,
+}))
+export class CollectionApp extends Component {
+ collectionNotFound = collection => {
+ if (!collection) {
+ throw new HttpError(404)
+ }
+ }
+
+ UNSAFE_componentWillMount() {
+ this.collectionNotFound(this.props.collection)
+ }
+
+ render() {
+ const {
+ collection,
+ match: { location },
+ relay,
+ } = this.props
+ const {
+ title,
+ slug,
+ headerImage,
+ description,
+ fallbackHeaderImage,
+ artworksConnection,
+ descending_artworks,
+ ascending_artworks,
+ } = collection
+ const collectionHref = `${sd.APP_URL}/collection/${slug}`
+
+ const metadataDescription = description
+ ? `Buy, bid, and inquire on ${title} on Artsy. ` +
+ truncate(description, 158).text
+ : `Buy, bid, and inquire on ${title} on Artsy.`
+
+ const showCollectionHubs = collection.linkedCollections.length > 0
+
+ const socialImage =
+ headerImage ||
+ (fallbackHeaderImage?.edges &&
+ fallbackHeaderImage?.edges[0]?.node?.image?.resized.url)
+
+ return (
+ <>
+ {`${title} - For Sale on Artsy`}
+
+
+
+ {showCollectionHubs && (
+
+
+
+
+
+ {collection.linkedCollections.length === 0 && (
+ <>
+
+
+
+ )}
+
+
+
+
+ )
+ }
+}
+
+export const CollectionRefetchContainer = createRefetchContainer(
+ withSystemContext(CollectionApp),
+ {
+ collection: graphql`
+ fragment Collection_collection on MarketingCollection
+ @argumentDefinitions(
+ acquireable: { type: "Boolean" }
+ aggregations: { type: "[ArtworkAggregation]" }
+ atAuction: { type: "Boolean" }
+ color: { type: "String" }
+ forSale: { type: "Boolean" }
+ height: { type: "String" }
+ inquireableOnly: { type: "Boolean" }
+ majorPeriods: { type: "[String]" }
+ medium: { type: "String", defaultValue: "*" }
+ offerable: { type: "Boolean" }
+ page: { type: "Int" }
+ priceRange: { type: "String" }
+ sort: { type: "String", defaultValue: "-partner_updated_at" }
+ width: { type: "String" }
+ first: { type: "Int" }
+ ) {
+ ...Header_collection
+ description
+ headerImage
+ slug
+ title
+ query {
+ artist_id: artistID
+ gene_id: geneID
+ }
+ relatedCollections(size: 16) {
+ ...RelatedCollectionsRail_collections
+ }
+ linkedCollections {
+ ...CollectionsHubRails_linkedCollections
+ }
+ fallbackHeaderImage: artworksConnection(
+ aggregations: $aggregations
+ includeMediumFilterInAggregation: true
+ size: 1
+ first: 1
+ sort: "-decayed_merch"
+ ) {
+ edges {
+ node {
+ image {
+ resized(width: 600) {
+ url
+ }
+ }
+ }
+ }
+ }
+ artworksConnection(
+ aggregations: $aggregations
+ includeMediumFilterInAggregation: true
+ size: 20
+ first: 20
+ sort: "-decayed_merch"
+ ) {
+ ...Header_artworks
+ ...SeoProductsForArtworks_artworks
+ aggregations {
+ slice
+ counts {
+ value
+ name
+ count
+ }
+ }
+ }
+
+ #These two things are going to get highest price and lowest price of the artwork on the collection page.
+ descending_artworks: artworksConnection(
+ aggregations: $aggregations
+ includeMediumFilterInAggregation: true
+ first: 1
+ size: 1
+ sort: "sold,-has_price,-prices"
+ ) {
+ ...SeoProductsForCollections_descending_artworks
+ }
+
+ ascending_artworks: artworksConnection(
+ aggregations: $aggregations
+ includeMediumFilterInAggregation: true
+ first: 1
+ size: 1
+ sort: "sold,-has_price,prices"
+ ) {
+ ...SeoProductsForCollections_ascending_artworks
+ }
+
+ filtered_artworks: artworksConnection(
+ acquireable: $acquireable
+ aggregations: $aggregations
+ atAuction: $atAuction
+ color: $color
+ forSale: $forSale
+ height: $height
+ inquireableOnly: $inquireableOnly
+ majorPeriods: $majorPeriods
+ medium: $medium
+ offerable: $offerable
+ page: $page
+ priceRange: $priceRange
+ first: $first
+ sort: $sort
+ width: $width
+ ) {
+ id
+ ...ArtworkFilterArtworkGrid2_filtered_artworks
+ }
+ }
+ `,
+ },
+ CollectionAppQuery
+)
+
+// Top-level route needs to be exported for bundle splitting in the router
+export default CollectionRefetchContainer
diff --git a/src/v2/Apps/Collect/Routes/Collections/Components/CollectionsGrid.tsx b/src/v2/Apps/Collect/Routes/Collections/Components/CollectionsGrid.tsx
new file mode 100644
index 00000000000..a946d0185fb
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collections/Components/CollectionsGrid.tsx
@@ -0,0 +1,96 @@
+import React, { Component } from "react"
+import { slugify } from "underscore.string"
+import { crop } from "v2/Utils/resizer"
+import { Media } from "v2/Utils/Responsive"
+
+import {
+ Box,
+ EntityHeader,
+ Flex,
+ Sans,
+ Separator,
+ Spacer,
+} from "@artsy/palette"
+import { Router } from "found"
+import styled from "styled-components"
+
+export interface CollectionEntity {
+ title: string
+ headerImage?: string
+ slug: string
+}
+
+interface CollectionsGridProps {
+ collections: CollectionEntity[]
+ name?: string
+ router: Router
+}
+
+export class CollectionsGrid extends Component {
+ render() {
+ const { collections, name, router } = this.props
+ const hasShortRow = collections.length % 3 !== 0 // Preserve left align
+
+ return (
+
+
+ {name}
+
+
+
+ {[...collections] // needs to create a new array since the sort function modifies the array.
+ .sort((a, b) => a.title.localeCompare(b.title))
+ .map((collection, index) => {
+ const imageUrl =
+ collection.headerImage &&
+ crop(collection.headerImage, {
+ width: 50,
+ height: 50,
+ })
+
+ return (
+
+ {index === 0 &&
+ {index < 3 &&
+
+ {/* An empty space in initials to generate a blank avatar when there's no imageUrl */}
+ {
+ event.preventDefault()
+ router.push(`/collection/${collection.slug}`)
+ }}
+ />
+
+ )
+ })}
+
+ {hasShortRow && (
+
+ {(_, renderChildren) =>
+ renderChildren &&
+ )}
+
+
+ )
+ }
+}
+
+const CollectionsGridAnchor = styled.a`
+ display: block;
+ position: relative;
+ top: -90px;
+ visibility: hidden;
+`
diff --git a/src/v2/Apps/Collect/Routes/Collections/Components/__tests__/CollectionsGrid.jest.tsx b/src/v2/Apps/Collect/Routes/Collections/Components/__tests__/CollectionsGrid.jest.tsx
new file mode 100644
index 00000000000..f765745796e
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collections/Components/__tests__/CollectionsGrid.jest.tsx
@@ -0,0 +1,45 @@
+import { EntityHeader } from "@artsy/palette"
+import { CollectionsFixture } from "v2/Apps/__tests__/Fixtures/Collections"
+import { mount } from "enzyme"
+import React from "react"
+import { CollectionsGrid } from "../CollectionsGrid"
+
+describe("CollectionsGrid", () => {
+ const getWrapper = passedProps => {
+ return mount(
,
+ RouterContext: jest.requireActual("found").RouterContext,
+}))
+
+describe("CollectionApp", () => {
+ it("renders a relay tree correctly", async () => {
+ const getRelayWrapper = async () => {
+ const trackEvent = jest.fn()
+ const tracking = { trackEvent }
+ return await renderRelayTree({
+ Component: CollectionsApp,
+ componentProps: { tracking },
+ query: graphql`
+ query CollectionsAppTestQuery @raw_response_type {
+ marketingCategories {
+ ...Collections_marketingCategories
+ }
+ }
+ `,
+ mockData: {
+ marketingCategories: [
+ {
+ name: "Modern",
+ collections: [], // "Modern" exists to test sort order so no need to add collections
+ },
+ ...CategoriesFixture,
+ ],
+ } as CollectionsAppTestQueryRawResponse,
+ wrapper: children => {children} ,
+ })
+ }
+ const tree = await getRelayWrapper()
+
+ expect(tree.find(CollectionsGrid).length).toBe(4)
+ expect(tree.find(EntityHeader).length).toBe(10)
+ expect(tree.text()).toMatch("Abstract Art")
+ expect(tree.text()).toMatch("Keith Haring: Pop")
+ expect(tree.find(CollectionsGrid).get(0).props.name).toEqual("Abstract Art")
+ expect(tree.find(CollectionsGrid).get(1).props.name).toEqual(
+ "Contemporary Art"
+ )
+ expect(tree.find(CollectionsGrid).get(2).props.name).toEqual("Modern")
+ expect(tree.find(CollectionsGrid).get(3).props.name).toEqual("Street Art")
+
+ const breadCrumbList = tree.find(BreadCrumbList)
+
+ expect(breadCrumbList.props().items).toEqual([
+ { path: "/collections", name: "Collections" },
+ ])
+ })
+})
diff --git a/src/v2/Apps/Collect/Routes/Collections/__tests__/routes.jest.ts b/src/v2/Apps/Collect/Routes/Collections/__tests__/routes.jest.ts
new file mode 100644
index 00000000000..c7cdb71a0b2
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collections/__tests__/routes.jest.ts
@@ -0,0 +1,7 @@
+// TODO: add tests once collection aggregations are defined
+
+describe("routes", () => {
+ it("Renders Collections component", () => {
+ expect(true).toBeTruthy()
+ })
+})
diff --git a/src/v2/Apps/Collect/Routes/Collections/index.tsx b/src/v2/Apps/Collect/Routes/Collections/index.tsx
new file mode 100644
index 00000000000..ca6d8c5d3e3
--- /dev/null
+++ b/src/v2/Apps/Collect/Routes/Collections/index.tsx
@@ -0,0 +1,126 @@
+import { Box, Button, Flex, Sans, Serif } from "@artsy/palette"
+import { Collections_marketingCategories } from "v2/__generated__/Collections_marketingCategories.graphql"
+import { AppContainer } from "v2/Apps/Components/AppContainer"
+import { withSystemContext } from "v2/Artsy"
+import { FrameWithRecentlyViewed } from "v2/Components/FrameWithRecentlyViewed"
+import { BreadCrumbList } from "v2/Components/Seo"
+import { Link, Router } from "found"
+import React, { Component, useState } from "react"
+import { Meta, Title } from "react-head"
+import { createFragmentContainer, graphql } from "react-relay"
+import { TrackingProp } from "react-tracking"
+import { data as sd } from "sharify"
+import { CollectionEntity, CollectionsGrid } from "./Components/CollectionsGrid"
+
+interface CollectionsAppProps {
+ marketingCategories: Collections_marketingCategories
+ router: Router
+ tracking: TrackingProp
+}
+
+const META_DESCRIPTION =
+ "Discover collections of art curated by Artsy Specialists. From iconic artist series to trending design, shop " +
+ "collections on the world's largest online art marketplace."
+
+const isServer = typeof window === "undefined"
+
+export class CollectionsApp extends Component {
+ render() {
+ const { marketingCategories, router } = this.props
+
+ return (
+ <>
+ Collections | Artsy
+
+
+
+
+ Collections
+
+
+
+
+
+
+
+ {marketingCategories &&
+ [...marketingCategories] // creates a new array since the sort function modifies the array.
+ .sort((a, b) => a.name.localeCompare(b.name))
+ .map((category, index) => {
+ return (
+
+
+ )
+ })}
+
+
+
+ )
+ }
+}
+
+const CategoryItem = props => {
+ const [showAll, toggleShowAll] = useState(false)
+ const { category, router } = props
+ const { collections } = category
+ const truncatedCollections = collections.slice(0, 21)
+ const displayableCollections = (showAll || isServer
+ ? collections
+ : truncatedCollections) as CollectionEntity[]
+
+ return (
+ <>
+
+ toggleShowAll(true)}
+ >
+ More in {category.name}
+
+
+ )}
+
+ )
+}
+
+export const CollectionsAppFragmentContainer = createFragmentContainer(
+ withSystemContext(CollectionsApp),
+ {
+ marketingCategories: graphql`
+ fragment Collections_marketingCategories on MarketingCollectionCategory
+ @relay(plural: true) {
+ name
+ collections {
+ slug
+ headerImage
+ title
+ }
+ }
+ `,
+ }
+)
+
+// Top-level route needs to be exported for bundle splitting in the router
+export default CollectionsAppFragmentContainer
diff --git a/src/v2/Apps/Collect/Utils/urlBuilder.ts b/src/v2/Apps/Collect/Utils/urlBuilder.ts
new file mode 100644
index 00000000000..7cff54b1ea9
--- /dev/null
+++ b/src/v2/Apps/Collect/Utils/urlBuilder.ts
@@ -0,0 +1,23 @@
+import { ArtworkFilters } from "v2/Components/v2/ArtworkFilter/ArtworkFilterContext"
+import {
+ paramsToSnakeCase,
+ removeDefaultValues,
+} from "v2/Components/v2/ArtworkFilter/Utils/urlBuilder"
+import qs from "qs"
+
+export const buildUrlForCollectApp = (state: ArtworkFilters): string => {
+ const fragment = buildCollectUrlFragmentFromState(state)
+ const url = fragment ? `/collect${fragment}` : "/collect"
+ return url
+}
+
+const buildCollectUrlFragmentFromState = (state: ArtworkFilters): string => {
+ const { medium, ...params } = removeDefaultValues(state) as ArtworkFilters
+ const emptyOrSpecificMedium = medium ? `/${medium}` : ""
+
+ if (Object.keys(params).length === 0) {
+ return emptyOrSpecificMedium
+ }
+
+ return `${emptyOrSpecificMedium}?${qs.stringify(paramsToSnakeCase(params))}`
+}
diff --git a/src/v2/Apps/Collect/collectRoutes.tsx b/src/v2/Apps/Collect/collectRoutes.tsx
new file mode 100644
index 00000000000..ab838f2e7d8
--- /dev/null
+++ b/src/v2/Apps/Collect/collectRoutes.tsx
@@ -0,0 +1,120 @@
+import loadable from "@loadable/component"
+import { RouteConfig } from "found"
+import { graphql } from "react-relay"
+
+import { paramsToCamelCase } from "v2/Components/v2/ArtworkFilter/Utils/urlBuilder"
+import { CollectionAppQuery } from "./Routes/Collection/CollectionAppQuery"
+
+const CollectApp = loadable(() => import("./Routes/Collect"))
+const CollectionsApp = loadable(() => import("./Routes/Collections"))
+const CollectionApp = loadable(() => import("./Routes/Collection"))
+
+export const collectRoutes: RouteConfig[] = [
+ {
+ path: "/collect/:medium?",
+ getComponent: () => CollectApp,
+ prepare: () => {
+ CollectApp.preload()
+ },
+ prepareVariables: initializeVariablesWithFilterState,
+ query: graphql`
+ query collectRoutes_ArtworkFilterQuery(
+ $acquireable: Boolean
+ $aggregations: [ArtworkAggregation] = [TOTAL]
+ $artistID: String
+ $atAuction: Boolean
+ $attributionClass: [String]
+ $color: String
+ $forSale: Boolean
+ $height: String
+ $inquireableOnly: Boolean
+ $majorPeriods: [String]
+ $medium: String
+ $offerable: Boolean
+ $page: Int
+ $partnerID: ID
+ $priceRange: String
+ $sort: String
+ $keyword: String
+ $width: String
+ ) {
+ marketingHubCollections {
+ ...Collect_marketingHubCollections
+ }
+ filterArtworks: artworksConnection(
+ aggregations: $aggregations
+ sort: $sort
+ first: 30
+ ) {
+ ...SeoProductsForArtworks_artworks
+ }
+ viewer {
+ ...ArtworkFilter_viewer
+ @arguments(
+ acquireable: $acquireable
+ aggregations: $aggregations
+ artistID: $artistID
+ atAuction: $atAuction
+ attributionClass: $attributionClass
+ color: $color
+ forSale: $forSale
+ height: $height
+ inquireableOnly: $inquireableOnly
+ keyword: $keyword
+ majorPeriods: $majorPeriods
+ medium: $medium
+ offerable: $offerable
+ page: $page
+ partnerID: $partnerID
+ priceRange: $priceRange
+ sort: $sort
+ width: $width
+ )
+ }
+ }
+ `,
+ },
+ {
+ path: "/collections",
+ getComponent: () => CollectionsApp,
+ prepare: () => {
+ CollectionsApp.preload()
+ },
+ query: graphql`
+ query collectRoutes_MarketingCollectionsAppQuery {
+ marketingCategories @principalField {
+ ...Collections_marketingCategories
+ }
+ }
+ `,
+ },
+ {
+ path: "/collection/:slug",
+ getComponent: () => CollectionApp,
+ prepare: () => {
+ CollectionApp.preload()
+ },
+ prepareVariables: initializeVariablesWithFilterState,
+ query: CollectionAppQuery,
+ },
+]
+
+function initializeVariablesWithFilterState(params, props) {
+ const initialFilterState = props.location ? props.location.query : {}
+
+ if (params.medium) {
+ initialFilterState.medium = params.medium
+
+ if (props.location.query) {
+ props.location.query.medium = params.medium
+ }
+ }
+
+ const state = {
+ sort: "-decayed_merch",
+ ...paramsToCamelCase(initialFilterState),
+ ...params,
+ }
+
+ return state
+}
diff --git a/src/v2/Apps/Components/AppContainer.tsx b/src/v2/Apps/Components/AppContainer.tsx
new file mode 100644
index 00000000000..23eede8ddd3
--- /dev/null
+++ b/src/v2/Apps/Components/AppContainer.tsx
@@ -0,0 +1,18 @@
+import { Box, breakpoints } from "@artsy/palette"
+import React from "react"
+
+interface AppContainerProps {
+ children: React.ReactNode
+ maxWidth?: number | string
+}
+
+export const AppContainer: React.FC = ({
+ children,
+ maxWidth = breakpoints.xl,
+}) => {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/src/v2/Apps/Components/AppShell.tsx b/src/v2/Apps/Components/AppShell.tsx
new file mode 100644
index 00000000000..ea2541f1a21
--- /dev/null
+++ b/src/v2/Apps/Components/AppShell.tsx
@@ -0,0 +1,62 @@
+import { Box } from "@artsy/palette"
+import { NetworkOfflineMonitor } from "v2/Artsy/Router/NetworkOfflineMonitor"
+import { findCurrentRoute } from "v2/Artsy/Router/Utils/findCurrentRoute"
+import { useMaybeReloadAfterInquirySignIn } from "v2/Artsy/Router/Utils/useMaybeReloadAfterInquirySignIn"
+import { NavBar } from "v2/Components/NavBar"
+import { Match } from "found"
+import { isFunction } from "lodash"
+import React, { useEffect } from "react"
+import createLogger from "v2/Utils/logger"
+
+const logger = createLogger("Apps/Components/AppShell")
+
+interface AppShellProps {
+ children: React.ReactNode
+ match: Match
+}
+
+export const AppShell: React.FC = props => {
+ const { children, match } = props
+ const routeConfig = findCurrentRoute(match)
+
+ /**
+ * Check to see if a route has a prepare key; if so call it. Used typically to
+ * preload bundle-split components (import()) while the route is fetching data
+ * in the background.
+ */
+ useEffect(() => {
+ if (isFunction(routeConfig.prepare)) {
+ try {
+ routeConfig.prepare()
+ } catch (error) {
+ logger.error(error)
+ }
+ }
+ }, [routeConfig])
+
+ /**
+ * Let our end-to-end tests know that the app is hydrated and ready to go
+ */
+ useEffect(() => {
+ document.body.setAttribute("data-test", "AppReady")
+ }, [])
+
+ // TODO: When old backbone inquiry modal goes away, this can be removed
+ useMaybeReloadAfterInquirySignIn()
+
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+
+ )
+}
diff --git a/src/v2/Apps/Components/HorizontalPadding.tsx b/src/v2/Apps/Components/HorizontalPadding.tsx
new file mode 100644
index 00000000000..844d6fa03ad
--- /dev/null
+++ b/src/v2/Apps/Components/HorizontalPadding.tsx
@@ -0,0 +1,27 @@
+import { media, space } from "@artsy/palette"
+import styled, { css } from "styled-components"
+import { SpaceProps } from "styled-system"
+
+export interface HorizontalPaddingProps {
+ px?: SpaceProps["px"]
+}
+
+export const HorizontalPadding = styled.div`
+ ${p =>
+ media.xs`
+ padding-right: ${(p.px[0] && space(p.px[0])) || 0}px;
+ padding-left: ${(p.px[0] && space(p.px[0])) || 0}px;
+ `};
+ ${p =>
+ p.px[1] &&
+ css`
+ padding-right: ${space(p.px[1])}px;
+ padding-left: ${space(p.px[1])}px;
+ `};
+ margin-right: auto;
+ margin-left: auto;
+`
+
+HorizontalPadding.defaultProps = {
+ px: [2, 4],
+}
diff --git a/src/v2/Apps/Components/__tests__/AppShell.jest.tsx b/src/v2/Apps/Components/__tests__/AppShell.jest.tsx
new file mode 100644
index 00000000000..3ed5d9c4025
--- /dev/null
+++ b/src/v2/Apps/Components/__tests__/AppShell.jest.tsx
@@ -0,0 +1,81 @@
+import { Mediator, SystemContextProvider } from "v2/Artsy"
+import { buildAppRoutes } from "v2/Artsy/Router/buildAppRoutes"
+import { buildClientApp } from "v2/Artsy/Router/client"
+import { mount } from "enzyme"
+import React from "react"
+
+jest.mock("v2/Components/NavBar/NavBar", () => ({
+ NavBar: () =>
,
+}))
+
+jest.mock("v2/Artsy/Router/Boot", () => ({
+ Boot: ({ children }) => children,
+}))
+
+jest.mock("v2/Artsy/Analytics/useTracking", () => ({
+ useTracking: () => ({
+ trackEvent: x => x,
+ }),
+}))
+
+describe("AppShell", () => {
+ const mediator: Mediator = {
+ trigger: jest.fn(),
+ on: jest.fn(),
+ off: jest.fn(),
+ }
+
+ it("renders a NavBar", async () => {
+ const { ClientApp } = await buildClientApp({
+ history: {
+ protocol: "memory",
+ },
+ initialRoute: "/foo",
+ routes: buildAppRoutes([
+ {
+ routes: [
+ {
+ path: "/foo",
+ Component: () =>
,
+ },
+ ],
+ },
+ ]),
+ })
+
+ const wrapper = mount(
+
+
+ )
+ expect(wrapper.find("AppShell").length).toEqual(1)
+ })
+
+ it("calls the matched routes `prepare` function if found", async done => {
+ const { ClientApp } = await buildClientApp({
+ history: {
+ protocol: "memory",
+ },
+ initialRoute: "/foo",
+ routes: buildAppRoutes([
+ {
+ routes: [
+ {
+ path: "/foo",
+ Component: () =>
,
+ prepare: () => {
+ done()
+ },
+ },
+ ],
+ },
+ ]),
+ })
+
+ mount(
+
+
+ )
+ })
+})
diff --git a/src/v2/Apps/Conversation/Components/Conversation.tsx b/src/v2/Apps/Conversation/Components/Conversation.tsx
new file mode 100644
index 00000000000..be9b563cb7f
--- /dev/null
+++ b/src/v2/Apps/Conversation/Components/Conversation.tsx
@@ -0,0 +1,256 @@
+import {
+ Box,
+ Flex,
+ Image,
+ Link,
+ Sans,
+ Serif,
+ Spacer,
+ color,
+} from "@artsy/palette"
+import { Conversation_conversation } from "v2/__generated__/Conversation_conversation.graphql"
+import { DateTime } from "luxon"
+import React, { useEffect } from "react"
+import { RelayProp, createFragmentContainer } from "react-relay"
+import { graphql } from "relay-runtime"
+import { MessageFragmentContainer as Message } from "./Message"
+import { Reply } from "./Reply"
+import { TimeSince, fromToday } from "./TimeSince"
+import { UpdateConversation } from "../Mutation/UpdateConversationMutation"
+
+interface ItemProps {
+ item: Conversation_conversation["items"][0]["item"]
+}
+
+const Item: React.FC = props => {
+ const { item } = props
+ if (item.__typename === "Artwork") {
+ return (
+
+
+
+ {item.artistNames}
+
+
+ {item.title} / {item.date}
+
+
+
+
+ )
+ } else if (item.__typename === "Show") {
+ // it's a partnerShow
+ return (
+
+
+
+
+
+ {item.fair.name}
+
+
+
+ )
+ } else {
+ return null
+ }
+}
+
+type Message = Conversation_conversation["messages"]["edges"][number]["node"]
+/**
+ * Combines messages into groups of messages sent by the same party and
+ * separated out into different groups if sent across multiple days
+ * @param messages Messages in the conversation
+ */
+const groupMessages = (messages: Message[]): Message[][] => {
+ if (messages.length === 0) {
+ return []
+ }
+ // Make a copy of messages
+ const remainingMessages = [...messages]
+ const groups = [[remainingMessages.pop()]]
+ while (remainingMessages.length > 0) {
+ const lastGroup = groups[groups.length - 1]
+ const lastMessage = lastGroup[lastGroup.length - 1]
+ const currentMessage = remainingMessages.pop()
+
+ const lastMessageCreatedAt = DateTime.fromISO(lastMessage.createdAt)
+ const currentMessageCreatedAt = DateTime.fromISO(currentMessage.createdAt)
+ const sameDay = lastMessageCreatedAt.hasSame(currentMessageCreatedAt, "day")
+ const today = fromToday(currentMessageCreatedAt)
+
+ if (sameDay && !today) {
+ lastGroup.push(currentMessage)
+ } else if (!today) {
+ groups.push([currentMessage])
+ } else if (lastMessage.isFromUser !== currentMessage.isFromUser) {
+ groups.push([currentMessage])
+ } else {
+ lastGroup.push(currentMessage)
+ }
+ }
+ return groups
+}
+
+export interface ConversationProps {
+ conversation: Conversation_conversation
+ relay: RelayProp
+}
+
+const Conversation: React.FC = props => {
+ const { conversation, relay } = props
+
+ useEffect(() => {
+ UpdateConversation(relay.environment, conversation)
+ }, [conversation, relay.environment, conversation.lastMessageID])
+
+ return (
+
+
+
+ {conversation.items.map((i, idx) => (
+
+
+ )
+ })}
+
+
+
+ )
+}
+
+export const ConversationFragmentContainer = createFragmentContainer(
+ Conversation,
+ {
+ conversation: graphql`
+ fragment Conversation_conversation on Conversation
+ @argumentDefinitions(
+ count: { type: "Int", defaultValue: 30 }
+ after: { type: "String" }
+ ) {
+ id
+ internalID
+ from {
+ name
+ email
+ }
+ to {
+ name
+ initials
+ }
+ initialMessage
+ lastMessageID
+ unread
+ messages(first: $count, after: $after, sort: DESC)
+ @connection(key: "Messages_messages", filters: []) {
+ pageInfo {
+ startCursor
+ endCursor
+ hasPreviousPage
+ hasNextPage
+ }
+ edges {
+ node {
+ id
+ internalID
+ createdAt
+ isFromUser
+ ...Message_message
+ }
+ }
+ }
+ items {
+ item {
+ __typename
+ ... on Artwork {
+ id
+ date
+ title
+ artistNames
+ href
+ image {
+ url(version: ["large"])
+ }
+ }
+ ... on Show {
+ id
+ fair {
+ name
+ }
+ name
+ coverImage {
+ url
+ }
+ }
+ }
+ }
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Conversation/Components/ConversationSnippet.tsx b/src/v2/Apps/Conversation/Components/ConversationSnippet.tsx
new file mode 100644
index 00000000000..db273bc1f60
--- /dev/null
+++ b/src/v2/Apps/Conversation/Components/ConversationSnippet.tsx
@@ -0,0 +1,190 @@
+import { Box, Flex, Link, Row, Sans, Separator, color } from "@artsy/palette"
+import { ConversationSnippet_conversation } from "v2/__generated__/ConversationSnippet_conversation.graphql"
+import {
+ ImageWithFallback,
+ renderFallbackImage,
+} from "v2/Apps/Artist/Routes/AuctionResults/Components/ImageWithFallback"
+import React from "react"
+import { createFragmentContainer } from "react-relay"
+import { graphql } from "relay-runtime"
+import styled from "styled-components"
+import { TimeSince } from "./TimeSince"
+import { Truncator } from "v2/Components/Truncator"
+
+const StyledImage = styled(ImageWithFallback)`
+ object-fit: cover;
+ height: 80px;
+ width: 80px;
+`
+const StyledFlex = styled(Flex)`
+ float: left;
+`
+const TimeSinceFlex = styled(Flex)`
+ white-space: nowrap;
+ padding-left: 10px;
+`
+
+const StyledSans = styled(Sans)`
+ word-break: break-all;
+`
+
+const TruncatedTitle = styled(Sans)`
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: 350px;
+
+ @media (max-width: 570px) {
+ max-width: 270px;
+ }
+`
+const PurpleCircle = styled.div`
+ width: 10px;
+ height: 10px;
+ background-color: ${color("purple100")};
+ border-radius: 50%;
+ margin-right: 5px;
+`
+
+interface ConversationSnippetProps {
+ conversation: ConversationSnippet_conversation
+}
+
+const ConversationSnippet: React.FC = props => {
+ const conversation = props.conversation
+ // If we cannot resolve items in the conversation, such as deleted fair booths
+ // prior to snapshotting them at time of inquiry (generally older conversations),
+ // just skip over the entire conversation.
+ if (conversation.items.length === 0) {
+ console.warn(
+ `Unable to load items for conversation with ID ${conversation.internalID}`
+ )
+ return null
+ }
+
+ const item = conversation.items[0].item
+
+ let imageURL
+
+ if (item.__typename === "Artwork") {
+ imageURL = item.image && item.image.url
+ } else if (item.__typename === "Show") {
+ imageURL = item.coverImage && item.coverImage.url
+ }
+
+ const partnerName = conversation.to.name
+
+ const conversationText =
+ conversation.lastMessage && conversation.lastMessage.replace(/\n/g, " ")
+
+ return (
+
+
+
+ {conversation.unread &&
+
+ {imageURL ? (
+ (
+
+ {renderFallbackImage()}
+
+ )}
+ />
+ ) : (
+
+ {renderFallbackImage()}
+
+ )}
+
+
+
+
+
+
+
+ {partnerName}
+
+
+ {conversation.messagesConnection.totalCount}
+
+
+
+
+
+
+
+
+ {conversationText}
+
+
+
+
+
+
+
+ )
+}
+
+export const ConversationSnippetFragmentContainer = createFragmentContainer(
+ ConversationSnippet,
+ {
+ conversation: graphql`
+ fragment ConversationSnippet_conversation on Conversation {
+ internalID
+ to {
+ name
+ }
+ lastMessage
+ lastMessageAt
+ unread
+ items {
+ item {
+ __typename
+ ... on Artwork {
+ date
+ title
+ artistNames
+ image {
+ url
+ }
+ }
+ ... on Show {
+ fair {
+ name
+ }
+ name
+ coverImage {
+ url
+ }
+ }
+ }
+ }
+ messagesConnection {
+ totalCount
+ }
+ }
+ `,
+ }
+)
diff --git a/src/v2/Apps/Conversation/Components/Conversations.tsx b/src/v2/Apps/Conversation/Components/Conversations.tsx
new file mode 100644
index 00000000000..85dcf5ce059
--- /dev/null
+++ b/src/v2/Apps/Conversation/Components/Conversations.tsx
@@ -0,0 +1,91 @@
+import { Box, media, color } from "@artsy/palette"
+import { Conversations_me } from "v2/__generated__/Conversations_me.graphql"
+import React from "react"
+import { createRefetchContainer, graphql, RelayRefetchProp } from "react-relay"
+import { ConversationSnippetFragmentContainer as ConversationSnippet } from "./ConversationSnippet"
+import { NoMessages } from "./NoMessages"
+import styled from "styled-components"
+
+const Container = styled(Box)`
+ min-height: 100vh;
+ border-right: 1px solid ${color("black10")};
+ ${media.xs`
+ border-right: none;
+ `};
+`
+
+interface ConversationsProps {
+ me: Conversations_me
+ relay: RelayRefetchProp
+}
+
+const Conversations: React.FC = props => {
+ const { me } = props
+ const conversations = me.conversationsConnection.edges
+ return (
+ <>
+
+ {conversations.length ? (
+
+ {conversations.map(edge => (
+
+ ) : (
+
+
+ )
+}
+
+export const ConversationsFragmentContainer = createRefetchContainer(
+ Conversations as React.ComponentType,
+ {
+ me: graphql`
+ fragment Conversations_me on Me
+ @argumentDefinitions(
+ first: { type: "Int", defaultValue: 10 }
+ last: { type: "Int" }
+ after: { type: "String" }
+ before: { type: "String" }
+ ) {
+ conversationsConnection(
+ first: $first
+ last: $last
+ before: $before
+ after: $after
+ ) {
+ edges {
+ cursor
+ node {
+ id
+ internalID
+ lastMessage
+ ...ConversationSnippet_conversation
+ }
+ }
+ pageInfo {
+ endCursor
+ hasNextPage
+ hasPreviousPage
+ startCursor
+ }
+ }
+ }
+ `,
+ },
+ graphql`
+ query ConversationsQuery(
+ $first: Int!
+ $last: Int
+ $after: String
+ $before: String
+ ) {
+ me {
+ ...Conversations_me
+ @arguments(first: $first, last: $last, after: $after, before: $before)
+ }
+ }
+ `
+)
diff --git a/src/v2/Apps/Conversation/Components/Details.tsx b/src/v2/Apps/Conversation/Components/Details.tsx
new file mode 100644
index 00000000000..9d7079d79ce
--- /dev/null
+++ b/src/v2/Apps/Conversation/Components/Details.tsx
@@ -0,0 +1,49 @@
+import { Flex, FlexProps, color, EntityHeader, Separator } from "@artsy/palette"
+import React, { FC } from "react"
+import styled from "styled-components"
+import { createFragmentContainer, graphql } from "react-relay"
+import { Details_conversation } from "v2/__generated__/Details_conversation.graphql"
+
+const BorderedFlex = styled(Flex)`
+ border-left: 1px solid ${color("black10")};
+ flex-shrink: 0;
+ margin-left: -1px;
+`
+
+interface DetailsProps extends FlexProps {
+ conversation: Details_conversation
+}
+
+export const Details: FC = ({ conversation, ...props }) => {
+ return (
+
+
+ )
+}
+
+export const DetailsFragmentContainer = createFragmentContainer(Details, {
+ conversation: graphql`
+ fragment Details_conversation on Conversation
+ @argumentDefinitions(
+ count: { type: "Int", defaultValue: 30 }
+ after: { type: "String" }
+ ) {
+ to {
+ name
+ initials
+ }
+ }
+ `,
+})
diff --git a/src/v2/Apps/Conversation/Components/InboxHeaders.tsx b/src/v2/Apps/Conversation/Components/InboxHeaders.tsx
new file mode 100644
index 00000000000..e7f070b388e
--- /dev/null
+++ b/src/v2/Apps/Conversation/Components/InboxHeaders.tsx
@@ -0,0 +1,127 @@
+import React, { FC } from "react"
+import styled from "styled-components"
+import {
+ Flex,
+ ArrowLeftIcon,
+ color,
+ Sans,
+ InfoCircleIcon,
+ Separator,
+ FlexProps,
+} from "@artsy/palette"
+import { RouterLink } from "v2/Artsy/Router/RouterLink"
+import { Media } from "v2/Utils/Responsive"
+
+interface BorderedFlexProps extends FlexProps {
+ bordered?: boolean
+}
+const BorderedFlex = styled(Flex) `
+ ${props =>
+ props.bordered ? `border-right: 1px solid ${color("black10")};` : ""}
+ height: 100%;
+`
+
+const ConversationHeaderContainer = styled(Flex)`
+ position: fixed;
+ top: 59px;
+ left: 0;
+ right: 0;
+ border-bottom: 1px solid ${color("black10")};
+ background: white;
+`
+
+interface ConversationHeaderProps {
+ partnerName: string
+}
+export const ConversationHeader: FC = ({
+ partnerName,
+}) => {
+ return (
+
+
+
+
+ Conversation with {partnerName}
+
+
+ )
+}
+
+export const MobileInboxHeader: FC = props => {
+ return (
+
+
+ Inbox
+
+
+ )
+}
+
+export const InboxHeader: FC = props => {
+ return (
+
+
+ Inbox
+
+
+ )
+}
+
+export const DetailsHeader: FC = props => {
+ return (
+
+
+ Details
+
+
+ )
+}
+
+export const FullHeader: FC> = props => {
+ return (
+
+
+ {props.partnerName ? (
+
+ Conversation with {props.partnerName}
+
+ ) : (
+ <>{props.children}
+ )}
+
+
+
+
+
+
+ )
+}
diff --git a/src/v2/Apps/Conversation/Components/Message.tsx b/src/v2/Apps/Conversation/Components/Message.tsx
new file mode 100644
index 00000000000..dd844a6bb90
--- /dev/null
+++ b/src/v2/Apps/Conversation/Components/Message.tsx
@@ -0,0 +1,113 @@
+import {
+ Box,
+ BoxProps,
+ Flex,
+ Image,
+ Link,
+ Sans,
+ Serif,
+ Spacer,
+} from "@artsy/palette"
+import { Message_message } from "v2/__generated__/Message_message.graphql"
+import React from "react"
+import { createFragmentContainer } from "react-relay"
+import { graphql } from "relay-runtime"
+import { TimeSince } from "./TimeSince"
+
+interface AttachmentProps {
+ item: Message_message["attachments"][0]
+}
+
+export const Attachment: React.FC = props => {
+ const { item } = props
+ if (item.contentType.startsWith("image")) {
+ return (
+
+ {item.fileName}
+
+
+ )
+ } else if (item.contentType === "application/pdf") {
+ return (
+
+
+ )
+ } else {
+ return null
+ }
+}
+interface MessageProps extends Omit {
+ message: Message_message
+ initialMessage?: string
+ isFirst: boolean
+ showTimeSince?: boolean
+}
+const Message: React.FC = props => {
+ const { message, initialMessage, isFirst, showTimeSince, ...boxProps } = props
+ const { isFromUser, body } = message
+ const text = isFirst ? initialMessage : body
+ // const createdAt = DateTime.fromISO(message.createdAt).toRelative()
+ //
+ // From: {message.from.name} - {createdAt}
+ //
+ // {isFirst ? initialMessage : message.body}
+ // {message.attachments && message.attachments.length > 0 && (
+ //
+ // Attachments
+ //
+ // )}
+ // {message.attachments.map(a => (
+ //
+
+ {text}
+
+
+ {showTimeSince && (
+
+
+ You don't have any messages yet.
+
+
+ Explore Artworks
+
+
+ )
+}
diff --git a/src/v2/Apps/Conversation/Components/Reply.tsx b/src/v2/Apps/Conversation/Components/Reply.tsx
new file mode 100644
index 00000000000..e3fe61fff80
--- /dev/null
+++ b/src/v2/Apps/Conversation/Components/Reply.tsx
@@ -0,0 +1,101 @@
+import { Button, color, Flex, media, FlexProps } from "@artsy/palette"
+import { Conversation_conversation } from "v2/__generated__/Conversation_conversation.graphql"
+import React, { useRef, useState } from "react"
+import { Environment } from "react-relay"
+import styled from "styled-components"
+import { SendConversationMessage } from "../Mutation/SendConversationMessage"
+import { right, RightProps } from "styled-system"
+
+const StyledFlex = styled(Flex) `
+ ${right};
+ border-top: 1px solid ${color("black10")};
+ position: fixed;
+ background: white;
+ bottom: 0;
+ left: 375px;
+ ${media.xs`
+ width: 100%;
+ left: 0;
+ `}
+`
+
+const FullWidthFlex = styled(Flex) <{ height?: string }>`
+ div {
+ width: 100%;
+ height: ${({ height }) => height};
+ min-height: 40px;
+ }
+`
+
+const StyledTextArea = styled.textarea<{ height?: string }>`
+ border: none;
+ width: 100%;
+ height: ${({ height }) => height};
+ max-height: calc(60vh - 145px);
+ resize: none;
+ min-height: 40px;
+ font-size: 16px;
+
+ ${media.xs`
+ max-height: calc(60vh - 115px);
+ `};
+`
+const StyledButton = styled(Button)``
+
+interface ReplyProps {
+ conversation: Conversation_conversation
+ environment: Environment
+}
+
+export const Reply: React.FC = props => {
+ const { environment, conversation } = props
+ const [bodyText, setBodyText] = useState("")
+ const [buttonDisabled, setButtonDisabled] = useState(true)
+ const textArea = useRef()
+
+ return (
+
+
+