Show a banner based on some url param

.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

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/test/acceptance/home.js

@@ -26,4 +26,17 @@ describe("Home page", () => {
     const $ = await browser.page("/")
     $.html().should.containEql("Browse Works for Sale")
   })
+
+  it("renders the email confirmed banner when flash_message is confirmed", async () => {
+    const $ = await browser.page("/?flash_message=confirmed")
+
+    $("div[class*=Banner__Wrapper]").should.have.length(1)
+    $.html().should.containEql("Your email has been confirmed")
+  })
+
+  it("ignores flash_message that isn't explicitly supported", async () => {
+    const $ = await browser.page("/?flash_message=l33thaxor")
+
+    $("div[class*=Banner__Wrapper]").should.have.length(0)
+  })
 })

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.story.tsx → src/v2/Components/FlashBanner/__stories__/FlashMessage.story.tsx

@@ -1,10 +1,10 @@
 import React from "react"
 import { storiesOf } from "storybook/storiesOf"
-import { FlashBanner } from "v2/Components/FlashBanner"
+import { FlashMessage } from "v2/Components/FlashBanner/FlashMessage"
 
 storiesOf("Components/FlashBanner", module).add(
   "Successful Confirmation Message",
   () => {
-    return <FlashBanner messageCode="confirmed" />
+    return <FlashMessage messageCode="confirmed" />
   }
 )

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

@@ -1,16 +1,16 @@
 import { mount } from "enzyme"
 import "jest-styled-components"
 import React from "react"
-import { FlashBanner } from "../FlashBanner"
+import { FlashMessage } from "../FlashMessage"
 
-describe("FlashBanner", () => {
+describe("FlashMessage", () => {
   it("renders a banner based on a message code", () => {
-    const wrapper = mount(<FlashBanner messageCode="confirmed" />)
+    const wrapper = mount(<FlashMessage 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" as any} />)
+    const wrapper = mount(<FlashMessage messageCode="bad_message" />)
     expect(wrapper.html()).toBeNull()
   })
 })

src/v2/Components/FlashBanner/index.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import qs from "qs"
+import { FlashMessage } from "./FlashMessage"
+
+/**
+ * The component responsible for selecting a flash message key from the `flash_message` url query param
+ */
+export const FlashBanner: React.FunctionComponent = () => {
+  const [messageCode, setMessageCode] = React.useState(null)
+
+  React.useEffect(() => {
+    const query = qs.parse(window.location.search.slice(1))
+    if (query["flash_message"]) setMessageCode(query["flash_message"])
+  }, [])
+
+  if (!messageCode) return null
+  return <FlashMessage messageCode={messageCode} />
+}