Merge pull request #14431 from artsy/review-app-new-auth

feat(auth): implements new auth dialog
artsy · Sep 12, 2024 · 87f127d · 87f127d
2 parents 1019492 + 914d354
commit 87f127d
Show file tree

Hide file tree

Showing 73 changed files with 767 additions and 627 deletions.
diff --git a/cypress/e2e/alerts.cy.ts b/cypress/e2e/alerts.cy.ts
@@ -2,7 +2,7 @@ describe("user/alerts", () => {
   describe("unauthenticated", () => {
     it("redirects to the login page", () => {
       cy.visit("user/alerts")
-      cy.contains("Log in")
+      cy.contains("Sign up or log in")
     })
   })
 })
diff --git a/cypress/e2e/notifications.cy.ts b/cypress/e2e/notifications.cy.ts
@@ -4,7 +4,7 @@ describe("/notifications", () => {
   describe("unauthenticated", () => {
     it("redirects to the login page", () => {
       cy.visit("/notifications")
-      cy.contains("Log in")
+      cy.contains("Sign up or log in")
     })
   })
 })
diff --git a/cypress/e2e/userPayments.cy.js b/cypress/e2e/userPayments.cy.js
@@ -2,7 +2,7 @@ describe("user/payments", () => {
   describe("unauthenticated", () => {
     it("redirects to the login page", () => {
       cy.visit("user/payments")
-      cy.contains("Log in")
+      cy.contains("Sign up or log in")
     })
   })
 })
diff --git a/cypress/e2e/userShipping.cy.js b/cypress/e2e/userShipping.cy.js
@@ -2,7 +2,7 @@ describe("user/shipping", () => {
   describe("unauthenticated", () => {
     it("redirects to the login page", () => {
       cy.visit("user/shipping")
-      cy.contains("Log in")
+      cy.contains("Sign up or log in")
     })
   })
 })
