From afca210a9c98f3809290dba0a3ebef4f16399e1a Mon Sep 17 00:00:00 2001 From: Artsy Date: Thu, 27 May 2021 22:54:07 +0200 Subject: [PATCH] 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 * 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 6107bdcdf11a623c1dcd5a73e389a16b4ec9707a. * 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 * fix: SEO meta for Buyer Guarantee (#7648) * chore: adds seo meta tags * fix: trim whitespace from meta description Co-authored-by: nastassia Co-authored-by: Cameron Rollheiser Co-authored-by: AL_Sutherland Co-authored-by: Jon Allured Co-authored-by: Christopher Pappas Co-authored-by: Renovate Bot Co-authored-by: Kirill Zubarau Co-authored-by: Ashley Jelks Co-authored-by: Sarah Weir Co-authored-by: Ivan <79980131+ivan-badyulya@users.noreply.github.com> Co-authored-by: Ivan Badyulya Co-authored-by: Joey Aghion --- .circleci/config.yml | 2 +- package.json | 5 +- .../__tests__/CreateAccount.jest.tsx | 9 +- .../main_layout/templates/scripts.jade | 4 + ...tstrapSharifyAndContextLocalsMiddleware.ts | 3 + src/typings/sharify.d.ts | 1 + src/v2/Apps/Artist/artistRoutes.tsx | 74 ++- .../Apps/ArtistSeries/artistSeriesRoutes.tsx | 9 +- .../Artists/Components/ArtistsLetterNav.tsx | 3 +- src/v2/Apps/Artists/artistsRoutes.tsx | 21 +- .../Components/ArtworkDetails/index.tsx | 1 - src/v2/Apps/Artwork/artworkRoutes.tsx | 9 +- src/v2/Apps/Auction/auctionRoutes.tsx | 28 +- src/v2/Apps/Auctions/auctionsRoutes.tsx | 9 +- .../Components/BuyerGuaranteeMeta.tsx | 50 ++ .../Routes/BuyerGuaranteeIndex.tsx | 4 +- .../BuyerGuarantee/buyerGuaranteeRoutes.tsx | 14 +- src/v2/Apps/Collect/collectRoutes.tsx | 27 +- src/v2/Apps/Consign/consignRoutes.tsx | 17 +- .../Apps/Conversation/conversationRoutes.tsx | 16 +- src/v2/Apps/Example/exampleRoutes.tsx | 6 +- src/v2/Apps/Fair/fairRoutes.tsx | 54 +- src/v2/Apps/Fairs/fairsRoutes.tsx | 18 +- src/v2/Apps/Feature/featureRoutes.tsx | 9 +- src/v2/Apps/FeatureAKG/featureAKGRoutes.tsx | 9 +- src/v2/Apps/Gene/geneRoutes.tsx | 18 +- .../identityVerificationRoutes.tsx | 24 +- src/v2/Apps/Order/OrderApp.tsx | 54 +- .../openAskSpecialistInquireableModal.ts | 28 + src/v2/Apps/Order/orderRoutes.tsx | 9 +- .../PartnerArtistDetails.tsx | 36 +- src/v2/Apps/Partner/Routes/Shows/index.tsx | 48 +- src/v2/Apps/Partner/partnerRoutes.tsx | 63 +- src/v2/Apps/Payment/paymentRoutes.tsx | 12 +- src/v2/Apps/Purchase/purchaseRoutes.tsx | 9 +- src/v2/Apps/ViewingRoom/viewingRoomRoutes.tsx | 18 +- .../Authentication/Desktop/SignUpForm.tsx | 178 ++++-- .../EmailSubscriptionCheckbox.tsx | 27 +- .../Authentication/FormSwitcher.tsx | 4 +- .../Authentication/TermsOfServiceCheckbox.tsx | 136 +++-- .../__tests__/Desktop/SignUpForm.jest.tsx | 309 +++++----- .../__tests__/FormSwitcher.jest.tsx | 4 +- .../Menus/DropDownMenu/DropDownMenu.tsx | 85 ++- .../Menus/DropDownMenu/DropDownSection.tsx | 2 +- .../__tests__/DropDownMenu.jest.tsx | 16 + .../Menus/MobileNavMenu/MobileNavMenu.tsx | 30 +- .../PartnerArtistDetailsListQuery.graphql.ts | 521 +++++++++-------- ...rArtistDetailsListRendererQuery.graphql.ts | 521 +++++++++-------- .../PartnerArtistDetailsQuery.graphql.ts | 537 +++++++++--------- ...tnerArtistDetails_partnerArtist.graphql.ts | 139 ++--- src/v2/__generated__/Shows_partner.graphql.ts | 43 +- .../SignUpFormLocationQuery.graphql.ts | 113 ++++ .../SignUpFormLocation_tests_Query.graphql.ts | 113 ++++ .../SignUpForm_requestLocation.graphql.ts | 35 ++ .../partnerRoutes_ShowsQuery.graphql.ts | 77 +-- src/v2/index.ejs | 12 + src/v2/server.ts | 43 +- webpack/envs/clientCommonConfig.js | 100 ++-- webpack/envs/clientDevelopmentConfig.js | 2 +- webpack/envs/clientProductionConfig.js | 7 +- webpack/envs/legacyProductionConfig.js | 4 +- webpack/envs/serverConfig.js | 2 +- webpack/utils/env.js | 68 +-- yarn.lock | 100 +--- 64 files changed, 2314 insertions(+), 1635 deletions(-) create mode 100644 src/v2/Apps/BuyerGuarantee/Components/BuyerGuaranteeMeta.tsx create mode 100644 src/v2/Apps/Order/Utils/openAskSpecialistInquireableModal.ts create mode 100644 src/v2/__generated__/SignUpFormLocationQuery.graphql.ts create mode 100644 src/v2/__generated__/SignUpFormLocation_tests_Query.graphql.ts create mode 100644 src/v2/__generated__/SignUpForm_requestLocation.graphql.ts diff --git a/.circleci/config.yml b/.circleci/config.yml index ccc0090767a..267dfe1ee86 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -3,7 +3,7 @@ version: 2.1 orbs: artsy-remote-docker: artsy/remote-docker@0.1.11 aws-s3: circleci/aws-s3@2.0.0 - codecov: codecov/codecov@1.2.1 + codecov: codecov/codecov@1.2.2 hokusai: artsy/hokusai@0.8.0 horizon: artsy/release@0.0.1 node: artsy/node@1.0.0 diff --git a/package.json b/package.json index f388e0dbf6d..2afe7dac8f8 100644 --- a/package.json +++ b/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", diff --git a/src/desktop/apps/consign/components/create_account/__tests__/CreateAccount.jest.tsx b/src/desktop/apps/consign/components/create_account/__tests__/CreateAccount.jest.tsx index 29414fc6a6c..9af05e839ac 100644 --- a/src/desktop/apps/consign/components/create_account/__tests__/CreateAccount.jest.tsx +++ b/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) }) }) }) diff --git a/src/desktop/components/main_layout/templates/scripts.jade b/src/desktop/components/main_layout/templates/scripts.jade index 74d9582bc37..93c7ffdcecc 100644 --- a/src/desktop/components/main_layout/templates/scripts.jade +++ b/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() diff --git a/src/lib/middleware/bootstrapSharifyAndContextLocalsMiddleware.ts b/src/lib/middleware/bootstrapSharifyAndContextLocalsMiddleware.ts index 8900d5a38ba..2226e590f56 100644 --- a/src/lib/middleware/bootstrapSharifyAndContextLocalsMiddleware.ts +++ b/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, diff --git a/src/typings/sharify.d.ts b/src/typings/sharify.d.ts index 380d587697e..59adc1afdee 100644 --- a/src/typings/sharify.d.ts +++ b/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 diff --git a/src/v2/Apps/Artist/artistRoutes.tsx b/src/v2/Apps/Artist/artistRoutes.tsx index 6af7b895c8e..df4d5fb6c6c 100644 --- a/src/v2/Apps/Artist/artistRoutes.tsx +++ b/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") { diff --git a/src/v2/Apps/ArtistSeries/artistSeriesRoutes.tsx b/src/v2/Apps/ArtistSeries/artistSeriesRoutes.tsx index 6046158554d..0e3171b7ef3 100644 --- a/src/v2/Apps/ArtistSeries/artistSeriesRoutes.tsx +++ b/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[] = [ { diff --git a/src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx b/src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx index c84e8d25692..ffed0f0c516 100644 --- a/src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx +++ b/src/v2/Apps/Artists/Components/ArtistsLetterNav.tsx @@ -12,7 +12,7 @@ export const ArtistsLetterNav: React.FC = ({ ...rest }) => { return ( - + {LETTERS.map((letter, i) => { return ( @@ -42,6 +42,7 @@ const Letter = styled(RouterLink)` text-align: center; text-decoration: none; transition: color 250ms; + color: ${themeGet("colors.black60")}; &:hover { text-decoration: underline; diff --git a/src/v2/Apps/Artists/artistsRoutes.tsx b/src/v2/Apps/Artists/artistsRoutes.tsx index 064f40ea7a3..094bfa2b417 100644 --- a/src/v2/Apps/Artists/artistsRoutes.tsx +++ b/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, } diff --git a/src/v2/Apps/Artwork/Components/ArtworkDetails/index.tsx b/src/v2/Apps/Artwork/Components/ArtworkDetails/index.tsx index b5c252d05fa..0343f97da8b 100644 --- a/src/v2/Apps/Artwork/Components/ArtworkDetails/index.tsx +++ b/src/v2/Apps/Artwork/Components/ArtworkDetails/index.tsx @@ -117,7 +117,6 @@ export const ArtworkDetailsQueryRenderer = ({ artworkID: string }) => { const { relayEnvironment } = useContext(SystemContext) - return ( environment={relayEnvironment} diff --git a/src/v2/Apps/Artwork/artworkRoutes.tsx b/src/v2/Apps/Artwork/artworkRoutes.tsx index d0f409a14c5..b7389379bcb 100644 --- a/src/v2/Apps/Artwork/artworkRoutes.tsx +++ b/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[] = [ { diff --git a/src/v2/Apps/Auction/auctionRoutes.tsx b/src/v2/Apps/Auction/auctionRoutes.tsx index bb95ea15b0e..dd9e8cd26c0 100644 --- a/src/v2/Apps/Auction/auctionRoutes.tsx +++ b/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[] = [ { diff --git a/src/v2/Apps/Auctions/auctionsRoutes.tsx b/src/v2/Apps/Auctions/auctionsRoutes.tsx index 7344cd17e43..9be7fc82765 100644 --- a/src/v2/Apps/Auctions/auctionsRoutes.tsx +++ b/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[] = [ { diff --git a/src/v2/Apps/BuyerGuarantee/Components/BuyerGuaranteeMeta.tsx b/src/v2/Apps/BuyerGuarantee/Components/BuyerGuaranteeMeta.tsx new file mode 100644 index 00000000000..fe683cfe453 --- /dev/null +++ b/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} + + + {description && ( + <> + + + + + )} + + {href && ( + <> + + + + )} + + {src && ( + <> + + + + )} + + {!src && } + + + + + + ) +} diff --git a/src/v2/Apps/BuyerGuarantee/Routes/BuyerGuaranteeIndex.tsx b/src/v2/Apps/BuyerGuarantee/Routes/BuyerGuaranteeIndex.tsx index e7716e36276..b63702ef838 100644 --- a/src/v2/Apps/BuyerGuarantee/Routes/BuyerGuaranteeIndex.tsx +++ b/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 = ({ "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 = ({ return ( <> + {heroImageURL && ( = ({ 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." > import("./BuyerGuaranteeApp"), { - resolveComponent: component => component.BuyerGuaranteeApp, -}) +const BuyerGuaranteeApp = loadable( + () => import(/* webpackChunkName: "buyerBundle" */ "./BuyerGuaranteeApp"), + { + resolveComponent: component => component.BuyerGuaranteeApp, + } +) const BuyerGuaranteeIndexRoute = loadable( - () => import("./Routes/BuyerGuaranteeIndex"), + () => + import( + /* webpackChunkName: "buyerBundle" */ "./Routes/BuyerGuaranteeIndex" + ), { resolveComponent: component => component.BuyerGuaranteeIndexFragmentContainer, diff --git a/src/v2/Apps/Collect/collectRoutes.tsx b/src/v2/Apps/Collect/collectRoutes.tsx index 13e04750c7d..ba23ab8e648 100644 --- a/src/v2/Apps/Collect/collectRoutes.tsx +++ b/src/v2/Apps/Collect/collectRoutes.tsx @@ -7,15 +7,24 @@ import { paramsToCamelCase } from "v2/Components/ArtworkFilter/Utils/urlBuilder" import { getENV } from "v2/Utils/getENV" import { CollectionAppQuery } from "./Routes/Collection/CollectionAppQuery" -const CollectApp = loadable(() => import("./Routes/Collect"), { - resolveComponent: component => component.CollectAppFragmentContainer, -}) -const CollectionsApp = loadable(() => import("./Routes/Collections"), { - resolveComponent: component => component.CollectionsAppFragmentContainer, -}) -const CollectionApp = loadable(() => import("./Routes/Collection"), { - resolveComponent: component => component.CollectionRefetchContainer, -}) +const CollectApp = loadable( + () => import(/* webpackChunkName: "collectBundle" */ "./Routes/Collect"), + { + resolveComponent: component => component.CollectAppFragmentContainer, + } +) +const CollectionsApp = loadable( + () => import(/* webpackChunkName: "collectBundle" */ "./Routes/Collections"), + { + resolveComponent: component => component.CollectionsAppFragmentContainer, + } +) +const CollectionApp = loadable( + () => import(/* webpackChunkName: "collectBundle" */ "./Routes/Collection"), + { + resolveComponent: component => component.CollectionRefetchContainer, + } +) export const collectRoutes: AppRouteConfig[] = [ { diff --git a/src/v2/Apps/Consign/consignRoutes.tsx b/src/v2/Apps/Consign/consignRoutes.tsx index 5d239f57f24..9b46fad3f3a 100644 --- a/src/v2/Apps/Consign/consignRoutes.tsx +++ b/src/v2/Apps/Consign/consignRoutes.tsx @@ -3,14 +3,23 @@ import { graphql } from "react-relay" import { AppRouteConfig } from "v2/Artsy/Router/Route" const MarketingLandingApp = loadable( - () => import("./Routes/MarketingLanding/MarketingLandingApp"), + () => + import( + /* webpackChunkName: "consignBundle" */ "./Routes/MarketingLanding/MarketingLandingApp" + ), { resolveComponent: component => component.MarketingLandingApp, } ) -const OfferDetailApp = loadable(() => import("./Routes/Offer/OfferDetailApp"), { - resolveComponent: component => component.OfferDetailAppFragmentContainer, -}) +const OfferDetailApp = loadable( + () => + import( + /* webpackChunkName: "consignBundle" */ "./Routes/Offer/OfferDetailApp" + ), + { + resolveComponent: component => component.OfferDetailAppFragmentContainer, + } +) export const consignRoutes: AppRouteConfig[] = [ { diff --git a/src/v2/Apps/Conversation/conversationRoutes.tsx b/src/v2/Apps/Conversation/conversationRoutes.tsx index 660cbdb34f7..7dbb0973bf4 100644 --- a/src/v2/Apps/Conversation/conversationRoutes.tsx +++ b/src/v2/Apps/Conversation/conversationRoutes.tsx @@ -8,10 +8,16 @@ export const conversationRoutes: AppRouteConfig[] = [ displayFullPage: true, hideFooter: true, getComponent: () => - loadable(() => import("./ConversationApp"), { - resolveComponent: component => - component.ConversationAppFragmentContainer, - }), + loadable( + () => + import( + /* webpackChunkName: "conversationBundle" */ "./ConversationApp" + ), + { + resolveComponent: component => + component.ConversationAppFragmentContainer, + } + ), query: graphql` query conversationRoutes_ConversationQuery { me { @@ -32,7 +38,7 @@ export const conversationRoutes: AppRouteConfig[] = [ path: "/user/conversations/:conversationID", displayFullPage: true, hideFooter: true, - Component: loadable(() => import("./Routes/Conversation"), { + Component: loadable(() => import(/* webpackChunkName: "conversationBundle" */ "./Routes/Conversation"), { resolveComponent: component => component.ConversationPaginationContainer, }), prepareVariables: (params, _props) => { diff --git a/src/v2/Apps/Example/exampleRoutes.tsx b/src/v2/Apps/Example/exampleRoutes.tsx index a61bfec26ed..3320fd6f7de 100644 --- a/src/v2/Apps/Example/exampleRoutes.tsx +++ b/src/v2/Apps/Example/exampleRoutes.tsx @@ -3,18 +3,18 @@ import { AppRouteConfig } from "v2/Artsy/Router/Route" import { graphql } from "react-relay" import { WelcomeRoute } from "./Routes/Welcome/WelcomeRoute" -const ExampleApp = loadable(() => import("./ExampleApp"), { +const ExampleApp = loadable(() => import(/* webpackChunkName: "exampleBundle" */ "./ExampleApp"), { resolveComponent: component => component.ExampleAppFragmentContainer, }) const ArtistRoute = loadable( - () => import("./Routes/Artist/ExampleArtistRoute"), + () => import/* webpackChunkName: "exampleBundle" */ ("./Routes/Artist/ExampleArtistRoute"), { resolveComponent: component => component.ExampleArtistRouteFragmentContainer, } ) const ArtworkRoute = loadable( - () => import("./Routes/Artwork/ExampleArtworkRoute"), + () => import(/* webpackChunkName: "exampleBundle" */ "./Routes/Artwork/ExampleArtworkRoute"), { resolveComponent: component => component.ExampleArtworkRouteFragmentContainer, diff --git a/src/v2/Apps/Fair/fairRoutes.tsx b/src/v2/Apps/Fair/fairRoutes.tsx index 1eb4c9af4dc..67fd284d227 100644 --- a/src/v2/Apps/Fair/fairRoutes.tsx +++ b/src/v2/Apps/Fair/fairRoutes.tsx @@ -5,24 +5,42 @@ import { paramsToCamelCase } from "v2/Components/ArtworkFilter/Utils/urlBuilder" import { getENV } from "v2/Utils/getENV" import { allowedFilters } from "v2/Components/ArtworkFilter/Utils/allowedFilters" -const FairApp = loadable(() => import("./FairApp"), { - resolveComponent: component => component.FairAppFragmentContainer, -}) -const FairSubApp = loadable(() => import("./FairSubApp"), { - resolveComponent: component => component.FairSubAppFragmentContainer, -}) -const FairExhibitorsRoute = loadable(() => import("./Routes/FairExhibitors"), { - resolveComponent: component => component.FairExhibitorsFragmentContainer, -}) -const FairArtworksRoute = loadable(() => import("./Routes/FairArtworks"), { - resolveComponent: component => component.FairArtworksRefetchContainer, -}) -const FairInfoRoute = loadable(() => import("./Routes/FairInfo"), { - resolveComponent: component => component.FairInfoFragmentContainer, -}) -const FairArticlesRoute = loadable(() => import("./Routes/FairArticles"), { - resolveComponent: component => component.FairArticlesPaginationContainer, -}) +const FairApp = loadable( + () => import(/* webpackChunkName: "fairBundle" */ "./FairApp"), + { + resolveComponent: component => component.FairAppFragmentContainer, + } +) +const FairSubApp = loadable( + () => import(/* webpackChunkName: "fairBundle" */ "./FairSubApp"), + { + resolveComponent: component => component.FairSubAppFragmentContainer, + } +) +const FairExhibitorsRoute = loadable( + () => import(/* webpackChunkName: "fairBundle" */ "./Routes/FairExhibitors"), + { + resolveComponent: component => component.FairExhibitorsFragmentContainer, + } +) +const FairArtworksRoute = loadable( + () => import(/* webpackChunkName: "fairBundle" */ "./Routes/FairArtworks"), + { + resolveComponent: component => component.FairArtworksRefetchContainer, + } +) +const FairInfoRoute = loadable( + () => import(/* webpackChunkName: "fairBundle" */ "./Routes/FairInfo"), + { + resolveComponent: component => component.FairInfoFragmentContainer, + } +) +const FairArticlesRoute = loadable( + () => import(/* webpackChunkName: "fairBundle" */ "./Routes/FairArticles"), + { + resolveComponent: component => component.FairArticlesPaginationContainer, + } +) export const fairRoutes: AppRouteConfig[] = [ { diff --git a/src/v2/Apps/Fairs/fairsRoutes.tsx b/src/v2/Apps/Fairs/fairsRoutes.tsx index c14a8385251..919ae2b52ff 100644 --- a/src/v2/Apps/Fairs/fairsRoutes.tsx +++ b/src/v2/Apps/Fairs/fairsRoutes.tsx @@ -3,13 +3,19 @@ import { graphql } from "react-relay" import { RedirectException } from "found" import { AppRouteConfig } from "v2/Artsy/Router/Route" -const FairsApp = loadable(() => import("./FairsApp"), { - resolveComponent: component => component.FairsApp, -}) +const FairsApp = loadable( + () => import(/* webpackChunkName: "fairBundle" */ "./FairsApp"), + { + resolveComponent: component => component.FairsApp, + } +) -const FairsIndexRoute = loadable(() => import("./Routes/FairsIndex"), { - resolveComponent: component => component.FairsIndexFragmentContainer, -}) +const FairsIndexRoute = loadable( + () => import(/* webpackChunkName: "fairBundle" */ "./Routes/FairsIndex"), + { + resolveComponent: component => component.FairsIndexFragmentContainer, + } +) export const fairsRoutes: AppRouteConfig[] = [ { diff --git a/src/v2/Apps/Feature/featureRoutes.tsx b/src/v2/Apps/Feature/featureRoutes.tsx index aba9221e84a..3a097aa9dc7 100644 --- a/src/v2/Apps/Feature/featureRoutes.tsx +++ b/src/v2/Apps/Feature/featureRoutes.tsx @@ -2,9 +2,12 @@ import loadable from "@loadable/component" import { graphql } from "react-relay" import { AppRouteConfig } from "v2/Artsy/Router/Route" -const FeatureApp = loadable(() => import("./FeatureApp"), { - resolveComponent: component => component.FeatureAppFragmentContainer, -}) +const FeatureApp = loadable( + () => import(/* webpackChunkName: "featureBundle" */ "./FeatureApp"), + { + resolveComponent: component => component.FeatureAppFragmentContainer, + } +) export const featureRoutes: AppRouteConfig[] = [ { diff --git a/src/v2/Apps/FeatureAKG/featureAKGRoutes.tsx b/src/v2/Apps/FeatureAKG/featureAKGRoutes.tsx index 18adb4f6507..f0af21fc05b 100644 --- a/src/v2/Apps/FeatureAKG/featureAKGRoutes.tsx +++ b/src/v2/Apps/FeatureAKG/featureAKGRoutes.tsx @@ -2,9 +2,12 @@ import loadable from "@loadable/component" import { AppRouteConfig } from "v2/Artsy/Router/Route" import { graphql } from "react-relay" -const FeatureAKGApp = loadable(() => import("./FeatureAKGApp"), { - resolveComponent: component => component.FeatureAKGAppFragmentContainer, -}) +const FeatureAKGApp = loadable( + () => import(/* webpackChunkName: "featureBundle" */ "./FeatureAKGApp"), + { + resolveComponent: component => component.FeatureAKGAppFragmentContainer, + } +) export const featureAKGRoutes: AppRouteConfig[] = [ { diff --git a/src/v2/Apps/Gene/geneRoutes.tsx b/src/v2/Apps/Gene/geneRoutes.tsx index 09dbf8c0bdd..300f163579f 100644 --- a/src/v2/Apps/Gene/geneRoutes.tsx +++ b/src/v2/Apps/Gene/geneRoutes.tsx @@ -6,13 +6,19 @@ import { paramsToCamelCase } from "v2/Components/ArtworkFilter/Utils/urlBuilder" import { initialArtworkFilterState } from "v2/Components/ArtworkFilter/ArtworkFilterContext" import { AppRouteConfig } from "v2/Artsy/Router/Route" -const GeneApp = loadable(() => import("./GeneApp"), { - resolveComponent: component => component.GeneApp, -}) +const GeneApp = loadable( + () => import(/* webpackChunkName: "geneBundle" */ "./GeneApp"), + { + resolveComponent: component => component.GeneApp, + } +) -const GeneShowRoute = loadable(() => import("./Routes/GeneShow"), { - resolveComponent: component => component.GeneShowFragmentContainer, -}) +const GeneShowRoute = loadable( + () => import(/* webpackChunkName: "geneBundle" */ "./Routes/GeneShow"), + { + resolveComponent: component => component.GeneShowFragmentContainer, + } +) export const geneRoutes: AppRouteConfig[] = [ { diff --git a/src/v2/Apps/IdentityVerification/identityVerificationRoutes.tsx b/src/v2/Apps/IdentityVerification/identityVerificationRoutes.tsx index 3a1c9fbba51..7cfb949b7df 100644 --- a/src/v2/Apps/IdentityVerification/identityVerificationRoutes.tsx +++ b/src/v2/Apps/IdentityVerification/identityVerificationRoutes.tsx @@ -3,18 +3,28 @@ import { AppRouteConfig } from "v2/Artsy/Router/Route" import { graphql } from "react-relay" const IdentityVerificationApp = loadable( - () => import("./IdentityVerificationApp"), + () => + import( + /* webpackChunkName: "identityVerificationBundle" */ "./IdentityVerificationApp" + ), { resolveComponent: component => component.IdentityVerificationAppFragmentContainer, } ) -const Processing = loadable(() => import("./Processing"), { - resolveComponent: component => component.Processing, -}) -const Error = loadable(() => import("./Error"), { - resolveComponent: component => component.Error, -}) +const Processing = loadable( + () => + import(/* webpackChunkName: "identityVerificationBundle" */ "./Processing"), + { + resolveComponent: component => component.Processing, + } +) +const Error = loadable( + () => import(/* webpackChunkName: "identityVerificationBundle" */ "./Error"), + { + resolveComponent: component => component.Error, + } +) export const identityVerificationRoutes: AppRouteConfig[] = [ { diff --git a/src/v2/Apps/Order/OrderApp.tsx b/src/v2/Apps/Order/OrderApp.tsx index 6609635a032..32bf130904e 100644 --- a/src/v2/Apps/Order/OrderApp.tsx +++ b/src/v2/Apps/Order/OrderApp.tsx @@ -47,10 +47,25 @@ class OrderApp extends React.Component { } if (this.mediator) { - this.mediator.on( - "openOrdersContactArtsyModal", - this.openAskSpecialistInquireableModal + const artworkId = get( + this.props, + // @ts-expect-error STRICT_NULL_CHECK + props => props.order.lineItems.edges[0].node.artwork.slug ) + + if (!document.getElementById("legacy-assets-dll")) { + import( + /* webpackChunkName: 'legacy-assets-dll' */ "./Utils/openAskSpecialistInquireableModal" + ).then(({ openAskSpecialistInquireableModal }) => { + this.mediator?.on("openOrdersContactArtsyModal", () => + openAskSpecialistInquireableModal(artworkId, sd) + ) + }) + document.body.insertAdjacentHTML( + "beforeend", + `
` + ) + } } } @@ -71,39 +86,6 @@ class OrderApp extends React.Component { } } - openAskSpecialistInquireableModal = () => { - const User = require("desktop/models/user.coffee") - const Artwork = require("desktop/models/artwork.coffee") - const ArtworkInquiry = require("desktop/models/artwork_inquiry.coffee") - const openInquiryQuestionnaireFor = require("desktop/components/inquiry_questionnaire/index.coffee") - const $ = require("jquery") - - const user = User.instantiate() - const inquiry = new ArtworkInquiry({ notification_delay: 600 }) - - const artworkId = get( - this.props, - // @ts-expect-error STRICT_NULL_CHECK - props => props.order.lineItems.edges[0].node.artwork.slug - ) - const artwork = new Artwork({ - id: artworkId, - }) - - // Set token to be able to load user's collector profile later - $.ajaxSettings.headers = { - "X-ACCESS-TOKEN": - sd.CURRENT_USER != null ? sd.CURRENT_USER.accessToken : undefined, - "X-XAPP-TOKEN": sd.ARTSY_XAPP_TOKEN, - } - openInquiryQuestionnaireFor({ - artwork, - ask_specialist: true, - inquiry, - user, - }) - } - preventHardReload = event => { // Don't block navigation for status page, as we've completed the flow if (window.location.pathname.includes("/status")) { diff --git a/src/v2/Apps/Order/Utils/openAskSpecialistInquireableModal.ts b/src/v2/Apps/Order/Utils/openAskSpecialistInquireableModal.ts new file mode 100644 index 00000000000..caa59a00bdc --- /dev/null +++ b/src/v2/Apps/Order/Utils/openAskSpecialistInquireableModal.ts @@ -0,0 +1,28 @@ +export const openAskSpecialistInquireableModal = (artworkId, sd) => { + const User = require("desktop/models/user.coffee") + const Artwork = require("desktop/models/artwork.coffee") + const ArtworkInquiry = require("desktop/models/artwork_inquiry.coffee") + const openInquiryQuestionnaireFor = require("desktop/components/inquiry_questionnaire/index.coffee") + const $ = require("jquery") + + const user = User.instantiate() + const inquiry = new ArtworkInquiry({ notification_delay: 600 }) + + const artwork = new Artwork({ + id: artworkId, + }) + + // Set token to be able to load user's collector profile later + $.ajaxSettings.headers = { + "X-ACCESS-TOKEN": + sd.CURRENT_USER != null ? sd.CURRENT_USER.accessToken : undefined, + "X-XAPP-TOKEN": sd.ARTSY_XAPP_TOKEN, + } + + openInquiryQuestionnaireFor({ + artwork, + ask_specialist: true, + inquiry, + user, + }) +} diff --git a/src/v2/Apps/Order/orderRoutes.tsx b/src/v2/Apps/Order/orderRoutes.tsx index ab08b6b60a0..0dbece3eccf 100644 --- a/src/v2/Apps/Order/orderRoutes.tsx +++ b/src/v2/Apps/Order/orderRoutes.tsx @@ -18,9 +18,12 @@ import { RejectFragmentContainer as DeclineRoute } from "./Routes/Reject" import { StatusFragmentContainer as StatusRoute } from "./Routes/Status" import { AppRouteConfig } from "v2/Artsy/Router/Route" -const OrderApp = loadable(() => import("./OrderApp"), { - resolveComponent: component => component.OrderApp, -}) +const OrderApp = loadable( + () => import(/* webpackChunkName: "orderBundle" */ "./OrderApp"), + { + resolveComponent: component => component.OrderApp, + } +) // FIXME: // * `render` functions requires casting diff --git a/src/v2/Apps/Partner/Components/PartnerArtists/PartnerArtistDetails/PartnerArtistDetails.tsx b/src/v2/Apps/Partner/Components/PartnerArtists/PartnerArtistDetails/PartnerArtistDetails.tsx index 5b8151f968a..5e257371446 100644 --- a/src/v2/Apps/Partner/Components/PartnerArtists/PartnerArtistDetails/PartnerArtistDetails.tsx +++ b/src/v2/Apps/Partner/Components/PartnerArtists/PartnerArtistDetails/PartnerArtistDetails.tsx @@ -18,6 +18,7 @@ import { ContextModule } from "@artsy/cohesion" import { useSystemContext } from "v2/Artsy" import { RouterLink } from "v2/Artsy/Router/RouterLink" import { PartnerArtistDetailsPlaceholder } from "./PartnerArtistDetailsPlaceholder" +import { compact } from "lodash" export interface PartnerArtistDetailsProps { partnerArtist: PartnerArtistDetails_partnerArtist @@ -29,15 +30,13 @@ export const PartnerArtistDetails: React.FC = ({ if (!partnerArtist || !partnerArtist.node) return null const { - node: { - name, - filterArtworksConnection, - href, - formattedNationalityAndBirthday, - }, + node: { name, href, formattedNationalityAndBirthday }, biographyBlurb, + artworksConnection, } = partnerArtist + const artworks = compact(artworksConnection?.edges?.map(c => c?.node)) + return ( @@ -82,14 +81,11 @@ export const PartnerArtistDetails: React.FC = ({ - {/* @ts-expect-error STRICT_NULL_CHECK */} - {filterArtworksConnection.edges.map((artwork, i) => { + {artworks.map(artwork => { return ( @@ -111,19 +107,19 @@ export const PartnerArtistDetailsFragmentContainer = createFragmentContainer( text credit } + artworksConnection(first: 12) { + edges { + node { + id + ...FillwidthItem_artwork + } + } + } node { name href formattedNationalityAndBirthday ...FollowArtistButton_artist - filterArtworksConnection(first: 12, partnerIDs: [$partnerId]) { - edges { - node { - id - ...FillwidthItem_artwork - } - } - } } } `, diff --git a/src/v2/Apps/Partner/Routes/Shows/index.tsx b/src/v2/Apps/Partner/Routes/Shows/index.tsx index 4c6e38b9009..fb548111902 100644 --- a/src/v2/Apps/Partner/Routes/Shows/index.tsx +++ b/src/v2/Apps/Partner/Routes/Shows/index.tsx @@ -1,10 +1,9 @@ import React from "react" +import compact from "lodash/compact" import { createFragmentContainer, graphql } from "react-relay" import { Shows_partner } from "v2/__generated__/Shows_partner.graphql" - import { ShowEventsFragmentContainer } from "../../Components/PartnerShows/ShowEvents" import { ShowPaginatedEventsRenderer } from "../../Components/PartnerShows/ShowPaginatedEvents" - import { ShowBannerFragmentContainer } from "../../Components/PartnerShows" import { useRouter } from "v2/Artsy/Router/useRouter" @@ -15,12 +14,7 @@ interface PartnerShowsProps { export const Shows: React.FC = ({ partner, }): JSX.Element => { - const { - currentEvents, - upcomingEvents, - // @ts-expect-error STRICT_NULL_CHECK - featured: { edges: featuredShows }, - } = partner + const { currentEvents, upcomingEvents, featuredEvents } = partner const { match: { @@ -28,30 +22,33 @@ export const Shows: React.FC = ({ }, } = useRouter() - // @ts-expect-error STRICT_NULL_CHECK - const isCurrentEventsExist = !!currentEvents.edges.length - // @ts-expect-error STRICT_NULL_CHECK - const isUpcomingEventsExist = !!upcomingEvents.edges.length + const firstFeaturedEvent = compact(featuredEvents?.edges)[0].node + const isEventFeatured = firstFeaturedEvent && firstFeaturedEvent.isFeatured + const filteredUpcomingEvents = compact(upcomingEvents?.edges).filter( + ({ node }) => node?.internalID !== firstFeaturedEvent?.internalID + ) + const filteredCurrentEvents = compact(currentEvents?.edges).filter( + ({ node }) => node?.internalID !== firstFeaturedEvent?.internalID + ) + const isUpcomingEventsExist = !!filteredUpcomingEvents.length + const isCurrentEventsExist = !!filteredCurrentEvents.length + const page = +query.page || 1 return ( <> - {featuredShows.length > 0 && - featuredShows[0].node && - featuredShows[0].node.isFeatured && ( - - )} + {isEventFeatured && ( + + )} {isCurrentEventsExist && ( )} {isUpcomingEventsExist && ( )} @@ -72,7 +69,7 @@ export const ShowsFragmentContainer = createFragmentContainer(Shows, { partner: graphql` fragment Shows_partner on Partner { slug - featured: showsConnection( + featuredEvents: showsConnection( first: 1 status: ALL sort: FEATURED_DESC_END_AT_DESC @@ -81,6 +78,7 @@ export const ShowsFragmentContainer = createFragmentContainer(Shows, { edges { node { isFeatured + internalID ...ShowBanner_show } } @@ -91,6 +89,9 @@ export const ShowsFragmentContainer = createFragmentContainer(Shows, { isDisplayable: true ) { edges { + node { + internalID + } ...ShowEvents_edges } } @@ -100,6 +101,9 @@ export const ShowsFragmentContainer = createFragmentContainer(Shows, { isDisplayable: true ) { edges { + node { + internalID + } ...ShowEvents_edges } } diff --git a/src/v2/Apps/Partner/partnerRoutes.tsx b/src/v2/Apps/Partner/partnerRoutes.tsx index 2dceffcbf2b..ff4c58eaf03 100644 --- a/src/v2/Apps/Partner/partnerRoutes.tsx +++ b/src/v2/Apps/Partner/partnerRoutes.tsx @@ -7,33 +7,54 @@ import { paramsToCamelCase } from "v2/Components/ArtworkFilter/Utils/urlBuilder" import { allowedFilters } from "v2/Components/ArtworkFilter/Utils/allowedFilters" import { AppRouteConfig } from "v2/Artsy/Router/Route" -const PartnerApp = loadable(() => import("./PartnerApp"), { - resolveComponent: component => component.PartnerAppFragmentContainer, -}) +const PartnerApp = loadable( + () => import(/* webpackChunkName: "partnerBundle" */ "./PartnerApp"), + { + resolveComponent: component => component.PartnerAppFragmentContainer, + } +) -const ArticlesRoute = loadable(() => import("./Routes/Articles"), { - resolveComponent: component => component.ArticlesPaginationContainer, -}) +const ArticlesRoute = loadable( + () => import(/* webpackChunkName: "partnerBundle" */ "./Routes/Articles"), + { + resolveComponent: component => component.ArticlesPaginationContainer, + } +) -const OverviewRoute = loadable(() => import("./Routes/Overview"), { - resolveComponent: component => component.OverviewFragmentContainer, -}) +const OverviewRoute = loadable( + () => import(/* webpackChunkName: "partnerBundle" */ "./Routes/Overview"), + { + resolveComponent: component => component.OverviewFragmentContainer, + } +) -const ShowsRoute = loadable(() => import("./Routes/Shows"), { - resolveComponent: component => component.ShowsFragmentContainer, -}) +const ShowsRoute = loadable( + () => import(/* webpackChunkName: "partnerBundle" */ "./Routes/Shows"), + { + resolveComponent: component => component.ShowsFragmentContainer, + } +) -const WorksRoute = loadable(() => import("./Routes/Works"), { - resolveComponent: component => component.ArtworksRefetchContainer, -}) +const WorksRoute = loadable( + () => import(/* webpackChunkName: "partnerBundle" */ "./Routes/Works"), + { + resolveComponent: component => component.ArtworksRefetchContainer, + } +) -const ArtistsRoute = loadable(() => import("./Routes/Artists"), { - resolveComponent: component => component.ArtistsRouteFragmentContainer, -}) +const ArtistsRoute = loadable( + () => import(/* webpackChunkName: "partnerBundle" */ "./Routes/Artists"), + { + resolveComponent: component => component.ArtistsRouteFragmentContainer, + } +) -const ContactRoute = loadable(() => import("./Routes/Contact"), { - resolveComponent: component => component.ContactRouteFragmentContainer, -}) +const ContactRoute = loadable( + () => import(/* webpackChunkName: "partnerBundle" */ "./Routes/Contact"), + { + resolveComponent: component => component.ContactRouteFragmentContainer, + } +) export const partnerRoutes: AppRouteConfig[] = [ { diff --git a/src/v2/Apps/Payment/paymentRoutes.tsx b/src/v2/Apps/Payment/paymentRoutes.tsx index 4f7e32ea7c4..cb29aa307f7 100644 --- a/src/v2/Apps/Payment/paymentRoutes.tsx +++ b/src/v2/Apps/Payment/paymentRoutes.tsx @@ -2,9 +2,15 @@ import loadable from "@loadable/component" import { graphql } from "react-relay" import { AppRouteConfig } from "v2/Artsy/Router/Route" -const PaymentApp = loadable(() => import("./Routes/Payment/PaymentApp"), { - resolveComponent: component => component.PaymentAppFragmentContainer, -}) +const PaymentApp = loadable( + () => + import( + /* webpackChunkName: "paymentBundle" */ "./Routes/Payment/PaymentApp" + ), + { + resolveComponent: component => component.PaymentAppFragmentContainer, + } +) export const paymentRoutes: AppRouteConfig[] = [ { diff --git a/src/v2/Apps/Purchase/purchaseRoutes.tsx b/src/v2/Apps/Purchase/purchaseRoutes.tsx index 932b0315ddf..dd68125830b 100644 --- a/src/v2/Apps/Purchase/purchaseRoutes.tsx +++ b/src/v2/Apps/Purchase/purchaseRoutes.tsx @@ -2,9 +2,12 @@ import loadable from "@loadable/component" import { graphql } from "react-relay" import { AppRouteConfig } from "v2/Artsy/Router/Route" -const PurchasesApp = loadable(() => import("./PurchaseApp"), { - resolveComponent: component => component.PurchaseAppFragmentContainer, -}) +const PurchasesApp = loadable( + () => import(/* webpackChunkName: "pruchaseBundle" */ "./PurchaseApp"), + { + resolveComponent: component => component.PurchaseAppFragmentContainer, + } +) export const purchaseRoutes: AppRouteConfig[] = [ { diff --git a/src/v2/Apps/ViewingRoom/viewingRoomRoutes.tsx b/src/v2/Apps/ViewingRoom/viewingRoomRoutes.tsx index 4a3facc123b..4adc29891b2 100644 --- a/src/v2/Apps/ViewingRoom/viewingRoomRoutes.tsx +++ b/src/v2/Apps/ViewingRoom/viewingRoomRoutes.tsx @@ -5,12 +5,18 @@ import { AppRouteConfig } from "v2/Artsy/Router/Route" import { ViewingRoomStatementRouteFragmentContainer as StatementRoute } from "./Routes/Statement/ViewingRoomStatementRoute" import { ViewingRoomWorksRouteFragmentContainer as WorksRoute } from "./Routes/Works/ViewingRoomWorksRoute" -const ViewingRoomApp = loadable(() => import("./ViewingRoomApp"), { - resolveComponent: component => component.ViewingRoomAppFragmentContainer, -}) -const ViewingRoomsApp = loadable(() => import("./ViewingRoomsApp"), { - resolveComponent: component => component.ViewingRoomsAppFragmentContainer, -}) +const ViewingRoomApp = loadable( + () => import(/* webpackChunkName: "viewingRoomBundle" */ "./ViewingRoomApp"), + { + resolveComponent: component => component.ViewingRoomAppFragmentContainer, + } +) +const ViewingRoomsApp = loadable( + () => import(/* webpackChunkName: "viewingRoomBundle" */ "./ViewingRoomsApp"), + { + resolveComponent: component => component.ViewingRoomsAppFragmentContainer, + } +) export const viewingRoomRoutes: AppRouteConfig[] = [ { diff --git a/src/v2/Components/Authentication/Desktop/SignUpForm.tsx b/src/v2/Components/Authentication/Desktop/SignUpForm.tsx index 2c16d949087..f51db8d7d17 100644 --- a/src/v2/Components/Authentication/Desktop/SignUpForm.tsx +++ b/src/v2/Components/Authentication/Desktop/SignUpForm.tsx @@ -1,3 +1,6 @@ +import { QueryRenderer, createFragmentContainer, graphql } from "react-relay" +import { SignUpFormLocationQuery } from "v2/__generated__/SignUpFormLocationQuery.graphql" +import { useSystemContext } from "v2/Artsy" import { Error, Footer, @@ -17,12 +20,49 @@ import QuickInput from "v2/Components/QuickInput" import { Formik, FormikProps } from "formik" import React, { Component } from "react" import { recaptcha } from "v2/Utils/recaptcha" +import { data as sd } from "sharify" +import { SignUpForm_requestLocation } from "v2/__generated__/SignUpForm_requestLocation.graphql" + +const gdprCountries = [ + "AT", + "BE", + "BG", + "CY", + "CZ", + "DE", + "DK", + "EE", + "ES", + "FI", + "FR", + "GB", + "GR", + "HR", + "HU", + "IE", + "IT", + "LT", + "LU", + "LV", + "MT", + "NL", + "PL", + "PT", + "RO", + "SE", + "SI", + "SK", +] export interface SignUpFormState { error?: string } -export class SignUpForm extends Component { +interface SignUpFormProps extends FormProps { + requestLocation?: SignUpForm_requestLocation +} + +export class SignUpForm extends Component { state = { error: this.props.error, } @@ -39,27 +79,33 @@ export class SignUpForm extends Component { } render() { + const initialValues = { + accepted_terms_of_service: false, + agreed_to_receive_emails: false, + ...this.props.values, + } + + const countryCode = this.props.requestLocation?.countryCode || "" + const collapseCheckboxes = !gdprCountries.includes(countryCode) + return ( {({ - values, errors, - touched, - handleChange: formikHandleChange, handleBlur, + handleChange: formikHandleChange, handleSubmit, isSubmitting, - status, + setFieldValue, setStatus, setTouched, + status, + touched, + values, }: FormikProps) => { const handleChange = e => { setStatus(null) @@ -68,65 +114,66 @@ export class SignUpForm extends Component { formikHandleChange(e) } + const emailErrorMessage = touched.email ? errors.email : "" + const passwordErrorMessage = touched.password ? errors.password : "" + const nameErrorMessage = touched.name ? errors.name : "" + const termsErrorMessage = touched.accepted_terms_of_service + ? errors.accepted_terms_of_service + : "" + return (
- + {!collapseCheckboxes && ( + + )} {status && !status.success && {status.error}} Sign up