@fleetbase/storefront-engine 0.3.18 → 0.3.21

package/addon/components/customer-panel/orders.hbs

@@ -2,36 +2,35 @@
 <Layout::Section::Header @title={{t "storefront.common.orders"}} @onSearch={{this.search}} />
 
 <Layout::Section::Body>
-    <div class="p-4">
-
-        {{#if this.isLoading}}
-            <div class="px-3 py-2">
-                <Spinner class="text-sky-400" />
-            </div>
-        {{/if}}
-        <div class="hidden md:flex table-wrapper table-fluid">
-            <table>
-                <thead>
-                    <tr class="h-12 text-left py-1">
-                        <th>{{t "storefront.component.widget.orders.id-column"}}</th>
-                        <th>{{t "storefront.common.amount"}}</th>
-                        <th>{{t "storefront.common.driver"}}</th>
-                        <th>{{t "storefront.common.created"}}</th>
-                        <th>{{t "storefront.common.status"}}</th>
-                        <th></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {{#each this.orders as |order|}}
-                        <tr class="h-12">
-                            <td><a href="javascript:;" {{on "click" (fn this.viewOrder order)}}>{{order.public_id}}</a></td>
-                            <td>{{format-currency order.meta.total order.meta.currency}}</td>
-                            <td>{{n-a order.driver_name}}</td>
-                            <td>{{order.createdAgo}}</td>
-                            <td>
-                                <Badge @status={{order.status}} />
-                            </td>
-                            <td>
+    {{#if this.loadOrders.isRunning}}
+        <div class="px-3 py-2">
+            <Spinner class="text-sky-400" />
+        </div>
+    {{/if}}
+    <div class="hidden md:flex table-wrapper table-fluid">
+        <table>
+            <thead>
+                <tr class="h-12 text-left py-1">
+                    <th>{{t "storefront.component.widget.orders.id-column"}}</th>
+                    <th>{{t "storefront.common.amount"}}</th>
+                    <th>{{t "storefront.common.driver"}}</th>
+                    <th>{{t "storefront.common.created"}}</th>
+                    <th>{{t "storefront.common.status"}}</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+                {{#each this.orders as |order|}}
+                    <tr class="h-12">
+                        <td><a href="javascript:;" {{on "click" (fn this.viewOrder order)}}>{{order.public_id}}</a></td>
+                        <td>{{format-currency order.meta.total order.meta.currency}}</td>
+                        <td>{{n-a order.driver_name}}</td>
+                        <td>{{order.createdAgo}}</td>
+                        <td>
+                            <Badge @status={{order.status}} />
+                        </td>
+                        <td>
+                            <div>
                                 {{#if order.isFresh}}
                                     <Button
                                         @size="xs"
@@ -43,7 +42,7 @@
                                     />
                                 {{/if}}
                                 {{#if order.isPreparing}}
-                                    <Button @size="xs" @type="success" @icon="bells" @text={{t "storefront.component.widget.orders.mark-as-ready"}} @onClick={{fn this.markAsReady order}} />
+                                    <Button @size="xs" @type="success" @icon="bell-concierge" @text={{t "storefront.component.widget.orders.mark-as-ready"}} @onClick={{fn this.markAsReady order}} />
                                 {{/if}}
                                 {{#if order.isPickupReady}}
                                     <Button
@@ -54,87 +53,91 @@
                                         @onClick={{fn this.markAsCompleted order}}
                                     />
                                 {{/if}}
-                            </td>
-                        </tr>
-                    {{/each}}
-                </tbody>
-            </table>
-        </div>
-        <div class="flex flex-col md:hidden p-3 space-y-3">
-            {{#each this.orders as |order|}}
-                <div class="py-2 px-3 rounded-md border border-gray-400 dark:border-gray-700">
-                    <div class="flex flex-row mb-3">
-                        <div class="flex-1">
-                            <a href="javascript:;" {{on "click" (fn this.viewOrder order)}} class="font-semibold">{{order.public_id}}</a>
-                            <div>{{order.createdAt}}</div>
-                            <div>{{order.createdAgo}}</div>
-                        </div>
-                        <div class="flex-shrink-0 flex flex-col text-right">
-                            <Badge class="mb-1" @status={{order.status}} />
-                            <div>{{format-currency order.meta.total order.meta.currency}}</div>
-                        </div>
+                            </div>
+                            <div>
+                                <Button @size="xs" @type="danger" @icon="ban" @text="Cancel" @onClick={{fn this.cancelOrder order}} />
+                            </div>
+                        </td>
+                    </tr>
+                {{/each}}
+            </tbody>
+        </table>
+    </div>
+    <div class="flex flex-col md:hidden p-3 space-y-3">
+        {{#each this.orders as |order|}}
+            <div class="py-2 px-3 rounded-md border border-gray-400 dark:border-gray-700">
+                <div class="flex flex-row mb-3">
+                    <div class="flex-1">
+                        <a href="javascript:;" {{on "click" (fn this.viewOrder order)}} class="font-semibold">{{order.public_id}}</a>
+                        <div>{{order.createdAt}}</div>
+                        <div>{{order.createdAgo}}</div>
+                    </div>
+                    <div class="flex-shrink-0 flex flex-col text-right">
+                        <Badge class="mb-1" @status={{order.status}} />
+                        <div>{{format-currency order.meta.total order.meta.currency}}</div>
                     </div>
-                    <div class="flex flex-row space-x-2 flex-wrap">
-                        <Button @size="xs" @type="primary" @icon="eye" @text={{t "storefront.common.view"}} @onClick={{fn this.viewOrder order}} />
+                </div>
+                <div class="flex flex-row space-x-2 flex-wrap">
+                    <Button @size="xs" @type="primary" @icon="eye" @text={{t "storefront.common.view"}} @onClick={{fn this.viewOrder order}} />
+                    <Button
+                        @size="xs"
+                        @type="default"
+                        @icon="id-card"
+                        @text={{if order.has_driver_assigned (t "storefront.component.widget.order.change-driver") (t "storefront.component.widget.order.assign-driver")}}
+                        @onClick={{fn this.assignDriver order}}
+                    />
+                    {{#if order.isFresh}}
                         <Button
                             @size="xs"
-                            @type="default"
-                            @icon="steering-wheel"
-                            @text={{if order.has_driver_assigned (t "storefront.component.widget.order.change-driver") (t "storefront.component.widget.order.assign-driver")}}
-                            @onClick={{fn this.assignDriver order}}
+                            @type="success"
+                            @iconPrefix="fas"
+                            @icon="check"
+                            @text={{concat (t "storefront.component.widget.orders.accept-order") "!"}}
+                            @onClick={{fn this.acceptOrder order}}
                         />
-                        {{#if order.isFresh}}
-                            <Button
-                                @size="xs"
-                                @type="success"
-                                @iconPrefix="fas"
-                                @icon="check"
-                                @text={{concat (t "storefront.component.widget.orders.accept-order") "!"}}
-                                @onClick={{fn this.acceptOrder order}}
-                            />
-                        {{/if}}
-                        {{#if order.isPreparing}}
-                            <Button @size="xs" @type="success" @icon="bells" @text={{t "storefront.component.widget.orders.mark-as-mark"}} @onClick={{fn this.markAsReady order}} />
-                        {{/if}}
-                        {{#if order.isPickupReady}}
-                            <Button @size="xs" @type="success" @icon="check" @text={{t "storefront.component.widget.orders.mark-as-completed"}} @onClick={{fn this.markAsCompleted order}} />
-                        {{/if}}
+                    {{/if}}
+                    {{#if order.isPreparing}}
+                        <Button @size="xs" @type="success" @icon="bell-concierge" @text={{t "storefront.component.widget.orders.mark-as-mark"}} @onClick={{fn this.markAsReady order}} />
+                    {{/if}}
+                    {{#if order.isPickupReady}}
+                        <Button @size="xs" @type="success" @icon="check" @text={{t "storefront.component.widget.orders.mark-as-completed"}} @onClick={{fn this.markAsCompleted order}} />
+                    {{/if}}
+                </div>
+                <ContentPanel @title={{t "storefront.component.widget.orders.title"}} class="mt-2">
+                    <div class="flex flex-col py-2 border-t dark:border-gray-800">
+                        <div>{{t "storefront.component.widget.orders.customer"}}: {{n-a order.customer_name}}</div>
+                        <div>{{t "storefront.component.widget.orders.driver"}}: {{n-a order.driver_name}}</div>
                     </div>
-                    <ContentPanel @title={{t "storefront.component.widget.orders.title"}} class="mt-2">
-                        <div class="flex flex-col py-2 border-t dark:border-gray-800">
-                            <div>{{t "storefront.component.widget.orders.customer"}}: {{n-a order.customer_name}}</div>
-                            <div>{{t "storefront.component.widget.orders.driver"}}: {{n-a order.driver_name}}</div>
+                    <div class="py-2 space-y-2 border-t dark:border-gray-800">
+                        <div class="flex items-center justify-between">
+                            <span class="dark:text-gray-50">{{t "storefront.component.widget.orders.subtotal"}}</span>
+                            <span class="dark:text-gray-50">{{format-currency order.meta.subtotal order.meta.currency}}</span>
                         </div>
-                        <div class="py-2 space-y-2 border-t dark:border-gray-800">
+                        {{#unless order.meta.is_pickup}}
+                            <div class="flex items-center justify-between">
+                                <span class="dark:text-gray-50">{{t "storefront.component.widget.orders.delivery-fee"}}</span>
+                                <span class="dark:text-gray-50">{{format-currency order.meta.delivery_fee order.meta.currency}}</span>
+                            </div>
+                        {{/unless}}
+                        {{#if order.meta.tip}}
                             <div class="flex items-center justify-between">
-                                <span class="dark:text-gray-50">{{t "storefront.component.widget.orders.subtotal"}}</span>
-                                <span class="dark:text-gray-50">{{format-currency order.meta.subtotal order.meta.currency}}</span>
+                                <span class="dark:text-gray-50">{{t "storefront.component.widget.order.tip"}}</span>
+                                <span class="dark:text-gray-50">{{get-tip-amount order.meta.tip order.meta.subtotal order.meta.currency}}</span>
                             </div>
-                            {{#unless order.meta.is_pickup}}
-                                <div class="flex items-center justify-between">
-                                    <span class="dark:text-gray-50">{{t "storefront.component.widget.orders.delivery-fee"}}</span>
-                                    <span class="dark:text-gray-50">{{format-currency order.meta.delivery_fee order.meta.currency}}</span>
-                                </div>
-                            {{/unless}}
-                            {{#if order.meta.tip}}
-                                <div class="flex items-center justify-between">
-                                    <span class="dark:text-gray-50">{{t "storefront.component.widget.order.tip"}}</span>
-                                    <span class="dark:text-gray-50">{{get-tip-amount order.meta.tip order.meta.subtotal order.meta.currency}}</span>
-                                </div>
-                            {{/if}}
-                            {{#if order.meta.delivery_tip}}
-                                <div class="flex items-center justify-between">
-                                    <span class="dark:text-gray-50">{{t "storefront.component.widget.order.delivery-tip"}}</span>
-                                    <span class="dark:text-gray-50">{{get-tip-amount order.meta.delivery_tip order.meta.subtotal order.meta.currency}}</span>
-                                </div>
-                            {{/if}}
+                        {{/if}}
+                        {{#if order.meta.delivery_tip}}
                             <div class="flex items-center justify-between">
-                                <span class="dark:text-gray-50 font-bold">{{t "storefront.component.widget.order.tip"}}</span>
-                                <span class="dark:text-gray-50 font-bold">{{format-currency order.meta.total order.meta.currency}}</span>
+                                <span class="dark:text-gray-50">{{t "storefront.component.widget.order.delivery-tip"}}</span>
+                                <span class="dark:text-gray-50">{{get-tip-amount order.meta.delivery_tip order.meta.subtotal order.meta.currency}}</span>
                             </div>
+                        {{/if}}
+                        <div class="flex items-center justify-between">
+                            <span class="dark:text-gray-50 font-bold">{{t "storefront.component.widget.order.tip"}}</span>
+                            <span class="dark:text-gray-50 font-bold">{{format-currency order.meta.total order.meta.currency}}</span>
                         </div>
-                    </ContentPanel>
-                </div>
-            {{/each}}
-        </div>
-    </div></Layout::Section::Body>
+                    </div>
+                </ContentPanel>
+            </div>
+        {{/each}}
+    </div>
+</Layout::Section::Body>

package/addon/components/customer-panel/orders.js

@@ -1,9 +1,10 @@
 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 { action, get } from '@ember/object';
+import { debug } from '@ember/debug';
 import { task } from 'ember-concurrency-decorators';
+
 export default class CustomerPanelOrdersComponent extends Component {
     @service store;
     @service storefront;
@@ -12,67 +13,73 @@ export default class CustomerPanelOrdersComponent extends Component {
     @service appCache;
     @service modalsManager;
     @service contextPanel;
-    @tracked isLoading = true;
+    @service orderActions;
+    @tracked loaded = false;
     @tracked orders = [];
     @tracked customer;
-    @controller('orders.index.view') orderDetailsController;
-
-    @computed('args.title') get title() {
-        return this.args.title ?? this.intl.t('storefront.component.widget.orders.widget-title');
-    }
 
-    constructor() {
+    constructor(owner, { customer }) {
         super(...arguments);
-        this.customer = this.args.customer;
-        this.reloadOrders.perform();
+        this.customer = customer;
+        this.loadOrders.perform();
     }
 
-    @task *reloadOrders(params = {}) {
-        this.orders = yield this.fetchOrders(params);
+    @action search(event) {
+        this.loadOrders.perform({ query: event.target.value ?? '' });
     }
 
-    @action fetchOrders(params = {}) {
-        this.isLoading = true;
+    @task *loadOrders(params = {}) {
+        const storefront = get(this.storefront, 'activeStore.public_id');
+        const queryParams = {
+            storefront,
+            limit: 14,
+            sort: '-created_at',
+            customer_uuid: this.customer?.id,
+            ...params,
+        };
 
-        return new Promise((resolve) => {
-            const storefront = get(this.storefront, 'activeStore.public_id');
+        try {
+            const orders = yield this.fetch.get('orders', queryParams, { namespace: 'storefront/int/v1', normalizeToEmberData: true });
+            this.loaded = true;
+            this.orders = orders;
 
-            if (!storefront || !this.customer?.id) {
-                this.isLoading = false;
-                return resolve([]);
-            }
+            return orders;
+        } catch (err) {
+            debug('Error loading orders for widget:', err);
+        }
+    }
 
-            const queryParams = {
-                storefront,
-                limit: 25,
-                sort: '-created_at',
-                customer_uuid: this.customer?.id,
-                ...params,
-            };
+    @action async viewOrder(order) {
+        this.contextPanel.focus(order, 'viewing');
+    }
 
-            this.fetch
-                .get('orders', queryParams, {
-                    namespace: 'storefront/int/v1',
-                    normalizeToEmberData: true,
-                })
-                .then((orders) => {
-                    this.isLoading = false;
+    @action async acceptOrder(order) {
+        await this.orderActions.acceptOrder(order, () => {
+            this.loadOrders.perform();
+        });
+    }
 
-                    resolve(orders);
-                })
-                .catch(() => {
-                    this.isLoading = false;
+    @action markAsReady(order) {
+        this.orderActions.markAsReady(order, () => {
+            this.loadOrders.perform();
+        });
+    }
 
-                    resolve(this.orders);
-                });
+    @action markAsCompleted(order) {
+        this.orderActions.markAsCompleted(order, () => {
+            this.loadOrders.perform();
         });
     }
 
-    @action search(event) {
-        this.reloadOrders.perform({ query: event.target.value ?? '' });
+    @action assignDriver(order) {
+        this.orderActions.assignDriver(order, () => {
+            this.loadOrders.perform();
+        });
     }
 
-    @action async viewOrder(order) {
-        this.contextPanel.focus(order, 'viewing');
+    @action cancelOrder(order) {
+        this.orderActions.cancelOrder(order, () => {
+            this.loadOrders.perform();
+        });
     }
 }