trc-client-core/src/product/ProductVehicle.jsx

The core of the TRC Client

import React from 'react';
import {Link} from 'react-router';
import {connect} from 'react-redux';
import Page from 'trc-client-core/src/components/Page';
import Carousel from 'trc-client-core/src/components/Carousel';
import Markdown from 'trc-client-core/src/components/Markdown';
import IconListItem from 'trc-client-core/src/components/IconListItem';
import Time from 'trc-client-core/src/components/Time';
import Auth from 'trc-client-core/src/components/Auth';
import CarouselItem from 'trc-client-core/src/components/CarouselItem';
import ModalConfirm from 'trc-client-core/src/Modal/ModalConfirm';
import ModalManager from 'trc-client-core/src/Modal/ModalManager';
import ProductPathway from 'trc-client-core/src/learningPlan/ProductPathway';
import CompetitorModal from 'trc-client-core/src/copy/product/competitor-modal.md';
import ProductVehiclesCollection from 'trc-client-core/src/media/ProductVehiclesCollection';

function Section(props) {
    return <div>
        <h2 className="t-capitalize">{props.title}<span className="t-muted">{props.subtitle}</span></h2>
        <ul className="IconList IconList-product ColumnList ">
            {props.children}
        </ul>
    </div>
}

function AddtionalContent(props) {
    var icon = '\uE051';

    switch(props.type) {
        case 'Fact Sheet':
        case 'eBrochure':
        case 'Dealer Product Guide':
        case 'FFBe Guide':
            icon = '\uE037';
            break;
    }

    if(!props.url) {
        return <span />
    }
    return <IconListItem icon={icon} href={props.url}>{props.type}</IconListItem>;
}

var Vehicle = React.createClass({
    displayName: 'Vehicle',
    onWarn(url) {
        ModalManager.showModal(ModalConfirm, {
            ...CompetitorModal,
            onYes: () => window.location.href = url,
            message: <Markdown html={CompetitorModal} />
        });
    },
    render() {
        var {params} = this.props
        
        var item = ProductVehiclesCollection.filter(ii => ii.modelName === this.props.params.id)[0];

        if(params.id !== "GS"){
            var {
                vehicleModelDetails: {
                    accessoriesUrl,
                    additionalProductGuideContentURL,
                    brochure,
                    galleryUrl,
                    imageCaptionText,
                    imageUrl,
                    introduction,
                    pressKitLinkUrl,
                    websiteUrl
                },
                vehicleCompetitors,
                brand,
                modelName,
                generation,
                launchDate
            } = this.props.vehicles.toJS();
        } else {
            var {
                accessoriesUrl,
                additionalProductGuideContentURL,
                brochure,
                galleryUrl,
                imageCaptionText,
                imageUrl,
                pressKitLinkUrl,
                websiteUrl,
                brand,
                modelName,
                generation,
                launchDate
            } = item;
            var introduction = item.__content;
            var {vehicleCompetitors} = this.props.vehicles.toJS();
        }


        var caption = <Markdown html={imageCaptionText}/>;
        return <Page title="Vehicles">
            <div>
                <Carousel modifier="hero">
                    <CarouselItem center image={`product/vehicles/${brand}/${imageUrl}`} caption={caption} />
                </Carousel>

                <Link className="cta-back" to="/product/vehicles">all vehicles</Link>

                <div className="margin-top2 margin-bottom3">
                    <h1 className="hug">{`${modelName} ${generation || ''}`}</h1>
                    <h3 className="hug t-muted">Launch Date: <Time type="medium">{launchDate}</Time></h3>
                </div>

                <Markdown className="margin-top margin-bottom" html={introduction} />
                <ProductPathway singleId={modelName} learningPlan={this.props.learningPlan} />
                <Section title="Additional Content">
                    <ul className="IconList IconList-product ColumnList">
                        <AddtionalContent url={additionalProductGuideContentURL} type="Additional Guide"/>
                        <Auth site="TOYOTA">
                            <AddtionalContent url={`/#/product/factsheet?val=${modelName}`} type="Fact Sheet"/>
                        </Auth>
                        <AddtionalContent url={pressKitLinkUrl} type="Press Kit"/>
                        <AddtionalContent url={galleryUrl} type="Press Gallery"/>
                        <AddtionalContent url={websiteUrl} type="Website"/>
                        <AddtionalContent url={brochure} type="eBrochure"/>
                        <AddtionalContent url={accessoriesUrl} type="Accessories"/>
                    </ul>
                </Section>
                <Section title={`The ${brand.toLowerCase()} Edge `} subtitle="Competitors">
                    {vehicleCompetitors.map((vv, index) => {
                        return <li key={index}>
                            <a data-icon="&#xE051;" onClick={this.onWarn.bind(this, vv.vehicleWebsiteLink)}>{vv.vehicleName}</a>
                        </li>;
                    })}
                </Section>
                {this.renderConnectedMobilityCompetitors()}
            </div>
        </Page>
    },
    renderConnectedMobilityCompetitors(){
        var {brand, connectedMobilityCompetitors} = this.props.vehicles.toJS();
        var names = {TOYOTA: 'Toyota Link', LEXUS: 'Lexus Enform'};
        if(!connectedMobilityCompetitors.length) {
            return null;
        }
        return <Section title={`${names[brand]} `} subtitle="Competitors">
            {connectedMobilityCompetitors.map((vv, index) => {
                return <li key={index}>
                    <a data-icon="&#xE051;" onClick={this.onWarn.bind(this, vv.competitorWebsiteLink)}>{vv.competitorDisplayName}</a>
                </li>;
            })}
        </Section>
    }
});

export default connect(state => ({user: state.user}))(Vehicle);