BRCD-1682: move plays selection and custom fields filteration to separate component

public/js/common/Util.js

@@ -539,3 +539,10 @@ export const sortFieldOption = (optionsA, optionB) => {
 export const onlyLineForeignFields = lineField => lineField.has('foreign');
 
 export const foreignFieldWithoutDates = foreignField => foreignField.getIn(['foreign', 'translate', 'type'], '') !== 'unixTimeToString';
+
+export const shouldUsePlays = availablePlays => (availablePlays.size > 1);
+
+export const getPlayOptions = availablePlays => availablePlays.map(play => ({
+  value: play.get('name', ''),
+  label: play.get('label', play.get('name', '')),
+})).toArray();

public/js/components/CustomerSetup/Subscription.js

@@ -11,7 +11,7 @@ import Actions from '../Elements/Actions';
 import Field from '../Field';
 import { EntityRevisionDetails } from '../Entity';
 import EntityFields from '../Entity/EntityFields';
-import { getSettings } from '../../actions/settingsActions';
+import PlaysSelector from '../Plays/PlaysSelector';
 import {
   getConfig,
   getItemId,
@@ -20,10 +20,6 @@ import {
   buildPageTitle,
   toImmutableList,
 } from '../../common/Util';
-import {
-  availablePlaysSettingsSelector,
-} from '../../selectors/settingsSelector';
-
 
 class Subscription extends Component {
 
@@ -34,7 +30,6 @@ class Subscription extends Component {
     settings: PropTypes.instanceOf(Immutable.List), // Subscriptions Fields
     allPlans: PropTypes.instanceOf(Immutable.List),
     allServices: PropTypes.instanceOf(Immutable.List),
-    availablePlays: PropTypes.instanceOf(Immutable.List),
     mode: PropTypes.string,
     onSave: PropTypes.func.isRequired,
     onCancel: PropTypes.func.isRequired,
@@ -50,7 +45,6 @@ class Subscription extends Component {
     settings: Immutable.List(),
     allPlans: Immutable.List(),
     allServices: Immutable.List(),
-    availablePlays: Immutable.List(),
   }
 
   constructor(props) {
@@ -61,10 +55,6 @@ class Subscription extends Component {
     };
   }
 
-  componentWillMount() {
-    this.props.dispatch(getSettings(['plays']));
-  }
-
   componentWillReceiveProps(nextProps) {
     if (!Immutable.is(this.props.subscription, nextProps.subscription)) {
       this.setState({ subscription: nextProps.subscription });
@@ -251,20 +241,15 @@ class Subscription extends Component {
   getAvailableServices = () => this.formatSelectOptions(this.props.allServices);
 
   filterCustomFields = (field) => {
-    const { subscription } = this.state;
     const hiddenFields = ['plan', 'services', 'play'];
     const isCustomField = !hiddenFields.includes(field.get('field_name'));
     const isEditable = field.get('editable', false);
     const isMandatory = field.get('mandatory', false);
     const shouldDisplayed = field.get('display', true);
-    const play = subscription.get('play', '');
-    const fieldPlays = field.get('plays', 'all');
-    const isFieldOfPlay = fieldPlays === 'all' || fieldPlays.contains(play);
 
     return isCustomField &&
     (isEditable || isMandatory) &&
-    shouldDisplayed &&
-    (!this.shouldUsePlays() || isFieldOfPlay);
+    shouldDisplayed;
     // PHP .../application/views/internalpaypage/index.phtml condition
     // if ((empty($c['display']) && empty($c['mandatory']))
     //  || $c['field_name'] === 'plan'
@@ -272,36 +257,6 @@ class Subscription extends Component {
     // ) continue;
   }
 
-  shouldUsePlays = () => (this.props.availablePlays.size > 1);
-
-  getPlayOptions = () => (this.props.availablePlays.map(play => ({
-    value: play.get('name', ''),
-    label: play.get('label', play.get('name', '')),
-  })).toArray());
-
-  renderPlays = (editable) => {
-    if (!this.shouldUsePlays()) {
-      return null;
-    }
-    const { subscription } = this.state;
-    const play = subscription.get('play', '');
-    return (
-      <FormGroup key="play">
-        <Col componentClass={ControlLabel}sm={3} lg={2}>Play <span className="danger-red"> *</span></Col>
-        <Col sm={8} lg={9}>
-          { editable
-            ? <Select
-              options={this.getPlayOptions()}
-              value={play}
-              onChange={this.onChangePlay}
-            />
-          : <Field value={play} editable={false} />
-          }
-        </Col>
-      </FormGroup>
-    );
-  }
-
   renderSystemFields = (editable) => {
     const { subscription } = this.state;
     const plansOptions = this.getAvailablePlans().toJS();
@@ -309,9 +264,12 @@ class Subscription extends Component {
     const services = subscription.get('services', Immutable.List()) || Immutable.List();
     const servicesList = Immutable.Set(services.map(service => service.get('name', ''))).join(',');
     const plan = subscription.get('plan', '');
-    const plays = this.renderPlays(editable);
     return ([
-      plays,
+      (<PlaysSelector
+        entity={subscription}
+        editble={editable}
+        onChange={this.onChangePlay}
+      />),
       (<FormGroup key="plan">
         <Col componentClass={ControlLabel}sm={3} lg={2}>Plan <span className="danger-red"> *</span></Col>
         <Col sm={8} lg={9}>
@@ -459,7 +417,6 @@ const mapStateToProps = (state, props) => {
   return ({
     revisions,
     mode,
-    availablePlays: availablePlaysSettingsSelector(state, props),
   });
 };
 export default connect(mapStateToProps)(Subscription);

public/js/components/Entity/EntityFields.js

@@ -6,7 +6,13 @@ import classNames from 'classnames';
 import { titleCase } from 'change-case';
 import EntityField from './EntityField';
 import { getSettings } from '../../actions/settingsActions';
-import { entityFieldSelector } from '../../selectors/settingsSelector';
+import {
+  entityFieldSelector,
+  availablePlaysSettingsSelector,
+} from '../../selectors/settingsSelector';
+import {
+  shouldUsePlays,
+} from '../../common/Util';
 
 
 class EntityFields extends Component {
@@ -23,6 +29,7 @@ class EntityFields extends Component {
     editable: PropTypes.bool,
     onChangeField: PropTypes.func,
     dispatch: PropTypes.func.isRequired,
+    availablePlays: PropTypes.instanceOf(Immutable.List),
   };
 
   static defaultProps = {
@@ -32,6 +39,7 @@ class EntityFields extends Component {
     fieldsFilter: null,
     editable: true,
     onChangeField: () => {},
+    availablePlays: Immutable.List(),
   }
 
   componentDidMount() {
@@ -74,6 +82,17 @@ class EntityFields extends Component {
     return !(fieldPath[0] === 'params' && !entity.hasIn(fieldPath));
   }
 
+  filterPlayFields = (field) => {
+    const { availablePlays, entity } = this.props;
+    if (!shouldUsePlays(availablePlays)) {
+      return false;
+    }
+    const play = entity.get('play', '');
+    const fieldPlays = field.get('plays', 'all');
+    const isFieldOfPlay = fieldPlays === 'all' || fieldPlays.contains(play);
+    return isFieldOfPlay;
+  }
+
   renderField = (field, key) => {
     const { entity, editable, onChangeField } = this.props;
     return (
@@ -91,6 +110,7 @@ class EntityFields extends Component {
     const { fields, fieldsFilter } = this.props;
     const fieldFilterFunction = fieldsFilter !== null ? fieldsFilter : this.filterPrintableFields;
     return fields
+      .filter(this.filterPlayFields)
       .filter(fieldFilterFunction)
       .filter(this.filterParamsFields)
       .map(this.renderField);
@@ -135,6 +155,7 @@ class EntityFields extends Component {
 
 const mapStateToProps = (state, props) => ({
   fields: entityFieldSelector(state, props),
+  availablePlays: availablePlaysSettingsSelector(state, props),
 });
 
 export default connect(mapStateToProps)(EntityFields);

public/js/components/Plays/PlaysSelector.js

+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import Immutable from 'immutable';
+import { FormGroup, ControlLabel, Col } from 'react-bootstrap';
+import Select from 'react-select';
+import Field from '../Field';
+import { getSettings } from '../../actions/settingsActions';
+import {
+  availablePlaysSettingsSelector,
+} from '../../selectors/settingsSelector';
+import {
+  shouldUsePlays,
+  getPlayOptions,
+} from '../../common/Util';
+
+
+class PlaysSelector extends Component {
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    availablePlays: PropTypes.instanceOf(Immutable.List),
+    entity: PropTypes.instanceOf(Immutable.Map).isRequired,
+    editable: PropTypes.bool,
+    multi: PropTypes.bool,
+    onChange: PropTypes.func,
+  }
+
+  static defaultProps = {
+    availablePlays: Immutable.List(),
+    editable: true,
+    multi: false,
+    onChange: () => {},
+  }
+
+  componentWillMount() {
+    this.props.dispatch(getSettings(['plays']));
+  }
+
+  render() {
+    const { availablePlays, entity, editable, multi, onChange } = this.props;
+    if (!shouldUsePlays(availablePlays)) {
+      return null;
+    }
+    const play = entity.get('play', '');
+    return (
+      <FormGroup key="play">
+        <Col componentClass={ControlLabel}sm={3} lg={2}>Play <span className="danger-red"> *</span></Col>
+        <Col sm={8} lg={9}>
+          { editable
+            ? <Select
+              options={getPlayOptions(availablePlays)}
+              value={play}
+              onChange={onChange}
+              multi={multi}
+            />
+          : <Field value={play} editable={false} />
+          }
+        </Col>
+      </FormGroup>
+    );
+  }
+}
+
+const mapStateToProps = (state, props) => ({
+  availablePlays: availablePlaysSettingsSelector(state, props),
+});
+export default connect(mapStateToProps)(PlaysSelector);