disco_app 0.8.8

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 6d121a39b30f43fccab67728b99a8bc4e4aed5ef0fea0aaaba6c72f35b2c30b3
+  data.tar.gz: 8a6dd1711f023374e251243c661c4eec548aa1613ab39175c4e5b07975400579
+SHA512:
+  metadata.gz: 8d9ad557bccac5b7d620b2e6ffab730588394c8ab8570836c376dbb72080da66e79ddec488efcb9f638c44a5a57d793b13022fd96fe50c29d0fe5700d4fa9e04
+  data.tar.gz: bfe171a5488905b6704eb84e39f5f1a4c1a6603d337b18df96d8e8923c4706b889595cf6532ea83c1f28fe77f6f91c0bd476b9e00018f7fb95b5aba43ab4007b

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

@@ -0,0 +1,65 @@
+var FilterableShopList = React.createClass({
+
+    getDefaultProps: function() {
+        return {
+            filterTabs: [
+                { label: 'All Shops', filter: {} },
+                { label: 'Never Installed', filter: { 'filter[status]': 'never_installed' } },
+                { label: 'Awaiting Install', filter: { 'filter[status]': 'awaiting_install' } },
+                { label: 'Installing', filter: { 'filter[status]': 'installing' } },
+                { label: 'Installed', filter: { 'filter[status]': 'installed' } },
+                { label: 'Awaiting Uninstall', filter: { 'filter[status]': 'awaiting_uninstall' } },
+                { label: 'Uninstalling', filter: { 'filter[status]': 'uninstalling' } },
+                { 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} filter={this.state.filter} />
+            </div>
+        );
+    }
+
+});

data/app/assets/javascripts/disco_app/components/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/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/shop_list.js.jsx

@@ -0,0 +1,140 @@
+var ShopList = React.createClass({
+
+    getDefaultProps: function() {
+        return {
+            pageSize: 50
+        }
+    },
+
+    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.getShops();
+        }
+        if(prevState.page != this.state.page) {
+            this.getShops();
+        }
+    },
+
+    onPageChanged: function(increment) {
+        this.setState({page: this.state.page + increment});
+    },
+
+    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) {
+            return (
+                <ShopRow shop={shop} editShopUrl={this.props.editShopUrl} key={shop.id} />
+            )
+        }.bind(this));
+
+        return (
+            <div>
+                <div className="next-card__section">
+                    <table className="table-hover expanded">
+                        <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>Shopify Domain</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>
+                            </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} 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/shop_row.js.jsx

@@ -0,0 +1,27 @@
+var ShopRow = (props) => {
+
+    var shop = props.shop,
+        editShopUrl = props.editShopUrl.replace(':id', shop.id),
+        shopifyDomain = shop.attributes['shopify_domain'],
+        countryName = shop.attributes['country_name'],
+        currency = shop.attributes['currency'],
+        domainName = shop.attributes['domain'],
+        planName = shop.attributes['plan_display_name'],
+        createdDate = shop.attributes['created_at'],
+        installedDuration = shop.attributes['installed_duration']
+
+    return (
+        <tr>
+            <td><a href={editShopUrl}>#{shop.id}</a></td>
+            <td>{shopifyDomain}</td>
+            <td>{shop.attributes.status}</td>
+            <td>{shop.attributes.email}</td>
+            <td>{countryName}</td>
+            <td>{shop.attributes.currency}</td>
+            <td>{shop.attributes.domain}</td>
+            <td>{planName}</td>
+            <td>{createdDate}</td>
+            <td>{installedDuration}</td>
+        </tr>
+    )
+};

data/app/assets/javascripts/disco_app/components/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.js

@@ -0,0 +1,5 @@
+/**
+ * disco_app/components.js
+ * React components common to Disco applications.
+ */
+//= require_tree ./components

data/app/assets/javascripts/disco_app/disco_app.js

@@ -0,0 +1,7 @@
+/**
+ * disco_app/disco_app.js
+ * Base Javascript for Disco applications.
+ * Assumes that jQuery will be loaded in the parent application.js.
+ */
+//= require bootstrap-sprockets
+//= require disco_app/shopify-turbolinks

data/app/assets/javascripts/disco_app/frame.js

