@fleetbase/storefront-engine 0.0.1

package/addon/serializers/product.js

@@ -0,0 +1,20 @@
+import ApplicationSerializer from '@fleetbase/ember-core/serializers/application';
+import { EmbeddedRecordsMixin } from '@ember-data/serializer/rest';
+
+export default class ProductSerializer extends ApplicationSerializer.extend(EmbeddedRecordsMixin) {
+    /**
+     * Embedded relationship attributes
+     *
+     * @var {Object}
+     */
+    get attrs() {
+        return {
+            variants: { embedded: 'always' },
+            addon_categories: { embedded: 'always' },
+            primary_image: { embedded: 'always' },
+            files: { embedded: 'always' },
+            hours: { embedded: 'always' },
+            category: { embedded: 'always' },
+        };
+    }
+}

package/addon/serializers/store-location.js

@@ -0,0 +1,17 @@
+import ApplicationSerializer from '@fleetbase/ember-core/serializers/application';
+import { EmbeddedRecordsMixin } from '@ember-data/serializer/rest';
+
+export default class StoreLocationSerializer extends ApplicationSerializer.extend(EmbeddedRecordsMixin) {
+    /**
+     * Embedded relationship attributes
+     *
+     * @var {Object}
+     */
+    get attrs() {
+        return {
+            place: { embedded: 'always' },
+            store: { embedded: 'always' },
+            hours: { embedded: 'always' },
+        };
+    }
+}

package/addon/serializers/store.js

@@ -0,0 +1,19 @@
+import ApplicationSerializer from '@fleetbase/ember-core/serializers/application';
+import { EmbeddedRecordsMixin } from '@ember-data/serializer/rest';
+
+export default class StoreSerializer extends ApplicationSerializer.extend(EmbeddedRecordsMixin) {
+    /**
+     * Embedded relationship attributes
+     *
+     * @var {Object}
+     */
+    get attrs() {
+        return {
+            gateways: { embedded: 'always' },
+            notification_channels: { embedded: 'always' },
+            logo: { embedded: 'always' },
+            backdrop: { embedded: 'always' },
+            files: { embedded: 'always' },
+        };
+    }
+}

package/addon/services/storefront.js

