@fleetbase/storefront-engine 0.3.31 → 0.4.1

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

@@ -3,67 +3,18 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action, set } from '@ember/object';
 import { isBlank } from '@ember/utils';
-import { timeout } from 'ember-concurrency';
-import { task } from 'ember-concurrency-decorators';
+import { timeout, task } from 'ember-concurrency';
 import createShareableLink from '../../../../utils/create-shareable-link';
 import isEmail from '@fleetbase/ember-core/utils/is-email';
 import isModel from '@fleetbase/ember-core/utils/is-model';
 
 export default class NetworksIndexNetworkStoresController extends Controller {
-    /**
-     * Inject the `notifications` service
-     *
-     * @var {Service}
-     * @memberof NetworksIndexNetworkStoresController
-     */
     @service notifications;
-
-    /**
-     * Inject the `intl` service
-     *
-     * @var {Service}
-     * @memberof NetworksIndexNetworkStoresController
-     */
     @service intl;
-
-    /**
-     * Inject the `modals-manager` service
-     *
-     * @var {Service}
-     * @memberof NetworksIndexNetworkStoresController
-     */
     @service modalsManager;
-
-    /**
-     * Inject the `crud` service
-     *
-     * @var {Service}
-     * @memberof NetworksIndexNetworkStoresController
-     */
     @service crud;
-
-    /**
-     * Inject the `fetch` service
-     *
-     * @var {Service}
-     * @memberof NetworksIndexNetworkStoresController
-     */
     @service fetch;
-
-    /**
-     * Inject the `store` service
-     *
-     * @var {Service}
-     * @memberof NetworksIndexNetworkStoresController
-     */
     @service store;
-
-    /**
-     * Inject the `hostRouter` service
-     *
-     * @var {Service}
-     * @memberof NetworksIndexNetworkStoresController
-     */
     @service hostRouter;
 
     /**
@@ -122,12 +73,25 @@ export default class NetworksIndexNetworkStoresController extends Controller {
     @tracked network;
 
     /**
-     * The loading state.
+     * The stores loaded.
+     *
+     * @memberof NetworksIndexNetworkStoresController
+     */
+    @tracked stores = [];
+
+    /**
+     * The category picker component context.
+     *
+     * @memberof NetworksIndexNetworkStoresController
+     */
+    @tracked categoryPicker;
+
+    /**
+     * The current category model instance.
      *
-     * @var {Boolean}
      * @memberof NetworksIndexNetworkStoresController
      */
-    @tracked isLoading = false;
+    @tracked categoryModel;
 
     /**
      * All columns applicable for network stores
@@ -144,6 +108,7 @@ export default class NetworksIndexNetworkStoresController extends Controller {
             filterable: true,
             filterComponent: 'filter/string',
             showOnlineIndicator: true,
+            cellClassNames: 'network-store-name-column',
         },
         {
             label: this.intl.t('storefront.common.id'),
@@ -208,6 +173,11 @@ export default class NetworksIndexNetworkStoresController extends Controller {
                     label: this.intl.t('storefront.networks.index.network.stores.assign-category'),
                     fn: this.assignStoreToCategory,
                 },
+                {
+                    label: this.intl.t('storefront.networks.index.network.stores.remove-category'),
+                    fn: this.removeStoreCategory,
+                    isVisible: (store) => store.category,
+                },
                 {
                     separator: true,
                 },
@@ -247,6 +217,10 @@ export default class NetworksIndexNetworkStoresController extends Controller {
         this.storeQuery = value;
     }
 
+    @action setCategoryPickerContext(context) {
+        this.categoryPicker = context;
+    }
+
     /**
      * Selects a category and assigns its ID to the current category property.
      * If the selected category is null, the category property is set to null.
@@ -255,6 +229,8 @@ export default class NetworksIndexNetworkStoresController extends Controller {
      * @param {CategoryModel|null} selectedCategory - The selected category object containing the ID.
      */
     @action selectCategory(selectedCategory) {
+        this.categoryModel = selectedCategory;
+
         if (selectedCategory) {
             this.category = selectedCategory.id;
         } else {
@@ -285,6 +261,36 @@ export default class NetworksIndexNetworkStoresController extends Controller {
         });
     }
 
+    /**
+     * Displays a confirmation modal to remove a specified store from the network.
+     * Allows the user to confirm the removal.
+     *
+     * @action
+     * @param {StoreModel} store - The store object to be removed.
+     */
+    @action async removeStoreCategory(store) {
+        this.modalsManager.confirm({
+            title: this.intl.t('storefront.networks.index.network.stores.remove-store-category'),
+            body: this.intl.t('storefront.networks.index.network.stores.remove-store-category-body', { storeName: store.name, categoryName: store.category?.get('name') }),
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await this.fetch.post(`networks/${this.network.id}/remove-store-category`, { store: store.id }, { namespace: 'storefront/int/v1' });
+                    await this.hostRouter.refresh();
+                    modal.done();
+                } catch (error) {
+                    modal.stopLoading();
+                    this.notifications.serverError(error);
+                }
+            },
+        });
+    }
+
     /**
      * Displays a modal to assign a store to a category or create a new category.
      * Allows the user to select a category, create a new one, or confirm the assignment.
@@ -516,19 +522,17 @@ export default class NetworksIndexNetworkStoresController extends Controller {
             acceptButtonIconPrefix: 'fas',
             declineButtonIcon: 'times',
             declineButtonIconPrefix: 'fas',
-            confirm: (modal) => {
+            confirm: async (modal) => {
                 modal.startLoading();
 
-                this.fetch
-                    .post(`networks/${this.network.id}/remove-stores`, { stores: [store.id] }, { namespace: 'storefront/int/v1' })
-                    .then(() => {
-                        this.stores.removeObject(store);
-                        modal.done();
-                    })
-                    .catch((error) => {
-                        modal.stopLoading();
-                        this.notifications.serverError(error);
-                    });
+                try {
+                    await this.fetch.post(`networks/${this.network.id}/remove-stores`, { stores: [store.id] }, { namespace: 'storefront/int/v1' });
+                    await this.hostRouter.refresh();
+                    modal.done();
+                } catch (error) {
+                    modal.stopLoading();
+                    this.notifications.serverError(error);
+                }
             },
         });
     }

package/addon/controllers/networks/index.js

@@ -4,8 +4,7 @@ import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { isBlank } from '@ember/utils';
-import { timeout } from 'ember-concurrency';
-import { task } from 'ember-concurrency-decorators';
+import { timeout, task } from 'ember-concurrency';
 
 export default class NetworksIndexController extends BaseController {
     /**

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

@@ -4,8 +4,7 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { dasherize } from '@ember/string';
 import { isBlank } from '@ember/utils';
-import { timeout } from 'ember-concurrency';
-import { task } from 'ember-concurrency-decorators';
+import { timeout, task } from 'ember-concurrency';
 
 export default class ProductsIndexCategoryController extends BaseController {
     @service intl;

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

@@ -3,8 +3,7 @@ import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { isBlank } from '@ember/utils';
-import { timeout } from 'ember-concurrency';
-import { task } from 'ember-concurrency-decorators';
+import { timeout, task } from 'ember-concurrency';
 
 export default class ProductsIndexIndexController extends BaseController {
     @service filters;

package/addon/controllers/settings/gateways.js

@@ -43,10 +43,15 @@ export default class SettingsGatewaysController extends Controller {
         const schemas = getGatewaySchemas();
         const schemaOptions = Object.keys(schemas);
 
+        let schema = null;
+        if (!gateway.get('isNew')) {
+            schema = schemas[gateway.code];
+        }
+
         this.modalsManager.show('modals/create-gateway', {
             title: this.intl.t('storefront.settings.gateways.edit-payment-gateway'),
             acceptButtonText: this.intl.t('storefront.settings.gateways.save-changes'),
-            schema: null,
+            schema,
             schemas,
             schemaOptions,
             gateway,

package/addon/controllers/settings/index.js

@@ -17,6 +17,7 @@ export default class SettingsIndexController extends Controller {
     @tracked isLoading = false;
     @tracked uploadQueue = [];
     @tracked uploadedFiles = [];
+    @tracked orderConfigs = [];
 
     @action addTag(tag) {
         if (!isArray(this.model.tags)) {

package/addon/controllers/settings/notifications.js

@@ -1,5 +1,4 @@
 import Controller from '@ember/controller';
-import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
 import { action, set } from '@ember/object';
@@ -14,7 +13,6 @@ export default class SettingsNotificationsController extends Controller {
     @service crud;
     @service storefront;
     @alias('storefront.activeStore') activeStore;
-    @tracked channels = [];
 
     @action createChannel() {
         const channel = this.store.createRecord('notification-channel', {
@@ -71,9 +69,9 @@ export default class SettingsNotificationsController extends Controller {
 
                 return channel
                     .save()
-                    .then((channel) => {
+                    .then(() => {
                         this.notifications.success(this.intl.t('storefront.settings.notification.new-notification-channel-added'));
-                        this.channels.pushObject(channel);
+                        this.hostRouter.refresh();
                     })
                     .catch((error) => {
                         // gateway.rollbackAttributes();
@@ -94,7 +92,7 @@ export default class SettingsNotificationsController extends Controller {
 
                 return channel.destroyRecord().then(() => {
                     // justincase
-                    this.channels.removeObject(channel);
+                    this.hostRouter.refresh();
                     modal.stopLoading();
                 });
             },

package/addon/models/network.js

@@ -10,6 +10,7 @@ export default class NetworkModel extends Model {
     @attr('string') company_uuid;
     @attr('string') logo_uuid;
     @attr('string') backdrop_uuid;
+    @attr('string') order_config_uuid;
 
     /** @relationships */
     @hasMany('store') stores;

