Merge pull request #13605 from artsy/mc-jones/refactor-inquiry-auth-flow

refactor: remove existing user check from inquiry auth flow
artsy · Mar 18, 2024 · 8420496 · 8420496
2 parents 003a39e + 11b3e67
commit 8420496
Show file tree

Hide file tree

Showing 11 changed files with 245 additions and 296 deletions.
diff --git a/src/Components/AuthDialog/Utils/formatErrorMessage.ts b/src/Components/AuthDialog/Utils/formatErrorMessage.ts
@@ -12,9 +12,6 @@ export const formatErrorMessage = (error: Error) => {
     case "User Already Exists":
       return "An account with this email already exists."
 
-    case "User Not Found":
-      return "No account with this email exists."
-
     case `Unexpected token '<', "<!DOCTYPE "... is not valid JSON`:
     case `Unexpected token '<', "<html> <"... is not valid JSON`:
       return "An error occurred. Please try again."

diff --git a/src/Components/Inquiry/Views/InquiryAccount.tsx b/src/Components/Inquiry/Views/InquiryAccount.tsx
@@ -1,5 +1,4 @@
-import * as React from "react";
-import { InquiryExistingUserQueryRenderer } from "./InquiryExistingUser"
+import * as React from "react"
 import { InquirySignUp } from "./InquirySignUp"
 import { InquiryLogin } from "./InquiryLogin"
 import { InquiryResetPassword } from "./InquiryResetPassword"
@@ -27,16 +26,14 @@ export const useInquiryAccountContext = () => {
 }
 
 export const InquiryAccount: React.FC = () => {
-  const [screen, navigateTo] = useState(Screen.ExistingUser)
+  const [screen, navigateTo] = useState(Screen.SignUp)
 
   return (
     <InquiryAccountContext.Provider value={{ screen, navigateTo }}>
       {(() => {
         switch (screen) {
           case Screen.Login:
             return <InquiryLogin />
-          case Screen.ExistingUser:
-            return <InquiryExistingUserQueryRenderer />
           case Screen.SignUp:
             return <InquirySignUp />
           case Screen.ResetPassword:

diff --git a/src/Components/Inquiry/Views/InquiryExistingUser.tsx b/src/Components/Inquiry/Views/InquiryExistingUser.tsx
diff --git a/src/Components/Inquiry/Views/InquiryInquiry.tsx b/src/Components/Inquiry/Views/InquiryInquiry.tsx
@@ -4,7 +4,6 @@ import {
   Button,
   Flex,
   Image,
-  Input,
   Separator,
   Skeleton,
   SkeletonBox,
@@ -23,7 +22,6 @@ import { useArtworkInquiryRequest } from "Components/Inquiry/Hooks/useArtworkInq
 import { wait } from "Utils/wait"
 import {
   useInquiryContext,
-  InquiryState,
   AUTOMATED_MESSAGES,
 } from "Components/Inquiry/Hooks/useInquiryContext"
 import { SystemQueryRenderer } from "System/Relay/SystemQueryRenderer"
@@ -53,12 +51,6 @@ const InquiryInquiry: React.FC<InquiryInquiryProps> = ({ artwork }) => {
     setInquiry(prevState => ({ ...prevState, message: value }))
   }
 
-  const handleInputChange = (name: keyof InquiryState) => (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    setInquiry(prevState => ({ ...prevState, [name]: event.target.value }))
-  }
-
   const handleSubmit = async (event: React.FormEvent<HTMLElement>) => {
     event.preventDefault()
 
@@ -158,35 +150,14 @@ const InquiryInquiry: React.FC<InquiryInquiryProps> = ({ artwork }) => {
         required
       />
 
-      {!user && (
-        <>
-          <Input
-            name="name"
-            title="Your name"
-            placeholder="Your full name"
-            onChange={handleInputChange("name")}
-            required
-            my={1}
-          />
-
-          <Input
-            name="email"
-            title="Your email"
-            placeholder="Your email address"
-            onChange={handleInputChange("email")}
-            type="email"
-            required
-            my={1}
-          />
-
-          <Text variant="xs">
-            By clicking send, you accept our{" "}
-            <RouterLink inline to="/privacy" target="_blank">
-              Privacy Policy.
-            </RouterLink>
-          </Text>
-        </>
-      )}
+      <Spacer y={1} />
+
+      <Text variant="xs">
+        By clicking send, you accept our{" "}
+        <RouterLink inline to="/privacy" target="_blank">
+          Privacy Policy.
+        </RouterLink>
+      </Text>
 
       <Spacer y={1} />
 

diff --git a/src/Components/Inquiry/Views/InquiryLogin.tsx b/src/Components/Inquiry/Views/InquiryLogin.tsx
@@ -26,6 +26,7 @@ import {
   Intent,
   SuccessfullyLoggedIn,
 } from "@artsy/cohesion"
+import { formatErrorMessage } from "Components/AuthDialog/Utils/formatErrorMessage"
 
 type Mode =
   | "Pending"
@@ -36,6 +37,7 @@ type Mode =
   | "Success"
 
 interface InquiryLoginState {
+  email: string
   password: string
   authenticationCode: string
 }
@@ -47,6 +49,7 @@ export const InquiryLogin: React.FC = () => {
     inquiry,
     next,
     setContext,
+    setInquiry,
     setRelayEnvironment,
   } = useInquiryContext()
   const { navigateTo } = useInquiryAccountContext()
@@ -56,8 +59,11 @@ export const InquiryLogin: React.FC = () => {
   const [state, setState] = useState<InquiryLoginState>({
     password: "",
     authenticationCode: "",
+    email: inquiry.email ?? "",
   })
 
+  const [error, setError] = useState("")
+
   const { submitArtworkInquiryRequest } = useArtworkInquiryRequest()
 
   const { trackEvent } = useTracking()
@@ -68,7 +74,7 @@ export const InquiryLogin: React.FC = () => {
     setMode("Loading")
 
     try {
-      const { user } = await login({ email: inquiry.email!, ...state })
+      const { user } = await login({ ...state })
 
       setContext({
         collectorLevel: user.collector_level,
@@ -127,15 +133,18 @@ export const InquiryLogin: React.FC = () => {
         return
       }
 
-      // TODO: Improve error messaging
       setMode("Error")
+      setError(formatErrorMessage(err))
       logger.error(err)
     }
   }
 
   const handleInputChange = (name: keyof InquiryLoginState) => (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
+    if (name === "email") {
+      setInquiry(prevState => ({ ...prevState, [name]: event.target.value }))
+    }
     setState(prevState => ({ ...prevState, [name]: event.target.value }))
     mode === "Error" && setMode("Pending")
   }
@@ -148,24 +157,30 @@ export const InquiryLogin: React.FC = () => {
     <>
       <Box as="form" onSubmit={handleSubmit}>
         <Text variant="lg-display" mr={4}>
-          We found an Artsy account associated with {inquiry.email}.
-        </Text>
-
-        <Text variant="lg-display" mr={4} my={1}>
-          Please log in to continue.
+          Log in to send your message
         </Text>
 
         <Separator my={2} />
 
+        <Input
+          name="email"
+          title="Email"
+          defaultValue={inquiry.email}
+          placeholder="Your email address"
+          onChange={handleInputChange("email")}
+          type="email"
+          required
+          autoFocus
+          my={1}
+        />
+
         <Input
           name="password"
           title="Password"
           placeholder="Enter your password"
           onChange={handleInputChange("password")}
           type="password"
-          error={mode === "Error" && "Invalid password"}
           required
-          autoFocus
           my={1}
         />
 
@@ -189,6 +204,8 @@ export const InquiryLogin: React.FC = () => {
           />
         )}
 
+        {mode === "Error" && <Message variant="error">{error}</Message>}
+
         <Spacer y={2} />
 
         <Button
@@ -203,6 +220,21 @@ export const InquiryLogin: React.FC = () => {
 
         <Spacer y={2} />
 
+        <Text variant="xs" color="black60" textAlign="center">
+          Don't have an account?{" "}
+          <Clickable
+            data-test="login"
+            textDecoration="underline"
+            onClick={() => {
+              navigateTo(Screen.SignUp)
+            }}
+          >
+            Sign up.
+          </Clickable>
+        </Text>
+
+        <Spacer y={2} />
+
         <Flex alignItems="center" justifyContent="flex-end">
           <Clickable textDecoration="underline" onClick={handleClick}>
             <Text variant="sm">Forgot your password?</Text>