Deploy (#7641)

* draft: Added A-Z letters to artists nav bar on hover

* refactor: ArtistsLetterNav props

* Aligned 'View all artists' and 'Browse by name' lines. Widened letters

* feat: Added A-Z letters to mobile

* feature: Webpack Chunking

* Reduces the number of sub KiB bundles by using V2 application scope as
  the common denominator.
* Restricts bundles to 240 KiB unzipped
* Cleans up legacy imports accidentally included by the orders page.

* GRO-336: Implement IP address tracking solution in Force  (#7582)

* Extract local for initial values

* Sort formik bag

* Extract locals for error messages

* Sort things when you can

* Simplify terms checkbox

* Simplify email checkbox

* Collapse sign up options when possible

* Split up the terms labels

* Grab ip address for sign up lookup

* Update tests for sign up form

* Added TODO and moved scoped out Sign Up tests that will be covered in Cyprus Integration testing

* Added readonly

* Updated FormSwitcher jest tests for new SignUpFormQueryRenderer

* Update name of sharify helper

* Provide fallback for request ip

* Mock misbehaving render

Co-authored-by: Jon Allured <[email protected]>

* feat: Add postie tracking pixel (#7640)

* chore(deps): update codecov orb from 1.2.1 to v1.2.2

* chore(deps): update dep typescript from 4.2.4 to v4.3.2

* refactor: Renamed styled component and changed usage of NavLink component to JSX instead of calling like a function

* Use partnerArtist artwork connection for loading artist's artworks

* Added extra 10px of space above letters section on mobile

* Added key prop to NavLink components

* Updated tests

* chore: adds seo meta tags (#7639)

* Revert "chore: adds seo meta tags (#7639)"

This reverts commit 6107bdc.

* fix: prevent events duplications shows tab (#7647)

* Remove an event from upcoming/current events if it displays in the banner; Fix null check errors

* Add generated files

Co-authored-by: Ivan Badyulya <[email protected]>

* fix: SEO meta for Buyer Guarantee (#7648)

* chore: adds seo meta tags

* fix: trim whitespace from meta description

Co-authored-by: nastassia <[email protected]>
Co-authored-by: Cameron Rollheiser <[email protected]>
Co-authored-by: AL_Sutherland <[email protected]>
Co-authored-by: Jon Allured <[email protected]>
Co-authored-by: Christopher Pappas <[email protected]>
Co-authored-by: Renovate Bot <[email protected]>
Co-authored-by: Kirill Zubarau <[email protected]>
Co-authored-by: Ashley Jelks <[email protected]>
Co-authored-by: Sarah Weir <[email protected]>
Co-authored-by: Ivan <[email protected]>
Co-authored-by: Ivan Badyulya <[email protected]>
Co-authored-by: Joey Aghion <[email protected]>

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2.1
 orbs:
   artsy-remote-docker: artsy/[email protected]
   aws-s3: circleci/[email protected]
-  codecov: codecov/[email protected].1
+  codecov: codecov/[email protected].2
   hokusai: artsy/[email protected]
   horizon: artsy/[email protected]
   node: artsy/[email protected]

package.json

@@ -54,7 +54,7 @@
     "test:ci:mocha": "NODE_ENV=test yarn mocha src/**/*.test.js src/**/*.test.ts",
     "type-check": "tsc",
     "unlink-all": "yalc remove --all && yarn --check-files",
-    "stats": "NODE_ENV=production BUILD_CLIENT=true node --max_old_space_size=4096 -r dotenv/config -r @babel/register node_modules/.bin/webpack --profile --json --config ./webpack > stats.json",
+    "stats:assets": "WEBPACK_STATS=normal NODE_ENV=production BUILD_CLIENT=true node --max_old_space_size=4096 -r dotenv/config -r @babel/register node_modules/.bin/webpack --profile --json --config ./webpack > stats.json",
     "storybook": "start-storybook -p 6006",
     "webpack": "node --max_old_space_size=4096 -r dotenv/config -r @babel/register node_modules/.bin/webpack --config ./webpack"
   },
@@ -110,7 +110,6 @@
     "cheerio": "0.22.0",
     "classnames": "2.2.6",
     "compression": "1.7.2",
-    "concurrently": "3.5.1",
     "connect-timeout": "1.9.0",
     "cookie-parser": "1.4.3",
     "cookie-session": "2.0.0-beta.3",
@@ -373,7 +372,7 @@
     "stylus-loader": "3.0.2",
     "supertest": "2.0.1",
     "terser-webpack-plugin": "4.1.0",
-    "typescript": "4.2.4",
+    "typescript": "4.3.2",
     "typescript-styled-plugin": "0.15.0",
     "vscode-apollo-relay": "1.5.1",
     "webpack": "4.44.1",

src/desktop/apps/consign/components/create_account/__tests__/CreateAccount.jest.tsx

@@ -9,12 +9,17 @@ import CreateAccount, {
 import { ModalHeader } from "v2/Components/Modal/ModalHeader"
 import { LoginForm } from "v2/Components/Authentication/Desktop/LoginForm"
 import { ForgotPasswordForm } from "v2/Components/Authentication/Desktop/ForgotPasswordForm"
-import { SignUpForm } from "v2/Components/Authentication/Desktop/SignUpForm"
+import { SignUpFormQueryRenderer } from "v2/Components/Authentication/Desktop/SignUpForm"
 import { ModalType } from "v2/Components/Authentication/Types"
 
 jest.mock("v2/Artsy/SystemContext", () => ({
   SystemContextProvider: ({ children }) => children,
   withSystemContext: Component => Component,
+  useContext: Component => Component,
+}))
+
+jest.mock("v2/Components/Authentication/Desktop/SignUpForm", () => ({
+  SignUpFormQueryRenderer: () => null,
 }))
 
 jest.mock("desktop/apps/authentication/helpers", () => ({
@@ -66,7 +71,7 @@ describe("React components", () => {
       it("the signup form", () => {
         const wrapper = getWrapper()
         expect(wrapper.find(ModalHeader).at(0).text()).toBe("Create an account")
-        expect(wrapper.find(SignUpForm).length).toBe(1)
+        expect(wrapper.find(SignUpFormQueryRenderer).length).toBe(1)
       })
     })
   })

src/desktop/components/main_layout/templates/scripts.jade

@@ -122,6 +122,10 @@ if !sd.THIRD_PARTIES_DISABLED
     analytics.load("#{sd.SEGMENT_WRITE_KEY}");
     }}();
 
+if !sd.THIRD_PARTIES_DISABLED
+  script( type="text/javascript" ).
+    ;(function(z,i,p,c,o,d,e){z[c]||(z[c]=function(){(z[c].q=z[c].q||[]).push(arguments)},z[c].q=z[c].q||[],d=i.createElement(p),d.async=1,d.src=o,e=i.getElementsByTagName(p)[0],e.parentNode.insertBefore(d,e))})(window,document,"script","letterpress","//scripts.postie.com/exxiuhdt/lp.1.js");window.letterpress('trackPageView');
+
 //- Wire up sharify
 if sharify
   != sharify.script()

src/lib/middleware/bootstrapSharifyAndContextLocalsMiddleware.ts

@@ -60,6 +60,9 @@ export function bootstrapSharifyAndContextLocalsMiddleware(
 
   updateSharifyAndContext(res, "IS_GOOGLEBOT", Boolean(ua.match(/Googlebot/i)))
 
+  const reqIp = req.ip || ""
+  updateSharifyAndContext(res, "IP_ADDRESS", reqIp)
+
   // Required to know the hashed dll name.try
   updateSharifyAndContext(
     res,

src/typings/sharify.d.ts

@@ -40,6 +40,7 @@ declare module "sharify" {
       readonly IMAGE_LAZY_LOADING: boolean
       IS_GOOGLEBOT: boolean
       IS_MOBILE: boolean
+      readonly IP_ADDRESS: string
       readonly METAPHYSICS_ENDPOINT: string
       readonly NODE_ENV: string
       readonly NOTIFICATION_COUNT: string

src/v2/Apps/Artist/artistRoutes.tsx

@@ -59,30 +59,56 @@ graphql`
   }
 `
 
-const ArtistApp = loadable(() => import("./ArtistApp"), {
-  resolveComponent: component => component.ArtistAppFragmentContainer,
-})
-const OverviewRoute = loadable(() => import("./Routes/Overview"), {
-  resolveComponent: component => component.OverviewRouteFragmentContainer,
-})
-const WorksForSaleRoute = loadable(() => import("./Routes/Works"), {
-  resolveComponent: component => component.WorksRouteFragmentContainer,
-})
-const AuctionResultsRoute = loadable(() => import("./Routes/AuctionResults"), {
-  resolveComponent: component => component.AuctionResultsRouteFragmentContainer,
-})
-const ConsignRoute = loadable(() => import("./Routes/Consign"), {
-  resolveComponent: component => component.ConsignRouteFragmentContainer,
-})
-const CVRoute = loadable(() => import("./Routes/CV"), {
-  resolveComponent: component => component.CVRouteFragmentContainer,
-})
-const ArticlesRoute = loadable(() => import("./Routes/Articles"), {
-  resolveComponent: component => component.ArticlesRouteFragmentContainer,
-})
-const ShowsRoute = loadable(() => import("./Routes/Shows"), {
-  resolveComponent: component => component.ShowsRouteFragmentContainer,
-})
+const ArtistApp = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./ArtistApp"),
+  {
+    resolveComponent: component => component.ArtistAppFragmentContainer,
+  }
+)
+const OverviewRoute = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./Routes/Overview"),
+  {
+    resolveComponent: component => component.OverviewRouteFragmentContainer,
+  }
+)
+const WorksForSaleRoute = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./Routes/Works"),
+  {
+    resolveComponent: component => component.WorksRouteFragmentContainer,
+  }
+)
+const AuctionResultsRoute = loadable(
+  () =>
+    import(/* webpackChunkName: "artistBundle" */ "./Routes/AuctionResults"),
+  {
+    resolveComponent: component =>
+      component.AuctionResultsRouteFragmentContainer,
+  }
+)
+const ConsignRoute = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./Routes/Consign"),
+  {
+    resolveComponent: component => component.ConsignRouteFragmentContainer,
+  }
+)
+const CVRoute = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./Routes/CV"),
+  {
+    resolveComponent: component => component.CVRouteFragmentContainer,
+  }
+)
+const ArticlesRoute = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./Routes/Articles"),
+  {
+    resolveComponent: component => component.ArticlesRouteFragmentContainer,
+  }
+)
+const ShowsRoute = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./Routes/Shows"),
+  {
+    resolveComponent: component => component.ShowsRouteFragmentContainer,
+  }
+)
 
 // Artist pages tend to load almost instantly, so just preload it up front
 if (typeof window !== "undefined") {

src/v2/Apps/ArtistSeries/artistSeriesRoutes.tsx

@@ -5,9 +5,12 @@ import { paramsToCamelCase } from "v2/Components/ArtworkFilter/Utils/urlBuilder"
 import { getENV } from "v2/Utils/getENV"
 import { allowedFilters } from "v2/Components/ArtworkFilter/Utils/allowedFilters"
 
-const ArtistSeriesApp = loadable(() => import("./ArtistSeriesApp"), {
-  resolveComponent: component => component.ArtistSeriesAppFragmentContainer,
-})
+const ArtistSeriesApp = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./ArtistSeriesApp"),
+  {
+    resolveComponent: component => component.ArtistSeriesAppFragmentContainer,
+  }
+)
 
 export const artistSeriesRoutes: AppRouteConfig[] = [
   {

src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx

@@ -12,7 +12,7 @@ export const ArtistsLetterNav: React.FC<ArtistsLetterNavProps> = ({
   ...rest
 }) => {
   return (
-    <Flex flexWrap="wrap" justifyContent={["flex-start", "flex-end"]}>
+    <Flex flexWrap="wrap" justifyContent={["flex-start", "flex-end"]} {...rest}>
       {LETTERS.map((letter, i) => {
         return (
           <Text key={letter} variant="md" color="black60">
@@ -42,6 +42,7 @@ const Letter = styled(RouterLink)<RouterLinkProps>`
   text-align: center;
   text-decoration: none;
   transition: color 250ms;
+  color: ${themeGet("colors.black60")};
 
   &:hover {
     text-decoration: underline;

src/v2/Apps/Artists/artistsRoutes.tsx

@@ -2,16 +2,23 @@ import loadable from "@loadable/component"
 import { graphql } from "react-relay"
 import { AppRouteConfig } from "v2/Artsy/Router/Route"
 
-const ArtistsApp = loadable(() => import("./ArtistsApp"), {
-  resolveComponent: component => component.ArtistsApp,
-})
+const ArtistsApp = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./ArtistsApp"),
+  {
+    resolveComponent: component => component.ArtistsApp,
+  }
+)
 
-const ArtistsIndexRoute = loadable(() => import("./Routes/ArtistsIndex"), {
-  resolveComponent: component => component.ArtistsIndexFragmentContainer,
-})
+const ArtistsIndexRoute = loadable(
+  () => import(/* webpackChunkName: "artistBundle" */ "./Routes/ArtistsIndex"),
+  {
+    resolveComponent: component => component.ArtistsIndexFragmentContainer,
+  }
+)
 
 const ArtistsByLetterRoute = loadable(
-  () => import("./Routes/ArtistsByLetter"),
+  () =>
+    import(/* webpackChunkName: "artistBundle" */ "./Routes/ArtistsByLetter"),
   {
     resolveComponent: component => component.ArtistsByLetterFragmentContainer,
   }

src/v2/Apps/Artwork/Components/ArtworkDetails/index.tsx

@@ -117,7 +117,6 @@ export const ArtworkDetailsQueryRenderer = ({
   artworkID: string
 }) => {
   const { relayEnvironment } = useContext(SystemContext)
-
   return (
     <QueryRenderer<ArtworkDetailsQuery>
       environment={relayEnvironment}

src/v2/Apps/Artwork/artworkRoutes.tsx

@@ -2,9 +2,12 @@ import loadable from "@loadable/component"
 import { graphql } from "react-relay"
 import { AppRouteConfig } from "v2/Artsy/Router/Route"
 
-const ArtworkApp = loadable(() => import("./ArtworkApp"), {
-  resolveComponent: component => component.ArtworkAppFragmentContainer,
-})
+const ArtworkApp = loadable(
+  () => import(/* webpackChunkName: "artworkBundle" */ "./ArtworkApp"),
+  {
+    resolveComponent: component => component.ArtworkAppFragmentContainer,
+  }
+)
 
 export const artworkRoutes: AppRouteConfig[] = [
   {

src/v2/Apps/Auction/auctionRoutes.tsx

@@ -9,15 +9,25 @@ import { AppRouteConfig } from "v2/Artsy/Router/Route"
 
 const logger = createLogger("Apps/Auction/routes")
 
-const AuctionFAQRoute = loadable(() => import("./Components/AuctionFAQ"), {
-  resolveComponent: component => component.AuctionFAQFragmentContainer,
-})
-const ConfirmBidRoute = loadable(() => import("./Routes/ConfirmBid"), {
-  resolveComponent: component => component.ConfirmBidRouteFragmentContainer,
-})
-const RegisterRoute = loadable(() => import("./Routes/Register"), {
-  resolveComponent: component => component.RegisterRouteFragmentContainer,
-})
+const AuctionFAQRoute = loadable(
+  () =>
+    import(/* webpackChunkName: "auctionBundle" */ "./Components/AuctionFAQ"),
+  {
+    resolveComponent: component => component.AuctionFAQFragmentContainer,
+  }
+)
+const ConfirmBidRoute = loadable(
+  () => import(/* webpackChunkName: "auctionBundle" */ "./Routes/ConfirmBid"),
+  {
+    resolveComponent: component => component.ConfirmBidRouteFragmentContainer,
+  }
+)
+const RegisterRoute = loadable(
+  () => import(/* webpackChunkName: "auctionBundle" */ "./Routes/Register"),
+  {
+    resolveComponent: component => component.RegisterRouteFragmentContainer,
+  }
+)
 
 export const auctionRoutes: AppRouteConfig[] = [
   {

src/v2/Apps/Auctions/auctionsRoutes.tsx

@@ -5,9 +5,12 @@ import { CurrentAuctionsPaginationContainer } from "./Routes/CurrentAuctions"
 import { PastAuctionsPaginationContainer } from "./Routes/PastAuctions"
 import { UpcomingAuctionsPaginationContainer } from "./Routes/UpcomingAuctions"
 
-const AuctionsApp = loadable(() => import("./AuctionsApp"), {
-  resolveComponent: component => component.AuctionsAppFragmentContainer,
-})
+const AuctionsApp = loadable(
+  () => import(/* webpackChunkName: "auctionBundle" */ "./AuctionsApp"),
+  {
+    resolveComponent: component => component.AuctionsAppFragmentContainer,
+  }
+)
 
 export const auctionsRoutes: AppRouteConfig[] = [
   {

src/v2/Apps/BuyerGuarantee/Components/BuyerGuaranteeMeta.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+import { Meta, Title, Link } from "react-head"
+import { getENV } from "v2/Utils/getENV"
+import { cropped } from "v2/Utils/resized"
+
+export const BuyerGuaranteeMeta: React.FC = () => {
+  const title = "The Artsy Guarantee - Authenticity and Secure Payment"
+  const href = `${getENV("APP_URL")}/buyer-guarantee`
+  const description =
+    "Artsy is the safest place to buy the art you love. Every purchase made exclusively with Artsy’s secure checkout benefits from our full suite of buyer protections."
+  const src = cropped("http://files.artsy.net/buyerGuaranteeHeroImage.jpg", {
+    width: 1600,
+    height: 800,
+  })
+
+  return (
+    <>
+      <Title>{title}</Title>
+      <Meta property="og:title" content={title} />
+
+      {description && (
+        <>
+          <Meta name="description" content={description} />
+          <Meta property="og:description" content={description} />
+          <Meta property="twitter:description" content={description} />
+        </>
+      )}
+
+      {href && (
+        <>
+          <Link rel="canonical" href={href} />
+          <Meta property="og:url" content={href} />
+        </>
+      )}
+
+      {src && (
+        <>
+          <Meta property="twitter:card" content="summary_large_image" />
+          <Meta property="og:image" content={src} />
+        </>
+      )}
+
+      {!src && <Meta property="twitter:card" content="summary" />}
+
+      <Meta property="twitter:site" content="@artsy" />
+      <Meta property="og:type" content="website" />
+      <Meta name="robots" content="noindex, nofollow" />
+    </>
+  )
+}

src/v2/Apps/BuyerGuarantee/Routes/BuyerGuaranteeIndex.tsx

@@ -32,6 +32,7 @@ import { Feature } from "../Components/Feature"
 import { MOBILE_NAV_HEIGHT, NAV_BAR_HEIGHT } from "v2/Components/NavBar"
 import { scrollIntoView } from "v2/Utils/scrollHelpers"
 import { useMatchMedia } from "v2/Utils/Hooks/useMatchMedia"
+import { BuyerGuaranteeMeta } from "../Components/BuyerGuaranteeMeta"
 
 interface BuyerGuaranteeIndexProps {
   headerImage: BuyerGuaranteeIndex_headerImage
@@ -75,6 +76,7 @@ export const BuyerGuaranteeIndex: React.FC<BuyerGuaranteeIndexProps> = ({
     "http://files.artsy.net/moneybackguaranteeartwork.jpg",
     { width: 400, height: 600, convert_to: "jpg" }
   )
+
   const heroImageURL = resize(
     "http://files.artsy.net/buyerGuaranteeHeroImage.jpg",
     { width: 1600, height: 800, convert_to: "jpg" }
@@ -100,6 +102,7 @@ export const BuyerGuaranteeIndex: React.FC<BuyerGuaranteeIndexProps> = ({
 
   return (
     <>
+      <BuyerGuaranteeMeta />
       {heroImageURL && (
         <FullBleedHeader
           {...headerImage?.image?.resized?.srcSet}
@@ -109,7 +112,6 @@ export const BuyerGuaranteeIndex: React.FC<BuyerGuaranteeIndexProps> = ({
             headerImage.imageTitle?.replace(/‘|’/g, "") +
             ". Courtesy of the artist and Kenise Barnes Fine Art. "
           }
-          meta="Artsy is the safest place to buy the art you love. Every purchase made exclusively with our Artsy’s secure checkout benefits from our full suite of buyer protections."
         >
           <Flex
             position="absolute"