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

The core of the TRC Client

/*global window*/
var React = require('react');
var Loader = require('trc-client-core/src/components/Loader');
var Time = require('trc-client-core/src/components/Time');
var CourseStore = require('trc-client-core/src/course/CourseStore.js');
var PathwayStore = require('trc-client-core/src/course/PathwayStore.js');
var Vimeo = require('trc-client-core/src/components/Vimeo');
var ErrorMessage = require('trc-client-core/src/components/ErrorMessage');

var ProductPathwayModal = React.createClass({
    displayName: 'ProductPathwayModal',
    propTypes: {
        courseType: React.PropTypes.string,
        videoComplete: React.PropTypes.string,
        onVideoFinish: React.PropTypes.func   
    },
    getInitialState(){
        return {
            modalData: null,
            completeData: null,
            videoToggle: false
        };
    },
    componentDidMount() {
        this.getData();
    },
    getQueryObject() {
        return {
            participantId: this.props.participantId,
            courseCode: this.props.pathway.courseCode
        };
    },
    getData() {
        CourseStore.course.completionData(this.getQueryObject()).then(data => {
            this.setState({
                modalData: data
            });
        });
    },
    onStartcourse() {
        PathwayStore.startCourse(this.getQueryObject()).then(this.setCompletionData);        
    },
    startThenCompleteCourse() {
        PathwayStore.startComplete(this.getQueryObject()).then(this.setCompletionData);        
    },
    setCompletionData(data) {
        this.setState({
            completeData: data
        });

        this.completion();
    },
    completion() {
        switch (this.props.courseType.toLowerCase()){
            case 'documents':
            case 'productguide':
                window.location = this.state.modalData.course.documents[0].url;
                break;
            case 'elearning':
                window.location = this.state.modalData.course.moduleLinkUrl;
                break;
            case 'trainingvideo':
            case 'videos':
                window.location.reload();
                break;
            default:
                break;
        }
    },
    onVideoFinish(){
        this.setState({videoToggle: !this.state.videoToggle});
    },
    render() {
        if(!this.state.modalData){
            return <Loader></Loader>;
        }
        var view;
        switch (this.props.courseType.toLowerCase()){
            case 'documents':
            case 'productguide':
                view = this.renderProductDocument();
                break;
            case 'facetoface':
                view = this.renderProductFacetoFace();
                break;
            case 'elearning':
                view = this.renderProducteLearning();
                break;
            case 'trainingvideo':
            case 'videos':
                view = this.renderProductVideo();
                break;
            default:
                this.props.title = "";
                view = <ErrorMessage></ErrorMessage>;
                break;
        }
        return (
            <div>
                <div className="modal_title">{this.state.modalData.course.workshopName}</div>
                <div className="modal_body">
                    {view}
                </div>
            </div>
        );
    },
    renderProductFacetoFace(){
        var {firstName} = this.state.modalData.participantData;
        var {workshopName} = this.state.modalData.course;

        var view = <p>{firstName} did not attend <strong>{workshopName}</strong>. Unfortunately, this course was only scheduled during the vehicle launch period. If you wish to create an in-dealer training session, please contact <a className="link" href="mailto:training@toyota.com.au">training@toyota.com.au</a></p>;

        if(this.state.modalData.process === 'ATTENDED') {
            view = <p>{firstName} attended <strong>{workshopName}</strong> on <Time>{this.state.modalData.completeDate}</Time>. Thank you for your participation.</p>;
        }
        return (
            <div>    
                <div className="push-bottom">{view}</div>
                <div className="t-right">
                    <a className="Button Button-grey" data-js="close" onClick={this.props.onClose}>Close</a>
                    
                </div>
            </div>
        );
    },
    renderProducteLearning(){
        var view;
        var processStatus = this.state.modalData.process;
        var participantName = this.state.modalData.participantData.firstName;
        var courseName = this.state.modalData.course.workshopName;
        if(processStatus === 'ATTENDED') {
            view = <div>
                {participantName} completed <strong>{courseName}</strong>.
                If you wish to do a refresh, please click Go To Module.
            </div>;
        } else if(processStatus === 'CREDITED') {
            view = <div>
                {participantName} was credited for <strong>{courseName}</strong>.
                If you wish to do a refresh, please click Go To Module.
            </div>;
        } else if(processStatus === 'IN_PROGRESS') {
            view = <div>
                Our records indicate {participantName} has begun this module, but not completed.
                To retry the module, Go To Module.
            </div>;
        } else if(processStatus === 'FAILED') {
            view = <div>
                Our records indicate {participantName} failed <strong>{courseName}</strong>.
                To retry the module, Go To Module.
            </div>;
        } else if(processStatus === 'REFRESHED') {
            view = <div>
                Our records indicate {participantName} has begun this module, but not completed.
                Please Go To Module to complete the course.
            </div>;
        } else {
            view = <div>
                Our records indicate {participantName} has begun this module, but not completed.
                Please Go To Module to complete the course.
            </div>;
        }
        return (
            <div>    
                <div className="push-bottom">{view}</div>
                <div className="t-right">
                    <a className="Button Button-grey" data-js="close" onClick={this.props.onClose}>Close</a>
                    <button className="Button" onClick={this.startThenCompleteCourse} >View</button>
                </div>
            </div>
        );
    },
    renderProductDocument(){
        var view;
        if(this.state.modalData.process === 'ATTENDED') {
            view = <div>{this.state.modalData.participantData.firstName} completed <strong>{this.state.modalData.course.workshopName}</strong>. If you wish to do a refresh, please click View.</div>;
        } else {
            view = <div><strong>{this.state.modalData.course.workshopName}</strong> has not yet been completed. Please click View.</div>;
        }
        return (
            <div>    
                <div className="push-bottom">{view}</div>
                <div className="t-right">
                    <a className="Button Button-grey" data-js="close" onClick={this.props.onClose}>Close</a>
                    <button className="Button" onClick={this.startThenCompleteCourse} >View</button>
                </div>
            </div>
        );
    },
    renderProductVideo(){
        var view;
        var videoClass = this.state.videoToggle ? 'Button' : 'Button disabled';
        var vidlink = this.state.modalData.course.videos[0].url;
        if(this.state.modalData.process === 'ATTENDED') {
            view = <div>{this.state.modalData.participantData.firstName} completed this video. Please feel free to watch again to refresh your product knowledge.</div>;
        } else {           
            view = <div>Please watch the above video content. Once finished you will be able to Complete and return to your Product Plan.</div>;
        }
        return (
            <div>
                <Vimeo vimeoID={vidlink} onVideoFinish={this.onVideoFinish} ></Vimeo>
                {view}
                <div className="t-right">
                    <a className="Button Button-grey" data-js="close" onClick={this.props.onClose}>Close</a>
                    <button ref="videocomplete" className={videoClass} onClick={this.startThenCompleteCourse}>Complete</button>
                </div>
            </div>
        );
    }
});

module.exports = ProductPathwayModal;