analytics/webcontent/bi/js/cahome/ui/react/WelcomeView/WelcomeView.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactHtmlParser from 'react-html-parser';
import './WelcomeView.scss';
import bg from '../../../../../images/HomeIllustration.png';
import howto_icon from '../../../../../images/home_howto-48.svg';
import samples_icon from '../../../../../images/home_samples-48.svg';
import tutorial_icon from '../../../../../images/home_tutorial-48.svg';
import accelerator_icon from '../../../../../images/home_accelerator-48.svg';
import ca_logoicon from '../../../../../images/ca_logoicon.png';
import { StartVideoModal } from '../StartVideoModal/StartVideoModal';
import { SampleModal } from '../SampleModal/SampleModal';
import { WelcomeTile } from '../WelcomeTile/WelcomeTile';

export class WelcomeView extends Component {
	static propTypes = {
		/** Custom class name(s) */
		className: PropTypes.string,
		/** A copy of the i18n translation object */
		stringGetter: PropTypes.object,
		/** Used as welcome message (primary & secondary) object, consisting of user and slogan*/
		labels: PropTypes.object.isRequired,
		/** A copy of the glass context */
		glassContext: PropTypes.object,
		/** The helper to open the sample folder in the side nav-bar */
		sampleOpener: PropTypes.func,
		/** The theme values from glass  */
		themeValues: PropTypes.object,
		/** The helper to check if the sample folder is installed in the side nav-bar */
		sampleChecker: PropTypes.func
	};

	state = {
		openVideoModal: false,
		openSampleModal: false,
		sampleInstalled: false,
		openSocialModal: false
	};

	constructor(props) {
		super(props);
	}

	componentDidMount(){
		this.sampleFolderChecker();
	}

	sampleFolderChecker(){
		this.props.sampleChecker().then(status => {
			if(status !== this.state.sampleInstalled){
				this.setState({
					sampleInstalled: status
				});
			}
		});
	}

	// Reformat the primary title to a DOM node by enforcing a new-line for brand name
	titleFormatter(){
		const { stringGetter, labels } = this.props;
		let primaryTitleArray = stringGetter.get('welcome_primary_title', {
			'brandName': labels.brand
		}).split(' ');
		if(labels.brand.includes('IBM')){
			primaryTitleArray.splice(primaryTitleArray.indexOf('IBM'), 0, '<br />');
		} else{
			primaryTitleArray.splice(primaryTitleArray.indexOf('Cognos'), 0, '<br />');
		}
		return ReactHtmlParser(primaryTitleArray.join(' '));
	}

	// Formatting of Product brand
	brandNameFormatter(){
		const { labels } = this.props;

		return ReactHtmlParser(labels.brand);
	}

	// Instrumentation service binded on the tile of tour
	_sendInstrumentationEvtTour(context){
		var instrumentationService = context.getCoreSvc('.Instrumentation');
		var options = {
			action: 'clicked',
			uiElement: 'tour_tile'
		};
		if (instrumentationService.enabled) {
			instrumentationService.track({
				type: 'CTA Clicked',
				action: options.action,
				uiElement: options.uiElement,
				milestoneName: options.action + '_ui_element_' + options.uiElement,
				CTA: 'Take a Quick Tour'
			});
		}
	}

	// Instrumentation service binded on the tile for video modal
	_sendInstrumentationEvtVideo(context){
		var instrumentationService = context.getCoreSvc('.Instrumentation');
		var options = {
			action: 'clicked',
			uiElement: 'video_tile'
		};
		if (instrumentationService.enabled) {
			instrumentationService.track({
				type: 'CTA Clicked',
				action: options.action,
				uiElement: options.uiElement,
				milestoneName: options.action + '_ui_element_' + options.uiElement,
				CTA: 'Watch How-to Videos'
			});
		}
	}

	// Instrumentation service binded on the tile for sample modal
	_sendInstrumentationEvtSample(context){
		var instrumentationService = context.getCoreSvc('.Instrumentation');
		var options = {
			action: 'clicked',
			uiElement: 'sample_tile'
		};
		if (instrumentationService.enabled) {
			instrumentationService.track({
				type: 'CTA Clicked',
				action: options.action,
				uiElement: options.uiElement,
				milestoneName: options.action + '_ui_element_' + options.uiElement,
				CTA: 'Visit Samples'
			});
		}
	}

	// Instrumentation service binded on the tile for accelerator catalogue
	_sendInstrumentationEvtAccelerator(context){
		var instrumentationService = context.getCoreSvc('.Instrumentation');
		var options = {
			action: 'clicked',
			uiElement: 'accelerator_tile'
		};
		if (instrumentationService.enabled) {
			instrumentationService.track({
				type: 'CTA Clicked',
				action: options.action,
				uiElement: options.uiElement,
				milestoneName: options.action + '_ui_element_' + options.uiElement,
				CTA: 'Browse Accelerator Catalog'
			});
		}
	}

	// Check the status whether instrumentation service is enabled
	_isInstrumentationEnabled(context){
		let instrumentationService = context.getCoreSvc('.Instrumentation');
		return instrumentationService.enabled;
	}

