disco_app 0.10.0

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>
+        )
+    }
+
+});

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

@@ -0,0 +1,142 @@
+var ShopList = React.createClass({
+
+    getDefaultProps: function() {
+        return {
+            pageSize: 20
+        }
+    },
+
+    getInitialState: function() {
+        return {
+            shops: [],
+            page: 1
+        }
+    },
+
+    componentDidMount: function() {
+        this.getShops();
+        $(document).on('shops.changed', this.onShopsChanged);
+    },
+
+    componentWillUnmount: function() {
+      $(document).off('shops.changed', this.onShopsChanged);
+    },
+
+    componentDidUpdate: function (prevProps, prevState) {
+        if(prevProps.filter != this.props.filter) {
+          this.onShopsChanged();
+        }
+        if(prevState.page != this.state.page) {
+            this.getShops();
+        }
+    },
+
+    onPageChanged: function(increment) {
+        this.setState({page: this.state.page + increment});
+    },
+
+    /* get shops with a different filter */
+    onShopsChanged: function() {
+        this.setState({page: 1});
+        this.getShops();
+    },
+
+    getShops: function() {
+        //ShopifyApp.Bar.loadingOn();
+
+        // Set up request data with filter and pagination parameters.
+        var data = $.extend({
+            'page[size]': this.props.pageSize,
+            'page[number]': this.state.page
+        }, this.props.filter);
+
+        // Make the request to fetch the order list.
+        $.getJSON(this.props.shopsUrl, data, function(result) {
+            if(this.isMounted()) {
+                this.setState({
+                    shops: result.data
+                });
+            }
+        }.bind(this))
+        .always(function() {
+            //ShopifyApp.Bar.loadingOff();
+        });
+    },
+
+    render: function() {
+        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} editSubscriptionUrl={this.props.editSubscriptionUrl} key={shop.id} />
+            )
+            } else {
+              return null;
+            }
+        }.bind(this));
+
+        return (
+            <div>
+                <div className="next-card__section">
+                    <table className="table-hover expanded">
+                        <thead>
+                            <tr>
+                                <th>Shop</th>
+                                <th>Status</th>
+                                <th>Country</th>
+                                <th>Shopify Plan</th>
+                                <th>Subscription</th>
+                                <th>Source</th>
+                                <th>Installed for</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {shopRows}
+                        </tbody>
+                    </table>
+                </div>
+                <div className="next-card__section">
+                    <div className="next-grid next-grid--no-padding next-grid--center-aligned">
+                        <div className="next-grid__cell next-grid__cell--no-flex">
+                            <ShopList.Paginator page={this.state.page} pageSize={this.props.pageSize} items={this.state.shops} onPageChanged={this.onPageChanged} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+});
+
+/**
+ * Paginator.
+ */
+ShopList.Paginator = React.createClass({
+
+    handlePreviousClick: function(e) {
+        this.props.onPageChanged(-1);
+    },
+
+    handleNextClick: function(e) {
+        this.props.onPageChanged(1);
+    },
+
+    render: function() {
+        return (
+            <div className="btn-group" role="group">
+                <ShopList.PaginatorButton label="&lsaquo;" isDisabled={this.props.page < 2} onClick={this.handlePreviousClick} />
+                <ShopList.PaginatorButton label="&rsaquo;" isDisabled={this.props.items.length < this.props.pageSize * this.props.page} onClick={this.handleNextClick} />
+            </div>
+        )
+    }
+
+});
+
+/**
+ * Individual button within a paginator.
+ */
+ShopList.PaginatorButton = (props) => {
+    var className = 'btn btn-default' + (props.isDisabled ? ' disabled' : '');
+    return (
+        <button className={className} disabled={props.isDisabled} onClick={props.onClick}>{props.label}</button>
+    )
+};

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/custom/shopify_admin_link.js.jsx

@@ -0,0 +1,29 @@
+/**
+ * ShopifyAdminLink
+ *
+ * Renders a link pointing to an object (such as an order or customer) inside
+ * the given shop's Shopify admin. This helper makes it easy to  create links
+ * to objects within the admin that support both right-clicking and opening in
+ * a new tab as well as capturing a left click and redirecting to the relevant
+ * object using `ShopifyApp.redirect()`.
+ *
+ * This component is the React equivalent to the link_to_shopify_admin helper
+ * found in app/helpers/disco_app/application_helper.rb.
+ */
+var ShopifyAdminLink = React.createClass({
+
+    handleClick: function(e) {
+        e.preventDefault();
+        ShopifyApp.redirect(this.props.href);
+    },
+
+    render: function() {
+        var href = ShopifyApp.shopOrigin + '/admin' + this.props.href;
+        return (
+            <a className={this.props.className} href={href} onClick={this.handleClick}>
+                {this.props.label}
+            </a>
+        )
+    }
+
+});

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

