@fleetbase/storefront-engine 0.0.1

package/addon/components/store-selector.js

@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class StoreSelectorComponent extends Component {
+    @action onSwitchStore(store) {
+        const { onSwitchStore } = this.args;
+
+        if (typeof onSwitchStore === 'function') {
+            onSwitchStore(store);
+        }
+    }
+
+    @action onCreateStore() {
+        const { onCreateStore } = this.args;
+
+        if (typeof onCreateStore === 'function') {
+            onCreateStore();
+        }
+    }
+}

package/addon/components/widget/customers.hbs

@@ -0,0 +1,44 @@
+<ContentPanel @title={{this.title}} @titleStatusRight={{this.customers.length}} @titleStatuRightClass="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" />
+        </div>
+    {{/if}}
+    <div class="hidden md:flex table-wrapper table-fluid">
+        <table>
+            <thead>
+                <tr class="h-12 text-left py-1">
+                    <th>ID</th>
+                    <th>Phone</th>
+                    <th>Email</th>
+                    <th>Orders</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+                {{#each this.customers as |customer|}}
+                    <tr class="h-12">
+                        <td>{{customer.customerId}}</td>
+                        <td>{{n-a customer.phone}}</td>
+                        <td>{{n-a customer.email}}</td>
+                        <td></td>
+                        <td></td>
+                    </tr>
+                {{/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">Phone:{{n-a customer.phone}}</div>
+                    <div class="text-xs">Email: {{n-a customer.email}}</div>
+                </div>
+            </div>
+        {{/each}}
+    </div>
+</ContentPanel>

package/addon/components/widget/customers.js

@@ -0,0 +1,53 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, computed } from '@ember/object';
+
+export default class WidgetCustomersComponent extends Component {
+    @service store;
+    @service storefront;
+    @tracked isLoading = true;
+    @tracked customers = [];
+
+    @computed('args.title') get title() {
+        return this.args.title || 'Recent Customers';
+    }
+
+    @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?.activeStore?.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);
+                });
+        });
+    }
+}

package/addon/components/widget/orders.hbs

