@fleetbase/storefront-engine 0.3.18 → 0.3.20

package/addon/services/order-actions.js

@@ -0,0 +1,248 @@
+import Service, { inject as service } from '@ember/service';
+import toBoolean from '@fleetbase/ember-core/utils/to-boolean';
+
+export default class OrderActionsService extends Service {
+    @service intl;
+    @service notifications;
+    @service fetch;
+    @service store;
+    @service modalsManager;
+    @service storefront;
+
+    cancelOrder(order, callback) {
+        this.modalsManager.confirm({
+            title: this.intl.t('fleet-ops.operations.orders.index.cancel-title'),
+            body: this.intl.t('fleet-ops.operations.orders.index.cancel-body'),
+            order,
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await this.fetch.patch('orders/cancel', { order: order.id });
+                    order.set('status', 'canceled');
+                    this.notifications.success('Order canceled.');
+                    modal.done();
+                    if (typeof callback === 'function') {
+                        callback(order);
+                    }
+                } catch (error) {
+                    this.notifications.serverError(error);
+                } finally {
+                    modal.stopLoading();
+                }
+            },
+            decline: async (modal) => {
+                if (typeof callback === 'function') {
+                    callback(order);
+                }
+                modal.done();
+            },
+        });
+    }
+
+    async assignDriver(order, callback) {
+        await order.loadDriver();
+
+        this.modalsManager.show('modals/assign-driver', {
+            title: this.intl.t('storefront.component.widget.orders.assign-driver-modal-title'),
+            acceptButtonText: this.intl.t('storefront.component.widget.orders.assign-driver-modal-accept-button-text'),
+            acceptButtonScheme: 'success',
+            acceptButtonIcon: 'check',
+            driver: order.driver_assigned,
+            order,
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await order.save();
+                    this.notifications.success('Driver assigned to order.');
+                    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();
+            },
+        });
+    }
+
+    async acceptOrder(order, callback) {
+        const store = this.storefront.activeStore;
+
+        await order.loadPayload();
+        await order.loadCustomer();
+
+        this.modalsManager.show('modals/incoming-order', {
+            title: this.intl.t('storefront.component.widget.orders.accept-order'),
+            acceptButtonText: this.intl.t('storefront.component.widget.orders.accept-order'),
+            acceptButtonScheme: 'success',
+            acceptButtonIcon: 'check',
+            modalClass: 'scrollable-height-dialog',
+            order,
+            store,
+            assignDriver: async () => {
+                await this.modalsManager.done();
+                this.assignDriver(order, (order) => {
+                    this.acceptOrder(order);
+                });
+            },
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await this.fetch.post('orders/accept', { 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();
+            },
+        });
+    }
+
+    markAsReady(order, callback) {
+        // for pickup orders
+        if (order.meta && toBoolean(order.meta.is_pickup) === true) {
+            return this.modalsManager.confirm({
+                title: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-pickup-title'),
+                body: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-pickup-body'),
+                acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-pickup-accept-button-text'),
+                acceptButtonIcon: 'check',
+                acceptButtonScheme: 'success',
+                confirm: async (modal) => {
+                    modal.startLoading();
+
+                    try {
+                        await this.fetch.post('orders/ready', { 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();
+                },
+            });
+        }
+
+        if (!order.adhoc) {
+            // prompt to assign driver then dispatch
+            return this.modalsManager.show('modals/order-ready-assign-driver', {
+                title: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-not-adhoc-title'),
+                acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-not-adhoc-accept-button-text'),
+                acceptButtonScheme: 'success',
+                acceptButtonIcon: 'check',
+                adhoc: false,
+                driver: null,
+                order,
+                confirm: async (modal) => {
+                    modal.startLoading();
+
+                    try {
+                        await this.fetch.post('orders/ready', { order: order.id, driver: modal.getOption('driver.id'), adhoc: modal.getOption('adhoc') }, { 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();
+                },
+            });
+        }
+
+        this.modalsManager.confirm({
+            title: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-title'),
+            body: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-body'),
+            acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-ready-modal-accept-button-text'),
+            acceptButtonIcon: 'check',
+            acceptButtonScheme: 'success',
+            confirm: async (modal) => {
+                modal.startLoading();
+                try {
+                    await this.fetch.post('orders/ready', { 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'),
+            body: this.intl.t('storefront.component.widget.orders.mark-as-completed-modal-body'),
+            acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-completed-accept-button-text'),
+            acceptButtonIcon: 'check',
+            acceptButtonScheme: 'success',
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await this.fetch.post('orders/completed', { 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();
+            },
+        });
+    }
+}

package/addon/services/storefront.js

@@ -15,6 +15,7 @@ export default class StorefrontService extends Service.extend(Evented) {
     @service modalsManager;
     @service hostRouter;
     @service abilities;
+    @service socket;
 
     /**
      * Gets the active store.
@@ -102,6 +103,7 @@ export default class StorefrontService extends Service.extend(Evented) {
             declineButtonScheme: 'danger',
             closeButton: false,
             backdropClose: false,
+            modalClass: 'scrollable-height-dialog',
             order,
             store,
             confirm: async (modal) => {

package/addon/styles/storefront-engine.css

@@ -11,3 +11,51 @@
     gap: 0.35rem !important;
     height: auto !important;
 }
+
+.scrollable-height-dialog {
+    display: flex !important;
+    padding: 0;
+    min-width: 100%;
+    min-height: 100%;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    align-items: center;
+    justify-content: center;
+}
+
+.scrollable-height-dialog > .flb--modal-dialog {
+    padding: 25rem 0 5rem;
+    height: 100%;
+    overflow-y: scroll;
+    width: 100%;
+    margin: 1rem 0 0;
+    min-width: 100%;
+    min-height: 100%;
+}
+
+.storefront-widget-table {
+    table-layout: fixed;
+    width: 100%;
+    max-width: 100%;
+}
+
+.status-badge.pickup-ready-status-badge > span {
+    background-color: #166534;
+    border: 1px solid #15803d;
+    color: #dcfce7;
+}
+
+.status-badge.pickup-ready-status-badge > span svg {
+    color: #86efac;
+}
+
+.status-badge.order-canceled-status-badge > span {
+    background-color: #991b1b;
+    border: 1px solid #b91c1c;
+    color: #fee2e2;
+}
+
+.status-badge.order-canceled-status-badge > span svg {
+    color: #fca5a5;
+}

package/addon/templates/home.hbs

@@ -1,7 +1,8 @@
 <Layout::Section::Header @title={{t "storefront.home.title"}} @hideActions={{true}} />
 
-<Layout::Section::Body class="space-y-4" @padded={{true}}>
+<Layout::Section::Body class="space-y-4 h-full overflow-y-scroll" @padded={{true}}>
     <Widget::StorefrontMetrics />
     <Widget::Orders />
     <Widget::Customers />
+    <Spacer @height="300px" />
 </Layout::Section::Body>

package/addon/templates/orders/index/view.hbs

@@ -1 +1 @@
-<OrderPanel::Details @order={{@model}} @onPressCancel={{this.transitionBack}} />
+<OrderPanel @context={{@model}} @onPressCancel={{this.transitionBack}} />

package/addon/templates/orders/index.hbs

@@ -9,11 +9,34 @@
     />
     <VisibleColumnPicker @columns={{this.columns}} @onChange={{fn (mut this.columns)}} class="mr-2" />
     {{#if (safe-has this.table "selectedRows")}}
-        <DropdownButton @icon="layer-group" @text={{t "storefront.common.bulk-action"}} @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" @permission="storefront delete order" as |dd|>
+        <DropdownButton
+            @icon="layer-group"
+            @text={{t "storefront.common.bulk-action"}}
+            @type="magic"
+            @size="sm"
+            @buttonWrapperClass="mr-2"
+            @contentClass="dropdown-menu"
+            @permission="storefront delete order"
+            as |dd|
+        >
             <div class="next-dd-menu mt-2 mx-0">
                 <div class="px-1">
-                    <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeleteOrders)}}>
-                        {{t "storefront.orders.index.delete-order"}}
+                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.bulkCancelOrders)}} disabled={{cannot "fleet-ops cancel order"}}>
+                        <div class="w-6"><FaIcon @icon="ban" @size="sm" /></div>
+                        <div>{{t "fleet-ops.operations.orders.index.cancel-orders"}}</div>
+                    </a>
+                </div>
+                <div class="px-1">
+                    <a href="javascript:;" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeleteOrders)}} disabled={{cannot "fleet-ops delete order"}}>
+                        <div class="w-6"><FaIcon @icon="trash" @size="sm" /></div>
+                        <div>{{t "fleet-ops.operations.orders.index.delete-orders"}}</div>
+                    </a>
+                </div>
+                <div class="next-dd-menu-seperator"></div>
+                <div class="px-1">
+                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.bulkDispatchOrders)}} disabled={{cannot "fleet-ops dispatch order"}}>
+                        <div class="w-6"><FaIcon @icon="rocket" @size="sm" /></div>
+                        <div>{{t "fleet-ops.operations.orders.index.dispatch-orders"}}</div>
                     </a>
                 </div>
             </div>

package/addon/templates/products/index/index.hbs

@@ -1,36 +1,36 @@
 <Layout::Section::Header @title="All Products" @searchQuery={{this.query}} @onSearch={{perform this.search}} />
 
-<Layout::Section::Body>
-    <div class="h-screen overflow-y-scroll p-6">
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-            {{#each @model as |product|}}
-                <div class="border border-gray-200 bg-white dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700 text-center rounded-md px-2 py-3">
-                    <div class="flex flex-col items-center justify-center overflow-hidden">
-                        <div class="mb-3 flex items-center justify-center">
-                            <img src={{product.primary_image_url}} alt={{product.name}} class="w-24 h-24" />
-                        </div>
-                        <h4 class="font-semibold mb-1">{{product.name}}</h4>
-                        <p class="text-sm truncate">{{product.description}}</p>
-                        <p class="mb-2 text-sm text-green-400">{{format-currency product.price product.currency}}</p>
-                        <div class="flex items-center justify-evenly space-x-4">
-                            <LinkTo @route="products.index.index.edit" @model={{product}} disabled={{cannot "storefront update product"}} class="text-sm">
-                                <FaIcon @icon="pencil" class="mr-1" />
-                                <span class="destroy-action">Edit</span>
-                            </LinkTo>
-                            <a href="javascript:;" class="destroy-action text-sm" disabled={{cannot "storefront delete product"}} {{on "click" (fn this.deleteProduct product)}}>
-                                <FaIcon @icon="trash" class="text-red-500 mr-1" />
-                                <span class="destroy-action">Delete</span>
-                            </a>
-                        </div>
+<Layout::Section::Body class="h-full overflow-y-scroll p-6">
+
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {{#each @model as |product|}}
+            <div class="border border-gray-200 bg-white dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700 text-center rounded-md px-2 py-3">
+                <div class="flex flex-col items-center justify-center overflow-hidden">
+                    <div class="mb-3 flex items-center justify-center">
+                        <img src={{product.primary_image_url}} alt={{product.name}} class="w-24 h-24" />
+                    </div>
+                    <h4 class="font-semibold mb-1">{{product.name}}</h4>
+                    <p class="text-sm truncate">{{product.description}}</p>
+                    <p class="mb-2 text-sm text-green-400">{{format-currency product.price product.currency}}</p>
+                    <div class="flex items-center justify-evenly space-x-4">
+                        <LinkTo @route="products.index.index.edit" @model={{product}} disabled={{cannot "storefront update product"}} class="text-sm">
+                            <FaIcon @icon="pencil" class="mr-1" />
+                            <span class="destroy-action">Edit</span>
+                        </LinkTo>
+                        <a href="javascript:;" class="destroy-action text-sm" disabled={{cannot "storefront delete product"}} {{on "click" (fn this.deleteProduct product)}}>
+                            <FaIcon @icon="trash" class="text-red-500 mr-1" />
+                            <span class="destroy-action">Delete</span>
+                        </a>
                     </div>
                 </div>
-            {{else}}
-                <div>
-                    <h3 class="dark:text-gray-100 text-opacity-75 text-sm">No products</h3>
-                </div>
-            {{/each}}
-        </div>
+            </div>
+        {{else}}
+            <div>
+                <h3 class="dark:text-gray-100 text-opacity-75 text-sm">No products</h3>
+            </div>
+        {{/each}}
     </div>
+    <Spacer @height="400px" />
 </Layout::Section::Body>
 
 <Layout::Section::Footer>

package/addon/templates/settings.hbs

@@ -18,7 +18,7 @@
                 <span>{{t "storefront.common.api"}}</span>
             </LinkTo>
             <LinkTo @route="settings.notifications" class="ui-tab">
-                <FaIcon @icon="bells" class="mr-1" />
+                <FaIcon @icon="bell-concierge" class="mr-1" />
                 <span>{{t "storefront.common.notification"}}</span>
             </LinkTo>
         </nav>

package/app/services/order-actions.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/storefront-engine/services/order-actions';

package/composer.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetbase/storefront-api",
-    "version": "0.3.18",
+    "version": "0.3.20",
     "description": "Headless Commerce & Marketplace Extension for Fleetbase",
     "keywords": [
         "fleetbase-extension",

package/extension.json

@@ -1,6 +1,6 @@
 {
     "name": "Storefront",
-    "version": "0.3.18",
+    "version": "0.3.20",
     "description": "Headless Commerce & Marketplace Extension for Fleetbase",
     "repository": "https://github.com/fleetbase/storefront",
     "license": "AGPL-3.0-or-later",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/storefront-engine",
-    "version": "0.3.18",
+    "version": "0.3.20",
     "description": "Headless Commerce & Marketplace Extension for Fleetbase",
     "fleetbase": {
         "route": "storefront",

package/server/migrations/2023_05_03_025307_create_carts_table.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class() extends Migration {
+return new class extends Migration {
     /**
      * Run the migrations.
      *

package/server/migrations/2023_05_03_025307_create_checkouts_table.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class() extends Migration {
+return new class extends Migration {
     /**
      * Run the migrations.
      *

package/server/migrations/2023_05_03_025307_create_gateways_table.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class() extends Migration {
+return new class extends Migration {
     /**
      * Run the migrations.
      *

package/server/migrations/2023_05_03_025307_create_network_stores_table.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class() extends Migration {
+return new class extends Migration {
     /**
      * Run the migrations.
      *

package/server/migrations/2023_05_03_025307_create_networks_table.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class() extends Migration {
+return new class extends Migration {
     /**
      * Run the migrations.
      *

package/server/migrations/2023_05_03_025307_create_notification_channels_table.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class() extends Migration {
+return new class extends Migration {
     /**
      * Run the migrations.
      *

package/server/migrations/2023_05_03_025307_create_payment_methods_table.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class() extends Migration {
+return new class extends Migration {
     /**
      * Run the migrations.
      *

package/server/migrations/2023_05_03_025307_create_product_addon_categories_table.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class() extends Migration {
+return new class extends Migration {
     /**
      * Run the migrations.
      *

package/server/migrations/2023_05_03_025307_create_product_addons_table.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class() extends Migration {
+return new class extends Migration {
     /**
      * Run the migrations.
      *

package/server/migrations/2023_05_03_025307_create_product_hours_table.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class() extends Migration {
+return new class extends Migration {
     /**
      * Run the migrations.
      *

package/server/migrations/2023_05_03_025307_create_product_store_locations_table.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class() extends Migration {
+return new class extends Migration {
     /**
      * Run the migrations.
      *

package/server/migrations/2023_05_03_025307_create_product_variant_options_table.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class() extends Migration {
+return new class extends Migration {
     /**
      * Run the migrations.
      *

package/server/migrations/2023_05_03_025307_create_product_variants_table.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class() extends Migration {
+return new class extends Migration {
     /**
      * Run the migrations.
      *

package/server/migrations/2023_05_03_025307_create_products_table.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class() extends Migration {
+return new class extends Migration {
     /**
      * Run the migrations.
      *

package/server/migrations/2023_05_03_025307_create_reviews_table.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class() extends Migration {
+return new class extends Migration {
     /**
      * Run the migrations.
      *

package/server/migrations/2023_05_03_025307_create_store_hours_table.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class() extends Migration {
+return new class extends Migration {
     /**
      * Run the migrations.
      *

package/server/migrations/2023_05_03_025307_create_store_locations_table.php

@@ -4,7 +4,7 @@ use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
 
-return new class() extends Migration {
+return new class extends Migration {
     /**
      * Run the migrations.
      *