@@ -0,0 +1,11 @@
+const CardFooter = ({ children }) => {
+  return (
+    <div className="next-card__footer">
+      {children}
+    </div>
+  );
+};
+
+CardFooter.propTypes = {
+  children: React.PropTypes.node.isRequired
+};

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

@@ -0,0 +1,11 @@
+const CardHeader = ({ title }) => {
+  return (
+    <div className="next-card__header">
+      <CardSectionTitle title={title} />
+    </div>
+  );
+};
+
+CardHeader.propTypes = {
+  title: React.PropTypes.string.isRequired
+};

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,16 @@
+const Card = ({ children, aside }) => {
+
+  const className = classNames({
+    'next-card': true,
+    'next-card--aside': aside
+  });
+
+  return (
+    <div className={className}>{children}</div>
+  );
+};
+
+Card.PropTypes = {
+  children: React.PropTypes.node,
+  aside: React.PropTypes.bool
+};

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

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

data/app/assets/javascripts/disco_app/components/ui-kit/forms/base_form.es6.jsx

@@ -0,0 +1,72 @@
+/**
+ * Base class for form components that provides helper methods
+ * for rendering errors associated with the form
+ **/
+class BaseForm extends React.Component {
+
+  /**
+   * check if the field parameter has errors associated.
+   * if no parameters are given, it checks if there's at least an error at all
+   **/
+  hasErrors(field) {
+    if ((arguments.length === 0 && this.errorKeys().length > 0) ||
+        (this.props.errors && this.props.errors.errors.indexOf(field) > -1)) {
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * returns a list of fields that contain errors
+   **/
+  errorKeys() {
+    return this.props.errors.errors;
+  }
+
+  /**
+   * returns the type of resource associate with this error
+   **/
+  errorType() {
+    return this.props.errors.type;
+  }
+
+  /**
+   * returns the error messages
+   **/
+  errorMessages() {
+    return this.props.errors.messages;
+  }
+
+  /**
+   * renders basic form errors
+   **/
+  renderErrors() {
+    if (!this.hasErrors()) {
+      return null;
+    }
+
+    var title = "There " + (this.errorMessages().length == 1 ? "is" : "are") + " " + this.errorMessages().length + " error" + (this.errorMessages().length > 1 ? "s" : "") + " for this " + this.errorType() + ":";
+    var errorMessages = this.errorMessages().map(function(message) {
+      return <li>{message}</li>;
+    });
+
+    return (
+      <div className="ui-banner ui-banner--status-error ui-banner--default-vertical-spacing ui-banner--default-horizontal-spacing">
+        <div className="ui-banner__ribbon">
+          <svg className="next-icon next-icon--24" viewBox="0 0 24 24">
+            <path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 4c1.4 0 2.7.4 3.9 1L12 8.8 8.8 12 5 15.9c-.6-1.1-1-2.5-1-3.9 0-4.4 3.6-8 8-8zm0 16c-1.4 0-2.7-.4-3.9-1l3.9-3.9 3.2-3.2L19 8.1c.6 1.1 1 2.5 1 3.9 0 4.4-3.6 8-8 8z"></path>
+          </svg>
+        </div>
+        <div className="ui-banner__content">
+          <h2 className="ui-banner__title">
+            {title}
+          </h2>
+          <ul>
+            {errorMessages}
+          </ul>
+        </div>
+      </div>
+    )
+  }
+
+}

data/app/assets/javascripts/disco_app/components/ui-kit/forms/base_input.es6.jsx

@@ -0,0 +1,20 @@
+/**
+ * Base class providing helper method for deciding if an input contains errors.
+ * Expects subclasses to have `name` and `errors`  props.
+ **/
+class BaseInput extends React.Component {
+
+  /**
+   * Checks if the component has associated errors or not
+   **/
+  hasError() {
+    if (!(this.props && this.props.name)) {
+      return false;
+    }
+    var fieldName = this.props.name.substring(this.props.name.lastIndexOf("[") + 1, this.props.name.lastIndexOf("]")); 
+    return (fieldName &&
+            this.props.errors && 
+            this.props.errors.errors &&
+            this.props.errors.errors.indexOf(fieldName) > -1);
+  }
+}

data/app/assets/javascripts/disco_app/components/ui-kit/forms/button.es6.jsx

@@ -0,0 +1,14 @@
+const Button = ({ children, disabled, name=false, onClick = ()=>{}, primary = false, type = 'button' }) => {
+
+  const className = classNames({
+    'btn': true,
+    'btn-primary': primary
+  });
+
+  return(
+    <button type={type} name={name} disabled={disabled} className={className} onClick={onClick}>
+      {children}
+    </button>
+  )
+
+};

data/app/assets/javascripts/disco_app/components/ui-kit/forms/input-checkbox.es6.jsx

@@ -0,0 +1,30 @@
+const InputCheckbox = ({ label, name, value, checked, inline, isLast, onChange, disabled = false }) => {
+
+  const id = `${name}[${value}]`;
+
+  const wrapperClassName = classNames({
+    'next-input-wrapper': true,
+    'inline': inline,
+    'sr': !isLast
+  });
+
+  const labelClassName = classNames({
+    'next-label': true,
+    'next-label--switch': true,
+    'inline': inline,
+    'fw-normal': inline
+  });
+
+  const handleChange = (e) => {
+    onChange && onChange(e.target.value);
+  };
+
+  return(
+    <div className={wrapperClassName}>
+      <label htmlFor={id} className={labelClassName}>{label}</label>
+      <input id={id} className="next-checkbox" type="checkbox" value={value} name={name} checked={checked} onChange={handleChange} disabled={disabled} />
+      <span className="next-checkbox--styled" />
+    </div>
+  )
+
+};

data/app/assets/javascripts/disco_app/components/ui-kit/forms/input-radio.es6.jsx

@@ -0,0 +1,30 @@
+const InputRadio = ({ label, name, value, checked, inline, isLast, onChange, disabled = false }) => {
+
+  const id = `${name}[${value}]`;
+
+  const wrapperClassName = classNames({
+    'next-input-wrapper': true,
+    'inline': inline,
+    'sr': !isLast
+  });
+
+  const labelClassName = classNames({
+    'next-label': true,
+    'next-label--switch': true,
+    'inline': inline,
+    'fw-normal': inline
+  });
+
+  const handleChange = (e) => {
+    onChange && onChange(e.target.value);
+  };
+
+  return(
+    <div className={wrapperClassName}>
+      <label htmlFor={id} className={labelClassName}>{label}</label>
+      <input id={id} className="next-radio" type="radio" value={value} name={name} checked={checked} onChange={handleChange} disabled={disabled} />
+      <span className="next-radio--styled" />
+    </div>
+  )
+
+};

data/app/assets/javascripts/disco_app/components/ui-kit/forms/input-select.es6.jsx

@@ -0,0 +1,39 @@
+const InputSelect = ({ id, label, labelHidden, name, options, value, onChange }) => {
+
+  const optionElements = options.map((option) => {
+    return <option key={option.value} value={option.value}>{option.label}</option>;
+  });
+
+  const labelClassName = classNames({
+    'next-label': true,
+    'helper--visually-hidden': labelHidden
+  });
+
+  const handleChange = (e) => {
+    onChange(e.target.value);
+  };
+
+  return(
+    <div className="next-input-wrapper">
+      <label className={labelClassName} htmlFor={id}>{label}</label>
+      <div className="next-select__wrapper next-input--has-content">
+        <select className="next-select rule-field" id={id} name={name} value={value} onChange={handleChange}>
+          {optionElements}
+        </select>
+        <NextIcon name="next-chevron-down" size={12} />
+      </div>
+    </div>
+  )
+
+};
+
+InputSelect.propTypes = {
+  label: React.PropTypes.string.isRequired,
+  name: React.PropTypes.string,
+  options: React.PropTypes.arrayOf(
+    React.PropTypes.shape({
+      label: React.PropTypes.string.isRequired,
+      value: React.PropTypes.string.isRequired
+    })
+  ).isRequired
+};

data/app/assets/javascripts/disco_app/components/ui-kit/forms/input-text.es6.jsx

@@ -0,0 +1,59 @@
+class InputText extends BaseInput {
+
+  render() {
+    const { errors, name, value, defaultValue, disabled, helpMessage, label, labelHidden, onChange, placeholder } = this.props;
+
+    const wrapperClassName = classNames({
+      'next-input-wrapper': true,
+      'next-input-wrapper--is-error': this.hasError() 
+    });
+
+    const labelClassName = classNames({
+      'next-label': true,
+      'helper--visually-hidden': labelHidden
+    });
+
+    const handleChange = (e) => {
+      onChange && onChange(e.target.value);
+    };
+
+    let helpElement = null;
+    if(helpMessage) {
+      helpElement = <p className="next-input__help-text">{helpMessage}</p>;
+    }
+
+    return (
+      <div className={wrapperClassName}>
+        <label className={labelClassName} htmlFor={name}>{label}</label>
+        <input
+          id={name}
+          className="next-input"
+          disabled={disabled}
+          value={value}
+          defaultValue={defaultValue}
+          name={name}
+          onChange={handleChange}
+          placeholder={placeholder}
+          type="text"
+        />
+        {helpElement}
+      </div>
+    );
+  }
+}
+
+InputText.propTypes = {
+  errors: React.PropTypes.object,
+  label: React.PropTypes.string.isRequired,
+  name: React.PropTypes.string,
+  onChange: React.PropTypes.func,
+  placeholder: React.PropTypes.string,
+  helpMessage: React.PropTypes.string,
+  error: React.PropTypes.bool,
+  disabled: React.PropTypes.bool
+};
+
+InputText.defaultProps = {
+  errors: {},
+  disabled: false
+};

data/app/assets/javascripts/disco_app/components/ui-kit/forms/input-textarea.es6.jsx

@@ -0,0 +1,48 @@
+class InputTextArea extends BaseInput {
+
+  render() {
+    const { errors, defaultValue, label, name, onChange, placeholder, helpMessage } = this.props;
+
+    const wrapperClassName = classNames({
+      'next-input-wrapper': true,
+      'next-input-wrapper--is-error': this.hasError() 
+    });
+
+    const handleChange = (e) => {
+      onChange(e.target.value);
+    };
+
+    let helpElement = null;
+    if(helpMessage) {
+      helpElement = <p className="next-input__help-text">{helpMessage}</p>;
+    }
+
+    return (
+      <div className={wrapperClassName}>
+        <label className="next-label" htmlFor={name}>{label}</label>
+        <textarea
+          className="next-textarea"
+          defaultValue={defaultValue}
+          name={name}
+          onChange={handleChange}
+          placeholder={placeholder}
+        />
+        {helpElement}
+      </div>
+    );
+  }
+};
+
+InputTextArea.propTypes = {
+  errors: React.PropTypes.object,
+  defaultValue: React.PropTypes.string,
+  label: React.PropTypes.string.isRequired,
+  name: React.PropTypes.string.isRequired,
+  onChange: React.PropTypes.func.isRequired,
+  placeholder: React.PropTypes.string,
+  helpMessage: React.PropTypes.string
+};
+
+InputTextArea.defaultProps = {
+  errors: {},
+};

data/app/assets/javascripts/disco_app/components/ui-kit/icons/icon-chevron.es6.jsx

@@ -0,0 +1,33 @@
+const IconChevron = ({ size, direction, disabled }) => {
+
+  const iconClasses = classNames({
+    "next-icon": true,
+    "next-icon--blue": disabled === false,
+    "next-icon--sky-darker": disabled,
+    "next-icon--rotate-180": direction === 'previous',
+    ['next-icon--' + size]: true
+  });
+
+  return (
+    <svg
+      aria-labelledby="next-chevron"
+      role="img"
+      className={iconClasses}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 28 28">
+
+      <path d="M7,3.8l10.5,10.5L7,24.7l2.7,2.7L23,14.3L9.7,1C9.7,1,7,3.8,7,3.8z" />
+    </svg>
+  );
+};
+
+IconChevron.propTypes = {
+  direction: React.PropTypes.oneOf(['next', 'previous']).isRequired,
+  disabled: React.PropTypes.bool,
+  size: React.PropTypes.number
+};
+
+IconChevron.defaultProps = {
+  disabled: false,
+  size: 10
+};