changed check box

2019-02-13 11:35:05 -05:00
parent 3cb2d3dfff
commit 1681ba090c
5 changed files with 88 additions and 114 deletions
--- a/packages/website/ts/components/modals/input.tsx
+++ b/packages/website/ts/components/modals/input.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react';
 import styled from 'styled-components';

+import { colors } from '../../style/colors';
+import { CheckMark } from '../ui/check_mark';
+import { Container } from '../ui/container';
+
 export enum InputWidth {
    Half,
    Full,
@@ -27,13 +31,10 @@ interface OptionSelectorProps {
    isFlex?: boolean;
 }

-interface OptionsWrapperProps {
-    isFlex?: boolean;
-}
-
 interface CheckBoxProps {
-    name: string;
    label: string;
+    onClick: (e: React.MouseEvent<HTMLElement>) => void;
+    isSelected: boolean;
 }

 interface ErrorProps {
@@ -45,23 +46,22 @@ export const OptionSelector = (props: OptionSelectorProps) => {
    return (
        <InputWrapper {...props}>
            <Label htmlFor={id}>{props.label}</Label>
-            <OptionsWrapper isFlex={props.isFlex} id={id}>
-                {props.children}
-            </OptionsWrapper>
+            <Container id={id}>{props.children}</Container>
        </InputWrapper>
    );
 };

-export const CheckBox = React.forwardRef((props: CheckBoxProps, ref?: React.Ref<HTMLInputElement>) => {
-    const { name, label } = props;
-    const id = `input-${name}`;
+export const CheckBoxInput = (props: CheckBoxProps) => {
+    const { isSelected, label, onClick } = props;
    return (
-        <CheckBoxWrapper>
-            <StyledCheckBox id={id} type={'checkbox'} ref={ref} />
-            <CheckBoxLabel htmlFor={id}>{label}</CheckBoxLabel>
-        </CheckBoxWrapper>
+        <Container onClick={onClick} className="flex items-center">
+            <Container marginRight="10px">
+                <CheckMark isChecked={isSelected} color={colors.brandLight} />
+            </Container>
+            <Label>{label}</Label>
+        </Container>
    );
-});
+};

 export const Input = React.forwardRef((props: InputProps, ref?: React.Ref<HTMLInputElement>) => {
    const { name, label, type, errors } = props;
@@ -84,41 +84,6 @@ Input.defaultProps = {
    errors: {},
 };

-const StyledCheckBox = styled.input`
-    visibility: hidden;
-    &:checked + label:after {
-        background-color: #000;
-        border: 2px solid #000;
-    }
-`;
-
-const CheckBoxLabel = styled.label`
-    position: relative;
-    color: #000;
-    opacity: 0.75;
-    font-size: 1rem;
-    font-weight: 300;
-    line-height: 1.2em;
-    margin-bottom: 10px;
-    display: inline-block;
-    padding-left: 1.5rem;
-    &:after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        margin: auto;
-        height: 1rem;
-        width: 1rem;
-        border-radius: 50%;
-        border: 2px solid #d5d5d5;
-    }
-`;
-
-const CheckBoxWrapper = styled.div`
-`;
-
 const StyledInput = styled.input`
    appearance: none;
    background-color: #fff;
@@ -149,26 +114,6 @@ const InputWrapper = styled.div<InputProps>`
    }
 `;

-const OptionsWrapper = styled.div<OptionsWrapperProps>`
-    display: ${props => props.isFlex && 'flex'};
-    ${props => {
-        if (props.isFlex) {
-            return `
-                & > * {
-                    padding: 0 0.5rem;
-                }
-                & >:first-child {
-                    padding-left: 0;
-                }
-                & >:last-child {
-                    padding-right: 0;
-                }
-            `;
-        }
-        return '';
-    }}
-`;
-
 const Label = styled.label`
    color: #000;
    font-size: 1.111111111rem;
--- a/packages/website/ts/components/modals/modal_contact.tsx
+++ b/packages/website/ts/components/modals/modal_contact.tsx
@@ -9,7 +9,7 @@ import '@reach/dialog/styles.css';

 import { Button } from 'ts/components/button';
 import { Icon } from 'ts/components/icon';
-import { CheckBox, Input, InputWidth, OptionSelector } from 'ts/components/modals/input';
+import { CheckBoxInput, Input, InputWidth, OptionSelector } from 'ts/components/modals/input';
 import { Heading, Paragraph } from 'ts/components/text';
 import { GlobalStyle } from 'ts/constants/globalStyle';
 import { utils } from 'ts/utils/utils';
@@ -20,6 +20,29 @@ export enum ModalContactType {
    Credits = 'CREDITS',
 }

+interface ServiceOptionMetadata {
+    label: string;
+    name: string;
+}
+const CREDIT_SERVICES_OPTIONS: ServiceOptionMetadata[] = [
+    {
+        label: 'AWS',
+        name: 'aws',
+    },
+    {
+        label: 'Facebook Ads',
+        name: 'facebook_ads',
+    },
+    {
+        label: 'Alchemy',
+        name: 'alchemy',
+    },
+    {
+        label: 'Digital Ocean',
+        name: 'digital_ocean',
+    },
+];
+
 interface Props {
    theme?: GlobalStyle;
    isOpen?: boolean;
@@ -51,6 +74,7 @@ export class ModalContact extends React.Component<Props> {
        modalContactType: ModalContactType.General,
    };
    public state = {
+        creditLeadsServices: [] as string[],
        isSubmitting: false,
        isSuccessful: false,
        errors: {},
@@ -65,11 +89,7 @@ export class ModalContact extends React.Component<Props> {
    // market maker lead fields
    public countryRef: React.RefObject<HTMLInputElement> = React.createRef();
    public fundSizeRef: React.RefObject<HTMLInputElement> = React.createRef();
-    // credit lead fields
-    public awsOptionRef: React.RefObject<HTMLInputElement> = React.createRef();
-    public alchemyOptionRef: React.RefObject<HTMLInputElement> = React.createRef();
-    public facebookAdsOptionRef: React.RefObject<HTMLInputElement> = React.createRef();
-    public digitalOceanOptionRef: React.RefObject<HTMLInputElement> = React.createRef();
+
    public constructor(props: Props) {
        super(props);
    }
@@ -204,7 +224,8 @@ export class ModalContact extends React.Component<Props> {
        return (
            <>
                <Paragraph isMuted={true} color={colors.textDarkPrimary}>
-                    If you are building on top of 0x full time, please fill out this form and our Relayer Success Manager will be in touch. 
+                    If you are building on top of 0x full time, please fill out this form and our Relayer Success
+                    Manager will be in touch.
                </Paragraph>
                <InputRow>
                    <Input
@@ -247,17 +268,35 @@ export class ModalContact extends React.Component<Props> {
                    />
                </InputRow>
                <InputRow>
-                    <OptionSelector isFlex={true} name="services" label="Which credits are you interested in?" errors={errors}>
-                        <CheckBox ref={this.awsOptionRef} name="aws" label="AWS"/>
-                        <CheckBox ref={this.alchemyOptionRef} name="alchemy" label="Alchemy"/>
-                        <CheckBox ref={this.facebookAdsOptionRef} name="facebook_ads" label="Facebook Ads"/>
-                        <CheckBox ref={this.digitalOceanOptionRef} name="digital_ocean" label="Digital Ocean"/>
+                    <OptionSelector
+                        isFlex={true}
+                        name="services"
+                        label="Which credits are you interested in?"
+                        errors={errors}
+                    >
+                        {CREDIT_SERVICES_OPTIONS.map((metadata: ServiceOptionMetadata) => {
+                            return (
+                                <CheckBoxInput
+                                    onClick={this._handleCheckBoxInput.bind(this, metadata.name)}
+                                    key={`checkbox-${metadata.name}`}
+                                    isSelected={_.includes(this.state.creditLeadsServices, metadata.name)}
+                                    label={metadata.label}
+                                />
+                            );
+                        })}
                    </OptionSelector>
                </InputRow>
            </>
        );
    }

+    private _handleCheckBoxInput(checkBoxName: string): void {
+        const newCreditLeadsServices = _.includes(this.state.creditLeadsServices, checkBoxName)
+            ? _.pull(this.state.creditLeadsServices, checkBoxName)
+            : _.concat(this.state.creditLeadsServices, checkBoxName);
+        this.setState({ creditLeadsServices: newCreditLeadsServices });
+    }
+
    private _renderGeneralFormContent(errors: ErrorProps): React.ReactNode {
        return (
            <>
@@ -335,12 +374,7 @@ export class ModalContact extends React.Component<Props> {
                email: this.emailRef.current.value,
                projectOrCompany: this.companyProjectRef.current.value,
                comments: this.commentsRef.current.value,
-                services: _.filter([
-                    this.awsOptionRef.current.checked ? 'aws' : null,
-                    this.alchemyOptionRef.current.checked ? 'alchemy' : null,
-                    this.facebookAdsOptionRef.current.checked ? 'facebook_ads' : null,
-                    this.digitalOceanOptionRef.current.checked ? 'digital_ocean' : null,
-                ], (value: any) => !!value),
+                services: this.state.creditLeadsServices,
            };
        } else {
            jsonBody = {
@@ -356,9 +390,14 @@ export class ModalContact extends React.Component<Props> {

        let endpoint;
        switch (this.props.modalContactType) {
-            case ModalContactType.Credits: endpoint = '/credit_leads'; break;
-            case ModalContactType.MarketMaker: endpoint = '/market_maker_leads'; break;
-            default: endpoint = '/leads';
+            case ModalContactType.Credits:
+                endpoint = '/credit_leads';
+                break;
+            case ModalContactType.MarketMaker:
+                endpoint = '/market_maker_leads';
+                break;
+            default:
+                endpoint = '/leads';
        }

        try {
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -111,11 +111,7 @@ render(
                                    path={WebsitePaths.MarketMaker}
                                    component={NextMarketMaker as any}
                                />
-                                <Route
-                                    exact={true}
-                                    path={WebsitePaths.Credits}
-                                    component={NextCredits as any}
-                                />
+                                <Route exact={true} path={WebsitePaths.Credits} component={NextCredits as any} />
                                <Route exact={true} path={WebsitePaths.Instant} component={Next0xInstant as any} />
                                <Route exact={true} path={WebsitePaths.LaunchKit} component={NextLaunchKit as any} />
                                <Route exact={true} path={WebsitePaths.Ecosystem} component={NextEcosystem as any} />
--- a/packages/website/ts/pages/credits.tsx
+++ b/packages/website/ts/pages/credits.tsx
@@ -1,7 +1,5 @@
 import * as _ from 'lodash';
-import { opacify } from 'polished';
 import * as React from 'react';
-import styled from 'styled-components';

 import { Banner } from 'ts/components/banner';
 import { Button } from 'ts/components/button';
@@ -11,14 +9,6 @@ import { ModalContact, ModalContactType } from 'ts/components/modals/modal_conta
 import { FlexWrap, Section } from 'ts/components/newLayout';
 import { SiteWrap } from 'ts/components/siteWrap';
 import { Heading } from 'ts/components/text';
-import { colors } from 'ts/style/colors';
-import { WebsitePaths } from 'ts/types';
-
-interface OffersWrapProps {
-}
-const OffersWrap = styled.div<OffersWrapProps>`
-    display: flex;
-`;

 export interface NextCreditsProps {}

@@ -46,7 +36,14 @@ export class NextCredits extends React.Component<NextCreditsProps> {
                />

                <Section bgColor="light" maxWidth="715px">
-                    <Heading asElement="h2" fontWeight={'400'} size={34} isCentered={true} isMuted={1} padding={['default', 0 , 'default', 'default']}>
+                    <Heading
+                        asElement="h2"
+                        fontWeight={'400'}
+                        size={34}
+                        isCentered={true}
+                        isMuted={1}
+                        padding={['default', 0, 'default', 'default']}
+                    >
                        Get your project off the ground with these great services
                    </Heading>

@@ -79,6 +76,7 @@ export class NextCredits extends React.Component<NextCreditsProps> {
                            iconSize="medium"
                            isInline={true}
                        />
+
                        <CenteredDefinition
                            title="Facebook ads"
                            titleSize="small"
@@ -115,11 +113,7 @@ export class NextCredits extends React.Component<NextCreditsProps> {

    private readonly _renderHeroActions = () => (
        <>
-            <Button
-                onClick={this._onOpenContactModal}
-                bgColor="dark"
-                isInline={true}
-            >
+            <Button onClick={this._onOpenContactModal} bgColor="dark" isInline={true}>
                Apply Now
            </Button>
        </>
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -1,4 +1,4 @@
-import { GoogleSheetLeadUrls, OutdatedWrappedEtherByNetworkId, PublicNodeUrlsByNetworkId, } from 'ts/types';
+import { GoogleSheetLeadUrls, OutdatedWrappedEtherByNetworkId, PublicNodeUrlsByNetworkId } from 'ts/types';

 const BASE_URL = window.location.origin;
 const INFURA_API_KEY = 'T5WSC8cautR4KXyYgsRs';