@fleetbase/storefront-engine 0.1.5 → 0.1.7

package/addon/components/modals/add-store-to-category.hbs

@@ -0,0 +1,5 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <NetworkCategoryPicker @network={{@options.network}} @onSelect={{@options.onSelectCategory}} @onCreateNewCategory={{@options.createNewCategory}} @wrapperClass="mr-2" />
+    </div>
+</Modal::Default>

package/addon/components/modals/create-network-category.hbs

@@ -1,8 +1,13 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
+        <InputGroup @name="Parent category" @wrapperClass="border-b border-gray-200 dark:border-gray-700 pb-4 mb-3i">
+            <ModelSelect @modelName="category" @query={{hash for="storefront_network" owner_uuid=@options.network.id}} @selectedModel={{@options.parentCategory}} @placeholder="Select a parent category if any" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{@options.setParentCategory}} as |model|>
+                {{model.name}}
+            </ModelSelect>
+        </InputGroup>
         <InputGroup @name="Category name" @value={{@options.category.name}} @helpText="Enter a name for category" />
         <InputGroup @name="Category description" @value={{@options.category.description}} @helpText="Give your network category a brief description" />
-        <InputGroup @name="Category icon type" @wrapperClass="mb-0">
+        {{!-- <InputGroup @name="Category icon type" @wrapperClass="mb-0">
             <div class="flex flex-row dark:text-gray-100 mt-4">
                 <div class="flex flex-row items-center mr-4">
                     <RadioButton @radioClass="focus:ring-blue-500 mr-2" @radioId="image_icon_type" @value="image" @groupValue={{@options.iconType}} @name="icon_type" @changed={{fn (mut @options.iconType)}} />
@@ -14,35 +19,30 @@
                 </div>
             </div>
         </InputGroup>
-        <div>iconType: {{@options.iconType}}</div>
         <InputGroup @name="Category icon">
-            {{#if (eq @options.iconType "svg")}}
-                <FontAwesomeIconSelect @value={{@options.category.icon}} @onChange={{fn (mut @options.category.icon)}} @renderInPlace={{true}} />
-            {{else}}
-                <div class="w-32">
-                    <img src={{@options.category.icon_url}} alt={{@options.category.name}} class="w-full rounded-md" />
-                    <FileUpload @name="icons" @accept="image/*" @onFileAdded={{@options.uploadIcon}} as |queue|>
-                        <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default">
-                            {{#if queue.files.length}}
-                                <Spinner class="mr-1" />
-                                <span>
-                                    Uploading...
-                                </span>
-                            {{else}}
-                                <FaIcon @icon="image" class="mr-1" />
-                                <span>
-                                    Upload new
-                                </span>
-                            {{/if}}
-                        </a>
-                    </FileUpload>
-                    <a href="javascript:;" class="text-danger block mt-2" {{on "click" @options.clearImage}}>
-                        <FaIcon @icon="times" @prefix="fas" class="mr-1" />
-                        <span>Remove</span>
+            <div class="w-32">
+                <img src={{@options.category.icon_url}} alt={{@options.category.name}} class="w-full rounded-md" />
+                <FileUpload @name="icons" @accept="image/*" @onFileAdded={{@options.uploadIcon}} as |queue|>
+                    <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default">
+                        {{#if queue.files.length}}
+                            <Spinner class="mr-1" />
+                            <span>
+                                Uploading...
+                            </span>
+                        {{else}}
+                            <FaIcon @icon="image" class="mr-1" />
+                            <span>
+                                Upload new
+                            </span>
+                        {{/if}}
                     </a>
-                </div>
-            {{/if}}
-        </InputGroup>
+                </FileUpload>
+                <a href="javascript:;" class="text-danger block mt-2" {{on "click" @options.clearImage}}>
+                    <FaIcon @icon="times" @prefix="fas" class="mr-1" />
+                    <span>Remove</span>
+                </a>
+            </div>
+        </InputGroup> --}}
         <InputGroup>
             <TranslationsEditor @value={{@options.category.translations}} @defaultKeys={{array "name" "description"}} @onChange={{fn (mut @options.category.translations)}} />
         </InputGroup>

package/addon/components/modals/share-network.hbs

@@ -24,11 +24,11 @@
 
         <div class="rounded-md border dark:border-gray-800 dark:bg-gray-800 p-4">
             <h4 class="dark:text-gray-50 mb-4 font-semibold">Get link</h4>
-            <div class="input-group mb-0">
-                <ShortToggle @isToggled={{@options.network.options.shareable_link_enabled}} @onToggle={{@options.toggleShareableLink}} @label="Enable shareable link" @helpText="Anyone with this link is able to join your network" />
+            <div class="input-group mb-0i">
+                <Toggle @isToggled={{@options.network.options.shareable_link_enabled}} @onToggle={{@options.toggleShareableLink}} @label="Enable shareable link" @helpText="Anyone with this link is able to join your network" />
             </div>
             {{#if @options.network.options.shareable_link_enabled}}
-                <ClickToCopy class="mt-4 rounded-md border dark:border-gray-900 dark:bg-gray-900 truncate p-4 text-sm text-green-400 dark:text-green-300 text-center" @value={{@options.shareableLink}} />
+                <ClickToCopy class="mt-4 rounded-md border dark:border-gray-900 dark:bg-gray-900 truncate px-4 py-2.5 text-sm text-green-400 dark:text-green-300 text-center" @value={{@options.shareableLink}} />
             {{/if}}
         </div>
     </div>

package/addon/components/modals/store-details.hbs

@@ -0,0 +1,22 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-4 text-xs dark:text-gray-100">
+            <div class="field-info-container">
+                <div class="field-name">Name</div>
+                <div class="field-value">{{n-a @options.store.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Description</div>
+                <div class="field-value">{{n-a @options.store.description}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Tags</div>
+                <div class="field-value">{{n-a @options.store.tagsList}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Currency</div>
+                <div class="field-value">{{n-a @options.store.currency}}</div>
+            </div>
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/store-form.hbs

@@ -0,0 +1,22 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @id="storefront_name_input" @name="Name" @value={{@options.store.name}} @placeholder="Storefront Name" @helpText="The name of your store." />
+        <InputGroup @name="Description" @value={{@options.store.description}} @placeholder="Storefront Description" @helpText="Give your store a brief description to let users know what you sell." />
+        <InputGroup @name="Tags">
+            <TagInput class="form-input" @placeholder="Add tags" @allowSpacesInTags={{true}} @tags={{@options.store.tags}} @addTag={{this.addTag}} @removeTagAtIndex={{this.removeTag}} as |tag|>
+                {{tag}}
+            </TagInput>
+        </InputGroup>
+        <InputGroup @name="Currency">
+            <CurrencySelect @value={{@options.store.currency}} @onSelect={{fn (mut @options.store.currency)}} @triggerClass="w-full form-select" />
+        </InputGroup>
+
+        <div class="store-boolean-settings">
+            <div class="input-group">
+                <Toggle @isToggled={{@options.store.online}} @onToggle={{fn (mut @options.store.online)}}>
+                    <FaIcon @icon="plug" class="text-gray-600 dark:text-gray-400 mx-2" /><span class="dark:text-gray-100 text-sm">Online</span>
+                </Toggle>
+            </div>
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/store-form.js

@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+
+export default class ModalsStoreFormComponent extends Component {
+    get activeStore() {
+        return this.args.options.store;
+    }
+
+    @action addTag(tag) {
+        if (!isArray(this.activeStore.tags)) {
+            this.activeStore.tags = [];
+        }
+
+        this.activeStore.tags?.pushObject(tag);
+    }
+
+    @action removeTag(index) {
+        this.activeStore.tags?.removeAt(index);
+    }
+}

package/addon/components/network-category-picker.hbs

@@ -0,0 +1,40 @@
+<DropdownButton @renderInPlace={{true}} @size="xs" @type="magic" @icon="folder-tree" @iconSize="sm" @text={{this.buttonTitle}} @buttonClass={{concat "w-full truncate w-48" " " @buttonClass}} @buttonWrapperClass={{concat "w-full" " " @buttonWrapperClass}} @wrapperClass={{@wrapperClass}} as |dd|>
+    <div role="menu" class="store-selector-dropdown-menu next-dd-menu py-1">
+        <div role="group" class="px-1 overflow-y-scroll max-h-72">
+            {{#if this.isLoading}}
+                <div class="text-sm flex flex-row items-center px-3 py-0.5 border-0 my-1">
+                    <Spinner class="mr-2i" />
+                    <span class="dark:text-gray-100 test-sm">Loading...</span>
+                </div>
+            {{else}}
+                {{#if this.selectedCategory}}
+                    <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" this.loadParentCategories}}>
+                        <FaIcon @icon="arrow-left" class="mr-2" />
+                        <span>Back</span>
+                    </a>
+                {{/if}}
+                {{#each this.categories as |category|}}
+                    <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" (fn this.onSelectCategory category)}}>
+                        {{category.name}}
+                    </a>
+                {{else}}
+                    <div class="text-sm flex flex-row items-center px-3 py-0.5 border-0 my-1 truncate">
+                        {{#if this.selectedCategory}}
+                            <span>No subcategories for {{this.selectedCategory.name}}</span>
+                        {{else}}
+                            <span>No categories for this network</span>
+                        {{/if}}
+                    </div>
+                {{/each}}
+            {{/if}}
+        </div>
+        <div class="px-1">
+            <div class="next-dd-menu-seperator"></div>
+            <div role="group" class="px-1">
+                <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" (dropdown-fn dd this.onCreateNewCategory)}}>
+                    Create a new category
+                </a>
+            </div>
+        </div>
+    </div>
+</DropdownButton>

package/addon/components/network-category-picker.js

@@ -0,0 +1,83 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import isModel from '@fleetbase/ember-core/utils/is-model';
+
+export default class NetworkCategoryPickerComponent extends Component {
+    @service fetch;
+    @service store;
+    @service notifications;
+    @tracked categories = [];
+    @tracked selectedCategory;
+    @tracked network;
+    @tracked isLoading = false;
+    @tracked buttonTitle = null;
+
+    constructor() {
+        super(...arguments);
+        this.network = this.args.network;
+        this.category = this.args.category;
+        this.setButtonTitle(this.category);
+        this.loadCategories(this.category);
+    }
+
+    setButtonTitle(selectedCategory) {
+        let buttonTitle = this.args.buttonTitle ?? 'Select Category';
+
+        if (selectedCategory) {
+            buttonTitle = selectedCategory.name;
+        }
+
+        this.buttonTitle = buttonTitle;
+    }
+
+    @action loadCategories(parentCategory) {
+        const queryParams = {
+            owner_uuid: this.network.id,
+            parents_only: parentCategory ? false : true,
+            with_subcategories: true,
+            for: 'storefront_network',
+        };
+
+        if (isModel(parentCategory)) {
+            queryParams.parent = parentCategory.id;
+            queryParams.with_parent = true;
+        }
+
+        this.isLoading = true;
+        this.store
+            .query('category', queryParams)
+            .then((categories) => {
+                this.categories = categories.toArray();
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action onSelectCategory(category) {
+        this.selectedCategory = category;
+        this.setButtonTitle(category);
+
+        if (typeof this.args.onSelect === 'function') {
+            this.args.onSelect(category);
+        }
+
+        this.loadCategories(category);
+    }
+
+    @action onCreateNewCategory() {
+        if (typeof this.args.onCreateNewCategory === 'function') {
+            this.args.onCreateNewCategory(this, this.selectedCategory);
+        }
+    }
+
+    @action async loadParentCategories() {
+        if (this.selectedCategory.parent) {
+            return this.onSelectCategory(this.selectedCategory.parent);
+        }
+
+        this.onSelectCategory(null);
+    }
+}

package/addon/components/store-selector.hbs

@@ -1,11 +1,13 @@
 {{#if @activeStore}}
     <DropdownButton @renderInPlace={{true}} @size="xs" @type="primary" @icon="store" @iconSize="sm" @text={{@activeStore.name}} @buttonClass={{concat "w-full " @buttonClass}} @buttonWrapperClass={{concat "w-full " @buttonWrapperClass}} @wrapperClass={{@wrapperClass}} as |dd|>
-        <div role="menu" class="next-dd-menu py-1">
-            <div role="group" class="px-1 overflow-y-scroll" {{set-height "300px"}}>
+        <div role="menu" class="store-selector-dropdown-menu next-dd-menu py-1">
+            <div role="group" class="px-1 overflow-y-scroll max-h-72">
                 {{#each @stores as |store|}}
                     <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" (dropdown-fn dd this.onSwitchStore store)}}>
                         {{or store.name "-"}}
                     </a>
+                {{else}}
+                    <div class="next-dd-item" role="menuitem">No stores to select</div>
                 {{/each}}
             </div>
             <div class="px-1">

package/addon/components/widget/orders.js

@@ -1,7 +1,7 @@
 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, computed, get } from '@ember/object';
 import { later } from '@ember/runloop';
 
 export default class WidgetOrdersComponent extends Component {
@@ -26,8 +26,15 @@ export default class WidgetOrdersComponent extends Component {
             100
         );
 
-        this.storefront.on('order.broadcasted', this.reloadOrders);
-        this.storefront.on('storefront.changed', this.reloadOrders);
+        // reload orders when new order income
+        this.storefront.on('order.broadcasted', () => {
+            this.reloadOrders();
+        });
+
+        // reload orders when store changes
+        this.storefront.on('storefront.changed', () => {
+            this.reloadOrders();
+        });
     }
 
     @action async reloadOrders(params = {}) {
@@ -52,27 +59,25 @@ export default class WidgetOrdersComponent extends Component {
         this.isLoading = true;
 
         return new Promise((resolve) => {
-            const storefront = this.storefront?.activeStore?.public_id;
+            const storefront = get(this.storefront, 'activeStore.public_id');
 
             if (!storefront) {
                 this.isLoading = false;
                 return resolve([]);
             }
 
+            const queryParams = {
+                storefront,
+                limit: 14,
+                sort: '-created_at',
+                ...params,
+            };
+
             this.fetch
-                .get(
-                    'orders',
-                    {
-                        storefront,
-                        limit: 14,
-                        sort: '-created_at',
-                        ...params,
-                    },
-                    {
-                        namespace: 'storefront/int/v1',
-                        normalizeToEmberData: true,
-                    }
-                )
+                .get('orders', queryParams, {
+                    namespace: 'storefront/int/v1',
+                    normalizeToEmberData: true,
+                })
                 .then((orders) => {
                     this.isLoading = false;
 

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

@@ -3,27 +3,103 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
 import { action } from '@ember/object';
-import getPodMethods from '@fleetbase/console/utils/get-pod-methods';
+import getPodMethods from '@fleetbase/ember-core/utils/get-pod-methods';
 
+/**
+ * NetworksIndexNetworkIndexController
+ *
+ * This controller handles the logic for managing networks, gateways, and notification channels.
+ *
+ * @class NetworksIndexNetworkIndexController
+ * @extends Controller
+ */
 export default class NetworksIndexNetworkIndexController extends Controller {
+    /**
+     * Controller for managing gateways.
+     *
+     * @property {Controller} gatewaysController
+     */
     @controller('settings.gateways') gatewaysController;
+
+    /**
+     * Controller for managing notifications.
+     *
+     * @property {Controller} notificationsController
+     */
     @controller('settings.notifications') notificationsController;
+
+    /**
+     * Notifications service to handle notification logic.
+     *
+     * @property {Service} notifications
+     */
     @service notifications;
+
+    /**
+     * Fetch service to handle file uploads and other network requests.
+     *
+     * @property {Service} fetch
+     */
     @service fetch;
+
+    /**
+     * Proof of delivery methods.
+     *
+     * @property {Array} podMethods
+     */
     @tracked podMethods = getPodMethods();
+
+    /**
+     * Loading state, indicating whether a network request is in progress.
+     *
+     * @property {Boolean} isLoading
+     */
     @tracked isLoading = false;
+
+    /**
+     * Alias for model.gateways, representing the gateways associated with the network.
+     *
+     * @property {Array} gateways
+     */
     @alias('model.gateways') gateways;
+
+    /**
+     * Alias for model.notification_channels, representing the notification channels associated with the network.
+     *
+     * @property {Array} channels
+     */
     @alias('model.notification_channels') channels;
 
+    /**
+     * Save network settings.
+     *
+     * @method saveSettings
+     * @public
+     */
     @action saveSettings() {
         this.isLoading = true;
 
-        this.model.save().then(() => {
-            this.notifications.success('Changes saved');
-            this.isLoading = false;
-        });
+        this.model
+            .save()
+            .then(() => {
+                this.notifications.success('Changes to network saved.');
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
     }
 
+    /**
+     * Upload a file.
+     *
+     * @method uploadFile
+     * @param {String} type - Type of the file.
+     * @param {File} file - File to upload.
+     * @public
+     */
     @action uploadFile(type, file) {
         const prefix = type.replace('storefront_', '');
 
@@ -32,23 +108,29 @@ export default class NetworksIndexNetworkIndexController extends Controller {
             {
                 path: `uploads/storefront/${this.model.id}/${type}`,
                 key_uuid: this.model.id,
-                key_type: `network:storefront`,
+                key_type: `storefront:network`,
                 type,
             },
             (uploadedFile) => {
                 this.model.setProperties({
                     [`${prefix}_uuid`]: uploadedFile.id,
-                    [`${prefix}_url`]: uploadedFile.s3url,
+                    [`${prefix}_url`]: uploadedFile.url,
                     [prefix]: uploadedFile,
                 });
             }
         );
     }
 
+    /**
+     * Create a new payment gateway.
+     *
+     * @method createGateway
+     * @public
+     */
     @action createGateway() {
         const gateway = this.store.createRecord('gateway', {
             owner_uuid: this.model.id,
-            owner_type: 'network:storefront',
+            owner_type: 'storefront:network',
         });
 
         this.editGateway(gateway, {
@@ -69,6 +151,14 @@ export default class NetworksIndexNetworkIndexController extends Controller {
         });
     }
 
+    /**
+     * Edit a payment gateway.
+     *
+     * @method editGateway
+     * @param {Object} gateway - The gateway object to edit.
+     * @param {Object} [options={}] - Optional parameters for editing the gateway.
+     * @public
+     */
     @action editGateway(gateway, options = {}) {
         if (options === null) {
             options = {};
@@ -87,14 +177,26 @@ export default class NetworksIndexNetworkIndexController extends Controller {
         return this.gatewaysController.editGateway(gateway, options);
     }
 
+    /**
+     * Delete a payment gateway.
+     *
+     * @method deleteGateway
+     * @public
+     */
     @action deleteGateway() {
         return this.gatewaysController.deleteGateway(...arguments);
     }
 
+    /**
+     * Create a new notification channel.
+     *
+     * @method createChannel
+     * @public
+     */
     @action createChannel() {
         const channel = this.store.createRecord('notification-channel', {
             owner_uuid: this.model.id,
-            owner_type: 'network:storefront',
+            owner_type: 'storefront:network',
         });
 
         this.editChannel(channel, {
@@ -115,6 +217,14 @@ export default class NetworksIndexNetworkIndexController extends Controller {
         });
     }
 
+    /**
+     * Edit a notification channel.
+     *
+     * @method editChannel
+     * @param {Object} channel - The channel object to edit.
+     * @param {Object} [options={}] - Optional parameters for editing the channel.
+     * @public
+     */
     @action editChannel(channel, options = {}) {
         if (options === null) {
             options = {};
@@ -133,10 +243,24 @@ export default class NetworksIndexNetworkIndexController extends Controller {
         return this.notificationsController.editChannel(channel, options);
     }
 
+    /**
+     * Delete a notification channel.
+     *
+     * @method deleteChannel
+     * @public
+     */
     @action deleteChannel() {
         return this.notificationsController.deleteChannel(...arguments);
     }
 
+    /**
+     * Make an alertable action.
+     *
+     * @method makeAlertable
+     * @param {String} reason - Reason for the alert.
+     * @param {Array} models - Models associated with the alert.
+     * @public
+     */
     @action makeAlertable(reason, models) {
         if (!this.model.alertable || !this.model.alertable?.length) {
             this.model.set('alertable', {});