@fleetbase/fleetops-engine 0.6.18 → 0.6.19

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

@@ -0,0 +1,283 @@
+<ContentPanel @title={{t "order.fields.route"}} @open={{true}} @wrapperClass="bordered-top">
+    <div class="flex flex-row items-center justify-between mb-4">
+        <div class="flex">
+            <Toggle @isToggled={{this.multipleWaypoints}} @onToggle={{this.toggleWaypoints}} @label={{t "order.fields.route-label"}} />
+        </div>
+        <div class="flex flex-1 justify-end space-x-2">
+            {{#if this.multipleWaypoints}}
+                {{#if this.routeOptimization.availableEngines}}
+                    <RouteOptimizationEngineSelectButton @onClick={{perform this.optimizeRouteWithService}} @isLoading={{this.optimizeRouteWithService.isRunning}} />
+                {{else}}
+                    <Button
+                        @type="magic"
+                        @icon="magic"
+                        @text={{t "order.fields.optimize-route"}}
+                        @size="xs"
+                        @onClick={{perform this.optimizeRoute}}
+                        @permission="fleet-ops optimize order"
+                        @helpText={{t "order.fields.optimize-route-help-text"}}
+                        @disabled={{lt @resource.payload.waypoints.length 3}}
+                        @isLoading={{this.optimizeRoute.isRunning}}
+                    />
+                {{/if}}
+                <Button
+                    @icon="map-marked-alt"
+                    @text={{t "order.fields.add-waypoint"}}
+                    @size="xs"
+                    @onClick={{fn this.addWaypoint (hash)}}
+                    @helpText={{t "order.fields.add-waypoint-help-text"}}
+                    @permission={{cannot-write @resource}}
+                />
+            {{/if}}
+        </div>
+    </div>
+
+    {{#if this.multipleWaypoints}}
+        <DragSortList class="multi-drop-select-container overflow-visible" @items={{@resource.payload.waypoints}} @dragEndAction={{this.sortWaypoints}} as |waypoint index|>
+            <div id={{concat "waypoint_" (add index 1)}} class="border rounded-md px-3 py-2 shadow-sm border-gray-300 dark:border-gray-900 mb-3">
+                <div class="flex items-start justify-between">
+                    <div class="flex items-center justify-between grip-cursor">
+                        <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 flex-col px-3">
+                        <div class="mb-2">
+                            <ModelSelect
+                                @modelName="place"
+                                @selectedModel={{waypoint.place}}
+                                @placeholder={{concat (t "order.fields.select-waypoint") " " (add index 1)}}
+                                @triggerClass="form-select form-input truncate max-w-300px"
+                                @infiniteScroll={{false}}
+                                @customSearchEndpoint="places/search"
+                                @query={{hash geo=true latitude=this.location.latitude longitude=this.location.longitude}}
+                                @renderInPlace={{true}}
+                                @onChange={{fn this.setWaypointPlace index}}
+                                @permission={{cannot-write @resource}}
+                                as |model|
+                            >
+                                {{model.address}}
+                            </ModelSelect>
+                            {{#if (and @resource.facilitator.isIntegratedVendor (is-not-facilitator-supported-place @resource.facilitator waypoint.place))}}
+                                <InfoBlock
+                                    class="my-2 px-4 py-1.5 danger"
+                                    @blockClass="flex flex-row items-center"
+                                    @text={{concat @resource.facilitator.name (t "order.fields.infoblock-text")}}
+                                />
+                            {{/if}}
+                            {{#if waypoint.place.hasInvalidCoordinates}}
+                                <div class="leading-5 text-sm text-red-400 mt-2">
+                                    <FaIcon @icon="exclamation-triangle" class="mr-1" />
+                                    {{t "order.fields.invalid-coordinates"}}
+                                </div>
+                            {{/if}}
+                        </div>
+                        <div>
+                            <ModelSelect
+                                @modelName="customer"
+                                @selectedModel={{waypoint.customer}}
+                                @placeholder={{t "order.fields.customer-placeholder"}}
+                                @triggerClass="form-select form-input truncate max-w-300px"
+                                @infiniteScroll={{false}}
+                                @renderInPlace={{true}}
+                                @allowClear={{true}}
+                                @onChange={{fn this.setWaypointCustomer waypoint}}
+                                @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>
+                            </ModelSelect>
+                        </div>
+                        <div>
+                            <div class="flex flex-row items-center space-x-4 text-sm mt-2">
+                                <div class={{if (eq waypoint.type "dropoff") "is-checked"}}>
+                                    <div class="flex flex-row items-center">
+                                        <RadioButton
+                                            @radioClass="focus:ring-blue-500 h-4 w-4 text-blue-500"
+                                            @radioId={{concat "waypoint_" index "_dropoff"}}
+                                            @value="dropoff"
+                                            @groupValue={{waypoint.type}}
+                                            @name={{concat "waypoint_" index "_dropoff"}}
+                                            @changed={{fn (mut waypoint.type)}}
+                                        />
+                                        <label for={{concat "waypoint_" index "_dropoff"}} class="ml-2">Dropoff</label>
+                                    </div>
+                                </div>
+                                <div class={{if (eq waypoint.type "pickup") "is-checked"}}>
+                                    <div class="flex flex-row items-center">
+                                        <RadioButton
+                                            @radioClass="focus:ring-blue-500 h-4 w-4 text-blue-500"
+                                            @radioId={{concat "waypoint_" index "_pickup"}}
+                                            @value="pickup"
+                                            @groupValue={{waypoint.type}}
+                                            @name={{concat "waypoint_" index "_pickup"}}
+                                            @changed={{fn (mut waypoint.type)}}
+                                        />
+                                        <label for={{concat "waypoint_" index "_pickup"}} class="ml-2">Pickup</label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="flex items-center space-x-2">
+                        {{#if waypoint.place}}
+                            <Button @icon="edit" @size="sm" @onClick={{fn this.editPlace waypoint.place}} @disabled={{cannot-write waypoint.place}} />
+                        {{/if}}
+                        {{#unless (eq index 0)}}
+                            <Button @type="danger" @icon="trash" @size="sm" @onClick={{fn this.removeWaypoint waypoint}} />
+                        {{/unless}}
+                    </div>
+                </div>
+            </div>
+        </DragSortList>
+    {{else}}
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <InputGroup>
+                <div class="flex items-center justify-between">
+                    <label>{{t "order.fields.pickup"}}</label>
+
+                    <div class="flex-row space-x-1 pr-0.5">
+                        {{#if @resource.payload.pickup}}
+                            <a href="javascript:;" {{on "click" (fn this.editPlace @resource.payload.pickup)}}>
+                                <FaIcon @icon="edit" />
+                            </a>
+                            <a href="javascript:;" {{on "click" (fn this.setPayloadPlace "pickup" null)}}>
+                                <FaIcon @icon="trash" />
+                            </a>
+                        {{/if}}
+                    </div>
+                </div>
+
+                <ModelSelect
+                    @modelName="place"
+                    @selectedModel={{@resource.payload.pickup}}
+                    @placeholder={{t "order.fields.select-pickup"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @customSearchEndpoint="places/search"
+                    @query={{hash geo=true latitude=this.location.latitude longitude=this.location.longitude}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn this.setPayloadPlace "pickup"}}
+                    @permission={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.address}}
+                </ModelSelect>
+
+                {{#if (and @resource.facilitator.isIntegratedVendor (is-not-facilitator-supported-place @resource.facilitator @resource.payload.pickup))}}
+                    <InfoBlock
+                        class="my-2 px-4 py-1.5 danger"
+                        @blockClass="flex flex-row items-center"
+                        @text={{concat @resource.facilitator.name (t "order.fields.infoblock-text")}}
+                    />
+                {{/if}}
+
+                {{#if @resource.payload.pickup.hasInvalidCoordinates}}
+                    <div class="leading-5 text-sm text-red-400 mt-2">
+                        <FaIcon @icon="exclamation-triangle" class="mr-1" />
+                        {{t "order.fields.invalid-coordinates"}}
+                    </div>
+                {{/if}}
+            </InputGroup>
+
+            <InputGroup>
+                <div class="flex items-center justify-between">
+                    <label>{{t "order.fields.dropoff"}}</label>
+
+                    <div class="flex-row space-x-2 pr-0.5">
+                        {{#if @resource.payload.dropoff}}
+                            <a href="javascript:;" {{on "click" (fn this.editPlace @resource.payload.dropoff)}} disaled={{cannot "fleet-ops update place"}}>
+                                <FaIcon @icon="edit" />
+                            </a>
+                            <a href="javascript:;" {{on "click" (fn this.setPayloadPlace "dropoff" null)}}>
+                                <FaIcon @icon="trash" />
+                            </a>
+                        {{/if}}
+                    </div>
+                </div>
+
+                <ModelSelect
+                    @modelName="place"
+                    @selectedModel={{@resource.payload.dropoff}}
+                    @placeholder={{t "order.fields.select-dropoff"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @customSearchEndpoint="places/search"
+                    @query={{hash geo=true latitude=this.location.latitude longitude=this.location.longitude}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn this.setPayloadPlace "dropoff"}}
+                    @permission={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.address}}
+                </ModelSelect>
+
+                {{#if (and @resource.facilitator.isIntegratedVendor (is-not-facilitator-supported-place @resource.facilitator @resource.payload.dropoff))}}
+                    <InfoBlock
+                        class="my-2 px-4 py-1.5 danger"
+                        @blockClass="flex flex-row items-center"
+                        @text={{concat @resource.facilitator.name (t "order.fields.infoblock-text")}}
+                    />
+                {{/if}}
+
+                {{#if @resource.payload.dropoff.hasInvalidCoordinates}}
+                    <div class="leading-5 text-sm text-red-400 mt-2">
+                        <FaIcon @icon="exclamation-triangle" class="mr-1" />
+                        {{t "order.fields.invalid-coordinates"}}
+                    </div>
+                {{/if}}
+            </InputGroup>
+
+            <InputGroup>
+                <div class="flex items-center justify-between">
+                    <label>{{t "order.fields.return"}}</label>
+
+                    {{#if @resource.payload.return}}
+                        <a href="javascript:;" {{on "click" (fn this.editPlace @resource.payload.return)}}>{{t "order.fields.edit-address"}}</a>
+                    {{/if}}
+                </div>
+
+                <ModelSelect
+                    @modelName="place"
+                    @selectedModel={{@resource.payload.return}}
+                    @placeholder={{t "order.fields.select-return"}}
+                    @triggerClass="form-select form-input"
+                    @infiniteScroll={{false}}
+                    @customSearchEndpoint="places/search"
+                    @query={{hash geo=true latitude=this.location.latitude longitude=this.location.longitude}}
+                    @renderInPlace={{true}}
+                    @onChange={{fn this.setPayloadPlace "return"}}
+                    @permission={{cannot-write @resource}}
+                    as |model|
+                >
+                    {{model.address}}
+                </ModelSelect>
+
+                {{#if (and @resource.facilitator.isIntegratedVendor (is-not-facilitator-supported-place @resource.facilitator @resource.payload.return))}}
+                    <InfoBlock
+                        class="my-2 px-4 py-1.5 danger"
+                        @blockClass="flex flex-row items-center"
+                        @text={{concat @resource.facilitator.name (t "order.fields.infoblock-text")}}
+                    />
+                {{/if}}
+
+                {{#if @resource.payload.return.hasInvalidCoordinates}}
+                    <div class="leading-5 text-sm text-red-400 mt-2">
+                        <FaIcon @icon="exclamation-triangle" class="mr-1" />
+                        {{t "order.fields.invalid-coordinates"}}
+                    </div>
+                {{/if}}
+            </InputGroup>
+        </div>
+    {{/if}}
+</ContentPanel>

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

@@ -0,0 +1,214 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, get } from '@ember/object';
+import { task } from 'ember-concurrency';
+
+export default class OrderFormRouteComponent extends Component {
+    @service leafletMapManager;
+    @service routeOptimization;
+    @service osrm;
+    @service location;
+    @service store;
+    @service currentUser;
+    @service notifications;
+    @service placeActions;
+    @tracked multipleWaypoints = false;
+    @tracked routingControl;
+    @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]);
+    }
+
+    get places() {
+        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((place) => place);
+    }
+
+    willDestroy() {
+        super.willDestroy(...arguments);
+        if (this.routingControl) {
+            this.leafletMapManager.removeRoutingControl(this.routingControl);
+        }
+    }
+
+    @action toggleWaypoints(multipleWaypoints) {
+        this.multipleWaypoints = multipleWaypoints;
+
+        const { pickup, dropoff } = this.args.resource.payload;
+
+        if (multipleWaypoints) {
+            if (pickup) {
+                this.addWaypoint({ place: pickup, customer: this.args.resource.customer });
+                if (dropoff) {
+                    this.addWaypoint({ place: dropoff, customer: this.args.resource.customer });
+                }
+
+                // clear pickup and dropoff
+                this.args.resource.payload.setProperties({ pickup: null, dropoff: null });
+            } else {
+                this.addWaypoint({ customer: this.args.resource.customer });
+            }
+        } else {
+            const pickup = get(this.args.resource.payload.waypoints, '0.place');
+            const dropoff = get(this.args.resource.payload.waypoints, '1.place');
+
+            if (pickup) {
+                this.setPayloadPlace('pickup', pickup);
+            }
+
+            if (dropoff) {
+                this.setPayloadPlace('dropoff', dropoff);
+            }
+
+            this.clearWaypoints();
+        }
+    }
+
+    @action sortWaypoints({ sourceList, sourceIndex, targetList, targetIndex }) {
+        if (sourceList === targetList && sourceIndex === targetIndex) {
+            return;
+        }
+
+        const item = sourceList.objectAt(sourceIndex);
+
+        sourceList.removeAt(sourceIndex);
+        targetList.insertAt(targetIndex, item);
+
+        this.previewRoute();
+    }
+
+    @action addWaypoint(properties = {}) {
+        if (this.args.resource.customer) {
+            properties.customer = this.args.resource.customer;
+        }
+
+        const waypoint = this.store.createRecord('waypoint', { ...properties, type: 'dropoff' });
+        this.args.resource.payload.waypoints.pushObject(waypoint);
+        this.previewRoute();
+    }
+
+    @action setWaypointPlace(index, place) {
+        if (!this.args.resource.payload.waypoints[index]) {
+            return;
+        }
+
+        this.args.resource.payload.waypoints[index].place = place;
+        this.previewRoute();
+    }
+
+    @action setWaypointCustomer(waypoint, model) {
+        waypoint.set('customer', model);
+        waypoint.set('customer_type', `fleet-ops:${model.customer_type}`);
+    }
+
+    @action removeWaypoint(waypoint) {
+        if (this.multipleWaypoints && this.args.resource.payload.waypoints.length === 1) return;
+        this.args.resource.payload.waypoints.removeObject(waypoint);
+        this.previewRoute();
+    }
+
+    @action clearWaypoints() {
+        this.args.resource.payload.waypoints.clear();
+        this.previewRoute();
+    }
+
+    @action setPayloadPlace(prop, place) {
+        this.args.resource.payload[prop] = place;
+        this.previewRoute();
+    }
+
+    @action editPlace(place) {
+        this.placeActions.modal.edit(place);
+    }
+
+    @action async previewRoute() {
+        if (!this.coordinates.length) return;
+
+        const routingControl = await this.leafletMapManager.replaceRoutingControl(this.coordinates, this.routingControl, {
+            onRouteFound: (route) => this.setRoute(route),
+            removeOptions: {
+                filter: (layer) => layer.record_id === this.args.resource.driver_assigned?.id,
+            },
+        });
+
+        this.routingControl = routingControl;
+    }
+
+    @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: 'create_order',
+                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: 'create_order',
+                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;
+    }
+}

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

@@ -0,0 +1,109 @@
+<ContentPanel @title={{t "order.fields.service"}} @open={{true}} @wrapperClass="bordered-top">
+    <div>
+        <Toggle
+            @label={{t "order.fields.apply-service-rate"}}
+            @wrapperClass="justify-start-i mb-4"
+            @isToggled={{@resource.servicable}}
+            @onToggle={{perform this.queryServiceRates}}
+            @disabled={{or (cannot-write @resource) (not this.isServicable)}}
+            @helpText={{t "order.fields.service-help-text"}}
+        />
+        {{#if @resource.servicable}}
+            <div>
+                <div class="space-y-2">
+                    {{#unless @resource.facilitator.isIntegratedVendor}}
+                        <InputGroup @name={{t "order.fields.select-service-rate"}} @helpText={{t "order.fields.service-quotes-help-text"}}>
+                            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                                <PowerSelect
+                                    @options={{this.serviceRates}}
+                                    @selected={{this.selectedRate}}
+                                    @onChange={{perform this.getServiceQuotes}}
+                                    @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>
+                                </PowerSelect>
+                            </div>
+                        </InputGroup>
+                    {{/unless}}
+                    <div class="flex flex-row justify-end">
+                        <Button
+                            @icon="refresh"
+                            @text={{t "order.fields.refresh-button"}}
+                            @isLoading={{this.getServiceQuotes.isRunning}}
+                            @disabled={{not this.selectedRate}}
+                            @onClick={{perform this.getServiceQuotes this.selectedRate}}
+                        />
+                    </div>
+                </div>
+                {{#if this.getServiceQuotes.isRunning}}
+                    <div class="flex items-center justify-center py-5">
+                        <Spinner class="text-sm dark:text-gray-100 flex flex-row items-center" @iconClass="mr-2" @loadingMessage={{t "order.fields.loading-message"}} />
+                    </div>
+                {{else}}
+                    <InfoBlock class="my-3" @text={{t "order.fields.service-quote-info"}} />
+                    <div class="radio-group-condensed -space-y-px">
+                        {{#each this.serviceQuotes as |serviceQuote|}}
+                            <div class="radio-group-item shadow-sm flex-col pl-0i pr-0i {{if (eq @resource.service_quote_uuid serviceQuote.uuid) 'is-checked'}}">
+                                <div class="flex flex-row items-center mb-2.5 px-4">
+                                    <RadioButton
+                                        @radioClass="focus:ring-blue-500 h-6 w-6 text-blue-500"
+                                        @radioId={{serviceQuote.uuid}}
+                                        @value={{serviceQuote.uuid}}
+                                        @groupValue={{@resource.service_quote_uuid}}
+                                        @name="serviceQuote"
+                                        @changed={{fn (mut @resource.service_quote_uuid)}}
+                                    />
+                                    <label for={{serviceQuote.uuid}} class="ml-3 flex-1">{{serviceQuote.public_id}}</label>
+                                    <Badge @hideStatusDot={{true}} @status="info">
+                                        {{serviceQuote.request_id}}
+                                    </Badge>
+                                </div>
+                                <div class="next-table-wrapper no-scroll h-auto table-fluid rounded-none">
+                                    <table class="table table-fixed flex-1">
+                                        <thead>
+                                            <tr>
+                                                <th class="text-left">{{t "order.fields.breakdown"}}</th>
+                                                <th></th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            {{#each serviceQuote.items as |item|}}
+                                                <tr>
+                                                    <td>
+                                                        <span class="font-semibold">{{smart-humanize item.details}}</span>
+                                                    </td>
+                                                    <td>
+                                                        <span>{{format-currency item.amount serviceQuote.currency}}</span>
+                                                    </td>
+                                                </tr>
+                                            {{/each}}
+                                            <tr class="border-b-0">
+                                                <td class="border-b-0">
+                                                    <span class="font-semibold">{{t "common.total"}}</span>
+                                                </td>
+                                                <td class="border-b-0">
+                                                    <span>{{format-currency serviceQuote.amount serviceQuote.currency}}</span>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        {{else}}
+                            <InfoBlock
+                                class="my-2 px-4 py-1.5 warning"
+                                @blockClass="flex flex-row items-center"
+                                @text={{if @resource.payload.payloadCoordinates.length (t "order.fields.no-service-quotes") (t "order.fields.input-order-routes")}}
+                            />
+                        {{/each}}
+                    </div>
+                {{/if}}
+            </div>
+        {{/if}}
+    </div>
+</ContentPanel>

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

@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+export default class OrderFormServiceRateComponent extends Component {
+    @service serviceRateActions;
+    @tracked selectedRate;
+    @tracked serviceRates = [];
+    @tracked serviceQuotes = [];
+
+    get isServicable() {
+        return this.args.resource?.order_config && this.args.resource?.payloadCoordinates?.length >= 2;
+    }
+
+    @task *queryServiceRates(toggled) {
+        this.args.resource.servicable = toggled;
+        if (!toggled) return;
+        this.serviceRates = yield this.serviceRateActions.queryServiceRatesForOrder.perform(this.args.resource);
+    }
+
+    @task *getServiceQuotes(serviceRate) {
+        this.selectedRate = serviceRate;
+        this.serviceQuotes = yield this.serviceRateActions.getServiceQuotes.perform(serviceRate, this.args.resource);
+    }
+}

package/addon/components/order/form.hbs

@@ -0,0 +1,28 @@
+<div class="form-wrapper" ...attributes>
+    {{#if (has-block)}}
+        {{yield
+            (hash
+                Details=(component "order/form/details" resource=@resource)
+                CustomFields=(component "order/form/custom-fields" resource=@resource customFields=@customFields)
+                Route=(component "order/form/route" resource=@resource)
+                RegistryYield=(component "registry-yield" registry="fleet-ops:component:order:form" order=@resource)
+                Payload=(component "order/form/payload" resource=@resource)
+                ServiceRate=(component "order/form/service-rate" resource=@resource)
+                Notes=(component "order/form/notes" resource=@resource)
+                Documents=(component "order/form/documents" resource=@resource)
+                Metadata=(component "order/form/metadata" resource=@resource)
+            )
+        }}
+    {{else}}
+        <Order::Form::Details @resource={{@resource}} />
+        <Order::Form::Route @resource={{@resource}} />
+        <RegistryYield @registry="fleet-ops:component:order:form" as |RegistryComponent|>
+            <RegistryComponent @order={{@order}} />
+        </RegistryYield>
+        <Order::Form::Payload @resource={{@resource}} />
+        <Order::Form::ServiceRate @resource={{@resource}} />
+        <Order::Form::Notes @resource={{@resource}} />
+        <Order::Form::Documents @resource={{@resource}} />
+        <Order::Form::Metadata @resource={{@resource}} />
+    {{/if}}
+</div>