Show prices on default view of artist auction results.

src/Apps/Artist/Routes/AuctionResults/ArtistAuctionResultItem.tsx

@@ -1,4 +1,4 @@
-import { Intent, ContextModule } from "@artsy/cohesion"
+import { ContextModule, Intent } from "@artsy/cohesion"
 import {
   ArrowDownIcon,
   ArrowUpIcon,
@@ -26,13 +26,18 @@ import {
   ImageWithFallback,
   renderFallbackImage,
 } from "./Components/ImageWithFallback"
+import { useAuctionResultsFilterContext } from "./AuctionResultsFilterContext"
+import { isEqual } from "lodash"
+import { auctionResultsFilterResetState } from "./AuctionResultsFilterContext"
 
 export interface Props extends SystemContextProps {
   expanded?: boolean
   auctionResult: ArtistAuctionResultItem_auctionResult
   index: number
   mediator?: Mediator
   lastChild: boolean
+  filtersHaveUpdated: boolean
+  paginated: boolean
 }
 
 const FullWidthBorderBox = styled(BorderBox)`
@@ -70,6 +75,13 @@ export const ArtistAuctionResultItem: SFC<Props> = props => {
     })
   }
 
+  // Is current filter state different from the default (reset) state?
+  const filterContext = useAuctionResultsFilterContext()
+  const filtersHaveUpdated = !isEqual(
+    filterContext.filters,
+    auctionResultsFilterResetState
+  )
+
   return (
     <>
       <Media at="xs">
@@ -80,10 +92,16 @@ export const ArtistAuctionResultItem: SFC<Props> = props => {
               expanded={expanded}
               mediator={mediator}
               user={user}
+              filtersHaveUpdated={filtersHaveUpdated}
             />
           </Row>
           <Box>
-            {renderSmallCollapse({ ...props, expanded }, user, mediator)}
+            {renderSmallCollapse(
+              { ...props, expanded },
+              user,
+              mediator,
+              filtersHaveUpdated
+            )}
           </Box>
         </FullWidthBorderBox>
       </Media>
@@ -97,11 +115,17 @@ export const ArtistAuctionResultItem: SFC<Props> = props => {
                 expanded={expanded}
                 mediator={mediator}
                 user={user}
+                filtersHaveUpdated={filtersHaveUpdated}
               />
             </Row>
           </Box>
           <Box>
-            {renderLargeCollapse({ ...props, expanded }, user, mediator)}
+            {renderLargeCollapse(
+              { ...props, expanded },
+              user,
+              mediator,
+              filtersHaveUpdated
+            )}
           </Box>
         </FullWidthBorderBox>
       </Media>
@@ -183,7 +207,9 @@ const LargeAuctionItem: SFC<Props> = props => {
               saleDate,
               props.user,
               props.mediator,
-              "lg"
+              "lg",
+              props.filtersHaveUpdated,
+              props.paginated
             )}
           </Flex>
           <Flex width="10%" justifyContent="flex-end">
@@ -221,7 +247,15 @@ const ExtraSmallAuctionItem: SFC<Props> = props => {
         )}
       </Flex>
       <Flex ml={2} flexDirection="column" justifyContent="center" width="100%">
-        {renderPricing(salePrice, saleDate, props.user, props.mediator, "xs")}
+        {renderPricing(
+          salePrice,
+          saleDate,
+          props.user,
+          props.mediator,
+          "xs",
+          props.filtersHaveUpdated,
+          props.paginated
+        )}
         <Sans size="2" weight="medium" color="black60">
           {title}
           {title && date_text && ", "}
@@ -298,9 +332,22 @@ const getProps = (props: Props) => {
   }
 }
 
-const renderPricing = (salePrice, saleDate, user, mediator, size) => {
+const renderPricing = (
+  salePrice,
+  saleDate,
+  user,
+  mediator,
+  size,
+  filtersHaveUpdated,
+  paginated
+) => {
   const textSize = size === "xs" ? "2" : "3t"
-  if (user) {
+
+  // If user is logged in we show prices. Otherwise we show prices only for the default view - on page 1 and filters not changed.
+  // Ideally we get current page number from filter context 'page' property but somehow it is always '1'.
+  // So we resort to pagination detection. If user has paginated at all, prices will be hidden. even if user comes back to page 1.
+  // TODO: Fix filter context so its 'page' property has the current page number, then change this code.
+  if (user || (!filtersHaveUpdated && !paginated)) {
     const textAlign = size === "xs" ? "left" : "right"
     const dateOfSale = DateTime.fromISO(saleDate)
     const now = DateTime.local()
@@ -396,9 +443,17 @@ const renderEstimate = (estimatedPrice, user, mediator, size) => {
   }
 }
 
-const renderRealizedPrice = (estimatedPrice, user, mediator, size) => {
+const renderRealizedPrice = (
+  estimatedPrice,
+  user,
+  mediator,
+  size,
+  filtersHaveUpdated,
+  paginated
+) => {
   const justifyContent = size === "xs" ? "flex-start" : "flex-end"
-  if (user) {
+  // Show prices if user is logged in. Otherwise, show prices only on default view - filters at default and no pagination has happened.
+  if (user || (!filtersHaveUpdated && !paginated)) {
     return (
       <Flex justifyContent={justifyContent}>
         {estimatedPrice && (
@@ -432,7 +487,7 @@ const renderRealizedPrice = (estimatedPrice, user, mediator, size) => {
   }
 }
 
-const renderLargeCollapse = (props, user, mediator) => {
+const renderLargeCollapse = (props, user, mediator, filtersHaveUpdated) => {
   const {
     expanded,
     auctionResult: {
@@ -503,7 +558,14 @@ const renderLargeCollapse = (props, user, mediator) => {
             </Box>
           </Col>
           <Col sm={4} pr="4.5%">
-            {renderRealizedPrice(salePrice, user, mediator, "lg")}
+            {renderRealizedPrice(
+              salePrice,
+              user,
+              mediator,
+              "lg",
+              filtersHaveUpdated,
+              props.paginated
+            )}
           </Col>
         </Row>
 
@@ -526,7 +588,7 @@ const renderLargeCollapse = (props, user, mediator) => {
   )
 }
 
-const renderSmallCollapse = (props, user, mediator) => {
+const renderSmallCollapse = (props, user, mediator, filtersHaveUpdated) => {
   const {
     expanded,
     auctionResult: {
@@ -583,7 +645,14 @@ const renderSmallCollapse = (props, user, mediator) => {
             </Sans>
           </Col>
           <Col xs={8}>
-            {renderRealizedPrice(salePrice, user, mediator, "xs")}
+            {renderRealizedPrice(
+              salePrice,
+              user,
+              mediator,
+              "xs",
+              filtersHaveUpdated,
+              props.paginated
+            )}
           </Col>
         </Row>
 

src/Apps/Artist/Routes/AuctionResults/ArtistAuctionResults.tsx

@@ -2,7 +2,7 @@ import { Col, Row } from "@artsy/palette"
 import { ArtistAuctionResults_artist } from "__generated__/ArtistAuctionResults_artist.graphql"
 import { PaginationFragmentContainer as Pagination } from "Components/Pagination"
 import React, { useState } from "react"
-import { createRefetchContainer, graphql, RelayRefetchProp } from "react-relay"
+import { RelayRefetchProp, createRefetchContainer, graphql } from "react-relay"
 import useDeepCompareEffect from "use-deep-compare-effect"
 import { AuctionResultItemFragmentContainer as AuctionResultItem } from "./ArtistAuctionResultItem"
 import { TableSidebar } from "./Components/TableSidebar"
@@ -50,6 +50,9 @@ const AuctionResultsContainer: React.FC<AuctionResultsProps> = ({
     allowEmptyCreatedDates,
   } = filterContext.filters
 
+  // Count number of times user paginated.
+  const [paginated, togglePaginated] = useState(false)
+
   const loadNext = () => {
     const { hasNextPage, endCursor } = pageInfo
 
@@ -60,6 +63,7 @@ const AuctionResultsContainer: React.FC<AuctionResultsProps> = ({
 
   const loadAfter = cursor => {
     setIsLoading(true)
+    togglePaginated(true)
 
     relay.refetch(
       {
@@ -154,6 +158,8 @@ const AuctionResultsContainer: React.FC<AuctionResultsProps> = ({
               index={index}
               auctionResult={node}
               lastChild={index === auctionResultsLength - 1}
+              filtersHaveUpdated={false}
+              paginated={paginated}
             />
           </React.Fragment>
         )

src/Apps/Artist/Routes/AuctionResults/AuctionResultsFilterContext.tsx

@@ -71,7 +71,7 @@ export type SharedAuctionResultsFilterContextProps = Pick<
   onChange?: (filterState) => void
 }
 
-let auctionResultsFilterResetState: AuctionResultsFilters = initialAuctionResultsFilterState
+export let auctionResultsFilterResetState: AuctionResultsFilters = initialAuctionResultsFilterState
 
 export const AuctionResultsFilterContextProvider: React.FC<SharedAuctionResultsFilterContextProps & {
   children: React.ReactNode

src/Apps/Artist/Routes/AuctionResults/__tests__/AuctionResults.test.tsx

@@ -62,6 +62,12 @@ describe("AuctionResults", () => {
       expect(wrapper.html()).toContain("Showing 830 results")
     })
 
+    it("renders either realized price or price not avail", () => {
+      expect(wrapper.html()).toContain(
+        "Price not available" || "Realized price"
+      )
+    })
+
     it("renders proper select options", () => {
       const html = wrapper.find("SelectSmall").html()
       expect(html).toContain("Most recent")
@@ -117,10 +123,21 @@ describe("AuctionResults", () => {
             })
           )
         })
+
+        it("re-shows sign up to see price", () => {
+          const pagination = wrapper.find("Pagination")
+          pagination
+            .find("button")
+            .at(2)
+            .simulate("click")
+          wrapper.update()
+          const html = wrapper.html()
+          expect(html).toContain("Sign up to see price")
+        })
       })
       describe("filters", () => {
         describe("medium filter", () => {
-          it("triggers relay refetch with medium list", done => {
+          it("triggers relay refetch with medium list, and re-shows sign up to see price", done => {
             const filter = wrapper.find("MediumFilter")
 
             const checkboxes = filter.find("Checkbox")
@@ -171,13 +188,17 @@ describe("AuctionResults", () => {
                   allowEmptyCreatedDates: true,
                 },
               })
+
+              wrapper.update()
+              const html = wrapper.html()
+              expect(html).toContain("Sign up to see price")
+
               done()
             })
           })
         })
         describe("auction house filter", () => {
-          // TODO: Re-enable once we uncollapse auction house filters
-          it.skip("triggers relay refetch with organization list", done => {
+          it("triggers relay refetch with organization list, and re-shows sign up to see price", done => {
             const filter = wrapper.find("AuctionHouseFilter")
 
             const checkboxes = filter.find("Checkbox")
@@ -209,12 +230,17 @@ describe("AuctionResults", () => {
                   organizations: ["Phillips"],
                 })
               )
+
+              wrapper.update()
+              const html = wrapper.html()
+              expect(html).toContain("Sign up to see price")
+
               done()
             })
           })
         })
         describe("size filter", () => {
-          it("triggers relay refetch with size list and tracks events", done => {
+          it("triggers relay refetch with size list and tracks events, and re-shows sign up to see price", done => {
             const filter = wrapper.find("SizeFilter")
 
             const checkboxes = filter.find("Checkbox")
@@ -266,13 +292,17 @@ describe("AuctionResults", () => {
                 },
               })
 
+              wrapper.update()
+              const html = wrapper.html()
+              expect(html).toContain("Sign up to see price")
+
               done()
             })
           })
         })
         describe("year created filter", () => {
           const value = v => ({ target: { value: `${v}` } })
-          it("triggers relay refetch with created years and tracks events", () => {
+          it("triggers relay refetch with created years and tracks events, and re-shows sign up to see price", () => {
             const filter = wrapper.find("YearCreated")
             const selects = filter.find("select")
 
@@ -292,12 +322,16 @@ describe("AuctionResults", () => {
                 latestCreatedYear: 1973,
               })
             )
+
+            wrapper.update()
+            const html = wrapper.html()
+            expect(html).toContain("Sign up to see price")
           })
         })
       })
 
       describe("sort", () => {
-        it("triggers relay refetch with correct params", done => {
+        it("triggers relay refetch with correct params, and re-shows sign up to see price", done => {
           const sort = wrapper.find("SortSelect SelectSmall")
 
           sort
@@ -313,6 +347,11 @@ describe("AuctionResults", () => {
                 sort: "ESTIMATE_AND_DATE_DESC",
               })
             )
+
+            wrapper.update()
+            const html = wrapper.html()
+            expect(html).toContain("Sign up to see price")
+
             done()
           })
         })