@fleetbase/fleetops-engine 0.6.17 → 0.6.19

package/addon/components/order/form.js

@@ -0,0 +1,65 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { debug } from '@ember/debug';
+import { task } from 'ember-concurrency';
+
+export default class OrderFormComponent extends Component {
+    @service store;
+    @service orderConfigActions;
+    @service customFieldsRegistry;
+    @service leafletMapManager;
+    @service currentUser;
+    @tracked customFields;
+
+    constructor() {
+        super(...arguments);
+        this.orderConfigActions.loadAll.perform();
+    }
+
+    @action selectFacilitator(model) {
+        this.args.resource.set('facilitator', model);
+        this.args.resource.set('driver', null);
+    }
+
+    @task *selectOrderConfig(orderConfig) {
+        if (!orderConfig) return;
+        this.args.resource.setProperties({
+            order_config_uuid: orderConfig.id,
+            order_config: orderConfig,
+            type: orderConfig.key,
+        });
+        this.args.resource.payload.set('type', orderConfig.key);
+
+        this.customFields = yield this.customFieldsRegistry.loadSubjectCustomFields.perform(orderConfig);
+    }
+
+    @task *selectDriver(driver) {
+        this.args.resource.set('driver_assigned', driver);
+
+        try {
+            const vehicle = yield driver.vehicle;
+            if (vehicle) {
+                this.args.resource.set('vehicle_assigned', vehicle);
+            }
+        } catch (err) {
+            debug('Unable to load and set driver vehicle: ' + err.message);
+        }
+
+        this.leafletMapManager.map.liveMap.focusDriver(driver);
+        // if (this.args.resource.is_route_optimized) {
+        //     this.optimizeRoute.perform();
+        // }
+    }
+
+    @action toggleAdhoc(toggled) {
+        this.args.resource.adhoc = toggled;
+        this.args.resource.adhoc_distance = this.currentUser.getCompanyOption('fleetops.adhoc_distance', 5000);
+    }
+
+    @action toggleProofOfDelivery(toggled) {
+        this.args.resource.pod_required = toggled;
+        this.args.resource.pod_method = toggled ? 'scan' : null;
+    }
+}

package/addon/components/order/header.hbs

@@ -1,7 +1,7 @@
 <div class="px-3 py-4 border-b border-gray-900 order-view-header">
     <div class="flex items-start justify-between">
         <div class="flex items-start flex-1">
-            <Button @text={{t "fleet-ops.common.back"}} @onClick={{@onBackButtonClick}} class="mr-3" />
+            <Button @text={{t "common.back"}} @onClick={{@onBackButtonClick}} class="mr-3" />
             <div>
                 <h1 class="mb-1 text-gray-700 dark:text-gray-100">
                     {{@order.public_id}}
@@ -10,12 +10,12 @@
                     <Badge
                         @status={{@order.status}}
                         @helpText={{if
-                            (eq @order.status (t "fleet-ops.component.order.header.dispatched"))
-                            (concat (t "fleet-ops.component.order.header.dispatched-at") @order.dispatchedAt)
+                            (eq @order.status (t "order.header.dispatched"))
+                            (concat (t "order.header.dispatched-at") @order.dispatchedAt)
                         }}
                     />
                     {{#if @order.shouldDisplayDispatchLabel}}
-                        <Badge @status="info" class="ml-2" @helpText={{t "fleet-ops.component.order.header.dispatched" htmlSafe=true order=@order.dispatchedAt}}>{{t
+                        <Badge @status="info" class="ml-2" @helpText={{t "order.header.dispatched" htmlSafe=true order=@order.dispatchedAt}}>{{t
                                 "fleet-ops.component.order.header.dispatched"
                             }}</Badge>
                     {{/if}}
@@ -24,30 +24,30 @@
         </div>
         <div class="flex">
             {{#if @order.canBeDispatched}}
-                <Button @type="primary" @icon="paper-plane" @text={{t "fleet-ops.component.order.header.dispatched"}} class="mr-2" @onClick={{fn this.forwardAction "dispatchOrder"}} />
+                <Button @type="primary" @icon="paper-plane" @text={{t "order.header.dispatched"}} class="mr-2" @onClick={{fn this.forwardAction "dispatchOrder"}} />
             {{/if}}
             <DropdownButton @icon="ellipsis-h" @contentClass="dropdown-menu" as |dd|>
                 <div class="dropdown-menu-content context-menu">
                     <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "editOrder" dd)}}>
-                        {{t "fleet-ops.component.order.header.edit"}}
+                        {{t "order.header.edit"}}
                     </a>
                     <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "createNewActivity" dd)}}>
