Add contact modal to pages with contact link

4 files changed, 112 insertions, 59 deletions

diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx
index e8c846947..e779c5889 100644
--- a/packages/website/ts/@next/components/banner.tsx
+++ b/packages/website/ts/@next/components/banner.tsx
@@ -17,7 +17,8 @@ interface Props {
 
 interface CTAButton {
     text: string;
-    href: string;
+    href?: string;
+    onClick?: () => void;
 }
 
 interface BorderProps {
@@ -64,6 +65,7 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
                     {secondaryCta &&
                         <Button
                             href={secondaryCta.href}
+                            onClick={secondaryCta.onClick}
                             isTransparent={true}
                         >
                             {secondaryCta.text}
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index 6f78c9bd3..85422b6e6 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -13,6 +13,7 @@ import {Section, SectionProps} from 'ts/@next/components/newLayout';
 import {SiteWrap} from 'ts/@next/components/siteWrap';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 import { Configurator } from 'ts/@next/pages/instant/configurator';
+import { ModalContact } from '../components/modals/modal_contact';
 
 const featuresData = [
     {
@@ -58,58 +59,82 @@ const featuresData = [
     },
 ];
 
-export const Next0xInstant = () => (
-    <SiteWrap>
-        <Hero
-            title="Introducing 0x Instant"
-            description="A free and flexible way to offer simple crypto purchasing in any app or website"
-            actions={<Button href="#">Get Started</Button>}
-        />
-
-        <Section isFullWidth={true} isPadded={false} padding="30px 0">
-          <MarqueeWrap>
-              <div>
-                  {[...Array(18)].map((item, index) => (
-                    <Card key={`card-${index}`} index={index}>
-                      <img src={`/images/@next/0x-instant/widget-${(index % 6) + 1}.png`} />
-                    </Card>
-                  ))}
-              </div>
-          </MarqueeWrap>
-        </Section>
-
-        <Section>
-            {_.map(featuresData, (item, index) => (
-                <Definition
-                    key={`definition-${index}`}
-                    icon={item.icon}
-                    title={item.title}
-                    description={item.description}
-                    isInlineIcon={true}
-                    iconSize={240}
-                    actions={item.links}
+interface Props {
+    theme: {
+        bgColor: string;
+        textColor: string;
+        linkColor: string;
+    };
+}
+
+export class Next0xInstant extends React.Component<Props> {
+    public state = {
+        isContactModalOpen: false,
+    };
+    public render(): React.ReactNode {
+        return  (
+            <SiteWrap>
+                <Hero
+                    title="Introducing 0x Instant"
+                    description="A free and flexible way to offer simple crypto purchasing in any app or website"
+                    actions={<Button href="#">Get Started</Button>}
                 />
-            ))}
-        </Section>
-
-        <ConfiguratorSection maxWidth="1386px" padding="0 58px 70px" bgColor={colors.backgroundDark}>
-          <Heading>0x Instant Configurator</Heading>
-          <Configurator />
-        </ConfiguratorSection>
-
-        <Banner
-            heading="Need more flexibility?"
-            subline="Dive into our docs, or contact us if needed"
-            mainCta={{ text: 'Explore the Docs', href: '/docs' }}
-            secondaryCta={{ text: 'Get in Touch', href: '/contact' }}
-        />
-
-        <Section maxWidth="1170px" isPadded={false} padding="60px 0">
-              <Paragraph size="small" isMuted={0.5}>Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and blockchain-native tokens, including through any software developed using the licensed work created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, Version 2.0 applicable to the Work, developers are “solely responsible for determining the appropriateness of using or redistributing the Work,” which includes responsibility for ensuring compliance with any such applicable laws and regulations.</Paragraph>
-              <Paragraph size="small" isMuted={0.5}>See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations.</Paragraph>
-        </Section>
-    </SiteWrap>
-);
+
+                <Section isFullWidth={true} isPadded={false} padding="30px 0">
+                <MarqueeWrap>
+                    <div>
+                        {[...Array(18)].map((item, index) => (
+                            <Card key={`card-${index}`} index={index}>
+                            <img src={`/images/@next/0x-instant/widget-${(index % 6) + 1}.png`} />
+                            </Card>
+                        ))}
+                    </div>
+                </MarqueeWrap>
+                </Section>
+
+                <Section>
+                    {_.map(featuresData, (item, index) => (
+                        <Definition
+                            key={`definition-${index}`}
+                            icon={item.icon}
+                            title={item.title}
+                            description={item.description}
+                            isInlineIcon={true}
+                            iconSize={240}
+                            actions={item.links}
+                        />
+                    ))}
+                </Section>
+
+                <ConfiguratorSection maxWidth="1386px" padding="0 58px 70px" bgColor={colors.backgroundDark}>
+                <Heading>0x Instant Configurator</Heading>
+                <Configurator />
+                </ConfiguratorSection>
+
+                <Banner
+                    heading="Need more flexibility?"
+                    subline="Dive into our docs, or contact us if needed"
+                    mainCta={{ text: 'Explore the Docs', href: '/docs' }}
+                    secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }}
+                />
+                <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} />
+
+                <Section maxWidth="1170px" isPadded={false} padding="60px 0">
+                    <Paragraph size="small" isMuted={0.5}>Disclaimer: The laws and regulations applicable to the use and exchange of digital assets and blockchain-native tokens, including through any software developed using the licensed work created by ZeroEx Intl. (the “Work”), vary by jurisdiction. As set forth in the Apache License, Version 2.0 applicable to the Work, developers are “solely responsible for determining the appropriateness of using or redistributing the Work,” which includes responsibility for ensuring compliance with any such applicable laws and regulations.</Paragraph>
+                    <Paragraph size="small" isMuted={0.5}>See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations.</Paragraph>
+                </Section>
+            </SiteWrap>
+        );
+    }
+
+    public _onOpenContactModal = (): void => {
+        this.setState({ isContactModalOpen: true });
+    }
+
+    public _onDismissContactModal = (): void => {
+        this.setState({ isContactModalOpen: false });
+    }
+}
 
 // scroll animation calc is simply (imageWidth * totalRepetitions) / 2
 // img width is 370px
diff --git a/packages/website/ts/@next/pages/launch_kit.tsx b/packages/website/ts/@next/pages/launch_kit.tsx
index 1f53be34b..43b538df4 100644
--- a/packages/website/ts/@next/pages/launch_kit.tsx
+++ b/packages/website/ts/@next/pages/launch_kit.tsx
@@ -10,6 +10,7 @@ import { Icon } from 'ts/@next/components/icon';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
 
 import {Section} from 'ts/@next/components/newLayout';
+import { ModalContact } from '../components/modals/modal_contact';
 
 const offersData = [
     {
@@ -31,7 +32,10 @@ const offersData = [
     },
 ];
 
-export class NextLaunchKit extends React.PureComponent {
+export class NextLaunchKit extends React.Component {
+    public state = {
+        isContactModalOpen: false,
+    };
     public render(): React.ReactNode {
         return (
             <SiteWrap theme="dark">
@@ -94,11 +98,20 @@ export class NextLaunchKit extends React.PureComponent {
                     heading="Need more flexibility?"
                     subline="Dive into our docs, or contact us if needed"
                     mainCta={{ text: 'Get Started', href: '/docs' }}
-                    secondaryCta={{ text: 'Get in Touch', href: '/contact' }}
+                    secondaryCta={{ text: 'Get in Touch', href: this._onOpenContactModal.bind(this) }}
                 />
+                <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} />
             </SiteWrap>
         );
     }
+
+    public _onOpenContactModal = (): void => {
+        this.setState({ isContactModalOpen: true });
+    }
+
+    public _onDismissContactModal = (): void => {
+        this.setState({ isContactModalOpen: false });
+    }
 }
 
 const HeroActions = () => (
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index ba83ceb46..a267bd09e 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -7,12 +7,13 @@ import {Hero} from 'ts/@next/components/hero';
 
 import { Banner } from 'ts/@next/components/banner';
 import { Button } from 'ts/@next/components/button';
+import {Definition} from 'ts/@next/components/definition';
+import {Column, Section, WrapSticky} from 'ts/@next/components/newLayout';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
 import { Slide, Slider } from 'ts/@next/components/slider/slider';
-import { Heading } from 'ts/@next/components/text';
 
-import {Definition} from 'ts/@next/components/definition';
-import {Column, Section, WrapSticky} from 'ts/@next/components/newLayout';
+import { ModalContact } from '../components/modals/modal_contact';
+import { Heading } from 'ts/@next/components/text';
 
 const offersData = [
     {
@@ -78,7 +79,10 @@ const useCaseSlides = [
     },
 ];
 
-export class NextWhy extends React.PureComponent {
+export class NextWhy extends React.Component {
+    public state = {
+        isContactModalOpen: false,
+    };
     public render(): React.ReactNode {
         return (
             <SiteWrap theme="dark">
@@ -191,11 +195,20 @@ export class NextWhy extends React.PureComponent {
                 heading="Ready to get started?"
                 subline="Dive into our docs, or contact us if needed"
                 mainCta={{ text: 'Get Started', href: '/docs' }}
-                secondaryCta={{ text: 'Get in Touch', href: '/contact' }}
+                secondaryCta={{ text: 'Get in Touch', onClick: this._onOpenContactModal.bind(this) }}
               />
+              <ModalContact isOpen={this.state.isContactModalOpen} onDismiss={this._onDismissContactModal} />
             </SiteWrap>
         );
     }
+
+    public _onOpenContactModal = (): void => {
+        this.setState({ isContactModalOpen: true });
+    }
+
+    public _onDismissContactModal = (): void => {
+        this.setState({ isContactModalOpen: false });
+    }
 }
 
 interface SectionProps {