trc-client-core/src/home/HomeFeatureWidgets.jsx

The core of the TRC Client

import React from 'react';
import Grid from 'trc-client-core/src/components/Grid';
import Col from 'trc-client-core/src/components/Col';
import Widget from 'trc-client-core/src/components/Widget';
import HomeCourseWidget from 'trc-client-core/src/components/HomeCourseWidget';
import UserStore from 'trc-client-core/src/user/UserStore';
import Auth from 'trc-client-core/src/components/Auth';
import {STATIC_ASSETS} from 'trc-client-core/src/constants/url';

var HomeFeatureWidgets = React.createClass({
    displayName: 'HomeFeatureWidgets',
    render() {
        return (
            <div className="row hug-bottom ">
                <Grid modifier="tight">
                    <Col width={3}>
                        <Widget className="l-height--homeWidget ">
                            <h2 className="hug">The Training Resource Centre is packed full of top quality training.</h2>
                        </Widget>
                    </Col>
                    <Col>
                        {this.renderWidgets()}
                    </Col>
                </Grid>
            </div>
        );
    },
    renderWidgets() {
        var department = UserStore.get('departmentCategory').get(0);
        var site = UserStore.get('site');
        var props = {
            department: department
        };

        var grid = React.createFactory(Grid).bind(null, {
            modifier: 'tight'
        });

        switch (department) {
            case 'sales':
                return (
                    <div>
                        <Auth site="TOYOTA" component={grid}>
                            <HomeCourseWidget {...props} title="My Product Training" image="86.jpg" href="/#/product/vehicles" />
                            {this.renderEssentialTerminology(props)}
                            {this.renderElearningWidget(props)}
                        </Auth>
                        <Auth site="LEXUS" component={grid}>
                            <HomeCourseWidget {...props} title="View Bold IS Vehicle Page" image="lexusIS@LEXUS.jpg" href="/#/product/vehicles/IS" />
                            {this.renderEssentialTerminology(props)}
                            <HomeCourseWidget {...props} title="My Product Training Plan" image="careerPathway@LEXUS.png" href={this.renderProductTrainingPlanUrl()} />
                        </Auth>
                    </div>
                );
            case 'parts':
                return (
                    <div>
                        <Auth site="TOYOTA" component={grid}>
                            <HomeCourseWidget {...props} title="PARTS21 Fundamentals"  image='p21f.jpg' href="/#/course/P21F"/>
                            {this.renderEssentialTerminology(props)}
                            {this.renderElearningWidget(props)}
                        </Auth>
                        <Auth site="LEXUS" component={grid}>
                            <HomeCourseWidget {...props} title="PARTS21 Fundamentals"  image='p21f.jpg' href="/#/course/P21F"/>
                            {this.renderElearningWidgetLexus(props)}
                            {this.renderEssentialTerminology(props)}
                        </Auth>
                    </div>
                );
            case 'service':
                return (
                    <div>
                        <Auth site="TOYOTA" component={grid}>
                            <HomeCourseWidget {...props} title="My Service Advisor Certification" image={`serviceAdvisor@${site}.jpg`} href="#/portal/learning-plan/service_advisor_cert"/>
                            {this.renderElearningWidget(props)}
                            <HomeCourseWidget {...props} title="Warranty" image="warranty.png" href="/#/service/warranty"/>
                        </Auth>
                        <Auth site="LEXUS" component={grid}>
                            <HomeCourseWidget {...props} title="My Service Advisor Certification" image={`serviceAdvisor@${site}.jpg`} href="#/portal/learning-plan/service_advisor_cert"/>
                            {this.renderEssentialTerminology(props)}
                            {this.renderElearningWidgetLexus(props)}
                        </Auth>
                    </div>
                );
            case 'management':
                if (site === 'LEXUS') {
                    return this.renderDefaultWidgets(props);
                }

                return (
                    <Grid modifier="tight">
                        <HomeCourseWidget {...props} title="Cert IV Management Foundations" image='mfp.jpg' to="/management/qualification/MFP" />
                        <HomeCourseWidget {...props} title="Future Dealer Leader's Program" image='fdlp.jpg' to="/management/qualification/FDLP" />
                        {this.renderElearningWidget(props)}
                    </Grid>
                );
            case 'body_paint':
                if (site === 'LEXUS') {
                    return this.renderDefaultWidgets(props);
                }

                return (
                    <Grid modifier="tight">
                        <HomeCourseWidget {...props} title="Body Technician Certification" image='bp@TOYOTA.jpg' href="/#/portal/learning-plan/body_cert" />
                        <HomeCourseWidget {...props} title="Paint Technician Certification" image='bp_paint@TOYOTA.jpg' href="/#/portal/learning-plan/paint_cert" />
                        {this.renderElearningWidget(props)}
                    </Grid>
                );
            case 'TMCA':
                return (
                    <div>
                        <Auth site="TOYOTA" component={grid}>
                            <HomeCourseWidget {...props} title="Toyota For Life" image='tfl_wide.jpg' href="/#/course/TFORL" />
                            {this.renderEssentialTerminology(props)}
                        </Auth>
                        <Auth site="LEXUS" component={grid}>
                            <HomeCourseWidget {...props} title="My Academy" icon="e158" image="" href="/#/portal" />
                            {this.renderEssentialTerminology(props)}
                        </Auth>
                    </div>
                );
            default:
                return this.renderDefaultWidgets(props);
        }
    },
    renderProductTrainingPlanUrl() {
        var learningPlans = UserStore.get('learningPlans');
        if(learningPlans.size) {
            return `/#/portal/learning-plan/${learningPlans.find(ii => ii.get('careerPlanId') === 'product_training_plan').get('careerPlanId')}`;
        }
    },
    renderDefaultWidgets(props) {
        var grid = React.createFactory(Grid).bind(null, {
            modifier: 'tight'
        });

        return (
            <div>
                <Auth site="TOYOTA" component={grid}>
                    {this.renderEssentialTerminology(props)}
                    <HomeCourseWidget {...props} title="Future Dealer Leader's Program" image='fdlp.jpg' to="/management/qualification/FDLP" />
                    <HomeCourseWidget {...props} title="My TIA" icon="e158" image="" href="/#/portal" />
                </Auth>
                <Auth site="LEXUS" component={grid}>
                    {this.renderEssentialTerminology(props)}
                    <HomeCourseWidget {...props} title="Essential Selling Skills" image="ess.jpg" href="/#/course/ESS" />
                    <HomeCourseWidget {...props} title="My Academy" icon="e158" image="" href="/#/portal" />
                </Auth>
            </div>
        );
    },
    renderElearningWidget(props) {
        return <HomeCourseWidget {...props} title="Equal Employment Opportunity (online)" image="eeo.jpg" href="/#/course/SPK3000" />;
    },
    renderElearningWidgetLexus(props) {
        return <HomeCourseWidget {...props} title="Equal Employment Opportunity (online)" image="eeo.jpg" href="/#/course/SPK3000" />;
    },
    renderEssentialTerminology(props) {
        return (
            <HomeCourseWidget {...props}
                title="Essential Terminology"
                image="essential-terminology.jpg"
                href={`${STATIC_ASSETS}docs/Essential-Automotive-Terminology-062015.pdf`}
            />
        );
    }
});

module.exports = HomeFeatureWidgets;