@fleetbase/fleetops-engine 0.6.17 → 0.6.19

package/addon/components/customer/create-order-form.hbs

@@ -1,26 +1,28 @@
 <Overlay @position="right" @noBackdrop={{true}} @width="580px" @fullHeight={{true}} @isResizable={{true}} as |overlay|>
     <Overlay::Header @overlay={{overlay}} @title="New Order" @onPressCancel={{this.cancelOrderCreation}}>
-        <Button
-            @icon="check"
-            @type="primary"
-            @text={{if (media "isMobile") "" "Submit"}}
-            @onClick={{perform this.createOrder}}
-            @isLoading={{this.createOrder.isRunning}}
-            @permission="fleet-ops create order"
-            @disabled={{this.load.isRunning}}
-        />
+        <:actions>
+            <Button
+                @icon="check"
+                @type="primary"
+                @text={{if (media "isMobile") "" "Submit"}}
+                @onClick={{perform this.createOrder}}
+                @isLoading={{this.createOrder.isRunning}}
+                @permission="fleet-ops create order"
+                @disabled={{this.load.isRunning}}
+            />
+        </:actions>
     </Overlay::Header>
-    <Overlay::Body @wrapperClass="new-order-overlay-body">
-        <ContentPanel @title={{t "fleet-ops.common.type"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <Overlay::Body @wrapperClass="new-order-overlay-body p-0i" class="p-0i">
+        <ContentPanel @title={{t "common.type"}} @open={{true}} @wrapperClass="bordered-top">
             <div class="input-group">
-                <InputLabel @labelText={{t "fleet-ops.operations.orders.index.new.order-type"}} @helpText="Select the type of order you want to create." />
+                <InputLabel @labelText={{t "order.fields.order-type"}} @helpText="Select the type of order you want to create." />
                 <Select
                     @value={{this.orderConfig.id}}
                     @options={{this.orderConfigs}}
                     @optionValue="id"
                     @optionLabel="name"
                     @onChange={{this.setConfig}}
-                    @placeholder={{t "fleet-ops.operations.orders.index.new.order-type-placeholder"}}
+                    @placeholder={{t "order.fields.order-type-placeholder"}}
                     disabled={{this.load.isRunning}}
                     class="w-full"
                 />
@@ -28,32 +30,32 @@
         </ContentPanel>
 
         {{#if this.loadCustomerOrderConfig.isIdle}}
-            {{#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">
+            {{#if this.order.order_config}}
+                {{#each this.customFields.customFieldGroups as |group|}}
+                    <ContentPanel @title={{group.name}} @open={{true}} @wrapperClass="bordered-top">
+                        <div class="grid grid-cols-1 lg:grid-cols-{{or group.meta.grid_size 2}} gap-2">
                             {{#each group.customFields as |customField|}}
-                                <CustomField @customField={{customField}} @order={{this.order}} @orderConfig={{this.orderConfig}} @onChange={{this.setCustomFieldValue}} />
+                                <CustomField::Input @customField={{customField}} @subject={{this.order.order_config}} @onChange={{this.customFields.setFieldValue}} />
                             {{/each}}
                         </div>
                     </ContentPanel>
                 {{/each}}
             {{/if}}
 
-            <ContentPanel @title={{t "fleet-ops.operations.orders.index.new.route"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <ContentPanel @title={{t "order.fields.route"}} @open={{true}} @wrapperClass="bordered-top">
                 <div class="lg:col-span-2">
                     <div class="flex flex-row justify-between mb-4">
                         <div class="flex">
-                            <Toggle @isToggled={{this.isMultipleDropoffOrder}} @onToggle={{this.toggleMultiDropOrder}} @label={{t "fleet-ops.operations.orders.index.new.route-label"}} />
+                            <Toggle @isToggled={{this.isMultipleDropoffOrder}} @onToggle={{this.toggleMultiDropOrder}} @label={{t "order.fields.route-label"}} />
                         </div>
                         <div class="flex flex-1 justify-end space-x-2">
                             {{#if this.isMultipleDropoffOrder}}
                                 <Button
                                     @icon="map-marked-alt"
-                                    @text={{t "fleet-ops.operations.orders.index.new.add-waypoint"}}
+                                    @text={{t "order.fields.add-waypoint"}}
                                     @size="sm"
                                     @onClick={{this.addWaypoint}}
-                                    @helpText={{t "fleet-ops.operations.orders.index.new.add-waypoint-help-text"}}
+                                    @helpText={{t "order.fields.add-waypoint-help-text"}}
                                     @permission="fleet-ops create order"
                                 />
                             {{/if}}
@@ -73,7 +75,7 @@
                                         <ModelSelect
                                             @modelName="place"
                                             @selectedModel={{waypoint.place}}
-                                            @placeholder={{concat (t "fleet-ops.operations.orders.index.new.select-waypoint-placeholder") " " (add index 1)}}
+                                            @placeholder={{concat (t "order.fields.select-waypoint-placeholder") " " (add index 1)}}
                                             @triggerClass="form-select form-input truncate max-w-250px"
                                             @infiniteScroll={{false}}
                                             @customSearchEndpoint="places/search"
@@ -88,7 +90,7 @@
                                         {{#if waypoint.place.hasInvalidCoordinates}}
                                             <div class="leading-5 text-sm text-red-400 mt-2">
                                                 <FaIcon @icon="exclamation-triangle" class="mr-1" />
-                                                {{t "fleet-ops.operations.orders.index.new.invalid-coordinates"}}
+                                                {{t "order.fields.invalid-coordinates"}}
                                             </div>
                                         {{/if}}
                                     </div>
@@ -105,7 +107,7 @@
                         <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-2 text-xs dark:text-gray-100">
                             <InputGroup>
                                 <div class="flex items-center justify-between">
-                                    <label>{{t "fleet-ops.operations.orders.index.new.pickup"}}</label>
+                                    <label>{{t "order.fields.pickup"}}</label>
                                     <div class="flex-row space-x-1 pr-0.5">
                                         {{#if this.payload.pickup}}
                                             <a href="javascript:;" {{on "click" (fn this.editPlace this.payload.pickup)}}>
@@ -120,7 +122,7 @@
                                 <ModelSelect
                                     @modelName="place"
                                     @selectedModel={{this.payload.pickup}}
-                                    @placeholder={{t "fleet-ops.operations.orders.index.new.select-pickup"}}
+                                    @placeholder={{t "order.fields.select-pickup"}}
                                     @triggerClass="form-select form-input"
                                     @infiniteScroll={{false}}
                                     @customSearchEndpoint="places/search"
@@ -135,13 +137,13 @@
                                 {{#if this.payload.pickup.hasInvalidCoordinates}}
                                     <div class="leading-5 text-sm text-red-400 mt-2">
                                         <FaIcon @icon="exclamation-triangle" class="mr-1" />
-                                        {{t "fleet-ops.operations.orders.index.new.invalid-coordinates"}}
+                                        {{t "order.fields.invalid-coordinates"}}
                                     </div>
                                 {{/if}}
                             </InputGroup>
                             <InputGroup>
                                 <div class="flex items-center justify-between">
-                                    <label>{{t "fleet-ops.operations.orders.index.new.dropoff"}}</label>
+                                    <label>{{t "order.fields.dropoff"}}</label>
                                     <div class="flex-row space-x-2 pr-0.5">
                                         {{#if this.payload.dropoff}}
                                             <a href="javascript:;" {{on "click" (fn this.editPlace this.payload.dropoff)}} disaled={{cannot "fleet-ops update place"}}>
@@ -156,7 +158,7 @@
                                 <ModelSelect
                                     @modelName="place"
                                     @selectedModel={{this.payload.dropoff}}
-                                    @placeholder={{t "fleet-ops.operations.orders.index.new.select-dropoff"}}
+                                    @placeholder={{t "order.fields.select-dropoff"}}
                                     @triggerClass="form-select form-input"
                                     @infiniteScroll={{false}}
                                     @customSearchEndpoint="places/search"
@@ -171,21 +173,21 @@
                                 {{#if this.payload.dropoff.hasInvalidCoordinates}}
                                     <div class="leading-5 text-sm text-red-400 mt-2">
                                         <FaIcon @icon="exclamation-triangle" class="mr-1" />
-                                        {{t "fleet-ops.operations.orders.index.new.invalid-coordinates"}}
+                                        {{t "order.fields.invalid-coordinates"}}
                                     </div>
                                 {{/if}}
                             </InputGroup>
                             <InputGroup>
                                 <div class="flex items-center justify-between">
-                                    <label>{{t "fleet-ops.operations.orders.index.new.return"}}</label>
+                                    <label>{{t "order.fields.return"}}</label>
                                     {{#if this.payload.return}}
-                                        <a href="javascript:;" {{on "click" (fn this.editPlace this.payload.return)}}>{{t "fleet-ops.operations.orders.index.new.edit-address"}}</a>
+                                        <a href="javascript:;" {{on "click" (fn this.editPlace this.payload.return)}}>{{t "order.fields.edit-address"}}</a>
                                     {{/if}}
                                 </div>
                                 <ModelSelect
                                     @modelName="place"
                                     @selectedModel={{this.payload.return}}
-                                    @placeholder={{t "fleet-ops.operations.orders.index.new.select-return"}}
+                                    @placeholder={{t "order.fields.select-return"}}
                                     @triggerClass="form-select form-input"
                                     @infiniteScroll={{false}}
                                     @customSearchEndpoint="places/search"
@@ -200,7 +202,7 @@
                                 {{#if this.payload.return.hasInvalidCoordinates}}
                                     <div class="leading-5 text-sm text-red-400 mt-2">
                                         <FaIcon @icon="exclamation-triangle" class="mr-1" />
-                                        {{t "fleet-ops.operations.orders.index.new.invalid-coordinates"}}
+                                        {{t "order.fields.invalid-coordinates"}}
                                     </div>
                                 {{/if}}
                             </InputGroup>
@@ -209,31 +211,28 @@
                 </div>
             </ContentPanel>
 
-            <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <ContentPanel @title="Details" @open={{true}} @wrapperClass="bordered-top">
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
                     <div class="lg:col-span-2">
                         <InputGroup>
                             <Toggle
-                                @label={{t "fleet-ops.operations.orders.index.new.require-proof"}}
+                                @label={{t "order.fields.require-proof"}}
                                 @wrapperClass="justify-start-i"
                                 @isToggled={{this.order.pod_required}}
                                 @onToggle={{this.toggleProofOfDelivery}}
                                 @disabled={{cannot "fleet-ops create order"}}
-                                @helpText={{t "fleet-ops.operations.orders.index.new.require-proof-help-text"}}
+                                @helpText={{t "order.fields.require-proof-help-text"}}
                             />
                         </InputGroup>
                         {{#if this.order.pod_required}}
                             <InputGroup @wrapperClass="mt-4">
-                                <InputLabel
-                                    @labelText={{t "fleet-ops.operations.orders.index.new.proof-delivery"}}
-                                    @helpText={{t "fleet-ops.operations.orders.index.new.proof-delivery-help-text"}}
-                                />
+                                <InputLabel @labelText={{t "order.fields.proof-delivery"}} @helpText={{t "order.fields.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"}}
+                                    @placeholder={{t "order.fields.proof-delivery-placeholder"}}
                                     @disabled={{cannot "fleet-ops create order"}}
                                 />
                             </InputGroup>
@@ -242,13 +241,13 @@
                 </div>
             </ContentPanel>
 
-            <ContentPanel @title={{t "fleet-ops.operations.orders.index.new.payload-entities"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <ContentPanel @title={{t "order.fields.payload-entities"}} @open={{true}} @wrapperClass="bordered-top">
                 <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"}}
+                        @text={{t "order.fields.add-item-order"}}
                         @size="sm"
                         @onClick={{this.addEntity}}
                         @permission="fleet-ops create order"
@@ -264,10 +263,10 @@
                                 </div>
                                 <div class="flex-1 space-y-2">
                                     <div>
-                                        <Input @value={{entity.name}} @type="text" class="w-full form-input form-input-sm" placeholder={{t "fleet-ops.common.name"}} />
+                                        <Input @value={{entity.name}} @type="text" class="w-full form-input form-input-sm" placeholder={{t "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 "order.fields.sku"}} />
                                     </div>
                                     {{#if this.waypoints.length}}
                                         <Select
@@ -275,12 +274,12 @@
                                             @options={{this.waypoints}}
                                             @optionValue="place.id"
                                             @optionLabel="place.address"
-                                            @placeholder={{t "fleet-ops.operations.orders.index.new.select-destination"}}
+                                            @placeholder={{t "order.fields.select-destination"}}
                                             @onChange={{fn this.setEntityDestionation index}}
                                             class="w-full form-input-sm"
                                         />
                                     {{/if}}
-                                    <Button @icon="pencil" @text={{t "fleet-ops.operations.orders.index.new.edit-item"}} @size="sm" @onClick={{fn this.editEntity entity}} />
+                                    <Button @icon="pencil" @text={{t "order.fields.edit-item"}} @size="sm" @onClick={{fn this.editEntity entity}} />
                                 </div>
                                 <div class="ml-3">
                                     <Button
@@ -298,18 +297,14 @@
                 </div>
             </ContentPanel>
 
-            <ContentPanel @title={{t "fleet-ops.common.service"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <ContentPanel @title={{t "order.fields.service"}} @open={{true}} @wrapperClass="bordered-top">
                 {{#if this.getQuotes.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 "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 "order.fields.loading-message"}} />
                     </div>
                 {{else}}
                     {{#if this.serviceQuotes}}
-                        <InfoBlock @text={{t "fleet-ops.operations.orders.index.new.info-text"}} class="mb-4" />
+                        <InfoBlock @text={{t "order.fields.service-quote-info"}} class="mb-4" />
                     {{/if}}
                     <div class="radio-group-condensed -space-y-px">
                         {{#each this.serviceQuotes as |serviceQuote|}}
@@ -332,7 +327,7 @@
                                     <table class="table table-fixed flex-1">
                                         <thead>
                                             <tr>
-                                                <th class="text-left">{{t "fleet-ops.operations.orders.index.new.breakdown"}}</th>
+                                                <th class="text-left">{{t "order.fields.breakdown"}}</th>
                                                 <th></th>
                                             </tr>
                                         </thead>
@@ -349,7 +344,7 @@
                                             {{/each}}
                                             <tr class="border-b-0">
                                                 <td class="border-b-0">
-                                                    <span class="font-semibold">{{t "fleet-ops.common.total"}}</span>
+                                                    <span class="font-semibold">{{t "common.total"}}</span>
                                                 </td>
                                                 <td class="border-b-0">
                                                     <span>{{format-currency serviceQuote.amount serviceQuote.currency}}</span>
@@ -360,37 +355,24 @@
                                 </div>
                             </div>
                         {{else}}
-                            <InfoBlock
-                                @type="warning"
-                                @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")
-                                }}
-                            />
+                            <InfoBlock @type="warning" @text={{if this.payloadCoordinates.length (t "order.fields.no-service-quotes") (t "order.fields.input-order-routes")}} />
                         {{/each}}
                     </div>
                 {{/if}}
             </ContentPanel>
 
-            <ContentPanel @title={{t "fleet-ops.operations.orders.index.new.notes-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
-                <Textarea
-                    @value={{this.order.notes}}
-                    class="form-input w-full"
-                    placeholder={{t "fleet-ops.operations.orders.index.new.notes-placeholder"}}
-                    disabled={{cannot "fleet-ops create order"}}
-                    rows={{4}}
-                />
+            <ContentPanel @title={{t "order.fields.notes-title"}} @open={{true}} @wrapperClass="bordered-top">
+                <Textarea @value={{this.order.notes}} class="form-input w-full" placeholder={{t "order.fields.notes-placeholder"}} disabled={{cannot "fleet-ops create order"}} rows={{4}} />
             </ContentPanel>
 
-            <ContentPanel @title={{t "fleet-ops.operations.orders.index.view.documents-panel-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <ContentPanel @title={{t "order.fields.documents-files"}} @open={{true}} @wrapperClass="bordered-top">
                 <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="flex items-center justify-center py-5">
-                                <Spinner class="text-sm dar:text-gray-100" @loadingMessage={{t "fleet-ops.common.uploading"}} />
+                                <Spinner class="text-sm dar:text-gray-100" @loadingMessage={{t "common.uploading"}} />
                             </div>
                         </div>
                     {{else}}

package/addon/components/customer/create-order-form.js

@@ -11,9 +11,7 @@ import { OSRMv1, Control as RoutingControl } from '@fleetbase/leaflet-routing-ma
 import getRoutingHost from '@fleetbase/ember-core/utils/get-routing-host';
 import engineService from '@fleetbase/ember-core/decorators/engine-service';
 import registerHelper from '@fleetbase/ember-core/utils/register-helper';
-import registerComponent from '@fleetbase/ember-core/utils/register-component';
 import WaypointLabelHelper from '../../helpers/waypoint-label';
-import CustomFieldComponent from '../../components/custom-field';
 import isModel from '@fleetbase/ember-core/utils/is-model';
 import isNotEmpty from '@fleetbase/ember-core/utils/is-not-empty';
 import config from 'ember-get-config';
@@ -29,6 +27,7 @@ export default class CustomerCreateOrderFormComponent extends Component {
     @service customerSession;
     @service customerPayment;
     @service urlSearchParams;
+    @service customFieldsRegistry;
     @service fetch;
     @service intl;
     @service universe;
@@ -57,9 +56,7 @@ export default class CustomerCreateOrderFormComponent extends Component {
     @tracked orderConfigs = [];
     @tracked orderConfig;
     @tracked enabledOrderConfigs = [];
-    @tracked customFieldGroups = [];
-    @tracked customFields = [];
-    @tracked customFieldValues = {};
+    @tracked customFields;
     @tracked isCustomFieldsValid = true;
     @tracked paymentsEnabled = false;
     @tracked paymentsOnboardCompleted = false;
@@ -103,7 +100,6 @@ export default class CustomerCreateOrderFormComponent extends Component {
         this.customerPayment.loadAndInitialize();
         this.displayCompletingOrderDialog();
         this.load.perform();
-        registerComponent(owner, CustomFieldComponent);
         registerHelper(owner, 'waypoint-label', WaypointLabelHelper);
     }
 
@@ -115,15 +111,14 @@ export default class CustomerCreateOrderFormComponent extends Component {
     @task *loadCustomerOrderConfig() {
         try {
             this.orderConfigs = yield this.store.findAll('order-config');
-        } catch (error) {
-            this.notifications.serverError(error);
-        }
-
-        try {
-            this.enabledOrderConfigs = yield this.fetch.get('fleet-ops/settings/customer-enabled-order-configs');
-            this.orderConfigs = this.orderConfigs.filter((orderConfig) => this.enabledOrderConfigs.includes(orderConfig.id));
-            if (this.orderConfigs) {
-                this._setOrderConfig(this.orderConfigs[0].id);
+            try {
+                this.enabledOrderConfigs = yield this.fetch.get('fleet-ops/settings/customer-enabled-order-configs');
+                this.orderConfigs = this.orderConfigs.filter((orderConfig) => this.enabledOrderConfigs.includes(orderConfig.id));
+                if (this.orderConfigs?.length) {
+                    this._setOrderConfig(this.orderConfigs[0].id);
+                }
+            } catch (error) {
+                this.notifications.serverError(error);
             }
         } catch (error) {
             this.notifications.serverError(error);
@@ -152,20 +147,17 @@ export default class CustomerCreateOrderFormComponent extends Component {
     }
 
     @task *createOrder() {
+        // use order validatin service in the future
+        // if (this.orderValidation.validationFails(order)) return;
         // validate order inputs
-        if (!this.isValid()) {
-            return;
-        }
+        if (!this.isValid()) return;
 
         // valiadate custom field inputs
-        for (let i = 0; i < this.customFields.length; i++) {
-            const customField = this.customFields[i];
-            if (customField.required) {
-                const customFieldValue = this.customFieldValues[customField.id];
-                if (!customFieldValue || isBlank(customFieldValue.value)) {
-                    return this.notifications.error(this.intl.t('fleet-ops.operations.orders.index.new.input-field-required', { inputFieldName: customField.label }));
-                }
-            }
+        const { isValid, errors } = this.customFields.validateRequired();
+        if (!isValid) {
+            const messages = [...errors.values()].join('\n');
+            this.notifications.error(messages);
+            return;
         }
 
         // Handle payments if enabled
@@ -173,22 +165,15 @@ export default class CustomerCreateOrderFormComponent extends Component {
             return this.startCheckoutSession();
         }
 
-        // create custom field values
-        for (let customFieldId in this.customFieldValues) {
-            const { value, value_type } = this.customFieldValues[customFieldId];
-            const customFieldValue = this.store.createRecord('custom-field-value', {
-                custom_field_uuid: customFieldId,
-                value,
-                value_type,
-            });
-            this.order.custom_field_values.push(customFieldValue);
-        }
-
         this.removeRoutingControlPreview();
 
         const { order, payload, entities, waypoints } = this;
         const route = this.getRoute();
 
+        // Save custom field values
+        const { created: customFieldValues } = yield order.cfManager.saveTo(order);
+        order.custom_field_values.pushObjects(customFieldValues);
+
         // set purchase rate
         if (this.purchaseRate) {
             order.set('purchase_rate_uuid', this.purchaseRate.id);
@@ -276,71 +261,16 @@ export default class CustomerCreateOrderFormComponent extends Component {
     }
 
     @task *loadCustomFields(orderConfig) {
-        this.customFieldGroups = yield this.store.query('category', { owner_uuid: orderConfig.id, for: 'custom_field_group' });
-        this.customFields = yield this.store.query('custom-field', { subject_uuid: orderConfig.id });
-        this.groupCustomFields();
-        this.checkIfCustomFieldsValid();
-    }
-
-    /**
-     * Organizes custom fields into their respective groups.
-     */
-    groupCustomFields() {
-        for (let i = 0; i < this.customFieldGroups.length; i++) {
-            const group = this.customFieldGroups[i];
-            group.set(
-                'customFields',
-                this.customFields.filter((customField) => {
-                    if (this.customFieldValues[customField.id]) {
-                        const { value, value_type } = this.customFieldValues[customField.id];
-                        if (value_type === 'date') {
-                            customField.value = new Date(value);
-                        } else {
-                            customField.value = value;
-                        }
-                    }
-
-                    return customField.category_uuid === group.id;
-                })
-            );
-        }
-    }
-
-    @action setCustomFieldValue(value, customField) {
-        this.customFieldValues = {
-            ...this.customFieldValues,
-            [customField.id]: {
-                value,
-                value_type: this._getCustomFieldValueType(customField),
-            },
-        };
-        this.checkIfCustomFieldsValid();
-    }
-
-    checkIfCustomFieldsValid() {
-        this.isCustomFieldsValid = this.customFields.every((customField) => {
-            if (!customField.required) {
-                return true;
+        try {
+            const customFieldsManager = yield this.customFieldsRegistry.loadSubjectCustomFields.perform(orderConfig);
+            this.customFields = customFieldsManager;
+            this.order.cfManager = customFieldsManager;
+            if (typeof this.args.onCustomFieldsReady === 'function') {
+                this.args.onCustomFieldsReady(customFieldsManager);
             }
-            const customFieldValue = this.customFieldValues[customField.id];
-            return customFieldValue && !isBlank(customFieldValue.value);
-        });
-    }
-
-    _getCustomFieldValueType(customField) {
-        if (customField.type === 'file-upload') {
-            return 'file';
-        }
-
-        if (customField.type === 'date-time-input') {
-            return 'date';
+        } catch (err) {
+            debug('Error loading order custom fields: ' + err.message);
         }
-
-        if (customField.type === 'model-select') {
-            return 'model';
-        }
-
-        return 'text';
     }
 
     @action cancelOrderCreation() {
@@ -361,6 +291,7 @@ export default class CustomerCreateOrderFormComponent extends Component {
     _setOrderConfig(id) {
         const orderConfig = this.store.peekRecord('order-config', id);
         this.orderConfig = orderConfig;
+        this.order.set('order_config', orderConfig);
         this.order.set('order_config_uuid', orderConfig.id);
         this.order.set('type', orderConfig.key);
 
@@ -696,9 +627,7 @@ export default class CustomerCreateOrderFormComponent extends Component {
     @task *queueFile(file) {
         // since we have dropzone and upload button within dropzone validate the file state first
         // as this method can be called twice from both functions
-        if (['queued', 'failed', 'timed_out', 'aborted'].indexOf(file.state) === -1) {
-            return;
-        }
+        if (['queued', 'failed', 'timed_out', 'aborted'].indexOf(file.state) === -1) return;
 
         // Queue and upload immediatley
         this.uploadQueue.pushObject(file);

package/addon/components/customer/details.hbs

@@ -0,0 +1,52 @@
+<div class="details-wrapper" ...attributes>
+    <ContentPanel @title={{t "customer.fields.user-account"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <div class="field-info-container md:col-span-3">
+                <div class="field-name">{{t "common.name"}}</div>
+                <div class="field-value">{{n-a @resource.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.email"}}</div>
+                <ClickToCopy @value={{@resource.email}} class="field-value">{{n-a @resource.email}}</ClickToCopy>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.phone"}}</div>
+                <ClickToCopy @value={{@resource.phone}} class="field-value">{{n-a @resource.phone}}</ClickToCopy>
+            </div>
+        </div>
+    </ContentPanel>
+    <ContentPanel @title={{t "common.details"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.name"}}</div>
+                <div class="field-value">{{n-a @resource.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.title"}}</div>
+                <div class="field-value">{{n-a @resource.title}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.email"}}</div>
+                <ClickToCopy @value={{@resource.email}} class="field-value">{{n-a @resource.email}}</ClickToCopy>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.email"}}</div>
+                <ClickToCopy @value={{@resource.phone}} class="field-value">{{n-a @resource.phone}}</ClickToCopy>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.internal-id"}}</div>
+                <div class="field-value">{{n-a @resource.internal_id}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "common.type"}}</div>
+                <div class="field-value"><Badge @status="info" @hideStatusDot={{true}}>{{smart-humanize @resource.type}}</Badge></div>
+            </div>
+            <div class="field-info-container col-span-2">
+                <div class="field-name">{{t "common.address"}}</div>
+                <div class="field-value">{{n-a @resource.address}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+</div>

package/addon/components/customer/details.js

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