@fleetbase/storefront-engine 0.2.4 → 0.2.6

package/README.md

@@ -15,10 +15,10 @@ This monorepo contains both the frontend and backend components of the Storefron
 
 ### Requirements
 
-- PHP 7.3.0 or above
-- Ember.js v3.24 or above
-- Ember CLI v3.24 or above
-- Node.js v14 or above
+* PHP 7.3.0 or above
+* Ember.js v4.8 or above
+* Ember CLI v4.8 or above
+* Node.js v18 or above
 
 ## Structure
 

package/addon/components/modals/import-products.hbs

@@ -3,7 +3,7 @@
         {{#if @options.isProcessing}}
             <div class="min-h-56 dropzone w-full rounded px-4 py-8 min-h text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500">
                 <div class="flex items-center justify-center py-5">
-                    <PageLoader class="text-sm dar:text-gray-100" @loadingMessage="Processing import..." />
+                    <Spinner class="text-sm dark:text-gray-100" @loadingMessage="Processing import..." />
                 </div>
             </div>
         {{else}}

package/addon/components/schedule-manager.hbs

@@ -2,9 +2,9 @@
     {{#each-in this.schedule as |day hours|}}
         <div class="content-panel {{@contentPanelClass}} shadow-sm">
             <div class="content-panel-header items-center {{@contentPanelHeaderClass}}">
-                <h4 class="font-semibold dark:text-gray-100">{{day}}</h4>
+                <h4 class="font-semibold text-sm dark:text-gray-100">{{day}}</h4>
                 <div>
-                    <Button @icon="calendar-week" @text="Add Hours" @onClick={{fn this.addHours @subject day}} class="{{@addHoursButtonClass}}" />
+                    <Button @icon="calendar-week" @text="Add Hours" @textClass="truncate text-xs" @size="sm" @onClick={{fn this.addHours @subject day}} class="{{@addHoursButtonClass}}" />
                 </div>
             </div>
             <div class="content-panel-body {{@contentPanelBodyClass}}">

package/addon/components/widget/customers.hbs

@@ -1,4 +1,4 @@
-<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}}>
+<ContentPanel @title={{this.title}} @titleStatusRight={{this.customers.length}} @titleStatusRightClass="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" />

package/addon/components/widget/customers.js

@@ -1,16 +1,19 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
-import { action, computed } from '@ember/object';
+import { action } from '@ember/object';
+import setComponentArg from '@fleetbase/ember-core/utils/set-component-arg';
 
 export default class WidgetCustomersComponent extends Component {
     @service store;
     @service storefront;
     @tracked isLoading = true;
     @tracked customers = [];
+    @tracked title = 'Recent Customers';
 
-    @computed('args.title') get title() {
-        return this.args.title || 'Recent Customers';
+    constructor(owner, { title }) {
+        super(...arguments);
+        setComponentArg(this, 'title', title);
     }
 
     @action async getCustomers() {
@@ -28,7 +31,7 @@ export default class WidgetCustomersComponent extends Component {
         this.isLoading = true;
 
         return new Promise((resolve) => {
-            const storefront = this.storefront?.activeStore?.public_id;
+            const storefront = this.storefront.getActiveStore('public_id');
 
             if (!storefront) {
                 this.isLoading = false;

package/addon/components/widget/orders.js

@@ -17,6 +17,10 @@ export default class WidgetOrdersComponent extends Component {
         return this.args.title ?? 'Recent Orders';
     }
 
+    constructor() {
+        super(...arguments);
+    }
+
     @action async setupWidget() {
         later(
             this,

package/addon/controllers/base-controller.js

@@ -0,0 +1,31 @@
+import Controller from '@ember/controller';
+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;
+
+    /**
+     * 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);
+    }
+}

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

@@ -1,8 +1,8 @@
-import Controller from '@ember/controller';
+import BaseController from '@fleetbase/storefront-engine/controllers/base-controller';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 
-export default class NetworksIndexNetworkController extends Controller {
+export default class NetworksIndexNetworkController extends BaseController {
     @service modalsManager;
 
     @action transitionBack({ closeOverlay }) {

package/addon/controllers/networks/index.js

@@ -1,4 +1,5 @@
-import Controller, { inject as controller } from '@ember/controller';
+import BaseController from '@fleetbase/storefront-engine/controllers/base-controller';
+import { inject as controller } from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
@@ -6,7 +7,7 @@ import { isBlank } from '@ember/utils';
 import { timeout } from 'ember-concurrency';
 import { task } from 'ember-concurrency-decorators';
 
-export default class NetworksIndexController extends Controller {
+export default class NetworksIndexController extends BaseController {
     /**
      * Inject the `NetworksIndexNetworkStoresController` controller
      *

package/addon/controllers/products/index/category/new.js

@@ -1,4 +1,5 @@
-import Controller, { inject as controller } from '@ember/controller';
+import BaseController from '@fleetbase/storefront-engine/controllers/base-controller';
+import { inject as controller } from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
 import { isArray } from '@ember/array';
 import { action } from '@ember/object';
@@ -6,7 +7,7 @@ import { alias } from '@ember/object/computed';
 import { underscore } from '@ember/string';
 import { inject as service } from '@ember/service';
 
-export default class ProductsIndexCategoryNewController extends Controller {
+export default class ProductsIndexCategoryNewController extends BaseController {
     @controller('products.index.category') productsIndexCategoryController;
     @service notifications;
     @service modalsManager;
@@ -16,6 +17,7 @@ export default class ProductsIndexCategoryNewController extends Controller {
     @service fetch;
     @service loader;
     @service crud;
+    @service hostRouter;
     @alias('storefront.activeStore') activeStore;
     @tracked product = this.store.createRecord('product', { store_uuid: this.activeStore.id, currency: this.activeStore.currency, tags: [], meta_array: [] });
     @tracked uploadQueue = [];
@@ -57,15 +59,13 @@ export default class ProductsIndexCategoryNewController extends Controller {
         this.product
             .serializeMeta()
             .save()
-            .then((product) => {
+            .then(() => {
                 this.loader.removeLoader(loader);
                 this.isSaving = false;
                 this.notifications.success('New product created successfully!');
 
                 return this.transitionToRoute('products.index.category').then(() => {
-                    console.log(this.productsIndexCategoryController);
-                    console.log(this.productsIndexCategoryController.products);
-                    this.productsIndexCategoryController?.products?.pushObject(product);
+                    return this.hostRouter.refresh();
                 });
             })
             .catch((error) => {
@@ -80,8 +80,7 @@ export default class ProductsIndexCategoryNewController extends Controller {
             this.product.tags = [];
         }
 
-        this.product.tags?.pushObject(tag);
-        console.log('this.product.tags', this.product.tags);
+        this.product.tags.pushObject(tag);
     }
 
     @action removeTag(index) {
@@ -89,6 +88,12 @@ export default class ProductsIndexCategoryNewController extends Controller {
     }
 
     @action queueFile(file) {
+        // since we have dropzone and upload button within dropzone validate the file state first
+        // as this method can be called twice from both functions
+        if (['queued', 'failed', 'timed_out', 'aborted'].indexOf(file.state) === -1) {
+            return;
+        }
+
         this.uploadQueue.pushObject(file);
         this.fetch.uploadFile.perform(
             file,
@@ -184,7 +189,7 @@ export default class ProductsIndexCategoryNewController extends Controller {
                         });
                     });
 
-                    product.addon_categories = productAddonCategories;
+                    product.addon_categories.pushObjects(productAddonCategories);
                 },
             });
         });
@@ -258,8 +263,6 @@ export default class ProductsIndexCategoryNewController extends Controller {
         } else {
             productAddonCategory.excluded_addons.pushObject(id);
         }
-
-        console.log(productAddonCategory);
     }
 
     @action addMetaField() {

package/addon/controllers/products/index/category.js

@@ -1,4 +1,4 @@
-import Controller from '@ember/controller';
+import BaseController from '@fleetbase/storefront-engine/controllers/base-controller';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
@@ -7,7 +7,7 @@ import { isBlank } from '@ember/utils';
 import { timeout } from 'ember-concurrency';
 import { task } from 'ember-concurrency-decorators';
 
-export default class ProductsIndexCategoryController extends Controller {
+export default class ProductsIndexCategoryController extends BaseController {
     @service modalsManager;
     @service fetch;
     @service hostRouter;

package/addon/controllers/products/index/index.js

@@ -1,4 +1,4 @@
-import Controller from '@ember/controller';
+import BaseController from '@fleetbase/storefront-engine/controllers/base-controller';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
@@ -6,7 +6,7 @@ import { isBlank } from '@ember/utils';
 import { timeout } from 'ember-concurrency';
 import { task } from 'ember-concurrency-decorators';
 
-export default class ProductsIndexIndexController extends Controller {
+export default class ProductsIndexIndexController extends BaseController {
     /**
      * Inject the `filters` service
      *

package/addon/controllers/products/index.js

@@ -1,15 +1,14 @@
-import Controller from '@ember/controller';
+import BaseController from '@fleetbase/storefront-engine/controllers/base-controller';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { alias } from '@ember/object/computed';
 import { dasherize } from '@ember/string';
 
-export default class ProductsIndexController extends Controller {
+export default class ProductsIndexController extends BaseController {
     @service store;
     @service modalsManager;
     @service currentUser;
-    @service modalsManager;
     @service notifications;
     @service fetch;
     @service hostRouter;

package/addon/models/network.js

@@ -15,7 +15,6 @@ export default class NetworkModel extends Model {
     @hasMany('store') stores;
     @hasMany('notification-channel') notification_channels;
     @hasMany('gateway') gateways;
-    @hasMany('store') stores;
     @belongsTo('file') logo;
     @belongsTo('file') backdrop;
 

package/addon/models/product-addon-category.js

@@ -1,5 +1,6 @@
 import Model, { attr, belongsTo } from '@ember-data/model';
 import { format, formatDistanceToNow } from 'date-fns';
+import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
 
 export default class ProductAddonCategoryModel extends Model {
     /** @ids */
@@ -19,7 +20,15 @@ export default class ProductAddonCategoryModel extends Model {
 
     /** @methods */
     toJSON() {
-        return this.serialize();
+        return {
+            uuid: this.id,
+            category_uuid: this.category_uuid,
+            product_uuid: this.product_uuid,
+            name: this.name,
+            excluded_addons: getWithDefault(this, 'excluded_addons', []),
+            updated_at: this.updated_at,
+            created_at: this.created_at,
+        };
     }
 
     /** @computed */

package/addon/models/product-variant.js

@@ -4,8 +4,6 @@ import { format, formatDistanceToNow } from 'date-fns';
 export default class ProductVariantModel extends Model {
     /** @ids */
     @attr('string') product_uuid;
-    @attr('string') created_by_uuid;
-    @attr('string') company_uuid;
 
     /** @relationships */
     @hasMany('product-variant-option') options;

package/addon/models/product.js

@@ -20,7 +20,7 @@ export default class ProductModel extends Model {
     @belongsTo('file') primary_image;
     @hasMany('file') files;
     @hasMany('product-variant', { async: false }) variants;
-    @hasMany('product-addon-category') addon_categories;
+    @hasMany('product-addon-category', { async: false }) addon_categories;
     @hasMany('product-hour') hours;
 
     /** @attributes */
@@ -56,7 +56,40 @@ export default class ProductModel extends Model {
 
     /** @methods */
     toJSON() {
-        return this.serialize();
+        return {
+            uuid: this.id,
+            created_by_uuid: this.created_by_uuid,
+            company_uuid: this.company_uuid,
+            store_uuid: this.store_uuid,
+            category_uuid: this.category_uuid,
+            primary_image_uuid: this.primary_image_uuid,
+            public_id: this.public_id,
+            name: this.name,
+            category: this.category,
+            primary_image: this.primary_image,
+            files: this.files,
+            variants: this.variants,
+            addon_categories: this.addon_categories,
+            hours: this.hours,
+            description: this.description,
+            primary_image_url: this.primary_image_url,
+            sku: this.sku,
+            currency: this.currency,
+            price: this.price,
+            sale_price: this.sale_price,
+            tags: this.tags,
+            youtube_urls: this.youtube_urls,
+            translations: this.translations,
+            is_on_sale: this.is_on_sale,
+            is_recommended: this.is_recommended,
+            is_service: this.is_service,
+            is_available: this.is_available,
+            is_bookable: this.is_bookable,
+            status: this.status,
+            slug: this.slug,
+            created_at: this.created_at,
+            updated_at: this.updated_at,
+        };
     }
 
     /** @computed */

package/addon/routes/customers/index.js

@@ -1,8 +1,11 @@
 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;
+    @service storefront;
 
     queryParams = {
         page: { refreshModel: true },
@@ -19,7 +22,14 @@ 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);
+        }
+    }
+
     model(params) {
-        return this.store.query('customer', params);
+        return this.store.query('customer', { ...params, storefront: this.storefront.getActiveStore('public_id') });
     }
 }

package/addon/routes/networks/index.js

@@ -1,5 +1,7 @@
 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;
@@ -13,6 +15,13 @@ 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);
+        }
+    }
+
     model(params) {
         return this.store.query('network', params);
     }

package/addon/routes/orders/index.js

@@ -1,8 +1,11 @@
 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;
+    @service storefront;
 
     queryParams = {
         page: { refreshModel: true },
@@ -23,7 +26,14 @@ 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);
+        }
+    }
+
     model(params) {
-        return this.store.query('order', params);
+        return this.store.query('order', { ...params, storefront: this.storefront.getActiveStore('public_id') });
     }
 }

package/addon/routes/products/index.js

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

package/addon/serializers/product.js

@@ -1,5 +1,6 @@
 import ApplicationSerializer from '@fleetbase/ember-core/serializers/application';
 import { EmbeddedRecordsMixin } from '@ember-data/serializer/rest';
+import { isArray } from '@ember/array';
 
 export default class ProductSerializer extends ApplicationSerializer.extend(EmbeddedRecordsMixin) {
     /**
@@ -17,4 +18,19 @@ export default class ProductSerializer extends ApplicationSerializer.extend(Embe
             category: { embedded: 'always' },
         };
     }
+
+    serializeHasMany(snapshot, json, relationship) {
+        let key = relationship.key;
+
+        if (key === 'addon_categories') {
+            const addonCategories = snapshot.record.get('addon_categories');
+
+            if (isArray(addonCategories)) {
+                json.addon_categories = addonCategories;
+            }
+            return;
+        }
+
+        return super.serializeHasMany(...arguments);
+    }
 }

package/addon/services/storefront.js

@@ -1,24 +1,86 @@
 import Service from '@ember/service';
 import Evented from '@ember/object/evented';
 import { inject as service } from '@ember/service';
+import { get } from '@ember/object';
 
+/**
+ * Service to manage storefront operations.
+ */
 export default class StorefrontService extends Service.extend(Evented) {
+    /**
+     * Ember service for data store.
+     * @type {Service}
+     */
     @service store;
+
+    /**
+     * Ember service for fetch operations.
+     * @type {Service}
+     */
     @service fetch;
+
+    /**
+     * Ember service for notifications.
+     * @type {Service}
+     */
     @service notifications;
+
+    /**
+     * Ember service for current user information.
+     * @type {Service}
+     */
     @service currentUser;
+
+    /**
+     * Ember service for managing modals.
+     * @type {Service}
+     */
     @service modalsManager;
+
+    /**
+     * Ember service for router operations.
+     * @type {Service}
+     */
     @service hostRouter;
 
+    /**
+     * Gets the active store.
+     * @returns {Object} The active store object.
+     */
     get activeStore() {
         return this.findActiveStore();
     }
 
+    /**
+     * Sets the active storefront.
+     * @param {Object} store - The store to set as active.
+     */
     setActiveStorefront(store) {
         this.currentUser.setOption('activeStorefront', store.id);
         this.trigger('storefront.changed', store);
     }
 
+    /**
+     * Gets the active store or a specific property of it.
+     * @param {string|null} property - The property to retrieve from the active store.
+     * @returns {Object|null} The active store or its specific property.
+     */
+    getActiveStore(property = null) {
+        if (this.activeStore) {
+            if (typeof property === 'string') {
+                return get(this.activeStore, property);
+            }
+
+            return this.activeStore;
+        }
+
+        return null;
+    }
+
+    /**
+     * Finds the active store based on the current user's settings.
+     * @returns {Object|null} The active store object or null if not found.
+     */
     findActiveStore() {
         const activeStoreId = this.currentUser.getOption('activeStorefront');
 
@@ -43,6 +105,11 @@ export default class StorefrontService extends Service.extend(Evented) {
         return activeStore;
     }
 
+    /**
+     * Alerts about an incoming order.
+     * @param {string} orderId - The ID of the incoming order.
+     * @param {Object} store - The store associated with the order.
+     */
     async alertIncomingOrder(orderId, store) {
         const order = await this.store.queryRecord('order', {
             public_id: orderId,
@@ -80,6 +147,9 @@ export default class StorefrontService extends Service.extend(Evented) {
         });
     }
 
+    /**
+     * Listens for incoming orders and handles them.
+     */
     async listenForIncomingOrders() {
         const store = this.findActiveStore();
 
@@ -109,6 +179,10 @@ export default class StorefrontService extends Service.extend(Evented) {
         this.hostRouter.on('routeWillChange', channel.close);
     }
 
+    /**
+     * Creates the first store with given options.
+     * @param {Object} [options={}] - Options for creating the first store.
+     */
     createFirstStore(options = {}) {
         const store = this.store.createRecord('store');
         const currency = this.currentUser.getWhoisProperty('currency.code');
@@ -151,6 +225,10 @@ export default class StorefrontService extends Service.extend(Evented) {
         });
     }
 
+    /**
+     * Creates a new storefront with given options.
+     * @param {Object} [options={}] - Options for creating the new storefront.
+     */
     createNewStorefront(options = {}) {
         const store = this.store.createRecord('store');
         const currency = this.currentUser.getWhoisProperty('currency.code');
@@ -191,6 +269,9 @@ export default class StorefrontService extends Service.extend(Evented) {
         });
     }
 
+    /**
+     * Plays an alert sound.
+     */
     playAlert() {
         // eslint-disable-next-line no-undef
         const alert = new Audio('/sounds/storefront_order_alert.mp3');

package/addon/templates/networks/index/network/stores.hbs

@@ -1,6 +1,6 @@
 <Layout::Section::Header @title="Stores" @searchQuery={{this.storeQuery}} @onSearch={{perform this.search}}>
-    <Button @type="primary" @icon="plus" @text="Add Stores" @onClick={{this.addStores}} @wrapperClass="mr-2" />
-    <Button @type="primary" @icon="envelope-open-text" @text="Invite Stores" @onClick={{this.invite}} />
+    <Button @type="primary" @icon="plus" @text="Add Stores" @textClass="truncate" @size="sm" @onClick={{this.addStores}} @wrapperClass="mr-2" />
+    <Button @type="primary" @icon="envelope-open-text" @textClass="truncate" @size="sm" @text="Invite Stores" @onClick={{this.invite}} />
 </Layout::Section::Header>
 
 <Layout::Section::Body>