diff --git a/docs/authentication.md b/docs/authentication.md
@@ -41,7 +41,6 @@ const YourComponent = () => {
     <Button
       onClick={() => {
         showAuthDialog({
-          mode: "Login",
           options: {
             title: "Login to save artworks",
           },

diff --git a/src/Apps/Artist/Routes/AuctionResults/ArtistAuctionResultItem.tsx b/src/Apps/Artist/Routes/AuctionResults/ArtistAuctionResultItem.tsx
@@ -58,12 +58,8 @@ export const ArtistAuctionResultItem: React.FC<Props> = props => {
     if (!user) {
       event.preventDefault()
       showAuthDialog({
-        mode: "SignUp",
         options: {
-          title: mode => {
-            const action = mode === "SignUp" ? "Sign up" : "Log in"
-            return `${action} to see full auction records — for free`
-          },
+          title: "Sign up or log in to see full auction records — for free",
         },
         analytics: {
           contextModule: ContextModule.auctionResult,
@@ -258,12 +254,8 @@ const ArtistAuctionResultItemPrice: React.FC<Props> = props => {
         textDecoration="underline"
         onClick={() => {
           showAuthDialog({
-            mode: "SignUp",
             options: {
-              title: mode => {
-                const action = mode === "SignUp" ? "Sign up" : "Log in"
-                return `${action} to see full auction records — for free`
-              },
+              title: "Sign up or log in to see full auction records — for free",
             },
             analytics: {
               contextModule: ContextModule.auctionResults,

diff --git a/src/Apps/Artist/Routes/AuctionResults/ArtistAuctionResults.tsx b/src/Apps/Artist/Routes/AuctionResults/ArtistAuctionResults.tsx
@@ -153,12 +153,8 @@ const AuctionResultsContainer: React.FC<AuctionResultsProps> = ({
         // If user is not logged-in, show auth modal, but only if it was never shown before.
         if (!user && !authShownForFiltering) {
           showAuthDialog({
-            mode: "SignUp",
             options: {
-              title: mode => {
-                const action = mode === "SignUp" ? "Sign up" : "Log in"
-                return `${action} to see auction results for ${artist.name}`
-              },
+              title: `Sign up or log in to see auction results for ${artist.name}`,
             },
             analytics: {
               contextModule: ContextModule.auctionResults,

diff --git a/src/Apps/Artwork/ArtworkApp.tsx b/src/Apps/Artwork/ArtworkApp.tsx
@@ -102,12 +102,8 @@ export const ArtworkApp: React.FC<Props> = props => {
     if (expectingPartnerOffer) {
       if (!isLoggedIn) {
         showAuthDialog({
-          mode: "Login",
           options: {
-            title: mode =>
-              mode === "Login"
-                ? "Log in to view gallery offer"
-                : "Sign up to buy art with ease",
+            title: "Log in or sign up to view gallery offer",
           },
           analytics: {
             // TODO: Placeholder - Determine correct tracking - EMI-1783

diff --git a/src/Apps/Artwork/Components/ArtworkDetails/RequestConditionReport.tsx b/src/Apps/Artwork/Components/ArtworkDetails/RequestConditionReport.tsx
@@ -83,7 +83,6 @@ export const RequestConditionReport: React.FC<RequestConditionReportProps> = pro
 
   const handleLoginClick = () => {
     showAuthDialog({
-      mode: "Login",
       analytics: {
         contextModule: ContextModule.aboutTheWork,
         intent: Intent.requestConditionReport,

diff --git a/src/Apps/Artwork/Components/ArtworkDetails/__tests__/RequestConditionReport.jest.tsx b/src/Apps/Artwork/Components/ArtworkDetails/__tests__/RequestConditionReport.jest.tsx
@@ -156,7 +156,6 @@ describe("RequestConditionReport", () => {
       await page.clickLogInButton()
 
       expect(showAuthDialog).toHaveBeenCalledWith({
-        mode: "Login",
         analytics: {
           contextModule: "aboutTheWork",
           intent: "requestConditionReport",

diff --git a/src/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarBidAction.tsx b/src/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarBidAction.tsx
@@ -103,7 +103,6 @@ export class ArtworkSidebarBidAction extends React.Component<
 
     if (!this.props.me) {
       this.props.showAuthDialog({
-        mode: "Login",
         options: {
           redirectTo,
           title: mode => {
@@ -174,26 +173,31 @@ export class ArtworkSidebarBidAction extends React.Component<
       let PreviewAction: React.FC
 
       if (registrationAttempted) {
+        // FIXME: Extract to a real component
         if (qualifiedForBidding) {
+          // eslint-disable-next-line react/no-unstable-nested-components
           PreviewAction = () => (
             <Button width="100%" size="large" mt={1} disabled>
               Registration complete
             </Button>
           )
         } else if (shouldPromptIdVerification) {
+          // eslint-disable-next-line react/no-unstable-nested-components
           PreviewAction = () => (
             <VerifyIdentityButton
               id={pendingIdentityVerification?.internalID || ""}
             />
           )
         } else {
+          // eslint-disable-next-line react/no-unstable-nested-components
           PreviewAction = () => (
             <Button width="100%" size="large" mt={1} disabled>
               Registration pending
             </Button>
           )
         }
       } else {
+        // eslint-disable-next-line react/no-unstable-nested-components
         PreviewAction = () => (
           <RegisterToBidButton onClick={this.redirectToRegister} />
         )

diff --git a/src/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarCommercialButtons.tsx b/src/Apps/Artwork/Components/ArtworkSidebar/ArtworkSidebarCommercialButtons.tsx
@@ -238,12 +238,8 @@ export const ArtworkSidebarCommercialButtons: React.FC<ArtworkSidebarCommercialB
       }
     } else {
       showAuthDialog({
-        mode: "SignUp",
         options: {
-          title: mode => {
-            const action = mode === "SignUp" ? "Sign up" : "Log in"
-            return `${action} to buy art with ease`
-          },
+          title: "Sign up or log in to buy art with ease",
           afterAuthAction: {
             action: "buyNow",
             kind: "artworks",
@@ -302,12 +298,8 @@ export const ArtworkSidebarCommercialButtons: React.FC<ArtworkSidebarCommercialB
       }
     } else {
       showAuthDialog({
-        mode: "SignUp",
         options: {
-          title: mode => {
-            const action = mode === "SignUp" ? "Sign up" : "Log in"
-            return `${action} to make an offer`
-          },
+          title: "Sign up or log in to make an offer",
           afterAuthAction: {
             action: "makeOffer",
             kind: "artworks",

diff --git a/...Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarCommercialButtons.jest.tsx b/...Apps/Artwork/Components/ArtworkSidebar/__tests__/ArtworkSidebarCommercialButtons.jest.tsx
@@ -531,9 +531,8 @@ describe("ArtworkSidebarCommercialButtons", () => {
       fireEvent.click(screen.getByText("Purchase"))
 
       expect(showAuthDialog).toBeCalledWith({
-        mode: "SignUp",
         options: {
-          title: expect.any(Function),
+          title: expect.any(String),
           afterAuthAction: {
             action: "buyNow",
             kind: "artworks",
@@ -570,9 +569,8 @@ describe("ArtworkSidebarCommercialButtons", () => {
       fireEvent.click(screen.getByText("Make an Offer"))
 
       expect(showAuthDialog).toBeCalledWith({
-        mode: "SignUp",
         options: {
-          title: expect.any(Function),
+          title: expect.any(String),
           afterAuthAction: {
             action: "makeOffer",
             kind: "artworks",

diff --git a/src/Apps/Artwork/__tests__/ArtworkApp.jest.tsx b/src/Apps/Artwork/__tests__/ArtworkApp.jest.tsx
@@ -127,9 +127,8 @@ describe("ArtworkApp", () => {
         analytics: {
           contextModule: "artworkSidebar",
         },
-        mode: "Login",
         options: {
-          title: expect.any(Function),
+          title: expect.any(String),
         },
       })
     })

diff --git a/src/Apps/Auction/Components/RegisterButton.tsx b/src/Apps/Auction/Components/RegisterButton.tsx
@@ -32,13 +32,9 @@ export const RegisterButton: React.FC<RegisterButtonProps> = ({ me, sale }) => {
 
     if (!me?.internalID) {
       showAuthDialog({
-        mode: "Login",
         options: {
           redirectTo: `${saleURL}/register`,
-          title: mode => {
-            const action = mode === "Login" ? "Log in" : "Sign up"
-            return `${action} to bid on artworks`
-          },
+          title: "Sign up or log in to bid on artworks",
         },
         analytics: {
           contextModule: ContextModule.auctionSidebar,
@@ -68,7 +64,7 @@ export const RegisterButton: React.FC<RegisterButtonProps> = ({ me, sale }) => {
     }
 
     case conditions.LIVE_OPEN: {
-      const liveUrl = sale.liveURLIfOpen!
+      const liveUrl = `${sale.liveURLIfOpen}`
       const href = me ? liveUrl + "/login" : liveUrl
 
       return (

diff --git a/src/Apps/Auction/Components/__tests__/RegisterButton.jest.tsx b/src/Apps/Auction/Components/__tests__/RegisterButton.jest.tsx
@@ -231,13 +231,12 @@ describe("RegisterButton", () => {
       ;(wrapper.find("ButtonAction").props() as any).onClick()
 
       expect(showAuthDialog).toHaveBeenCalledWith({
-        mode: "Login",
         analytics: {
           contextModule: "auctionSidebar",
           intent: "registerToBid",
         },
         options: {
-          title: expect.any(Function),
+          title: expect.any(String),
           redirectTo: "/auction/sale-slug/register",
         },
       })

diff --git a/src/Apps/Authentication/Components/AuthenticationInlineDialog.tsx b/src/Apps/Authentication/Components/AuthenticationInlineDialog.tsx
@@ -1,17 +1,16 @@
-import { Box, Flex, Join, Spacer, Text, useToasts } from "@artsy/palette"
+import { Box, Flex, Stack, Text, useToasts } from "@artsy/palette"
 import { AuthDialogView } from "Components/AuthDialog/AuthDialog"
 import { FC, useEffect } from "react"
 import { useRecaptcha } from "Utils/EnableRecaptcha"
-import ArtsyLogoIcon from "@artsy/icons/ArtsyLogoIcon"
 import { useAuthDialogOptions } from "Apps/Authentication/Hooks/useAuthDialogOptions"
 import { MetaTags } from "Components/MetaTags"
 import { AuthenticationInlineDialogProvider } from "Apps/Authentication/Components/AuthenticationInlineDialogProvider"
 import { AuthDialogMode } from "Components/AuthDialog/AuthDialogContext"
 import { useRouter } from "System/Hooks/useRouter"
+import { AuthDialogTitle } from "Components/AuthDialog/AuthDialogTitle"
 
 const AuthenticationInlineDialogContents: FC = () => {
   useRecaptcha()
-
   const { title, pageTitle, description } = useAuthDialogOptions()
 
   const { sendToast } = useToasts()
@@ -54,15 +53,8 @@ const AuthenticationInlineDialogContents: FC = () => {
         maxWidth={["100%", 450]}
       >
         <Box width="100%">
-          <Join separator={<Spacer y={2} />}>
-            <ArtsyLogoIcon
-              display="block"
-              style={{ width: "75px", height: "26px" }}
-            />
-
-            <Text variant="lg-display" lineClamp={6}>
-              {title}
-            </Text>
+          <Stack gap={2}>
+            <AuthDialogTitle title={title} />
 
             {description && (
               <Text variant="sm-display" lineClamp={6}>
@@ -71,7 +63,7 @@ const AuthenticationInlineDialogContents: FC = () => {
             )}
 
             <AuthDialogView />
-          </Join>
+          </Stack>
         </Box>
       </Flex>
     </>