@fleetbase/storefront-engine 0.4.0 → 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/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/network-category-picker.js

@@ -58,7 +58,7 @@ export default class NetworkCategoryPickerComponent extends Component {
             const categories = yield this.store.query('category', queryParams);
             this.categories = categories.toArray();
         } catch (error) {
-            debug(`Unable to load categories : ${error.message}`)
+            debug(`Unable to load categories : ${error.message}`);
         }
     }
 

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

@@ -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/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/stores.js

@@ -3,7 +3,6 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action, set } from '@ember/object';
 import { isBlank } from '@ember/utils';
-import { debug } from '@ember/debug';
 import { timeout, task } from 'ember-concurrency';
 import createShareableLink from '../../../../utils/create-shareable-link';
 import isEmail from '@fleetbase/ember-core/utils/is-email';

package/addon/controllers/settings/gateways.js

@@ -43,10 +43,15 @@ export default class SettingsGatewaysController extends Controller {
         const schemas = getGatewaySchemas();
         const schemaOptions = Object.keys(schemas);
 
+        let schema = null;
+        if (!gateway.get('isNew')) {
+            schema = schemas[gateway.code];
+        }
+
         this.modalsManager.show('modals/create-gateway', {
             title: this.intl.t('storefront.settings.gateways.edit-payment-gateway'),
             acceptButtonText: this.intl.t('storefront.settings.gateways.save-changes'),
-            schema: null,
+            schema,
             schemas,
             schemaOptions,
             gateway,

package/addon/controllers/settings/index.js

@@ -17,6 +17,7 @@ export default class SettingsIndexController extends Controller {
     @tracked isLoading = false;
     @tracked uploadQueue = [];
     @tracked uploadedFiles = [];
+    @tracked orderConfigs = [];
 
     @action addTag(tag) {
         if (!isArray(this.model.tags)) {

package/addon/controllers/settings/notifications.js

@@ -1,5 +1,4 @@
 import Controller from '@ember/controller';
-import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
 import { action, set } from '@ember/object';
@@ -14,7 +13,6 @@ export default class SettingsNotificationsController extends Controller {
     @service crud;
     @service storefront;
     @alias('storefront.activeStore') activeStore;
-    @tracked channels = [];
 
     @action createChannel() {
         const channel = this.store.createRecord('notification-channel', {
@@ -71,9 +69,9 @@ export default class SettingsNotificationsController extends Controller {
 
                 return channel
                     .save()
-                    .then((channel) => {
+                    .then(() => {
                         this.notifications.success(this.intl.t('storefront.settings.notification.new-notification-channel-added'));
-                        this.channels.pushObject(channel);
+                        this.hostRouter.refresh();
                     })
                     .catch((error) => {
                         // gateway.rollbackAttributes();
@@ -94,7 +92,7 @@ export default class SettingsNotificationsController extends Controller {
 
                 return channel.destroyRecord().then(() => {
                     // justincase
-                    this.channels.removeObject(channel);
+                    this.hostRouter.refresh();
                     modal.stopLoading();
                 });
             },

package/addon/models/network.js

@@ -10,6 +10,7 @@ export default class NetworkModel extends Model {
     @attr('string') company_uuid;
     @attr('string') logo_uuid;
     @attr('string') backdrop_uuid;
+    @attr('string') order_config_uuid;
 
     /** @relationships */
     @hasMany('store') stores;

package/addon/models/store.js

@@ -11,6 +11,7 @@ export default class StoreModel extends Model {
     @attr('string') company_uuid;
     @attr('string') logo_uuid;
     @attr('string') backdrop_uuid;
+    @attr('string') order_config_uuid;
 
     /** @relationships */
     @hasMany('notification-channel') notification_channels;

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

@@ -7,4 +7,9 @@ export default class NetworksIndexNetworkIndexRoute extends Route {
     model() {
         return this.modelFor('networks.index.network');
     }
+
+    async setupController(controller) {
+        super.setupController(...arguments);
+        controller.orderConfigs = await this.store.findAll('order-config');
+    }
 }

package/addon/routes/settings/index.js

@@ -24,4 +24,9 @@ export default class SettingsIndexRoute extends Route {
     afterModel(model) {
         model?.loadFiles();
     }
+
+    async setupController(controller) {
+        super.setupController(...arguments);
+        controller.orderConfigs = await this.store.findAll('order-config');
+    }
 }

package/addon/services/order-actions.js

@@ -215,6 +215,37 @@ export default class OrderActionsService extends Service {
         });
     }
 
+    markAsPreparing(order, callback) {
+        this.modalsManager.confirm({
+            title: this.intl.t('storefront.component.widget.orders.mark-as-preparing-modal-title'),
+            body: this.intl.t('storefront.component.widget.orders.mark-as-preparing-modal-body'),
+            acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-preparing-accept-button-text'),
+            acceptButtonIcon: 'check',
+            acceptButtonScheme: 'success',
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await this.fetch.post('orders/preparing', { order: order.id }, { namespace: 'storefront/int/v1' });
+                    modal.done();
+                    if (typeof callback === 'function') {
+                        callback(order);
+                    }
+                } catch (err) {
+                    this.notifications.serverError(err);
+                } finally {
+                    modal.stopLoading();
+                }
+            },
+            decline: async (modal) => {
+                if (typeof callback === 'function') {
+                    callback(order);
+                }
+                modal.done();
+            },
+        });
+    }
+
     markAsCompleted(order, callback) {
         this.modalsManager.confirm({
             title: this.intl.t('storefront.component.widget.orders.mark-as-completed-modal-title'),

package/addon/styles/storefront-engine.css

@@ -40,12 +40,14 @@
     max-width: 100%;
 }
 
+.status-badge.accepted-status-badge > span,
 .status-badge.pickup-ready-status-badge > span {
     background-color: #166534;
     border: 1px solid #15803d;
     color: #dcfce7;
 }
 
+.status-badge.accepted-status-badge > span svg,
 .status-badge.pickup-ready-status-badge > span svg {
     color: #86efac;
 }
@@ -60,12 +62,16 @@
     color: #fca5a5;
 }
 
+.status-badge.driver-picked-up-status-badge > span,
+.status-badge.driver-enroute-to-store-status-badge > span,
 .status-badge.draft-status-badge > span {
     background-color: #a16207;
     border: 1px solid #a16207;
     color: #fef9c3;
 }
 
+.status-badge.driver-picked-up-status-badge > span svg,
+.status-badge.driver-enroute-to-store-status-badge > span svg,
 .status-badge.draft-status-badge > span svg {
     color: #fef9c3;
 }
@@ -84,3 +90,19 @@ td.network-store-name-column > div > svg {
     height: 0.5rem;
     width: 0.5rem;
 }
+
+.storefront-datepicker .air-datepicker-buttons {
+    animation: slideIn 0.3s ease-out;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 0.5rem;
+    max-height: 235px;
+    overflow-y: auto;
+}
+
+.storefront-datepicker .air-datepicker-buttons .quick-select-btn {
+    display: flex;
+    align-items: center;
+    width: 48%;
+}