package/addon/models/store.js

@@ -11,6 +11,7 @@ export default class StoreModel extends Model {
     @attr('string') company_uuid;
     @attr('string') logo_uuid;
     @attr('string') backdrop_uuid;
+    @attr('string') order_config_uuid;
 
     /** @relationships */
     @hasMany('notification-channel') notification_channels;

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

@@ -7,4 +7,9 @@ export default class NetworksIndexNetworkIndexRoute extends Route {
     model() {
         return this.modelFor('networks.index.network');
     }
+
+    async setupController(controller) {
+        super.setupController(...arguments);
+        controller.orderConfigs = await this.store.findAll('order-config');
+    }
 }

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

@@ -3,6 +3,7 @@ import { inject as service } from '@ember/service';
 
 export default class NetworksIndexNetworkStoresRoute extends Route {
     @service store;
+    @service hostRouter;
 
     queryParams = {
         category: { refreshModel: true },
@@ -23,10 +24,10 @@ export default class NetworksIndexNetworkStoresRoute extends Route {
         // set the network to controller
         controller.network = this.network;
 
-        // // load the network categories
-        // const categories = await this.store.query('category', { owner_uuid: network.id, parents_only: true, for: 'storefront_network' });
-
-        // // set the categories loaded
-        // controller.categories = categories.toArray();
+        // set the cateogry if set
+        const { category: categoryId } = this.paramsFor(this.routeName);
+        if (categoryId) {
+            controller.category = categoryId;
+        }
     }
 }

package/addon/routes/settings/index.js

@@ -24,4 +24,9 @@ export default class SettingsIndexRoute extends Route {
     afterModel(model) {
         model?.loadFiles();
     }
+
+    async setupController(controller) {
+        super.setupController(...arguments);
+        controller.orderConfigs = await this.store.findAll('order-config');
+    }
 }

package/addon/services/order-actions.js

@@ -215,6 +215,37 @@ export default class OrderActionsService extends Service {
         });
     }
 
