Select Plan

SelectPlan.js

import React from 'react';

import PropTypes from 'prop-types';

import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
import RaisedButton from 'material-ui/RaisedButton';
import Paper from 'material-ui/Paper';

import { getPlanId } from 'utils/payment';

import styles from './SelectPlanStyles';

const SelectPlan = ( { formatMessage, handelChangePlan, handelChangePlanItem, changeView, planId, planItemId, plans, user, cancel } ) => {
  const _handelChangePlan = (event, index, value) => handelChangePlan(value);
  const _handelChangePlanItem = (event, value) => handelChangePlanItem(value);

  const isSubscriber = user.isSubscriber && user.plan !== 'trial';


  const planIdDisplay = planId || getPlanId(user.plan);
  const planItemIdDisplay = planItemId || user.plan;

  const currentPlanItems = (plans.find((it) => it.id === planIdDisplay) || {}).items || [];

  const isCanContinue = () => {
    if (!planItemId) {
      return false;
    }

    if (user.plan !== planItemId) {
      return true;
    }

    return false;
  };

  return (
    <div style={styles.wrapper}>
      <Paper zDepth={0}>
        <SelectField value={planIdDisplay} onChange={_handelChangePlan} fullWidth>
          <MenuItem value="" key={`plan-item-default`} primaryText={formatMessage({id: 'billing.plan.selectPlanLabel'})}/>
          { plans.map((it) => (
            <MenuItem value={it.id} key={`plan-item-${it.id}`} primaryText={formatMessage({id: it.nameId})}/>
          ))}
        </SelectField>
        <h4>
          {formatMessage({ id: 'billing.plan.selectPaymentFrequency' })}
        </h4>
        <p>
          {formatMessage({id: 'billing.plan.payForUserLabel'}, {count: user.team.length})}
        </p>
        <RadioButtonGroup name="planSelectId" valueSelected={planItemIdDisplay} onChange={_handelChangePlanItem}>
          {currentPlanItems.map((it, index) =>
            <RadioButton
              key={`plan-${planIdDisplay}-item-${index}`}
              value={it.id}
              label={(
                <div>
                  <span>{it.name}</span>
                  <span style={styles.price}>
                    <span style={styles.priceLabel}>
                    ${it.perUserPerMonth}
                    </span>
                    {formatMessage({ id: 'billing.plan.perUserPerMonthLabel' })}
                  </span>
                </div>
              )}
              style={Object.assign({}, styles.planItem, planItemIdDisplay === it.id ? styles.planItemSelected : null)}/>
          )}
        </RadioButtonGroup>
        <RaisedButton
          disabled={!isCanContinue()}
          label={formatMessage({ id: isSubscriber ? 'billing.plan.updatePlanBtnText' : 'billing.plan.addPaymentMethodBtnText' })}
          primary
          onTouchTap={changeView}/>
        { user.isTeamOwner && isSubscriber &&
          <RaisedButton label={formatMessage({ id: 'billing.plan.cancelSubscriptionBtnText' })}
            secondary onTouchTap={cancel} style={styles.cancelBtnStyle}/>
        }
      </Paper>
    </div>
  );
};

SelectPlan.propTypes = {
  planId: PropTypes.any,
  planItemId: PropTypes.any,
  plans: PropTypes.array.isRequired,
  user: PropTypes.object.isRequired,

  handelChangePlan: PropTypes.func.isRequired,
  handelChangePlanItem: PropTypes.func.isRequired,
  formatMessage: PropTypes.func.isRequired,
  changeView: PropTypes.func.isRequired,
  cancel: PropTypes.func.isRequired,
};

export default SelectPlan;