diff --git a/src/Components/FlashBanner.tsx b/src/Components/FlashBanner.tsx new file mode 100644 index 0000000000..be3d62ff4e --- /dev/null +++ b/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 = { + 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 = ({ + messageCode, +}) => { + const Message = messages[messageCode] + if (!Message) return null + return ( + Message && ( + + + {typeof Message === "string" ? Message : } + + + ) + ) +} diff --git a/src/Components/MinimalCtaBanner.tsx b/src/Components/MinimalCtaBanner.tsx index 3b8f623a1f..bbbf2b9250 100644 --- a/src/Components/MinimalCtaBanner.tsx +++ b/src/Components/MinimalCtaBanner.tsx @@ -58,7 +58,12 @@ export class MinimalCtaBanner extends React.Component< - + diff --git a/src/Components/__stories__/CtaBanner.story.tsx b/src/Components/__stories__/CtaBanner.story.tsx index 70e0742b67..f4b9f57e00 100644 --- a/src/Components/__stories__/CtaBanner.story.tsx +++ b/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 /> ) ) diff --git a/src/Components/__stories__/FlashBanner.story.tsx b/src/Components/__stories__/FlashBanner.story.tsx new file mode 100644 index 0000000000..f8f9ad8f95 --- /dev/null +++ b/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 + } +) diff --git a/src/Components/__tests__/FlashBanner.test.tsx b/src/Components/__tests__/FlashBanner.test.tsx new file mode 100644 index 0000000000..31f6c9d5ed --- /dev/null +++ b/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() + expect(wrapper.text()).toContain("Your email has been confirmed.") + }) + + it("returns nothing without complaint if the message code is not supported", () => { + const wrapper = mount() + expect(wrapper.html()).toBeNull() + }) +})