From a1410409fff5a015c5afbe3eabc1cbc8e70d1735 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Fri, 14 Dec 2018 22:37:01 +0100 Subject: Add contact modal to pages with contact link --- packages/website/ts/@next/components/banner.tsx | 4 +- packages/website/ts/@next/pages/instant.tsx | 127 ++++++++++++++---------- packages/website/ts/@next/pages/launch_kit.tsx | 17 +++- packages/website/ts/@next/pages/why.tsx | 23 ++++- 4 files changed, 112 insertions(+), 59 deletions(-) (limited to 'packages/website') 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) => { {secondaryCta && } - /> - -
- -
- {[...Array(18)].map((item, index) => ( - - - - ))} -
- -
- -
- {_.map(featuresData, (item, index) => ( - { + public state = { + isContactModalOpen: false, + }; + public render(): React.ReactNode { + return ( + + Get Started} /> - ))} -
- - - 0x Instant Configurator - - - - - -
- 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. - See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations. -
- -); + +
+ +
+ {[...Array(18)].map((item, index) => ( + + + + ))} +
+ +
+ +
+ {_.map(featuresData, (item, index) => ( + + ))} +
+ + + 0x Instant Configurator + + + + + + +
+ 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. + See the Apache License, Version 2.0 for the specific language governing all applicable permissions and limitations. +
+ + ); + } + + 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 ( @@ -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) }} /> + ); } + + 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 ( @@ -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) }} /> + ); } + + public _onOpenContactModal = (): void => { + this.setState({ isContactModalOpen: true }); + } + + public _onDismissContactModal = (): void => { + this.setState({ isContactModalOpen: false }); + } } interface SectionProps { -- cgit v1.2.3