@fleetbase/storefront-engine 0.4.6 → 0.4.8

package/addon/components/storefront-order-summary.hbs

@@ -1,80 +1,81 @@
-{{#if (eq @order.type "storefront")}}
-    <ContentPanel
-        @title={{t "storefront.component.storefront-order-summary.order-summary-title"}}
-        @prefixTitleRight={{if @order.payload.cod_amount "Cash" ""}}
-        @prefixTitleRightClass="text-green-400"
-        @open={{true}}
-        @pad={{true}}
-        @panelBodyClass="bg-white dark:bg-gray-800"
-    >
-        <div class="flex flex-col space-y-4 p-2 overflow-hidden">
-            {{#each @order.payload.entities as |entity|}}
-                <div class="flex flex-1">
-                    <div class="mr-2">
-                        <div class="flex items-center justify-center w-6 h-5 border border-gray-200 dark:border-blue-400 rounded-md">
-                            <span class="text-blue-400 text-xs">{{entity.meta.quantity}}x</span>
-                        </div>
-                    </div>
-                    <div class="flex-1 flex">
-                        <div class="mr-4">
-                            <img src={{entity.photo_url}} class="w-12 h-12 rounded-md shadow-sm" alt={{entity.name}} />
-                        </div>
-                        <div>
-                            <h4 class="font-semibold dark:text-gray-100 mb-1 text-sm">{{entity.name}}</h4>
-                            <div class="flex flex-wrap truncate w-44">
-                                <p class="dark:text-gray-50 text-xs truncate">{{entity.description}}</p>
+{{#let @resource as |order|}}
+    {{#if order.meta.storefront}}
+        <ContentPanel
+            @title={{t "storefront.component.storefront-order-summary.order-summary-title"}}
+            @prefixTitleRight={{if order.payload.cod_amount "Cash" (n-a (titleize order.meta.gateway))}}
+            @prefixTitleRightClass={{if order.payload.cod_amount "text-green-400" "text-blue-400"}}
+            @open={{true}}
+            @wrapperClass="bordered-top"
+        >
+            <div class="flex flex-col space-y-4 p-2 overflow-hidden">
+                {{#each order.payload.entities as |entity|}}
+                    <div class="flex flex-1">
+                        <div class="mr-2">
+                            <div class="flex items-center justify-center w-6 h-5 border border-gray-200 dark:border-blue-400 rounded-md">
+                                <span class="text-blue-400 text-xs">{{entity.meta.quantity}}x</span>
                             </div>
-                            <div>
-                                {{#each entity.meta.variants as |variant|}}
-                                    <div>
-                                        <span class="text-xs dark:text-gray-50">{{variant.name}}</span>
-                                    </div>
-                                {{/each}}
+                        </div>
+                        <div class="flex-1 flex">
+                            <div class="mr-4">
+                                <img src={{entity.photo_url}} class="w-12 h-12 rounded-md shadow-sm" alt={{entity.name}} />
                             </div>
                             <div>
-                                {{#each entity.meta.addons as |addon|}}
-                                    <div>
-                                        <span class="text-xs dark:text-gray-50">+ {{addon.name}}</span>
-                                    </div>
-                                {{/each}}
+                                <h4 class="font-semibold dark:text-gray-100 mb-1 text-sm">{{entity.name}}</h4>
+                                <div class="flex flex-wrap truncate w-44">
+                                    <p class="dark:text-gray-50 text-xs truncate">{{entity.description}}</p>
+                                </div>
+                                <div>
+                                    {{#each entity.meta.variants as |variant|}}
+                                        <div>
+                                            <span class="text-xs dark:text-gray-50">{{variant.name}}</span>
+                                        </div>
+                                    {{/each}}
+                                </div>
+                                <div>
+                                    {{#each entity.meta.addons as |addon|}}
+                                        <div>
+                                            <span class="text-xs dark:text-gray-50">+ {{addon.name}}</span>
+                                        </div>
+                                    {{/each}}
+                                </div>
                             </div>
                         </div>
+                        <div>
+                            <span class="dark:text-gray-50 text-sm">{{format-currency entity.meta.subtotal entity.currency}}</span>
+                        </div>
                     </div>
-                    <div>
-                        <span class="dark:text-gray-50 text-sm">{{format-currency entity.meta.subtotal entity.currency}}</span>
-                    </div>
-                </div>
-            {{/each}}
-        </div>
-        <div class="p-2 space-y-2 border-t border-b dark:border-gray-800">
-            <div class="flex items-center justify-between">
-                <span class="dark:text-gray-50 text-sm">{{t "fleet-ops.operations.orders.index.view.subtotal"}}</span>
-                <span class="dark:text-gray-50 text-sm">{{format-currency @order.meta.subtotal @order.meta.currency}}</span>
+                {{/each}}
             </div>
-            {{#unless @order.meta.is_pickup}}
-                <div class="flex items-center justify-between">
-                    <span class="dark:text-gray-50 text-sm">{{t "fleet-ops.operations.orders.index.view.delivery-fee"}}</span>
-                    <span class="dark:text-gray-50 text-sm">{{format-currency @order.meta.delivery_fee @order.meta.currency}}</span>
-                </div>
-            {{/unless}}
-            {{#if @order.meta.tip}}
+            <div class="p-2 space-y-2 border-t border-b dark:border-gray-800">
                 <div class="flex items-center justify-between">
-                    <span class="dark:text-gray-50 text-sm">{{t "fleet-ops.operations.orders.index.view.tip"}}</span>
-                    <span class="dark:text-gray-50 text-sm">{{get-tip-amount @order.meta.tip @order.meta.subtotal @order.meta.currency}}</span>
+                    <span class="dark:text-gray-50 text-sm">{{t "storefront.orders.index.view.subtotal"}}</span>
+                    <span class="dark:text-gray-50 text-sm">{{format-currency order.meta.subtotal order.meta.currency}}</span>
                 </div>
-            {{/if}}
-            {{#if @order.meta.delivery_tip}}
+                {{#unless order.meta.is_pickup}}
+                    <div class="flex items-center justify-between">
+                        <span class="dark:text-gray-50 text-sm">{{t "storefront.orders.index.view.delivery-fee"}}</span>
+                        <span class="dark:text-gray-50 text-sm">{{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 text-sm">{{t "storefront.orders.index.view.tip"}}</span>
+                        <span class="dark:text-gray-50 text-sm">{{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 text-sm">{{t "storefront.orders.index.view.delivery-tip"}}</span>
+                        <span class="dark:text-gray-50 text-sm">{{get-tip-amount order.meta.delivery_tip order.meta.subtotal order.meta.currency}}</span>
+                    </div>
+                {{/if}}
+            </div>
+            <div class="p-2">
                 <div class="flex items-center justify-between">
-                    <span class="dark:text-gray-50 text-sm">{{t "fleet-ops.operations.orders.index.view.delivery-tip"}}</span>
-                    <span class="dark:text-gray-50 text-sm">{{get-tip-amount @order.meta.delivery_tip @order.meta.subtotal @order.meta.currency}}</span>
+                    <span class="dark:text-gray-50 font-bold text-sm">{{t "storefront.orders.index.view.total"}}</span>
+                    <span class="dark:text-gray-50 font-bold text-sm">{{format-currency order.meta.total order.meta.currency}}</span>
                 </div>
-            {{/if}}
-        </div>
-        <div class="p-2">
-            <div class="flex items-center justify-between">
-                <span class="dark:text-gray-50 font-bold text-sm">{{t "fleet-ops.operations.orders.index.view.total"}}</span>
-                <span class="dark:text-gray-50 font-bold text-sm">{{format-currency @order.meta.total @order.meta.currency}}</span>
             </div>
-        </div>
-    </ContentPanel>
-{{/if}}
+        </ContentPanel>
+    {{/if}}
+{{/let}}

package/addon/components/storefront-order-summary.js

@@ -1,3 +1,12 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import getTipAmount from '../helpers/get-tip-amount';
 
-export default class StorefrontOrderSummaryComponent extends Component {}
+export default class StorefrontOrderSummaryComponent extends Component {
+    @service('universe/registry-service') registryService;
+
+    constructor() {
+        super(...arguments);
+        this.registryService.registerHelper('get-tip-amount', getTipAmount);
+    }
+}

package/addon/controllers/base-controller.js

@@ -3,29 +3,9 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 
 export default class BaseController extends Controller {
-    /**
-     * Inject the `universe` service
-     *
-     * @var {Service}
-     */
-    @service universe;
+    @service hostRouter;
 
-    /**
-     * Transitions to a specified route within the '@fleetbase/storefront-engine' engine.
-     *
-     * This action is a wrapper around the `transitionToEngineRoute` method of the `universe` service (or object),
-     * specifically targeting the '@fleetbase/storefront-engine'. It allows for easy transitioning to routes
-     * within this engine, abstracting away the need to repeatedly specify the engine name.
-     *
-     * @param {string} route - The route within the '@fleetbase/storefront-engine' to transition to.
-     * @param {...any} args - Additional arguments to pass to the transitionToEngineRoute method.
-     * @returns {Promise} A Promise that resolves with the result of the transitionToEngineRoute method.
-     *
-     * @example
-     * // To transition to the 'management.fleets.index.new' route within the '@fleetbase/storefront-engine'
-     * this.transitionToRoute('management.fleets.index.new');
-     */
     @action transitionToRoute(route, ...args) {
-        return this.universe.transitionToEngineRoute('@fleetbase/storefront-engine', route, ...args);
+        return this.hostRouter.transitionTo(`console.storefront.${route}`, ...args);
     }
 }

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

@@ -6,6 +6,31 @@ export default class NetworksIndexNetworkController extends BaseController {
     @service modalsManager;
     @service intl;
 
+    get tabs() {
+        return [
+            {
+                label: this.intl.t('storefront.networks.index.network.settings'),
+                icon: 'cog',
+                route: 'networks.index.network.index',
+            },
+            {
+                label: this.intl.t('storefront.networks.index.network.stores.store'),
+                icon: 'store',
+                route: 'networks.index.network.stores',
+            },
+            {
+                label: this.intl.t('storefront.networks.index.network.orders'),
+                icon: 'file-invoice-dollar',
+                route: 'networks.index.network.orders',
+            },
+            {
+                label: this.intl.t('storefront.networks.index.network.customers'),
+                icon: 'users',
+                route: 'networks.index.network.customers',
+            },
+        ];
+    }
+
     @action transitionBack({ closeOverlay }) {
         if (this.model.hasDirtyAttributes) {
             // warn user about unsaved changes

package/addon/controllers/promotions/push-notifications.js

@@ -0,0 +1,64 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class PromotionsPushNotificationsController extends Controller {
+    @service fetch;
+    @service notifications;
+    @service intl;
+    @service currentUser;
+    @service storefront;
+
+    @tracked title = '';
+    @tracked body = '';
+    @tracked selectedCustomers = [];
+    @tracked selectAllCustomers = false;
+    @tracked isLoading = false;
+
+    @action
+    async sendPushNotification(event) {
+        event.preventDefault();
+
+        // Validate form
+        if (!this.title || !this.body) {
+            this.notifications.warning(this.intl.t('storefront.promotions.push-notifications.validation-title-body-required'));
+            return;
+        }
+
+        if (!this.selectAllCustomers && (!this.selectedCustomers || this.selectedCustomers.length === 0)) {
+            this.notifications.warning(this.intl.t('storefront.promotions.push-notifications.validation-customers-required'));
+            return;
+        }
+
+        this.isLoading = true;
+
+        try {
+            const payload = {
+                title: this.title,
+                body: this.body,
+                store: this.storefront.getActiveStore('public_id'),
+                select_all: this.selectAllCustomers,
+            };
+
+            // Only include customer IDs if not selecting all
+            if (!this.selectAllCustomers) {
+                payload.customers = this.selectedCustomers.map((customer) => customer.id);
+            }
+
+            await this.fetch.post('actions/send-push-notification', payload, { namespace: 'storefront/int/v1' });
+
+            this.notifications.success(this.intl.t('storefront.promotions.push-notifications.notification-sent-success'));
+
+            // Reset form
+            this.title = '';
+            this.body = '';
+            this.selectedCustomers = [];
+            this.selectAllCustomers = false;
+        } catch (error) {
+            this.notifications.error(this.intl.t('storefront.promotions.push-notifications.notification-sent-error'));
+        } finally {
+            this.isLoading = false;
+        }
+    }
+}

package/addon/controllers/promotions.js

@@ -0,0 +1,16 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class PromotionsController extends Controller {
+    @service intl;
+
+    get tabs() {
+        return [
+            {
+                route: 'promotions.push-notifications',
+                label: this.intl.t('storefront.promotions.push-notifications.tab-title'),
+                icon: 'bell',
+            },
+        ];
+    }
+}

package/addon/engine.js

@@ -2,14 +2,9 @@ import Engine from '@ember/engine';
 import loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
 import config from './config/environment';
-import services from '@fleetbase/ember-core/exports/services';
-import StorefrontKeyMetricsWidget from './components/widget/storefront-key-metrics';
-import StorefrontOrderSummaryComponent from './components/storefront-order-summary';
-import AddProductAsEntityButtonComponent from './components/add-product-as-entity-button';
+import { services, externalRoutes } from '@fleetbase/ember-core/exports';
 
 const { modulePrefix } = config;
-const externalRoutes = ['console', 'extensions'];
-
 export default class StorefrontEngine extends Engine {
     modulePrefix = modulePrefix;
     Resolver = Resolver;
@@ -17,31 +12,6 @@ export default class StorefrontEngine extends Engine {
         services,
         externalRoutes,
     };
-    setupExtension = function (app, engine, universe) {
-        // register menu item in header
-        universe.registerHeaderMenuItem('Storefront', 'console.storefront', { icon: 'store', priority: 1 });
-
-        // widgets for registry
-        const KeyMetricsWidgetDefinition = {
-            widgetId: 'storefront-key-metrics-widget',
-            name: 'Storefront Metrics',
-            description: 'Key metrics from Storefront.',
-            icon: 'store',
-            component: StorefrontKeyMetricsWidget,
-            grid_options: { w: 12, h: 7, minW: 8, minH: 7 },
-            options: {
-                title: 'Storefront Metrics',
-            },
-        };
-
-        // register component to views
-        universe.registerRenderableComponent('@fleetbase/fleetops-engine', 'fleet-ops:template:operations:orders:view', StorefrontOrderSummaryComponent);
-        universe.registerRenderableComponent('@fleetbase/fleetops-engine', 'fleet-ops:template:operations:orders:new:entities-input', AddProductAsEntityButtonComponent);
-
-        // register widgets
-        universe.registerDefaultDashboardWidgets([KeyMetricsWidgetDefinition]);
-        universe.registerDashboardWidgets([KeyMetricsWidgetDefinition]);
-    };
 }
 
 loadInitializers(StorefrontEngine, modulePrefix);

package/addon/extension.js

@@ -0,0 +1,35 @@
+import { Widget, ExtensionComponent } from '@fleetbase/ember-core/contracts';
+
+export default {
+    setupExtension(app, universe) {
+        const menuService = universe.getService('menu');
+        const registryService = universe.getService('registry');
+        const widgetService = universe.getService('widget');
+
+        // Register menu item in header
+        menuService.registerHeaderMenuItem('Storefront', 'console.storefront', { icon: 'store', priority: 1 });
+
+        // widgets for registry
+        const widgets = [
+            new Widget({
+                id: 'storefront-key-metrics-widget',
+                name: 'Storefront Metrics',
+                description: 'Key metrics from Storefront.',
+                icon: 'store',
+                component: new ExtensionComponent('@fleetbase/storefront-engine', 'widget/storefront-key-metrics'),
+                grid_options: { w: 12, h: 7, minW: 8, minH: 7 },
+                options: { title: 'Storefront Metrics' },
+                default: true,
+            }),
+        ];
+
+        widgetService.registerWidgets('dashboard', widgets);
+
+        // register component to views
+        registryService.registerRenderableComponent('fleet-ops:component:order:details', new ExtensionComponent('@fleetbase/storefront-engine', 'storefront-order-summary'));
+        registryService.registerRenderableComponent(
+            'fleet-ops:template:operations:orders:new:entities-input',
+            new ExtensionComponent('@fleetbase/storefront-engine', 'add-product-as-entity-button')
+        );
+    },
+};

package/addon/routes/customers/index.js

@@ -1,7 +1,5 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
-import { action, set } from '@ember/object';
-import isNestedRouteTransition from '@fleetbase/ember-core/utils/is-nested-route-transition';
 
 export default class CustomersIndexRoute extends Route {
     @service store;
@@ -26,13 +24,6 @@ export default class CustomersIndexRoute extends Route {
         updated_at: { refreshModel: true },
     };
 
-    @action willTransition(transition) {
-        if (isNestedRouteTransition(transition)) {
-            set(this.queryParams, 'page.refreshModel', false);
-            set(this.queryParams, 'sort.refreshModel', false);
-        }
-    }
-
     beforeModel() {
         if (this.abilities.cannot('storefront list customer')) {
             this.notifications.warning(this.intl.t('common.unauthorized-access'));

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

@@ -1,7 +1,5 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
-import { action, set } from '@ember/object';
-import isNestedRouteTransition from '@fleetbase/ember-core/utils/is-nested-route-transition';
 
 export default class NetworksIndexNetworkCustomersRoute extends Route {
     @service store;
@@ -22,13 +20,6 @@ export default class NetworksIndexNetworkCustomersRoute extends Route {
         updated_at: { refreshModel: true, as: 'n_updated_at' },
     };
 
-    @action willTransition(transition) {
-        if (isNestedRouteTransition(transition)) {
-            set(this.queryParams, 'page.refreshModel', false);
-            set(this.queryParams, 'sort.refreshModel', false);
-        }
-    }
-
     model(params) {
         return this.store.query('customer', { ...params, storefront: this.storefront.getActiveStore('public_id') });
     }

package/addon/routes/networks/index.js

@@ -1,7 +1,5 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
-import { action, set } from '@ember/object';
-import isNestedRouteTransition from '@fleetbase/ember-core/utils/is-nested-route-transition';
 
 export default class NetworksIndexRoute extends Route {
     @service store;
@@ -19,13 +17,6 @@ export default class NetworksIndexRoute extends Route {
         updated_at: { refreshModel: true },
     };
 
-    @action willTransition(transition) {
-        if (isNestedRouteTransition(transition)) {
-            set(this.queryParams, 'page.refreshModel', false);
-            set(this.queryParams, 'sort.refreshModel', false);
-        }
-    }
-
     beforeModel() {
         if (this.abilities.cannot('storefront list network')) {
             this.notifications.warning(this.intl.t('common.unauthorized-access'));

package/addon/routes/orders/index.js

@@ -1,7 +1,5 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
-import { action, set } from '@ember/object';
-import isNestedRouteTransition from '@fleetbase/ember-core/utils/is-nested-route-transition';
 
 export default class OrdersIndexRoute extends Route {
     @service store;
@@ -30,13 +28,6 @@ export default class OrdersIndexRoute extends Route {
         before: { refreshModel: true },
     };
 
-    @action willTransition(transition) {
-        if (isNestedRouteTransition(transition)) {
-            set(this.queryParams, 'page.refreshModel', false);
-            set(this.queryParams, 'sort.refreshModel', false);
-        }
-    }
-
     beforeModel() {
         if (this.abilities.cannot('storefront list order')) {
             this.notifications.warning(this.intl.t('common.unauthorized-access'));

package/addon/routes/products/index.js

@@ -1,7 +1,6 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
-import { action, set } from '@ember/object';
-import isNestedRouteTransition from '@fleetbase/ember-core/utils/is-nested-route-transition';
+import { action } from '@ember/object';
 
 export default class ProductsIndexRoute extends Route {
     @service store;
@@ -11,13 +10,8 @@ export default class ProductsIndexRoute extends Route {
     @service hostRouter;
     @service notifications;
 
-    @action willTransition(transition) {
+    @action willTransition() {
         this.controller.category = null;
-
-        if (isNestedRouteTransition(transition)) {
-            set(this.queryParams, 'page.refreshModel', false);
-            set(this.queryParams, 'sort.refreshModel', false);
-        }
     }
 
     beforeModel() {

package/addon/routes/promotions/push-notifications.js

@@ -0,0 +1,19 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class PromotionsPushNotificationsRoute extends Route {
+    @service store;
+    @service currentUser;
+    @service storefront;
+    @service intl;
+    @service abilities;
+    @service hostRouter;
+    @service notifications;
+
+    beforeModel() {
+        if (this.abilities.cannot('storefront send push notifications')) {
+            this.notifications.warning(this.intl.t('common.unauthorized-access'));
+            return this.hostRouter.transitionTo('console.storefront');
+        }
+    }
+}

package/addon/routes/promotions.js

@@ -0,0 +1,16 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class PromotionsRoute extends Route {
+    @service intl;
+    @service abilities;
+    @service hostRouter;
+    @service notifications;
+
+    beforeModel() {
+        if (this.abilities.cannot('storefront view promotions')) {
+            this.notifications.warning(this.intl.t('common.unauthorized-access'));
+            return this.hostRouter.transitionTo('console');
+        }
+    }
+}

package/addon/routes.js

@@ -41,7 +41,9 @@ export default buildRoutes(function () {
     this.route('food-trucks', function () {
         this.route('index', { path: '/' }, function () {});
     });
-    this.route('promotions');
+    this.route('promotions', function () {
+        this.route('push-notifications', { path: '/' });
+    });
     this.route('coupons');
     this.route('broadcast');
     this.route('pages');

package/addon/styles/storefront-engine.css

@@ -106,3 +106,7 @@ td.network-store-name-column > div > svg {
     align-items: center;
     width: 48%;
 }
+
+.min-h-38px {
+    min-height: 38px;
+}

package/addon/templates/application.hbs

@@ -40,6 +40,13 @@
             @visible="storefront see food-truck"
             disabled={{not this.activeStore.id}}
         >{{t "storefront.sidebar.food-trucks"}}</Layout::Sidebar::Item>
+        <Layout::Sidebar::Item
+            @route="console.storefront.promotions"
+            @icon="bullhorn"
+            @permission="storefront view promotions"
+            @visible="storefront see promotions"
+            disabled={{not this.activeStore.id}}
+        >{{t "storefront.sidebar.promotions"}}</Layout::Sidebar::Item>
         <Layout::Sidebar::Item
             @route="console.storefront.settings"
             @icon="cogs"