diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-12 00:53:15 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-12 00:53:15 +0800 |
commit | faee7513952a4b87d5f9e9dde9deb20126f58834 (patch) | |
tree | 8168000e484e621e1526cf48fb0f979a6d98d972 /packages/website/ts/components/modals/modal_contact.tsx | |
parent | 742e5e039dd4e821209b5511fb6a194d11c6291c (diff) | |
parent | 2cf57a48dd2857dd5cf2f31f4c60dd47ae4d34a5 (diff) | |
download | dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar.gz dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar.bz2 dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar.lz dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar.xz dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.tar.zst dexon-sol-tools-faee7513952a4b87d5f9e9dde9deb20126f58834.zip |
Merge branch 'development' into feature/instant/asset-buyer-check-liquidity
Diffstat (limited to 'packages/website/ts/components/modals/modal_contact.tsx')
-rw-r--r-- | packages/website/ts/components/modals/modal_contact.tsx | 256 |
1 files changed, 184 insertions, 72 deletions
diff --git a/packages/website/ts/components/modals/modal_contact.tsx b/packages/website/ts/components/modals/modal_contact.tsx index d9c276584..62c1062a3 100644 --- a/packages/website/ts/components/modals/modal_contact.tsx +++ b/packages/website/ts/components/modals/modal_contact.tsx @@ -12,11 +12,18 @@ import { Icon } from 'ts/components/icon'; import { Input, InputWidth } from 'ts/components/modals/input'; import { Heading, Paragraph } from 'ts/components/text'; import { GlobalStyle } from 'ts/constants/globalStyle'; +import { utils } from 'ts/utils/utils'; + +export enum ModalContactType { + General = 'GENERAL', + MarketMaker = 'MARKET_MAKER', +} interface Props { theme?: GlobalStyle; isOpen?: boolean; onDismiss?: () => void; + modalContactType: ModalContactType; } interface FormProps { @@ -39,23 +46,30 @@ interface ErrorProps { } export class ModalContact extends React.Component<Props> { + public static defaultProps = { + modalContactType: ModalContactType.General, + }; public state = { isSubmitting: false, isSuccessful: false, errors: {}, }; + // shared fields public nameRef: React.RefObject<HTMLInputElement> = React.createRef(); public emailRef: React.RefObject<HTMLInputElement> = React.createRef(); public companyProjectRef: React.RefObject<HTMLInputElement> = React.createRef(); - public linkRef: React.RefObject<HTMLInputElement> = React.createRef(); public commentsRef: React.RefObject<HTMLInputElement> = React.createRef(); + // general lead fields + public linkRef: React.RefObject<HTMLInputElement> = React.createRef(); + // market maker lead fields + public countryRef: React.RefObject<HTMLInputElement> = React.createRef(); + public fundSizeRef: React.RefObject<HTMLInputElement> = React.createRef(); public constructor(props: Props) { super(props); } public render(): React.ReactNode { const { isOpen, onDismiss } = this.props; const { isSuccessful, errors } = this.state; - return ( <> <DialogOverlay @@ -68,58 +82,7 @@ export class ModalContact extends React.Component<Props> { <Heading color={colors.textDarkPrimary} size={34} asElement="h2"> Contact the 0x Core Team </Heading> - <Paragraph isMuted={true} color={colors.textDarkPrimary}> - If you're considering building on 0x, we're happy to answer your questions. Fill out the - form so we can connect you with the right person to help you get started. - </Paragraph> - <InputRow> - <Input - name="name" - label="Your name" - type="text" - width={InputWidth.Half} - ref={this.nameRef} - required={true} - errors={errors} - /> - <Input - name="email" - label="Your email" - type="email" - ref={this.emailRef} - required={true} - errors={errors} - width={InputWidth.Half} - /> - </InputRow> - <InputRow> - <Input - name="companyOrProject" - label="Name of your project / company" - type="text" - ref={this.companyProjectRef} - required={true} - errors={errors} - /> - </InputRow> - <InputRow> - <Input - name="link" - label="Do you have any documentation or a website?" - type="text" - ref={this.linkRef} - errors={errors} - /> - </InputRow> - <InputRow> - <Input - name="comments" - label="Anything else?" - type="textarea" - ref={this.commentsRef} - errors={errors} - /> - </InputRow> + {this._renderFormContent(errors)} <ButtonRow> <Button color="#5C5C5C" @@ -149,28 +112,182 @@ export class ModalContact extends React.Component<Props> { </> ); } + public _renderFormContent(errors: ErrorProps): React.ReactNode { + switch (this.props.modalContactType) { + case ModalContactType.MarketMaker: + return this._renderMarketMakerFormContent(errors); + case ModalContactType.General: + default: + return this._renderGeneralFormContent(errors); + } + } + private _renderMarketMakerFormContent(errors: ErrorProps): React.ReactNode { + return ( + <> + <Paragraph isMuted={true} color={colors.textDarkPrimary}> + If you’re considering market making on 0x, we’re happy to answer your questions. Fill out the form + so we can connect you with the right person to help you get started. + </Paragraph> + <InputRow> + <Input + name="name" + label="Your name" + type="text" + width={InputWidth.Half} + ref={this.nameRef} + required={true} + errors={errors} + /> + <Input + name="email" + label="Your email" + type="email" + ref={this.emailRef} + required={true} + errors={errors} + width={InputWidth.Half} + /> + </InputRow> + <InputRow> + <Input + name="country" + label="Country of Location" + type="text" + ref={this.countryRef} + required={true} + errors={errors} + /> + </InputRow> + <InputRow> + <Input + name="fundSize" + label="Fund Size" + type="text" + ref={this.fundSizeRef} + required={true} + errors={errors} + /> + </InputRow> + <InputRow> + <Input + name="companyOrProject" + label="Name of your project / company" + type="text" + ref={this.companyProjectRef} + required={false} + errors={errors} + /> + </InputRow> + <InputRow> + <Input + name="comments" + label="What is prompting you to reach out?" + type="textarea" + ref={this.commentsRef} + required={false} + errors={errors} + /> + </InputRow> + </> + ); + } + private _renderGeneralFormContent(errors: ErrorProps): React.ReactNode { + return ( + <> + <Paragraph isMuted={true} color={colors.textDarkPrimary}> + If you're considering building on 0x, we're happy to answer your questions. Fill out the form so we + can connect you with the right person to help you get started. + </Paragraph> + <InputRow> + <Input + name="name" + label="Your name" + type="text" + width={InputWidth.Half} + ref={this.nameRef} + required={true} + errors={errors} + /> + <Input + name="email" + label="Your email" + type="email" + ref={this.emailRef} + required={true} + errors={errors} + width={InputWidth.Half} + /> + </InputRow> + <InputRow> + <Input + name="companyOrProject" + label="Name of your project / company" + type="text" + ref={this.companyProjectRef} + required={true} + errors={errors} + /> + </InputRow> + <InputRow> + <Input + name="link" + label="Do you have any documentation or a website?" + type="text" + ref={this.linkRef} + errors={errors} + /> + </InputRow> + <InputRow> + <Input + name="comments" + label="Anything else?" + type="textarea" + ref={this.commentsRef} + errors={errors} + /> + </InputRow> + </> + ); + } private async _onSubmitAsync(e: Event): Promise<void> { e.preventDefault(); - const name = this.nameRef.current.value; - const email = this.emailRef.current.value; - const projectOrCompany = this.companyProjectRef.current.value; - const link = this.linkRef.current.value; - const comments = this.commentsRef.current.value; + let jsonBody; + if (this.props.modalContactType === ModalContactType.MarketMaker) { + jsonBody = { + name: this.nameRef.current.value, + email: this.emailRef.current.value, + country: this.countryRef.current.value, + fundSize: this.fundSizeRef.current.value, + projectOrCompany: this.companyProjectRef.current.value, + comments: this.commentsRef.current.value, + }; + } else { + jsonBody = { + name: this.nameRef.current.value, + email: this.emailRef.current.value, + projectOrCompany: this.companyProjectRef.current.value, + link: this.linkRef.current.value, + comments: this.commentsRef.current.value, + }; + } this.setState({ ...this.state, errors: [], isSubmitting: true }); + const endpoint = + this.props.modalContactType === ModalContactType.MarketMaker ? '/market_maker_leads' : '/leads'; + try { // Disabling no-unbound method b/c no reason for _.isEmpty to be bound // tslint:disable:no-unbound-method - const response = await fetch('https://website-api.0xproject.com/leads', { + const response = await fetch(`${utils.getBackendBaseUrl()}${endpoint}`, { method: 'post', mode: 'cors', credentials: 'same-origin', headers: { 'content-type': 'application/json; charset=utf-8', }, - body: JSON.stringify(_.omitBy({ name, email, projectOrCompany, link, comments }, _.isEmpty)), + body: JSON.stringify(_.omitBy(jsonBody, _.isEmpty)), }); if (!response.ok) { @@ -201,6 +318,7 @@ export class ModalContact extends React.Component<Props> { ); } } + // Handle errors: {"errors":[{"location":"body","param":"name","msg":"Invalid value"},{"location":"body","param":"email","msg":"Invalid value"}]} const InputRow = styled.div` @@ -243,28 +361,22 @@ const StyledDialogContent = styled(DialogContent)` } `; -const Form = - styled.form < - FormProps > - ` +const Form = styled.form<FormProps>` position: relative; - transition: opacity 0.30s ease-in-out, visibility 0.30s ease-in-out; + transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; opacity: ${props => props.isSuccessful && `0`}; visibility: ${props => props.isSuccessful && `hidden`}; `; -const Confirmation = - styled.div < - FormProps > - ` +const Confirmation = styled.div<FormProps>` position: absolute; top: 50%; text-align: center; width: 100%; left: 0; - transition: opacity 0.30s ease-in-out, visibility 0.30s ease-in-out; - transition-delay: 0.40s; + transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; + transition-delay: 0.4s; padding: 60px 60px; transform: translateY(-50%); opacity: ${props => (props.isSuccessful ? `1` : `0`)}; |