@@ -0,0 +1,208 @@
+import Service from '@ember/service';
+import Evented from '@ember/object/evented';
+import { inject as service } from '@ember/service';
+import socketClusterClient from 'socketcluster';
+
+export default class StorefrontService extends Service.extend(Evented) {
+    @service store;
+    @service fetch;
+    @service notifications;
+    @service currentUser;
+    @service modalsManager;
+    @service hostRouter;
+
+    get activeStore() {
+        return this.findActiveStore();
+    }
+
+    setActiveStorefront(store) {
+        this.currentUser.setOption('activeStorefront', store.id);
+        this.trigger('storefront.changed', store);
+    }
+
+    findActiveStore() {
+        const activeStoreId = this.currentUser.getOption('activeStorefront');
+
+        if (!activeStoreId) {
+            const stores = this.store.peekAll('store');
+
+            if (stores.firstObject) {
+                this.currentUser.setOption('activeStorefront', stores.firstObject.id);
+            }
+
+            return stores.firstObject;
+        }
+
+        const activeStore = this.store.peekRecord('store', activeStoreId);
+
+        if (!activeStore) {
+            this.currentUser.setOption('activeStorefront', undefined);
+
+            return this.findActiveStore();
+        }
+
+        return activeStore;
+    }
+
+    async alertIncomingOrder(orderId, store) {
+        const order = await this.store.queryRecord('order', {
+            public_id: orderId,
+            single: true,
+            with: ['customer', 'payload', 'trackingNumber'],
+        });
+
+        this.playAlert();
+        this.trigger('order.incoming', order, store);
+
+        this.modalsManager.show('modals/incoming-order', {
+            title: 'You have a new incoming order!',
+            acceptButtonText: 'Accept Order',
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            declineButtonText: 'Decline Order',
+            declineButtonScheme: 'danger',
+            closeButton: false,
+            backdropClose: false,
+            order,
+            store,
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return this.fetch
+                    .post('orders/accept', { order: order.id }, { namespace: 'storefront/int/v1' })
+                    .then(() => {
+                        this.trigger('order.accepted', order);
+                        modal.stopLoading();
+                    })
+                    .catch((error) => {
+                        this.notifications.serverError(error);
+                    });
+            },
+        });
+    }
+
+    async listenForIncomingOrders() {
+        const store = this.findActiveStore();
+
+        if (!store) {
+            return;
+        }
+
+        const socket = socketClusterClient.create({
+            hostname: 'socket.fleetbase.io',
+            secure: true,
+            port: 8000,
+        });
+
+        // listen on company channel
+        const channel = socket.subscribe(`storefront.${store.public_id}`);
+
+        // listen to channel for events
+        await channel.listener('subscribe').once();
+
+        // get incoming data and console out
+        for await (let broadcast of channel) {
+            if (broadcast.event === 'order.created') {
+                console.log('[new order]', broadcast);
+                this.trigger('order.broadcasted', broadcast);
+                this.alertIncomingOrder(broadcast.data.id, store);
+            }
+        }
+
+        // disconnect when transitioning
+        this.hostRouter.on('routeWillChange', channel.close);
+    }
+
+    createFirstStore(options = {}) {
+        const store = this.store.createRecord('store');
+        const currency = this.currentUser.getWhoisProperty('currency.code');
+
+        if (currency) {
+            store.setProperties({ currency });
+        }
+
+        this.modalsManager.show('modals/create-first-store', {
+            title: 'Create your first Storefront',
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            closeButton: false,
+            backdropClose: false,
+            keyboard: true,
+            hideDeclineButton: false,
+            declineButtonDisabled: false,
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            store,
+            confirm: (modal, done) => {
+                modal.startLoading();
+
+                store
+                    .save()
+                    .then((store) => {
+                        this.notifications.success('Your new storefront has been created!');
+                        this.setActiveStorefront(store);
+                        return done();
+                    })
+                    .catch((error) => {
+                        modal.stopLoading();
+                        this.notifications.serverError(error);
+                    });
+            },
+            decline: () => {
+                this.hostRouter.transitionTo('console');
+            },
+            ...options,
+        });
+    }
+
+    createNewStorefront(options = {}) {
+        const store = this.store.createRecord('store');
+        const currency = this.currentUser.getWhoisProperty('currency.code');
+
+        if (currency) {
+            store.setProperties({ currency });
+        }
+
+        this.modalsManager.show('modals/create-store', {
+            title: 'Create a new Storefront',
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            store,
+            confirm: (modal, done) => {
+                modal.startLoading();
+
+                store
+                    .save()
+                    .then((store) => {
+                        this.notifications.success('Your new storefront has been created!');
+                        // this.currentUser.setOption('activeStorefront', store.id);
+                        this.setActiveStorefront(store);
+
+                        if (typeof options?.onSuccess === 'function') {
+                            options.onSuccess(store);
+                        }
+
+                        return done();
+                    })
+                    .catch((error) => {
+                        modal.stopLoading();
+                        this.notifications.serverError(error);
+                    });
+            },
+            ...options,
+        });
+    }
+
+    playAlert() {
+        // eslint-disable-next-line no-undef
+        const alert = new Audio('/sounds/storefront_order_alert.mp3');
+
+        try {
+            alert.play();
+        } catch (error) {
+            // do nothing with error
+        }
+    }
+}

package/addon/templates/application.hbs

@@ -0,0 +1,16 @@
+<EmberWormhole @to="sidebar-menu-items">
+    <StoreSelector @stores={{@model}} @activeStore={{this.activeStore}} @wrapperClass="mb-2" @onCreateStore={{this.createNewStorefront}} @onSwitchStore={{this.switchActiveStore}} />
+    <Layout::Sidebar::Panel @open={{true}} @title="Storefront">
+        <Layout::Sidebar::Item @route="console.storefront.home" @icon="home">Dashboard</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.storefront.products" @icon="box" disabled={{not this.activeStore.id}}>Products</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.storefront.customers" @icon="users" disabled={{not this.activeStore.id}}>Customers</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.storefront.orders" @icon="file-invoice-dollar" disabled={{not this.activeStore.id}}>Orders</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.storefront.networks" @icon="network-wired" disabled={{not this.activeStore.id}}>Networks</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item @route="console.storefront.settings" @icon="cogs" disabled={{not this.activeStore.id}}>Settings</Layout::Sidebar::Item>
+    </Layout::Sidebar::Panel>
+    <Layout::Sidebar::Item @url="https://github.com/fleetbase/storefront-app" @target="_github" @icon="rocket">Launch App</Layout::Sidebar::Item>
+</EmberWormhole>
+
+<Layout::Section::Container>
+    {{outlet}}
+</Layout::Section::Container>

package/addon/templates/customers/index/edit.hbs

@@ -0,0 +1,2 @@
+
+{{outlet}}

package/addon/templates/customers/index.hbs

