@fleetbase/storefront-engine 0.3.5 → 0.3.6

package/addon/components/order-panel/details.js

@@ -0,0 +1,189 @@
+import Component from '@glimmer/component';
+
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
+import { tracked } from '@glimmer/tracking';
+
+export default class OrderPanelDetailsComponent extends Component {
+    @service store;
+    @service storefront;
+    @service fetch;
+    @service intl;
+    @service appCache;
+    @service modalsManager;
+    @tracked isLoading = true;
+    @tracked orders = [];
+
+    constructor() {
+        super(...arguments);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Handles the cancel action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.customer);
+    }
+
+    @action async viewOrder(order) {
+        if (order.isFresh) {
+            return this.acceptOrder(order);
+        }
+
+        if (order.isPreparing) {
+            return this.markAsReady(order);
+        }
+
+        if (order.isPickupReady) {
+            return this.markAsCompleted(order);
+        }
+
+        return this.transitionToRoute('orders.index.view', order);
+    }
+
+    @action async acceptOrder(order) {
+        const activeStore = this.storefront.activeStore;
+
+        await order.loadPayload();
+        await order.loadCustomer();
+
+        this.modalsManager.show('modals/incoming-order', {
+            title: this.intl.t('storefront.component.widget.orders.accept-order'),
+            acceptButtonText: this.intl.t('storefront.component.widget.orders.accept-order'),
+            acceptButtonScheme: 'success',
+            acceptButtonIcon: 'check',
+            order,
+            activeStore,
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return this.fetch.post('orders/accept', { order: order.id }, { namespace: 'storefront/int/v1' }).then(() => {
+                    return this.fetchOrders().then((orders) => {
+                        this.orders = orders;
+                        modal.stopLoading();
+                    });
+                });
+            },
+        });
+    }
+
+    @action markAsReady(order) {
+        // for pickup orders
+        if (order.meta?.is_pickup === true) {
+            this.modalsManager.confirm({
+                title: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-pickup-title'),
+                body: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-pickup-body'),
+                acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-pickup-accept-button-text'),
+                acceptButtonIcon: 'check',
+                acceptButtonScheme: 'success',
+                confirm: (modal) => {
+                    modal.startLoading();
+
+                    return this.fetch.post('orders/ready', { order: order.id }, { namespace: 'storefront/int/v1' }).then(() => {
+                        return this.fetchOrders().then((orders) => {
+                            this.orders = orders;
+                            modal.stopLoading();
+                        });
+                    });
+                },
+            });
+        }
+
+        if (!order.adhoc) {
+            // prompt to assign driver then dispatch
+            return this.modalsManager.show('modals/order-ready-assign-driver', {
+                title: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-not-adhoc-title'),
+                acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-not-adhoc-accept-button-text'),
+                acceptButtonScheme: 'success',
+                acceptButtonIcon: 'check',
+                adhoc: false,
+                driver: null,
+                order,
+                confirm: (modal) => {
+                    modal.startLoading();
+
+                    return this.fetch
+                        .post('orders/ready', { order: order.id, driver: modal.getOption('driver.id'), adhoc: modal.getOption('adhoc') }, { namespace: 'storefront/int/v1' })
+                        .then(() => {
+                            return this.fetchOrders().then((orders) => {
+                                this.orders = orders;
+                                modal.stopLoading();
+                            });
+                        });
+                },
+            });
+        }
+
+        this.modalsManager.confirm({
+            title: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-title'),
+            body: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-body'),
+            acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-accept-button-text'),
+            acceptButtonIcon: 'check',
+            acceptButtonScheme: 'success',
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return this.fetch.post('orders/ready', { order: order.id }, { namespace: 'storefront/int/v1' }).then(() => {
+                    return this.fetchOrders().then((orders) => {
+                        this.orders = orders;
+                        modal.stopLoading();
+                    });
+                });
+            },
+        });
+    }
+
+    @action markAsCompleted(order) {
+        this.modalsManager.confirm({
+            title: this.intl.t('storefront.component.widget.orders.mark-as-completed-modal-title'),
+            body: this.intl.t('storefront.component.widget.orders.mark-as-completed-modal-body'),
+            acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-completed-accept-button-text'),
+            acceptButtonIcon: 'check',
+            acceptButtonScheme: 'success',
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return this.fetch.post('orders/completed', { order: order.id }, { namespace: 'storefront/int/v1' }).then(() => {
+                    return this.fetchOrders().then((orders) => {
+                        this.orders = orders;
+                        modal.stopLoading();
+                    });
+                });
+            },
+        });
+    }
+
+    @action async assignDriver(order) {
+        await order.loadDriver();
+
+        this.modalsManager.show('modals/assign-driver', {
+            title: this.intl.t('storefront.component.widget.orders.assign-driver-modal-title'),
+            acceptButtonText: this.intl.t('storefront.component.widget.orders.assign-driver-modal-accept-button-text'),
+            acceptButtonScheme: 'success',
+            acceptButtonIcon: 'check',
+            driver: order.driver_assigned,
+            order,
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return order.save();
+            },
+        });
+    }
+}

