<commit_before>import React from 'react';
import classNames from 'classnames';
import Lifespan from 'lifespan';
import {Link} from 'react-router';

import LocalClient from '../../stores/local-client.stores.jsx';

export default class SubscriptionSidebar extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			infos: {},
		};
	}

	componentWillMount() {
		this.client = LocalClient.instance();
		this.lifespan = new Lifespan();

		this.client.getStore('/userStore', this.lifespan)
			.onUpdate(({head}) => {
				this.setState({
					infos: head.toJS().infos,
				});
			})
			.onDelete(() => {
				this.setState(undefined);
			});
	}

	componentWillUnmount() {
		this.lifespan.release();
	}

	render() {
		const plans = {
			'personal_monthly': 'Professional monthly subscription',
			'personal_annual': 'Professional annual subscription',
		};
		const username = this.state.infos.accountValues && this.state.infos.accountValues.username
			? <div>You're signed in as <span className="subscription-sidebar-info-emphase">{this.state.infos.accountValues.username}</span>,</div>
			: false;
		const names = this.state.infos.accountValues && (this.state.infos.accountValues.firstname || this.state.infos.accountValues.lastname)
			? <div>we know you as <span className="subscription-sidebar-info-emphase">{`${this.state.infos.accountValues.firstname} ${this.state.infos.accountValues.lastname}`}</span></div>
			: false;
		const plan = this.state.infos && this.state.infos.plan
			? <div>and you chose the <span className="subscription-sidebar-info-emphase">{plans[this.state.infos.plan]}</span>.</div>
			: false;
		const card = this.state.infos.card && this.state.infos.card[0]
			? <div>You registered a payment card with us, its expiration date is <span className="subscription-sidebar-info-emphase">{this.state.infos.card[0].exp_month}/{this.state.infos.card[0].exp_year}</span></div>
			: false;
			const data = this.state.infos.accountValues && !this.context.router.isActive('/account/create/confirmation')
			? (
				<div className="subscription-sidebar-info">
					{username}
					{names}
					{plan}
					{card}
				</div>
			)
			: false;

		return (
			<div className="subscription-sidebar">
				<ul className="subscription-sidebar-steps">
					<SubscriptionSidebarItem number="1" label="Sign up" done={!!username} route="/account/create" index={true} />
					<SubscriptionSidebarItem number="2" label="Choose a plan" done={!!plan} route="/account/create/choose-a-plan"/>
					<SubscriptionSidebarItem number="3" label="Payment details" done={!!card} route="/account/create/add-card"/>
					<SubscriptionSidebarItem number="4" label="Confirmation" route="/account/create/confirmation"/>
				</ul>
				{data}
			</div>
		);
	}
}

SubscriptionSidebar.contextTypes = {
	router: React.PropTypes.object.isRequired,
};


class SubscriptionSidebarItem extends React.Component {
	render() {
		const classes = classNames({
			'subscription-sidebar-steps-step': true,
			'is-finish': this.props.done,
		});

		return (
			<li className={classes}>
				<div className="subscription-sidebar-steps-step-number">{this.props.number}</div>
				<div className="subscription-sidebar-steps-step-label"><span className="subscription-sidebar-steps-step-link">{this.props.label}</span></div>
			</li>
		);
	}
}

SubscriptionSidebarItem.contextTypes = {
	router: React.PropTypes.object.isRequired,
};
<commit_msg>Fix missing plan in subscription sidebar<commit_after>import React from 'react';
import classNames from 'classnames';
import Lifespan from 'lifespan';
import {Link} from 'react-router';

import LocalClient from '../../stores/local-client.stores.jsx';

export default class SubscriptionSidebar extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			infos: {},
		};
	}

	componentWillMount() {
		this.client = LocalClient.instance();
		this.lifespan = new Lifespan();

		this.client.getStore('/userStore', this.lifespan)
			.onUpdate(({head}) => {
				this.setState({
					infos: head.toJS().infos,
				});
			})
			.onDelete(() => {
				this.setState(undefined);
			});
	}

	componentWillUnmount() {
		this.lifespan.release();
	}

	render() {
		const plans = {
			'personal_monthly': 'Professional monthly subscription',
			'personal_annual_99': 'Professional annual subscription',
		};
		const username = this.state.infos.accountValues && this.state.infos.accountValues.username
			? <div>You're signed in as <span className="subscription-sidebar-info-emphase">{this.state.infos.accountValues.username}</span>,</div>
			: false;
		const names = this.state.infos.accountValues && (this.state.infos.accountValues.firstname || this.state.infos.accountValues.lastname)
			? <div>we know you as <span className="subscription-sidebar-info-emphase">{`${this.state.infos.accountValues.firstname} ${this.state.infos.accountValues.lastname}`}</span></div>
			: false;
		const plan = this.state.infos && this.state.infos.plan
			? <div>and you chose the <span className="subscription-sidebar-info-emphase">{plans[this.state.infos.plan]}</span>.</div>
			: false;
		const card = this.state.infos.card && this.state.infos.card[0]
			? <div>You registered a payment card with us, its expiration date is <span className="subscription-sidebar-info-emphase">{this.state.infos.card[0].exp_month}/{this.state.infos.card[0].exp_year}</span></div>
			: false;
			const data = this.state.infos.accountValues && !this.context.router.isActive('/account/create/confirmation')
			? (
				<div className="subscription-sidebar-info">
					{username}
					{names}
					{plan}
					{card}
				</div>
			)
			: false;

		return (
			<div className="subscription-sidebar">
				<ul className="subscription-sidebar-steps">
					<SubscriptionSidebarItem number="1" label="Sign up" done={!!username} route="/account/create" index={true} />
					<SubscriptionSidebarItem number="2" label="Choose a plan" done={!!plan} route="/account/create/choose-a-plan"/>
					<SubscriptionSidebarItem number="3" label="Payment details" done={!!card} route="/account/create/add-card"/>
					<SubscriptionSidebarItem number="4" label="Confirmation" route="/account/create/confirmation"/>
				</ul>
				{data}
			</div>
		);
	}
}

SubscriptionSidebar.contextTypes = {
	router: React.PropTypes.object.isRequired,
};


class SubscriptionSidebarItem extends React.Component {
	render() {
		const classes = classNames({
			'subscription-sidebar-steps-step': true,
			'is-finish': this.props.done,
		});

		return (
			<li className={classes}>
				<div className="subscription-sidebar-steps-step-number">{this.props.number}</div>
				<div className="subscription-sidebar-steps-step-label"><span className="subscription-sidebar-steps-step-link">{this.props.label}</span></div>
			</li>
		);
	}
}

SubscriptionSidebarItem.contextTypes = {
	router: React.PropTypes.object.isRequired,
};

{'fraction_non_alphanumeric': 0.1630813953488372, 'fraction_numerical': 0.002325581395348837, 'mean_word_length': 4.342391304347826, 'pattern_counts': {'":': 0, '<': 71, '<?xml version=': 0, '>': 75, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5012176', 'n_tokens_mistral': 2462, 'n_tokens_neox': 2193, 'n_words': 367}