@fleetbase/storefront-engine 0.3.24 → 0.3.25

package/addon/adapters/catalog.js

@@ -0,0 +1 @@
+export { default } from './storefront';

package/addon/adapters/food-truck.js

@@ -0,0 +1 @@
+export { default } from './storefront';

package/addon/components/customer-panel/orders.hbs

@@ -42,7 +42,13 @@
                                     />
                                 {{/if}}
                                 {{#if order.isPreparing}}
-                                    <Button @size="xs" @type="success" @icon="bell-concierge" @text={{t "storefront.component.widget.orders.mark-as-ready"}} @onClick={{fn this.markAsReady order}} />
+                                    <Button
+                                        @size="xs"
+                                        @type="success"
+                                        @icon="bell-concierge"
+                                        @text={{t "storefront.component.widget.orders.mark-as-ready"}}
+                                        @onClick={{fn this.markAsReady order}}
+                                    />
                                 {{/if}}
                                 {{#if order.isPickupReady}}
                                     <Button

package/addon/components/modals/assign-food-truck-catalogs.hbs

@@ -0,0 +1,14 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup>
+            <ComboBox
+                @options={{@options.allCatalogs}}
+                @selected={{@options.foodTruck.catalogs}}
+                @optionLabel="name"
+                @comparator="name"
+                @selectionBoxLabel="Selected Catalogs"
+                @onChange={{@options.updateCatalogSelections}}
+            />
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/create-catalog.hbs

@@ -0,0 +1,96 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="Catalog Name" @value={{@options.catalog.name}} @disabled={{cannot "storefront create catalog"}} />
+        <InputGroup @name="Catalog Description" @value={{@options.catalog.description}} @disabled={{cannot "storefront create catalog"}} />
+        <InputGroup @name="Catalog Status">
+            <Select
+                class="w-full"
+                @value={{@options.catalog.status}}
+                @placeholder="Select catalog status"
+                @options={{@options.statusOptions}}
+                @onSelect={{fn (mut @options.catalog.status)}}
+                @humanize={{true}}
+            />
+        </InputGroup>
+        <InputGroup>
+            <div class="rounded-lg flex flex-col px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+                <div class="mb-2 flex justify-between">
+                    <div class="text-sm font-semibold dark:text-gray-100">Product Catalog</div>
+                    <div>
+                        <Button @icon="plus" @text="Add Catalog Category" @onClick={{@options.createCategory}} />
+                    </div>
+                </div>
+                <div class="space-y-2">
+                    {{#each @options.catalog.categories as |category|}}
+                        <div>
+                            <div
+                                class="{{if category.deleting 'opacity-50'}}
+                                    {{if category.expanded 'rounded-t-lg' 'rounded-lg'}}
+                                    flex flex-row items-center justify-between px-2 py-1 bg-gray-200 dark:bg-gray-700 border border-gray-100 dark:border-gray-900 shadow-sm"
+                            >
+                                <div>
+                                    <div class="text-sm dark:text-gray-100">{{category.name}}</div>
+                                </div>
+                                <div class="flex flex-row items-center space-x-1">
+                                    <Button
+                                        @icon={{if category.expanded "compress" "expand"}}
+                                        @onClick={{fn @options.toggleCategory category}}
+                                        @helpText="Collapse or expand category products"
+                                        @size="xs"
+                                    />
+                                    <Button @icon="tags" @onClick={{fn @options.addProducts category}} @helpText="Manage category products" @size="xs" />
+                                    <Button @icon="pencil" @onClick={{fn @options.editCategory category}} @helpText="Edit category name" @size="xs" />
+                                    <Button @type="danger" @icon="trash" @onClick={{fn @options.deleteCategory category}} @helpText="Delete category" @size="xs" />
+                                </div>
+                            </div>
+                            {{#if category.expanded}}
+                                <div class="rounded-b-lg flex flex-col px-2 py-1 bg-gray-300 dark:bg-gray-900 border border-gray-100 dark:border-gray-900 shadow-sm">
+                                    {{#if category.adding_products}}
+                                        <div>
+                                            <ComboBox
+                                                @options={{@options.allProducts}}
+                                                @selected={{category.products}}
+                                                @optionLabel="name"
+                                                @comparator="name"
+                                                @selectionBoxLabel="Selected"
+                                                @onChange={{fn @options.confirmSelectedProducts category}}
+                                            />
+                                            <div class="mt-2">
+                                                <Button @icon="check" @type="primary" @text="Done" @onClick={{fn @options.finishAddingProducts category}} />
+                                            </div>
+                                        </div>
+                                    {{else}}
+                                        <div class="flex flex-row mb-2">
+                                            <Button @icon="edit" @text="Edit Products" @onClick={{fn @options.addProducts category}} @size="xs" />
+                                        </div>
+                                        <div class="grid grid-cols-4 gap-2">
+                                            {{#each category.products as |product|}}
+                                                <div class="rounded-lg bg-gray-100 dark:bg-gray-800 border dark:border-gray-700 border-gray-200">
+                                                    <Image src={{product.primary_image_url}} class="rounded-t-lg w-full h-32" />
+                                                    <div class="flex flex-col p-2">
+                                                        <div class="text-sm truncate font-semibold dark:text-gray-100">{{product.name}}</div>
+                                                        <div class="text-sm truncate dark:text-gray-200">{{n-a product.description}}</div>
+                                                        <div class="text-sm dark:text-gray-200">{{format-currency product.price product.currency}}</div>
+                                                        <div class="mt-2">
+                                                            <Button @type="danger" @icon="trash" @text="Remove" @onClick={{fn @options.removeProduct category product}} @size="xs" />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            {{/each}}
+                                        </div>
+                                    {{/if}}
+                                </div>
+                            {{/if}}
+                        </div>
+                    {{/each}}
+                </div>
+            </div>
+        </InputGroup>
+
+        {{!-- <ContentPanel @title="Availability" @open={{@options.catalog.hours.length}} @pad={{false}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <div class="p-2">
+                <ScheduleManager @subject={{@options.catalog}} @subjectKey="catalog_uuid" @hourModelType="catalog-hour" class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2" />
+            </div>
+        </ContentPanel> --}}
+    </div>
+</Modal::Default>

package/addon/components/modals/create-first-store.hbs

@@ -28,7 +28,12 @@
                 @value={{@options.store.currency}}
                 @helpText={{t "storefront.component.modals.create-first-store.select-currency"}}
             >
-                <CurrencySelect @currency={{@options.store.currency}} @onCurrencyChange={{fn (mut @options.store.currency)}} @triggerClass="w-full form-select" @disabled={{cannot "storefront create store"}} />
+                <CurrencySelect
+                    @currency={{@options.store.currency}}
+                    @onCurrencyChange={{fn (mut @options.store.currency)}}
+                    @triggerClass="w-full form-select"
+                    @disabled={{cannot "storefront create store"}}
+                />
             </InputGroup>
         </div>
     </div>

package/addon/components/modals/create-food-truck.hbs

@@ -0,0 +1,69 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name="Assign Food Truck Vehicle">
+            <ModelSelect
+                @modelName="vehicle"
+                @selectedModel={{@options.foodTruck.vehicle}}
+                @placeholder="Assign Food Truck Vehicle"
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{false}}
+                @renderInPlace={{true}}
+                @onChange={{fn (mut @options.foodTruck.vehicle)}}
+                as |model|
+            >
+                <div class="flex flex-row">
+                    <div class="mr-2">
+                        <Image src={{model.photo_url}} class="w-10 h-10 rounded-md shadow-sm" />
+                    </div>
+                    <div class="flex flex-col flex-1">
+                        <div class="font-semibold">{{model.display_name}}</div>
+                        <div>{{model.plate_number}}</div>
+                    </div>
+                </div>
+            </ModelSelect>
+        </InputGroup>
+        <InputGroup @name="Service Area">
+            <ModelSelect
+                @modelName="service-area"
+                @selectedModel={{@options.foodTruck.service_area}}
+                @placeholder="Assign Food Truck to Service Area"
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{false}}
+                @renderInPlace={{true}}
+                @onChange={{fn (mut @options.foodTruck.service_area)}}
+                @allowClear={{true}}
+                as |model|
+            >
+                {{model.name}}
+            </ModelSelect>
+        </InputGroup>
+        {{#if @options.foodTruck.service_area}}
+            <InputGroup @name="Zone">
+                <ModelSelect
+                    @modelName="zone"
+                    @selectedModel={{@options.foodTruck.zone}}
+                    @query={{hash service_area_uuid=@options.foodTruck.service_area.id}}
+                    @placeholder="Assign Food Truck to Zone"
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn (mut @options.foodTruck.zone)}}
+                    @allowClear={{true}}
+                    as |model|
+                >
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+        {{/if}}
+        <InputGroup @name="Food Truck Status">
+            <Select
+                class="w-full"
+                @value={{@options.foodTruck.status}}
+                @placeholder="Select food truck status"
+                @options={{@options.statusOptions}}
+                @onSelect={{fn (mut @options.foodTruck.status)}}
+                @humanize={{true}}
+            />
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/manage-addons.js

@@ -12,32 +12,18 @@ import { all } from 'rsvp';
  * This component uses various Ember services like store, internationalization, currentUser, modalsManager, and notifications for its operations.
  */
 export default class ModalsManageAddonsComponent extends Component {
-    /** Service for data store operations. */
     @service store;
-
-    /** Service for internationalization. */
     @service intl;
-
-    /** Service for accessing current user information. */
     @service currentUser;
-
-    /** Service for managing modal dialogs. */
     @service modalsManager;
-
-    /** Service for displaying notifications. */
     @service notifications;
-
-    /** Tracked array of addon categories. */
     @tracked categories = [];
-
-    /** Tracked options object for the component. */
     @tracked options = {};
-
-    /** The currently active store object. */
     @tracked activeStore;
 
     /**
      * Constructs the ModalsManageAddonsComponent instance with the given options.
+     *
      * @param {Object} owner - The owner of the instance.
      * @param {Object} options - Configuration options for the component.
      */

package/addon/components/order-panel.hbs

@@ -24,9 +24,9 @@
             {{#if this.order.isPickupReady}}
                 <Button @size="xs" @type="success" @icon="check" @text={{t "storefront.component.widget.orders.mark-as-completed"}} @onClick={{fn this.markAsCompleted this.order}} />
             {{/if}}
-            {{#unless this.order.isCanceled}}
+            {{#if (not (or this.order.isCanceled (eq this.order.status "order_canceled")))}}
                 <Button @size="xs" @type="danger" @icon="ban" @helpText={{t "storefront.component.widget.orders.cancel-order"}} @onClick={{fn this.cancelOrder this.order}} />
-            {{/unless}}
+            {{/if}}
         </div>
     </Overlay::Header>
     <Overlay::Body>

package/addon/components/widget/customers.hbs

@@ -52,11 +52,11 @@
                 <table class="storefront-widget-table">
                     <thead>
                         <tr class="h-12 text-left py-1">
-                            <th>{{t "storefront.common.id"}}</th>
-                            <th>{{t "storefront.common.name"}}</th>
-                            <th>{{t "storefront.common.phone"}}</th>
-                            <th>{{t "storefront.common.email"}}</th>
-                            <th>{{t "storefront.common.orders"}}</th>
+                            <th style={{"width: 20%"}}>{{t "storefront.common.id"}}</th>
+                            <th style={{"width: 15%"}}>{{t "storefront.common.name"}}</th>
+                            <th style={{"width: 20%"}}>{{t "storefront.common.phone"}}</th>
+                            <th style={{"width: 35%"}}>{{t "storefront.common.email"}}</th>
+                            <th style={{"width: 10%"}}>{{t "storefront.common.orders"}}</th>
                             <th></th>
                         </tr>
                     </thead>

package/addon/components/widget/orders.hbs

@@ -30,6 +30,9 @@
         @pad={{false}}
         @wrapperClass={{@wrapperClass}}
     >
+        <div class="flex justify-end px-4 py-2">
+            <Toggle @label="Active Orders Filter" @isToggled={{this.activeFilter}} @onToggle={{this.toggleActiveFilter}} />
+        </div>
         {{#if (media "isMobile")}}
             <div class="flex flex-col p-3 space-y-3">
                 {{#each this.orders as |order|}}
@@ -105,7 +108,7 @@
                                     @onClick={{fn this.markAsCompleted order}}
                                 />
                             {{/if}}
-                            {{#unless order.isCanceled}}
+                            {{#if (not (or order.isCanceled (eq order.status "order_canceled")))}}
                                 <Button
                                     @wrapperClass="w-full"
                                     class="btn-block w-full"
@@ -115,7 +118,7 @@
                                     @text={{t "storefront.component.widget.orders.cancel-order"}}
                                     @onClick={{fn this.cancelOrder order}}
                                 />
-                            {{/unless}}
+                            {{/if}}
                         </div>
                         <ContentPanel @title={{t "storefront.component.widget.orders.more-details"}}>
                             <div class="p-2 space-y-2">
@@ -279,7 +282,7 @@
                                                 @onClick={{fn this.markAsCompleted order}}
                                             />
                                         {{/if}}
-                                        {{#unless order.isCanceled}}
+                                        {{#if (not (or order.isCanceled (eq order.status "order_canceled")))}}
                                             <Button
                                                 @size="xs"
                                                 @type="danger"
@@ -287,7 +290,7 @@
                                                 @helpText={{t "storefront.component.widget.orders.cancel-order"}}
                                                 @onClick={{fn this.cancelOrder order}}
                                             />
-                                        {{/unless}}
+                                        {{/if}}
                                     </div>
                                 </td>
                             </tr>

package/addon/components/widget/orders.js

@@ -19,6 +19,7 @@ export default class WidgetOrdersComponent extends Component {
     @tracked title = this.intl.t('storefront.component.widget.orders.widget-title');
     @tracked loaded = false;
     @tracked total = 0;
+    @tracked activeFilter = false;
 
     constructor(owner, { title }) {
         super(...arguments);
@@ -34,8 +35,13 @@ export default class WidgetOrdersComponent extends Component {
         });
     }
 
+    @action toggleActiveFilter(toggled) {
+        this.activeFilter = toggled;
+        this.loadOrders.perform();
+    }
+
     @action async reloadOrders(params = {}) {
-        this.orders = await this.fetchOrders(params);
+        this.loadOrders.perform(params);
     }
 
     @task *loadOrders(params = {}) {
@@ -47,6 +53,10 @@ export default class WidgetOrdersComponent extends Component {
             ...params,
         };
 
+        if (this.activeFilter) {
+            queryParams.status = 'active';
+        }
+
         try {
             const orders = yield this.fetch.get('orders', queryParams, { namespace: 'storefront/int/v1', normalizeToEmberData: true });
             this.loaded = true;

package/addon/controllers/catalogs/index.js

@@ -0,0 +1,121 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class CatalogsIndexController extends Controller {
+    @service store;
+    @service intl;
+    @service storefront;
+    @service modalsManager;
+    @service notifications;
+    @service crud;
+    @service hostRouter;
+    @tracked statusOptions = ['draft', 'published'];
+
+    @action createCatalog() {
+        const catalog = this.store.createRecord('catalog', {
+            store_uuid: this.storefront.activeStore.id,
+            status: 'draft',
+        });
+
+        return this.editCatalog(catalog, {
+            title: 'New Catalog',
+            acceptButtonText: 'Confirm',
+            acceptButtonIcon: 'check',
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await catalog.save();
+                    this.hostRouter.refresh();
+                    this.notifications.success('New catalog created.');
+                } catch (error) {
+                    this.notifications.serverError(error);
+                } finally {
+                    modal.stopLoading();
+                }
+            },
+        });
+    }
+
+    @action editCatalog(catalog, modalOptions = {}) {
+        const allProducts = this.store.query('product', { limit: -1 });
+
+        this.modalsManager.show('modals/create-catalog', {
+            title: 'Edit Food Truck',
+            acceptButtonText: 'Save Changes',
+            acceptButtonIcon: 'save',
+            statusOptions: this.statusOptions,
+            catalog,
+            allProducts,
+            selectedProducts: [],
+            toggleCategory: (category) => {
+                category.set('expanded', !category.get('expanded'));
+            },
+            finishAddingProducts: (category) => {
+                category.setProperties({
+                    adding_products: false,
+                });
+            },
+            confirmSelectedProducts: (category, products) => {
+                category.setProperties({
+                    products,
+                });
+            },
+            removeProduct: (category, product) => {
+                const products = category.get('products').filter((p) => p.id !== product.id);
+                category.set('products', products);
+            },
+            addProducts: (category) => {
+                category.setProperties({
+                    expanded: true,
+                    adding_products: true,
+                });
+            },
+            createCategory: () => {
+                const name = prompt('Enter category name');
+                const category = this.store.createRecord('catalog-category', { name });
+                catalog.categories.pushObject(category);
+            },
+            editCategory: (category) => {
+                const name = prompt('Change category name', category.name);
+                category.set('name', name);
+            },
+            deleteCategory: async (category) => {
+                const confirmed = confirm('Delete this category?');
+                if (confirmed) {
+                    category.set('deleting', true);
+
+                    try {
+                        await category.destroyRecord();
+                    } catch (error) {
+                        this.notifications.serverError(error);
+                    }
+                }
+            },
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await catalog.save();
+                    this.hostRouter.refresh();
+                    this.notifications.success('Changes to catalog saved.');
+                } catch (error) {
+                    this.notifications.serverError(error);
+                } finally {
+                    modal.stopLoading();
+                }
+            },
+            ...modalOptions,
+        });
+    }
+
+    @action deleteCatalog(catalog) {
+        this.crud.delete(catalog, {
+            onSuccess: () => {
+                return this.hostRouter.refresh();
+            },
+        });
+    }
+}

package/addon/controllers/food-trucks/index.js

@@ -0,0 +1,100 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class FoodTrucksIndexController extends Controller {
+    @service store;
+    @service intl;
+    @service storefront;
+    @service modalsManager;
+    @service notifications;
+    @service crud;
+    @service hostRouter;
+    @tracked statusOptions = ['active', 'inactive'];
+
+    @action createFoodTruck() {
+        const foodTruck = this.store.createRecord('food-truck', {
+            store_uuid: this.storefront.activeStore.id,
+            status: 'active',
+        });
+
+        this.modalsManager.show('modals/create-food-truck', {
+            title: 'New Food Truck',
+            statusOptions: this.statusOptions,
+            foodTruck,
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await foodTruck.save();
+                    this.hostRouter.refresh();
+                    this.notifications.success('New food truck created.');
+                } catch (error) {
+                    this.notifications.serverError(error);
+                } finally {
+                    modal.stopLoading();
+                }
+            },
+        });
+    }
+
+    @action editFoodTruck(foodTruck) {
+        this.modalsManager.show('modals/create-food-truck', {
+            title: 'Edit Food Truck',
+            acceptButtonText: 'Save Changes',
+            acceptButtonIcon: 'save',
+            statusOptions: this.statusOptions,
+            foodTruck,
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await foodTruck.save();
+                    this.hostRouter.refresh();
+                    this.notifications.success('Changes to food truck saved.');
+                } catch (error) {
+                    this.notifications.serverError(error);
+                } finally {
+                    modal.stopLoading();
+                }
+            },
+        });
+    }
+
+    @action async assignCatalogs(foodTruck) {
+        const allCatalogs = await this.store.query('catalog', { limit: -1 });
+        console.log('[allCatalogs]', allCatalogs);
+        this.modalsManager.show('modals/assign-food-truck-catalogs', {
+            title: "Assign Catalog's to this Food Truck",
+            acceptButtonText: 'Done',
+            acceptButtonIcon: 'save',
+            foodTruck,
+            allCatalogs,
+            updateCatalogSelections: (catalogs) => {
+                foodTruck.set('catalogs', catalogs);
+            },
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await foodTruck.save();
+                    this.hostRouter.refresh();
+                    this.notifications.success('Changes to food truck saved.');
+                } catch (error) {
+                    this.notifications.serverError(error);
+                } finally {
+                    modal.stopLoading();
+                }
+            },
+        });
+    }
+
+    @action deleteFoodTruck(foodTruck) {
+        this.crud.delete(foodTruck, {
+            onSuccess: () => {
+                return this.hostRouter.refresh();
+            },
+        });
+    }
+}

package/addon/models/catalog-category.js

@@ -0,0 +1,6 @@
+import CategoryModel from '@fleetbase/console/models/category';
+import { hasMany } from '@ember-data/model';
+
+export default class CatalogCategoryModel extends CategoryModel {
+    @hasMany('products', { async: false, inverse: 'catalogCategories' }) products;
+}

package/addon/models/catalog-hour.js

@@ -0,0 +1,72 @@
+import Model, { attr, belongsTo } from '@ember-data/model';
+import { computed } from '@ember/object';
+import { format, formatDistanceToNow, parse, isValid } from 'date-fns';
+
+export default class CatalogHourModel extends Model {
+    /** @ids */
+    @attr('string') catalog_uuid;
+
+    /** @relationships */
+    @belongsTo('catalog') catalog;
+
+    /** @attributes */
+    @attr('string') day_of_week;
+    @attr('string') start;
+    @attr('string') end;
+
+    /** @dates */
+    @attr('date') created_at;
+    @attr('date') updated_at;
+
+    /** @methods */
+    toJSON() {
+        return this.serialize();
+    }
+
+    /** @computed */
+    @computed('start') get startDateInstance() {
+        if (!this.start) {
+            return null;
+        }
+
+        const includesSeconds = this.start.split(':').length === 3;
+        const format = includesSeconds ? 'k:mm:ss' : 'k:mm';
+
+        return parse(this.start, format, new Date());
+    }
+
+    @computed('end') get endDateInstance() {
+        if (!this.end) {
+            return null;
+        }
+
+        const includesSeconds = this.end.split(':').length === 3;
+        const format = includesSeconds ? 'k:mm:ss' : 'k:mm';
+
+        return parse(this.end, format, new Date());
+    }
+
+    @computed('end', 'endDateInstance', 'start', 'startDateInstance') get humanReadableHours() {
+        if (!isValid(this.startDateInstance) || !isValid(this.endDateInstance)) {
+            return `${this.start} - ${this.end}`;
+        }
+
+        return `${format(this.startDateInstance, 'p')} - ${format(this.endDateInstance, 'p')}`;
+    }
+
+    get updatedAgo() {
+        return formatDistanceToNow(this.updated_at);
+    }
+
+    get updatedAt() {
+        return format(this.updated_at, 'PPP');
+    }
+
+    get createdAgo() {
+        return formatDistanceToNow(this.created_at);
+    }
+
+    get createdAt() {
+        return format(this.created_at, 'PPP p');
+    }
+}