@@ -0,0 +1,22 @@
+<Layout::Section::Header @title="Customers" @searchQuery={{this.query}} @onSearch={{perform this.search}}>
+    <FiltersPicker @columns={{this.columns}} @onApply={{fn this.filters.apply this}} @onClear={{fn this.filters.reset this}} @onFilterClear={{this.filters.clear}} @onChange={{this.filters.set}} @buttonWrapperClass="mr-2" />
+    <VisibleColumnPicker @columns={{this.columns}} @onChange={{fn (mut this.columns)}} class="mr-2" />
+    {{#if (safe-has this.table "selectedRows")}}
+        <DropdownButton @icon="layer-group" @text="Bulk Action" @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" as |dd|>
+            <div class="next-dd-menu mt-2 mx-0">
+                <div class="px-1">
+                    <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeleteCustomers)}}>
+                        Delete Drivers
+                    </a>
+                </div>
+            </div>
+        </DropdownButton>
+    {{/if}}
+    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text="Export" />
+</Layout::Section::Header>
+
+<Layout::Section::Body>
+    <Table @rows={{@model}} @columns={{this.columns}} @selectable={{true}} @canSelectAll={{true}} @onSetup={{fn (mut this.table)}} @pagination={{true}} @paginationMeta={{@model.meta}} @page={{this.page}} @onPageChange={{fn (mut this.page)}} @tfootVerticalOffset="53" @tfootVerticalOffsetElements=".next-view-section-subheader" />
+</Layout::Section::Body>
+
+{{outlet}}

package/addon/templates/home.hbs

@@ -0,0 +1,7 @@
+<Layout::Section::Header @title="Drivers" @hideActions={{true}} />
+
+<Layout::Section::Body class="space-y-4" @padded={{true}}>
+    <Widget::StorefrontMetrics />
+    <Widget::Orders />
+    <Widget::Customers />
+</Layout::Section::Body>

package/addon/templates/networks/index/network/customers.hbs

@@ -0,0 +1,2 @@
+
+{{outlet}}

package/addon/templates/networks/index/network/index.hbs

