@fleetbase/storefront-engine 0.3.18 → 0.3.20

package/addon/components/widget/storefront-metrics.hbs

@@ -1,18 +1,15 @@
-<div class="storefront-metrics-widget" {{did-insert this.setupWidget}} ...attributes>
+<div class="storefront-metrics-widget" ...attributes>
     <div class="flex items-center justify-between">
         <div class="flex items-center">
             <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100 mr-2">
                 {{t "storefront.component.widget.storefront-metrics.last-day"}}
             </h3>
-            {{#if this.isLoading}}
+            {{#if this.loadMetrics.isRunning}}
                 <div>
                     <Spinner class="text-sky-400" />
                 </div>
             {{/if}}
         </div>
-        <div>
-
-        </div>
     </div>
     <dl class="mt-4 grid grid-cols-2 gap-5 sm:grid-cols-4">
         <div class="px-4 py-5 border border-gray-200 dark:border-gray-900 bg-gray-50 dark:bg-gray-700 shadow-sm dark:shadow rounded-lg overflow-hidden sm:p-6">
@@ -35,7 +32,7 @@
 
         <div class="px-4 py-5 border border-gray-200 dark:border-gray-900 bg-gray-50 dark:bg-gray-700 shadow-sm dark:shadow rounded-lg overflow-hidden sm:p-6">
             <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
-                {{t "storefront.common.orders"}}
+                {{pluralize this.metrics.stores_count (t "storefront.common.store") without-count=true}}
             </dt>
             <dd class="mt-1 text-3xl font-semibold text-gray-800 dark:text-white">
                 {{this.metrics.stores_count}}

package/addon/components/widget/storefront-metrics.js

@@ -1,13 +1,17 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
-import { action, computed } from '@ember/object';
+import { get } from '@ember/object';
+import { debug } from '@ember/debug';
 import { startOfMonth, endOfMonth, format } from 'date-fns';
+import { task } from 'ember-concurrency';
 
 export default class WidgetStorefrontMetricsComponent extends Component {
     @service fetch;
     @service storefront;
-
+    @tracked title = 'This Month';
+    @tracked start = format(startOfMonth(new Date()), 'yyyy-MM-dd');
+    @tracked end = format(endOfMonth(new Date()), 'yyyy-MM-dd');
     @tracked metrics = {
         orders_count: 0,
         customers_count: 0,
@@ -15,47 +19,27 @@ export default class WidgetStorefrontMetricsComponent extends Component {
         earnings_sum: 0,
     };
 
-    @tracked isLoading = true;
-    @tracked start = format(startOfMonth(new Date()), 'yyyy-MM-dd');
-    @tracked end = format(endOfMonth(new Date()), 'yyyy-MM-dd');
-
-    @computed('args.title') get title() {
-        return this.args.title || 'This Month';
-    }
-
-    @action async setupWidget() {
-        this.metrics = await this.fetchMetrics(this.start, this.end);
-
-        this.storefront.on('order.broadcasted', this.reloadMetrics);
-        this.storefront.on('storefront.changed', this.reloadMetrics);
-    }
-
-    @action async reloadMetrics() {
-        this.metrics = await this.fetchMetrics(this.start, this.end);
+    constructor(owner, { title = 'This Month' }) {
+        super(...arguments);
+        this.title = title;
+        this.loadMetrics.perform(this.start, this.end);
+        this.storefront.on('order.broadcasted', () => {
+            this.loadMetrics.perform();
+        });
+        this.storefront.on('storefront.changed', () => {
+            this.loadMetrics.perform();
+        });
     }
 
-    @action fetchMetrics(start, end) {
-        this.isLoading = true;
+    @task *loadMetrics(start, end) {
+        const store = get(this.storefront, 'activeStore.id');
 
-        return new Promise((resolve) => {
-            const store = this.storefront?.activeStore?.id;
-
-            if (!store) {
-                this.isLoading = false;
-                return resolve(this.metrics);
-            }
-
-            this.fetch
-                .get('actions/metrics', { start, end, store }, { namespace: 'storefront/int/v1' })
-                .then((metrics) => {
-                    this.isLoading = false;
-                    resolve(metrics);
-                })
-                .catch(() => {
-                    this.isLoading = false;
-
-                    resolve(this.metrics);
-                });
-        });
+        try {
+            const metrics = yield this.fetch.get('actions/metrics', { start, end, store }, { namespace: 'storefront/int/v1' });
+            this.metrics = metrics;
+            return metrics;
+        } catch (err) {
+            debug('Error loading storefront metrics:', err);
+        }
     }
 }

package/addon/controllers/orders/index.js

@@ -1,60 +1,39 @@
-import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
-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';
+import { action, get } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { isBlank } from '@ember/utils';
+import { isArray } from '@ember/array';
+import { timeout, task } from 'ember-concurrency';
 
 export default class OrdersIndexController extends BaseController {
-    /**
-     * Inject the `notifications` service
-     *
-     * @var {Service}
-     */
     @service notifications;
-
-    /**
-     * Inject the `intl` service
-     *
-     * @var {Service}
-     */
     @service intl;
-
-    /**
-     * Inject the `modals-manager` service
-     *
-     * @var {Service}
-     */
     @service modalsManager;
-
-    /**
-     * Inject the `crud` service
-     *
-     * @var {Service}
-     */
     @service crud;
-
-    /**
-     * Inject the `fetch` service
-     *
-     * @var {Service}
-     */
     @service fetch;
-
-    /**
-     * Inject the `filters` service
-     *
-     * @var {Service}
-     */
     @service filters;
+    @service hostRouter;
+    @service storefront;
+    @tracked page = 1;
+    @tracked limit;
+    @tracked query;
+    @tracked sort = '-created_at';
+    @tracked public_id;
+    @tracked internal_id;
+    @tracked tracking;
+    @tracked facilitator;
+    @tracked customer;
+    @tracked driver;
+    @tracked payload;
+    @tracked pickup;
+    @tracked dropoff;
+    @tracked updated_by;
+    @tracked created_by;
+    @tracked status;
+    @tracked currency = 'USD';
 
-    /**
-     * Queryable parameters for this controller's model
-     *
-     * @var {Array}
-     */
-    queryParams = [
+    @tracked queryParams = [
         'page',
         'limit',
         'sort',
@@ -73,33 +52,17 @@ export default class OrdersIndexController extends BaseController {
         'status',
     ];
 
-    @tracked page = 1;
-    @tracked limit;
-    @tracked query;
-    @tracked sort = '-created_at';
-    @tracked public_id;
-    @tracked internal_id;
-    @tracked tracking;
-    @tracked facilitator;
-    @tracked customer;
-    @tracked driver;
-    @tracked payload;
-    @tracked pickup;
-    @tracked dropoff;
-    @tracked updated_by;
-    @tracked created_by;
-    @tracked status;
-
     @tracked columns = [
         {
             label: this.intl.t('storefront.common.id'),
             valuePath: 'public_id',
-            width: '150px',
+            width: '130px',
             cellComponent: 'table/cell/anchor',
             onClick: this.viewOrder,
             resizable: true,
             sortable: true,
             filterable: true,
+            filterComponent: 'filter/string',
         },
         {
             label: this.intl.t('storefront.orders.index.internal-id'),
@@ -108,27 +71,38 @@ export default class OrdersIndexController extends BaseController {
             resizable: true,
             sortable: true,
             filterable: true,
+            hidden: true,
             filterComponent: 'filter/string',
         },
         {
             label: this.intl.t('storefront.orders.index.customer'),
             valuePath: 'customer.name',
             cellComponent: 'table/cell/base',
-            width: '125px',
+            width: '100px',
             resizable: true,
             sortable: true,
-            hidden: true,
+            hidden: false,
             filterable: true,
             filterComponent: 'filter/model',
             filterComponentPlaceholder: this.intl.t('storefront.orders.index.select-order-customer'),
             filterParam: 'customer',
             model: 'customer',
         },
+        {
+            label: this.intl.t('storefront.orders.index.total'),
+            cellComponent: 'table/cell/currency',
+            currency: this.currency,
+            valuePath: 'meta.total',
+            width: '100px',
+            resizable: true,
+            hidden: false,
+            sortable: true,
+        },
         {
             label: this.intl.t('storefront.common.pickup'),
             valuePath: 'pickupName',
             cellComponent: 'table/cell/base',
-            width: '160px',
+            width: '150px',
             resizable: true,
             sortable: true,
             filterable: true,
@@ -141,7 +115,7 @@ export default class OrdersIndexController extends BaseController {
             label: this.intl.t('storefront.common.dropoff'),
             valuePath: 'dropoffName',
             cellComponent: 'table/cell/base',
-            width: '160px',
+            width: '150px',
             resizable: true,
             sortable: true,
             filterable: true,
@@ -150,15 +124,34 @@ export default class OrdersIndexController extends BaseController {
             filterParam: 'dropoff',
             model: 'place',
         },
+        {
+            label: this.intl.t('storefront.orders.index.driver-assigned'),
+            cellComponent: 'table/cell/driver-name',
+            valuePath: 'driver_assigned',
+            modelPath: 'driver_assigned',
+            width: '150px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/model',
+            filterComponentPlaceholder: this.intl.t('storefront.orders.index.select-driver-for-order'),
+            filterParam: 'driver',
+            model: 'driver',
+            query: {
+                // no model, serializer, adapter for relations
+                without: ['fleets', 'vendor', 'vehicle', 'currentJob'],
+            },
+        },
         {
             label: this.intl.t('storefront.orders.index.scheduled-at'),
             valuePath: 'scheduledAt',
             sortParam: 'scheduled_at',
             filterParam: 'scheduled_at',
-            width: '150px',
+            width: '125px',
             resizable: true,
             sortable: true,
             filterable: true,
+            hidden: true,
             filterComponent: 'filter/date',
         },
         {
@@ -169,43 +162,16 @@ export default class OrdersIndexController extends BaseController {
             hidden: true,
             width: '50px',
         },
-        {
-            label: this.intl.t('storefront.orders.index.transaction-total'),
-            cellComponent: 'table/cell/base',
-            valuePath: 'transaction_amount',
-            width: '50px',
-            resizable: true,
-            hidden: true,
-            sortable: true,
-        },
         {
             label: this.intl.t('storefront.orders.index.tracking-number'),
             cellComponent: 'table/cell/base',
             valuePath: 'tracking_number.tracking_number',
-            width: '170px',
+            width: '160px',
             resizable: true,
             sortable: true,
             filterable: true,
             filterComponent: 'filter/string',
         },
-        {
-            label: this.intl.t('storefront.orders.index.driver-assigned'),
-            cellComponent: 'table/cell/driver-name',
-            valuePath: 'driver_assigned',
-            modelPath: 'driver_assigned',
-            width: '170px',
-            resizable: true,
-            sortable: true,
-            filterable: true,
-            filterComponent: 'filter/model',
-            filterComponentPlaceholder: this.intl.t('storefront.orders.index.select-driver-for-order'),
-            filterParam: 'driver',
-            model: 'driver',
-            query: {
-                // no model, serializer, adapter for relations
-                without: ['fleets', 'vendor', 'vehicle', 'currentJob'],
-            },
-        },
         {
             label: this.intl.t('storefront.common.type'),
             cellComponent: 'cell/humanize',
@@ -219,7 +185,7 @@ export default class OrdersIndexController extends BaseController {
             label: this.intl.t('storefront.common.status'),
             valuePath: 'status',
             cellComponent: 'table/cell/status',
-            width: '120px',
+            width: '140px',
             resizable: true,
             sortable: true,
             filterable: true,
@@ -228,10 +194,10 @@ export default class OrdersIndexController extends BaseController {
         },
         {
             label: this.intl.t('storefront.orders.index.created-at'),
-            valuePath: 'createdAt',
+            valuePath: 'createdAtShort',
             sortParam: 'created_at',
             filterParam: 'created_at',
-            width: '140px',
+            width: '100px',
             resizable: true,
             sortable: true,
             filterable: true,
@@ -239,7 +205,7 @@ export default class OrdersIndexController extends BaseController {
         },
         {
             label: this.intl.t('storefront.orders.index.updated-at'),
-            valuePath: 'updatedAt',
+            valuePath: 'updatedAtShort',
             sortParam: 'updated_at',
             filterParam: 'updated_at',
             width: '125px',
@@ -282,25 +248,35 @@ export default class OrdersIndexController extends BaseController {
             ddMenuLabel: 'Order Actions',
             cellClassNames: 'overflow-visible',
             wrapperClass: 'flex items-center justify-end mx-2',
-            width: '12%',
+            width: '90px',
             actions: [
                 {
-                    label: this.intl.t('storefront.orders.index.view-order'),
+                    label: this.intl.t('fleet-ops.operations.orders.index.view-order'),
                     icon: 'eye',
                     fn: this.viewOrder,
+                    permission: 'fleet-ops view order',
+                },
+                {
+                    label: this.intl.t('fleet-ops.operations.orders.index.dispatch-order'),
+                    icon: 'paper-plane',
+                    fn: this.dispatchOrder,
+                    permission: 'fleet-ops dispatch order',
+                    isVisible: (order) => order.canBeDispatched,
                 },
                 {
-                    label: this.intl.t('storefront.orders.index.cancel-order'),
+                    label: this.intl.t('fleet-ops.operations.orders.index.cancel-order'),
                     icon: 'ban',
                     fn: this.cancelOrder,
+                    permission: 'fleet-ops cancel order',
                 },
                 {
                     separator: true,
                 },
                 {
-                    label: this.intl.t('storefront.orders.index.delete-order'),
+                    label: this.intl.t('fleet-ops.operations.orders.index.delete-order'),
                     icon: 'trash',
                     fn: this.deleteOrder,
+                    permission: 'fleet-ops delete order',
                 },
             ],
             sortable: false,
@@ -310,6 +286,11 @@ export default class OrdersIndexController extends BaseController {
         },
     ];
 
+    constructor() {
+        super(...arguments);
+        this.currency = get(this.storefront, 'activeStore.currency');
+    }
+
     /**
      * The search task.
      *
@@ -337,4 +318,132 @@ export default class OrdersIndexController extends BaseController {
     @action viewOrder(order) {
         return this.transitionToRoute('orders.index.view', order);
     }
+
+    /**
+     * Cancels a specific order after confirmation.
+     * @param {Object} order - The order to cancel.
+     * @param {Object} [options={}] - Additional options for the modal.
+     * @action
+     * @memberof OperationsOrdersIndexController
+     */
+    @action cancelOrder(order, options = {}) {
+        this.modalsManager.confirm({
+            title: this.intl.t('fleet-ops.operations.orders.index.cancel-title'),
+            body: this.intl.t('fleet-ops.operations.orders.index.cancel-body'),
+            order,
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await this.fetch.patch('orders/cancel', { order: order.id });
+                    order.set('status', 'canceled');
+                    this.notifications.success(this.intl.t('fleet-ops.operations.orders.index.cancel-success', { orderId: order.public_id }));
+                    modal.done();
+                } catch (error) {
+                    this.notifications.serverError(error);
+                    modal.stopLoading();
+                }
+            },
+            ...options,
+        });
+    }
+
+    @action dispatchOrder(order, options = {}) {
+        this.modalsManager.confirm({
+            title: this.intl.t('fleet-ops.operations.orders.index.dispatch-title'),
+            body: this.intl.t('fleet-ops.operations.orders.index.dispatch-body'),
+            acceptButtonScheme: 'primary',
+            acceptButtonText: 'Dispatch',
+            acceptButtonIcon: 'paper-plane',
+            order,
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await this.fetch.patch('orders/dispatch', { order: order.id });
+                    order.set('status', 'dispatched');
+                    this.notifications.success(this.intl.t('fleet-ops.operations.orders.index.dispatch-success', { orderId: order.public_id }));
+                    modal.done();
+                } catch (error) {
+                    this.notifications.serverError(error);
+                    modal.stopLoading();
+                }
+            },
+            ...options,
+        });
+    }
+
+    @action deleteOrder(order, options = {}) {
+        this.crud.delete(order, {
+            onSuccess: () => {
+                return this.hostRouter.refresh();
+            },
+            ...options,
+        });
+    }
+
+    @action bulkDeleteOrders(selected = []) {
+        selected = selected.length > 0 ? selected : this.table.selectedRows;
+
+        this.crud.bulkDelete(selected, {
+            modelNamePath: `public_id`,
+            acceptButtonText: 'Delete Orders',
+            onSuccess: async () => {
+                await this.hostRouter.refresh();
+                this.table.untoggleSelectAll();
+            },
+        });
+    }
+
+    @action bulkCancelOrders(selected = []) {
+        selected = selected.length > 0 ? selected : this.table.selectedRows;
+
+        if (!isArray(selected) || selected.length === 0) {
+            return;
+        }
+
+        this.crud.bulkAction('cancel', selected, {
+            acceptButtonText: 'Cancel Orders',
+            acceptButtonScheme: 'danger',
+            acceptButtonIcon: 'ban',
+            modelNamePath: `public_id`,
+            actionPath: `orders/bulk-cancel`,
+            actionMethod: `PATCH`,
+            onConfirm: (canceledOrders) => {
+                canceledOrders.forEach((order) => {
+                    order.set('status', 'canceled');
+                });
+            },
+            onSuccess: async () => {
+                await this.hostRouter.refresh();
+                this.table.untoggleSelectAll();
+            },
+        });
+    }
+
+    @action bulkDispatchOrders(selected = []) {
+        selected = selected.length > 0 ? selected : this.table.selectedRows;
+
+        if (!isArray(selected) || selected.length === 0) {
+            return;
+        }
+
+        this.crud.bulkAction('dispatch', selected, {
+            acceptButtonText: 'Dispatch Orders',
+            acceptButtonScheme: 'magic',
+            acceptButtonIcon: 'rocket',
+            modelNamePath: 'public_id',
+            actionPath: 'orders/bulk-dispatch',
+            actionMethod: 'POST',
+            onConfirm: (dispatchedOrders) => {
+                dispatchedOrders.forEach((order) => {
+                    order.set('status', 'dispatched');
+                });
+            },
+            onSuccess: async () => {
+                await this.hostRouter.refresh();
+                this.table.untoggleSelectAll();
+            },
+        });
+    }
 }

package/addon/controllers/settings/gateways.js

@@ -71,7 +71,7 @@ export default class SettingsGatewaysController extends Controller {
 
                 set(gateway.config, key, value);
             },
-            confirm: async (modal, done) => {
+            confirm: async (modal) => {
                 modal.startLoading();
 
                 try {

package/addon/helpers/get-tip-amount.js

@@ -1,5 +1,16 @@
 import { helper } from '@ember/component/helper';
+import formatCurrency from '@fleetbase/ember-ui/utils/format-currency';
+import numbersOnly from '@fleetbase/ember-ui/utils/numbers-only';
+import calculatePercentage from '@fleetbase/ember-core/utils/calculate-percentage';
 
-export default helper(function getTipAmount(positional /*, named*/) {
-    return positional;
+export default helper(function getTipAmount([tip, subtotal, currency]) {
+    let amount = tip;
+    if (typeof tip === 'string' && tip.endsWith('%')) {
+        amount = calculatePercentage(numbersOnly(tip), subtotal);
+    }
+
+    amount = parseInt(amount);
+    amount = isNaN(amount) ? 0 : amount;
+
+    return formatCurrency(amount, currency);
 });

package/addon/routes/application.js

@@ -45,10 +45,8 @@ export default class ApplicationRoute extends Route {
         return this.store.query('store', { limit: 300, sort: '-updated_at' });
     }
 
-    afterModel(model) {
-        if (model.length) {
-            // this.storefront.listenForIncomingOrders();
-        }
+    afterModel() {
+        this.storefront.listenForIncomingOrders();
     }
 
     disableSandbox() {