@fleetbase/fleetops-engine 0.6.17 → 0.6.19

package/addon/components/order/route-editor.js

@@ -0,0 +1,233 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import { task } from 'ember-concurrency';
+import { Point } from '@fleetbase/fleetops-data/utils/geojson';
+
+export default class OrderRouteEditorComponent extends Component {
+    @service store;
+    @service intl;
+    @service notifications;
+    @service placeActions;
+    @service routeOptimization;
+    @service osrm;
+    @tracked route;
+
+    get coordinates() {
+        const payload = this.args.resource.payload;
+        const waypoints = payload ? [payload.pickup, ...this.args.resource.payload.waypoints.map((waypoint) => waypoint.place), payload.dropoff] : [];
+
+        return waypoints.filter((wp) => wp && wp.hasValidCoordinates).map((wp) => [wp.latitude, wp.longitude]);
+    }
+
+    @action toggleMultiDropOrder(isMultiDrop) {
+        const { pickup, dropoff } = this.args.resource.payload;
+
+        if (isMultiDrop) {
+            // if pickup move it to multipdrop
+            if (pickup) {
+                this.#addWaypointFromExistingPlace(pickup);
+            }
+
+            // if pickup move it to multipdrop
+            if (dropoff) {
+                this.#addWaypointFromExistingPlace(dropoff);
+            }
+
+            this.args.resource.payload.setProperties({
+                pickup: null,
+                dropoff: null,
+                return: null,
+                pickup_uuid: null,
+                dropoff_uuid: null,
+                return_uuid: null,
+            });
+        } else {
+            // get pickup from payload waypoints if available
+            const waypoints =
+                typeof this.args.resource.payload.waypoints.toArray === 'function' ? this.args.resource.payload.waypoints.toArray() : Array.from(this.args.resource.payload.waypoints);
+
+            if (waypoints[0]) {
+                const pickup = this.#createPlaceFromWaypoint(waypoints[0]);
+                this.args.resource.payload.set('pickup', pickup);
+            }
+
+            if (waypoints[1]) {
+                const dropoff = this.#createPlaceFromWaypoint(waypoints[1]);
+                this.args.resource.payload.set('dropoff', dropoff);
+            }
+
+            this.args.resource.payload.setProperties({
+                waypoints: [],
+            });
+        }
+
+        if (typeof this.args.onRouteChanged === 'function') {
+            this.args.onRouteChanged();
+        }
+    }
+
+    @action removeWaypoint(waypoint) {
+        this.args.resource.payload.waypoints.removeObject(waypoint);
+
+        if (typeof this.args.onWaypointRemoved === 'function') {
+            this.args.onWaypointRemoved(waypoint);
+        }
+
+        if (typeof this.args.onRouteChanged === 'function') {
+            this.args.onRouteChanged();
+        }
+    }
+
+    @action addWaypoint() {
+        const location = new Point(0, 0);
+        const place = this.store.createRecord('place', { location });
+        const waypoint = this.store.createRecord('waypoint', { place, location });
+
+        this.args.resource.payload.waypoints.pushObject(waypoint);
+
+        if (typeof this.args.onWaypointAdded === 'function') {
+            this.args.onWaypointAdded(waypoint);
+        }
+    }
+
+    @action setWaypointPlace(index, place) {
+        if (isArray(this.args.resource.payload.waypoints) && !this.args.resource.payload.waypoints.objectAt(index)) return;
+
+        const json = place.serialize();
+        this.args.resource.payload.waypoints.objectAt(index).setProperties({
+            uuid: place.id,
+            place_uuid: place.id,
+            location: place.location,
+            place,
+            ...json,
+        });
+
+        if (typeof this.args.onWaypointPlaceSelected === 'function') {
+            this.args.onWaypointPlaceSelected(place);
+        }
+
+        if (typeof this.args.onRouteChanged === 'function') {
+            this.args.onRouteChanged();
+        }
+    }
+
+    @action setPayloadPlace(prop, place) {
+        this.args.resource.payload.set(prop, place);
+
+        if (typeof this.args.onPlaceSelected === 'function') {
+            this.args.onPlaceSelected(place);
+        }
+
+        if (typeof this.args.onRouteChanged === 'function') {
+            this.args.onRouteChanged();
+        }
+    }
+
+    @action sortWaypoints({ sourceList, sourceIndex, targetList, targetIndex }) {
+        if (sourceList === targetList && sourceIndex === targetIndex) return;
+
+        const item = sourceList.objectAt(sourceIndex);
+
+        sourceList.removeAt(sourceIndex);
+        targetList.insertAt(targetIndex, item);
+
+        if (typeof this.args.onRouteChanged === 'function') {
+            this.args.onRouteChanged();
+        }
+    }
+
+    @task *optimizeRouteWithService(service) {
+        const order = this.args.resource;
+        const payload = order.payload;
+        const waypoints = this.args.resource.payload.waypoints;
+        const coordinates = this.coordinates.map((coord) => coord.reverse());
+
+        try {
+            const result = yield this.routeOptimization.optimize(service, {
+                context: 'edit_order_route',
+                order,
+                payload,
+                waypoints,
+                coordinates,
+            });
+            this.handleRouteOptimization(result);
+        } catch (err) {
+            this.notifications.error(err.message ?? this.intl.t('fleet-ops.operations.orders.index.new.route-error'));
+        }
+    }
+
+    @task *optimizeRoute() {
+        const order = this.args.resource;
+        const payload = order.payload;
+        const waypoints = this.args.resource.payload.waypoints;
+        const coordinates = this.coordinates.map((coord) => coord.reverse());
+
+        try {
+            const result = yield this.osrm.optimize({
+                context: 'edit_order_route',
+                order,
+                payload,
+                waypoints,
+                coordinates,
+            });
+
+            this.handleRouteOptimization(result);
+        } catch (err) {
+            this.notifications.error(this.intl.t('fleet-ops.operations.orders.index.new.route-error'));
+        }
+    }
+
+    @action handleRouteOptimization({ sortedWaypoints, route, trip, result, engine = 'osrm' }) {
+        // Update controller state
+        this.args.resource.payload.waypoints = sortedWaypoints;
+        if (route) {
+            this.setOptimizedRoute(route, trip, result.waypoints, engine);
+        }
+        // this.previewRoute();
+        this.args.resource.set('optimized', true);
+    }
+
+    @action setOptimizedRoute(route, trip, waypoints, engine = 'osrm') {
+        let summary = { totalDistance: trip.distance, totalTime: trip.duration };
+        let payload = {
+            optimized: true,
+            coordinates: route,
+            waypoints,
+            trip,
+            summary,
+            engine,
+        };
+
+        this.setRoute(payload);
+    }
+
+    setRoute(payload) {
+        const routeModel = this.store.createRecord('route', payload);
+        this.args.resource.route = routeModel;
+        this.route = payload;
+    }
+
+    #createPlaceFromWaypoint(waypoint) {
+        const json = waypoint.serialize();
+        return this.store.createRecord('place', json);
+    }
+
+    #addWaypointFromExistingPlace(place) {
+        const json = place.serialize();
+        const waypoint = this.store.createRecord('waypoint', {
+            uuid: place.id,
+            place_uuid: place.id,
+            location: place.location,
+            place,
+            ...json,
+        });
+        this.args.resource.payload.waypoints.pushObject(waypoint);
+
+        if (typeof this.args.onWaypointAdded === 'function') {
+            this.args.onWaypointAdded(waypoint);
+        }
+    }
+}

