BRCD-1682: add play/s to product, service, plan screens

public/js/components/CustomFields/CustomField.js

@@ -13,6 +13,8 @@ import {
 import {
   getConfig,
   parseConfigSelectOptions,
+  shouldUsePlays,
+  getPlayOptions,
 } from '../../common/Util';
 
 
@@ -129,11 +131,6 @@ class CustomField extends Component {
     return customFieldsConfig.find(config => config.get('id', '') === fieldtype, null, Immutable.Map());
   }
 
-  getPlayOptions = () => (this.props.availablePlays.map(play => ({
-    value: play.get('name', ''),
-    label: play.get('label', play.get('name', '')),
-  })).toArray());
-
   inBlackList = (option, entity) => {
     const blackList = option.get('exclude', Immutable.List());
     if (blackList.isEmpty()) {
@@ -212,7 +209,7 @@ class CustomField extends Component {
   }
 
   renderAdvancedEdit = () => {
-    const { field, entity, customFieldsConfig } = this.props;
+    const { field, entity, customFieldsConfig, availablePlays } = this.props;
     const { showAdvancedEdit } = this.state;
     const fieldType = this.getFieldType(field);
     const fieldConfig = this.getFieldTypeConfig(fieldType);
@@ -221,8 +218,8 @@ class CustomField extends Component {
     const checkboxStyle = { marginTop: 10, paddingLeft: 26 };
     const helpTextStyle = { color: '#626262', verticalAlign: 'text-top' };
 
-    const playsOptions = this.getPlayOptions();
-    const showPlays = ['subscriber'].includes(entity) && playsOptions.length > 1;
+    const playsOptions = getPlayOptions(availablePlays);
+    const showPlays = ['subscriber', 'product', 'service', 'plan'].includes(entity) && shouldUsePlays(availablePlays);
     const plays = field.get('plays', []).join(',');
 
     const disableUnique = !this.isAllowedForProperty('unique') || !this.isEditableProperty('unique');

public/js/components/CustomerSetup/Subscription.js

@@ -267,7 +267,7 @@ class Subscription extends Component {
     return ([
       (<PlaysSelector
         entity={subscription}
-        editble={editable}
+        editable={editable}
         onChange={this.onChangePlay}
       />),
       (<FormGroup key="plan">

public/js/components/Entity/EntityFields.js

@@ -88,8 +88,9 @@ class EntityFields extends Component {
       return false;
     }
     const play = entity.get('play', '');
+    const plays = Immutable.List(typeof play.split === 'function' ? play.split(',') : play);
     const fieldPlays = field.get('plays', 'all');
-    const isFieldOfPlay = fieldPlays === 'all' || fieldPlays.contains(play);
+    const isFieldOfPlay = fieldPlays === 'all' || plays.some(p => fieldPlays.indexOf(p) > -1);
     return isFieldOfPlay;
   }
 

public/js/components/Plan/PlanTab.js

@@ -9,6 +9,7 @@ import Field from '../Field';
 import CreateButton from '../Elements/CreateButton';
 import PlanPrice from './components/PlanPrice';
 import EntityFields from '../Entity/EntityFields';
+import PlaysSelector from '../Plays/PlaysSelector';
 import {
   getFieldName,
   getFieldNameType,
@@ -75,6 +76,11 @@ export default class Plan extends Component {
     this.props.onChangeFieldValue(['description'], value);
   }
 
+  onChangePlays = (plays) => {
+    const playsToSave = plays === '' ? [] : plays.split(',');
+    this.props.onChangeFieldValue(['play'], playsToSave);
+  }
+
   onChangePlanEach = (e) => {
     let value = parseInt(e.target.value);
     value = isNaN(value) ? '' : value;
@@ -177,6 +183,13 @@ export default class Plan extends Component {
           <Form horizontal>
             <Panel>
 
+              <PlaysSelector
+                entity={plan}
+                editable={editable}
+                multi={true}
+                onChange={this.onChangePlays}
+              />
+
               <FormGroup>
                 <Col componentClass={ControlLabel} sm={3} lg={2}>
                   { getFieldName('description', getFieldNameType('service'), sentenceCase('title'))}

public/js/components/Plays/PlaysSelector.js

@@ -42,9 +42,11 @@ class PlaysSelector extends Component {
       return null;
     }
     const play = entity.get('play', '');
+    const label = multi ? 'Play/s' : 'Play';
+    const displayValue = typeof play.join === 'function' ? play.join(',') : play;
     return (
       <FormGroup key="play">
-        <Col componentClass={ControlLabel}sm={3} lg={2}>Play <span className="danger-red"> *</span></Col>
+        <Col componentClass={ControlLabel}sm={3} lg={2}>{label}</Col>
         <Col sm={8} lg={9}>
           { editable
             ? <Select
@@ -53,7 +55,7 @@ class PlaysSelector extends Component {
               onChange={onChange}
               multi={multi}
             />
-          : <Field value={play} editable={false} />
+          : <Field value={displayValue} editable={false} />
           }
         </Col>
       </FormGroup>

public/js/components/Product/Product.js

@@ -10,6 +10,7 @@ import { ProductDescription } from '../../FieldDescriptions';
 import ProductPrice from './components/ProductPrice';
 import EntityFields from '../Entity/EntityFields';
 import UsageTypesSelector from '../UsageTypes/UsageTypesSelector';
+import PlaysSelector from '../Plays/PlaysSelector';
 import {
   getUnitLabel,
   getFieldName,
@@ -80,6 +81,10 @@ class Product extends Component {
     this.props.onFieldUpdate(['key'], value);
   }
 
+  onChangePlay = (play) => {
+    this.props.onFieldUpdate(['play'], play);
+  }
+
   onChangeDescription = (e) => {
     const { value } = e.target;
     this.props.onFieldUpdate(['description'], value);
@@ -229,6 +234,12 @@ class Product extends Component {
           <Form horizontal>
             <Panel>
 
+              <PlaysSelector
+                entity={product}
+                editable={editable}
+                onChange={this.onChangePlay}
+              />
+
               <FormGroup>
                 <Col componentClass={ControlLabel} sm={3} lg={2}>
                   { getFieldName('description', getFieldNameType('service'), sentenceCase('title'))}

public/js/components/Service/ServiceDetails.js

@@ -7,6 +7,7 @@ import { ServiceDescription } from '../../FieldDescriptions';
 import Help from '../Help';
 import Field from '../Field';
 import EntityFields from '../Entity/EntityFields';
+import PlaysSelector from '../Plays/PlaysSelector';
 import {
   getFieldName,
   getFieldNameType,
@@ -70,6 +71,11 @@ export default class ServiceDetails extends Component {
     this.props.updateItem(['quantitative'], value);
   }
 
+  onChangePlays = (plays) => {
+    const playsToSave = plays === '' ? [] : plays.split(',');
+    this.props.updateItem(['play'], playsToSave);
+  }
+
   onChangeDescription = (e) => {
     const { value } = e.target;
     this.props.updateItem(['description'], value);
@@ -105,6 +111,13 @@ export default class ServiceDetails extends Component {
     return (
       <Form horizontal>
 
+        <PlaysSelector
+          entity={item}
+          editable={editable}
+          multi={true}
+          onChange={this.onChangePlays}
+        />
+
         <FormGroup>
           <Col componentClass={ControlLabel} sm={3} lg={2}>
             { getFieldName('description', getFieldNameType('service'), sentenceCase('title'))}