@fleetbase/fleetops-engine 0.6.65 → 0.6.66

package/addon/components/modals/order-route-form.hbs

@@ -32,6 +32,7 @@
                         <div class="flex-1 px-4">
                             <ModelSelect
                                 @modelName="place"
+                                @selectedItemComponent={{component "select-option/place" compact=true}}
                                 @selectedModel={{waypoint.place}}
                                 @placeholder={{concat (t "modals.order-route-form.select-waypoint") (add index 1)}}
                                 @triggerClass="form-select form-input truncate"
@@ -43,7 +44,7 @@
                                 @onChange={{fn @options.setWaypointPlace index}}
                                 as |model|
                             >
-                                {{model.address}}
+                                <SelectOption::Place @option={{model}} />
                             </ModelSelect>
 
                             {{#if waypoint.place.hasInvalidCoordinates}}
@@ -76,6 +77,7 @@
 
                     <ModelSelect
                         @modelName="place"
+                        @selectedItemComponent={{component "select-option/place" compact=true}}
                         @selectedModel={{@options.order.payload.pickup}}
                         @placeholder={{t "modals.order-route-form.select-pickup"}}
                         @triggerClass="form-select form-input"
@@ -86,7 +88,7 @@
                         @onChange={{fn @options.setPayloadPlace "pickup"}}
                         as |model|
                     >
-                        {{model.address}}
+                        <SelectOption::Place @option={{model}} />
                     </ModelSelect>
 
                     {{#if @options.order.payload.pickup.hasInvalidCoordinates}}
@@ -108,6 +110,7 @@
 
                     <ModelSelect
                         @modelName="place"
+                        @selectedItemComponent={{component "select-option/place" compact=true}}
                         @selectedModel={{@options.order.payload.dropoff}}
                         @placeholder={{t "modals.order-route-form.select-dropoff"}}
                         @triggerClass="form-select form-input"
@@ -118,7 +121,7 @@
                         @onChange={{fn @options.setPayloadPlace "dropoff"}}
                         as |model|
                     >
-                        {{model.address}}
+                        <SelectOption::Place @option={{model}} />
                     </ModelSelect>
 
                     {{#if @options.order.payload.dropoff.hasInvalidCoordinates}}
@@ -140,6 +143,7 @@
 
                     <ModelSelect
                         @modelName="place"
+                        @selectedItemComponent={{component "select-option/place" compact=true}}
                         @selectedModel={{@options.order.payload.return}}
                         @placeholder={{t "modals.order-route-form.select-return"}}
                         @triggerClass="form-select form-input"
@@ -150,7 +154,7 @@
                         @onChange={{fn @options.setPayloadPlace "return"}}
                         as |model|
                     >
-                        {{model.address}}
+                        <SelectOption::Place @option={{model}} />
                     </ModelSelect>
 
                     {{#if @options.order.payload.return.hasInvalidCoordinates}}

package/addon/components/modals/place-assign-vendor.hbs

@@ -4,15 +4,16 @@
             <InputGroup @name={{t "modals.place-assign-vendor.select-vendor"}} @value={{@options.place.vendor_uuid}}>
                 <ModelSelect
                     @modelName="vendor"
+                    @selectedItemComponent={{component "select-option/vendor" compact=true}}
                     @selectedModel={{@options.place.vendor_uuid}}
                     @placeholder={{t "modals.place-assign-vendor.select-vendor"}}
                     @triggerClass="form-select form-input"
                     @infiniteScroll={{false}}
                     @renderInPlace={{true}}
-                    @onChange={{fn (mut @options.place.vendor_uuid)}}
+                    @onChangeId={{fn (mut @options.place.vendor_uuid)}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::Vendor @option={{model}} />
                 </ModelSelect>
             </InputGroup>
         </div>

package/addon/components/modals/place-details.hbs

@@ -3,7 +3,7 @@
         <div class="flex">
             <div class="w-48 mb-6 mr-6">
                 <LeafletMap class="w-full h-48 mb-2 rounded-md shadow-md" @lat={{@options.place.latitude}} @lng={{@options.place.longitude}} @zoom={{12}} as |layers|>
-                    <layers.tile @url={{leaflet-tile-url}} />
+                    <layers.tile @url={{(leaflet-tile-url)}} />
 
                     <layers.marker @location={{@options.place.coordinates}} />
                 </LeafletMap>

package/addon/components/modals/point-map.hbs

@@ -1,7 +1,7 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="fleetbase-leaflet-map-container">
         <LeafletMap class="map-height-base" @lat={{@options.latitude}} @lng={{@options.longitude}} @zoom={{12}} as |layers|>
-            <layers.tile @url={{leaflet-tile-url}} />
+            <layers.tile @url={{(leaflet-tile-url)}} />
 
             <layers.marker @icon={{@options.icon}} @location={{point-to-coordinates @options.location}} @riseOnHover={{true}} as |marker|>
                 <marker.popup @maxWidth="500" @minWidth="180">

package/addon/components/modals/radar-notice.hbs

@@ -0,0 +1,24 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="fleet-ops-radar-modal-grid">
+            <InputGroup @name={{t "radar.notice.message"}}>
+                <Textarea @value={{@options.notice.message}} placeholder={{t "radar.notice.message-placeholder"}} class="w-full form-input" rows="3" data-test-radar-notice-message />
+            </InputGroup>
+            <div class="fleet-ops-radar-modal-grid has-two">
+                <InputGroup @name={{t "radar.notice.severity"}}>
+                    <select class="w-full form-select form-input" {{on "change" this.setSeverity}} data-test-radar-notice-severity>
+                        {{#each (array "info" "warning" "critical") as |severity|}}
+                            <option value={{severity}} selected={{eq @options.notice.severity severity}}>{{t (concat "radar.notice.severities." severity)}}</option>
+                        {{/each}}
+                    </select>
+                </InputGroup>
+                <InputGroup @name={{t "radar.notice.due"}}>
+                    <Input @type="datetime-local" @value={{@options.notice.due_at}} class="w-full form-input" data-test-radar-notice-due />
+                </InputGroup>
+            </div>
+            <InputGroup @name={{t "radar.notice.scope"}}>
+                <Input @type="text" @value={{@options.notice.scope}} placeholder={{t "radar.notice.scope-placeholder"}} class="w-full form-input" data-test-radar-notice-scope />
+            </InputGroup>
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/radar-notice.js

@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class ModalsRadarNoticeComponent extends Component {
+    @action setSeverity(event) {
+        this.args.options.notice.severity = event.target.value;
+    }
+}

package/addon/components/modals/radar-save-view.hbs

@@ -0,0 +1,7 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <InputGroup @name={{t "radar.saved-views.name-prompt"}}>
+            <Input @type="text" @value={{@options.name}} placeholder={{t "radar.saved-views.name-placeholder"}} class="w-full form-input" data-test-radar-view-name />
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/radar-select-resource.hbs

@@ -0,0 +1,35 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        {{#if @options.body}}
+            <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">{{@options.body}}</p>
+        {{/if}}
+        <InputGroup @name={{@options.inputLabel}} @helpText={{@options.helpText}}>
+            <ModelSelect
+                @modelName={{@options.modelName}}
+                @selectedModel={{@options.selected}}
+                @placeholder={{@options.placeholder}}
+                @triggerClass="form-select form-input"
+                @infiniteScroll={{false}}
+                @renderInPlace={{true}}
+                @query={{@options.query}}
+                @allowClear={{@options.allowClear}}
+                @onChange={{fn (mut @options.selected)}}
+                as |model|
+            >
+                {{#if (eq @options.modelName "user")}}
+                    <SelectOption::User @option={{model}} />
+                {{else if (eq @options.modelName "driver")}}
+                    <SelectOption::Driver @option={{model}} />
+                {{else if (eq @options.modelName "vehicle")}}
+                    <SelectOption::Vehicle @option={{model}} />
+                {{else if (eq @options.modelName "device")}}
+                    <SelectOption::Device @option={{model}} />
+                {{else if (eq @options.modelName "trailer")}}
+                    <SelectOption::Trailer @option={{model}} />
+                {{else}}
+                    <span>{{or model.display_name model.name model.public_id}}</span>
+                {{/if}}
+            </ModelSelect>
+        </InputGroup>
+    </div>
+</Modal::Default>

package/addon/components/modals/radar-send-pin.hbs

@@ -0,0 +1,20 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">
+            {{#if @options.recipient}}
+                {{t "radar.prompts.send-pin-to" name=@options.recipient}}
+            {{else}}
+                {{t "radar.prompts.send-pin-body"}}
+            {{/if}}
+        </p>
+        <div class="space-y-2" role="radiogroup" data-test-radar-send-pin-channels>
+            {{#each @options.channels as |via|}}
+                <label class="flex items-center gap-3 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-semibold text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100">
+                    <input type="radio" name="radar-send-pin-via" value={{via}} checked={{eq @options.via via}} class="form-radio text-sky-500" {{on "change" (fn this.choose via)}} data-test-radar-send-pin-via={{via}} />
+                    <FaIcon @icon={{if (eq via "email") "envelope" "comment-sms"}} class="text-gray-400" />
+                    <span>{{if (eq via "email") (t "inspection.link.email-pin") (t "inspection.link.text-pin")}}</span>
+                </label>
+            {{/each}}
+        </div>
+    </div>
+</Modal::Default>

package/addon/components/modals/radar-send-pin.js

@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+import { action, set } from '@ember/object';
+
+export default class ModalsRadarSendPinComponent extends Component {
+    @action choose(via) {
+        set(this.args.options, 'via', via);
+    }
+}

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

@@ -12,6 +12,7 @@
         <InputGroup @name={{t "resource.trailer"}} @helpText={{t "trailer.help.select-trailer"}}>
             <ModelSelect
                 @modelName="trailer"
+                @selectedItemComponent={{component "select-option/trailer" compact=true}}
                 @selectedModel={{@options.selectedTrailer}}
                 @query={{hash attachment_state="detached"}}
                 @placeholder={{t "trailer.placeholders.trailer"}}
@@ -21,10 +22,7 @@
                 @onChange={{fn (mut @options.selectedTrailer)}}
                 as |trailer|
             >
-                <div class="flex flex-col">
-                    <span class="text-sm font-semibold">{{trailer.displayName}}</span>
-                    <span class="text-xs text-gray-500 dark:text-gray-400">{{n-a (or trailer.plate_number trailer.code trailer.public_id)}}</span>
-                </div>
+                <SelectOption::Trailer @option={{trailer}} />
             </ModelSelect>
         </InputGroup>
 

package/addon/components/modals/vehicle-form.hbs

@@ -70,6 +70,7 @@
                             </label>
                             <ModelSelect
                                 @modelName="driver"
+                                @selectedItemComponent={{component "select-option/driver" compact=true}}
                                 @selectedModel={{@options.vehicle.driver}}
                                 @placeholder="Select Driver"
                                 @triggerClass="form-select form-input"
@@ -78,7 +79,7 @@
                                 @onChange={{fn (mut @options.vehicle.driver)}}
                                 as |model|
                             >
-                                {{model.name}}
+                                <SelectOption::Driver @option={{model}} />
                             </ModelSelect>
                         </div>
                     </div>

package/addon/components/modals/vendor-form.hbs

@@ -212,6 +212,7 @@
 
                         <ModelSelect
                             @modelName="place"
+                            @selectedItemComponent={{component "select-option/place" compact=true}}
                             @selectedModel={{@options.vendor.place}}
                             @placeholder={{t "modals.vendor-form.select-address"}}
                             @triggerClass="form-select form-input"
@@ -220,9 +221,7 @@
                             @onChange={{@options.selectAddress}}
                             as |model|
                         >
-                            {{model.name}}
-                            -
-                            {{model.street1}}
+                            <SelectOption::Place @option={{model}} />
                         </ModelSelect>
                     </InputGroup>
 

package/addon/components/order/details/activity.js

@@ -7,6 +7,7 @@ export default class OrderDetailsActivityComponent extends Component {
     @service orderActions;
     @service appCache;
     @service intl;
+    @service notifications;
     @tracked layout = this.appCache.get('fleetops:order:activity:layout', 'timeline');
 
     get parentOrderActivity() {
@@ -22,6 +23,10 @@ export default class OrderDetailsActivityComponent extends Component {
 
     /* eslint-disable ember/no-side-effects */
     get actionButtons() {
+        if (!this.args.resource) {
+            return [];
+        }
+
         return [
             {
                 items: [
@@ -60,6 +65,10 @@ export default class OrderDetailsActivityComponent extends Component {
     }
 
     @task *loadActivity() {
+        if (!this.args.resource) {
+            return;
+        }
+
         try {
             yield this.args.resource.loadTrackingActivity();
         } catch (err) {

package/addon/components/order/details/detail.hbs

@@ -41,44 +41,14 @@
                 {{else}}
                     <div class="field-name">{{t "order.fields.customer"}}</div>
                     <div class="field-value">
-                        <div class="flex flex-row space-x-2">
-                            <div>
-                                <Image
-                                    src={{resource-image @resource.customer.photo_url "customer"}}
-                                    @fallbackSrc={{(placeholder-image "customer")}}
-                                    width="28"
-                                    height="28"
-                                    class="w-7 h-7 rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md"
-                                    alt={{@resource.customer.name}}
-                                />
-                            </div>
-                            <div>
-                                <div class="text-sm {{unless @resource.customer 'text-gray-300'}}">{{n-a @resource.customer.name "No customer"}}</div>
-                                <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.customer.phone "No phone"}}</div>
-                            </div>
-                        </div>
+                        <Customer::Pill @customer={{@resource.customer}} @titleFallback={{n-a @resource.customer_name "No customer"}} @titleClass={{unless @resource.customer "text-gray-300"}} />
                     </div>
                 {{/if}}
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "order.fields.facilitator"}}</div>
                 <div class="field-value">
-                    <div class="flex flex-row space-x-2">
-                        <div>
-                            <Image
-                                src={{resource-image @resource.facilitator.photo_url "vendor"}}
-                                @fallbackSrc={{(placeholder-image "vendor")}}
-                                width="28"
-                                height="28"
-                                class="w-7 h-7 rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md"
-                                alt={{@resource.facilitator.name}}
-                            />
-                        </div>
-                        <div>
-                            <div class="text-sm {{unless @resource.facilitator 'text-gray-300'}}">{{n-a @resource.facilitator.name "No facilitator"}}</div>
-                            <div class="text-xs text-gray-400 dark:text-gray-500">{{n-a @resource.facilitator.phone "No phone"}}</div>
-                        </div>
-                    </div>
+                    <Facilitator::Pill @facilitator={{@resource.facilitator}} @titleFallback={{n-a @resource.facilitator_name "No facilitator"}} @titleClass={{unless @resource.facilitator "text-gray-300"}} />
                 </div>
             </div>
         </div>

package/addon/components/order/form/details.hbs

@@ -5,16 +5,14 @@
                 <PowerSelect
                     @options={{this.orderConfigActions.allOrderConfigs}}
                     @selected={{@resource.order_config}}
+                    @selectedItemComponent={{component "select-option/order-config" compact=true}}
                     @onChange={{perform this.selectOrderConfig}}
                     @placeholder={{t "order.fields.order-type-placeholder"}}
                     @triggerClass="form-select form-input"
                     @disabled={{cannot-write @resource}}
                     as |orderConfig|
                 >
-                    <div class="text-sm">
-                        <div class="font-semibold normalize-in-trigger">{{orderConfig.name}}</div>
-                        <div class="hide-from-trigger">{{n-a orderConfig.description}}</div>
-                    </div>
+                    <SelectOption::OrderConfig @option={{orderConfig}} />
                 </PowerSelect>
             </div>
         </InputGroup>
@@ -36,6 +34,7 @@
         <InputGroup @name={{t "order.fields.customer"}} @helpText={{t "order.fields.customer-help-text"}}>
             <ModelSelect
                 @modelName="customer"
+                @selectedItemComponent={{component "select-option/customer" compact=true}}
                 @selectedModel={{@resource.customer}}
                 @placeholder={{t "order.fields.customer-placeholder"}}
                 @triggerClass="form-select form-input"
@@ -46,20 +45,14 @@
                 @onChange={{this.selectCustomer}}
                 as |model|
             >
-                <div class="flex items-center">
-                    <div class="w-7 flex-grow-0 flex-shrink-0">
-                        <FaIcon @icon={{if model.isVendor "warehouse" "user"}} />
-                    </div>
-                    <span class="uppercase">
-                        {{model.name}}
-                    </span>
-                </div>
+                <SelectOption::Customer @option={{model}} />
             </ModelSelect>
         </InputGroup>
 
         <InputGroup @name={{t "order.fields.facilitator"}} @helpText={{t "order.fields.facilitator-help-text"}}>
             <ModelSelect
                 @modelName="facilitator"
+                @selectedItemComponent={{component "select-option/facilitator" compact=true}}
                 @selectedModel={{@resource.facilitator}}
                 @placeholder={{t "order.fields.facilitator-placeholder"}}
                 @triggerClass="form-select form-input"
@@ -70,18 +63,7 @@
                 @onChange={{this.selectFacilitator}}
                 as |model|
             >
-                <div class="flex items-center">
-                    <div class="w-7 flex-grow-0 flex-shrink-0">
-                        {{#if model.isIntegratedVendor}}
-                            <Image src={{model.photo_url}} alt={{model.name}} class="w-4 h-4" width="16" height="16" />
-                        {{else}}
-                            <FaIcon @icon={{if model.isVendor "warehouse" "user"}} />
-                        {{/if}}
-                    </div>
-                    <span class="uppercase">
-                        {{model.name}}
-                    </span>
-                </div>
+                <SelectOption::Facilitator @option={{model}} />
             </ModelSelect>
         </InputGroup>
 
@@ -103,6 +85,7 @@
         <InputGroup @name={{t "order.fields.assign-driver"}} @helpText={{t "order.fields.assign-driver-help-text"}}>
             <ModelSelect
                 @modelName="driver"
+                @selectedItemComponent={{component "select-option/driver" compact=true}}
                 @selectedModel={{@resource.driver_assigned}}
                 @query={{if @resource.facilitator (hash facilitator=@resource.facilitator.id) (hash)}}
                 @placeholder={{t "order.fields.assign-driver-placeholder"}}
@@ -115,28 +98,14 @@
                 @onChange={{perform this.selectDriver}}
                 as |model|
             >
-                <div class="flex items-center">
-                    <div class="w-7 flex-grow-0 flex-shrink-0">
-                        <FaIcon @icon="id-card-alt" />
-                    </div>
-                    <div class="flex-1 flex flex-row truncate">
-                        <span class="uppercase mr-2">{{model.name}}</span>
-                        <span class="uppercase">{{model.phone}}</span>
-                    </div>
-                    {{#if @resource.facilitator}}
-                        <div class="px-1 ml-2 leading-5 bg-green-400 rounded shadow">
-                            <span class="text-xs text-green-900">
-                                {{@resource.facilitator.name}}
-                            </span>
-                        </div>
-                    {{/if}}
-                </div>
+                <SelectOption::Driver @option={{model}} />
             </ModelSelect>
         </InputGroup>
 
         <InputGroup @name={{t "order.fields.assign-vehicle"}} @helpText={{t "order.fields.assign-vehicle-help-text"}}>
             <ModelSelect
                 @modelName="vehicle"
+                @selectedItemComponent={{component "select-option/vehicle" compact=true}}
                 @selectedModel={{@resource.vehicle_assigned}}
                 @placeholder={{t "order.fields.assign-vehicle-placeholder"}}
                 @triggerClass="form-select form-input"
@@ -148,14 +117,7 @@
                 @onChange={{fn (mut @resource.vehicle_assigned)}}
                 as |model|
             >
-                <div class="flex items-center">
-                    <div class="w-7 flex-grow-0 flex-shrink-0">
-                        <Image @src={{model.avatar_url}} @fallbackSrc={{config "defaultValues.vehicleAvatar"}} class="w-4 h-4 shadow-sm rounded-md" />
-                    </div>
-                    <div class="flex-1 flex flex-row truncate">
-                        <span class="uppercase">{{model.display_name}}</span>
-                    </div>
-                </div>
+                <SelectOption::Vehicle @option={{model}} />
             </ModelSelect>
         </InputGroup>
 

package/addon/components/order/form/route.hbs

@@ -54,6 +54,7 @@
                             <div class="mb-2">
                                 <ModelSelect
                                     @modelName="place"
+                                    @selectedItemComponent={{component "select-option/place" compact=true}}
                                     @selectedModel={{waypoint.place}}
                                     @placeholder={{concat (t "order.fields.select-waypoint") " " (add index 1)}}
                                     @triggerClass="form-select form-input truncate max-w-300px"
@@ -65,7 +66,7 @@
                                     @permission={{cannot-write @resource}}
                                     as |place|
                                 >
-                                    <Place::Address @place={{place}} />
+                                    <SelectOption::Place @option={{place}} />
                                 </ModelSelect>
                                 {{#if (and @resource.facilitator.isIntegratedVendor (is-not-facilitator-supported-place @resource.facilitator waypoint.place))}}
                                     <InfoBlock
@@ -84,6 +85,7 @@
                             <div>
                                 <ModelSelect
                                     @modelName="customer"
+                                    @selectedItemComponent={{component "select-option/customer" compact=true}}
                                     @selectedModel={{waypoint.customer}}
                                     @placeholder={{t "order.fields.customer-placeholder"}}
                                     @triggerClass="form-select form-input truncate max-w-300px"
@@ -94,14 +96,7 @@
                                     @permission={{cannot-write @resource}}
                                     as |model|
                                 >
-                                    <div class="flex items-center">
-                                        <div class="w-7">
-                                            <FaIcon @icon={{if model.isVendor "warehouse" "user"}} />
-                                        </div>
-                                        <span class="uppercase">
-                                            {{model.name}}
-                                        </span>
-                                    </div>
+                                    <SelectOption::Customer @option={{model}} />
                                 </ModelSelect>
                             </div>
                             <div>
@@ -166,6 +161,7 @@
 
                 <ModelSelect
                     @modelName="place"
+                    @selectedItemComponent={{component "select-option/place" compact=true}}
                     @selectedModel={{@resource.payload.pickup}}
                     @placeholder={{t "order.fields.select-pickup"}}
                     @triggerClass="form-select form-input"
@@ -177,7 +173,7 @@
                     @permission={{cannot-write @resource}}
                     as |place|
                 >
-                    <Place::Address @place={{place}} />
+                    <SelectOption::Place @option={{place}} />
                 </ModelSelect>
 
                 {{#if (and @resource.facilitator.isIntegratedVendor (is-not-facilitator-supported-place @resource.facilitator @resource.payload.pickup))}}
@@ -208,6 +204,7 @@
 
                 <ModelSelect
                     @modelName="place"
+                    @selectedItemComponent={{component "select-option/place" compact=true}}
                     @selectedModel={{@resource.payload.dropoff}}
                     @placeholder={{t "order.fields.select-dropoff"}}
                     @triggerClass="form-select form-input"
@@ -219,7 +216,7 @@
                     @permission={{cannot-write @resource}}
                     as |place|
                 >
-                    <Place::Address @place={{place}} />
+                    <SelectOption::Place @option={{place}} />
                 </ModelSelect>
 
                 {{#if (and @resource.facilitator.isIntegratedVendor (is-not-facilitator-supported-place @resource.facilitator @resource.payload.dropoff))}}
@@ -245,6 +242,7 @@
 
                 <ModelSelect
                     @modelName="place"
+                    @selectedItemComponent={{component "select-option/place" compact=true}}
                     @selectedModel={{@resource.payload.return}}
                     @placeholder={{t "order.fields.select-return"}}
                     @triggerClass="form-select form-input"
@@ -256,7 +254,7 @@
                     @permission={{cannot-write @resource}}
                     as |place|
                 >
-                    <Place::Address @place={{place}} />
+                    <SelectOption::Place @option={{place}} />
                 </ModelSelect>
 
                 {{#if (and @resource.facilitator.isIntegratedVendor (is-not-facilitator-supported-place @resource.facilitator @resource.payload.return))}}

package/addon/components/order/form/service-rate.hbs

@@ -61,14 +61,13 @@
                                     @onChange={{perform this.getServiceQuotes}}
                                     @searchEnabled={{true}}
                                     @searchField="service_name"
+                                    @selectedItemComponent={{component "select-option/service-rate" compact=true}}
                                     @placeholder={{t "order.fields.select-service-rate"}}
                                     @triggerClass="form-select form-input"
                                     @disabled={{cannot-write @resource}}
                                     as |serviceRate|
                                 >
-                                    <div class="text-sm">
-                                        <div class="font-semibold normalize-in-trigger">{{serviceRate.service_name}}</div>
-                                    </div>
+                                    <SelectOption::ServiceRate @option={{serviceRate}} />
                                 </PowerSelect>
                             </div>
                         </InputGroup>