@fleetbase/storefront-engine 0.3.18 → 0.3.21

package/addon/components/order-panel.hbs

@@ -1 +1,314 @@
-<OrderPanel::Details @order={{this.order}} @onPressCancel={{this.onPressCancel}} @onLoad={{this.setOverlayContext}} />
+<Overlay position="right" @noBackdrop={{true}} @width="550px" @fullHeight={{true}} @isResizable={{true}} as |overlay|>
+    <Overlay::Header
+        @overlay={{overlay}}
+        @title={{this.order.public_id}}
+        @status={{this.order.status}}
+        @dispatched={{this.order.dispatched}}
+        @createdAt={{this.order.createdAt}}
+        @onPressCancel={{@onPressCancel}}
+    >
+        <div class="flex flex-row justify-end space-x-2">
+            {{#if this.order.isFresh}}
+                <Button
+                    @size="xs"
+                    @type="success"
+                    @iconPrefix="fas"
+                    @icon="check"
+                    @text={{t "storefront.component.widget.orders.accept-order"}}
+                    @onClick={{fn this.acceptOrder this.order}}
+                />
+            {{/if}}
+            {{#if this.order.isPreparing}}
+                <Button @size="xs" @type="success" @icon="bell-concierge" @text={{t "storefront.component.widget.orders.mark-as-ready"}} @onClick={{fn this.markAsReady this.order}} />
+            {{/if}}
+            {{#if this.order.isPickupReady}}
+                <Button @size="xs" @type="success" @icon="check" @text={{t "storefront.component.widget.orders.mark-as-completed"}} @onClick={{fn this.markAsCompleted this.order}} />
+            {{/if}}
+            {{#unless this.order.isCanceled}}
+                <Button @size="xs" @type="danger" @icon="ban" @helpText={{t "storefront.component.widget.orders.cancel-order"}} @onClick={{fn this.cancelOrder this.order}} />
+            {{/unless}}
+        </div>
+    </Overlay::Header>
+    <Overlay::Body>
+        <div class="py-4">
+            <div>
+                <div class="flex flex-col items-center justify-center">
+                    <div class="p-2 rounded-md bg-white">
+                        <Image src={{concat "data:image/png;base64," this.order.tracking_number.qr_code}} class="w-18 h-18" alt={{this.order.public_id}} />
+                    </div>
+                    <div class="text-center">
+                        <h2 class="dark:text-gray-100 font-semibold">{{this.order.public_id}}</h2>
+                    </div>
+                    <div class="text-xs">
+                        {{this.order.createdAt}}
+                    </div>
+                    <div>
+                        <Badge @status={{this.order.status}} />
+                    </div>
+                </div>
+            </div>
+            <div class="grid grid-cols-2 lg:grid-cols-1 gap-3 justify-items-stretch auto-rows-max p-4">
+                {{#if this.order.tracking_statuses}}
+                    <div class="col-span-2">
+                        <Timeline @activity={{this.order.tracking_statuses}} @arrowClass="bg-gray-600 border border-gray-900 shadow-md" as |TimelineItem|>
+                            <TimelineItem @activeStatus={{this.order.status}} as |trackingStatus|>
+                                <div class="flex flex-col px-3 py-2 rounded text-sm leading-4 space-y-2 bg-gray-200 dark:bg-gray-800 dark:text-white">
+                                    <div class="flex flex-col space-y-1">
+                                        <div class="text-xs font-semibold truncate">{{trackingStatus.status}}</div>
+                                        <div class="text-xs truncate">{{n-a trackingStatus.details}}</div>
+                                        <div class="text-xs">{{trackingStatus.createdAtShortWithTime}}</div>
+                                    </div>
+                                    <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                                        <InputInfo>
+                                            <div class="text-xs">{{or trackingStatus.details trackingStatus.status}}</div>
+                                            <div class="text-xs">{{trackingStatus.createdAtShortWithTime}}</div>
+                                        </InputInfo>
+                                    </Attach::Tooltip>
+                                </div>
+                            </TimelineItem>
+                        </Timeline>
+                    </div>
+                {{/if}}
+                <div class="col-span-2">
+                    <div class="bg-gray-100 border border-gray-200 dark:bg-gray-800 dark:border-gray-700 rounded-md px-4 py-2 space-y-2">
+                        <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.common.store"}}</h5>
+                        <div class="flex items-start space-x-4">
+                            <Image src={{this.store.logo_url}} class="w-12 h-12 rounded-md shadow-sm" alt={{this.store.name}} />
+                            <div>
+                                <h5 class="font-semibold dark:text-white text-base">{{this.store.name}}</h5>
+                                <DisplayPlace @place={{this.order.payload.pickup}} @type="store location" @addressClass="text-xs dark:text-gray-100" @noAddressClass="text-xs" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-span-2">
+                    <div class="flex {{if (media 'isMobile') 'flex-col space-y-3' 'flex-row space-x-3'}} items-stretch">
+                        {{#unless this.order.meta.is_pickup}}
+                            <div class="flex-1 self-stretch">
+                                <div class="bg-gray-100 border border-gray-200 dark:bg-gray-800 dark:border-gray-700 rounded-md px-4 py-2 space-y-2 h-full">
+                                    <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.component.modals.incoming-order.assigned"}}</h5>
+                                    <div class="flex flex-col space-y-4">
+                                        {{#if this.order.driver_assigned.id}}
+                                            <div class="flex items-center">
+                                                <Image src={{this.order.driver_assigned.photoUrl}} class="w-12 h-12 rounded-md shadow-sm mr-4" alt={{this.order.driver_assigned.name}} />
+                                                <div>
+                                                    <h5 class="font-semibold dark:text-white text-xs">{{n-a this.order.driver_assigned.displayName}}</h5>
+                                                    <div class="font-semibold dark:text-gray-100 text-xs">{{n-a
+                                                            this.order.driver_assigned.phone
+                                                            (t "storefront.component.modals.incoming-order.no-phone")
+                                                        }}</div>
+                                                </div>
+                                            </div>
+                                        {{else}}
+                                            <div>
+                                                <h5 class="text-red-500 text-sm">{{t "storefront.component.modals.incoming-order.not-assigned"}}</h5>
+                                            </div>
+                                        {{/if}}
+                                        {{#if @options.assignDriver}}
+                                            <div>
+                                                <Button
+                                                    @size="xs"
+                                                    @type="default"
+                                                    @icon="id-card"
+                                                    @text={{if
+                                                        this.order.has_driver_assigned
+                                                        (t "storefront.component.modals.incoming-order.change-driver")
+                                                        (t "storefront.component.modals.incoming-order.assign-driver")
+                                                    }}
+                                                    @onClick={{@options.assignDriver}}
+                                                />
+                                            </div>
+                                        {{/if}}
+                                    </div>
+                                </div>
+                            </div>
+                        {{/unless}}
+                        <div class="flex-1 self-stretch">
+                            <div class="bg-gray-100 border border-gray-200 dark:bg-gray-800 dark:border-gray-700 rounded-md px-4 py-2 space-y-2 h-full">
+                                <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.common.customer"}}</h5>
+                                <div class="">
+                                    <div class="flex flex-row">
+                                        <div>
+                                            <Image src={{avatar-url this.order.customer.photo_url}} class="w-12 h-12 rounded-md shadow-sm mr-4" alt={{this.order.customer.name}} />
+                                        </div>
+                                        <div>
+                                            <div class="text-xs font-bold dark:text-gray-100">{{this.order.customer.name}}</div>
+                                            <div class="text-xs dark:text-gray-100">{{this.order.customer.email}}</div>
+                                            <div class="text-xs dark:text-gray-100">{{this.order.customer.phone}}</div>
+                                        </div>
+                                    </div>
+                                    {{#unless this.order.meta.is_pickup}}
+                                        <div class="mt-2">
+                                            <h5 class="dark:text-gray-100 font-semibold text-xs truncate">{{t "storefront.component.modals.incoming-order.address"}}</h5>
+                                            <div class="flex flex-row mt-1">
+                                                <div class="flex items-center justify-center rounded-full bg-blue-500 w-8 h-8 mr-3">
+                                                    <FaIcon @icon="map-marker-alt" class="text-white" />
+                                                </div>
+                                                <div class="truncate">
+                                                    <DisplayPlace
+                                                        @place={{this.order.payload.dropoff}}
+                                                        @type="dropoff"
+                                                        @addressClass="text-xs dark:text-gray-100"
+                                                        @noAddressClass="text-xs"
+                                                    />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    {{/unless}}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-span-2">
+                    <div class="bg-gray-100 border border-gray-200 dark:bg-gray-800 dark:border-gray-700 rounded-md px-4 py-2 space-y-2">
+                        {{#if this.order.meta.is_pickup}}
+                            <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.common.pickup"}}</h5>
+                        {{else}}
+                            <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.common.delivery"}}</h5>
+                        {{/if}}
+                        <div>
+                            {{#if this.order.meta.is_pickup}}
+                                <div class="flex-1">
+                                    <InfoBlock @size="xs" class="mb-3">{{t "storefront.component.modals.incoming-order.pickup-order"}}</InfoBlock>
+                                    <div class="flex flex-row">
+                                        <div class="flex items-center justify-center rounded-full bg-blue-500 w-8 h-8 mr-3">
+                                            <FaIcon @icon="store-alt" class="text-white" />
+                                        </div>
+                                        <DisplayPlace @place={{this.order.payload.pickup}} @type="pickup" @addressClass="text-xs dark:text-gray-100" @noAddressClass="text-xs" />
+                                    </div>
+                                </div>
+                            {{else if this.order.payload.hasWaypoints}}
+                                <RouteList @order={{this.order}} />
+                            {{else}}
+                                <div class="order-route-list storefront flex-1">
+                                    <div class="order-route-stop">
+                                        <div class="order-route-stop-index">
+                                            <div class="index-count">
+                                                <FaIcon @prefix="fas" @icon="store-alt" />
+                                            </div>
+                                        </div>
+                                        <div class="order-route-location dark:text-gray-100">
+                                            <DisplayPlace @place={{this.order.payload.pickup}} @type="pickup" @addressClass="text-xs dark:text-gray-100" @noAddressClass="text-xs" />
+                                        </div>
+                                    </div>
+                                    <div class="order-route-stop">
+                                        <div class="order-route-stop-index">
+                                            <div class="index-count">
+                                                <FaIcon @prefix="fas" @icon="map-marker-alt" />
+                                            </div>
+                                        </div>
+                                        <div class="order-route-location dark:text-gray-100">
+                                            <DisplayPlace @place={{this.order.payload.dropoff}} @type="dropoff" @addressClass="text-xs dark:text-gray-100" @noAddressClass="text-xs" />
+                                        </div>
+                                    </div>
+                                </div>
+                            {{/if}}
+                        </div>
+                    </div>
+                </div>
+                <div class="col-span-2">
+                    <div class="bg-gray-100 border border-gray-200 dark:bg-gray-800 dark:border-gray-700 rounded-md px-4 py-2 space-y-2">
+                        <div class="flex flex-row items-center space-x-2">
+                            <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.component.modals.incoming-order.tracking"}}</h5>
+                            <h5 class="dark:text-gray-100 font-semibold">({{this.order.tracking}})</h5>
+                        </div>
+                        <div class="flex flex-row items-center justify-center space-x-4">
+                            <div class="p-2 rounded-md bg-white">
+                                <Image src={{concat "data:image/png;base64," this.order.tracking_number.qr_code}} class="w-14 h-14" alt={{this.order.public_id}} />
+                            </div>
+                            <div class="p-2 rounded-md bg-white">
+                                <Image src={{concat "data:image/png;base64," this.order.tracking_number.barcode}} class="w-40 h-14" alt={{this.order.public_id}} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-span-2">
+                    <div class="bg-gray-100 border border-gray-200 dark:bg-gray-800 dark:border-gray-700 rounded-md px-4 py-2 space-y-2">
+                        <div class="flex flex-row items-center justify-between">
+                            <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.component.modals.incoming-order.summary"}}</h5>
+                            {{#if this.order.payload.cod_amount}}
+                                <div>
+                                    <FaIcon @icon="money-bill-wave" @size="sm" class="text-green-400 mr-1" />
+                                    <span class="font-semibold text-green-400 text-sm">{{t "storefront.common.cash"}}</span>
+                                </div>
+                            {{/if}}
+                        </div>
+                        <div>
+                            <div class="flex flex-col space-y-4 overflow-hidden py-4">
+                                {{#each this.order.payload.entities as |entity|}}
+                                    <div class="flex flex-1">
+                                        <div class="mr-2">
+                                            <div class="flex items-center justify-center w-5 h-5 border border-gray-100 dark:border-blue-400 rounded-md">
+                                                <span class="text-blue-400 text-xs">{{entity.meta.quantity}}x</span>
+                                            </div>
+                                        </div>
+                                        <div class="flex-1 flex">
+                                            <div class="mr-4">
+                                                <img src={{entity.photo_url}} class="w-12 h-12 rounded-md shadow-sm" alt={{entity.name}} />
+                                            </div>
+                                            <div>
+                                                <h4 class="font-semibold dark:text-gray-100 mb-1 text-sm">{{entity.name}}</h4>
+                                                <div class="flex flex-wrap truncate w-44">
+                                                    <p class="dark:text-gray-50 text-xs truncate">{{entity.description}}</p>
+                                                </div>
+                                                <div>
+                                                    {{#each entity.meta.variants as |variant|}}
+                                                        <div>
+                                                            <span class="text-xs dark:text-gray-50">{{variant.name}}</span>
+                                                        </div>
+                                                    {{/each}}
+                                                </div>
+                                                <div>
+                                                    {{#each entity.meta.addons as |addon|}}
+                                                        <div>
+                                                            <span class="text-xs dark:text-gray-50">+ {{addon.name}}</span>
+                                                        </div>
+                                                    {{/each}}
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="px-6">
+                                            <span class="dark:text-gray-50 text-sm">{{format-currency entity.meta.subtotal entity.currency}}</span>
+                                        </div>
+                                    </div>
+                                {{/each}}
+                            </div>
+                            <div class="px-6 py-2.5 space-y-2 border-t border-b border-gray-200 dark:border-gray-700">
+                                <div class="flex items-center justify-between">
+                                    <span class="dark:text-gray-50 text-sm">{{t "storefront.component.modals.incoming-order.subtotal"}}</span>
+                                    <span class="dark:text-gray-50 text-sm">{{format-currency this.order.meta.subtotal this.order.meta.currency}}</span>
+                                </div>
+                                {{#unless this.order.meta.is_pickup}}
+                                    <div class="flex items-center justify-between">
+                                        <span class="dark:text-gray-50 text-sm">{{t "storefront.component.modals.incoming-order.fee"}}</span>
+                                        <span class="dark:text-gray-50 text-sm">{{format-currency this.order.meta.delivery_fee this.order.meta.currency}}</span>
+                                    </div>
+                                {{/unless}}
+                                {{#if this.order.meta.tip}}
+                                    <div class="flex items-center justify-between">
+                                        <span class="dark:text-gray-50 text-sm">{{t "storefront.component.modals.incoming-order.tip"}}</span>
+                                        <span class="dark:text-gray-50 text-sm">{{get-tip-amount this.order.meta.tip this.order.meta.subtotal this.order.meta.currency}}</span>
+                                    </div>
+                                {{/if}}
+                                {{#if this.order.meta.delivery_tip}}
+                                    <div class="flex items-center justify-between">
+                                        <span class="dark:text-gray-50 text-sm">{{t "storefront.component.modals.incoming-order.delivery-tip"}}</span>
+                                        <span class="dark:text-gray-50 text-sm">{{get-tip-amount this.order.meta.delivery_tip this.order.meta.subtotal this.order.meta.currency}}</span>
+                                    </div>
+                                {{/if}}
+                            </div>
+                            <div class="px-6 py-2">
+                                <div class="flex items-center justify-between">
+                                    <span class="dark:text-gray-50 font-bold text-sm">{{t "storefront.common.total"}}</span>
+                                    <span class="dark:text-gray-50 font-bold text-sm">{{format-currency this.order.meta.total this.order.meta.currency}}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <Spacer @height="300px" />
+    </Overlay::Body>
+</Overlay>

package/addon/components/order-panel.js

@@ -1,15 +1,22 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-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';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { debug } from '@ember/debug';
+import { task } from 'ember-concurrency';
 
 export default class OrderPanelComponent extends Component {
+    @service storefront;
+    @service orderActions;
     @tracked context = null;
+    @tracked store = null;
 
     constructor() {
         super(...arguments);
         applyContextComponentArguments(this);
+        this.loadActiveStore.perform();
     }
 
     /**
@@ -31,6 +38,47 @@ export default class OrderPanelComponent extends Component {
      * @returns {Boolean} Indicates whether the cancel action was overridden.
      */
     @action onPressCancel() {
-        return contextComponentCallback(this, 'onPressCancel', this.customer);
+        return contextComponentCallback(this, 'onPressCancel', this.order);
+    }
+
+    @action acceptOrder(order) {
+        this.orderActions.acceptOrder(order);
+    }
+
+    @action markAsReady(order) {
+        this.orderActions.markAsReady(order);
+    }
+
+    @action markAsCompleted(order) {
+        this.orderActions.markAsCompleted(order);
+    }
+
+    @action assignDriver(order) {
+        this.orderActions.assignDriver(order);
+    }
+
+    @action cancelOrder(order) {
+        this.orderActions.cancelOrder(order);
+    }
+
+    @task *loadActiveStore() {
+        const storefrontId = this.order.meta.storefront_id;
+        if (!storefrontId) {
+            return null;
+        }
+
+        const currentStore = this.storefront.activeStore;
+        if (storefrontId === currentStore.public_id) {
+            this.store = currentStore;
+            return currentStore;
+        }
+
+        try {
+            const store = yield this.store.findRecord('store', storefrontId);
+            this.store = store;
+            return store;
+        } catch (err) {
+            debug(`Unable to load store for ${this.order.public_id}:`, err);
+        }
     }
 }

package/addon/components/widget/customers.hbs

@@ -1,55 +1,79 @@
-<ContentPanel
-    @title={{this.title}}
-    @titleStatusRight={{this.customers.length}}
-    @titleStatusRightClass="info-status-badge"
-    @hideStatusDot={{true}}
-    @open={{this.customers.length}}
-    @pad={{false}}
-    @wrapperClass={{@wrapperClass}}
-    @onInsert={{this.getCustomers}}
->
-    {{#if this.isLoading}}
-        <div class="px-3 py-2">
-            <Spinner class="text-sky-400" />
+{{#if (and this.loadCustomers.isRunning (not this.loaded))}}
+    <div class="next-content-panel-wrapper">
+        <div class="next-content-panel-container">
+            <div class="next-content-panel next-content-panel-is-closed">
+                <div class="next-content-panel-header next-content-panel-toggle next-content-panel-is-closed">
+                    <a href="javascript:;" class="next-content-panel-header-left">
+                        <span class="icon-container">
+                            <Spinner class="text-sky-400" @height="13" @width="13" />
+                        </span>
+                        <div class="next-content-panel-title-container">
+                            <div class="panel-title flex-shrink-0">
+                                <div class="flex flex-col">
+                                    <span>{{this.title}}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+            </div>
         </div>
-    {{/if}}
-    <div class="hidden md:flex table-wrapper table-fluid">
-        <table>
-            <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>
-                    <th></th>
-                </tr>
-            </thead>
-            <tbody>
+    </div>
+{{else}}
+    <ContentPanel
+        @title={{this.title}}
+        @titleStatusRight={{this.customers.length}}
+        @titleStatusRightClass="info-status-badge"
+        @hideStatusDot={{true}}
+        @open={{gt this.customers.length 0}}
+        @isLoading={{this.loadCustomers.isRunning}}
+        @pad={{false}}
+        @wrapperClass={{@wrapperClass}}
+    >
+        {{#if (media "isMobile")}}
+            <div class="flex flex-col p-3 space-y-3">
                 {{#each this.customers as |customer|}}
-                    <tr class="h-12">
-                        <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>
-                        <td></td>
-                    </tr>
+                    <div class="py-2 px-3 rounded-md border border-gray-400 dark:border-gray-700">
+                        <div class="flex flex-row">
+                            <div>
+                                <Image src={{avatar-url customer.photo_url}} class="w-12 h-12 rounded-md shadow-sm mr-4" alt={{customer.name}} />
+                            </div>
+                            <div>
+                                <div class="text-xs font-bold dark:text-gray-100">{{customer.name}}</div>
+                                <div class="text-xs dark:text-gray-100">{{customer.email}}</div>
+                                <div class="text-xs dark:text-gray-100">{{customer.phone}}</div>
+                            </div>
+                        </div>
+                    </div>
                 {{/each}}
-            </tbody>
-        </table>
-    </div>
-    <div class="flex flex-col md:hidden p-3 space-y-3">
-        {{#each this.customers as |customer|}}
-            <div class="py-2 px-3 rounded-md border border-gray-400 dark:border-gray-700">
-                <div class="flex flex-row">
-                    <div class="flex-1 font-semibold">{{customer.name}}</div>
-                </div>
-                <div class="flex flex-col">
-                    <div class="text-xs">{{t "storefront.component.widget.customers.phone"}}{{n-a customer.phone}}</div>
-                    <div class="text-xs">{{t "storefront.component.widget.customers.email"}} {{n-a customer.email}}</div>
-                </div>
             </div>
-        {{/each}}
-    </div>
-</ContentPanel>
+        {{else}}
+            <div class="table-wrapper table-fluid">
+                <table class="storefront-widget-table">
+                    <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>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {{#each this.customers as |customer|}}
+                            <tr class="h-12">
+                                <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>
+                                <td></td>
+                            </tr>
+                        {{/each}}
+                    </tbody>
+                </table>
+            </div>
+        {{/if}}
+    </ContentPanel>
+{{/if}}

package/addon/components/widget/customers.js

@@ -1,62 +1,50 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
-import { action } from '@ember/object';
-import setComponentArg from '@fleetbase/ember-core/utils/set-component-arg';
+import { action, get } from '@ember/object';
+import { debug } from '@ember/debug';
+import { task } from 'ember-concurrency';
 
 export default class WidgetCustomersComponent extends Component {
     @service store;
     @service storefront;
     @service intl;
     @service contextPanel;
-    @tracked isLoading = true;
+    @tracked loaded = false;
     @tracked customers = [];
     @tracked title = this.intl.t('storefront.component.widget.customers.widget-title');
 
     constructor(owner, { title }) {
         super(...arguments);
-        setComponentArg(this, 'title', title);
-    }
-
-    @action async getCustomers() {
-        this.customers = await this.fetchCustomers();
-
-        this.storefront.on('order.broadcasted', this.reloadCustomers);
-        this.storefront.on('storefront.changed', this.reloadCustomers);
-    }
-
-    @action async reloadCustomers() {
-        this.customers = await this.fetchCustomers();
-    }
-
-    @action fetchCustomers() {
-        this.isLoading = true;
-
-        return new Promise((resolve) => {
-            const storefront = this.storefront.getActiveStore('public_id');
-
-            if (!storefront) {
-                this.isLoading = false;
-                return resolve([]);
-            }
-
-            this.store
-                .query('customer', {
-                    storefront,
-                    limit: 14,
-                })
-                .then((customers) => {
-                    this.isLoading = false;
-                    resolve(customers);
-                })
-                .catch(() => {
-                    this.isLoading = false;
-                    resolve(this.customers);
-                });
+        this.title = title ?? this.intl.t('storefront.component.widget.customers.widget-title');
+        this.loadCustomers.perform();
+        this.storefront.on('order.broadcasted', () => {
+            this.loadCustomers.perform();
+        });
+        this.storefront.on('storefront.changed', () => {
+            this.loadCustomers.perform();
         });
     }
 
     @action viewCustomer(customer) {
         this.contextPanel.focus(customer, 'viewing');
     }
+
+    @task *loadCustomers(params = {}) {
+        const storefront = get(this.storefront, 'activeStore.public_id');
+
+        try {
+            const customers = yield this.store.query('customer', {
+                storefront,
+                limit: 14,
+                ...params,
+            });
+            this.loaded = true;
+            this.customers = customers;
+
+            return customers;
+        } catch (err) {
+            debug('Error loading customers for widget:', err);
+        }
+    }
 }