@fleetbase/fleetops-engine 0.4.12 → 0.4.13

package/addon/components/admin/avatar-management.hbs

@@ -0,0 +1,78 @@
+<div class="mb-4">
+    <div class="flex flex-row items-stretch rounded-lg border border-gray-200 dark:border-gray-700">
+        <div class="w-48 h-full bg-white dark:bg-gray-700 rounded-l-lg">
+            {{#each this.categories as |category index|}}
+                <a href="#" class="flex flex-row px-4 py-2 border-b border-gray-200 dark:border-gray-900 hover:bg-blue-400 {{if (eq this.currentCategory.type category.type) 'bg-blue-500'}} {{if (eq index 1) "rounded-tl-lg"}}" {{on "click" (fn this.switchCategory category)}}>
+                    <div class="w-6">
+                        <FaIcon @icon={{category.icon}} @size="sm" />
+                    </div>
+                    <div>{{category.name}}</div>
+                </a>
+            {{/each}}
+        </div>
+        <div class="flex-1 border-l border-gray-200 dark:border-gray-700">
+            <div class="p-4">
+                {{#if this.isUploading}}
+                    <div class="dropzone w-full rounded-lg px-4 py-8 bg-gray-50 dark:bg-gray-900 bg-opacity-25 text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500">
+                        <div class="flex items-center justify-center py-5">
+                            <Spinner class="text-sm dar:text-gray-100" @loadingMessage={{t "fleet-ops.common.uploading"}} />
+                        </div>
+                    </div>
+                {{else}}
+                    {{#let (file-queue name="files" onFileAdded=this.queueFile accept=(join "," this.acceptedFileTypes)) as |queue|}}
+                        <FileDropzone @queue={{queue}} class="dropzone file-dropzone" as |dropzone|>
+                            {{#if dropzone.active}}
+                                {{#if dropzone.valid}}
+                                    {{t "component.dropzone.drop-to-upload"}}
+                                {{else}}
+                                    {{t "component.dropzone.invalid"}}
+                                {{/if}}
+                            {{else if queue.files.length}}
+                                <div class="my-2">
+                                    <FaIcon @icon="folder-open" class="text-indigo-500 mr-2" />
+                                    {{t "component.dropzone.files-ready-for-upload" numOfFiles=(pluralize queue.files.length (t "component.dropzone.file"))}}
+                                </div>
+                                <div class="my-2">({{queue.progress}}%)</div>
+                            {{else}}
+                                <h4 class="font-semibold">
+                                    <FaIcon @icon="folder-open" @size="lg" class="text-indigo-500 mr-2" />
+                                    {{t "component.dropzone.upload-avatar-files"}}
+                                </h4>
+                                <div>
+                                    {{#if dropzone.supported}}
+                                        <p class="text-sm my-5">{{t "component.dropzone.dropzone-supported-avatars"}}</p>
+                                    {{/if}}
+                                    <FileUpload @name="files" @for="files" @accept={{join "," this.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{this.queueFile}}>
+                                        <a tabindex={{0}} class="btn btn-magic cursor-pointer ml-1">{{t "component.dropzone.or-select-button-text"}}</a>
+                                    </FileUpload>
+                                </div>
+                            {{/if}}
+                        </FileDropzone>
+                    {{/let}}
+                {{/if}}
+                <div class="space-y-4 mt-4">
+                    {{#if this.uploadQueue}}
+                        <div class="space-y-2">
+                            {{#each this.uploadQueue as |file|}}
+                                <div class="flex items-center justify-between bg-blue-100 border border-blue-800 dark:border-blue-800 py-1.5 shadow-sm rounded-lg px-4">
+                                    <div class="text-xs text-blue-900 truncate">{{truncate-filename file.name 50}}</div>
+                                    <div class="flex items-center text-sm">
+                                        <Spinner class="text-blue-900 mr-2" />
+                                        <span class="font-bold text-blue-900">{{round file.progress}}%</span>
+                                    </div>
+                                </div>
+                            {{/each}}
+                        </div>
+                    {{/if}}
+                    <div>
+                        <div class="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
+                            {{#each this.currentCategory.avatars as |file|}}
+                                <File @file={{file}} @onDelete={{this.removeFile}} />
+                            {{/each}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

package/addon/components/admin/avatar-management.js

@@ -0,0 +1,191 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency';
+import { pluralize } from 'ember-inflector';
+
+export default class AdminAvatarManagementComponent extends Component {
+    /**
+     * Inject the `fileQueue` service
+     *
+     * @var {Service}
+     */
+    @service fileQueue;
+
+    /**
+     * Injexts the `store` service
+     *
+     * @memberof AdminAvatarManagementComponent
+     */
+    @service store;
+
+    /**
+     * Injexts the `fetch` service
+     *
+     * @memberof AdminAvatarManagementComponent
+     */
+    @service fetch;
+
+    /**
+     * Inject the `notifications` service for handling notifications.
+     *
+     * @var {Service}
+     */
+    @service notifications;
+
+    /**
+     * Inject the `currentUser` service.
+     *
+     * @var {Service}
+     */
+    @service currentUser;
+
+    /**
+     * Tracks the files in the upload queue.
+     *
+     * @var {Array}
+     */
+    @tracked uploadQueue = [];
+
+    /**
+     * The only acceptable file types for avatars, png or svg.
+     *
+     * @memberof AdminAvatarManagementComponent
+     */
+    acceptedFileTypes = ['image/svg+xml', 'image/png'];
+
+    /**
+     * The current loaded avatars.
+     *
+     * @var {Array}
+     */
+    @tracked avatars = [];
+
+    /**
+     * Selectable categories for avatar management.
+     *
+     * @memberof AdminAvatarManagementComponent
+     */
+    @tracked categories = [
+        {
+            name: 'Vehicles',
+            icon: 'car',
+            type: 'vehicle',
+            avatars: [],
+        },
+        {
+            name: 'Places',
+            icon: 'building',
+            type: 'place',
+            avatars: [],
+        },
+        {
+            name: 'Drivers',
+            icon: 'id-card',
+            type: 'driver',
+            avatars: [],
+        },
+    ];
+
+    /**
+     * Tracks the selected category for avatar management.
+     *
+     * @var {string|null}
+     */
+    @tracked currentCategory;
+
+    /**
+     * Creates an instance of AdminAvatarManagementComponent.
+     * @memberof AdminAvatarManagementComponent
+     */
+    constructor() {
+        super(...arguments);
+        this.loadAvatars.perform();
+    }
+
+    /**
+     * Action triggered when a category is selected.
+     *
+     * @param {string} category - The selected category.
+     */
+    @action switchCategory(category) {
+        this.currentCategory = category;
+    }
+
+    /**
+     * Action triggered when a file is queued for upload.
+     *
+     * @param {File} file - The file to be queued.
+     */
+    @action queueFile(file) {
+        // since we have dropzone and upload button within dropzone validate the file state first
+        // as this method can be called twice from both functions
+        if (['queued', 'failed', 'timed_out', 'aborted'].indexOf(file.state) === -1) {
+            return;
+        }
+
+        // Get the current category
+        const category = this.currentCategory;
+
+        // Queue and upload immediatley
+        this.uploadQueue.pushObject(file);
+        this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `custom-avatars/${pluralize(category.type)}/${this.currentUser.companyId}`,
+                type: `${category.type}-avatar`,
+            },
+            (uploadedFile) => {
+                this.currentCategory.avatars.pushObject(uploadedFile);
+                this.uploadQueue.removeObject(file);
+            },
+            () => {
+                this.uploadQueue.removeObject(file);
+                // remove file from queue
+                if (file.queue && typeof file.queue.remove === 'function') {
+                    file.queue.remove(file);
+                }
+            }
+        );
+    }
+
+    /**
+     * Action triggered when a file is removed.
+     *
+     * @param {File} file - The file to be removed.
+     * @returns {Promise} - A promise representing the file destruction operation.
+     */
+    @action removeFile(file) {
+        this.currentCategory.avatars.removeObject(file);
+        return file.destroyRecord();
+    }
+
+    /**
+     * Task that loads files based on the selected category.
+     *
+     * @task
+     * @generator
+     * @yields {Array} - The filtered files based on the selected category.
+     */
+    @task *loadAvatars() {
+        this.avatars = yield this.store.query('file', { type_ends_with: 'avatar' });
+
+        // Assign avatars to their categories
+        if (isArray(this.avatars)) {
+            const categoriesWithAvatars = [];
+
+            for (let i = 0; i < this.categories.length; i++) {
+                const category = this.categories[i];
+                categoriesWithAvatars.pushObject({
+                    ...category,
+                    avatars: this.avatars.filter((file) => file.type === `${category.type}-avatar`),
+                });
+            }
+
+            this.categories = categoriesWithAvatars;
+            this.currentCategory = this.currentCategory ? this.categories.find((category) => category.type === this.currentCategory.type) : this.categories[0];
+        }
+    }
+}

package/addon/components/avatar-picker.hbs

@@ -0,0 +1,15 @@
+<div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
+    <div class="input-group mb-2">
+        <InputLabel @labelText={{t "fleet-ops.component.avatar-picker.select-map-avatar"}} @helpText={{t "fleet-ops.component.avatar-picker.select-avatar-rendering"}} />
+        <FetchSelect @wrapperClass="w-60" @placeholder={{t "fleet-ops.component.avatar-picker.select-avatar"}} @endpoint={{this.endpoint}} @selected={{this.model.avatar_value}} @optionValue="value" @onChange={{this.selectAvatar}} as |option|>
+            {{titleize (humanize option.key)}}
+        </FetchSelect>
+    </div>
+    <div class="flex flex-row justify-end">
+        {{#if this.model.avatar_custom_url}}
+            <Image alt={{this.model.displayName}} src={{this.model.avatar_custom_url}} @fallbackSrc={{@defaultAvatar}} class="w-24 h-24" />
+        {{else}}
+            <Image alt={{this.model.displayName}} src={{this.model.avatar_url}} @fallbackSrc={{@defaultAvatar}} class="w-24 h-24" />
+        {{/if}}
+    </div>
+</div>

package/addon/components/avatar-picker.js

@@ -0,0 +1,57 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { pluralize } from 'ember-inflector';
+import getModelName from '@fleetbase/ember-core/utils/get-model-name';
+
+function isUuid(str) {
+    if (typeof str !== 'string') {
+        return false;
+    }
+
+    const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+    return uuidRegex.test(str);
+}
+
+export default class AvatarPickerComponent extends Component {
+    @service store;
+    @tracked model;
+    @tracked type;
+    @tracked endpoint;
+
+    constructor(owner, { model, endpoint }) {
+        super(...arguments);
+
+        this.model = model;
+        this.type = getModelName(model);
+        this.endpoint = endpoint ?? `${pluralize(this.type)}/avatars`;
+    }
+
+    /**
+     * Set the selected avatar
+     *
+     * @param {String} url
+     */
+    @action selectAvatar(url) {
+        // custom avatar file selected
+        if (isUuid(url)) {
+            return this.store.findRecord('file', url).then((file) => {
+                this.model.set('avatar_custom_url', file.url);
+                this.model.set('avatar_url', file.id);
+
+                if (typeof this.args.onSelect === 'function') {
+                    this.args.onSelect(this.model, file.url);
+                }
+            });
+        }
+
+        // default url
+        this.model.set('avatar_url', url);
+        this.model.set('avatar_custom_url', null);
+
+        if (typeof this.args.onSelect === 'function') {
+            this.args.onSelect(this.model, url);
+        }
+    }
+}

package/addon/components/driver-form-panel.hbs

@@ -18,7 +18,7 @@
                 <div class="flex flex-row">
                     <div class="w-14">
                         <div class="upload-avatar-overlay w-12 h-12 flex items-center justify-start rounded-lg">
-                            <img src={{this.driver.photo_url}} alt={{this.driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                            <Image src={{this.driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{this.driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
                             <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
                                 <InputInfo @text={{t "fleet-ops.component.driver-form-panel.upload-new-photo"}} />
                             </Attach::Tooltip>
@@ -60,12 +60,12 @@
     </Overlay::Header>
 
     <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
-        <div class="flex-1">
+        <div class="flex-1 space-y-4">
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
                 <InputGroup @name={{t "fleet-ops.common.name"}} @wrapperClass="col-span-2">
                     <Input @value={{this.driver.name}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.name"}} />
                 </InputGroup>
-                
+
                 <InputGroup @name={{t "fleet-ops.common.internal-id"}}>
                     <Input @value={{this.driver.internal_id}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.internal-id"}} />
                 </InputGroup>
@@ -109,17 +109,16 @@
                         </PowerSelect>
                     </div>
                 </InputGroup>
-              <InputGroup @name={{t "fleet-ops.common.coordinates"}} @wrapperClass="col-span-2">
-                <CoordinatesInput
-                    @value={{this.driver.location}}
-                    @onChange={{this.onCoordinatesChanged}}
-                    @onGeocode={{this.onAutocomplete}}
-                    @onUpdatedFromMap={{this.onCoordinatesChanged}}
-                    @onInit={{this.setCoordinatesInput}}
-                    @renderInPlace={{false}}
-                />
-            </InputGroup>
+                <InputGroup @name={{t "fleet-ops.common.coordinates"}} @wrapperClass="col-span-2">
+                    <CoordinatesInput @value={{this.driver.location}} @onChange={{this.onCoordinatesChanged}} @onGeocode={{this.onAutocomplete}} @onUpdatedFromMap={{this.onCoordinatesChanged}} @onInit={{this.setCoordinatesInput}} @renderInPlace={{false}} />
+                </InputGroup>
             </div>
+
+            <ContentPanel @title={{t "fleet-ops.component.avatar-picker.avatar"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <AvatarPicker @model={{this.driver}} @defaultAvatar={{config "defaultValues.driverAvatar"}} />
+            </ContentPanel>
         </div>
+
+        <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>

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

@@ -1,29 +1,29 @@
 <div class="p-4">
     <ContentPanel @title={{t "fleet-ops.common.details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
         <div class="grid grid-cols-2 gap-2 text-xs md:mb-6 dark:text-gray-100">
-            <div class="field-info-container ">
+            <div class="field-info-container md:col-span-3">
                 <div class="field-name">{{t "fleet-ops.common.name"}}</div>
                 <div class="field-value">{{n-a @driver.name}}</div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "fleet-ops.common.id"}}</div>
-                <div class="field-value">{{n-a @driver.public_id}}</div>
+                <ClickToCopy @value={{@driver.public_id}} class="field-value">{{n-a @driver.public_id}}</ClickToCopy>
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "fleet-ops.common.internal-id"}}</div>
                 <div class="field-value">{{n-a @driver.internal_id}}</div>
             </div>
-            <div class="field-info-container">
+            <div class="field-info-container md:col-span-3">
                 <div class="field-name">{{t "fleet-ops.common.driver-license"}}</div>
                 <div class="field-value">{{n-a @driver.drivers_license_number}}</div>
             </div>
-            <div class="field-info-container">
+            <div class="field-info-container md:col-span-3">
                 <div class="field-name">{{t "fleet-ops.common.email"}}</div>
-                <div class="field-value">{{n-a @driver.email}}</div>
+                <ClickToCopy @value={{@driver.email}} class="field-value">{{n-a @driver.email}}</ClickToCopy>
             </div>
-            <div class="field-info-container">
+            <div class="field-info-container md:col-span-3">
                 <div class="field-name">{{t "fleet-ops.common.phone"}}</div>
-                <div class="field-value">{{n-a @driver.phone}}</div>
+                <ClickToCopy @value={{@driver.phone}} class="field-value">{{n-a @driver.phone}}</ClickToCopy>
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "fleet-ops.common.city"}}</div>

package/addon/components/edit-order-route-panel.hbs

@@ -1,16 +1,6 @@
-<Overlay
-    @onLoad={{this.setOverlayContext}}
-    @onOpen={{this.onOpen}}
-    @onClose={{this.onClose}}
-    @onToggle={{this.onToggle}}
-    @position="right"
-    @noBackdrop={{true}}
-    @fullHeight={{true}}
-    @isResizeble={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "570px"}}
->
-    <Overlay::Header @title={{concat "Edit order " this.order.public_id " route"}}>
-        <Button @type="primary" @icon="check" @text="Save" @helpText="Save order route changes" @onClick={{this.onSave}} @wrapperClass="mr-2" />
+<Overlay @onLoad={{this.setOverlayContext}} @onOpen={{this.onOpen}} @onClose={{this.onClose}} @onToggle={{this.onToggle}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "570px"}}>
+    <Overlay::Header @title={{concat "Edit Order: " this.order.public_id " Route"}}>
+        <Button @type="primary" @icon="check" @text="Save" @helpText="Save order route changes" @onClick={{perform this.save}} @isLoading={{this.save.isRunning}} @wrapperClass="mr-2" />
         <Button @type="default" @icon="times" @helpText={{t "fleet-ops.common.cancel"}} @onClick={{this.onPressCancel}} />
     </Overlay::Header>
 
@@ -23,13 +13,7 @@
                 <div class="flex flex-1 justify-end space-x-2">
                     {{#if this.order.payload.isMultiDrop}}
                         {{!-- <Button @type="magic" @icon="magic" @text={{t "fleet-ops.component.modals.order-route-form.optimize"}} @size="sm" @onClick={{fn this.optimizeRoute}} @helpText={{t "fleet-ops.component.modals.order-route-form.optimize-text"}} @disabled={{lt this.order.payload.waypoints.length 3}} @isLoading={{this.isOptimizingRoute}} /> --}}
-                        <Button
-                            @icon="map-marked-alt"
-                            @text={{t "fleet-ops.component.modals.order-route-form.add"}}
-                            @size="sm"
-                            @onClick={{this.addWaypoint}}
-                            @helpText={{t "fleet-ops.component.modals.order-route-form.add-text"}}
-                        />
+                        <Button @icon="map-marked-alt" @text={{t "fleet-ops.component.modals.order-route-form.add"}} @size="sm" @onClick={{this.addWaypoint}} @helpText={{t "fleet-ops.component.modals.order-route-form.add-text"}} />
                     {{/if}}
                 </div>
             </div>
@@ -46,18 +30,7 @@
                             </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|
-                                >
+                                <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>
 
@@ -79,7 +52,7 @@
                     </div>
                 </DragSortList>
             {{else}}
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs dark:text-gray-100">
+                <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">
                             <label>{{t "fleet-ops.component.modals.order-route-form.pickup"}}</label>
@@ -89,18 +62,7 @@
                             {{/if}}
                         </div>
 
-                        <ModelSelect
-                            @modelName="place"
-                            @selectedModel={{this.order.payload.pickup}}
-                            @placeholder={{t "fleet-ops.component.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|
-                        >
+                        <ModelSelect @modelName="place" @selectedModel={{this.order.payload.pickup}} @placeholder={{t "fleet-ops.component.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>
 
@@ -121,18 +83,7 @@
                             {{/if}}
                         </div>
 
-                        <ModelSelect
-                            @modelName="place"
-                            @selectedModel={{this.order.payload.dropoff}}
-                            @placeholder={{t "fleet-ops.component.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|
-                        >
+                        <ModelSelect @modelName="place" @selectedModel={{this.order.payload.dropoff}} @placeholder={{t "fleet-ops.component.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>
 
@@ -153,18 +104,7 @@
                             {{/if}}
                         </div>
 
-                        <ModelSelect
-                            @modelName="place"
-                            @selectedModel={{this.order.payload.return}}
-                            @placeholder={{t "fleet-ops.component.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|
-                        >
+                        <ModelSelect @modelName="place" @selectedModel={{this.order.payload.return}} @placeholder={{t "fleet-ops.component.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>