@fleetbase/storefront-engine 0.3.31 → 0.4.1

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

@@ -41,7 +41,7 @@
                                         @onClick={{fn this.acceptOrder order}}
                                     />
                                 {{/if}}
-                                {{#if order.isPreparing}}
+                                {{#if (eq order.status "accepted")}}
                                     <Button
                                         @size="xs"
                                         @type="success"
@@ -102,7 +102,7 @@
                             @onClick={{fn this.acceptOrder order}}
                         />
                     {{/if}}
-                    {{#if order.isPreparing}}
+                    {{#if (eq order.status "accepted")}}
                         <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}}

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

@@ -3,7 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action, get } from '@ember/object';
 import { debug } from '@ember/debug';
-import { task } from 'ember-concurrency-decorators';
+import { task } from 'ember-concurrency';
 
 export default class CustomerPanelOrdersComponent extends Component {
     @service store;

package/addon/components/modals/create-gateway.hbs

@@ -2,7 +2,14 @@
     <div class="modal-body-container">
         <div class="mb-4 w-full">
             <InputGroup @name={{t "storefront.component.modals.create-getaway.getaway"}} @helpText={{t "storefront.component.modals.create-getaway.getaway-text"}}>
-                <Select class="w-full" @placeholder="Select gateway type" @options={{@options.schemaOptions}} @onSelect={{@options.selectSchema}} @humanize={{true}} />
+                <Select
+                    @value={{@options.gateway.code}}
+                    class="w-full"
+                    @placeholder="Select gateway type"
+                    @options={{@options.schemaOptions}}
+                    @onSelect={{@options.selectSchema}}
+                    @humanize={{true}}
+                />
             </InputGroup>
         </div>
 
@@ -30,17 +37,31 @@
             </div>
             <div class="p-2 rounded-md my-2 border border-gray-200 dark:border-gray-800">
                 <h4 class="mb-2 font-semibold text-sm dark:text-white">Config</h4>
-                {{#each-in @options.schema as |key value|}}
-                    {{#if (is-bool-value value)}}
-                        <div class="input-group">
-                            <Checkbox @value={{value}} @label={{humanize key}} @onToggle={{fn @options.setConfigKey key}} />
-                        </div>
-                    {{else}}
-                        <InputGroup @name={{humanize key}}>
-                            <Input class="form-input w-full" placeholder={{humanize key}} @value={{value}} {{on "blur" (fn @options.setConfigKey key)}} />
-                        </InputGroup>
-                    {{/if}}
-                {{/each-in}}
+                {{#if @options.gateway.isNew}}
+                    {{#each-in @options.schema as |key value|}}
+                        {{#if (is-bool-value value)}}
+                            <div class="input-group">
+                                <Checkbox @value={{value}} @label={{humanize key}} @onToggle={{fn @options.setConfigKey key}} />
+                            </div>
+                        {{else}}
+                            <InputGroup @name={{humanize key}}>
+                                <Input class="form-input w-full" placeholder={{humanize key}} @value={{value}} {{on "blur" (fn @options.setConfigKey key)}} />
+                            </InputGroup>
+                        {{/if}}
+                    {{/each-in}}
+                {{else}}
+                    {{#each-in @options.gateway.config as |key value|}}
+                        {{#if (is-bool-value value)}}
+                            <div class="input-group">
+                                <Checkbox @value={{value}} @label={{humanize key}} @onToggle={{fn @options.setConfigKey key}} />
+                            </div>
+                        {{else}}
+                            <InputGroup @name={{humanize key}}>
+                                <Input class="form-input w-full" placeholder={{humanize key}} @value={{value}} {{on "blur" (fn @options.setConfigKey key)}} />
+                            </InputGroup>
+                        {{/if}}
+                    {{/each-in}}
+                {{/if}}
             </div>
         {{/if}}
     </div>

package/addon/components/modals/share-network.hbs

@@ -29,7 +29,7 @@
             </div>
         </div>
 
-        <div class="rounded-md border dark:border-fgray-800 dark:bg-gray-800 p-4">
+        <div class="rounded-md border dark:border-gray-800 dark:bg-gray-800 p-4">
             <h4 class="dark:text-gray-50 mb-4 font-semibold">{{t "storefront.component.modals.share-network.get-link"}}</h4>
             <div class="input-group mb-0i">
                 <Toggle

package/addon/components/network-category-picker.hbs

@@ -8,11 +8,12 @@
     @buttonClass={{concat "w-full truncate w-48" " " @buttonClass}}
     @buttonWrapperClass={{concat "w-full" " " @buttonWrapperClass}}
     @wrapperClass={{@wrapperClass}}
+    {{did-update this.updateArgs @category}}
     as |dd|
 >
     <div role="menu" class="store-selector-dropdown-menu next-dd-menu py-1">
         <div role="group" class="px-1 overflow-y-scroll max-h-72">
-            {{#if this.isLoading}}
+            {{#if this.loadCategories.isRunning}}
                 <div class="text-sm flex flex-row items-center px-3 py-0.5 border-0 my-1">
                     <Spinner class="mr-2i" />
                     <span class="dark:text-gray-100 test-sm">{{t "storefront.common.loading"}}</span>

package/addon/components/network-category-picker.js

@@ -2,6 +2,8 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { debug } from '@ember/debug';
+import { task } from 'ember-concurrency';
 import isModel from '@fleetbase/ember-core/utils/is-model';
 
 export default class NetworkCategoryPickerComponent extends Component {
@@ -11,20 +13,27 @@ export default class NetworkCategoryPickerComponent extends Component {
     @tracked categories = [];
     @tracked selectedCategory;
     @tracked network;
-    @tracked isLoading = false;
-    @tracked buttonTitle = null;
+    @tracked buttonTitle = 'Select Category';
 
-    constructor() {
+    context = {
+        loadCategories: this.loadCategories,
+        loadParentCategories: this.loadParentCategories,
+        onSelectCategory: this.onSelectCategory,
+        onCreateNewCategory: this.onCreateNewCategory,
+    };
+
+    constructor(owner, { network, category, onReady }) {
         super(...arguments);
-        this.network = this.args.network;
-        this.category = this.args.category;
-        this.setButtonTitle(this.category);
-        this.loadCategories(this.category);
+        this.network = network;
+        this.setCategory(category);
+
+        if (typeof onReady === 'function') {
+            onReady(this.context);
+        }
     }
 
     setButtonTitle(selectedCategory) {
         let buttonTitle = this.args.buttonTitle ?? 'Select Category';
-
         if (selectedCategory) {
             buttonTitle = selectedCategory.name;
         }
@@ -32,7 +41,7 @@ export default class NetworkCategoryPickerComponent extends Component {
         this.buttonTitle = buttonTitle;
     }
 
-    @action loadCategories(parentCategory) {
+    @task *loadCategories(parentCategory) {
         const queryParams = {
             owner_uuid: this.network.id,
             parents_only: parentCategory ? false : true,
@@ -45,26 +54,20 @@ export default class NetworkCategoryPickerComponent extends Component {
             queryParams.with_parent = true;
         }
 
-        this.isLoading = true;
-        this.store
-            .query('category', queryParams)
-            .then((categories) => {
-                this.categories = categories.toArray();
-            })
-            .finally(() => {
-                this.isLoading = false;
-            });
+        try {
+            const categories = yield this.store.query('category', queryParams);
+            this.categories = categories.toArray();
+        } catch (error) {
+            debug(`Unable to load categories : ${error.message}`);
+        }
     }
 
     @action onSelectCategory(category) {
-        this.selectedCategory = category;
-        this.setButtonTitle(category);
+        this.setCategory(category);
 
         if (typeof this.args.onSelect === 'function') {
             this.args.onSelect(category);
         }
-
-        this.loadCategories(category);
     }
 
     @action onCreateNewCategory() {
@@ -80,4 +83,31 @@ export default class NetworkCategoryPickerComponent extends Component {
 
         this.onSelectCategory(null);
     }
+
+    @action updateArgs(el, [category]) {
+        this.setCategory(category);
+    }
+
+    async setCategoryById(categoryId) {
+        const category = this.store.peekRecord('category', categoryId);
+        if (category) {
+            this.setCategory(category);
+        } else {
+            // load from server if possible
+            const categoryRecord = await this.store.findRecord('category', categoryId);
+            if (categoryRecord) {
+                this.onSelectCategory(categoryRecord);
+            }
+        }
+    }
+
+    setCategory(category) {
+        if (typeof category === 'string') {
+            return this.setCategoryById(category);
+        }
+
+        this.selectedCategory = category;
+        this.setButtonTitle(category);
+        this.loadCategories.perform(category);
+    }
 }

package/addon/components/order-panel.hbs

@@ -18,7 +18,7 @@
                     @onClick={{fn this.acceptOrder this.order}}
                 />
             {{/if}}
-            {{#if this.order.isPreparing}}
+            {{#if (eq this.order.status "accepted")}}
                 <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}}

package/addon/components/widget/customers.hbs

@@ -30,6 +30,9 @@
         @pad={{false}}
         @wrapperClass={{@wrapperClass}}
     >
+        <div class="flex justify-end px-4 py-2 space-x-2">
+            <Button @icon="refresh" @size="xs" @onClick={{perform this.loadCustomers}} />
+        </div>
         {{#if (media "isMobile")}}
             <div class="flex flex-col p-3 space-y-3">
                 {{#each this.customers as |customer|}}
@@ -63,11 +66,11 @@
                     <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><a href="javascript:;" {{on "click" (fn this.viewCustomer customer)}}>{{customer.public_id}}</a></td>
                                 <td>{{n-a customer.name}}</td>
                                 <td>{{n-a customer.phone}}</td>
                                 <td>{{n-a customer.email}}</td>
-                                <td></td>
+                                <td>{{n-a customer.orders 0}}</td>
                                 <td></td>
                             </tr>
                         {{/each}}

package/addon/components/widget/customers.js

@@ -7,6 +7,7 @@ import { task } from 'ember-concurrency';
 
 export default class WidgetCustomersComponent extends Component {
     @service store;
+    @service fetch;
     @service storefront;
     @service intl;
     @service contextPanel;
@@ -34,17 +35,24 @@ export default class WidgetCustomersComponent extends Component {
         const storefront = get(this.storefront, 'activeStore.public_id');
 
         try {
-            const customers = yield this.store.query('customer', {
-                storefront,
-                limit: 14,
-                ...params,
-            });
+            const { customers } = yield this.fetch.get(
+                'customers',
+                {
+                    storefront,
+                    limit: 14,
+                    ...params,
+                },
+                {
+                    namespace: 'storefront/int/v1',
+                }
+            );
+
             this.loaded = true;
             this.customers = customers;
 
             return customers;
         } catch (err) {
-            debug('Error loading customers for widget:', err);
+            debug('Error loading customers for widget:', err.message);
         }
     }
 }

package/addon/components/widget/orders.hbs

@@ -30,7 +30,8 @@
         @pad={{false}}
         @wrapperClass={{@wrapperClass}}
     >
-        <div class="flex justify-end px-4 py-2">
+        <div class="flex justify-end px-4 py-2 space-x-2">
+            <Button @icon="refresh" @size="xs" @onClick={{perform this.loadOrders}} />
             <Toggle @label="Active Orders Filter" @isToggled={{this.activeFilter}} @onToggle={{this.toggleActiveFilter}} />
         </div>
         {{#if (media "isMobile")}}
@@ -86,14 +87,25 @@
                                     @onClick={{fn this.acceptOrder order}}
                                 />
                             {{/if}}
-                            {{#if order.isPreparing}}
+                            {{#if (eq order.status "started")}}
                                 <Button
                                     @wrapperClass="w-full"
                                     class="btn-block w-full"
                                     @size="xs"
                                     @type="success"
                                     @icon="bell-concierge"
-                                    @text={{t "storefront.component.widget.orders.mark-as-ready"}}
+                                    @text={{t "storefront.component.widget.orders.mark-as-preparing"}}
+                                    @onClick={{fn this.markAsPreparing order}}
+                                />
+                            {{/if}}
+                            {{#if (eq order.status "accepted")}}
+                                <Button
+                                    @wrapperClass="w-full"
+                                    class="btn-block w-full"
+                                    @size="xs"
+                                    @type={{if order.meta.is_pickup "success" "magic"}}
+                                    @icon={{if order.meta.is_pickup "bell-concierge" "paper-plane"}}
+                                    @text={{if order.meta.is_pickup (t "storefront.component.widget.orders.mark-as-ready") (t "storefront.component.widget.orders.dispatch")}}
                                     @onClick={{fn this.markAsReady order}}
                                 />
                             {{/if}}
@@ -226,11 +238,11 @@
                         <tr class="h-12 text-left py-1">
                             <th style={{"width: 15%"}}>{{t "storefront.component.widget.orders.id-column"}}</th>
                             <th style={{"width: 10%"}}>{{t "storefront.common.amount"}}</th>
-                            <th style={{"width: 15%"}}>{{t "storefront.common.customer"}}</th>
-                            <th style={{"width: 15%"}}>{{t "storefront.common.driver"}}</th>
+                            <th style={{"width: 14%"}}>{{t "storefront.common.customer"}}</th>
+                            <th style={{"width: 14%"}}>{{t "storefront.common.driver"}}</th>
                             <th style={{"width: 10%"}}>{{t "storefront.common.created"}}</th>
                             <th style={{"width: 15%"}}>{{t "storefront.common.status"}}</th>
-                            <th style={{"width: 22%"}}></th>
+                            <th style={{"width: 24%"}}></th>
                         </tr>
                     </thead>
                     <tbody>
@@ -264,12 +276,21 @@
                                                 @onClick={{fn this.acceptOrder order}}
                                             />
                                         {{/if}}
-                                        {{#if order.isPreparing}}
+                                        {{#if (eq order.status "started")}}
                                             <Button
                                                 @size="xs"
                                                 @type="success"
-                                                @icon="bell-concierge"
-                                                @text={{t "storefront.component.widget.orders.mark-as-ready"}}
+                                                @icon="hourglass-start"
+                                                @text={{t "storefront.component.widget.orders.mark-as-preparing"}}
+                                                @onClick={{fn this.markAsPreparing order}}
+                                            />
+                                        {{/if}}
+                                        {{#if (eq order.status "accepted")}}
+                                            <Button
+                                                @size="xs"
+                                                @type={{if order.meta.is_pickup "success" "magic"}}
+                                                @icon={{if order.meta.is_pickup "bell-concierge" "paper-plane"}}
+                                                @text={{if order.meta.is_pickup (t "storefront.component.widget.orders.mark-as-ready") (t "storefront.component.widget.orders.dispatch")}}
                                                 @onClick={{fn this.markAsReady order}}
                                             />
                                         {{/if}}

package/addon/components/widget/orders.js

@@ -66,7 +66,7 @@ export default class WidgetOrdersComponent extends Component {
 
             return orders;
         } catch (err) {
-            debug('Error loading orders for widget:', err);
+            debug('Error loading orders for widget:', err.message);
         }
     }
 
@@ -113,6 +113,12 @@ export default class WidgetOrdersComponent extends Component {
         });
     }
 
+    @action markAsPreparing(order) {
+        this.orderActions.markAsPreparing(order, () => {
+            this.loadOrders.perform();
+        });
+    }
+
     @action markAsCompleted(order) {
         this.orderActions.markAsCompleted(order, () => {
             this.loadOrders.perform();

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

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
-import { task } from 'ember-concurrency-decorators';
+import { task } from 'ember-concurrency';
 
 export default class WidgetStorefrontKeyMetricsComponent extends Component {
     /**
@@ -39,8 +39,8 @@ export default class WidgetStorefrontKeyMetricsComponent extends Component {
      *
      * @memberof WidgetKeyMetricsComponent
      */
-    @task *getDashboardMetrics() {
-        this.metrics = yield this.fetch.get('metrics', {}, { namespace: 'storefront/int/v1' }).then((response) => {
+    @task *getDashboardMetrics(params = {}) {
+        this.metrics = yield this.fetch.get('metrics', params, { namespace: 'storefront/int/v1' }).then((response) => {
             return this.createMetricsMapFromResponse(response);
         });
     }

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

@@ -2,7 +2,7 @@
     <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"}}
+                Metrics
             </h3>
             {{#if this.loadMetrics.isRunning}}
                 <div>
@@ -10,6 +10,16 @@
                 </div>
             {{/if}}
         </div>
+        <div class="storefront-datepicker">
+            <DatePicker
+                @value={{concat this.start "," this.end}}
+                @range={{true}}
+                @buttons={{this.datePickerButtons}}
+                @onSelect={{this.selectDates}}
+                placeholder="Select date range"
+                class="min-w-250px"
+            />
+        </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">

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

@@ -1,10 +1,11 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
-import { get } from '@ember/object';
+import { get, action } from '@ember/object';
 import { debug } from '@ember/debug';
 import { startOfMonth, endOfMonth, format } from 'date-fns';
 import { task } from 'ember-concurrency';
+import { getDateRangeByLabel } from '../../utils/commerce-date-ranges';
 
 export default class WidgetStorefrontMetricsComponent extends Component {
     @service fetch;
@@ -18,6 +19,98 @@ export default class WidgetStorefrontMetricsComponent extends Component {
         stores_count: 0,
         earnings_sum: 0,
     };
+    @tracked datePickerButtons = [
+        {
+            content: 'Yesterday',
+            className: 'quick-select-btn',
+            onClick: (datepicker) => {
+                const thisMonthRange = getDateRangeByLabel('Yesterday');
+                if (thisMonthRange) {
+                    datepicker.selectDate(thisMonthRange);
+                }
+            },
+        },
+        {
+            content: 'Last 7 Days',
+            className: 'quick-select-btn',
+            onClick: (datepicker) => {
+                const thisMonthRange = getDateRangeByLabel('Last 7 Days');
+                if (thisMonthRange) {
+                    datepicker.selectDate(thisMonthRange);
+                }
+            },
+        },
+        {
+            content: 'Last Week',
+            className: 'quick-select-btn',
+            onClick: (datepicker) => {
+                const thisMonthRange = getDateRangeByLabel('Last Week');
+                if (thisMonthRange) {
+                    datepicker.selectDate(thisMonthRange);
+                }
+            },
+        },
+        {
+            content: 'This Month',
+            className: 'quick-select-btn',
+            onClick: (datepicker) => {
+                const thisMonthRange = getDateRangeByLabel('This Month');
+                if (thisMonthRange) {
+                    datepicker.selectDate(thisMonthRange);
+                }
+            },
+        },
+        {
+            content: 'Last Month',
+            className: 'quick-select-btn',
+            onClick: (datepicker) => {
+                const thisMonthRange = getDateRangeByLabel('Last Month');
+                if (thisMonthRange) {
+                    datepicker.selectDate(thisMonthRange);
+                }
+            },
+        },
+        {
+            content: 'This Quarter',
+            className: 'quick-select-btn',
+            onClick: (datepicker) => {
+                const thisMonthRange = getDateRangeByLabel('This Quarter');
+                if (thisMonthRange) {
+                    datepicker.selectDate(thisMonthRange);
+                }
+            },
+        },
+        {
+            content: 'Last Quarter',
+            className: 'quick-select-btn',
+            onClick: (datepicker) => {
+                const thisMonthRange = getDateRangeByLabel('Last Quarter');
+                if (thisMonthRange) {
+                    datepicker.selectDate(thisMonthRange);
+                }
+            },
+        },
+        {
+            content: 'This Year',
+            className: 'quick-select-btn',
+            onClick: (datepicker) => {
+                const thisMonthRange = getDateRangeByLabel('This Year');
+                if (thisMonthRange) {
+                    datepicker.selectDate(thisMonthRange);
+                }
+            },
+        },
+        {
+            content: 'Last Year',
+            className: 'quick-select-btn',
+            onClick: (datepicker) => {
+                const thisMonthRange = getDateRangeByLabel('Last Year');
+                if (thisMonthRange) {
+                    datepicker.selectDate(thisMonthRange);
+                }
+            },
+        },
+    ];
 
     constructor(owner, { title = 'This Month' }) {
         super(...arguments);
@@ -42,4 +135,13 @@ export default class WidgetStorefrontMetricsComponent extends Component {
             debug('Error loading storefront metrics:', err);
         }
     }
+
+    @action selectDates({ formattedDate }) {
+        const [start, end] = formattedDate;
+        this.start = start;
+        this.end = end;
+        if (start && end) {
+            this.loadMetrics.perform(start, end);
+        }
+    }
 }

package/addon/controllers/customers/index.js

@@ -2,9 +2,9 @@ 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 { timeout, task } from 'ember-concurrency';
 import { action } from '@ember/object';
+
 export default class CustomersIndexController extends BaseController {
     /**
      * Inject the `notifications` service

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

@@ -70,6 +70,8 @@ export default class NetworksIndexNetworkIndexController extends Controller {
      */
     @tracked isLoading = false;
 
+    @tracked orderConfigs = [];
+
     /**
      * Alias for model.gateways, representing the gateways associated with the network.
      *

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

@@ -2,8 +2,7 @@ import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { isBlank } from '@ember/utils';
-import { timeout } from 'ember-concurrency';
-import { task } from 'ember-concurrency-decorators';
+import { timeout, task } from 'ember-concurrency';
 import { action } from '@ember/object';
 
 export default class NetworksIndexNetworkOrdersController extends Controller {