@@ -0,0 +1,152 @@
+/**
+ * frame.js
+ *
+ * The FrameApp object is a lightweight Javascript object intended to mock the `postMessage` endpoint for Embedded Apps
+ * in the Shopify Admin panel. Eventually, we hope to mock all of the functionality provided by the Shopify Embedded App
+ * SDK.
+ */
+(function() {
+
+    window.FrameApp = (function() {
+
+        FrameApp.name = 'Shopify Dev Frame';
+
+        function FrameApp() {}
+
+
+        /* Initialisation, configuration and helpers.
+        ================================================== */
+
+        /**
+         * Initialise the FrameApp - load configuration, set up event handlers.
+         *
+         * @param config
+         * @returns {*}
+         */
+        FrameApp.init = function(config) {
+            var _this = this;
+            if (config == null) {
+                config = {};
+            }
+            this.loadConfig(config);
+
+            // Use addEventListener if available, otherwise fall back to attachEvent.
+            if (window.addEventListener) {
+                this.iframe.addEventListener("load", FrameApp.__iframeLoadCallback, false);
+                return window.addEventListener("message", FrameApp.__addEventMessageCallback, false);
+            }
+
+            this.iframe.attachEvent("load", FrameApp.__iframeLoadCallback);
+            return window.attachEvent("onMessage", FrameApp.__addEventMessageCallback);
+        };
+
+        /**
+         * Load configuration for the FrameApp. Set defaults if not provided.
+         * @param config
+         */
+        FrameApp.loadConfig = function(config) {
+            this.shopOrigin = config.shopOrigin;
+            this.debug = !!config.debug;
+            this.iframe = config.iframe;
+            if (!this.iframe) {
+                this.log("FrameApp error: no <iframe> specified.");
+            }
+            FrameApp.log('FrameApp configuration loaded.');
+        };
+
+        /**
+         * Log a message to the console, if the app was configured in debug mode.
+         *
+         * @param message
+         * @param force
+         * @returns {*}
+         */
+        FrameApp.log = function(message, force) {
+            if ((typeof console !== "undefined" && console !== null ? console.log : void 0) && (this.debug || force)) {
+                return console.log(message);
+            }
+        };
+
+
+        /* Message sending and event handling.
+        ================================================== */
+
+        FrameApp.__messageHandlers = {};
+
+        /**
+         * Post a message to the <iframe>.
+         *
+         * @param message
+         * @param data
+         * @returns {*}
+         */
+        FrameApp.postMessage = function(message, data) {
+            var json;
+            json = JSON.stringify({
+                message: message,
+                data: data
+            });
+            FrameApp.log("FrameApp client sent " + json + " to ShopifyApp.");
+            return this.iframe.contentWindow.postMessage(json, '*');
+        };
+
+        /**
+         * Add a handler for a received message.
+         *
+         * @param message
+         * @param fn
+         * @returns {Number|*}
+         * @private
+         */
+        FrameApp.__addMessageHandler = function(message, fn) {
+            if (typeof message === "function") {
+                fn = message;
+                message = void 0;
+            }
+            if (!FrameApp.__messageHandlers[message]) {
+                FrameApp.__messageHandlers[message] = [];
+            }
+            return FrameApp.__messageHandlers[message].push(fn);
+        };
+
+        /**
+         * Callback triggered when a postMessage message is received.
+         *
+         * @param e
+         * @returns {*}
+         * @private
+         */
+        FrameApp.__addEventMessageCallback = function(e) {
+            var handler, handlers, message, submitForm, _i, _len;
+            FrameApp.log("FrameApp client received " + e.data + " from " + e.origin);
+            message = JSON.parse(e.data);
+            handlers = [];
+            if (FrameApp.__messageHandlers[message.message]) {
+                handlers = handlers.concat(FrameApp.__messageHandlers[message.message]);
+            }
+            if (FrameApp.__messageHandlers[void 0]) {
+                handlers = handlers.concat(FrameApp.__messageHandlers[void 0]);
+            }
+            for (_i = 0, _len = handlers.length; _i < _len; _i++) {
+                handler = handlers[_i];
+                handler(message.message, message.data);
+            }
+        };
+
+        /**
+         * Callback triggered when our iFrame is loaded.
+         *
+         * @param e
+         * @private
+         */
+        FrameApp.__iframeLoadCallback = function(e) {
+            FrameApp.postMessage('Shopify.API.initialize', {
+                'hi': 'there!'
+            });
+        };
+
+        return FrameApp;
+
+    }).call(this);
+
+}).call(this);

data/app/assets/javascripts/disco_app/shopify-turbolinks.js

@@ -0,0 +1,7 @@
+/**
+ * disco_app/shopify-turbolinks.js
+ * Some tweaks to help Turbolinks play nicely with the Embedded App SDK.
+ */
+jQuery(document).on('page:load', function(e) {
+  ShopifyApp.pushState(window.location.pathname);
+});

data/app/assets/stylesheets/disco_app/bootstrap/_custom.scss

@@ -0,0 +1,54 @@
+//
+// Select the Bootstrap components to pull in.
+// --------------------------------------------------
+
+// Core variables and mixins
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+// Reset and dependencies
+@import "bootstrap/normalize";
+//@import "bootstrap/print";
+//@import "bootstrap/glyphicons";
+
+// Core CSS
+@import "bootstrap/scaffolding";
+@import "bootstrap/type";
+//@import "bootstrap/code";
+@import "bootstrap/grid";
+//@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+
+// Components
+@import "bootstrap/component-animations";
+@import "bootstrap/dropdowns";
+@import "bootstrap/button-groups";
+@import "bootstrap/input-groups";
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+//@import "bootstrap/breadcrumbs";
+//@import "bootstrap/pagination";
+//@import "bootstrap/pager";
+@import "bootstrap/labels";
+@import "bootstrap/badges";
+//@import "bootstrap/jumbotron";
+@import "bootstrap/thumbnails";
+@import "bootstrap/alerts";
+@import "bootstrap/progress-bars";
+@import "bootstrap/media";
+@import "bootstrap/list-group";
+@import "bootstrap/panels";
+//@import "bootstrap/responsive-embed";
+//@import "bootstrap/wells";
+@import "bootstrap/close";
+
+// Components w/ JavaScript
+//@import "bootstrap/modals";
+//@import "bootstrap/tooltip";
+//@import "bootstrap/popovers";
+//@import "bootstrap/carousel";
+
+// Utility classes
+@import "bootstrap/utilities";
+@import "bootstrap/responsive-utilities";