Show a banner based on some url param (#5620)

Co-authored-by: Erik Stockmeier <erik.d.stock@gmail.com>

Co-authored-by: Daniel Levenson <dleve123@gmail.com>

.gitignore

@@ -45,3 +45,6 @@ cypress/screenshots
 reports*
 junit.xml
 cypress/videos
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

cypress/integration/flashMessage.spec.js

@@ -0,0 +1,14 @@
+describe("flash_message", () => {
+  it("renders the email confirmed banner when ?flash_message is confirmed", () => {
+    cy.visit("/?flash_message=confirmed")
+    cy.get("#main-layout-header").should(
+      "contain",
+      "Your email has been confirmed"
+    )
+  })
+
+  it("ignores flash messages that aren't explicitly supported", () => {
+    cy.visit("/?flash_message=l33thaxor")
+    cy.get("#main-layout-header").should("not.contain", "l33thaxor")
+  })
+})

src/desktop/components/react/stitch_components/NavBar.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import styled from "styled-components"
 import { NavBar as ReactionNavBar } from "v2/Components/NavBar"
+import { FlashBanner } from "v2/Components/FlashBanner"
 import { data as sd } from "sharify"
 
 import { SystemContextProvider, SystemContextProps } from "v2/Artsy"
@@ -42,6 +43,7 @@ export const NavBar: React.FC<NavBarProps> = ({
       <NavBarContainer id="main-layout-header">
         {showStagingBanner && <StagingBanner />}
         <ReactionNavBar />
+        <FlashBanner />
       </NavBarContainer>
     </SystemContextProvider>
   )

src/v2/Components/FlashBanner.tsx → src/v2/Components/FlashBanner/FlashMessage.tsx

@@ -1,34 +1,22 @@
 import React from "react"
 import { Banner, Sans } from "@artsy/palette"
 
-interface Props {
-  messageCode: FlashMessageKey
-}
-
-export type FlashMessageKey =
-  /* email confirmed */
-  | "confirmed"
-  /* email already confirmed */
-  | "already_confirmed"
-  /* email confirmation token was invalid */
-  | "invalid_token"
-  /* email confirmation token was empty */
-  | "blank_token"
-  /* email confirmation token was expired */
-  | "expired_token"
-
-const messages: Record<FlashMessageKey, string | React.FC> = {
+/** Flash messages triggered by a url `flash_message` query param
+ * A message can be a string or a React Component that takes no props
+ * (that is, use relay or context if necessary)
+ */
+const messageByQueryParam: { [k: string]: string | React.FC } = {
   confirmed: "Your email has been confirmed.",
   already_confirmed: "You have already confirmed your email.",
   invalid_token: "An error has occurred. Please contact support@artsy.net.",
   blank_token: "An error has occurred. Please contact support@artsy.net.",
   expired_token: "Link expired. Resend verification email.",
 }
 
-export const FlashBanner: React.FunctionComponent<Props> = ({
+export const FlashMessage: React.FC<{ messageCode: string }> = ({
   messageCode,
 }) => {
-  const Message = messages[messageCode]
+  const Message = messageByQueryParam[messageCode]
   if (!Message) return null
   return (
     Message && (

src/v2/Components/FlashBanner/__tests__/FlashBanner.jest.tsx

@@ -0,0 +1,32 @@
+import { mount } from "enzyme"
+import "jest-styled-components"
+import React from "react"
+import { FlashBanner } from "v2/Components/FlashBanner"
+
+const { location: originalLocation } = window
+
+describe("FlashBanner", () => {
+  afterEach(() => {
+    window.location = originalLocation
+  })
+
+  it("renders a banner based on a messageCode prop", () => {
+    const wrapper = mount(<FlashBanner messageCode="confirmed" />)
+    expect(wrapper.text()).toContain("Your email has been confirmed.")
+  })
+
+  it("returns nothing without complaint if the message code is not supported", () => {
+    const wrapper = mount(<FlashBanner messageCode="bad_message" />)
+    expect(wrapper.html()).toBeNull()
+  })
+
+  it("can determine a messageCode from the query string", () => {
+    delete window.location
+    const fakeLocation: any = { search: "?flash_message=expired_token" }
+    window.location = fakeLocation
+
+    const wrapper = mount(<FlashBanner />)
+
+    expect(wrapper.text()).toContain("Link expired. Resend verification email.")
+  })
+})

src/v2/Components/FlashBanner/index.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import qs from "qs"
+import { Banner, Sans } from "@artsy/palette"
+
+/** Flash messages triggered by a url `flash_message` query param
+ * A message can be a string or a React Component that takes no props
+ * (that is, use relay or context if necessary)
+ */
+const messageByQueryParam: { [k: string]: string | React.FC } = {
+  confirmed: "Your email has been confirmed.",
+  already_confirmed: "You have already confirmed your email.",
+  invalid_token: "An error has occurred. Please contact support@artsy.net.",
+  blank_token: "An error has occurred. Please contact support@artsy.net.",
+  expired_token: "Link expired. Resend verification email.",
+}
+
+/**
+ * The component responsible for selecting a flash message key from the `flash_message` url query param
+ */
+export const FlashBanner: React.FunctionComponent<{
+  messageCode?: string
+}> = props => {
+  const [messageCode, setMessageCode] = React.useState(props.messageCode)
+
+  React.useEffect(() => {
+    if (!messageCode) {
+      const query = qs.parse(window.location.search.slice(1))
+      if (query["flash_message"]) setMessageCode(query["flash_message"])
+    }
+  }, [])
+
+  if (!messageCode) return null
+  const Message = messageByQueryParam[messageCode]
+  if (!Message) return null
+
+  return (
+    <Banner dismissable backgroundColor="black100">
+      <Sans color="white100" size="3" lineHeight={1} weight="medium">
+        {typeof Message === "string" ? Message : <Message />}
+      </Sans>
+    </Banner>
+  )
+}