@@ -0,0 +1,111 @@
+<ContentPanel @title={{this.title}} @titleStatusRight={{this.orders.length}} @titleStatuRightClass="info-status-badge" @hideStatusDot={{true}} @open={{this.orders.length}} @pad={{false}} @wrapperClass={{@wrapperClass}} @onInsert={{this.setupWidget}}>
+    {{#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>ID</th>
+                    <th>Amount</th>
+                    <th>Customer</th>
+                    <th>Driver</th>
+                    <th>Created</th>
+                    <th>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.customer_name}}</td>
+                        <td>{{n-a order.driver_name}}</td>
+                        <td>{{order.createdAgo}}</td>
+                        <td>
+                            <Badge @status={{order.status}} />
+                        </td>
+                        <td>
+                            {{#if order.isFresh}}
+                                <Button @size="xs" @type="success" @iconPrefix="fas" @icon="check" @text="Accept Order!" @onClick={{fn this.acceptOrder order}} />
+                            {{/if}}
+                            {{#if order.isPreparing}}
+                                <Button @size="xs" @type="success" @icon="bells" @text="Mark as Ready!" @onClick={{fn this.markAsReady order}} />
+                            {{/if}}
+                            {{#if order.isPickupReady}}
+                                <Button @size="xs" @type="success" @icon="check" @text="Mark as Completed" @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 class="flex flex-row space-x-2 flex-wrap">
+                    <Button @size="xs" @type="primary" @icon="eye" @text="View" @onClick={{fn this.viewOrder order}} />
+                    <Button @size="xs" @type="default" @icon="steering-wheel" @text={{if order.has_driver_assigned "Change Driver" "Assign Driver"}} @onClick={{fn this.assignDriver order}} />
+                    {{#if order.isFresh}}
+                        <Button @size="xs" @type="success" @iconPrefix="fas" @icon="check" @text="Accept Order!" @onClick={{fn this.acceptOrder order}} />
+                    {{/if}}
+                    {{#if order.isPreparing}}
+                        <Button @size="xs" @type="success" @icon="bells" @text="Mark as Ready!" @onClick={{fn this.markAsReady order}} />
+                    {{/if}}
+                    {{#if order.isPickupReady}}
+                        <Button @size="xs" @type="success" @icon="check" @text="Mark as Completed" @onClick={{fn this.markAsCompleted order}} />
+                    {{/if}}
+                </div>
+                <ContentPanel @title="More Details" class="mt-2">
+                    <div class="flex flex-col py-2 border-t dark:border-gray-800">
+                        <div>Customer: {{n-a order.customer_name}}</div>
+                        <div>Driver: {{n-a order.driver_name}}</div>
+                    </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">Subtotal</span>
+                            <span class="dark:text-gray-50">{{format-currency 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">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">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">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">Total</span>
+                            <span class="dark:text-gray-50 font-bold">{{format-currency order.meta.total order.meta.currency}}</span>
+                        </div>
+                    </div>
+                </ContentPanel>
+            </div>
+        {{/each}}
+    </div>
+</ContentPanel>

package/addon/components/widget/orders.js

@@ -0,0 +1,248 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, computed } from '@ember/object';
+import { later } from '@ember/runloop';
+
+export default class WidgetOrdersComponent extends Component {
+    @service store;
+    @service storefront;
+    @service fetch;
+    @service appCache;
+    @service modalsManager;
+    @tracked isLoading = true;
+    @tracked orders = [];
+
+    @computed('args.title') get title() {
+        return this.args.title ?? 'Recent Orders';
+    }
+
+    @action async setupWidget() {
+        later(
+            this,
+            () => {
+                this.reloadOrders();
+            },
+            100
+        );
+
+        this.storefront.on('order.broadcasted', this.reloadOrders);
+        this.storefront.on('storefront.changed', this.reloadOrders);
+    }
+
+    @action async reloadOrders(params = {}) {
+        this.orders = await this.fetchOrders(params);
+    }
+
+    @action fetchOrders(params = {}) {
+        let cachedOrders;
+
+        try {
+            if (this.appCache.has('storefront_recent_orders')) {
+                cachedOrders = this.appCache.getEmberData('storefront_recent_orders', 'order');
+            }
+        } catch (exception) {
+            // silent exception just load orders from
+        }
+
+        if (cachedOrders) {
+            this.orders = cachedOrders;
+        }
+
+        this.isLoading = true;
+
+        return new Promise((resolve) => {
+            const storefront = this.storefront?.activeStore?.public_id;
+
+            if (!storefront) {
+                this.isLoading = false;
+                return resolve([]);
+            }
+
+            this.store
+                .query('order', {
+                    storefront,
+                    limit: 14,
+                    sort: '-created_at',
+                    ...params,
+                })
+                .then((orders) => {
+                    this.isLoading = false;
+
+                    try {
+                        this.appCache.setEmberData('storefront_recent_orders', orders, ['tracking_statuses', 'tracking_number']);
+                    } catch (exception) {
+                        // silent exception just clear from cache if not able to set
+                        this.appCache.set('storefront_recent_orders', undefined);
+                    }
+
+                    resolve(orders);
+                })
+                .catch(() => {
+                    this.isLoading = false;
+
+                    resolve(this.orders);
+                });
+        });
+    }
+
+    @action async viewOrder(order) {
+        const store = this.storefront.activeStore;
+
+        if (order.isFresh) {
+            return this.acceptOrder(order);
+        }
+
+        if (order.isPreparing) {
+            return this.markAsReady(order);
+        }
+
+        if (order.isPickupReady) {
+            return this.markAsCompleted(order);
+        }
+
+        this.modalsManager.show('modals/incoming-order', {
+            title: `${order.public_id}`,
+            hideAcceptButton: true,
+            declineButtonText: 'Done',
+            declineButtonScheme: 'primary',
+            declineButtonIcon: 'check',
+            assignDriver: async () => {
+                await this.modalsManager.done();
+                this.assignDriver(order);
+            },
+            order,
+            store,
+        });
+    }
+
+    @action async acceptOrder(order) {
+        const store = this.storefront.activeStore;
+
+        await order.loadPayload();
+        await order.loadCustomer();
+
+        this.modalsManager.show('modals/incoming-order', {
+            title: 'Accept Order',
+            acceptButtonText: 'Accept Order',
+            acceptButtonScheme: 'success',
+            acceptButtonIcon: 'check',
+            order,
+            store,
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return this.fetch.post('orders/accept', { order: order.id }, { namespace: 'storefront/int/v1' }).then(() => {
+                    return this.fetchOrders().then((orders) => {
+                        this.orders = orders;
+                        modal.stopLoading();
+                    });
+                });
+            },
+        });
+    }
+
+    @action markAsReady(order) {
+        // for pickup orders
+        if (order.meta?.is_pickup === true) {
+            this.modalsManager.confirm({
+                title: 'Mark order ready for pickup?',
+                body: 'Marking the order as ready will notify the customer their order is ready for pickup!',
+                acceptButtonText: 'Ready for Pickup!',
+                acceptButtonIcon: 'check',
+                acceptButtonScheme: 'success',
+                confirm: (modal) => {
+                    modal.startLoading();
+
+                    return this.fetch.post('orders/ready', { order: order.id }, { namespace: 'storefront/int/v1' }).then(() => {
+                        return this.fetchOrders().then((orders) => {
+                            this.orders = orders;
+                            modal.stopLoading();
+                        });
+                    });
+                },
+            });
+        }
+
+        if (!order.adhoc) {
+            // prompt to assign driver then dispatch
+            return this.modalsManager.show('modals/order-ready-assign-driver', {
+                title: 'Assign driver and dispatch orders',
+                acceptButtonText: 'Assign & Dispatch!',
+                acceptButtonScheme: 'success',
+                acceptButtonIcon: 'check',
+                adhoc: false,
+                driver: null,
+                order,
+                confirm: (modal) => {
+                    modal.startLoading();
+
+                    return this.fetch
+                        .post('orders/ready', { order: order.id, driver: modal.getOption('driver.id'), adhoc: modal.getOption('adhoc') }, { namespace: 'storefront/int/v1' })
+                        .then(() => {
+                            return this.fetchOrders().then((orders) => {
+                                this.orders = orders;
+                                modal.stopLoading();
+                            });
+                        });
+                },
+            });
+        }
+
+        this.modalsManager.confirm({
+            title: 'Are you want to mark order as ready?',
+            body: 'Marking the order as ready will dispatch the order to nearby drivers, only mark the order as ready when it can be picked up.',
+            acceptButtonText: 'Dispatch!',
+            acceptButtonIcon: 'check',
+            acceptButtonScheme: 'success',
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return this.fetch.post('orders/ready', { order: order.id }, { namespace: 'storefront/int/v1' }).then(() => {
+                    return this.fetchOrders().then((orders) => {
+                        this.orders = orders;
+                        modal.stopLoading();
+                    });
+                });
+            },
+        });
+    }
+
+    @action markAsCompleted(order) {
+        this.modalsManager.confirm({
+            title: 'Are you sure you want to mark order as completed?',
+            body: 'Marking the order as completed is a confirmation that the customer has picked up the order and the order is completed.',
+            acceptButtonText: 'Order Completed!',
+            acceptButtonIcon: 'check',
+            acceptButtonScheme: 'success',
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return this.fetch.post('orders/completed', { order: order.id }, { namespace: 'storefront/int/v1' }).then(() => {
+                    return this.fetchOrders().then((orders) => {
+                        this.orders = orders;
+                        modal.stopLoading();
+                    });
+                });
+            },
+        });
+    }
+
+    @action async assignDriver(order) {
+        await order.loadDriver();
+
+        this.modalsManager.show('modals/assign-driver', {
+            title: 'Assign driver',
+            acceptButtonText: 'Assign Driver',
+            acceptButtonScheme: 'success',
+            acceptButtonIcon: 'check',
+            driver: order.driver_assigned,
+            order,
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return order.save();
+            },
+        });
+    }
+}

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

@@ -0,0 +1,54 @@
+<div class="storefront-metrics-widget" {{did-insert this.setupWidget}} ...attributes>
+    <div class="flex items-center justify-between">
+        <div class="flex items-center">
+            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100 mr-2">
+                Last 30 days
+            </h3>
+            {{#if this.isLoading}}
+                <div>
+                    <Spinner class="text-sky-400" />
+                </div>
+            {{/if}}
+        </div>
+        <div>
+
+        </div>
+    </div>
+    <dl class="mt-4 grid grid-cols-2 gap-5 sm:grid-cols-4">
+        <div class="px-4 py-5 border border-gray-200 dark:border-gray-900 bg-gray-50 dark:bg-gray-700 shadow-sm dark:shadow rounded-lg overflow-hidden sm:p-6">
+            <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
+                Orders
+            </dt>
+            <dd class="mt-1 text-3xl font-semibold text-gray-800 dark:text-white">
+                {{this.metrics.orders_count}}
+            </dd>
+        </div>
+
+        <div class="px-4 py-5 border border-gray-200 dark:border-gray-900 bg-gray-50 dark:bg-gray-700 shadow-sm dark:shadow rounded-lg overflow-hidden sm:p-6">
+            <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
+                Customers
+            </dt>
+            <dd class="mt-1 text-3xl font-semibold text-gray-800 dark:text-white">
+                {{this.metrics.customers_count}}
+            </dd>
+        </div>
+
+        <div class="px-4 py-5 border border-gray-200 dark:border-gray-900 bg-gray-50 dark:bg-gray-700 shadow-sm dark:shadow rounded-lg overflow-hidden sm:p-6">
+            <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
+                Stores
+            </dt>
+            <dd class="mt-1 text-3xl font-semibold text-gray-800 dark:text-white">
+                {{this.metrics.stores_count}}
+            </dd>
+        </div>
+
+        <div class="px-4 py-5 border border-gray-200 dark:border-gray-900 bg-gray-50 dark:bg-gray-700 shadow-sm dark:shadow rounded-lg overflow-hidden sm:p-6">
+            <dt class="text-sm font-medium text-gray-500 dark:text-gray-100 truncate">
+                Earnings
+            </dt>
+            <dd class="mt-1 text-3xl font-semibold text-gray-800 dark:text-white">
+                {{format-currency this.metrics.earnings_sum this.metrics.currency}}
+            </dd>
+        </div>
+    </dl>
+</div>

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

@@ -0,0 +1,61 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, computed } from '@ember/object';
+import { startOfMonth, endOfMonth, format } from 'date-fns';
+
+export default class WidgetStorefrontMetricsComponent extends Component {
+    @service fetch;
+    @service storefront;
+
+    @tracked metrics = {
+        orders_count: 0,
+        customers_count: 0,
+        stores_count: 0,
+        earnings_sum: 0,
+    };
+
+    @tracked isLoading = true;
+    @tracked start = format(startOfMonth(new Date()), 'P');
+    @tracked end = format(endOfMonth(new Date()), 'P');
+
+    @computed('args.title') get title() {
+        return this.args.title || 'This Month';
+    }
+
+    @action async setupWidget() {
+        this.metrics = await this.fetchMetrics(this.start, this.end);
+
+        this.storefront.on('order.broadcasted', this.reloadMetrics);
+        this.storefront.on('storefront.changed', this.reloadMetrics);
+    }
+
+    @action async reloadMetrics() {
+        this.metrics = await this.fetchMetrics(this.start, this.end);
+    }
+
+    @action fetchMetrics(start, end) {
+        this.isLoading = true;
+
+        return new Promise((resolve) => {
+            const store = this.storefront?.activeStore?.id;
+
+            if (!store) {
+                this.isLoading = false;
+                return resolve(this.metrics);
+            }
+
+            this.fetch
+                .get('actions/metrics', { start, end, store }, { namespace: 'storefront/int/v1' })
+                .then((metrics) => {
+                    this.isLoading = false;
+                    resolve(metrics);
+                })
+                .catch(() => {
+                    this.isLoading = false;
+
+                    resolve(this.metrics);
+                });
+        });
+    }
+}

package/addon/controllers/application.js

@@ -0,0 +1,33 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { alias } from '@ember/object/computed';
+
+export default class ApplicationController extends Controller {
+    @service storefront;
+    @service hostRouter;
+    @service loader;
+    @alias('storefront.activeStore') activeStore;
+
+    @action createNewStorefront() {
+        return this.storefront.createNewStorefront({
+            onSuccess: () => {
+                const loader = this.loader.show(`Switching to newly created store...`);
+
+                this.hostRouter.refresh().then(() => {
+                    this.notifyPropertyChange('activeStore');
+                    this.loader.removeLoader(loader);
+                });
+            },
+        });
+    }
+
+    @action switchActiveStore(store) {
+        const loader = this.loader.show(`Switching Storefront to ${store.name}...`);
+        this.storefront.setActiveStorefront(store);
+        this.hostRouter.refresh().then(() => {
+            this.notifyPropertyChange('activeStore');
+            this.loader.removeLoader(loader);
+        });
+    }
+}