email confirmation message banner (#3576)

* email confirmation message banner

* rename EmailConfirmationBanner to FlashBanner

* refactor message formatting and add a test

src/Components/FlashBanner.tsx

@@ -0,0 +1,44 @@
+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"
+
+type BannerMessage = string | React.FC
+
+const messages: Record<FlashMessageKey, BannerMessage> = {
+  confirmed: "Your email has been confirmed.",
+  already_confirmed: "You have already confirmed your email.",
+  invalid_token: "Your token is invalid. Please try again.",
+  blank_token: "No token found. Please try again.",
+  expired_token: "An error has occurred. Please try again.",
+}
+
+export const FlashBanner: React.FunctionComponent<Props> = ({
+  messageCode,
+}) => {
+  const Message = messages[messageCode]
+  if (!Message) return null
+  return (
+    Message && (
+      <Banner dismissable backgroundColor="black100">
+        <Sans color="white100" size="3" lineHeight={1} weight="medium">
+          {typeof Message === "string" ? Message : <Message />}
+        </Sans>
+      </Banner>
+    )
+  )
+}

src/Components/MinimalCtaBanner.tsx

@@ -58,7 +58,12 @@ export class MinimalCtaBanner extends React.Component<
               </Sans>
             </a>
             <IconContainer onClick={this.dismissCta.bind(this) as any}>
-              <Icon name="close" color={this.props.textColor} fontSize="16px" />
+              <Icon
+                name="close"
+                color={this.props.textColor}
+                fontSize="16px"
+                style={{ cursor: "pointer" }}
+              />
             </IconContainer>
           </Banner>
         </BannerContainer>

src/Components/__stories__/CtaBanner.story.tsx

@@ -1,6 +1,5 @@
-import { storiesOf } from "@storybook/react"
 import React from "react"
-
+import { storiesOf } from "storybook/storiesOf"
 import { MinimalCtaBanner } from "../MinimalCtaBanner"
 
 storiesOf("Components/MinimalCtaBanner", module).add(
@@ -12,6 +11,7 @@ storiesOf("Components/MinimalCtaBanner", module).add(
       position="bottom"
       textColor="white"
       backgroundColor="black"
+      show
     />
   )
 )

src/Components/__stories__/FlashBanner.story.tsx

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

src/Components/__tests__/FlashBanner.test.tsx

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