-                        {{t "fleet-ops.component.order.header.update"}}
+                        {{t "order.header.update"}}
                     </a>
                     <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "assignDriver" dd)}}>
-                        {{t "fleet-ops.component.order.header.assign"}}
+                        {{t "order.header.assign"}}
                     </a>
                     <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "viewOrderLabel" dd)}}>
-                        {{t "fleet-ops.component.order.header.get-order"}}
+                        {{t "order.header.get-order"}}
                     </a>
                     {{!-- <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "splitOrder" dd)}}>
-                        {{t "fleet-ops.component.order.header.split-order"}}
+                        {{t "order.header.split-order"}}
                     </a> --}}
                     {{!-- <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "splitOrder" dd)}}>
-                        {{t "fleet-ops.component.order.header.reschedule"}}
+                        {{t "order.header.reschedule"}}
                     </a> --}}
                     <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "cancelOrder" dd)}}>
-                        {{t "fleet-ops.component.order.header.cancel-order"}}
+                        {{t "order.header.cancel-order"}}
                     </a>
                 </div>
             </DropdownButton>

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

@@ -0,0 +1,85 @@
+<div class="kanban-card-content">
+    <div class="flex flex-row justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-600">
+        <div class="flex-1">
+            <h4 class="kanban-card-title">{{@card.tracking}}</h4>
+            <Badge @status={{@card.status}} />
+        </div>
+        <div class="flex flex-row space-x-1">
+            {{#unless @card.driver_assigned}}
+                <Button @size="xs" @icon="user-plus" @onClick={{fn this.orderActions.assignDriver @card}} @helpText={{t "order.actions.assign-driver"}} @wrapperClass="self-start" />
+            {{/unless}}
+            <Button @size="xs" @icon="eye" @onClick={{transition-to "operations.orders.index.details" @card}} @wrapperClass="self-start" />
+        </div>
+    </div>
+    <div class="px-3">
+        <div class="order-listing-row-progress mb-2">
+            <OrderProgressBar
+                @card={{@card}}
+                @progress={{@card.tracker_data.progress_percentage}}
+                @firstWaypointCompleted={{@card.tracker_data.first_waypoint_completed}}
+                @lastWaypointCompleted={{@card.tracker_data.last_waypoint_completed}}
+            />
+        </div>
+        <div class="order-listing-row-body flex flex-row">
+            <div class="flex-1 order-listing-row-body-address start">
+                <div class="font-semibold text-sm">Pickup</div>
+                <div class="address-text text-xs">
+                    {{#if @card.payload.isMultiDrop}}
+                        {{@card.payload.firstWaypoint.address}}
+                    {{else}}
+                        {{@card.payload.pickup.address}}
+                    {{/if}}
+                </div>
+            </div>
+            <div class="flex-1 order-listing-row-body-address end">
+                <div class="font-semibold text-sm">Dropoff</div>
+                <div class="address-text text-xs">
+                    {{#if @card.payload.isMultiDrop}}
+                        {{@card.payload.lastWaypoint.address}}
+                    {{else}}
+                        {{@card.payload.dropoff.address}}
+                    {{/if}}
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="py-2 px-3 border-t border-gray-200 dark:border-gray-600">
+        <div class="flex flex-row">
+            <div class="flex-1">
+                <div class="flex flex-row space-x-2">
+                    <div class="resource-assigned-photo">
+                        <Image
+                            src={{avatar-url @card.customer.photo_url}}
+                            @fallbackSrc={{config "defaultValues.contactImage"}}
+                            class="w-5 h-5 rounded-lg shadow-sm"
+                            alt={{@card.customer.name}}
+                        />
+                    </div>
+                    <div class="resource-assigned-details">
+                        <div class="font-semibold text-xs">Customer</div>
+                        <div class="text-xs">{{n-a @card.customer.name "No Customer"}}</div>
+                        <div class="text-xs">{{n-a @card.customer.phone "No Phone"}}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex-1">
+                <div class="flex flex-row space-x-2">
+                    <div class="resource-assigned-photo">
+                        <Image
+                            src={{avatar-url @card.driver_assigned.photo_url}}
+                            @fallbackSrc={{config "defaultValues.driverImage"}}
+                            class="w-5 h-5 rounded-lg shadow-sm"
+                            alt={{@card.driver_assigned.name}}
+                        />
+                        <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 h-2 w-2 -ml-1 -mt-1 {{if @card.driver_assigned.online 'text-green-500' 'text-yellow-200'}}" />
+                    </div>
+                    <div class="resource-assigned-details">
+                        <div class="font-semibold text-xs">Driver Assigned</div>
+                        <div class="text-xs">{{n-a @card.driver_assigned.name "No Driver"}}</div>
+                        <div class="text-xs">{{n-a @card.driver_assigned.phone "No Phone"}}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class OrderKanbanCardComponent extends Component {
+    @service orderActions;
+}

package/addon/components/order/kanban.hbs

@@ -0,0 +1,10 @@
+<Kanban
+    @columns={{this.columns}}
+    @onCardMove={{this.handleCardMove}}
+    @headerOffset={{@headerOffset}}
+    @columnIdPath="status"
+    @subject="order"
+    @cardTemplate="order/kanban-card"
+    @onCreateCard={{transition-to "operations.orders.index.new"}}
+    ...attributes
+/>

package/addon/components/order/kanban.js

@@ -0,0 +1,111 @@
+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 { debug } from '@ember/debug';
+import { task } from 'ember-concurrency';
+import titleize from 'ember-cli-string-helpers/utils/titleize';
+
+export default class OrderKanbanComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @service intl;
+    @tracked statuses = [];
+    @tracked orders = this.args.orders ?? [];
+
+    #defaultStatuses = {
+        start: ['created', 'dispatched', 'started'],
+        end: ['completed', 'canceled'],
+    };
+
+    get columns() {
+        const start = this.#defaultStatuses.start ?? [];
+        const end = this.#defaultStatuses.end ?? [];
+        const loaded = isArray(this.statuses) ? this.statuses : [];
+
+        const startSet = new Set(start);
+        const endSet = new Set(end);
+
+        // Middle = loaded statuses that are NOT in start/end, preserving their order & uniqueness
+        const seen = new Set(start); // we've already included start
+        const middle = [];
+        for (const s of loaded) {
+            if (!s) continue; // skip falsy
+            if (startSet.has(s)) continue; // skip if belongs to start block
+            if (endSet.has(s)) continue; // skip if belongs to end block (we’ll add end later in fixed order)
+            if (!seen.has(s)) {
+                seen.add(s);
+                middle.push(s);
+            }
+        }
+
+        // Build final ordered list: start → middle → end (deduped, in fixed end order)
+        const final = [...start, ...middle];
+        for (const s of end) {
+            if (!final.includes(s)) final.push(s);
+        }
+
+        return final.map((status, index) => ({
+            id: status,
+            title: titleize(status),
+            position: index,
+            cards: this.#getOrdersByStatus(status, this.orders),
+        }));
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadStatuses.perform();
+    }
+
+    /* eslint-disable no-unused-vars */
+    @action async handleCardMove(card, targetColumnId, targetPosition, sourceColumnId) {
+        // work against the array the UI renders from
+        const order = this.orders.find((o) => o.id === card.id);
+        if (!order) {
+            console.error('Order not found in this.orders:', card.id);
+            return;
+        }
+
+        const prevStatus = order.status;
+
+        // First check avaiilable activities, if the `targetColumnId` is one, update the order activity.
+        // If it's not an available status, show an error notification
+        try {
+            const nextActivities = await this.fetch.get(`orders/next-activity/${order.id}`);
+            if (isArray(nextActivities)) {
+                const activity = nextActivities.find((activity) => activity.code === targetColumnId);
+                if (activity) {
+                    try {
+                        await this.fetch.patch(`orders/update-activity/${order.id}`, { activity });
+                        this.notifications.success(this.intl.t('order.kanban.status-updated', { status: targetColumnId }));
+                        order.status = targetColumnId;
+                        // replace the tracked array to notify Glimmer
+                        // (this keeps the *same* object reference, which is fine)
+                        this.orders = this.orders.slice();
+                    } catch (err) {
+                        this.notifications.serverError(err);
+                    }
+                } else {
+                    this.notifications.warning(this.intl.t('order.kanban.cannot-update-status', { status: targetColumnId }));
+                }
+            }
+        } catch (err) {
+            this.notifications.warning(this.intl.t('order.kanban.cannot-update-status', { status: targetColumnId }));
+        }
+    }
+
+    #getOrdersByStatus(status, orders = []) {
+        return orders.filter((order) => order.status === status);
+    }
+
+    @task *loadStatuses() {
+        try {
+            const statuses = yield this.fetch.get('orders/statuses');
+            this.statuses = isArray(statuses) ? statuses : [];
+        } catch (err) {
+            debug('Unable to load order statuses: ' + err.message);
+        }
+    }
+}

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

@@ -0,0 +1,36 @@
+<div class="px-4 py-2">
+    <div class="flex flex-1 flex-row items-start justify-between">
+        <div class="flex flex-row space-x-3">
+            <div class="pt-1">
+                <div class="rounded-md bg-white p-1">
+                    <img src={{concat "data:image/png;base64," @resource.tracking_number.qr_code}} class="w-12 h-12" alt={{@resource.public_id}} />
+                </div>
+            </div>
+            <div class="flex flex-col">
+                <div class="font-semibold">{{@resource.tracking}}</div>
+                <div class="flex flex-row space-x-1">
+                    <Badge @status={{@resource.status}} />
+                    {{#if @resource.dispatched_at}}
+                        <Badge @status="dispatched">{{concat "Dispatched at " @resource.dispatchedAt}}</Badge>
+                    {{/if}}
+                </div>
+                <div class="mt-1">
+                    <div class="text-xs text-gray-400 dark:text-gray-500">Date Created: {{@resource.createdAt}}</div>
+                    <div class="text-xs text-gray-400 dark:text-gray-500">Type: {{smart-humanize @resource.type}}</div>
+                </div>
+            </div>
+        </div>
+        <div class="next-view-header-right">
+            <Layout::Resource::Panel::HeaderActions
+                @resource={{@resource}}
+                @saveTask={{@saveTask}}
+                @saveOptions={{@saveOptions}}
+                @saveDisabled={{@saveDisabled}}
+                @pojoResource={{@pojoResource}}
+                @authSchema={{@authSchema}}
+                @actionButtons={{@actionButtons}}
+                @onPressCancel={{@onPressCancel}}
+            />
+        </div>
+    </div>
+</div>

package/addon/components/order/panel-header.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class OrderPanelHeaderComponent extends Component {}

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

@@ -29,9 +29,9 @@
     {{#if @place.metadata}}
         <Button @size="xs" @onClick={{this.showMeta}} class="my-2">
             {{#if this.showingMeta}}
-                {{t "fleet-ops.component.order.place-card.show-less"}}
+                {{t "order.place-card.show-less"}}
             {{else}}
-                {{t "fleet-ops.component.order.place-card.show-more"}}
+                {{t "order.place-card.show-more"}}
             {{/if}}
         </Button>
         {{#if this.showingMeta}}

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

@@ -0,0 +1,192 @@
+<div class="order-route-editor" ...attributes>
+    <div class="flex flex-row justify-between mb-6">
+        <div class="flex">
+            <Toggle @isToggled={{@resource.payload.isMultiDrop}} @onToggle={{this.toggleMultiDropOrder}} @label={{t "modals.order-route-form.toggle"}} />
+        </div>
+        <div class="flex flex-1 justify-end space-x-2">
+            {{#if @resource.payload.isMultiDrop}}
+                {{#if this.routeOptimization.availableEngines}}
+                    <RouteOptimizationEngineSelectButton @onClick={{perform this.optimizeRouteWithService}} @isLoading={{this.optimizeRouteWithService.isRunning}} @size="sm" />
+                {{else}}
+                    <Button
+                        @type="magic"
+                        @icon="magic"
+                        @text={{t "fleet-ops.operations.orders.index.new.optimize-route"}}
+                        @size="sm"
+                        @onClick={{perform this.optimizeRoute}}
+                        @permission="fleet-ops optimize order"
+                        @helpText={{t "fleet-ops.operations.orders.index.new.optimize-route-help-text"}}
+                        @disabled={{lt @resource.payload.waypoints.length 3}}
+                        @isLoading={{this.optimizeRoute.isRunning}}
+                    />
+                {{/if}}
+                <Button
+                    @icon="map-marked-alt"
+                    @text={{t "modals.order-route-form.add"}}
+                    @size="sm"
+                    @onClick={{this.addWaypoint}}
+                    @helpText={{t "modals.order-route-form.add-text"}}
+                />
+            {{/if}}
+        </div>
+    </div>
+
+    {{#if @resource.payload.isMultiDrop}}
+        <DragSortList class="overflow-visible" @items={{@resource.payload.waypoints}} @dragEndAction={{this.sortWaypoints}} as |waypoint index|>
+            <div id={{concat "waypoint_" (add index 1)}} class="py-1 mb-3">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center justify-between cursor-move">
+                        <FaIcon @icon="grip-lines" @prefix="fas" class="mr-3 text-gray-100" />
+                        <label class="waypoint-label dark:text-gray-100 text-sm">
+                            {{waypoint-label (add index 1)}}
+                        </label>
+                    </div>
+
+                    <div class="flex-1 px-4">
+                        <ModelSelect
+                            @modelName="place"
+                            @selectedModel={{waypoint}}
+                            @placeholder={{concat (t "fleet-ops.operations.orders.index.new.select-waypoint-placeholder") " " (add index 1)}}
+                            @triggerClass="form-select form-input truncate max-w-300px"
+                            @infiniteScroll={{false}}
+                            @customSearchEndpoint="places/search"
+                            @query={{hash geo=true latitude=this.latitude longitude=this.longitude}}
+                            @renderInPlace={{true}}
+                            @onChange={{fn this.setWaypointPlace index}}
+                            as |model|
+                        >
+                            {{model.address}}
+                        </ModelSelect>
+
+                        {{#unless waypoint.isNew}}
+                            {{#if waypoint.hasInvalidCoordinates}}
+                                <div class="leading-5 text-sm text-red-400 mt-2">
+                                    <FaIcon @icon="exclamation-triangle" class="mr-1" />
+                                    {{t "modals.order-route-form.invalid"}}
+                                </div>
+                            {{/if}}
+                        {{/unless}}
+                    </div>
+
+                    <div class="flex items-center space-x-2">
+                        <Button @icon="edit" @size="sm" @onClick={{fn this.placeActions.modal.edit waypoint}} />
+                        <Button @type="danger" @icon="trash" @iconPrefix="fas" @size="sm" @onClick={{fn this.removeWaypoint waypoint}} />
+                    </div>
+                </div>
+            </div>
+        </DragSortList>
+    {{else}}
+        <div class="grid grid-cols-1 gap-3 text-xs dark:text-gray-100">
+            <div class="input-group">
+                <div class="flex items-center justify-between mb-2">
+                    <label class="mb-0i">{{t "modals.order-route-form.pickup"}}</label>
+
+                    {{#if @resource.payload.pickup}}
+                        <Button
+                            @text={{t "modals.order-route-form.edit-address"}}
+                            @icon="edit"
+                            @size="xs"
+                            @onClick={{fn this.placeActions.modal.edit @resource.payload.pickup}}
+                        />
+                    {{/if}}
+                </div>
+
+                <ModelSelect
+                    @modelName="place"
+                    @selectedModel={{@resource.payload.pickup}}
+                    @placeholder={{t "modals.order-route-form.select-pickup"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @customSearchEndpoint="places/search"
+                    @query={{hash geo=true latitude=this.latitude longitude=this.longitude}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn this.setPayloadPlace "pickup"}}
+                    as |model|
+                >
+                    {{model.address}}
+                </ModelSelect>
+
+                {{#if @resource.payload.pickup.hasInvalidCoordinates}}
+                    <div class="leading-5 text-sm text-red-400 mt-2">
+                        <FaIcon @icon="exclamation-triangle" class="mr-1" />
+                        {{t "modals.order-route-form.invalid"}}
+                    </div>
+                {{/if}}
+            </div>
+
+            <div class="input-group">
+                <div class="flex items-center justify-between mb-2">
+                    <label class="mb-0i">{{t "modals.order-route-form.dropoff"}}</label>
+
+                    {{#if @resource.payload.dropoff}}
+                        <Button
+                            @text={{t "modals.order-route-form.edit-address"}}
+                            @icon="edit"
+                            @size="xs"
+                            @onClick={{fn this.placeActions.modal.edit @resource.payload.dropoff}}
+                        />
+                    {{/if}}
+                </div>
+
+                <ModelSelect
+                    @modelName="place"
+                    @selectedModel={{@resource.payload.dropoff}}
+                    @placeholder={{t "modals.order-route-form.select-dropoff"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @customSearchEndpoint="places/search"
+                    @query={{hash geo=true latitude=this.latitude longitude=this.longitude}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn this.setPayloadPlace "dropoff"}}
+                    as |model|
+                >
+                    {{model.address}}
+                </ModelSelect>
+
+                {{#if @resource.payload.dropoff.hasInvalidCoordinates}}
+                    <div class="leading-5 text-sm text-red-400 mt-2">
+                        <FaIcon @icon="exclamation-triangle" class="mr-1" />
+                        {{t "modals.order-route-form.invalid"}}
+                    </div>
+                {{/if}}
+            </div>
+
+            <div class="input-group">
+                <div class="flex items-center justify-between mb-2">
+                    <label class="mb-0i">{{t "modals.order-route-form.return"}}</label>
+
+                    {{#if @resource.payload.return}}
+                        <Button
+                            @text={{t "modals.order-route-form.edit-address"}}
+                            @icon="edit"
+                            @size="xs"
+                            @onClick={{fn this.placeActions.modal.edit @resource.payload.return}}
+                        />
+                    {{/if}}
+                </div>
+
+                <ModelSelect
+                    @modelName="place"
+                    @selectedModel={{@resource.payload.return}}
+                    @placeholder={{t "modals.order-route-form.select-return"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @customSearchEndpoint="places/search"
+                    @query={{hash geo=true latitude=this.latitude longitude=this.longitude}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn this.setPayloadPlace "return"}}
+                    as |model|
+                >
+                    {{model.address}}
+                </ModelSelect>
+
+                {{#if @resource.payload.return.hasInvalidCoordinates}}
+                    <div class="leading-5 text-sm text-red-400 mt-2">
+                        <FaIcon @icon="exclamation-triangle" class="mr-1" />
+                        {{t "modals.order-route-form.invalid"}}
+                    </div>
+                {{/if}}
+            </div>
+        </div>
+    {{/if}}
+</div>