+    markAsPreparing(order, callback) {
+        this.modalsManager.confirm({
+            title: this.intl.t('storefront.component.widget.orders.mark-as-preparing-modal-title'),
+            body: this.intl.t('storefront.component.widget.orders.mark-as-preparing-modal-body'),
+            acceptButtonText: this.intl.t('storefront.component.widget.orders.mark-as-preparing-accept-button-text'),
+            acceptButtonIcon: 'check',
+            acceptButtonScheme: 'success',
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await this.fetch.post('orders/preparing', { 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'),

package/addon/styles/storefront-engine.css

@@ -40,12 +40,14 @@
     max-width: 100%;
 }
 
+.status-badge.accepted-status-badge > span,
 .status-badge.pickup-ready-status-badge > span {
     background-color: #166534;
     border: 1px solid #15803d;
     color: #dcfce7;
 }
 
+.status-badge.accepted-status-badge > span svg,
 .status-badge.pickup-ready-status-badge > span svg {
     color: #86efac;
 }
@@ -60,12 +62,16 @@
     color: #fca5a5;
 }
 
+.status-badge.driver-picked-up-status-badge > span,
+.status-badge.driver-enroute-to-store-status-badge > span,
 .status-badge.draft-status-badge > span {
     background-color: #a16207;
     border: 1px solid #a16207;
     color: #fef9c3;
 }
 
+.status-badge.driver-picked-up-status-badge > span svg,
+.status-badge.driver-enroute-to-store-status-badge > span svg,
 .status-badge.draft-status-badge > span svg {
     color: #fef9c3;
 }
@@ -77,3 +83,26 @@ body[data-theme='dark'] .ui-tabs.overlay-content-panel > ul .ui-tab.active,
 body[data-theme='dark'] .ui-tabs.overlay-content-panel > nav .ui-tab.active {
     background-color: #202a37;
 }
+
+/** hotfix online indicator overflowing store name */
+td.network-store-name-column > div > svg {
+    margin-left: -0.7rem;
+    height: 0.5rem;
+    width: 0.5rem;
+}
+
+.storefront-datepicker .air-datepicker-buttons {
+    animation: slideIn 0.3s ease-out;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 0.5rem;
+    max-height: 235px;
+    overflow-y: auto;
+}
+
+.storefront-datepicker .air-datepicker-buttons .quick-select-btn {
+    display: flex;
+    align-items: center;
+    width: 48%;
+}

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

@@ -22,10 +22,23 @@
                 @placeholder={{t "storefront.networks.index.network.index.general-network-settings-form.description-placeholder"}}
                 @helpText={{t "storefront.networks.index.network.index.general-network-settings-form.description-help-text"}}
             />
+
             <InputGroup @name={{t "storefront.networks.index.network.index.general-network-settings-form.currency"}}>
                 <CurrencySelect @currency={{@model.currency}} @onCurrencyChange={{fn (mut @model.currency)}} @triggerClass="w-full form-select" />
             </InputGroup>
 
+            <InputGroup @name="Default Order Config" @helpText="Select the order config which will apply to all orders created for this network.">
+                <Select
+                    @value={{@model.order_config_uuid}}
+                    @options={{this.orderConfigs}}
+                    @optionValue="id"
+                    @optionLabel="name"
+                    @onSelect={{fn (mut @model.order_config_uuid)}}
+                    @placeholder="Select default order config"
+                    class="w-full"
+                />
+            </InputGroup>
+
             <ContentPanel @title={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.panel-title"}} @open={{false}} @pad={{true}}>
                 <InputGroup @name={{t "storefront.networks.index.network.index.general-network-settings-form.contact-social-panel.phone"}}>
                     <PhoneInput @value={{@model.phone}} @onInput={{fn (mut @model.phone)}} class="form-input w-full" />

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

@@ -19,6 +19,20 @@
 </Layout::Section::Header>
 
 <Layout::Section::Body>
-    <NetworkCategoryPicker @network={{this.network}} @onCreateNewCategory={{this.createNewCategory}} @onSelect={{this.selectCategory}} @wrapperClass="my-4 ml-9" />
+    <div class="flex flex-row items-center space-x-2">
+        <NetworkCategoryPicker
+            @network={{this.network}}
+            @category={{this.category}}
+            @onCreateNewCategory={{this.createNewCategory}}
+            @onSelect={{this.selectCategory}}
+            @onReady={{this.setCategoryPickerContext}}
+            @wrapperClass="w-64 my-4 ml-9"
+        />
+        {{#if this.categoryModel}}
+            <Button @icon="arrow-left" @size="xs" @onClick={{this.categoryPicker.loadParentCategories}} />
+            <Button @icon="cog" @text="Edit Category" @size="xs" @onClick={{fn this.editCategory this.categoryModel}} />
+            <Button @icon="trash" @text="Delete Category" @size="xs" @type="danger" @onClick={{fn this.deleteCategory this.categoryModel}} />
+        {{/if}}
+    </div>
     <Table @rows={{@model}} @columns={{this.columns}} @selectable={{true}} @canSelectAll={{true}} @onSetup={{fn (mut this.table)}} @tfoot={{false}} @selectAllColumnWidth={{20}} />
 </Layout::Section::Body>

package/addon/templates/networks/index.hbs

@@ -12,7 +12,7 @@
                             <Image src={{network.logo_url}} class="w-32" alt={{network.name}} @fallbackSrc="https://flb-assets.s3.ap-southeast-1.amazonaws.com/static/image-file-icon.png" />
                         </div>
                         <div class="border-t dark:border-gray-700 px-4 py-2">
-                            <div class="flex items-center justify-between">
+                            <div class="flex items-start justify-between">
                                 <div>
                                     <LinkTo @route="networks.index.network" @model={{network}} class="font-bold text-lg text-gray-700 dark:text-gray-100">{{network.name}}</LinkTo>
                                 </div>

package/addon/templates/settings/gateways.hbs

@@ -38,17 +38,28 @@
                         {{#each-in gateway.config as |key value|}}
                             {{#if (is-bool-value value)}}
                                 <div class="input-group">
-                                    <Checkbox @value={{value}} @label={{humanize key}} />
+                                    <Checkbox @value={{value}} @label={{humanize key}} @disabled={{true}} />
                                 </div>
                             {{else}}
                                 <InputGroup @name={{humanize key}}>
-                                    <Input class="form-input w-full" placeholder={{humanize key}} @value={{value}} />
+                                    <Input
+                                        @type={{if (can "storefront update gateway") "text" "password"}}
+                                        class="form-input w-full"
+                                        placeholder={{humanize key}}
+                                        @value={{value}}
+                                        disabled
+                                    />
                                 </InputGroup>
                             {{/if}}
                         {{/each-in}}
                     </div>
-                    <div>
-                        <Button @size="sm" @type="danger" @icon="trash" @text={{t "storefront.settings.gateways.delete-payment-gateway"}} @onClick={{fn this.deleteGateway gateway}} />
+                    <div class="flex flex-row items-center space-x-2">
+                        {{#if (can "storefront update gateway")}}
+                            <Button @size="sm" @type="primary" @icon="pencil" @text="Edit Gateway" @onClick={{fn this.editGateway gateway}} />
+                        {{/if}}
+                        {{#if (can "storefront delete gateway")}}
+                            <Button @size="sm" @type="danger" @icon="trash" @text={{t "storefront.settings.gateways.delete-payment-gateway"}} @onClick={{fn this.deleteGateway gateway}} />
+                        {{/if}}
                     </div>
                 </ContentPanel>
             {{/each}}

package/addon/templates/settings/index.hbs

@@ -36,10 +36,23 @@
                     {{tag}}
                 </TagInput>
             </InputGroup>
+
             <InputGroup @name={{t "storefront.common.currency"}}>
                 <CurrencySelect @currency={{@model.currency}} @onCurrencyChange={{fn (mut @model.currency)}} @triggerClass="w-full form-select" />
             </InputGroup>
 
+            <InputGroup @name="Default Order Config" @helpText="Select the order config which will apply to all orders created for this store">
+                <Select
+                    @value={{@model.order_config_uuid}}
+                    @options={{this.orderConfigs}}
+                    @optionValue="id"
+                    @optionLabel="name"
+                    @onSelect={{fn (mut @model.order_config_uuid)}}
+                    @placeholder="Select default order config"
+                    class="w-full"
+                />
+            </InputGroup>
+
             <ContentPanel @title={{t "storefront.settings.index.contact-social"}} @open={{false}} @pad={{true}}>
                 <InputGroup @name={{t "storefront.common.phone"}}>
                     <PhoneInput @value={{@model.phone}} @onInput={{fn (mut @model.phone)}} class="form-input w-full" />

package/addon/templates/settings/notifications.hbs

@@ -16,8 +16,8 @@
             </div>
 
             <div class="space-y-3">
-                {{#each this.channels as |notificationChannel|}}
-                    <div class="flex px-4 py-2 items-center justify-between shadow-sm rounded-md dark:bg-gray-900 bg-gray-200">
+                {{#each @model as |notificationChannel|}}
+                    <div class="flex px-4 py-2 items-center justify-between shadow-sm rounded-md dark:bg-gray-900 bg-gray-200 border border-gray-200 dark:border-gray-700">
                         <div>
                             <span class="dark:text-gray-50">{{notificationChannel.name}}</span>
                         </div>