package/addon/components/order/schedule-card.hbs

@@ -1,6 +1,6 @@
 <div class="order-schedule-card border border-gray-200 dark:border-gray-700" ...attributes>
     <a href="javascript:;" class="{{@titleClass}} card-title border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900" {{on "click" (fn this.onTitleClick @order)}}>
-        <span>{{@order.public_id}}</span>
+        <span>{{@order.tracking}}</span>
         <div>
             <Badge @status={{@order.status}} />
         </div>
@@ -11,7 +11,7 @@
                 <div class="w-4">
                     <FaIcon @icon="clock" @size="xs" />
                 </div>
-                <span class="font-semibold">{{t "fleet-ops.component.order.schedule-card.date"}}</span>
+                <span class="font-semibold">{{t "order.schedule-card.date"}}</span>
             </div>
             <span class={{unless @order.scheduled_at "dark:text-gray-600 text-gray-400"}}>{{n-a @order.scheduledAt "Not Scheduled"}}</span>
         </div>
@@ -29,7 +29,7 @@
                 <div class="w-4">
                     <FaIcon @icon="id-card-alt" @size="xs" />
                 </div>
-                <span class="font-semibold">{{t "fleet-ops.component.order.schedule-card.driver-assigned"}}</span>
+                <span class="font-semibold">{{t "order.schedule-card.driver-assigned"}}</span>
                 <div class="ml-1">
                     {{#let (cannot "fleet-ops assign-driver-for order") as |unauthorized|}}
                         <a
@@ -53,7 +53,7 @@
                     <ModelSelect
                         @modelName="driver"
                         @selectedModel={{@order.driver_assigned}}
-                        @placeholder={{t "fleet-ops.component.order.schedule-card.select-driver"}}
+                        @placeholder={{t "order.schedule-card.select-driver"}}
                         @triggerClass="form-select form-input form-input-sm w-48"
                         @infiniteScroll={{false}}
                         @renderInPlace={{true}}
@@ -74,7 +74,7 @@
                         disabled={{not @order.driver_assigned}}
                         class={{unless @order.driver_assigned "dark:text-gray-600 text-gray-400"}}
                         {{on "click" (fn this.onClickDriver @order.driver_assigned)}}
-                    >{{n-a @order.driver_assigned.name (t "fleet-ops.component.order.schedule-card.no-driver")}}</a>
+                    >{{n-a @order.driver_assigned.name (t "order.schedule-card.no-driver")}}</a>
                 {{/if}}
             </div>
         </div>
@@ -83,7 +83,7 @@
                 <div class="w-4">
                     <FaIcon @icon="car" @size="xs" />
                 </div>
-                <span class="font-semibold">{{t "fleet-ops.component.order.schedule-card.vehicle-assigned"}}</span>
+                <span class="font-semibold">{{t "order.schedule-card.vehicle-assigned"}}</span>
             </div>
             {{#if @order.vehicle_assigned}}
                 <a
@@ -91,16 +91,16 @@
                     disabled={{not @order.vehicle_assigned}}
                     class={{unless @order.vehicle_assigned "dark:text-gray-600 text-gray-400"}}
                     {{on "click" (fn this.onClickVehicle @order.vehicle_assigned)}}
-                >{{n-a @order.vehicle_assigned.display_name (t "fleet-ops.component.order.schedule-card.no-vehicle")}}</a>
+                >{{n-a @order.vehicle_assigned.display_name (t "order.schedule-card.no-vehicle")}}</a>
             {{else if @order.driver_assigned.vehicle}}
                 <a
                     href="javascript:;"
                     disabled={{not @order.driver_assigned.vehicle}}
                     class={{unless @order.driver_assigned.vehicle "dark:text-gray-600 text-gray-400"}}
                     {{on "click" (fn this.onClickVehicle @order.driver_assigned.vehicle)}}
-                >{{n-a @order.driver_assigned.vehicle_name (t "fleet-ops.component.order.schedule-card.no-vehicle")}}</a>
+                >{{n-a @order.driver_assigned.vehicle_name (t "order.schedule-card.no-vehicle")}}</a>
             {{else}}
-                <div class="dark:text-gray-600 text-gray-400">{{t "fleet-ops.component.order.schedule-card.no-vehicle"}}</div>
+                <div class="dark:text-gray-600 text-gray-400">{{t "order.schedule-card.no-vehicle"}}</div>
             {{/if}}
         </div>
         <div class="flex items-center justify-between">
@@ -108,7 +108,7 @@
                 <div class="w-4">
                     <FaIcon @icon="location-dot" @size="xs" />
                 </div>
-                <span class="font-semibold">{{t "fleet-ops.component.order.schedule-card.destination"}}</span>
+                <span class="font-semibold">{{t "order.schedule-card.destination"}}</span>
             </div>
             <span>{{n-a @order.pickupName}}</span>
         </div>

package/addon/components/order/schedule-card.js

@@ -10,7 +10,8 @@ import { inject as service } from '@ember/service';
  * @memberof OrderScheduleCardComponent
  */
 export default class OrderScheduleCardComponent extends Component {
-    @service contextPanel;
+    @service driverActions;
+    @service vehicleActions;
     @service intl;
     @service modalsManager;
     @service notifications;
@@ -41,7 +42,7 @@ export default class OrderScheduleCardComponent extends Component {
      * @memberof OrderScheduleCardComponent
      */
     @action onClickDriver(driver) {
-        this.contextPanel.focus(driver);
+        this.driverActions.panel.view(driver);
     }
 
     /**
@@ -51,7 +52,7 @@ export default class OrderScheduleCardComponent extends Component {
      * @memberof OrderScheduleCardComponent
      */
     @action onClickVehicle(vehicle) {
-        this.contextPanel.focus(vehicle);
+        this.vehicleActions.panel.view(vehicle);
     }
 
     /**
@@ -77,9 +78,9 @@ export default class OrderScheduleCardComponent extends Component {
 
         if (isBlank(driver)) {
             return this.modalsManager.confirm({
-                title: this.intl.t('fleet-ops.component.order.schedule-card.unassign-driver'),
-                body: this.intl.t('fleet-ops.component.order.schedule-card.unassign-text', { orderId: order.public_id }),
-                acceptButtonText: this.intl.t('fleet-ops.component.order.schedule-card.unassign-button'),
+                title: this.intl.t('schedule-card.unassign-driver'),
+                body: this.intl.t('schedule-card.unassign-text', { orderId: order.tracking }),
+                acceptButtonText: this.intl.t('schedule-card.unassign-button'),
                 confirm: async (modal) => {
                     order.setProperties({
                         driver_assigned: null,
@@ -105,9 +106,9 @@ export default class OrderScheduleCardComponent extends Component {
         }
 
         return this.modalsManager.confirm({
-            title: this.intl.t('fleet-ops.component.order.schedule-card.assign-driver'),
-            body: this.intl.t('fleet-ops.component.order.schedule-card.assign-text', { driverName: driver.name, orderId: order.public_id }),
-            acceptButtonText: this.intl.t('fleet-ops.component.order.schedule-card.assign-button'),
+            title: this.intl.t('schedule-card.assign-driver'),
+            body: this.intl.t('schedule-card.assign-text', { driverName: driver.name, orderId: order.tracking }),
+            acceptButtonText: this.intl.t('schedule-card.assign-button'),
             confirm: () => {
                 order.set('driver_assigned_uuid', driver.id);
                 return order

package/addon/components/order-config-manager/activity-flow.hbs

@@ -2,7 +2,7 @@
     <Button
         @type="primary"
         @icon="save"
-        @text={{t "fleet-ops.component.order-config-manager.activity-flow.save-activity-flow"}}
+        @text={{t "order-config-manager.activity-flow.save-activity-flow"}}
         @onClick={{perform this.save}}
         @isLoading={{not this.save.isIdle}}
         @disabled={{this.config.core_service}}

package/addon/components/order-config-manager/activity-flow.js

@@ -5,10 +5,11 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { isArray } from '@ember/array';
-import { later } from '@ember/runloop';
-import { debug } from '@ember/debug';
+import { next } from '@ember/runloop';
 import { task } from 'ember-concurrency';
+import lowercase from 'ember-cli-string-helpers/utils/lowercase';
 import generateUUID from '@fleetbase/ember-core/utils/generate-uuid';
+import inlineTask from '@fleetbase/ember-core/utils/inline-task';
 import createFlowActivity from '../../utils/create-flow-activity';
 import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
 
@@ -17,7 +18,7 @@ import contextComponentCallback from '@fleetbase/ember-core/utils/context-compon
  * @extends Component
  */
 export default class OrderConfigManagerActivityFlowComponent extends Component {
-    @service contextPanel;
+    @service resourceContextPanel;
     @service notifications;
     @service intl;
     @service abilities;
@@ -52,6 +53,13 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
      */
     @tracked graph;
 
+    /**
+     * Checks if listener pointerdown listener is called.
+     *
+     * @type {Boolean}
+     */
+    @tracked listeningForClicks = false;
+
     /**
      * Initializes the component with the given configuration.
      * @param {Object} owner - The owner of the component instance.
@@ -167,10 +175,13 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
      * Listens for element click events within the JointJS paper.
      */
     listenForElementClicks() {
+        if (this.listeningForClicks === true) return;
+
         this.paper.on('element:pointerdown', (elementView, event) => {
             this.onActivityClicked(elementView);
             contextComponentCallback(this, 'onActivityClicked', elementView, event);
         });
+        this.listeningForClicks = true;
     }
 
     /**
@@ -242,19 +253,15 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
      * @memberof OrderConfigManagerCustomFieldsComponent
      */
     initializeContext() {
-        later(
-            this,
-            () => {
-                const { context, contextModel } = this.args;
-                if (typeof context === 'string' && contextModel === 'activity') {
-                    const contextActivity = Object.values(this.flow).find((activity) => activity.get('internalId') === context);
-                    if (contextActivity) {
-                        this.editActivity(contextActivity);
-                    }
+        next(this, () => {
+            const { context, contextModel } = this.args;
+            if (typeof context === 'string' && contextModel === 'activity') {
+                const contextActivity = Object.values(this.flow).find((activity) => activity.get('internalId') === context);
+                if (contextActivity) {
+                    this.editActivity(contextActivity);
                 }
-            },
-            300
-        );
+            }
+        });
     }
 
     /**
@@ -409,9 +416,8 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
      */
     onActivityClicked(elementView) {
         // Disable editing activity if core service or if cannot view order config
-        if (this.config.core_service || this.abilities.cannot('fleet-ops view order-config')) {
-            return;
-        }
+        if (this.config.core_service || this.abilities.cannot('fleet-ops view order-config')) return;
+
         const { model } = elementView;
         const activity = this.getActivityById(model.id);
         if (activity) {
@@ -463,8 +469,6 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
                     let lastChildActivity = null;
                     return activityObject.forEach((childActivityObject, childIndex) => {
                         if (childIndex > 0 && lastChildActivity) {
-                            debug('[lastChildActivity]', lastChildActivity);
-                            debug('[childActivityObject]', childActivityObject);
                             this.addNewLinkedActivity(lastChildActivity, childActivityObject);
                             return;
                         }
@@ -856,34 +860,31 @@ export default class OrderConfigManagerActivityFlowComponent extends Component {
      */
     editActivity(activity, targetActivity) {
         // if immutable do nothing
-        if (this.immutableActivities.includes(activity.get('code'))) {
-            return;
-        }
+        if (this.immutableActivities.includes(activity.get('code'))) return;
 
         contextComponentCallback(this, 'onContextChanged', this._createContextualActivity(activity));
-        this.contextPanel.focus(activity, 'editing', {
-            args: {
-                targetActivity,
-                onPressCancel: () => {
-                    this.contextPanel.clear();
-                    contextComponentCallback(this, 'onContextChanged', null);
-                },
-                onSave: (activity) => {
-                    const existingActivity = this.flow[activity.get('code')];
-
-                    // Check if the activity exists and if it's not the same instance being updated
-                    if (existingActivity && existingActivity !== activity) {
-                        this.notifications.warning(this.intl.t('fleet-ops.component.order-config-manager.activity-flow.edit-activity-unique-code-warning'));
-                        return;
-                    }
-
-                    contextComponentCallback(this, 'onContextChanged', null);
-                    this.contextPanel.clear();
-                    this.updateActivityInFlowMap(activity);
-                    if (targetActivity) {
-                        this.addNewLinkedActivity(targetActivity, activity);
-                    }
-                },
+        this.resourceContextPanel.open({
+            content: 'activity/form',
+            title: this.intl.t('common.create-new-resource', { resource: lowercase(this.intl.t('resource.activity')) }),
+            panelContentClass: 'py-2 px-4',
+            resource: activity,
+            pojoResource: true,
+            saveTask: inlineTask(() => {
+                // Check if the activity exists and if it's not the same instance being updated
+                const existingActivity = this.flow[activity.get('code')];
+                if (existingActivity && existingActivity !== activity) {
+                    return this.notifications.warning(this.intl.t('order-config-manager.activity-flow.edit-activity-unique-code-warning'));
+                }
+
+                contextComponentCallback(this, 'onContextChanged', null);
+                this.updateActivityInFlowMap(activity);
+                if (targetActivity) {
+                    this.addNewLinkedActivity(targetActivity, activity);
+                }
+                this.resourceContextPanel.closeAll();
+            }),
+            onClose: () => {
+                contextComponentCallback(this, 'onContextChanged', null);
             },
         });
     }

package/addon/components/order-config-manager/custom-fields.hbs

@@ -3,23 +3,23 @@
         <Button
             @type="primary"
             @icon="square-plus"
-            @text={{t "fleet-ops.component.order-config-manager.custom-fields.new-field-group"}}
+            @text={{t "order-config-manager.custom-fields.new-field-group"}}
             @onClick={{this.createNewFieldGroup}}
             @permission="fleet-ops update order-config"
         />
     </div>
     {{#each this.groups as |group|}}
-        <ContentPanel @title={{group.name}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
-            <div class="flex flex-row items-center py-2 space-x-4 mb-3">
+        <ContentPanel @title={{group.name}} @open={{true}} @wrapperClass="bordered-classic">
+            <div class="flex flex-row items-center space-x-4 mb-4">
                 <Button
                     @type="primary"
                     @icon="square-plus"
-                    @text={{t "fleet-ops.component.order-config-manager.custom-fields.new-custom-field"}}
+                    @text={{t "order-config-manager.custom-fields.new-custom-field"}}
                     @onClick={{fn this.createNewCustomField group}}
                     @permission="fleet-ops update order-config"
                 />
                 <DropdownButton
-                    @text={{concat (t "fleet-ops.component.order-config-manager.custom-fields.grid-size") ": " (or group.meta.grid_size 1)}}
+                    @text={{concat (t "order-config-manager.custom-fields.grid-size") ": " (or group.meta.grid_size 1)}}
                     @textClass="text-sm mr-2"
                     @buttonClass="flex-row-reverse w-44 justify-between"
                     @icon="caret-down"

package/addon/components/order-config-manager/custom-fields.js

@@ -19,7 +19,7 @@ export default class OrderConfigManagerCustomFieldsComponent extends Component {
     @service store;
     @service notifications;
     @service modalsManager;
-    @service contextPanel;
+    @service customFieldsRegistry;
     @service intl;
     @service abilities;
 
@@ -79,6 +79,7 @@ export default class OrderConfigManagerCustomFieldsComponent extends Component {
      */
     @action createNewCustomField(group) {
         const customField = this.store.createRecord('custom-field', {
+            label: 'Untitled Field',
             category_uuid: group.id,
             subject_uuid: this.config.id,
             subject_type: 'order-config',
@@ -97,18 +98,9 @@ export default class OrderConfigManagerCustomFieldsComponent extends Component {
      */
     @action editCustomField(customField) {
         contextComponentCallback(this, 'onContextChanged', customField);
-        this.contextPanel.focus(customField, 'editing', {
-            args: {
-                customField,
-                onCustomFieldSaved: () => {
-                    this.loadCustomFields.perform();
-                    this.contextPanel.clear();
-                    contextComponentCallback(this, 'onContextChanged', null);
-                },
-                onPressCancel: () => {
-                    this.contextPanel.clear();
-                    contextComponentCallback(this, 'onContextChanged', null);
-                },
+        this.customFieldsRegistry.panel.edit(customField, {
+            onFinish: () => {
+                this.loadCustomFields.perform();
             },
         });
     }
@@ -120,14 +112,15 @@ export default class OrderConfigManagerCustomFieldsComponent extends Component {
      */
     @action deleteCustomField(customField) {
         this.modalsManager.confirm({
-            title: this.intl.t('fleet-ops.component.order-config-manager.custom-fields.delete-custom-field-prompt.modal-title'),
-            body: this.intl.t('fleet-ops.component.order-config-manager.custom-fields.delete-custom-field-prompt.delete-body-message'),
-            acceptButtonText: this.intl.t('fleet-ops.component.order-config-manager.custom-fields.delete-custom-field-prompt.confirm-delete'),
+            title: this.intl.t('order-config-manager.custom-fields.delete-custom-field-prompt.modal-title'),
+            body: this.intl.t('order-config-manager.custom-fields.delete-custom-field-prompt.delete-body-message'),
+            acceptButtonText: this.intl.t('order-config-manager.custom-fields.delete-custom-field-prompt.confirm-delete'),
             confirm: async (modal) => {
                 modal.startLoading();
 
                 try {
                     await customField.destroyRecord();
+                    await this.loadCustomFields.perform();
                     modal.done();
                 } catch (error) {
                     this.notifications.serverError(error);
@@ -148,7 +141,7 @@ export default class OrderConfigManagerCustomFieldsComponent extends Component {
             for: 'custom_field_group',
         });
 
-        this.modalsManager.show('modals/new-custom-field-group', {
+        this.modalsManager.show('modals/custom-field-group-form', {
             title: this.intl.t('fleet-ops.component.modals.new-custom-field-group.modal-title'),
             acceptButtonIcon: 'check',
             acceptButtonIconPrefix: 'fas',
@@ -164,7 +157,7 @@ export default class OrderConfigManagerCustomFieldsComponent extends Component {
 
                 try {
                     await customFieldGroup.save();
-                    this.loadCustomFields.perform();
+                    await this.loadCustomFields.perform();
                     modal.done();
                 } catch (error) {
                     this.notifications.serverError(error);
@@ -181,14 +174,15 @@ export default class OrderConfigManagerCustomFieldsComponent extends Component {
      */
     @action deleteCustomFieldGroup(group) {
         this.modalsManager.confirm({
-            title: this.intl.t('fleet-ops.component.order-config-manager.custom-fields.delete-custom-field-group-prompt.modal-title'),
-            body: this.intl.t('fleet-ops.component.order-config-manager.custom-fields.delete-custom-field-group-prompt.delete-body-message'),
-            acceptButtonText: this.intl.t('fleet-ops.component.order-config-manager.custom-fields.delete-custom-field-group-prompt.confirm-delete'),
+            title: this.intl.t('order-config-manager.custom-fields.delete-custom-field-group-prompt.modal-title'),
+            body: this.intl.t('order-config-manager.custom-fields.delete-custom-field-group-prompt.delete-body-message'),
+            acceptButtonText: this.intl.t('order-config-manager.custom-fields.delete-custom-field-group-prompt.confirm-delete'),
             confirm: async (modal) => {
                 modal.startLoading();
 
                 try {
                     await group.destroyRecord();
+                    await this.loadCustomFields.perform();
                     modal.done();
                 } catch (error) {
                     this.notifications.serverError(error);
@@ -203,8 +197,8 @@ export default class OrderConfigManagerCustomFieldsComponent extends Component {
      * @task
      */
     @task *loadCustomFields() {
-        this.groups = yield this.store.query('category', { owner_uuid: this.config.id, for: 'custom_field_group' });
-        this.customFields = yield this.store.query('custom-field', { subject_uuid: this.config.id });
+        this.groups = yield this.store.query('category', { owner_uuid: this.config.id, for: 'custom_field_group', sort: '-created_at' });
+        this.customFields = yield this.store.query('custom-field', { subject_uuid: this.config.id, sort: '-created_at' });
         this.groupCustomFields();
         this.initializeContext();
     }