Merge pull request #6538 from artsy/staging

Deploy

package.json

@@ -64,8 +64,9 @@
     "@artsy/backbone-mixins": "2.0.0",
     "@artsy/cohesion": "1.44.0",
     "@artsy/express-reloadable": "1.4.8",
+    "@artsy/fresnel": "1.3.0",
     "@artsy/gemup": "0.1.0",
-    "@artsy/palette": "13.11.0",
+    "@artsy/palette": "13.13.0",
     "@artsy/passport": "1.5.0",
     "@artsy/reaction": "28.11.0",
     "@artsy/stitch": "6.1.6",

src/lib/setup.js

@@ -270,6 +270,7 @@ export default function (app) {
         "@artsy/reaction",
         "@artsy/stitch",
         "@artsy/palette",
+        "@artsy/fresnel",
       ],
     })
 

src/mobile/collections/install_shots.coffee

@@ -1,6 +1,6 @@
 _ = require 'underscore'
 Backbone = require 'backbone'
-InstallShot = require '../models/install_shot'
+{ InstallShot } = require '../models/install_shot'
 { Fetch } = require '@artsy/backbone-mixins'
 { API_URL } = require('sharify').data
 

src/mobile/models/install_shot.ts

@@ -1,4 +1,3 @@
-let InstallShot
 const AdditionalImage = require("./additional_image.coffee")
 
-module.exports = InstallShot = class InstallShot extends AdditionalImage {}
+export class InstallShot extends AdditionalImage {}

src/v2/Apps/Consign/Components/HowToSell.tsx

@@ -1,46 +1,67 @@
 import React from "react"
 import { Box, Button, EditIcon, Flex, Separator, Text } from "@artsy/palette"
+import { SectionContainer } from "v2/Apps/Artist/Routes/Consign/Components/SectionContainer"
+import { RouterLink } from "v2/Artsy/Router/RouterLink"
+import { Media } from "v2/Utils/Responsive"
 
 export const HowToSell: React.FC = () => {
+  const navigateTo = "/consign/submission"
   return (
-    <Box>
-      <Box>
-        <Text variant="title">
-          3 Simple Steps:
-          <br /> How to sell artwork from your collectiony
-        </Text>
-        <Separator />
-      </Box>
+    <SectionContainer>
+      <Text
+        width="100%"
+        textAlign={["center", "left"]}
+        mb={2}
+        variant="largeTitle"
+      >
+        3 Simple Steps:
+        <br /> How to sell artwork from your collection
+      </Text>
+      <Separator />
 
       <Flex
         flexDirection={["column", "row"]}
         alignItems="center"
-        justifyContent="center"
+        justifyContent="space-between"
+        pt={[1, 4]}
       >
         <Section
-          icon={<EditIcon width={30} height={30} />}
-          text="Submit once"
-          description="Submit your artwork details and images. Artsy will review and
-            approve qualified submissions for consignment."
+          icon={<EditIcon width={50} height={50} />}
+          text="Submit the Artwork"
+          description="Submit your artwork details and images. Artsy will review and approve qualified submissions."
         />
         <Section
-          icon={<EditIcon width={30} height={30} />}
-          text="Submit once"
-          description="Submit your artwork details and images. Artsy will review and
-            approve qualified submissions for consignment."
+          icon={<EditIcon width={50} height={50} />}
+          text="Receive Multiple Offers"
+          description="If your work is accepted, you’ll receive competitive consignment offers from auction houses, galleries, and collectors."
         />
         <Section
-          icon={<EditIcon width={30} height={30} />}
-          text="Submit once"
-          description="Submit your artwork details and images. Artsy will review and
-            approve qualified submissions for consignment."
+          icon={<EditIcon width={50} height={50} />}
+          text="Match and Sell"
+          description="With our specialists’ expert guidance, evaluate your offers, choose the best one for you, and sell your work. We’ll help you ship it safely."
         />
       </Flex>
-
-      <Box>
-        <Button size="large">Submit your artwork</Button>
+      <Box width="100%" textAlign="center">
+        <RouterLink to={navigateTo}>
+          <Media greaterThanOrEqual="sm">
+            <Button variant="primaryBlack" size="large" mt={6}>
+              Submit your artwork
+            </Button>
+          </Media>
+          <Media lessThan="sm">
+            <Button
+              variant="primaryBlack"
+              size="large"
+              mt={6}
+              block
+              width="100%"
+            >
+              Submit your artwork
+            </Button>
+          </Media>
+        </RouterLink>
       </Box>
-    </Box>
+    </SectionContainer>
   )
 }
 