	// Handler to open the modal via tabbing action - type: video, sample
	_openModalViaTabbing(e, type){
		e.stopPropagation();
		// If not a shift click, ctrl click or a right click or the user pressed enter on the context menu
		if((e.type == 'click' && !e.shiftKey && !e.ctrlKey && e.nativeEvent.which !== 3) || (e.type=='keyup' && e.keyCode === 13)) {
			e.persist();
			if(type==='video'){
				this._openVideoModal();
				this._sendInstrumentationEvtVideo(this.props.glassContext);
			} else if(type==='sample'){
				this._openSampleModal();
				this._sendInstrumentationEvtSample(this.props.glassContext);
			} else if(type==='tour'){
				this._sendInstrumentationEvtTour(this.props.glassContext);
			} else if(type==='accelerator') {
				this._openAcceleratorCatalogue();
				this._sendInstrumentationEvtAccelerator(this.props.glassContext);
			}
		}
	}

	// Handler to close the video modal
	_closeVideoModal(){
		this.setState({ openVideoModal: false });
	}

	// Handler to open the video modal
	_openVideoModal(){
		this.setState({ openVideoModal: true });
	}

	// Handler to close the sample modal
	_closeSampleModal(){
		this.setState({ openSampleModal: false });
	}

	// Handler to open the sample modal
	_openSampleModal(){
		this.setState({ openSampleModal: true });
	}

	// Handler to close the social insights modal
	_closeSocialModal(){
		this.setState({ openSocialModal: false });
	}

	// Handler to open the accelerator catalogue
	_openAcceleratorCatalogue() {
		const link = 'https://community.ibm.com/accelerators/?context=analytics&product=Cognos%20Analytics';
		window.open(link, '_blank');
	}

	_isSampleInstalled() {
		return this.state.sampleInstalled;
	}

	render() {
		const { stringGetter, glassContext, sampleOpener, themeValues } = this.props;

		const brandLogo = themeValues.images.brandIcon==='common-CA_Avatar_Colour_64' ?
			<img className="brandTitleIcon" src={ca_logoicon} alt={themeValues.images.altText} /> :
			<img className="brandTitleIcon" src={themeValues.images.brandIcon} alt={themeValues.images.altText} />;

		const tourTile = this._isInstrumentationEnabled(glassContext) && this._isSampleInstalled() ?
			<WelcomeTile
				className={'tourTile'}
				stringGetter={stringGetter}
				iconID={tutorial_icon.id}
				titleKey={'welcome_tile_title_tour'}
				descriptionKey={'welcome_tile_description_tour'}
				onKeyUp={(e) => this._openModalViaTabbing(e, 'tour')}
				onClick={() => {this._sendInstrumentationEvtTour(glassContext);}}
				isLast={false}
			/> : null;

		const howTile = <WelcomeTile
			className={'howTile'}
			stringGetter={stringGetter}
			iconID={howto_icon.id}
			titleKey={'welcome_tile_title_how'}
			descriptionKey={'welcome_tile_description_how'}
			onKeyUp={(e) => this._openModalViaTabbing(e, 'video')}
			onClick={() => {this._openVideoModal(); this._sendInstrumentationEvtVideo(glassContext);} }
			isLast={false}
		/>;

		const sampleTile = this.state.sampleInstalled ? <WelcomeTile
			className={'sampleTile'}
			stringGetter={stringGetter}
			iconID={samples_icon.id}
			titleKey={'welcome_tile_title_sample'}
			descriptionKey={'welcome_tile_description_sample'}
			onKeyUp={(e) => this._openModalViaTabbing(e, 'sample')}
			onClick={() => {this._openSampleModal(); this._sendInstrumentationEvtSample(glassContext);}}
			isLast={false}
		/> : null;

		const acceleratorTile = <WelcomeTile
			className={'acceleratorTile'}
			stringGetter={stringGetter}
			iconID={accelerator_icon.id}
			titleKey={'welcome_tile_title_accelerator'}
			descriptionKey={'welcome_tile_description_accelerator'}
			onKeyUp={(e) => this._openModalViaTabbing(e, 'accelerator')}
			onClick={() => {this._openAcceleratorCatalogue(); this._sendInstrumentationEvtAccelerator(glassContext);} }
			isLast={true}
		/>;

		return (<div className="welcomeViewWrapper">
			{
				this.state.openVideoModal && (<StartVideoModal stringGetter={stringGetter} sampleOpener={sampleOpener} closeHandler={() => this._closeVideoModal()}/>)
			}
			{
				this.state.openSampleModal && (<SampleModal sampleOpener={sampleOpener} stringGetter={stringGetter} closeHandler={() => this._closeSampleModal()}/>)
			}
			<img className='welcomeBackground' src={bg} alt=''></img>
			<div className="brandTitle">
				{brandLogo}
			</div>
			<div className="primaryTitle">
				{this.titleFormatter()}
			</div>
			<div className="secondaryTitle">
				{ stringGetter.get('welcome_secondary_title') }
			</div>
			<div className="welcomeTileWrapper">
				{tourTile}
				{howTile}
				{sampleTile}
				{acceleratorTile}
			</div>
		</div>);
	}
}