This repository has been archived by the owner on Mar 23, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 193
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: contact us modal component (#2080)
- Loading branch information
1 parent
f6572ce
commit 7c536fc
Showing
26 changed files
with
599 additions
and
91 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,3 +5,4 @@ src/i18n | |
| dist/ | ||
| build/ | ||
| coverage/ | ||
| config-overrides.js | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
src/domains/help/components/ContactUs/ContactUs.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import React from "react"; | ||
| import { ContactUs } from "./"; | ||
| import { boolean } from "@storybook/addon-knobs"; | ||
|
|
||
| export default { title: "Help / Components / ContactUs" }; | ||
|
|
||
| export const Default = () => ( | ||
| <ContactUs | ||
| isOpen={boolean("Is Open", true)} | ||
| onClose={() => alert("closed")} | ||
| onCancel={() => alert("cancelled")} | ||
| onSend={() => alert("sent")} | ||
| /> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import React from "react"; | ||
| import { injectIntl, WrappedComponentProps } from "react-intl"; | ||
| import { useForm } from "react-hook-form"; | ||
| // UI Elements | ||
| import { Modal } from "app/components/Modal"; | ||
| import { Button } from "app/components/Button"; | ||
| import { Circle } from "app/components/Circle"; | ||
| import { Form, FormField, FormLabel, FormHelperText } from "app/components/Form"; | ||
| import { Input } from "app/components/Input"; | ||
| import { Select } from "app/components/Select"; | ||
| import { Icon } from "app/components/Icon"; | ||
| import { Textarea } from "app/components/Textarea"; | ||
|
|
||
| type ContactUsProps = { | ||
| isOpen: boolean; | ||
| onClose?: any; | ||
| onCancel?: any; | ||
| onSend: any; | ||
| } & WrappedComponentProps; | ||
|
|
||
| export const ContactUs = injectIntl(({ intl: { formatMessage }, ...props }: ContactUsProps) => { | ||
| const methods = useForm({ mode: "onChange" }); | ||
|
|
||
| return ( | ||
| <Modal | ||
| title={formatMessage({ id: "HELP.MODAL_CONTACT_US.TITLE" })} | ||
| description={formatMessage({ id: "HELP.MODAL_CONTACT_US.DESCRIPTION" })} | ||
| isOpen={props.isOpen} | ||
| onClose={props.onClose} | ||
| > | ||
| <div className="flex border-b border-gray-500 text-black mt-2 mb-8 -mx-16 px-16 pb-8"> | ||
| <a href="https://twitter.ark.io" className="rounded-full mr-2 hover:bg-theme-neutral-300"> | ||
| <Circle className="border-black hover:bg-transparent" noShadow={true}> | ||
| <Icon name="twitter" /> | ||
| </Circle> | ||
| </a> | ||
|
|
||
| <a href="https://slack.ark.io" className="rounded-full mr-2 hover:bg-theme-neutral-300"> | ||
| <Circle className="border-black hover:bg-transparent" noShadow={true}> | ||
| <Icon name="slack" /> | ||
| </Circle> | ||
| </a> | ||
|
|
||
| <a href="https://discord.ark.io/" className="rounded-full mr-2 hover:bg-theme-neutral-300"> | ||
| <Circle className="border-black hover:bg-transparent" noShadow={true}> | ||
| <Icon name="discord" /> | ||
| </Circle> | ||
| </a> | ||
|
|
||
| <a href="mailto:info@ark.io" className="rounded-full hover:bg-theme-neutral-300"> | ||
| <Circle className="border-black hover:bg-transparent" noShadow={true}> | ||
| <Icon name="send" /> | ||
| </Circle> | ||
| </a> | ||
| </div> | ||
|
|
||
| <Form context={methods} onSubmit={props.onSend}> | ||
| <FormField name="name"> | ||
| <FormLabel>{formatMessage({ id: "HELP.MODAL_CONTACT_US.FIELD_NAME" })}</FormLabel> | ||
| <Input ref={methods.register({ required: "Field required" })} /> | ||
| <FormHelperText /> | ||
| </FormField> | ||
|
|
||
| <FormField name="email"> | ||
| <FormLabel>{formatMessage({ id: "HELP.MODAL_CONTACT_US.FIELD_EMAIL" })}</FormLabel> | ||
| <Input ref={methods.register({ required: "Field required" })} /> | ||
| <FormHelperText /> | ||
| </FormField> | ||
|
|
||
| <FormField name="subject"> | ||
| <FormLabel>{formatMessage({ id: "HELP.MODAL_CONTACT_US.FIELD_SUBJECT" })}</FormLabel> | ||
| <Select | ||
| ref={methods.register({ | ||
| required: formatMessage({ id: "HELP.MODAL_CONTACT_US.SUBJECT_REQUIRED" }), | ||
| })} | ||
| > | ||
| <option value="">{formatMessage({ id: "COMMON_SELECT" })}</option> | ||
| <option value="security"> | ||
| {formatMessage({ id: "HELP.MODAL_CONTACT_US.SUBJECT_OPTION.SECURITY" })} | ||
| </option> | ||
| <option value="other"> | ||
| {formatMessage({ id: "HELP.MODAL_CONTACT_US.SUBJECT_OPTION.OTHER" })} | ||
| </option> | ||
| </Select> | ||
| </FormField> | ||
|
|
||
| <FormField name="message"> | ||
| <FormLabel>{formatMessage({ id: "HELP.MODAL_CONTACT_US.FIELD_MESSAGE" })}</FormLabel> | ||
| <Textarea | ||
| ref={methods.register({ | ||
| required: formatMessage({ id: "HELP.MODAL_CONTACT_US.MESSAGE_REQUIRED" }), | ||
| })} | ||
| /> | ||
| </FormField> | ||
|
|
||
| <div className="mt-4"> | ||
| <Button color="primary" variant="plain" onClick={props.onCancel} className="mr-2"> | ||
| {formatMessage({ id: "COMMON_CANCEL" })} | ||
| </Button> | ||
|
|
||
| <Button type="submit" color="primary" variant="solid"> | ||
| {formatMessage({ id: "COMMON_SEND" })} | ||
| </Button> | ||
| </div> | ||
| </Form> | ||
| </Modal> | ||
| ); | ||
| }); | ||
|
|
||
| ContactUs.defaultProps = { | ||
| isOpen: false, | ||
| }; | ||
|
|
||
| ContactUs.displayName = "ContactUs"; |
40 changes: 40 additions & 0 deletions
40
src/domains/help/components/ContactUs/__tests__/ContactUs.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import React from "react"; | ||
| import { IntlProvider } from "react-intl"; | ||
| import { render } from "@testing-library/react"; | ||
|
|
||
| import { ContactUs } from "../"; | ||
| // i18n | ||
| import { locales } from "i18n/locales"; | ||
|
|
||
| describe("ContactUs", () => { | ||
| beforeEach(() => { | ||
| jest.spyOn(console, "error").mockImplementation(() => null); | ||
| }); | ||
|
|
||
| it("should not render if not open", () => { | ||
| const { asFragment, getByTestId } = render( | ||
| <IntlProvider locale="en-US" messages={locales["en-US"].messages}> | ||
| <ContactUs isOpen={false} onSend={() => void 0} /> | ||
| </IntlProvider>, | ||
| ); | ||
|
|
||
| expect(() => getByTestId("modal__inner")).toThrow(/Unable to find an element by/); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it("should render a modal", () => { | ||
| const { asFragment, getByTestId } = render( | ||
| <IntlProvider locale="en-US" messages={locales["en-US"].messages}> | ||
| <ContactUs isOpen={true} onSend={() => void 0} /> | ||
| </IntlProvider>, | ||
| ); | ||
|
|
||
| expect(getByTestId("modal__inner")).toHaveTextContent("HELP.MODAL_CONTACT_US.TITLE"); | ||
| expect(getByTestId("modal__inner")).toHaveTextContent("HELP.MODAL_CONTACT_US.DESCRIPTION"); | ||
| expect(getByTestId("modal__inner")).toHaveTextContent("HELP.MODAL_CONTACT_US.FIELD_NAME"); | ||
| expect(getByTestId("modal__inner")).toHaveTextContent("HELP.MODAL_CONTACT_US.FIELD_EMAIL"); | ||
| expect(getByTestId("modal__inner")).toHaveTextContent("HELP.MODAL_CONTACT_US.FIELD_SUBJECT"); | ||
| expect(getByTestId("modal__inner")).toHaveTextContent("HELP.MODAL_CONTACT_US.FIELD_MESSAGE"); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
| }); |
Oops, something went wrong.