@@ -0,0 +1,254 @@
+<div class="space-y-4">
+    <ContentPanel @title="General Network Settings" @open={{true}} @pad={{true}}>
+        <div class="space-y-4">
+            <div>
+                <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
+                    General Network Settings
+                </h1>
+                <p class="mt-1 text-sm text-gray-500">
+                    Provide the general settings for your network or marketplace.
+                </p>
+            </div>
+
+            <InputGroup @name="Name" @value={{@model.name}} @placeholder="Storefront Name" @helpText="The name of your network or marketplace." />
+            <InputGroup @name="Description" @value={{@model.description}} @placeholder="Storefront Description" @helpText="Give your store a brief description to let users know what your network is about." />
+            <InputGroup @name="Currency">
+                <CurrencySelect @value={{@model.currency}} @onSelect={{fn (mut @model.currency)}} @triggerClass="w-full form-select" />
+            </InputGroup>
+
+            <ContentPanel @title="Contact & Social" @open={{false}} @pad={{true}}>
+                <InputGroup @name="Phone">
+                    <PhoneInput @value={{@model.phone}} @onInput={{fn (mut @model.phone)}} class="form-input w-full" />
+                </InputGroup>
+                <InputGroup @name="Email" @value={{@model.email}} @placeholder="Email" @helpText="Your business email." />
+                <InputGroup @name="Website" @value={{@model.website}} @placeholder="Website" @helpText="Your business website URL." />
+                <InputGroup @name="Facebook" @value={{@model.facebook}} @placeholder="Facebook ID" @helpText="Your business Facebook page ID." />
+                <InputGroup @name="Instagram" @value={{@model.instagram}} @placeholder="Instagram Username" @helpText="Your business Instagram username." />
+                <InputGroup @name="Twitter" @value={{@model.twitter}} @placeholder="Twitter Username" @helpText="Your business Twitter username." />
+            </ContentPanel>
+
+            <ContentPanel @title="Logo & Backdrop" @open={{false}} @pad={{true}}>
+                <InputGroup @name="Logo" @helpText="Logo for your store.">
+                    <div class="flex flex-row items-center">
+                        <img src={{@model.logo_url}} alt={{concat @model.name " logo"}} class="h-20 w-64 border dark:border-gray-900 rounded-md mr-4" />
+                        <FileUpload @name="logo" @accept="image/*" @onFileAdded={{fn this.uploadFile "storefront_logo"}} as |queue|>
+                            <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default">
+                                {{#if queue.files.length}}
+                                    <Spinner class="mr-1" />
+                                    <span>
+                                        Uploading...
+                                    </span>
+                                {{else}}
+                                    <FaIcon @icon="image" class="mr-1" />
+                                    <span>
+                                        Upload new logo
+                                    </span>
+                                {{/if}}
+                            </a>
+                        </FileUpload>
+                    </div>
+                </InputGroup>
+
+                <InputGroup @name="Backdrop" @helpText="Optional banner or background image for your store.">
+                    <div class="flex flex-row items-center">
+                        <img src={{@model.backdrop_url}} alt={{concat @model.name " backdrop"}} class="h-20 w-64 border dark:border-gray-900 rounded-md mr-4" />
+                        <FileUpload @name="backdrop" @accept="image/*" @onFileAdded={{fn this.uploadFile "storefront_backdrop"}} as |queue|>
+                            <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default">
+                                {{#if queue.files.length}}
+                                    <Spinner class="mr-1" />
+                                    <span>
+                                        Uploading...
+                                    </span>
+                                {{else}}
+                                    <FaIcon @icon="image" class="mr-1" />
+                                    <span>
+                                        Upload new backdrop
+                                    </span>
+                                {{/if}}
+                            </a>
+                        </FileUpload>
+                    </div>
+                </InputGroup>
+            </ContentPanel>
+
+            <ContentPanel @title="Alerts" @open={{false}} @pad={{true}} @panelBodyClass="bg-gray-800">
+                <div>
+                    <p class="dark:text-gray-100 mb-4">Configure who should be alerted for certain events.</p>
+                    <InputGroup @name="New order alert" @wrapperClass="mb-0">
+                        <ModelSelectMultiple @modelName="user" @selectedModel={{@model.alertable.for_new_order}} @placeholder="Select users to alert for new order" @triggerClass="form-select form-input multiple" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn this.makeAlertable "for_new_order"}} as |model|>
+                            {{model.name}}
+                        </ModelSelectMultiple>
+                    </InputGroup>
+                </div>
+            </ContentPanel>
+
+            <div class="store-boolean-settings">
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.online}} @onToggle={{fn (mut @model.online)}}>
+                        <FaIcon @icon="plug" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Online</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.tax_enabled}} @onToggle={{fn (mut @model.options.tax_enabled)}}>
+                        <FaIcon @icon="percent" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable tax</span>
+                    </Toggle>
+                    {{#if @model.options.tax_enabled}}
+                        <InputGroup @wrapperClass="mb-0 mt-2" @type="number" @name="Tax Percentage" @value={{@model.options.tax_percentage}} @placeholder="Tax Percentage" @helpText="The sales tax percentage to apply to orders." />
+                    {{/if}}
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.auto_accept_orders}} @onToggle={{fn (mut @model.options.auto_accept_orders)}}>
+                        <FaIcon @icon="robot" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Auto accept incoming orders</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.auto_dispatch}} @onToggle={{fn (mut @model.options.auto_dispatch)}}>
+                        <FaIcon @icon="paper-plane" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Auto dispatch orders</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.require_pod}} @onToggle={{fn (mut @model.options.require_pod)}}>
+                        <FaIcon @icon="signature" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Require proof of delivery</span>
+                    </Toggle>
+                    {{#if @model.options.require_pod}}
+                        <InputGroup @wrapperClass="mb-0 mt-2" @name="Proof of Delivery Method">
+                            <Select @options={{this.podMethods}} @optionValue="value" @optionLabel="name" @value={{@model.pod_method}} @onSelect={{fn (mut @model.pod_method)}} class="w-full" />
+                        </InputGroup>
+                    {{/if}}
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.cod_enabled}} @onToggle={{fn (mut @model.options.cod_enabled)}}>
+                        <FaIcon @icon="money-bill-wave" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable cash on delivery</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.pickup_enabled}} @onToggle={{fn (mut @model.options.pickup_enabled)}}>
+                        <FaIcon @icon="person-booth" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable order pickup</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.tips_enabled}} @onToggle={{fn (mut @model.options.tips_enabled)}}>
+                        <FaIcon @icon="cash-register" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable tips</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.delivery_tips_enabled}} @onToggle={{fn (mut @model.options.delivery_tips_enabled)}}>
+                        <FaIcon @icon="face-smile" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable delivery tips</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.multi_cart_enabled}} @onToggle={{fn (mut @model.options.multi_cart_enabled)}}>
+                        <FaIcon @icon="gifts" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable multi-cart checkout</span>
+                    </Toggle>
+                </div>
+                <div class="input-group">
+                    <Toggle @isToggled={{@model.options.reviews_enabled}} @onToggle={{fn (mut @model.options.reviews_enabled)}}>
+                        <FaIcon @icon="star" @prefix="fas" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Enable user reviews</span>
+                    </Toggle>
+                </div>
+            </div>
+
+            <div class="flex justify-end">
+                <Button @type="primary" @text="Save Changes" @icon="save" @size="lg" @isLoading={{this.isLoading}} @onClick={{this.saveSettings}} />
+            </div>
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title="API" @open={{false}} @pad={{true}}>
+        <div class="space-y-6">
+            <div>
+                <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
+                    API Settings
+                </h1>
+                <p class="mt-1 text-sm text-gray-500">
+                    Access key for Storefront API & Integrations.
+                </p>
+            </div>
+
+            <InputGroup @name="Network Key" @helpText="This is your network key, use this to enable apps and integrations for your network.">
+                <ClickToReveal @value={{@model.key}} @clickToCopy={{true}} class="form-input disabled" />
+            </InputGroup>
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title="Payment Gateways" @open={{false}} @pad={{true}}>
+        <div class="space-y-6">
+            <div class="flex justify-between">
+                <div>
+                    <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
+                        Gateway Settings
+                    </h1>
+                    <p class="mt-1 text-sm text-gray-500">
+                        Add or manage your payment gateway settings here.
+                    </p>
+                </div>
+                <div>
+                    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text="Create new gateway" @onClick={{this.createGateway}} />
+                </div>
+            </div>
+
+            {{#each this.gateways as |gateway|}}
+                <ContentPanel @title={{gateway.name}} @open={{true}} @pad={{true}}>
+                    <InputGroup @name="Gateway name" @value={{gateway.name}} @helpText="Give your payment gateway a name, this will only be relevent internally" />
+                    <InputGroup @name="Gateway code" @value={{gateway.code}} @disabled={{true}} @helpText="Identifier code used to identify gateway to the SDK" />
+                    <InputGroup @name="Callback URL" @value={{gateway.callback_url}} @helpText="Callback URL if applicable" />
+                    <InputGroup @name="Return URL" @value={{gateway.return_url}} @helpText="Return URL if applicable" />
+                    <div class="input-group">
+                        <Checkbox @value={{gateway.sandbox}} @label="This is a sandbox gateway" @onToggle={{fn (mut gateway.sandbox)}} />
+                    </div>
+                    <div>
+                        <h4 class="mb-2 font-semibold text-sm dark:text-white">Config</h4>
+                        {{#each-in gateway.config as |key value|}}
+                            {{#if (is-bool-value value)}}
+                                <div class="input-group">
+                                    <Checkbox @value={{value}} @label={{humanize key}} />
+                                </div>
+                            {{else}}
+                                <InputGroup @name={{humanize key}}>
+                                    <Input class="form-input w-full" placeholder={{humanize key}} @value={{value}} />
+                                </InputGroup>
+                            {{/if}}
+                        {{/each-in}}
+                    </div>
+                    <div>
+                        <Button @size="sm" @type="danger" @icon="trash" @text="Delete payment gateway" @onClick={{fn this.deleteGateway gateway}} />
+                    </div>
+                </ContentPanel>
+            {{/each}}
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title="Notification Channels" @open={{false}} @pad={{true}}>
+        <div class="space-y-6">
+            <div class="flex justify-between">
+                <div class="w-3/4">
+                    <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
+                        Notification Settings
+                    </h1>
+                    <p class="mt-1 text-sm text-gray-500">
+                        Configure notification channels for your storefront, each notification channel additionally can
+                        have
+                        it's own rules and options.
+                    </p>
+                </div>
+                <div>
+                    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text="New channel" @onClick={{this.createChannel}} />
+                </div>
+            </div>
+
+            <div class="space-y-3">
+                {{#each this.channels as |notificationChannel|}}
+                    <div class="flex px-4 py-2 items-center justify-between shadow-sm rounded-md dark:bg-gray-900 bg-gray-200">
+                        <div>
+                            <span class="dark:text-gray-50">{{notificationChannel.name}}</span>
+                        </div>
+                        <div class="flex items-center">
+                            <Button @size="xs" @type="default" @text="Edit" @wrapperClass="mr-2" @onClick={{fn this.editChannel notificationChannel}} />
+                            <Button @size="xs" @type="danger" @text="Delete" @onClick={{fn this.deleteChannel notificationChannel}} />
+                        </div>
+                    </div>
+                {{/each}}
+            </div>
+        </div>
+    </ContentPanel>
+</div>

package/addon/templates/networks/index/network/orders.hbs

@@ -0,0 +1,2 @@
+
+{{outlet}}