@fleetbase/storefront-engine 0.3.5 → 0.3.6

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

@@ -1,20 +1,13 @@
-s<Modal::Default @onOpen={{fn this.fetchCategories @options.store}} @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+s<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{perform this.saveChanges}} @decline={{@onDecline}}>
     <div class="modal-body-container">
         <div class="flex items-center justify-between mb-4">
             <div>
-                {{#if this.isLoading}}
+                {{#unless (or this.getAddonCategories.isIdle this.saveAddonCategory.isIdle)}}
                     <Spinner class="text-sky-400" />
-                {{/if}}
+                {{/unless}}
             </div>
             <div>
-                <Button
-                    @type="magic"
-                    @text={{t "storefront.component.modals.manage-addons.title"}}
-                    @icon="plus"
-                    @iconPrefix="fas"
-                    @onClick={{fn this.createCategory @options.store}}
-                    @disabled={{this.isLoading}}
-                />
+                <Button @type="magic" @text={{t "storefront.component.modals.manage-addons.title"}} @icon="plus" @iconPrefix="fas" @onClick={{perform this.createAddonCategory}} @disabled={{not this.createAddonCategory.isIdle}} />
             </div>
         </div>
 
@@ -24,24 +17,13 @@ s<Modal::Default @onOpen={{fn this.fetchCategories @options.store}} @modalIsOpen
                     <div class="flex items-center rounded-md shadow-sm px-3 py-2 font-semibold bg-gray-200 dark:bg-gray-800 dark:text-gray-100 mb-2">
                         <div class="flex-1 flex items-center">
                             <FaIcon @icon="pencil" class="mr-1 dark:text-gray-100" />
-                            <Input
-                                @type="text"
-                                @value={{category.name}}
-                                {{on "blur" (fn this.saveCategory category)}}
-                                class="w-full px-2 m-0 border-none bg-transparent dark:text-gray-100"
-                            />
+                            <Input @type="text" @value={{category.name}} {{on "blur" (perform this.saveAddonCategory category)}} class="w-full px-2 m-0 border-none bg-transparent dark:text-gray-100" />
                         </div>
                         <div class="flex items-center">
-                            <Button
-                                @text={{t "storefront.component.modals.manage-addons.new-addon"}}
-                                @icon="plus"
-                                @iconPrefix="fas"
-                                @onClick={{fn this.insertNewAddon category}}
-                                class="mr-3"
-                            />
-                            <a href="javascript:;" {{on "click" (fn this.deleteCategory index)}} class="destroy-action opacity-50 hover:opacity-100 text-sm">{{t
-                                    "storefront.component.modals.manage-addons.delete"
-                                }}</a>
+                            <Button @text={{t "storefront.component.modals.manage-addons.new-addon"}} @icon="plus" @iconPrefix="fas" @onClick={{fn this.createNewAddon category}} class="mr-3" />
+                            <a href="javascript:;" {{on "click" (perform this.deleteAddonCategory index)}} class="destroy-action opacity-50 hover:opacity-100 text-sm">
+                                {{t "storefront.component.modals.manage-addons.delete"}}
+                            </a>
                         </div>
                     </div>
                     <div class="space-y-2 mb-2">
@@ -49,37 +31,18 @@ s<Modal::Default @onOpen={{fn this.fetchCategories @options.store}} @modalIsOpen
                             <div class="grid grid-cols-10 gap-1 px-3 py-2 rounded-md dark:bg-gray-900 bg-gray-200">
                                 <div class="col-span-3 flex items-center">
                                     <FaIcon @icon="tag" class="text-sky-400 mr-2" />
-                                    <Input
-                                        @type="text"
-                                        @value={{addon.name}}
-                                        {{on "blur" (fn this.saveAddon addon)}}
-                                        class="form-input flex-1 w-full"
-                                        placeholder={{t "storefront.component.modals.manage-addons.addon-name"}}
-                                    />
+                                    <Input @type="text" @value={{addon.name}} class="form-input flex-1 w-full" placeholder={{t "storefront.component.modals.manage-addons.addon-name"}} />
                                 </div>
                                 <div class="col-span-4">
-                                    <Input
-                                        @type="text"
-                                        @value={{addon.description}}
-                                        {{on "blur" (fn this.saveAddon addon)}}
-                                        class="form-input w-full"
-                                        placeholder={{t "storefront.component.modals.manage-addons.description"}}
-                                    />
+                                    <Input @type="text" @value={{addon.description}} class="form-input w-full" placeholder={{t "storefront.component.modals.manage-addons.description"}} />
                                 </div>
                                 <div class="col-span-2">
-                                    <MoneyInput
-                                        class="w-full"
-                                        @currency={{@options.store.currency}}
-                                        @canSelectCurrency={{false}}
-                                        @value={{addon.price}}
-                                        @onFormatCompleted={{fn this.saveAddon addon}}
-                                        @disabled={{this.isLoading}}
-                                    />
+                                    <MoneyInput class="w-full" @currency={{this.activeStore.currency}} @canSelectCurrency={{false}} @value={{addon.price}} />
                                 </div>
                                 <div class="flex items-center justify-center text-center text-sm">
-                                    <a href="javascript:;" class="destroy-action opacity-50 hover:opacity-100" {{on "click" (fn this.removeAddon category i)}}>{{t
-                                            "storefront.common.remove"
-                                        }}</a>
+                                    <a href="javascript:;" class="destroy-action opacity-50 hover:opacity-100" {{on "click" (perform this.removeAddon category i)}}>
+                                        {{t "storefront.common.remove"}}
+                                    </a>
                                 </div>
                             </div>
                         {{/each}}

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

@@ -2,85 +2,135 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+import { task } from 'ember-concurrency';
+import { all } from 'rsvp';
 
+/**
+ * Represents a component for managing addon categories and individual addons.
+ * Allows for the creation, deletion, and editing of addon categories, as well as adding and removing addons within those categories.
+ * 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 isLoading = true;
 
-    @action saveAddon(addon) {
-        this.isLoading = true;
+    /** Tracked options object for the component. */
+    @tracked options = {};
 
-        return addon.save().then(() => {
-            this.isLoading = false;
-        });
+    /** 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.
+     */
+    constructor(owner, { options }) {
+        super(...arguments);
+        this.options = options;
+        this.activeStore = options.store;
+        this.getAddonCategories.perform();
     }
 
-    @action insertNewAddon(category) {
+    /**
+     * Creates a new addon associated with the provided category.
+     * @param {Object} category - The category to which the new addon will be added.
+     */
+    @action createNewAddon(category) {
         const productAddon = this.store.createRecord('product-addon', { category_uuid: category.id });
         category.addons.pushObject(productAddon);
     }
 
-    @action removeAddon(category, index) {
-        const addon = category.addons.objectAt(index);
+    /**
+     * Saves changes to all the categories.
+     * Displays loading modal during the operation and handles errors.
+     */
+    @task *saveChanges() {
+        this.modalsManager.startLoading();
+        try {
+            yield all(this.categories.map((_) => _.save()));
+        } catch (error) {
+            this.modalsManager.stopLoading();
+            return this.notifications.serverError(error);
+        }
+        yield this.modalsManager.done();
+        this.categories = [];
+    }
 
+    /**
+     * Removes an addon from the specified category.
+     * @param {Object} category - The category from which the addon will be removed.
+     * @param {number} index - The index of the addon to remove.
+     */
+    @task *removeAddon(category, index) {
+        const addon = category.addons.objectAt(index);
         category.addons.removeAt(index);
-        return addon.destroyRecord();
+        yield addon.destroyRecord();
     }
 
-    @action saveCategory(category) {
-        this.isLoading = true;
-        return category.save().then(() => {
-            this.isLoading = false;
-        });
+    /**
+     * Saves the provided addon category.
+     * @param {Object} category - The addon category to save.
+     */
+    @task *saveAddonCategory(category) {
+        yield category.save();
     }
 
-    @action deleteCategory(index) {
+    /**
+     * Deletes an addon category at the specified index.
+     * @param {number} index - The index of the category to delete.
+     */
+    @task *deleteAddonCategory(index) {
         const category = this.categories.objectAt(index);
         const result = confirm(this.intl.t('storefront.component.modals.manage-addons.delete-this-addon-category-assosiated-will-lost'));
 
         if (result) {
-            this.categories.removeAt(index);
-            return category.destroyRecord();
+            this.categories = [...this.categories.filter((_, i) => i !== index)];
+            yield category.destroyRecord();
         }
     }
 
-    @action pushCategory(category) {
-        const { categories } = this;
-        categories.pushObject(category);
-    }
-
-    @action createCategory(store) {
+    /**
+     * Creates a new addon category with default settings.
+     */
+    @task *createAddonCategory() {
         const category = this.store.createRecord('addon-category', {
             name: this.intl.t('storefront.component.modals.manage-addons.untitled-addon-category'),
             for: 'storefront_product_addon',
             owner_type: 'storefront:store',
-            owner_uuid: store.id,
+            owner_uuid: this.activeStore.id,
         });
 
-        this.isLoading = true;
-
-        return category.save().then((category) => {
-            this.pushCategory(category);
-            this.isLoading = false;
-        });
+        yield category.save();
+        this.categories.pushObject(category);
     }
 
-    @action fetchCategories(store) {
-        this.isLoading = true;
-
-        return this.store
-            .query('addon-category', {
-                owner_uuid: store.id,
-            })
-            .then((categories) => {
-                this.categories = categories.toArray();
-            })
-            .finally(() => {
-                this.isLoading = false;
+    /**
+     * Retrieves and sets the addon categories associated with the active store.
+     */
+    @task *getAddonCategories() {
+        const categories = yield this.store.query('addon-category', { owner_uuid: this.activeStore.id });
+        if (isArray(categories)) {
+            this.categories = categories.map((category) => {
+                category.addons = isArray(category.addons) ? category.addons.filter((addon) => !addon.isNew) : [];
+                return category;
             });
+        }
     }
 }

package/addon/components/modals/select-addon-category.hbs

@@ -2,7 +2,7 @@
     <div class="modal-body-container">
         <ComboBox
             @options={{@options.addonCategories}}
-            @selected={{@options.product.addon_categories}}
+            @selected={{@options.selectedAddonCategories}}
             @optionLabel="name"
             @comparator="name"
             @selectionBoxLabel="Selected"

package/addon/components/order-panel/details.hbs

@@ -0,0 +1,245 @@
+<Overlay @onLoad={{@onLoad}} position="right" @noBackdrop={{true}} @width="550px" @fullHeight={{true}} @isResizable={{true}} as |overlay|>
+    <Overlay::Header
+        @overlay={{overlay}}
+        @title={{@order.public_id}}
+        @status={{@order.status}}
+        @dispatched={{@order.dispatched}}
+        @createdAt={{@order.createdAt}}
+        @onPressCancel={{@onPressCancel}}
+    />
+
+    <Overlay::Body @wrapperClass="new-order-overlay-body">
+        <ContentPanel @title={{t "storefront.orders.index.view.activity"}} @open={{true}} @pad={{false}} @panelBodyWrapperClass="px-0 py-4" @panelBodyClass="bg-white dark:bg-gray-800">
+            {{#if @order.tracking_statuses}}
+                <Timeline @activity={{@order.tracking_statuses}} @arrowClass="bg-gray-600 border border-gray-900 shadow-md" as |TimelineItem|>
+                    <TimelineItem @activeStatus={{@order.status}} as |trackingStatus|>
+                        <div class="flex flex-col px-3 py-2 rounded text-sm leading-4 space-y-2 bg-gray-100 dark:bg-gray-900 dark:text-white">
+                            <div class="flex flex-col space-y-1">
+                                <div class="text-xs font-semibold truncate">{{trackingStatus.status}}</div>
+                                <div class="text-xs truncate">{{n-a trackingStatus.details}}</div>
+                                <div class="text-xs">{{trackingStatus.createdAtShortWithTime}}</div>
+                            </div>
+                            <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                                <InputInfo>
+                                    <div class="text-xs">{{or trackingStatus.details trackingStatus.status}}</div>
+                                    <div class="text-xs">{{trackingStatus.createdAtShortWithTime}}</div>
+                                </InputInfo>
+                            </Attach::Tooltip>
+                        </div>
+                    </TimelineItem>
+                </Timeline>
+            {{else}}
+                <div class="px-10 py-2 flex items-center justify-center">
+                    <p class="text-red-600 dark:text-red-100">{{t "storefront.orders.index.view.unable-load-order-activity"}}</p>
+                </div>
+            {{/if}}
+        </ContentPanel>
+
+        <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800" @actionButtons={{this.detailPanelButtons}}>
+            <div class="flex mb-4 space-x-2">
+                {{#if @order.dispatched}}
+                    <Badge @hideStatusDot={{false}} @status="Dispatched" />
+                {{/if}}
+                {{#if @order.adhoc}}
+                    <Badge @hideStatusDot={{false}} @disableHumanize={{true}} @status="success">{{t "storefront.orders.index.view.ad-hoc"}}</Badge>
+                {{/if}}
+            </div>
+            <div class="grid grid-cols-2 lg:grid-cols-3 field-info-containers-darker gap-4 lg:gap-2">
+                <div class="field-info-container space-y-2">
+                    <div class="field-name">{{t "storefront.orders.index.view.customer"}}</div>
+                    <div class="flex flex-row">
+                        <div>
+                            <Image
+                                src={{avatar-url @order.customer.photo_url}}
+                                @fallbackSrc={{config "defaultValues.contactImage"}}
+                                class="w-8 h-8 rounded-md shadow-sm mr-2"
+                                alt={{@order.customer.name}}
+                            />
+                        </div>
+                        <div>
+                            <div class="field-value">{{n-a @order.customer.name "No Customer"}}</div>
+                            {{#if @order.customer}}
+                                <div>{{@order.customer.phone}}</div>
+                            {{/if}}
+                        </div>
+                    </div>
+                </div>
+                <div class="field-info-container space-y-2">
+                    <div class="field-name">{{t "storefront.orders.index.view.facilitator"}}</div>
+                    {{#if @order.facilitator.isIntegratedVendor}}
+                        <div class="flex flex-row">
+                            <div>
+                                <Image
+                                    src={{avatar-url @order.facilitator.photo_url}}
+                                    @fallbackSrc={{config "defaultValues.contactImage"}}
+                                    class="w-8 h-8 rounded-md border border-gray-200 dark:border-gray-900 shadow-sm mr-2"
+                                    alt={{@order.facilitator.name}}
+                                />
+                            </div>
+                            <div>
+                                <div class="field-value">{{n-a @order.facilitator.name}}</div>
+                            </div>
+                        </div>
+                    {{else}}
+                        <div class="field-value">{{n-a @order.facilitator.name "No Facilitator"}}</div>
+                    {{/if}}
+                </div>
+                <div class="field-info-container space-y-2">
+                    <div class="field-name flex flex-row items-center justify-between">
+                        <span>{{t "storefront.orders.index.view.driver-assigned"}}</span>
+                    </div>
+                    <div>
+                        <a href="javascript:;" class="flex flex-row">
+                            <div>
+                                <Image
+                                    src={{avatar-url @order.driver_assigned.photo_url}}
+                                    @fallbackSrc={{config "defaultValues.driverImage"}}
+                                    width="32"
+                                    height="32"
+                                    class="w-8 h-8 rounded-md shadow-sm mr-3 lg:mr-2"
+                                    alt={{@order.driver_assigned.name}}
+                                />
+                            </div>
+                            <div class="field-value">
+                                <div>{{n-a @order.driver_assigned.name "No Driver"}}</div>
+                                {{#if @order.driver_assigned}}
+                                    <div>{{@order.driver_assigned.phone}}</div>
+                                {{/if}}
+                            </div>
+                        </a>
+                        <div class="mt-1">
+                            <Button
+                                @size="xs"
+                                @type="default"
+                                @icon="edit"
+                                @text={{if @order.has_driver_assigned (t "storefront.orders.index.view.change-driver") (t "storefront.orders.index.view.assign-driver")}}
+                                @onClick={{fn this.assignDriver @order}}
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div class="field-info-container space-y-2">
+                    <div class="field-name">{{t "storefront.common.internal-id"}}</div>
+                    <div class="field-value">{{n-a @order.internal_id}}</div>
+                </div>
+                <div class="field-info-container space-y-2">
+                    <div class="field-name">{{t "storefront.orders.index.view.tracking-number"}}</div>
+                    <div class="field-value">{{n-a @order.tracking_number.tracking_number}}</div>
+                </div>
+                <div class="field-info-container space-y-2">
+                    <div class="field-name">{{t "storefront.common.type"}}</div>
+                    <div class="field-value">
+                        <Badge @status="default">{{n-a (humanize @order.type)}}</Badge>
+                    </div>
+                </div>
+                <div class="field-info-container space-y-2">
+                    <div class="field-name">{{t "storefront.orders.index.view.date-scheduled"}}</div>
+                    <div class="field-value">{{n-a @order.scheduledAt}}</div>
+                </div>
+                <div class="field-info-container space-y-2">
+                    <div class="field-name">{{t "storefront.orders.index.view.date-dispatched"}}</div>
+                    <div class="field-value">{{n-a @order.dispatchedAt}}</div>
+                </div>
+                <div class="field-info-container space-y-2">
+                    <div class="field-name">{{t "storefront.orders.index.view.date-started"}}</div>
+                    <div class="field-value">{{n-a @order.startedAt}}</div>
+                </div>
+                {{#if @order.pod_required}}
+                    <div class="field-info-container space-y-2">
+                        <div class="field-name">{{t "storefront.orders.index.view.proof-of-delivery"}}</div>
+                        <div class="field-value">{{n-a (smart-humanize @order.pod_method)}}</div>
+                    </div>
+                {{/if}}
+            </div>
+        </ContentPanel>
+        {{!-- 
+        {{#if @order.order_config}}
+            {{#each this.customFieldGroups as |group|}}
+                <ContentPanel @title={{group.name}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="grid grid-cols-{{or group.meta.grid_size 1}} gap-2">
+                        {{#each group.customFields as |customField|}}
+                            <div class="field-info-container space-y-2">
+                                <div class="field-name">{{customField.label}}</div>
+                                {{#if (and (eq customField.type "file-upload") customField.value.asFile)}}
+                                    <File @file={{customField.value.asFile}} @onDelete={{fn this.removeCustomFieldFile customField.value}} class="custom-field-file" />
+                                {{else}}
+                                    <div class="field-value">{{n-a customField.value.value}}</div>
+                                {{/if}}
+                            </div>
+                        {{/each}}
+                    </div>
+                </ContentPanel>
+            {{/each}}
+        {{/if}} --}}
+
+        {{#if @order.tracking_number}}
+            <ContentPanel @title={{t "storefront.orders.index.view.tracking"}} @prefixTitleRight={{@order.tracking}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <div class="flex flex-row items-center justify-center space-x-4">
+                    <div class="p-2 rounded-md bg-white">
+                        <img src={{concat "data:image/png;base64," @order.tracking_number.qr_code}} class="w-18 h-18" alt={{@order.public_id}} />
+                    </div>
+                    <div class="p-2 rounded-md bg-white">
+                        <img src={{concat "data:image/png;base64," @order.tracking_number.barcode}} class="w-40 h-14" alt={{@order.public_id}} />
+                    </div>
+                </div>
+            </ContentPanel>
+        {{/if}}
+
+        <ContentPanel @title={{t "storefront.orders.index.view.route-panel-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <div class="py-2 px-6">
+                <div class="flex">
+                    {{#if @order.meta.is_pickup}}
+                        <div class="flex-1">
+                            <div class="rounded-md bg-blue-50 mr-4">
+                                <div class="rounded-t-md bg-blue-100 px-3 py-2 mb-3">
+                                    <span class="text-blue-500 font-semibold text-sm truncate">{{t "storefront.component.modals.incoming-order.pickup-order"}}</span>
+                                </div>
+                                <div class="flex flex-row items-center mb-4 pb-4 px-3">
+                                    <div class="flex items-center justify-center rounded-full bg-blue-500 w-8 h-8 mr-3">
+                                        <FaIcon @icon="store-alt" class="text-white" />
+                                    </div>
+                                    <div class="text-xs text-blue-900 truncate">
+                                        <DisplayPlace @place={{@options.order.payload.pickup}} @type="pickup" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    {{else if @order.payload.hasWaypoints}}
+                        <RouteList @order={{@order}} />
+                    {{else}}
+                        <div class="order-route-list storefront flex-1">
+                            <div class="order-route-stop">
+                                <div class="order-route-stop-index">
+                                    <div class="index-count">
+                                        <FaIcon @prefix="fas" @icon="store-alt" />
+                                    </div>
+                                </div>
+                                <div class="order-route-location dark:text-gray-100">
+                                    <DisplayPlace @place={{@order.payload.pickup}} @type="pickup" @addressClass="text-sm dark:text-gray-100" @noAddressClass="text-sm" />
+                                </div>
+                            </div>
+                            <div class="order-route-stop">
+                                <div class="order-route-stop-index">
+                                    <div class="index-count">
+                                        <FaIcon @prefix="fas" @icon="map-marker-alt" />
+                                    </div>
+                                </div>
+                                <div class="order-route-location dark:text-gray-100">
+                                    <DisplayPlace @place={{@order.payload.dropoff}} @type="dropoff" @addressClass="text-sm dark:text-gray-100" @noAddressClass="text-sm" />
+                                </div>
+                            </div>
+                        </div>
+                    {{/if}}
+                </div>
+            </div>
+        </ContentPanel>
+
+        <StorefrontOrderSummary @order={{@order}} />
+
+        <ContentPanel @title={{t "storefront.orders.index.view.comments-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800" @wrapperClass="mb-20">
+            <CommentThread @subject={{@order}} @subjectType="storefront:order" />
+        </ContentPanel>
+
+        <Spacer @height="300px" />
+    </Overlay::Body>
+</Overlay>