disco_app 0.9.0

checksums.yaml

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

data/Rakefile

@@ -0,0 +1,37 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'DiscoApp'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+load 'rails/tasks/statistics.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

data/app/assets/images/disco_app/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>.st0{fill:#231F20;} .st1{fill:#FBAF41;} .st2{fill:#8676D5;} .st3{fill:#9CCC6B;} .st4{fill:#FBCC6B;} .st5{fill:#9CCCD5;} .st6{fill:#FFFFFF;}</style><path id="XMLID_7_" class="st0" d="M12 24l-5.2-3-5.2-3V6l5.2-3L12 0l5.2 3 5.2 3v12l-5.2 3-5.2 3z"/><path id="XMLID_6_" class="st1" d="M2.9 6.8v10.4h18.2z"/><path id="XMLID_5_" class="st2" d="M2.9 17.2h18.2V6.8z"/><path id="XMLID_4_" class="st3" d="M21.1 17.2L12 1.5 2.9 17.2z"/><path id="XMLID_3_" class="st4" d="M7.5 9.4l-4.6 7.8h18.2z"/><path id="XMLID_2_" class="st5" d="M2.9 17.2h18.2l-4.6-7.8z"/><path id="XMLID_1_" class="st6" d="M12 12l-9.1 5.2 9.1 5.3 9.1-5.3z"/></svg>

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

@@ -0,0 +1,60 @@
+var FilterableShopList = React.createClass({
+
+    getDefaultProps: function() {
+        return {
+            filterTabs: [
+                { label: 'All Shops', filter: {} },
+                { label: 'Installed', filter: { 'filter[status]': 'installed' } },
+                { label: 'Uninstalled', filter: { 'filter[status]': 'uninstalled' } }
+            ],
+            availableFilters: {
+                'filter[status]': {
+                    getLabel: function(value) {
+                        return 'Status is ' + value;
+                    }
+                }
+            }
+        }
+    },
+
+    getInitialState: function() {
+        return {
+            filter: {}
+        };
+    },
+
+    onFilterReplace: function(filter) {
+        this.setState({
+            filter: filter
+        });
+    },
+
+    onFilterSet: function(name, value) {
+        this.onFiltersSet([{
+            name: name,
+            value: value
+        }]);
+    },
+
+    onFiltersSet: function(filters) {
+        var nextFilter = $.extend({}, this.state.filter);
+        filters.forEach(function(filter) {
+            if(!filter.value) {
+                delete nextFilter[filter.name];
+            } else {
+                nextFilter[filter.name] = filter.value;
+            }
+        });
+        this.onFilterReplace(nextFilter);
+    },
+
+    render: function() {
+        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} 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/custom/shop_filter_tab.js.jsx

@@ -0,0 +1,34 @@
+var ShopFilterTab = React.createClass({
+
+    /**
+     * Handle a click event on the individual tab link.
+     * @param e
+     */
+    handleClick: function(e) {
+        e.preventDefault();
+
+        // Don't do anything if this is already the currently selected tab.
+        if(this.isActive()) return;
+
+        this.props.onFilterTabSelected(this.props.filterTab);
+    },
+
+    /**
+     * Return true if this is the currently active tab, determined by whether the filter values for this tab match the
+     * currently active filter.
+     * @returns {boolean}
+     */
+    isActive: function() {
+        return (JSON.stringify(this.props.filterTab.filter) == JSON.stringify(this.props.filter));
+    },
+
+    render: function() {
+        var tabClassName = this.isActive() ? 'next-tab next-tab--is-active' : 'next-tab';
+        return (
+            <li role="presentation">
+                <a href="#" className={tabClassName} onClick={this.handleClick}>{this.props.filterTab.label}</a>
+            </li>
+        )
+    }
+
+});

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

@@ -0,0 +1,21 @@
+var ShopFilterTabs = React.createClass({
+
+    onFilterTabSelected: function(filterTab) {
+        this.props.onFilterReplace(filterTab.filter);
+    },
+
+    render: function() {
+        var filterTabNodes = this.props.filterTabs.map(function(filterTab) {
+            return (
+                <ShopFilterTab key={filterTab.label} filter={this.props.filter} filterTab={filterTab} onFilterTabSelected={this.onFilterTabSelected} />
+            )
+        }, this);
+
+        return (
+            <ul className="next-tab__list">
+                {filterTabNodes}
+            </ul>
+        )
+    }
+
+});