@fleetbase/fleetops-engine 0.4.15 → 0.4.17

package/addon/templates/operations/orders/index/new.hbs

@@ -33,12 +33,6 @@
                         </div>
                         <span>{{t "fleet-ops.operations.orders.index.new.edit-order"}}</span>
                     </a>
-                    <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.addCustomField)}}>
-                        <div class="w-6">
-                            <FaIcon @icon="edit" />
-                        </div>
-                        <span>{{t "fleet-ops.operations.orders.index.new.add-field"}}</span>
-                    </a>
                 </div>
             </div>
         </DropdownButton>
@@ -51,47 +45,27 @@
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-2">
                 <div class="input-group">
                     <InputLabel @labelText={{t "fleet-ops.operations.orders.index.new.order-type"}} @helpText={{t "fleet-ops.operations.orders.index.new.order-type-help-text"}} />
-                    <Select
-                        class="w-full"
-                        @options={{this.types}}
-                        @value={{this.order.type}}
-                        @optionLabel="name"
-                        @optionValue="key"
-                        @onSelect={{this.setConfig}}
-                        @placeholder={{t "fleet-ops.operations.orders.index.new.order-type-placeholder"}}
-                    />
+                    <select class="form-select w-full has--placeholder" {{on "change" this.setConfig}}>
+                        <option selected disabled>
+                            {{t "fleet-ops.operations.orders.index.new.order-type-placeholder"}}
+                        </option>
+                        {{#each this.orderConfigs as |orderConfig|}}
+                            <option value={{orderConfig.id}} selected={{eq this.orderConfig.id orderConfig.id}}>
+                                {{orderConfig.name}}
+                            </option>
+                        {{/each}}
+                    </select>
                 </div>
 
-                <InputGroup
-                    @name={{t "fleet-ops.operations.orders.index.new.internal-id"}}
-                    @value={{this.order.internal_id}}
-                    @helpText={{t "fleet-ops.operations.orders.index.new.internal-id-help-text"}}
-                />
+                <InputGroup @name={{t "fleet-ops.operations.orders.index.new.internal-id"}} @value={{this.order.internal_id}} @helpText={{t "fleet-ops.operations.orders.index.new.internal-id-help-text"}} />
 
                 <InputGroup>
                     <InputLabel @labelText={{t "fleet-ops.operations.orders.index.new.schedule"}} @helpText={{t "fleet-ops.operations.orders.index.new.schedule-help-text"}} />
-                    <DateTimeInput
-                        class="form-input"
-                        @value={{this.order.scheduled_at}}
-                        @minDate={{format-date (now) "yyyy-MM-dd"}}
-                        @minTime={{format-date (now) "HH:mm"}}
-                        @onUpdate={{this.scheduleOrder}}
-                        @disabled={{this.order.dispatched}}
-                    />
+                    <DateTimeInput class="form-input" @value={{this.order.scheduled_at}} @minDate={{format-date (now) "yyyy-MM-dd"}} @minTime={{format-date (now) "HH:mm"}} @onUpdate={{this.scheduleOrder}} @disabled={{this.order.dispatched}} />
                 </InputGroup>
 
                 <InputGroup @name={{t "fleet-ops.operations.orders.index.new.customer"}} @helpText={{t "fleet-ops.operations.orders.index.new.customer-help-text"}}>
-                    <ModelSelect
-                        @modelName="customer"
-                        @selectedModel={{this.order.customer}}
-                        @placeholder={{t "fleet-ops.operations.orders.index.new.customer-placeholder"}}
-                        @triggerClass="form-select form-input"
-                        @infiniteScroll={{false}}
-                        @renderInPlace={{true}}
-                        @allowClear={{true}}
-                        @onChange={{this.setOrderCustomer}}
-                        as |model|
-                    >
+                    <ModelSelect @modelName="customer" @selectedModel={{this.order.customer}} @placeholder={{t "fleet-ops.operations.orders.index.new.customer-placeholder"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @allowClear={{true}} @onChange={{this.setOrderCustomer}} as |model|>
                         <div class="flex items-center">
                             <div class="w-7">
                                 <FaIcon @icon={{if model.isVendor "warehouse" "user"}} />
@@ -104,17 +78,7 @@
                 </InputGroup>
 
                 <InputGroup @name={{t "fleet-ops.operations.orders.index.new.facilitator"}} @helpText={{t "fleet-ops.operations.orders.index.new.facilitator-help-text"}}>
-                    <ModelSelect
-                        @modelName="facilitator"
-                        @selectedModel={{this.order.facilitator}}
-                        @placeholder={{t "fleet-ops.operations.orders.index.new.facilitator-placeholder"}}
-                        @triggerClass="form-select form-input"
-                        @allowClear={{true}}
-                        @infiniteScroll={{false}}
-                        @renderInPlace={{true}}
-                        @onChange={{this.setOrderFacilitator}}
-                        as |model|
-                    >
+                    <ModelSelect @modelName="facilitator" @selectedModel={{this.order.facilitator}} @placeholder={{t "fleet-ops.operations.orders.index.new.facilitator-placeholder"}} @triggerClass="form-select form-input" @allowClear={{true}} @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.setOrderFacilitator}} as |model|>
                         <div class="flex items-center">
                             <div class="w-7">
                                 {{#if model.isIntegratedVendor}}
@@ -131,36 +95,13 @@
                 </InputGroup>
 
                 {{#if (and this.order.facilitator.isIntegratedVendor this.order.facilitator.service_types.length)}}
-                    <InputGroup
-                        @name={{t "fleet-ops.operations.orders.index.new.service-type"}}
-                        @helpText={{concat (t "fleet-ops.operations.orders.index.new.service-type-help-text") this.order.facilitator.name "."}}
-                    >
-                        <Select
-                            class="w-full"
-                            @options={{this.order.facilitator.service_types}}
-                            @value={{this.integratedVendorServiceType}}
-                            @optionLabel="description"
-                            @optionValue="key"
-                            @onSelect={{this.selectIntegratedServiceType}}
-                            @placeholder={{t "fleet-ops.operations.orders.index.new.service-type-placeholder"}}
-                        />
+                    <InputGroup @name={{t "fleet-ops.operations.orders.index.new.service-type"}} @helpText={{concat (t "fleet-ops.operations.orders.index.new.service-type-help-text") this.order.facilitator.name "."}}>
+                        <Select class="w-full" @options={{this.order.facilitator.service_types}} @value={{this.integratedVendorServiceType}} @optionLabel="description" @optionValue="key" @onSelect={{this.selectIntegratedServiceType}} @placeholder={{t "fleet-ops.operations.orders.index.new.service-type-placeholder"}} />
                     </InputGroup>
                 {{/if}}
 
                 <InputGroup @name={{t "fleet-ops.operations.orders.index.new.assign-driver"}} @helpText={{t "fleet-ops.operations.orders.index.new.assign-driver-help-text"}}>
-                    <ModelSelect
-                        @modelName="driver"
-                        @selectedModel={{this.order.driver_assigned}}
-                        @query={{@options.driversQuery}}
-                        @placeholder={{t "fleet-ops.operations.orders.index.new.assign-driver-placeholder"}}
-                        @triggerClass="form-select form-input"
-                        @infiniteScroll={{false}}
-                        @renderInPlace={{true}}
-                        @allowClear={{true}}
-                        @disabled={{this.isUsingIntegratedVendor}}
-                        @onChange={{fn (mut this.order.driver_assigned)}}
-                        as |model|
-                    >
+                    <ModelSelect @modelName="driver" @selectedModel={{this.order.driver_assigned}} @query={{@options.driversQuery}} @placeholder={{t "fleet-ops.operations.orders.index.new.assign-driver-placeholder"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @allowClear={{true}} @disabled={{this.isUsingIntegratedVendor}} @onChange={{fn (mut this.order.driver_assigned)}} as |model|>
                         <div class="flex items-center">
                             <div class="w-7">
                                 <FaIcon @icon="id-card-alt" />
@@ -182,29 +123,14 @@
 
                 {{#if (and this.order.pod_required (not this.isUsingIntegratedVendor))}}
                     <InputGroup>
-                        <InputLabel
-                            @labelText={{t "fleet-ops.operations.orders.index.new.proof-delivery"}}
-                            @helpText={{t "fleet-ops.operations.orders.index.new.proof-delivery-help-text"}}
-                        />
-                        <Select
-                            class="w-full"
-                            @options={{this.podOptions}}
-                            @value={{this.order.pod_method}}
-                            @onSelect={{fn (mut this.order.pod_method)}}
-                            @placeholder={{t "fleet-ops.operations.orders.index.new.proof-delivery-placeholder"}}
-                        />
+                        <InputLabel @labelText={{t "fleet-ops.operations.orders.index.new.proof-delivery"}} @helpText={{t "fleet-ops.operations.orders.index.new.proof-delivery-help-text"}} />
+                        <Select class="w-full" @options={{this.podOptions}} @value={{this.order.pod_method}} @onSelect={{fn (mut this.order.pod_method)}} @placeholder={{t "fleet-ops.operations.orders.index.new.proof-delivery-placeholder"}} />
                     </InputGroup>
                 {{/if}}
 
                 {{#if this.order.adhoc}}
                     <div>
-                        <InputGroup
-                            @name={{t "fleet-ops.operations.orders.index.new.adhoc-ping"}}
-                            @type="number"
-                            @value={{this.order.adhoc_distance}}
-                            @wrapperClass="mb-0"
-                            @helpText={{t "fleet-ops.operations.orders.index.new.adhoc-ping-help-text"}}
-                        />
+                        <InputGroup @name={{t "fleet-ops.operations.orders.index.new.adhoc-ping"}} @type="number" @value={{this.order.adhoc_distance}} @wrapperClass="mb-0" @helpText={{t "fleet-ops.operations.orders.index.new.adhoc-ping-help-text"}} />
                         <div class="mt-2 px-3 py-1 rounded-lg border border-blue-600 bg-blue-100 flex items-center">
                             <FaIcon @icon="triangle-exclamation" class="text-blue-900 mr-1.5" />
                             <span class="text-blue-900 text-xs">{{t "fleet-ops.operations.orders.index.new.adhoc-ping-message"}}</span>
@@ -214,106 +140,36 @@
 
                 <div class="lg:col-span-2">
                     <InputGroup @wrapperClass="pt-2">
-                        <Toggle
-                            @label={{t "fleet-ops.operations.orders.index.new.ad-hoc"}}
-                            @wrapperClass="justify-start-i"
-                            @isToggled={{this.order.adhoc}}
-                            @onToggle={{this.toggleAdhoc}}
-                            @disabled={{this.isUsingIntegratedVendor}}
-                            @helpText={{t "fleet-ops.operations.orders.index.new.ad-hoc-help-text"}}
-                        />
+                        <Toggle @label={{t "fleet-ops.operations.orders.index.new.ad-hoc"}} @wrapperClass="justify-start-i" @isToggled={{this.order.adhoc}} @onToggle={{this.toggleAdhoc}} @disabled={{this.isUsingIntegratedVendor}} @helpText={{t "fleet-ops.operations.orders.index.new.ad-hoc-help-text"}} />
                     </InputGroup>
                 </div>
 
                 <div class="lg:col-span-2">
                     <InputGroup @wrapperClass="pt-1">
-                        <Toggle
-                            @label={{t "fleet-ops.operations.orders.index.new.dispatch"}}
-                            @wrapperClass="justify-start-i"
-                            @isToggled={{this.order.dispatched}}
-                            @onToggle={{fn (mut this.order.dispatched)}}
-                            @disabled={{this.isUsingIntegratedVendor}}
-                            @helpText={{t "fleet-ops.operations.orders.index.new.dispatch-help-text"}}
-                        />
+                        <Toggle @label={{t "fleet-ops.operations.orders.index.new.dispatch"}} @wrapperClass="justify-start-i" @isToggled={{this.order.dispatched}} @onToggle={{fn (mut this.order.dispatched)}} @disabled={{this.isUsingIntegratedVendor}} @helpText={{t "fleet-ops.operations.orders.index.new.dispatch-help-text"}} />
                     </InputGroup>
                 </div>
 
                 <div class="lg:col-span-2">
                     <InputGroup @wrapperClass="pt-1">
-                        <Toggle
-                            @label={{t "fleet-ops.operations.orders.index.new.require-proof"}}
-                            @wrapperClass="justify-start-i"
-                            @isToggled={{this.order.pod_required}}
-                            @onToggle={{this.toggleProofOfDelivery}}
-                            @helpText={{t "fleet-ops.operations.orders.index.new.require-proof-help-text"}}
-                        />
+                        <Toggle @label={{t "fleet-ops.operations.orders.index.new.require-proof"}} @wrapperClass="justify-start-i" @isToggled={{this.order.pod_required}} @onToggle={{this.toggleProofOfDelivery}} @helpText={{t "fleet-ops.operations.orders.index.new.require-proof-help-text"}} />
                     </InputGroup>
                 </div>
             </div>
         </ContentPanel>
 
-        {{#if this.typeConfig}}
-            {{#each this.groupedMetaFields as |group|}}
-                <ContentPanel
-                    @title={{if group.value (humanize group.value) (t "fleet-ops.operations.orders.index.new.additional-details")}}
-                    @open={{true}}
-                    @pad={{true}}
-                    @panelBodyClass="bg-white dark:bg-gray-800"
-                >
-                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-2">
-                        {{#each group.items as |metaField|}}
-                            <div class="input-group {{if (eq metaField.type 'boolean') 'col-span-2 items-center' ''}}">
-                                <div class="flex items-center justify-between">
-                                    {{#if (not-eq metaField.type "boolean")}}
-                                        <InputLabel @labelText={{metaField.label}} @required={{metaField.required}} />
-                                    {{/if}}
-
-                                    {{#if metaField.removable}}
-                                        <div class="flex items-center pr-1">
-                                            <a href="javascript:;" {{on "click" (fn this.removeMeta metaField)}}>
-                                                {{t "fleet-ops.common.remove"}}
-                                            </a>
-                                        </div>
-                                    {{/if}}
-                                </div>
-
-                                <CustomField
-                                    @metaField={{metaField}}
-                                    @value={{metaField.value}}
-                                    @placeholder={{metaField.label}}
-                                    @onChange={{fn (mut metaField.value)}}
-                                    class="{{if (eq metaField.type 'boolean') 'h-10 flex flex-row items-center' ''}}"
-                                />
-                            </div>
+        {{#if this.orderConfig}}
+            {{#each this.customFieldGroups as |group|}}
+                <ContentPanel @title={{group.name}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                    <div class="grid grid-cols-{{or group.meta.grid_size 1}} gap-2">
+                        {{#each group.customFields as |customField|}}
+                            <CustomField @customField={{customField}} @order={{this.order}} @orderConfig={{this.orderConfig}} @onChange={{this.setCustomFieldValue}} />
                         {{/each}}
                     </div>
                 </ContentPanel>
             {{/each}}
         {{/if}}
 
-        <ContentPanel
-            @title={{t "fleet-ops.operations.orders.index.new.metadata"}}
-            @open={{this.order.meta.length}}
-            @pad={{true}}
-            @panelBodyClass="bg-white dark:bg-gray-800"
-            @actionButtons={{this.metadataButtons}}
-        >
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-2">
-                {{#each this.order.meta as |metaField index|}}
-                    <InputGroup>
-                        <div class="flex justify-between items-center mb-0.5">
-                            <label>{{metaField.label}}</label>
-                            <a href="javascript:;" class="text-xs" {{on "click" (fn this.editCustomField index)}}>
-                                <FaIcon @icon="edit" @size="sm" class="mr-1" />
-                                Edit
-                            </a>
-                        </div>
-                        <Input class="w-full form-input" @value={{metaField.value}} placeholder={{metaField.label}} />
-                    </InputGroup>
-                {{/each}}
-            </div>
-        </ContentPanel>
-
         <ContentPanel @title={{t "fleet-ops.operations.orders.index.new.route"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
             <div class="flex flex-row justify-between mb-4">
                 <div class="flex">
@@ -321,23 +177,8 @@
                 </div>
                 <div class="flex flex-1 justify-end space-x-2">
                     {{#if this.isMultipleDropoffOrder}}
-                        <Button
-                            @type="magic"
-                            @icon="magic"
-                            @text={{t "fleet-ops.operations.orders.index.new.optimize-route"}}
-                            @size="sm"
-                            @onClick={{this.optimizeRoute}}
-                            @helpText={{t "fleet-ops.operations.orders.index.new.optimize-route-help-text"}}
-                            @disabled={{lt this.waypoints.length 3}}
-                            @isLoading={{this.isOptimizingRoute}}
-                        />
-                        <Button
-                            @icon="map-marked-alt"
-                            @text={{t "fleet-ops.operations.orders.index.new.add-waypoint"}}
-                            @size="sm"
-                            @onClick={{this.addWaypoint}}
-                            @helpText={{t "fleet-ops.operations.orders.index.new.add-waypoint-help-text"}}
-                        />
+                        <Button @type="magic" @icon="magic" @text={{t "fleet-ops.operations.orders.index.new.optimize-route"}} @size="sm" @onClick={{this.optimizeRoute}} @helpText={{t "fleet-ops.operations.orders.index.new.optimize-route-help-text"}} @disabled={{lt this.waypoints.length 3}} @isLoading={{this.isOptimizingRoute}} />
+                        <Button @icon="map-marked-alt" @text={{t "fleet-ops.operations.orders.index.new.add-waypoint"}} @size="sm" @onClick={{this.addWaypoint}} @helpText={{t "fleet-ops.operations.orders.index.new.add-waypoint-help-text"}} />
                     {{/if}}
                 </div>
             </div>
@@ -354,27 +195,12 @@
                             </div>
 
                             <div class="flex-1 px-3">
-                                <ModelSelect
-                                    @modelName="place"
-                                    @selectedModel={{waypoint.place}}
-                                    @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.userLatitude longitude=this.userLongitude}}
-                                    @renderInPlace={{true}}
-                                    @onChange={{fn this.setWaypointPlace index}}
-                                    as |model|
-                                >
+                                <ModelSelect @modelName="place" @selectedModel={{waypoint.place}} @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.userLatitude longitude=this.userLongitude}} @renderInPlace={{true}} @onChange={{fn this.setWaypointPlace index}} as |model|>
                                     {{model.address}}
                                 </ModelSelect>
 
                                 {{#if (and this.isUsingIntegratedVendor (is-not-facilitator-supported-place this.order.facilitator waypoint.place))}}
-                                    <InfoBlock
-                                        class="my-2 px-4 py-1.5 danger"
-                                        @blockClass="flex flex-row items-center"
-                                        @text={{concat this.order.facilitator.name (t "fleet-ops.operations.orders.index.new.infoblock-text")}}
-                                    />
+                                    <InfoBlock class="my-2 px-4 py-1.5 danger" @blockClass="flex flex-row items-center" @text={{concat this.order.facilitator.name (t "fleet-ops.operations.orders.index.new.infoblock-text")}} />
                                 {{/if}}
 
                                 {{#if waypoint.place.hasInvalidCoordinates}}
@@ -412,27 +238,12 @@
                             </div>
                         </div>
 
-                        <ModelSelect
-                            @modelName="place"
-                            @selectedModel={{this.payload.pickup}}
-                            @placeholder={{t "fleet-ops.operations.orders.index.new.select-pickup"}}
-                            @triggerClass="form-select form-input"
-                            @infiniteScroll={{false}}
-                            @customSearchEndpoint="places/search"
-                            @query={{hash geo=true latitude=this.userLatitude longitude=this.userLongitude}}
-                            @renderInPlace={{true}}
-                            @onChange={{fn this.setPayloadPlace "pickup"}}
-                            as |model|
-                        >
+                        <ModelSelect @modelName="place" @selectedModel={{this.payload.pickup}} @placeholder={{t "fleet-ops.operations.orders.index.new.select-pickup"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=this.userLatitude longitude=this.userLongitude}} @renderInPlace={{true}} @onChange={{fn this.setPayloadPlace "pickup"}} as |model|>
                             {{model.address}}
                         </ModelSelect>
 
                         {{#if (and this.isUsingIntegratedVendor (is-not-facilitator-supported-place this.order.facilitator this.payload.pickup))}}
-                            <InfoBlock
-                                class="my-2 px-4 py-1.5 danger"
-                                @blockClass="flex flex-row items-center"
-                                @text={{concat this.order.facilitator.name (t "fleet-ops.operations.orders.index.new.infoblock-text")}}
-                            />
+                            <InfoBlock class="my-2 px-4 py-1.5 danger" @blockClass="flex flex-row items-center" @text={{concat this.order.facilitator.name (t "fleet-ops.operations.orders.index.new.infoblock-text")}} />
                         {{/if}}
 
                         {{#if this.payload.pickup.hasInvalidCoordinates}}
@@ -459,27 +270,12 @@
                             </div>
                         </div>
 
-                        <ModelSelect
-                            @modelName="place"
-                            @selectedModel={{this.payload.dropoff}}
-                            @placeholder={{t "fleet-ops.operations.orders.index.new.select-dropoff"}}
-                            @triggerClass="form-select form-input"
-                            @infiniteScroll={{false}}
-                            @customSearchEndpoint="places/search"
-                            @query={{hash geo=true latitude=this.userLatitude longitude=this.userLongitude}}
-                            @renderInPlace={{true}}
-                            @onChange={{fn this.setPayloadPlace "dropoff"}}
-                            as |model|
-                        >
+                        <ModelSelect @modelName="place" @selectedModel={{this.payload.dropoff}} @placeholder={{t "fleet-ops.operations.orders.index.new.select-dropoff"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=this.userLatitude longitude=this.userLongitude}} @renderInPlace={{true}} @onChange={{fn this.setPayloadPlace "dropoff"}} as |model|>
                             {{model.address}}
                         </ModelSelect>
 
                         {{#if (and this.isUsingIntegratedVendor (is-not-facilitator-supported-place this.order.facilitator this.payload.dropoff))}}
-                            <InfoBlock
-                                class="my-2 px-4 py-1.5 danger"
-                                @blockClass="flex flex-row items-center"
-                                @text={{concat this.order.facilitator.name (t "fleet-ops.operations.orders.index.new.infoblock-text")}}
-                            />
+                            <InfoBlock class="my-2 px-4 py-1.5 danger" @blockClass="flex flex-row items-center" @text={{concat this.order.facilitator.name (t "fleet-ops.operations.orders.index.new.infoblock-text")}} />
                         {{/if}}
 
                         {{#if this.payload.dropoff.hasInvalidCoordinates}}
@@ -499,27 +295,12 @@
                             {{/if}}
                         </div>
 
-                        <ModelSelect
-                            @modelName="place"
-                            @selectedModel={{this.payload.return}}
-                            @placeholder={{t "fleet-ops.operations.orders.index.new.select-return"}}
-                            @triggerClass="form-select form-input"
-                            @infiniteScroll={{false}}
-                            @customSearchEndpoint="places/search"
-                            @query={{hash geo=true latitude=this.userLatitude longitude=this.userLongitude}}
-                            @renderInPlace={{true}}
-                            @onChange={{fn this.setPayloadPlace "return"}}
-                            as |model|
-                        >
+                        <ModelSelect @modelName="place" @selectedModel={{this.payload.return}} @placeholder={{t "fleet-ops.operations.orders.index.new.select-return"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=this.userLatitude longitude=this.userLongitude}} @renderInPlace={{true}} @onChange={{fn this.setPayloadPlace "return"}} as |model|>
                             {{model.address}}
                         </ModelSelect>
 
                         {{#if (and this.isUsingIntegratedVendor (is-not-facilitator-supported-place this.order.facilitator this.payload.return))}}
-                            <InfoBlock
-                                class="my-2 px-4 py-1.5 danger"
-                                @blockClass="flex flex-row items-center"
-                                @text={{concat this.order.facilitator.name (t "fleet-ops.operations.orders.index.new.infoblock-text")}}
-                            />
+                            <InfoBlock class="my-2 px-4 py-1.5 danger" @blockClass="flex flex-row items-center" @text={{concat this.order.facilitator.name (t "fleet-ops.operations.orders.index.new.infoblock-text")}} />
                         {{/if}}
 
                         {{#if this.payload.return.hasInvalidCoordinates}}
@@ -533,9 +314,36 @@
             {{/if}}
         </ContentPanel>
 
+        {{#if this.renderableComponents}}
+            {{#each this.renderableComponents as |renderableComponent|}}
+                {{component renderableComponent order=this.order}}
+            {{/each}}
+        {{/if}}
+
         <ContentPanel @title={{t "fleet-ops.operations.orders.index.new.payload-entities"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
             {{#if this.isNotCsvImportedOrder}}
-                <Button @wrapperClass="mb-4" @icon="plus" @iconPrefix="fas" @text={{t "fleet-ops.operations.orders.index.new.add-item-order"}} @size="sm" @onClick={{this.addEntity}} />
+                <div class="flex items-center mb-4">
+                    <Button @wrapperClass="mr-2" @icon="square-plus" @iconPrefix="fas" @text={{t "fleet-ops.operations.orders.index.new.add-item-order"}} @size="sm" @onClick={{this.addEntity}} />
+                    {{#if this.orderConfig.entities}}
+                        <DropdownButton @type="magic" @icon="ellipsis-h" @size="sm" @iconPrefix="fas" @text={{t "fleet-ops.operations.orders.index.new.add-entity"}} @triggerClass="mr-2 hidden md:flex" as |dd|>
+                            <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
+                                {{#each this.orderConfig.entities as |customEntity|}}
+                                    <div class="p-1">
+                                        <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.addFromCustomEntity customEntity)}}>
+                                            <div class="w-6">
+                                                <FaIcon @icon="cube" />
+                                            </div>
+                                            <div>
+                                                <div class="font-semibold">{{customEntity.name}}</div>
+                                                <span class="text-xs">{{customEntity.description}}</span>
+                                            </div>
+                                        </a>
+                                    </div>
+                                {{/each}}
+                            </div>
+                        </DropdownButton>
+                    {{/if}}
+                </div>
             {{/if}}
             {{#if this.isCsvImportedOrder}}
                 <div class="space-y-2">
@@ -547,13 +355,7 @@
                                     <h4 class="font-bold dark:text-gray-100">{{group.waypoint.place.address}}</h4>
                                 </div>
                                 <div>
-                                    <Button
-                                        @icon="plus"
-                                        @iconPrefix="fas"
-                                        @text={{t "fleet-ops.operations.orders.index.new.add-item-button"}}
-                                        @size="sm"
-                                        @onClick={{fn this.addEntity group.importId}}
-                                    />
+                                    <Button @icon="plus" @iconPrefix="fas" @text={{t "fleet-ops.operations.orders.index.new.add-item-button"}} @size="sm" @onClick={{fn this.addEntity group.importId}} />
                                 </div>
                             </div>
                             <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-2">
@@ -568,24 +370,12 @@
                                                     <Input @value={{entity.name}} @type="text" class="w-full form-input form-input-sm" placeholder={{t "fleet-ops.common.name"}} />
                                                 </div>
                                                 <div>
-                                                    <Input
-                                                        @value={{entity.sku}}
-                                                        @type="text"
-                                                        class="w-full form-input form-input-sm"
-                                                        placeholder={{t "fleet-ops.operations.orders.index.new.sku"}}
-                                                    />
+                                                    <Input @value={{entity.sku}} @type="text" class="w-full form-input form-input-sm" placeholder={{t "fleet-ops.operations.orders.index.new.sku"}} />
                                                 </div>
                                                 <Button @icon="pencil" @text={{t "fleet-ops.operations.orders.index.new.edit-item"}} @size="sm" @onClick={{fn this.editEntity entity}} />
                                             </div>
                                             <div class="absolute top-0 right-0 p-2">
-                                                <Button
-                                                    @icon="times"
-                                                    @iconPrefix="fas"
-                                                    @type="danger"
-                                                    @size="xs"
-                                                    @onClick={{fn this.removeEntity entity}}
-                                                    @wrapperClass={{if (eq index 0) "invisible"}}
-                                                />
+                                                <Button @icon="times" @iconPrefix="fas" @type="danger" @size="xs" @onClick={{fn this.removeEntity entity}} @wrapperClass={{if (eq index 0) "invisible"}} />
                                             </div>
                                         </div>
                                     </div>
@@ -626,14 +416,7 @@
                                     <Button @icon="pencil" @text={{t "fleet-ops.operations.orders.index.new.edit-item"}} @size="sm" @onClick={{fn this.editEntity entity}} />
                                 </div>
                                 <div class="absolute top-0 right-0 p-2">
-                                    <Button
-                                        @icon="times"
-                                        @iconPrefix="fas"
-                                        @type="danger"
-                                        @size="xs"
-                                        @onClick={{fn this.removeEntity entity}}
-                                        @wrapperClass={{if (eq index 0) "invisible"}}
-                                    />
+                                    <Button @icon="times" @iconPrefix="fas" @type="danger" @size="xs" @onClick={{fn this.removeEntity entity}} @wrapperClass={{if (eq index 0) "invisible"}} />
                                 </div>
                             </div>
                         </div>
@@ -643,39 +426,15 @@
         </ContentPanel>
 
         <ContentPanel @title={{t "fleet-ops.common.service"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
-            <Toggle
-                @label={{t "fleet-ops.operations.orders.index.new.apply-service-rate"}}
-                @wrapperClass="justify-start-i mb-4"
-                @isToggled={{this.servicable}}
-                @onToggle={{this.checkServiceRates}}
-                @disabled={{this.isNotServicable}}
-                @helpText={{t "fleet-ops.operations.orders.index.new.service-help-text"}}
-            />
+            <Toggle @label={{t "fleet-ops.operations.orders.index.new.apply-service-rate"}} @wrapperClass="justify-start-i mb-4" @isToggled={{this.servicable}} @onToggle={{this.checkServiceRates}} @disabled={{this.isNotServicable}} @helpText={{t "fleet-ops.operations.orders.index.new.service-help-text"}} />
 
             {{#if this.servicable}}
-                <ContentPanel
-                    @title={{t "fleet-ops.operations.orders.index.new.service-quotes"}}
-                    @open={{true}}
-                    @pad={{true}}
-                    @wrapperClass="mt-6"
-                    @panelBodyClass="bg-white dark:bg-gray-800"
-                >
+                <ContentPanel @title={{t "fleet-ops.operations.orders.index.new.service-quotes"}} @open={{true}} @pad={{true}} @wrapperClass="mt-6" @panelBodyClass="bg-white dark:bg-gray-800">
                     {{#unless this.isUsingIntegratedVendor}}
                         <div class="input-group mb-2i">
-                            <InputLabel
-                                @labelText={{t "fleet-ops.operations.orders.index.new.select-service-rate"}}
-                                @helpText={{t "fleet-ops.operations.orders.index.new.service-quotes-help-text"}}
-                            />
-
-                            <Select
-                                class="w-full"
-                                @options={{this.serviceRates}}
-                                @value={{this.selectedServiceRate}}
-                                @optionLabel="service_name"
-                                @optionValue="uuid"
-                                @onSelect={{this.getQuotes}}
-                                @placeholder={{t "fleet-ops.operations.orders.index.new.select-service-rate"}}
-                            />
+                            <InputLabel @labelText={{t "fleet-ops.operations.orders.index.new.select-service-rate"}} @helpText={{t "fleet-ops.operations.orders.index.new.service-quotes-help-text"}} />
+
+                            <Select class="w-full" @options={{this.serviceRates}} @value={{this.selectedServiceRate}} @optionLabel="service_name" @optionValue="uuid" @onSelect={{this.getQuotes}} @placeholder={{t "fleet-ops.operations.orders.index.new.select-service-rate"}} />
                         </div>
                     {{/unless}}
 
@@ -685,11 +444,7 @@
 
                     {{#if this.isFetchingQuotes}}
                         <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 "fleet-ops.operations.orders.index.new.loading-message"}}
-                            />
+                            <Spinner class="text-sm dark:text-gray-100 flex flex-row items-center" @iconClass="mr-2" @loadingMessage={{t "fleet-ops.operations.orders.index.new.loading-message"}} />
                         </div>
                     {{else}}
                         <InfoBlock class="my-3" @text={{t "fleet-ops.operations.orders.index.new.info-text"}} />
@@ -698,14 +453,7 @@
                             {{#each this.serviceQuotes as |serviceQuote index|}}
                                 <div class="radio-group-item shadow-sm flex-col pl-0i pr-0i {{if (eq @options.selected index) '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={{this.selectedServiceQuote}}
-                                            @name="serviceQuote"
-                                            @changed={{fn (mut this.selectedServiceQuote)}}
-                                        />
+                                        <RadioButton @radioClass="focus:ring-blue-500 h-6 w-6 text-blue-500" @radioId={{serviceQuote.uuid}} @value={{serviceQuote.uuid}} @groupValue={{this.selectedServiceQuote}} @name="serviceQuote" @changed={{fn (mut this.selectedServiceQuote)}} />
                                         <label for={{serviceQuote.uuid}} class="ml-3 flex-1">{{serviceQuote.public_id}}</label>
                                         <Badge @hideStatusDot={{true}} @status="info">
                                             {{serviceQuote.request_id}}
@@ -743,15 +491,11 @@
                                     </div>
                                 </div>
                             {{else}}
-                                <InfoBlock
-                                    class="my-2 px-4 py-1.5 warning"
-                                    @blockClass="flex flex-row items-center"
-                                    @text={{if
+                                <InfoBlock class="my-2 px-4 py-1.5 warning" @blockClass="flex flex-row items-center" @text={{if
                                         this.payloadCoordinates.length
                                         (t "fleet-ops.operations.orders.index.new.no-service-info-text")
                                         (t "fleet-ops.operations.orders.index.new.input-order-info-text")
-                                    }}
-                                />
+                                    }} />
                             {{/each}}
                         </div>
                     {{/if}}
@@ -766,9 +510,7 @@
         <ContentPanel @title={{t "fleet-ops.operations.orders.index.view.documents-panel-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
             <div class="space-y-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="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>
@@ -833,6 +575,23 @@
             </div>
         </ContentPanel>
 
+        <ContentPanel @title={{t "fleet-ops.operations.orders.index.new.metadata"}} @open={{this.order.meta.length}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800" @actionButtons={{this.metadataButtons}}>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-2">
+                {{#each this.order.meta as |metaField index|}}
+                    <InputGroup>
+                        <div class="flex justify-between items-center mb-0.5">
+                            <label>{{metaField.label}}</label>
+                            <a href="javascript:;" class="text-xs" {{on "click" (fn this.editCustomField index)}}>
+                                <FaIcon @icon="edit" @size="sm" class="mr-1" />
+                                {{t "common.edit"}}
+                            </a>
+                        </div>
+                        <Input class="w-full form-input" @value={{metaField.value}} placeholder={{metaField.label}} />
+                    </InputGroup>
+                {{/each}}
+            </div>
+        </ContentPanel>
+
         <Spacer @height="300px" />
     </Overlay::Body>
 </Overlay>