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

@@ -1,9 +1,6 @@
 import React from "react"
 import { Banner, Sans } from "@artsy/palette"
-
-interface Props {
-  messageCode: FlashMessageKey
-}
+import qs from "qs"
 
 export type FlashMessageKey =
   /* email confirmed */
@@ -25,7 +22,22 @@ const messages: Record<FlashMessageKey, string | React.FC> = {
   expired_token: "Link expired. Resend verification email.",
 }
 
-export const FlashBanner: React.FunctionComponent<Props> = ({
+export const FlashBanner: React.FunctionComponent = () => {
+  const [messageCode, setMessageCode] = React.useState(null)
+  const isClient = typeof window !== "undefined"
+
+  React.useEffect(() => {
+    if (isClient) {
+      const query = qs.parse(window.location.search.slice(1))
+      query["flash_message"] && setMessageCode(query["flash_message"])
+    }
+  }, [])
+
+  if (!messageCode) return null
+  return <FlashMessage messageCode={messageCode} />
+}
+
+export const FlashMessage: React.FC<{ messageCode: string }> = ({
   messageCode,
 }) => {
   const Message = messages[messageCode]

src/v2/Components/FlashBanner.story.tsx → src/v2/Components/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"
 
 storiesOf("Components/FlashBanner", module).add(
   "Successful Confirmation Message",
   () => {
-    return <FlashBanner messageCode="confirmed" />
+    return <FlashMessage messageCode="confirmed" />
   }
 )

src/v2/Components/__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 "../FlashBanner"
 
 describe("FlashBanner", () => {
   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()
   })
 })