package/addon/components/order-panel.hbs

@@ -0,0 +1 @@
+<OrderPanel::Details @order={{this.order}} @onPressCancel={{this.onPressCancel}} @onLoad={{this.setOverlayContext}} />

package/addon/components/order-panel.js

@@ -0,0 +1,38 @@
+import Component from '@glimmer/component';
+
+import { action } from '@ember/object';
+import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
+import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
+import { tracked } from '@glimmer/tracking';
+
+export default class OrderPanelComponent extends Component {
+    @tracked context = null;
+
+    constructor() {
+        super(...arguments);
+
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Handles the cancel action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.customer);
+    }
+}

package/addon/components/storefront-order-summary.hbs

@@ -1,5 +1,12 @@
-{{#if (eq @model.type "storefront")}}
-    <ContentPanel @title={{t "storefront.component.storefront-order-summary.order-summary-title"}} @prefixTitleRight={{if @order.payload.cod_amount "Cash" ""}} @prefixTitleRightClass="text-green-400" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+{{#if (eq @order.type "storefront")}}
+    <ContentPanel
+        @title={{t "storefront.component.storefront-order-summary.order-summary-title"}}
+        @prefixTitleRight={{if @order.payload.cod_amount "Cash" ""}}
+        @prefixTitleRightClass="text-green-400"
+        @open={{true}}
+        @pad={{true}}
+        @panelBodyClass="bg-white dark:bg-gray-800"
+    >
         <div class="flex flex-col space-y-4 p-2 overflow-hidden">
             {{#each @order.payload.entities as |entity|}}
                 <div class="flex flex-1">

package/addon/components/widget/customers.hbs

@@ -18,6 +18,7 @@
             <thead>
                 <tr class="h-12 text-left py-1">
                     <th>{{t "storefront.common.id"}}</th>
+                    <th>{{t "storefront.common.name"}}</th>
                     <th>{{t "storefront.common.phone"}}</th>
                     <th>{{t "storefront.common.email"}}</th>
                     <th>{{t "storefront.common.orders"}}</th>
@@ -27,7 +28,8 @@
             <tbody>
                 {{#each this.customers as |customer|}}
                     <tr class="h-12">
-                        <td>{{customer.customerId}}</td>
+                        <td><a href="javascript:;" {{on "click" (fn this.viewCustomer customer)}}>{{customer.customerId}}</a></td>
+                        <td>{{n-a customer.name}}</td>
                         <td>{{n-a customer.phone}}</td>
                         <td>{{n-a customer.email}}</td>
                         <td></td>

package/addon/components/widget/customers.js

@@ -8,6 +8,7 @@ export default class WidgetCustomersComponent extends Component {
     @service store;
     @service storefront;
     @service intl;
+    @service contextPanel;
     @tracked isLoading = true;
     @tracked customers = [];
     @tracked title = this.intl.t('storefront.component.widget.customers.widget-title');
@@ -54,4 +55,8 @@ export default class WidgetCustomersComponent extends Component {
                 });
         });
     }
+
+    @action viewCustomer(customer) {
+        this.contextPanel.focus(customer, 'viewing');
+    }
 }

package/addon/components/widget/orders.js

@@ -1,9 +1,9 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
+import { inject as controller } from '@ember/controller';
 import { action, computed, get } from '@ember/object';
 import { later } from '@ember/runloop';
-
 export default class WidgetOrdersComponent extends Component {
     @service store;
     @service storefront;
@@ -11,8 +11,10 @@ export default class WidgetOrdersComponent extends Component {
     @service intl;
     @service appCache;
     @service modalsManager;
+    @service contextPanel;
     @tracked isLoading = true;
     @tracked orders = [];
+    @controller('orders.index.view') orderDetailsController;
 
     @computed('args.title') get title() {
         return this.args.title ?? this.intl.t('storefront.component.widget.orders.widget-title');
@@ -104,162 +106,22 @@ export default class WidgetOrdersComponent extends Component {
     }
 
     @action async viewOrder(order) {
-        const store = this.storefront.activeStore;
-
-        if (order.isFresh) {
-            return this.acceptOrder(order);
-        }
-
-        if (order.isPreparing) {
-            return this.markAsReady(order);
-        }
-
-        if (order.isPickupReady) {
-            return this.markAsCompleted(order);
-        }
-
-        this.modalsManager.show('modals/incoming-order', {
-            title: `${order.public_id}`,
-            hideAcceptButton: true,
-            declineButtonText: 'Done',
-            declineButtonScheme: 'primary',
-            declineButtonIcon: 'check',
-            assignDriver: async () => {
-                await this.modalsManager.done();
-                this.assignDriver(order);
-            },
-            order,
-            store,
-        });
+        this.contextPanel.focus(order, 'viewing');
     }
 
     @action async acceptOrder(order) {
-        const store = this.storefront.activeStore;
-
-        await order.loadPayload();
-        await order.loadCustomer();
-
-        this.modalsManager.show('modals/incoming-order', {
-            title: this.intl.t('storefront.component.widget.orders.accept-order'),
-            acceptButtonText: this.intl.t('storefront.component.widget.orders.accept-order'),
-            acceptButtonScheme: 'success',
-            acceptButtonIcon: 'check',
-            order,
-            store,
-            confirm: (modal) => {
-                modal.startLoading();
-
-                return this.fetch.post('orders/accept', { order: order.id }, { namespace: 'storefront/int/v1' }).then(() => {
-                    return this.fetchOrders().then((orders) => {
-                        this.orders = orders;
-                        modal.stopLoading();
-                    });
-                });
-            },
-        });
+        await this.orderDetailsController.acceptOrder(order);
     }
 
     @action markAsReady(order) {
-        // for pickup orders
-        if (order.meta?.is_pickup === true) {
-            this.modalsManager.confirm({
-                title: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-pickup-title'),
-                body: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-pickup-body'),
-                acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-pickup-accept-button-text'),
-                acceptButtonIcon: 'check',
-                acceptButtonScheme: 'success',
-                confirm: (modal) => {
-                    modal.startLoading();
-
-                    return this.fetch.post('orders/ready', { order: order.id }, { namespace: 'storefront/int/v1' }).then(() => {
-                        return this.fetchOrders().then((orders) => {
-                            this.orders = orders;
-                            modal.stopLoading();
-                        });
-                    });
-                },
-            });
-        }
-
-        if (!order.adhoc) {
-            // prompt to assign driver then dispatch
-            return this.modalsManager.show('modals/order-ready-assign-driver', {
-                title: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-not-adhoc-title'),
-                acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-not-adhoc-accept-button-text'),
-                acceptButtonScheme: 'success',
-                acceptButtonIcon: 'check',
-                adhoc: false,
-                driver: null,
-                order,
-                confirm: (modal) => {
-                    modal.startLoading();
-
-                    return this.fetch
-                        .post('orders/ready', { order: order.id, driver: modal.getOption('driver.id'), adhoc: modal.getOption('adhoc') }, { namespace: 'storefront/int/v1' })
-                        .then(() => {
-                            return this.fetchOrders().then((orders) => {
-                                this.orders = orders;
-                                modal.stopLoading();
-                            });
-                        });
-                },
-            });
-        }
-
-        this.modalsManager.confirm({
-            title: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-title'),
-            body: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-body'),
-            acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-accept-button-text'),
-            acceptButtonIcon: 'check',
-            acceptButtonScheme: 'success',
-            confirm: (modal) => {
-                modal.startLoading();
-
-                return this.fetch.post('orders/ready', { order: order.id }, { namespace: 'storefront/int/v1' }).then(() => {
-                    return this.fetchOrders().then((orders) => {
-                        this.orders = orders;
-                        modal.stopLoading();
-                    });
-                });
-            },
-        });
+        this.orderDetailsController.markAsReady(order);
     }
 
     @action markAsCompleted(order) {
-        this.modalsManager.confirm({
-            title: this.intl.t('storefront.component.widget.orders.mark-as-completed-modal-title'),
-            body: this.intl.t('storefront.component.widget.orders.mark-as-completed-modal-body'),
-            acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-completed-accept-button-text'),
-            acceptButtonIcon: 'check',
-            acceptButtonScheme: 'success',
-            confirm: (modal) => {
-                modal.startLoading();
-
-                return this.fetch.post('orders/completed', { order: order.id }, { namespace: 'storefront/int/v1' }).then(() => {
-                    return this.fetchOrders().then((orders) => {
-                        this.orders = orders;
-                        modal.stopLoading();
-                    });
-                });
-            },
-        });
+        this.orderDetailsController.markAsCompleted(order);
     }
 
     @action async assignDriver(order) {
-        await order.loadDriver();
-
-        this.modalsManager.show('modals/assign-driver', {
-            title: this.intl.t('storefront.component.widget.orders.assign-driver-modal-title'),
-            acceptButtonText: this.intl.t('storefront.component.widget.orders.assign-driver-modal-accept-button-text'),
-            acceptButtonScheme: 'success',
-            acceptButtonIcon: 'check',
-            driver: order.driver_assigned,
-            order,
-            confirm: (modal) => {
-                modal.startLoading();
-
-                return order.save();
-            },
-        });
+        await this.orderDetailsController.assignDriver(order);
     }
 }

package/addon/controllers/customers/index/view.js

@@ -0,0 +1,43 @@
+import { action } from '@ember/object';
+import BaseController from '@fleetbase/storefront-engine/controllers/base-controller';
+import { tracked } from '@glimmer/tracking';
+
+export default class CustomersIndexViewController extends BaseController {
+    /**
+     * The currently active view tab ('details' by default).
+     *
+     * @type {String}
+     * @tracked
+     */
+    @tracked view = 'details';
+
+    /**
+     * An array of query parameters to be serialized in the URL.
+     *
+     * @type {String[]}
+     * @tracked
+     */
+    @tracked queryParams = ['view'];
+
+    /**
+     * Transitions back to the "customers.index" route.
+     *
+     * @method
+     * @action
+     * @returns {Transition} The transition object representing the route change.
+     */
+    @action transitionBack() {
+        return this.transitionToRoute('customers.index');
+    }
+
+    /**
+     * Updates the active view tab.
+     *
+     * @method
+     * @param {String} tab - The name of the tab to activate.
+     * @action
+     */
+    @action onTabChanged(tab) {
+        this.view = tab;
+    }
+}

package/addon/controllers/customers/index.js

@@ -1,11 +1,11 @@
-import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
 import { isBlank } from '@ember/utils';
+import BaseController from '@fleetbase/storefront-engine/controllers/base-controller';
+import { tracked } from '@glimmer/tracking';
 import { timeout } from 'ember-concurrency';
 import { task } from 'ember-concurrency-decorators';
-
-export default class CustomersIndexController extends Controller {
+import { action } from '@ember/object';
+export default class CustomersIndexController extends BaseController {
     /**
      * Inject the `notifications` service
      *
@@ -122,7 +122,7 @@ export default class CustomersIndexController extends Controller {
             valuePath: 'name',
             width: '15%',
             cellComponent: 'table/cell/media-name',
-            // action: this.viewVendor,
+            action: this.viewCustomer,
             resizable: true,
             sortable: true,
             filterable: true,
@@ -226,7 +226,7 @@ export default class CustomersIndexController extends Controller {
             actions: [
                 {
                     label: this.intl.t('storefront.customers.index.view-customer-details'),
-                    // fn: this.viewVendor,
+                    fn: this.viewCustomer,
                 },
                 {
                     label: this.intl.t('storefront.customers.index.edit-customer'),
@@ -248,6 +248,10 @@ export default class CustomersIndexController extends Controller {
         },
     ];
 
+    @action viewCustomer(customer) {
+        return this.transitionToRoute('customers.index.view', customer);
+    }
+
     /**
      * The search task.
      *

package/addon/controllers/networks/index/network/customers.js

@@ -1,3 +1,69 @@
-import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import CustomersIndexController from '../../../customers';
 
-export default class NetworksIndexNetworkCustomersController extends Controller {}
+/**
+ * This controller handles the logic for managing network customers.
+ */
+export default class NetworksIndexNetworkCustomersController extends CustomersIndexController {
+    @service contextPanel;
+
+    @tracked columns = [
+        {
+            label: this.intl.t('storefront.common.name'),
+            valuePath: 'name',
+            width: '25%',
+            cellComponent: 'table/cell/media-name',
+            action: this.viewCustomer,
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/string',
+        },
+        {
+            label: this.intl.t('storefront.common.id'),
+            valuePath: 'public_id',
+            cellComponent: 'click-to-copy',
+            width: '15%',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/string',
+        },
+        {
+            label: this.intl.t('storefront.common.email'),
+            valuePath: 'email',
+            cellComponent: 'table/cell/base',
+            width: '20%',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/string',
+        },
+        {
+            label: this.intl.t('storefront.common.phone'),
+            valuePath: 'phone',
+            cellComponent: 'table/cell/base',
+            width: '16%',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/string',
+        },
+        {
+            label: this.intl.t('storefront.customers.index.create-at'),
+            valuePath: 'createdAt',
+            sortParam: 'created_at',
+            width: '20%',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/date',
+        },
+    ];
+
+    @action viewCustomer(customer) {
+        this.contextPanel.focus(customer, 'viewing');
+    }
+}