@@ -50,13 +71,20 @@ const Section: React.FC<{
   description: string
 }> = ({ icon, text, description }) => {
   return (
-    <Box width={["100%", "25%"]} height={["100%", 170]} my={[3, 0]} mx={2}>
+    <Box
+      width={["100%", "25%"]}
+      height={["100%", 170]}
+      my={[1, 0]}
+      textAlign="center"
+    >
       <Box>{icon}</Box>
-      <Box mt={1} mb={2}>
-        <Text variant="mediumText">{text}</Text>
+      <Box mt={[0, 1]} mb={[0, 2]}>
+        <Text variant="subtitle">{text}</Text>
       </Box>
       <Box>
-        <Text variant="mediumText">{description}</Text>
+        <Text variant="text" color="black60">
+          {description}
+        </Text>
       </Box>
     </Box>
   )

src/v2/Apps/Consign/Components/SellArtDifferently.tsx

@@ -5,7 +5,12 @@ import { SectionContainer } from "v2/Apps/Artist/Routes/Consign/Components/Secti
 export const SellArtDifferently: React.FC = () => {
   return (
     <SectionContainer>
-      <Text textAlign={["center", "left"]} mb={2} variant="largeTitle">
+      <Text
+        width="100%"
+        textAlign={["center", "left"]}
+        mb={2}
+        variant="largeTitle"
+      >
         Selling Art Differently
       </Text>
       <Separator />

src/v2/Apps/Consign/ConsignApp.tsx

@@ -29,11 +29,11 @@ const ConsignApp = props => {
 
         <AppContainer maxWidth="100%">
           <Header />
-          <GetPriceEstimate />
           <SellArtDifferently />
+          <GetPriceEstimate />
+          <HowToSell />
 
           <HorizontalPadding>
-            <HowToSell />
             <ConsignInDemandNow />
             <SoldRecently />
             <ReadMore />

src/v2/Apps/Show/Components/ShowViewingRoom.tsx

@@ -1,22 +1,82 @@
 import React from "react"
-import { Box, BoxProps, ResponsiveBox, Text } from "@artsy/palette"
+import { Box, BoxProps, MediumCard, ResponsiveBox, Text } from "@artsy/palette"
+import { createFragmentContainer, graphql } from "react-relay"
+import { ShowViewingRoom_show } from "v2/__generated__/ShowViewingRoom_show.graphql"
+import { RouterLink } from "v2/Artsy/Router/RouterLink"
+import { crop } from "v2/Utils/resizer"
+import { getTagProps } from "v2/Components/ViewingRoomCard"
 
-interface ShowViewingRoom extends BoxProps {}
+interface ShowViewingRoomProps extends BoxProps {
+  show: ShowViewingRoom_show
+}
+
+export const ShowViewingRoom: React.FC<ShowViewingRoomProps> = ({
+  show,
+  ...rest
+}) => {
+  const [{ node: viewingRoom }] = show.viewingRoomsConnection.edges
+
+  const thumbnail = crop(viewingRoom.image.imageURLs.normalized, {
+    width: 900,
+    height: 1200,
+  })
 
-export const ShowViewingRoom = ({ ...rest }) => {
   return (
     <Box {...rest}>
       <Text variant="mediumText" mb={1}>
         Viewing Room
       </Text>
 
-      <ResponsiveBox
-        bg="black10"
-        borderRadius={4}
-        maxWidth="100%"
-        aspectWidth={3}
-        aspectHeight={4}
-      />
+      <ResponsiveBox maxWidth="100%" aspectWidth={3} aspectHeight={4}>
+        <RouterLink to={viewingRoom.href}>
+          <MediumCard
+            width="100%"
+            height="100%"
+            image={thumbnail}
+            title={viewingRoom.title}
+            subtitle={show.partner?.name}
+            tag={getTagProps(
+              viewingRoom.status,
+              viewingRoom.distanceToOpen,
+              viewingRoom.distanceToClose
+            )}
+          />
+        </RouterLink>
+      </ResponsiveBox>
     </Box>
   )
 }
+
+export const ShowViewingRoomFragmentContainer = createFragmentContainer(
+  ShowViewingRoom,
+  {
+    show: graphql`
+      fragment ShowViewingRoom_show on Show {
+        partner {
+          ... on Partner {
+            name
+          }
+          ... on ExternalPartner {
+            name
+          }
+        }
+        viewingRoomsConnection {
+          edges {
+            node {
+              status
+              distanceToOpen(short: true)
+              distanceToClose(short: true)
+              title
+              href
+              image {
+                imageURLs {
+                  normalized
+                }
+              }
+            }
+          }
+        }
+      }
+    `,
+  }
+)

src/v2/Apps/Show/ShowApp.tsx

@@ -4,14 +4,13 @@ import { createFragmentContainer, graphql } from "react-relay"
 import { AppContainer } from "v2/Apps/Components/AppContainer"
 import { HorizontalPadding } from "v2/Apps/Components/HorizontalPadding"
 import { Footer } from "v2/Components/Footer"
-import { ErrorPage } from "v2/Components/ErrorPage"
 import { Box, Column, GridColumns, Separator } from "@artsy/palette"
 import { ShowMetaFragmentContainer as ShowMeta } from "v2/Apps/Show/Components/ShowMeta"
 import { ShowHeaderFragmentContainer as ShowHeader } from "./Components/ShowHeader"
 import { ShowAboutFragmentContainer as ShowAbout } from "./Components/ShowAbout"
 import { ShowInstallShotsFragmentContainer as ShowInstallShots } from "./Components/ShowInstallShots"
 import { ShowContextualLinkFragmentContainer as ShowContextualLink } from "./Components/ShowContextualLink"
-import { ShowViewingRoom } from "./Components/ShowViewingRoom"
+import { ShowViewingRoomFragmentContainer as ShowViewingRoom } from "./Components/ShowViewingRoom"
 import { ShowApp_show } from "v2/__generated__/ShowApp_show.graphql"
 import { ShowArtworksRefetchContainer as ShowArtworks } from "./Components/ShowArtworks"
 import { ForwardLink } from "v2/Components/Links/ForwardLink"
@@ -38,9 +37,7 @@ const FullScreenSeparator = styled(Separator)`
 export const ShowApp: React.FC<ShowAppProps> = ({ show }) => {
   const { contextPageOwnerSlug, contextPageOwnerType } = useAnalyticsContext()
 
-  if (!show) return <ErrorPage code={404} />
-
-  const hasViewingRoom = false // TODO
+  const hasViewingRoom = show.viewingRoomIDs.length > 0
   const hasAbout = !!show.about
   const hasWideHeader =
     (hasAbout && hasViewingRoom) || (!hasAbout && !hasViewingRoom)
@@ -97,7 +94,7 @@ export const ShowApp: React.FC<ShowAppProps> = ({ show }) => {
 
               {hasViewingRoom && (
                 <Column span={5} start={8}>
-                  <ShowViewingRoom />
+                  <ShowViewingRoom show={show} />
                 </Column>
               )}
             </GridColumns>
@@ -143,11 +140,13 @@ export default createFragmentContainer(ShowApp, {
       internalID
       slug
       about: description
+      viewingRoomIDs
       ...ShowContextualLink_show
       ...ShowHeader_show
       ...ShowAbout_show
       ...ShowMeta_show
       ...ShowInstallShots_show
+      ...ShowViewingRoom_show
       ...ShowArtworks_show
         @arguments(
           acquireable: $acquireable
@@ -165,7 +164,6 @@ export default createFragmentContainer(ShowApp, {
           sizes: $sizes
           sort: $sort
         )
-
       ...ShowContextCard_show
     }
   `,

src/v2/Apps/Show/ShowSubApp.tsx

@@ -5,7 +5,6 @@ import { Separator } from "@artsy/palette"
 import { ShowSubApp_show } from "v2/__generated__/ShowSubApp_show.graphql"
 import { HorizontalPadding } from "v2/Apps/Components/HorizontalPadding"
 import { Footer } from "v2/Components/Footer"
-import { ErrorPage } from "v2/Components/ErrorPage"
 import { BackLink } from "v2/Components/Links/BackLink"
 import { ShowMetaFragmentContainer as ShowMeta } from "./Components/ShowMeta"
 import {
@@ -20,8 +19,6 @@ interface ShowAppProps {
 const ShowApp: React.FC<ShowAppProps> = ({ children, show }) => {
   const { contextPageOwnerSlug, contextPageOwnerType } = useAnalyticsContext()
 
-  if (!show) return <ErrorPage code={404} />
-
   return (
     <>
       <ShowMeta show={show} />