disco_app 0.8.9 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed3b05b40feb3571f36794c103cc6f661b3a2ac0b1319d8c8d6d3a113287f088
-  data.tar.gz: c4ffb7c2ee220e9e7f2d8c5f8d66e5270e84223150862b32a696c1dcc414d679
+  metadata.gz: d734e517357675c9fec94abcfe6fd509c04f6f31c9bdcc8a762c3971f11589d3
+  data.tar.gz: 5d2dd2d731d021adc3fbdc5e37af68df9f2c013083ad10980dd5ed2707842e8b
 SHA512:
-  metadata.gz: 0cad14dee7ceeee65abc7623b305ef328b9db9a572a1f4cd97840a3256ff00877d122090d472cd3340622fbfdcf7d3a7bac7dcf07b22e0ccb2db18f3c85f606b
-  data.tar.gz: 66580b280acd0a16d6dc092b008a231172a20ef73f208737a36332c2f0c2d6d9e20585ee129654b6d984a11762475ec316a121d6e2e8c8d4749a53868c7fb550
+  metadata.gz: 57d5072e2eb9d1b6b12ab45aeeb77b253e3fdf8aad36d993ec9799f8fa61de4ae1c9212e5b25c49304f54d6892d594b7befad0f1851fc6578f52e09c82d47e55
+  data.tar.gz: 02b898b139e5d707dd30680559f3abf459c51ca6c652f626449af2721b449997ab9871b0f933ae38c61e925fdecd45cf7db467ee58f7f0418fb5075178c6e693

data/app/assets/javascripts/disco_app/components/{filterable_shop_list.js.jsx → custom/filterable_shop_list.js.jsx}

@@ -52,7 +52,7 @@ var FilterableShopList = React.createClass({
         return (
             <div className="next-card">
               <ShopFilterTabs filterTabs={this.props.filterTabs} filter={this.state.filter} onFilterReplace={this.onFilterReplace} />
-              <ShopList shopsUrl={this.props.shopsUrl} editShopUrl={this.props.editShopUrl} filter={this.state.filter} />
+              <ShopList shopsUrl={this.props.shopsUrl} editShopUrl={this.props.editShopUrl} editSubscriptionUrl={this.props.editSubscriptionUrl} filter={this.state.filter} />
             </div>
         );
     }

data/app/assets/javascripts/disco_app/components/custom/inline-radio-options.es6.jsx

@@ -0,0 +1,59 @@
+class InlineRadioOptions extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.value
+    }
+  }
+
+  onChange(value) {
+    this.setState({
+      value: value
+    })
+  }
+
+  render() {
+    const { name, label, options } = this.props;
+
+    const optionElements = options.map((option, optionIndex) => {
+      return (
+        <InputRadio
+          key={option.value}
+          name={name}
+          value={option.value}
+          label={option.label}
+          inline={true}
+          isLast={optionIndex === (options.length - 1)}
+          checked={option.value === this.state.value}
+          onChange={this.onChange.bind(this)}
+        />
+      );
+    });
+
+    return (
+      <CardSection wrappable={true}>
+        <div className="wrappable__item wrappable__item--no-flex">
+          <span>{label}</span>
+        </div>
+        <div className="wrappable__item">
+          {optionElements}
+        </div>
+      </CardSection>
+    );
+  }
+
+}
+
+InlineRadioOptions.propTypes = {
+  name: React.PropTypes.string,
+  options: React.PropTypes.arrayOf(
+    React.PropTypes.shape({
+      label: React.PropTypes.string.isRequired,
+      value: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.bool
+      ]).isRequired
+    })
+  ).isRequired
+};

data/app/assets/javascripts/disco_app/components/custom/rules-editor.es6.jsx

@@ -0,0 +1,360 @@
+/**
+ * Defines a generic RulesEditor class. This class can't be used directly, but
+ * should be inherited, with the inheriting class defining a list of column
+ * types and correponding relations and condition data types, like so:
+ *
+ *    class MyRulesEditor extends RulesEditor {};
+ *    MyRulesEditor.defaultProps = {
+ *      columns: {
+ *        title: {
+ *        label: 'Product title',
+ *        column: 'title',
+ *        relations: {
+ *          is_equal_to: {
+ *            label: 'is equal to',
+ *            relation: 'is_equal_to',
+ *            type: 'text'
+ *          }
+ *        }
+ *      }
+ *    }
+ */
+class RulesEditor extends React.Component {
+
+  /**
+   * Initialise the Rules Editor, and set the initial state.
+   * @param props
+   */
+  constructor(props) {
+    super(props);
+    this.state = {
+      rules: props.rules.map((rule, i) => {
+        return {
+          column: Object.keys(this.props.columns).filter((columnKey) => {
+            return this.props.columns[columnKey].column == rule.column;
+          })[0],
+          relation: rule.relation,
+          condition: rule.condition
+        }
+      })
+    }
+  }
+
+  componentDidMount() {
+    if(this.state.rules.length === 0 && this.props.blankOk === false) {
+      this.onAddRule();
+    }
+  }
+
+  /**
+   * Add a new rule, with an immutable state change.
+   */
+  onAddRule() {
+    const column = Object.keys(this.props.columns)[0];
+    const relation = this.getNextRelation(column);
+    const condition = this.getNextCondition(column, relation);
+
+    this.setState({
+      rules: this.state.rules.concat([{
+        column,
+        relation,
+        condition
+      }])
+    });
+  }
+
+  /**
+   * Remove a rule, with an immutable state change.
+   */
+  onRemoveRule(index) {
+    this.setState({
+      rules: [
+        ...this.state.rules.slice(0, index),
+        ...this.state.rules.slice(index + 1)
+      ]
+    });
+  }
+
+  /**
+   * Handle a change in a rule's column attribute.
+   *
+   * @param index
+   * @param column
+   */
+  onRuleColumnChange(index, column) {
+    const relation = this.getNextRelation(column, this.state.rules[index]);
+    const condition = this.getNextCondition(column, relation, this.state.rules[index]);
+
+    this.updateRule(index, {
+      column,
+      relation,
+      condition
+    })
+  }
+
+  /**
+   * Handle a change in a rule's relation attribute.
+   *
+   * @param index
+   * @param relation
+   */
+  onRuleRelationChange(index, relation) {
+    const condition = this.getNextCondition(this.state.rules[index].column, relation, this.state.rules[index]);
+
+    this.updateRule(index, {
+      relation,
+      condition
+    });
+  }
+
+  /**
+   * Handle a change in a rule's condition attribute.
+   *
+   * @param index
+   * @param condition
+   */
+  onRuleConditionChange(index, condition) {
+    this.updateRule(index, {
+      condition
+    });
+  }
+
+  /**
+   * Given the column we're changing to and the current rule, return the next
+   * relation value.
+   *
+   * @param nextColumn
+   * @param currentRule
+   */
+  getNextRelation(nextColumn, currentRule) {
+    // If the new column provides for the same relation, keep it.
+    if(currentRule && (this.props.columns[nextColumn].relations[currentRule.relation] !== undefined)) {
+      return currentRule.relation;
+    }
+    // Otherwise, return the first relation for the new column.
+    return Object.keys(this.props.columns[nextColumn].relations)[0];
+  }
+
+  /**
+   * Given the column and relation we're changing to and the current condition,
+   * return the value that the condition should be changed to.
+   *
+   * @param nextColumn
+   * @param nextRelation
+   * @param currentRule
+   */
+  getNextCondition(nextColumn, nextRelation, currentRule) {
+    // If the new relation provides for the same condition type, keep it.
+    if(currentRule) {
+      const currentConditionType = this.props.columns[currentRule.column].relations[currentRule.relation].type;
+      const nextConditionType = this.props.columns[nextColumn].relations[nextRelation].type;
+
+      if(currentConditionType === nextConditionType) {
+        return currentRule.condition;
+      }
+    }
+
+    // Otherwise, reset the condition to an empty string.
+    return '';
+  }
+
+  /**
+   * Handle the updating of a rule in our array in an immutable manner.
+   *
+   * @param index
+   * @param updates
+   */
+  updateRule(index, updates) {
+    this.setState({
+      rules: [
+        ...this.state.rules.slice(0, index),
+        Object.assign({}, this.state.rules[index], updates),
+        ...this.state.rules.slice(index + 1)
+      ]
+    });
+  }
+
+  /**
+   * Render the Rules Editor.
+   */
+  render() {
+    const { name } = this.props;
+    const { rules } = this.state;
+
+    const ruleElements = rules.map((rule, i) => {
+      return <RulesEditorRule
+        key={i}
+        rule={rule}
+        columns={this.props.columns}
+        onRemove={this.onRemoveRule.bind(this, i)}
+        onColumnChange={this.onRuleColumnChange.bind(this, i)}
+        onRelationChange={this.onRuleRelationChange.bind(this, i)}
+        onConditionChange={this.onRuleConditionChange.bind(this, i)}
+        ruleCount={rules.length}
+        blankOk = {this.props.blankOk}
+      />
+    });
+
+    // Convert the current rules JSON into a format using the correct column
+    // format used by our more advanced key checker.
+    const rulesJSON = JSON.stringify(this.state.rules.map((rule, i) => {
+      return {
+        column: this.props.columns[rule.column].column,
+        relation: rule.relation,
+        condition: rule.condition
+      }
+    }));
+
+    return(
+      <CardSection>
+        <div className="next-grid next-grid--no-outside-padding">
+          <div style={{ width: '100%'}}>
+            {ruleElements}
+          </div>
+        </div>
+        <Button onClick={this.onAddRule.bind(this)}>
+          Add another condition
+        </Button>
+        <input type="hidden" name={name} value={rulesJSON} />
+      </CardSection>
+    );
+  }
+
+  static buildRelationsObj(relations) {
+    var relationsObj = {};
+
+    relations.forEach(function (relation) {
+      return relationsObj[relation.relation] = relation;
+    });
+
+    return relationsObj;
+  }
+
+}
+
+
+RulesEditor.EQUALS_STRING = {
+  label: 'is equal to',
+  relation: 'is_equal_to',
+  type: 'text'
+};
+RulesEditor.EQUALS_COUNTRY_CODE = {
+  label: 'is equal to',
+  relation: 'is_equal_to',
+  type: 'country_code'
+};
+RulesEditor.CONTAINS_STRING = {
+  label: 'contains',
+  relation: 'contains_string',
+  type: 'text'
+};
+RulesEditor.EQUALS_TAG = {
+  label: 'is equal to',
+  relation: 'find_in_set',
+  type: 'tag'
+};
+RulesEditor.GREATER_THAN = {
+  label: 'is greater than',
+  relation: 'is_greater_than',
+  type: 'numeric'
+};
+RulesEditor.LESS_THAN = {
+  label: 'is less than',
+  relation: 'is_less_than',
+  type: 'numeric'
+};
+
+const RulesEditorRule = ({ rule, columns, onRemove, onColumnChange, onRelationChange, onConditionChange, ruleCount, blankOk }) => {
+  const { column, relation, condition } = rule;
+
+  const currentColumn = columns[column];
+  const currentRelation = currentColumn.relations[relation];
+
+  let conditionEditor = null;
+  switch(currentRelation.type) {
+    case 'text':
+    case 'numeric':
+    case 'tag':
+      conditionEditor = <RulesEditorConditionInputText condition={condition} onChange={onConditionChange} />;
+      break;
+    case 'country_code':
+      conditionEditor = <RulesEditorConditionInputCountryCode condition={condition} onChange={onConditionChange} />;
+      break;
+  }
+
+  let deleteIconCell = null;
+  if(ruleCount > 1 || blankOk === true) {
+    deleteIconCell = (
+      <div className="sl">
+        <button type="button" className="btn btn--icon" onClick={onRemove}>
+          <i className="ico ico-14-svg ico-delete" />
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="next-grid next-grid--no-padding next-grid--compact">
+        <div className="next-grid__cell">
+          <div className="next-grid next-grid--compact next-grid--no-outside-padding">
+            <div className="next-grid__cell">
+              <RulesEditorColumnSelect currentColumnName={column} columns={columns} onChange={onColumnChange} />
+            </div>
+            <div className="next-grid__cell">
+              <RulesEditorRelationSelect currentRelationName={relation} relations={currentColumn.relations} onChange={onRelationChange} />
+            </div>
+            <div className="next-grid__cell">
+              {conditionEditor}
+            </div>
+          </div>
+        </div>
+        {deleteIconCell}
+      </div>
+      <hr className="next-card__section__separator" />
+    </div>
+  );
+
+};
+
+const RulesEditorColumnSelect = ({ currentColumnName, columns, onChange }) => {
+  const options = Object.keys(columns).map((columnName) => {
+    return { label: columns[columnName].label, value: columnName }
+  });
+
+  return <InputSelect options={options} value={currentColumnName} onChange={onChange} label="Field" labelHidden={true} />;
+};
+
+const RulesEditorRelationSelect = ({ currentRelationName, relations, onChange }) => {
+  const options = Object.keys(relations).map((relationName) => {
+    return { label: relations[relationName].label, value: relationName }
+  });
+
+  return <InputSelect options={options} value={currentRelationName} onChange={onChange} label="Relation" labelHidden={true} />;
+};
+
+const RulesEditorConditionInputText = ({ condition, onChange }) => {
+
+  const handleChange = (e) => {
+    onChange && onChange(e);
+  };
+
+  return (
+    <InputText value={condition} onChange={handleChange} label="Value" labelHidden={true} />
+  );
+
+};
+
+const RulesEditorConditionInputCountryCode = ({ condition, onChange }) => {
+
+  const handleChange = (e) => {
+    onChange && onChange(e);
+  };
+
+  const countryOptions = [{"label":"Australia","value":"AU"},{"label":"Canada","value":"CA"},{"label":"United Kingdom","value":"GB"},{"label":"United States","value":"US"},{"label":"Afghanistan","value":"AF"},{"label":"Åland Islands","value":"AX"},{"label":"Albania","value":"AL"},{"label":"Algeria","value":"DZ"},{"label":"Andorra","value":"AD"},{"label":"Angola","value":"AO"},{"label":"Anguilla","value":"AI"},{"label":"Antigua & Barbuda","value":"AG"},{"label":"Argentina","value":"AR"},{"label":"Armenia","value":"AM"},{"label":"Aruba","value":"AW"},{"label":"Australia","value":"AU"},{"label":"Austria","value":"AT"},{"label":"Azerbaijan","value":"AZ"},{"label":"Bahamas","value":"BS"},{"label":"Bahrain","value":"BH"},{"label":"Bangladesh","value":"BD"},{"label":"Barbados","value":"BB"},{"label":"Belarus","value":"BY"},{"label":"Belgium","value":"BE"},{"label":"Belize","value":"BZ"},{"label":"Benin","value":"BJ"},{"label":"Bermuda","value":"BM"},{"label":"Bhutan","value":"BT"},{"label":"Bolivia","value":"BO"},{"label":"Bosnia & Herzegovina","value":"BA"},{"label":"Botswana","value":"BW"},{"label":"Bouvet Island","value":"BV"},{"label":"Brazil","value":"BR"},{"label":"British Indian Ocean Territory","value":"IO"},{"label":"British Virgin Islands","value":"VG"},{"label":"Brunei","value":"BN"},{"label":"Bulgaria","value":"BG"},{"label":"Burkina Faso","value":"BF"},{"label":"Burundi","value":"BI"},{"label":"Cambodia","value":"KH"},{"label":"Cameroon","value":"CM"},{"label":"Canada","value":"CA"},{"label":"Cape Verde","value":"CV"},{"label":"Cayman Islands","value":"KY"},{"label":"Central African Republic","value":"CF"},{"label":"Chad","value":"TD"},{"label":"Chile","value":"CL"},{"label":"China","value":"CN"},{"label":"Christmas Island","value":"CX"},{"label":"Cocos (Keeling) Islands","value":"CC"},{"label":"Colombia","value":"CO"},{"label":"Comoros","value":"KM"},{"label":"Congo - Brazzaville","value":"CG"},{"label":"Congo - Kinshasa","value":"CD"},{"label":"Cook Islands","value":"CK"},{"label":"Costa Rica","value":"CR"},{"label":"Croatia","value":"HR"},{"label":"Cuba","value":"CU"},{"label":"Curaçao","value":"CW"},{"label":"Cyprus","value":"CY"},{"label":"Czech Republic","value":"CZ"},{"label":"Côte d’Ivoire","value":"CI"},{"label":"Denmark","value":"DK"},{"label":"Djibouti","value":"DJ"},{"label":"Dominica","value":"DM"},{"label":"Dominican Republic","value":"DO"},{"label":"Ecuador","value":"EC"},{"label":"Egypt","value":"EG"},{"label":"El Salvador","value":"SV"},{"label":"Equatorial Guinea","value":"GQ"},{"label":"Eritrea","value":"ER"},{"label":"Estonia","value":"EE"},{"label":"Ethiopia","value":"ET"},{"label":"Falkland Islands","value":"FK"},{"label":"Faroe Islands","value":"FO"},{"label":"Fiji","value":"FJ"},{"label":"Finland","value":"FI"},{"label":"France","value":"FR"},{"label":"French Guiana","value":"GF"},{"label":"French Polynesia","value":"PF"},{"label":"French Southern Territories","value":"TF"},{"label":"Gabon","value":"GA"},{"label":"Gambia","value":"GM"},{"label":"Georgia","value":"GE"},{"label":"Germany","value":"DE"},{"label":"Ghana","value":"GH"},{"label":"Gibraltar","value":"GI"},{"label":"Greece","value":"GR"},{"label":"Greenland","value":"GL"},{"label":"Grenada","value":"GD"},{"label":"Guadeloupe","value":"GP"},{"label":"Guatemala","value":"GT"},{"label":"Guernsey","value":"GG"},{"label":"Guinea","value":"GN"},{"label":"Guinea-Bissau","value":"GW"},{"label":"Guyana","value":"GY"},{"label":"Haiti","value":"HT"},{"label":"Heard & McDonald Islands","value":"HM"},{"label":"Honduras","value":"HN"},{"label":"Hong Kong SAR China","value":"HK"},{"label":"Hungary","value":"HU"},{"label":"Iceland","value":"IS"},{"label":"India","value":"IN"},{"label":"Indonesia","value":"ID"},{"label":"Iran","value":"IR"},{"label":"Iraq","value":"IQ"},{"label":"Ireland","value":"IE"},{"label":"Isle of Man","value":"IM"},{"label":"Israel","value":"IL"},{"label":"Italy","value":"IT"},{"label":"Jamaica","value":"JM"},{"label":"Japan","value":"JP"},{"label":"Jersey","value":"JE"},{"label":"Jordan","value":"JO"},{"label":"Kazakhstan","value":"KZ"},{"label":"Kenya","value":"KE"},{"label":"Kiribati","value":"KI"},{"label":"Kosovo","value":"KV"},{"label":"Kuwait","value":"KW"},{"label":"Kyrgyzstan","value":"KG"},{"label":"Laos","value":"LA"},{"label":"Latvia","value":"LV"},{"label":"Lebanon","value":"LB"},{"label":"Lesotho","value":"LS"},{"label":"Liberia","value":"LR"},{"label":"Libya","value":"LY"},{"label":"Liechtenstein","value":"LI"},{"label":"Lithuania","value":"LT"},{"label":"Luxembourg","value":"LU"},{"label":"Macau SAR China","value":"MO"},{"label":"Macedonia","value":"MK"},{"label":"Madagascar","value":"MG"},{"label":"Malawi","value":"MW"},{"label":"Malaysia","value":"MY"},{"label":"Maldives","value":"MV"},{"label":"Mali","value":"ML"},{"label":"Malta","value":"MT"},{"label":"Martinique","value":"MQ"},{"label":"Mauritania","value":"MR"},{"label":"Mauritius","value":"MU"},{"label":"Mayotte","value":"YT"},{"label":"Mexico","value":"MX"},{"label":"Moldova","value":"MD"},{"label":"Monaco","value":"MC"},{"label":"Mongolia","value":"MN"},{"label":"Montenegro","value":"ME"},{"label":"Montserrat","value":"MS"},{"label":"Morocco","value":"MA"},{"label":"Mozambique","value":"MZ"},{"label":"Myanmar (Burma)","value":"MM"},{"label":"Namibia","value":"NA"},{"label":"Nauru","value":"NR"},{"label":"Nepal","value":"NP"},{"label":"Netherlands","value":"NL"},{"label":"Netherlands Antilles","value":"AN"},{"label":"New Caledonia","value":"NC"},{"label":"New Zealand","value":"NZ"},{"label":"Nicaragua","value":"NI"},{"label":"Niger","value":"NE"},{"label":"Nigeria","value":"NG"},{"label":"Niue","value":"NU"},{"label":"Norfolk Island","value":"NF"},{"label":"North Korea","value":"KP"},{"label":"Norway","value":"NO"},{"label":"Oman","value":"OM"},{"label":"Pakistan","value":"PK"},{"label":"Palestinian Territories","value":"PS"},{"label":"Panama","value":"PA"},{"label":"Papua New Guinea","value":"PG"},{"label":"Paraguay","value":"PY"},{"label":"Peru","value":"PE"},{"label":"Philippines","value":"PH"},{"label":"Pitcairn Islands","value":"PN"},{"label":"Poland","value":"PL"},{"label":"Portugal","value":"PT"},{"label":"Qatar","value":"QA"},{"label":"Réunion","value":"RE"},{"label":"Romania","value":"RO"},{"label":"Russia","value":"RU"},{"label":"Rwanda","value":"RW"},{"label":"Samoa","value":"WS"},{"label":"San Marino","value":"SM"},{"label":"São Tomé & Príncipe","value":"ST"},{"label":"Saudi Arabia","value":"SA"},{"label":"Senegal","value":"SN"},{"label":"Serbia","value":"RS"},{"label":"Seychelles","value":"SC"},{"label":"Sierra Leone","value":"SL"},{"label":"Singapore","value":"SG"},{"label":"Sint Maarten","value":"SX"},{"label":"Slovakia","value":"SK"},{"label":"Slovenia","value":"SI"},{"label":"Solomon Islands","value":"SB"},{"label":"Somalia","value":"SO"},{"label":"South Africa","value":"ZA"},{"label":"South Georgia & South Sandwich Islands","value":"GS"},{"label":"South Korea","value":"KR"},{"label":"Spain","value":"ES"},{"label":"Sri Lanka","value":"LK"},{"label":"St. Barthélemy","value":"BL"},{"label":"St. Helena","value":"SH"},{"label":"St. Kitts & Nevis","value":"KN"},{"label":"St. Lucia","value":"LC"},{"label":"St. Martin","value":"MF"},{"label":"St. Pierre & Miquelon","value":"PM"},{"label":"St. Vincent & Grenadines","value":"VC"},{"label":"Sudan","value":"SD"},{"label":"Suriname","value":"SR"},{"label":"Svalbard & Jan Mayen","value":"SJ"},{"label":"Swaziland","value":"SZ"},{"label":"Sweden","value":"SE"},{"label":"Switzerland","value":"CH"},{"label":"Syria","value":"SY"},{"label":"Taiwan","value":"TW"},{"label":"Tajikistan","value":"TJ"},{"label":"Tanzania","value":"TZ"},{"label":"Thailand","value":"TH"},{"label":"Timor-Leste","value":"TL"},{"label":"Togo","value":"TG"},{"label":"Tokelau","value":"TK"},{"label":"Tonga","value":"TO"},{"label":"Trinidad & Tobago","value":"TT"},{"label":"Tunisia","value":"TN"},{"label":"Turkey","value":"TR"},{"label":"Turkmenistan","value":"TM"},{"label":"Turks & Caicos Islands","value":"TC"},{"label":"Tuvalu","value":"TV"},{"label":"U.S. Outlying Islands","value":"UM"},{"label":"Uganda","value":"UG"},{"label":"Ukraine","value":"UA"},{"label":"United Arab Emirates","value":"AE"},{"label":"United Kingdom","value":"GB"},{"label":"United States","value":"US"},{"label":"Uruguay","value":"UY"},{"label":"Uzbekistan","value":"UZ"},{"label":"Vanuatu","value":"VU"},{"label":"Vatican City","value":"VA"},{"label":"Venezuela","value":"VE"},{"label":"Vietnam","value":"VN"},{"label":"Wallis & Futuna","value":"WF"},{"label":"Western Sahara","value":"EH"},{"label":"Yemen","value":"YE"},{"label":"Zambia","value":"ZM"},{"label":"Zimbabwe","value":"ZW"}];
+
+  return (
+    <InputSelect options={countryOptions} value={condition} onChange={handleChange} label="Value" labelHidden={true} />
+  );
+
+};

data/app/assets/javascripts/disco_app/components/{shop_list.js.jsx → custom/shop_list.js.jsx}

@@ -24,7 +24,7 @@ var ShopList = React.createClass({
 
     componentDidUpdate: function (prevProps, prevState) {
         if(prevProps.filter != this.props.filter) {
-            this.getShops();
+          this.onShopsChanged();
         }
         if(prevState.page != this.state.page) {
             this.getShops();
@@ -35,6 +35,7 @@ var ShopList = React.createClass({
         this.setState({page: this.state.page + increment});
     },
 
+    /* get shops with a different filter */
     onShopsChanged: function() {
         this.setState({page: 1});
         this.getShops();
@@ -66,7 +67,7 @@ var ShopList = React.createClass({
         var shopRows = this.state.shops.map(function(shop, index) {
             if ((index >= ((this.state.page - 1) * this.props.pageSize)) && (index <  this.state.page * this.props.pageSize)) {
             return (
-                <ShopRow shop={shop} editShopUrl={this.props.editShopUrl} key={shop.id} />
+                <ShopRow shop={shop} editShopUrl={this.props.editShopUrl} editSubscriptionUrl={this.props.editSubscriptionUrl} key={shop.id} />
             )
             } else {
               return null;
@@ -79,16 +80,13 @@ var ShopList = React.createClass({
                     <table className="table-hover expanded">
                         <thead>
                             <tr>
-                                <th>ID</th>
-                                <th>Shopify Domain</th>
+                                <th>Shop</th>
                                 <th>Status</th>
-                                <th>Email</th>
-                                <th>Country Name</th>
-                                <th>Currency</th>
-                                <th>Domain</th>
-                                <th>Plan</th>
-                                <th>Created</th>
-                                <th>Installed Duration</th>
+                                <th>Country</th>
+                                <th>Shopify Plan</th>
+                                <th>Subscription</th>
+                                <th>Source</th>
+                                <th>Installed for</th>
                             </tr>
                         </thead>
                         <tbody>

data/app/assets/javascripts/disco_app/components/custom/shop_row.js.jsx

@@ -0,0 +1,43 @@
+var ShopRow = (props) => {
+
+    var shop = props.shop,
+        editShopUrl = props.editShopUrl.replace(':id', shop.id),
+        domainName = shop.attributes['domain'],
+        countryName = shop.attributes['country-name'],
+        currency = shop.attributes['currency'],
+        planName = shop.attributes['plan-display-name'],
+        editSubscriptionUrl = props.editSubscriptionUrl
+          .replace(':shop_id', shop.id)
+          .replace(':id', shop.attributes['current-subscription-id']),
+        subscriptionPlan = shop.attributes['current-subscription-display-plan'],
+        subscriptionAmount = shop.attributes['current-subscription-display-amount'],
+        subscriptionSource = shop.attributes['current-subscription-source'],
+        installedDuration = shop.attributes['installed-duration'];
+
+    var subscriptionContent = null;
+    if(shop.attributes['current-subscription-id']) {
+      subscriptionContent = <a href={editSubscriptionUrl}>{subscriptionPlan} ({subscriptionAmount})</a>;
+    } else {
+      subscriptionContent = <span>{subscriptionPlan} ({subscriptionAmount})</span>;
+    }
+
+    var planCodeContent = null;
+    if(shop.attributes['current-subscription-display-plan-code']) {
+      planCodeContent = <span><br />{shop.attributes['current-subscription-display-plan-code']}</span>;
+    }
+
+    return (
+        <tr>
+            <td>
+              <a href={editShopUrl}>{domainName}</a><br />
+              <a href={'mailto:' + shop.attributes.email}>{shop.attributes.email}</a>
+            </td>
+            <td>{shop.attributes.status}</td>
+            <td>{countryName}</td>
+            <td>{planName}</td>
+            <td>{subscriptionContent}{planCodeContent}</td>
+            <td>{subscriptionSource}</td>
+            <td>{installedDuration}</td>
+        </tr>
+    )
+};

data/app/assets/javascripts/disco_app/components/ui-kit/cards/card-section.es6.jsx

@@ -0,0 +1,30 @@
+const CardSection = ({ title, children, wrappable, borderless }) => {
+
+  const className = classNames({
+    'next-card__section': true,
+    'wrappable': wrappable,
+    'wrappable--half-spacing': wrappable,
+    'next-card__section--no-border': borderless,
+    'next-card__section--no-top-spacing': borderless
+  });
+
+  const showTitle = () => {
+    if (title) {
+      return <CardSectionTitle title={title}/>;
+    } else {
+      return null;
+    }
+  };
+
+  return (
+    <div className={className}>
+      {showTitle()}
+      {children}
+    </div>
+  );
+};
+
+CardSection.propTypes = {
+  title: React.PropTypes.string,
+  children: React.PropTypes.node
+};

data/app/assets/javascripts/disco_app/components/ui-kit/cards/card.es6.jsx

@@ -0,0 +1,9 @@
+const Card = ({ children }) => {
+  return (
+    <div className="next-card">{children}</div>
+  );
+};
+
+Card.PropTypes = {
+  children: React.PropTypes.node
+};

data/app/assets/javascripts/disco_app/components/ui-kit/cards/cart-section-title.es6.jsx

@@ -0,0 +1,7 @@
+const CardSectionTitle = ({ title }) => {
+  return <h3 className="next-heading">{title}</h3>;
+};
+
+CardSectionTitle.propTypes = {
+  title: React.PropTypes.string
+};