@fleetbase/fleetops-engine 0.4.0 → 0.4.1

package/addon/components/modals/view-service-area.hbs

@@ -4,7 +4,7 @@
             <layers.tile @url={{this.tileSourceUrl}} />
             {{#if @options.serviceArea}}
                 <layers.polygon @id={{@options.serviceArea.id}} @record={{@options.serviceArea}} @locations={{@options.serviceArea.bounds}} @fillColor={{@options.serviceArea.color}} @color={{@options.serviceArea.stroke_color}} @onAdd={{fn this.onServiceAreaAdded @options.serviceArea}} as |polygon|>
-                    <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{@options.serviceArea.name}} Service Area</polygon.tooltip>
+                    <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{@options.serviceArea.name}} {{t "fleet-ops.common.service-area"}}</polygon.tooltip>
                 </layers.polygon>
             {{/if}}
         </LeafletMap>

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

@@ -1,16 +1,16 @@
 <Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
     <div class="modal-body-container">
         <div class="input-group">
-            <InputLabel @labelText="Zone Name" @helpText="Set a display name for the zone." @required={{true}} />
-            <Input @value={{@options.zone.name}}  @type="text" class="w-full form-input" placeholder="Zone Name" />
+            <InputLabel @labelText={{t "fleet-ops.component.modals.zone-form.name"}} @helpText={{t "fleet-ops.component.modals.zone-form.name-text"}} @required={{true}} />
+            <Input @value={{@options.zone.name}}  @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.zone-form.name"}} />
         </div>
 
-        <InputGroup @type="color" @value={{@options.zone.stroke_color}} @name="Zone Border Color" @helpText="Customize the border color for this zone." class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none" />
-        <InputGroup @type="color" @value={{@options.zone.color}} @name="Zone Color" @helpText="Customize the fill color for this zone." class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none" />
+        <InputGroup @type="color" @value={{@options.zone.stroke_color}} @name={{t "fleet-ops.component.modals.zone-form.border-color"}} @helpText={{t "fleet-ops.component.modals.zone-form.customize-border"}} class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none" />
+        <InputGroup @type="color" @value={{@options.zone.color}} @name={{t "fleet-ops.component.modals.zone-form.zone-color"}} @helpText={{t "fleet-ops.component.modals.zone-form.customize-fill-color"}} class="p-0 border-0 m-0 w-8 h-8 bg-transparent rounded-none" />
 
         <div class="input-group">
-            <InputLabel @labelText="Zone Name" @helpText="Optionally give the zone a description." />
-            <Textarea @value={{@options.zone.description}} rows={{3}} type="text" class="w-full form-input" placeholder="Description of Zone" />
+            <InputLabel @labelText={{t "fleet-ops.component.modals.zone-form.name"}} @helpText={{t "fleet-ops.component.modals.zone-form.optionally"}} />
+            <Textarea @value={{@options.zone.description}} rows={{3}} type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.modals.zone-form.description-zone"}} />
         </div>
     </div>
 </Modal::Default>

package/addon/components/order/header.hbs

@@ -1,45 +1,45 @@
 <div class="px-3 py-4 border-b border-gray-900 order-view-header">
     <div class="flex items-start justify-between">
         <div class="flex items-start flex-1">
-            <Button @text="Back" @onClick={{@onBackButtonClick}} class="mr-3" />
+            <Button @text={{t "fleet-ops.common.back"}} @onClick={{@onBackButtonClick}} class="mr-3" />
             <div>
                 <h1 class="mb-1 text-gray-700 dark:text-gray-100">
                     {{@order.public_id}}
                 </h1>
                 <div class="flex flex-row">
-                    <Badge @status={{@order.status}} @helpText={{if (eq @order.status "dispatched") (concat "Dispatched at " @order.dispatchedAt)}} />
+                    <Badge @status={{@order.status}} @helpText={{if (eq @order.status (t "fleet-ops.component.order.header.dispatched")) (concat (t "fleet-ops.component.order.header.dispatched-at") @order.dispatchedAt)}} />
                     {{#if @order.shouldDisplayDispatchLabel}}
-                        <Badge @status="info" class="ml-2" @helpText="Dispatched at {{@order.dispatchedAt}}">Dispatched</Badge>
+                        <Badge @status="info" class="ml-2" @helpText={{t "fleet-ops.component.order.header.dispatched" htmlSafe=true order=@order.dispatchedAt}}>{{t "fleet-ops.component.order.header.dispatched"}}</Badge>
                     {{/if}}
                 </div>
             </div>
         </div>
         <div class="flex">
             {{#if @order.canBeDispatched}}
-                <Button @type="primary" @icon="paper-plane" @text="Dispatch" class="mr-2" @onClick={{fn this.forwardAction "dispatchOrder"}} />
+                <Button @type="primary" @icon="paper-plane" @text={{t "fleet-ops.component.order.header.dispatched"}} class="mr-2" @onClick={{fn this.forwardAction "dispatchOrder"}} />
             {{/if}}
             <DropdownButton @icon="ellipsis-h" @contentClass="dropdown-menu" as |dd|>
                 <div class="dropdown-menu-content context-menu">
                     <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "editOrder" dd)}}>
-                        Edit Details
+                        {{t "fleet-ops.component.order.header.edit"}}
                     </a>
                     <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "createNewActivity" dd)}}>
-                        Update Activity
+                        {{t "fleet-ops.component.order.header.update"}}
                     </a>
                     <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "assignDriver" dd)}}>
-                        Assign Driver
+                        {{t "fleet-ops.component.order.header.assign"}}
                     </a>
                     <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "viewOrderLabel" dd)}}>
-                        Get Order Label
+                        {{t "fleet-ops.component.order.header.get-order"}}
                     </a>
                     {{!-- <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "splitOrder" dd)}}>
-                        Split Order
+                        {{t "fleet-ops.component.order.header.split-order"}}
                     </a> --}}
                     {{!-- <a href="#" class="dropdown-menu-item" {{on "click" (fn this.forwardAction "splitOrder" dd)}}>
-                        Reschedule Order
+                        {{t "fleet-ops.component.order.header.reschedule"}}
                     </a> --}}
                     <a href="#" class="dropdown-menu-item"  {{on "click" (fn this.forwardAction "cancelOrder" dd)}}>
-                        Cancel Order
+                        {{t "fleet-ops.component.order.header.cancel-order"}}
                     </a>
                 </div>
             </DropdownButton>

package/addon/components/order/place-card.hbs

@@ -29,9 +29,9 @@
     {{#if @place.metadata}}
         <Button @size="xs" @onClick={{this.showMeta}} class="my-2">
             {{#if this.showingMeta}}
-                Show less details
+                {{t "fleet-ops.component.order.place-card.show-less"}}
             {{else}}
-                Show more details
+                {{t "fleet-ops.component.order.place-card.show-more"}}
             {{/if}}
         </Button>
         {{#if this.showingMeta}}

package/addon/components/order/schedule-card.hbs

@@ -9,7 +9,7 @@
         <div class="flex items-center justify-between">
             <div>
                 <FaIcon @icon="calendar" class="mr-2" />
-                <span class="font-semibold">Date scheduled</span>
+                <span class="font-semibold">{{t "fleet-ops.component.order.schedule-card.date"}}</span>
             </div>
             <span class={{unless @order.scheduled_at "dark:text-gray-600 text-gray-400"}}>{{n-a @order.scheduledAt "Not Scheduled"}}</span>
         </div>
@@ -23,7 +23,7 @@
         <div class="flex items-center justify-between">
             <div class="flex flex-row items-center">
                 <FaIcon @icon="calendar" class="mr-2" />
-                <span class="font-semibold">Driver Assigned</span>
+                <span class="font-semibold">{{t "fleet-ops.component.order.schedule-card.driver-assigned"}}</span>
                 <div class="ml-2">
                     <a href="javascript:;" class="text-blue-400 hover:opacity-75" {{on "click" this.startAssignDriver}}>
                         <FaIcon @icon="edit" @size="xs" />
@@ -32,7 +32,7 @@
             </div>
             <div>
                 {{#if this.isAssigningDriver}}
-                    <ModelSelect @modelName="driver" @selectedModel={{@order.driver_assigned}} @placeholder="Select Driver" @triggerClass="form-select form-input form-input-sm w-48" @infiniteScroll={{false}} @renderInPlace={{true}} @allowClear={{true}} @disabled={{@model.isLoading}} @onChange={{this.assignDriver}} as |model|>
+                    <ModelSelect @modelName="driver" @selectedModel={{@order.driver_assigned}} @placeholder={{t "fleet-ops.component.order.schedule-card.select-driver"}} @triggerClass="form-select form-input form-input-sm w-48" @infiniteScroll={{false}} @renderInPlace={{true}} @allowClear={{true}} @disabled={{@model.isLoading}} @onChange={{this.assignDriver}} as |model|>
                         <div class="flex items-center">
                             <div class="w-5">
                                 <FaIcon @icon="id-card-alt" @size="xs" />
@@ -44,16 +44,16 @@
                         </div>
                     </ModelSelect>
                 {{else}}
-                    <a href="javascript:;" disabled={{not @order.driver_assigned}} class={{unless @order.driver_assigned "dark:text-gray-600 text-gray-400"}} {{on "click" (fn this.onClickDriver @order.driver_assigned)}}>{{n-a @order.driver_assigned.name "No Driver Assigned"}}</a>
+                    <a href="javascript:;" disabled={{not @order.driver_assigned}} class={{unless @order.driver_assigned "dark:text-gray-600 text-gray-400"}} {{on "click" (fn this.onClickDriver @order.driver_assigned)}}>{{n-a @order.driver_assigned.name (t "fleet-ops.component.order.schedule-card.no-driver")}}</a>
                 {{/if}}
             </div>
         </div>
         <div class="flex items-center justify-between">
             <div class="flex flex-row items-center">
                 <FaIcon @icon="calendar" class="mr-2" />
-                <span class="font-semibold">Vehicle Assigned</span>
+                <span class="font-semibold">{{t "fleet-ops.component.order.schedule-card.vehicle-assigned"}}</span>
             </div>
-            <a href="javascript:;" disabled={{not @order.driver_assigned.vehicle}} class={{unless @order.driver_assigned.vehicle_uuid "dark:text-gray-600 text-gray-400"}} {{on "click" (fn this.onClickVehicle @order.driver_assigned.vehicle)}}>{{n-a @order.driver_assigned.vehicle_name "No Vehicle Assigned"}}</a>
+            <a href="javascript:;" disabled={{not @order.driver_assigned.vehicle}} class={{unless @order.driver_assigned.vehicle_uuid "dark:text-gray-600 text-gray-400"}} {{on "click" (fn this.onClickVehicle @order.driver_assigned.vehicle)}}>{{n-a @order.driver_assigned.vehicle_name (t "fleet-ops.component.order.schedule-card.no-vehicle")}}</a>
         </div>
         {{!-- <div class="z-20 relative">
             <RouteList @order={{@order}} />

package/addon/components/order/schedule-card.js

@@ -16,7 +16,11 @@ export default class OrderScheduleCardComponent extends Component {
      * @memberof OrderScheduleCardComponent
      */
     @service contextPanel;
-
+    /**
+     * Service for intl.
+     * @service
+     */
+    @service intl;
     /**
      * Service for managing modals.
      * @service
@@ -89,9 +93,9 @@ export default class OrderScheduleCardComponent extends Component {
 
         if (isBlank(driver)) {
             return this.modalsManager.confirm({
-                title: 'Unassign Driver?',
-                body: `You are about to unassign the driver for Order ${order.public_id}. Click continue to confirm removal of driver.`,
-                acceptButtonText: 'Continue and unassign driver',
+                title: this.intl.t('fleet-ops.component.order.schedule-card.unassign-driver'),
+                body: this.intl.t('fleet-ops.component.order.schedule-card.unassign-text', { orderId: order.public_id }),
+                acceptButtonText: this.intl.t('fleet-ops.component.order.schedule-card.unassign-button'),
                 confirm: () => {
                     order.setProperties({
                         driver_assigned: null,
@@ -115,9 +119,9 @@ export default class OrderScheduleCardComponent extends Component {
         }
 
         return this.modalsManager.confirm({
-            title: 'Assign New Driver?',
-            body: `You are about to assign a new driver (${driver.name}) to Order ${order.public_id}. Click continue to confirm driver.`,
-            acceptButtonText: 'Continue and assign driver',
+            title: this.intl.t('fleet-ops.component.order.schedule-card.assign-driver'),
+            body: this.intl.t('fleet-ops.component.order.schedule-card.assign-text', { driverName: driver.name, orderId: order.public_id }),
+            acceptButtonText: this.intl.t('fleet-ops.component.order.schedule-card.assign-button'),
             confirm: () => {
                 order.set('driver_assigned_uuid', driver.id);
                 return order

package/addon/components/order-config/activity-flow-editor.hbs

@@ -2,23 +2,23 @@
     <div class="content-panel mb-20">
         <div class="content-panel-header items-center">
             <h3 class="text-lg font-semibold dark:text-gray-100">
-                Activity Flow
+                {{t "fleet-ops.component.order-config.activity-flow-editor.title"}}
             </h3>
 
             <Button @icon="plus" @iconPrefix="fas" @text="New Status" @size="sm" @onClick={{this.newStatus}} />
         </div>
         <div class="content-panel-body no-padding">
             <div class="my-6 px-5">
-                <p>Activity flow configuration will allow you to define the different types of tracking status activities that apply for this order type. Logic of the activity flow can also be configured.</p>
+                <p>{{t "fleet-ops.component.order-config.activity-flow-editor.message"}}</p>
             </div>
 
             <div class="ui-tabs mb-4">
                 <nav>
                     <a href="javascript:;" class="ui-tab {{if (eq this.activeTab 'order') 'active'}}" {{on "click" (fn (mut this.activeTab) "order" )}}>
-                        Order Flow
+                        {{t "fleet-ops.component.order-config.activity-flow-editor.order-flow"}}
                     </a>
                     <a href="javascript:;" class="ui-tab  {{if (eq this.activeTab 'waypoint') 'active'}}" {{on "click" (fn (mut this.activeTab) "waypoint" )}}>
-                        Waypoint Flow
+                        {{t "fleet-ops.component.order-config.activity-flow-editor.waypoint-flow"}}
                     </a>
                 </nav>
             </div>
@@ -33,7 +33,7 @@
                                         <div class="activity-status relative cursor-move flex items-center justify-center mb-6">
                                             <div class="relative px-3 py-2 status-element {{dasherize (flow-raw-status status)}}-status-element rounded-md flex flex-col items-center justify-center">
                                                 <Badge @status={{flow-raw-status status}} class="status-badge-lg shadow-none" />
-                                                <Button @text="New Activity" @icon="plus" @iconPrefix="fas" @wrapperClass="my-2" @onClick={{fn this.addNewActivity status}} />
+                                                <Button @text={{t "fleet-ops.component.order-config.activity-flow-editor.new-activity"}} @icon="plus" @iconPrefix="fas" @wrapperClass="my-2" @onClick={{fn this.addNewActivity status}} />
                                                 {{#if (not (includes status (w "created dispatched completed")))}}
                                                     <div class="absolute top-0 right-0">
                                                         <button type="button" class="flex items-center justify-center rounded-full w-6 h-6 bg-gray-900 font-semibold text-white -mt-3 -mr-3 shadow-sm" {{on "click" (fn this.removeStatus status)}}>
@@ -50,25 +50,25 @@
                                                         <div class="mb-4 flex items-center justify-between">
                                                             <div>
                                                                 <FaIcon @icon="sitemap" class="mr-2 dark:text-sky-300" />
-                                                                <span class="dark:text-gray-100 text-sm">Activity Details</span>
+                                                                <span class="dark:text-gray-100 text-sm">{{t "fleet-ops.component.order-config.activity-flow-editor.activity-details"}}</span>
                                                             </div>
                                                             <a href="javascript:;" class="btn btn-danger btn-sm" {{on "click" (fn this.removeActivity status event)}}>
                                                                 <FaIcon @icon="trash" />
                                                             </a>
                                                         </div>
                                                         <div class="grid grid-cols-3 gap-2">
-                                                            <InputGroup @name="Status" @value={{event.status}} />
-                                                            <InputGroup @name="Code" @value={{event.code}} />
-                                                            <InputGroup @name="Details" @value={{event.details}} />
+                                                            <InputGroup @name={{t "fleet-ops.common.status"}} @value={{event.status}} />
+                                                            <InputGroup @name={{t "fleet-ops.common.code"}} @value={{event.code}} />
+                                                            <InputGroup @name={{t "fleet-ops.common.details"}} @value={{event.details}} />
                                                         </div>
                                                     </div>
                                                     <div class="p-3">
                                                         <div class="mb-4 flex items-center justify-between">
                                                             <div>
                                                                 <FaIcon @icon="project-diagram" class="mr-2 dark:text-sky-300" />
-                                                                <span class="dark:text-gray-100 text-sm">Logic Stack</span>
+                                                                <span class="dark:text-gray-100 text-sm">{{t "fleet-ops.component.order-config.activity-flow-editor.logic-stack"}}</span>
                                                             </div>
-                                                            <Button @text="Add logic condition" @icon="plus" @iconPrefix="fas" @onClick={{fn this.addLogicCondition status event}} />
+                                                            <Button @text={{t "fleet-ops.component.order-config.activity-flow-editor.add-logic"}} @icon="plus" @iconPrefix="fas" @onClick={{fn this.addLogicCondition status event}} />
                                                         </div>
                                                         <div class="space-y-3 mb-3">
                                                             {{#each event.if as |logic conditionIndex|}}
@@ -79,15 +79,15 @@
                                                                         </div>
                                                                         <Select @options={{this.configFields}} @value={{get logic 0}} @placeholder="Select field" class="flex-1 w-full" @onSelect={{fn this.updateActivityLogic status event conditionIndex 0}} />
                                                                     </div>
-                                                                    <Select @options={{this.logicOperators}} @value={{get logic 1}} @optionLabel="label" @optionValue="value" @onSelect={{fn this.updateActivityLogic status event conditionIndex 1}} @placeholder="Select operator" />
+                                                                    <Select @options={{this.logicOperators}} @value={{get logic 1}} @optionLabel="label" @optionValue="value" @onSelect={{fn this.updateActivityLogic status event conditionIndex 1}} @placeholder={{t "fleet-ops.component.order-config.activity-flow-editor.select-operator"}} />
                                                                     <div class="flex items-center col-span-2">
-                                                                        <Input @type="text" @value={{get logic 2}} {{on "keyup" (fn this.updateActivityLogic status event conditionIndex 2)}} placeholder="Enter value to compare" class="form-input w-full flex-1 mr-3" />
+                                                                        <Input @type="text" @value={{get logic 2}} {{on "keyup" (fn this.updateActivityLogic status event conditionIndex 2)}} placeholder={{t "fleet-ops.component.order-config.activity-flow-editor.enter-value"}} class="form-input w-full flex-1 mr-3" />
                                                                         <Button @size="sm" @icon="trash" @onClick={{fn this.removeLogicCondition event logic}} />
                                                                     </div>
                                                                 </div>
                                                             {{else}}
                                                                 <div class="flex items-center justify-center">
-                                                                    <div class="rounded bg-gray-300 dark:bg-gray-700 shadow-sm text-sm text-center px-6 py-3 dark:text-gray-100 border border-dashed border-gray-500 dark:border-gray-900">No logic conditions applied</div>
+                                                                    <div class="rounded bg-gray-300 dark:bg-gray-700 shadow-sm text-sm text-center px-6 py-3 dark:text-gray-100 border border-dashed border-gray-500 dark:border-gray-900">{{t "fleet-ops.component.order-config.activity-flow-editor.no-logic"}}</div>
                                                                 </div>
                                                             {{/each}}
                                                         </div>

package/addon/components/order-config/activity-flow-editor.js

@@ -22,7 +22,7 @@ export default class OrderConfigActivityFlowEditorComponent extends Component {
     @service modalsManager;
     @service notifications;
     @service fetch;
-
+    @service intl;
     @tracked drake;
     @tracked orderConfig = {};
     @tracked flow = {};
@@ -149,13 +149,13 @@ export default class OrderConfigActivityFlowEditorComponent extends Component {
         const { flow } = this;
 
         this.modalsManager.show('modals/order-config-new-status', {
-            title: 'Add new status to flow',
+            title: this.intl.t('fleet-ops.component.order-config.activity-flow-editor.add-status'),
             statusName: null,
             confirm: async (modal) => {
                 const statusName = modal.getOption('statusName');
 
                 if (!statusName) {
-                    return this.notifications.warning('No status entered.');
+                    return this.notifications.warning(this.intl.t('fleet-ops.component.order-config.activity-flow-editor.no-status'));
                 }
 
                 const format = (status) => underscore(status.toLowerCase());
@@ -165,9 +165,9 @@ export default class OrderConfigActivityFlowEditorComponent extends Component {
                     await modal.done();
                     // prompt to confirm overwrite
                     return this.modalsManager.confirm({
-                        title: 'This will overwrite an existing status!',
-                        body: `There is another '${statusName}' status already existing in this flow, if you continue this status will be overwritten. Would you like to overwrite the previous '${statusName}' status?`,
-                        acceptButtonText: 'Yes, overwrite!',
+                        title: this.intl.t('fleet-ops.component.order-config.activity-flow-editor.overwrite'),
+                        body: this.intl.t('fleet-ops.component.order-config.activity-flow-editor.overwrite-text', { statusName: statusName }),
+                        acceptButtonText: this.intl.t('fleet-ops.component.order-config.activity-flow-editor.overwrite-button'),
                         confirm: (modal) => {
                             this.insertNewStatus(status);
                             modal.done();
@@ -204,9 +204,9 @@ export default class OrderConfigActivityFlowEditorComponent extends Component {
     @action removeStatus(status) {
         const { flow } = this;
         this.modalsManager.confirm({
-            title: 'Remove status',
-            body: `Are you sure you wish to delete this status? All related activites and logic will be deleted along with the status.`,
-            acceptButtonText: 'Yes, delete',
+            title: this.intl.t('fleet-ops.component.order-config.activity-flow-editor.remove'),
+            body: this.intl.t('fleet-ops.component.order-config.activity-flow-editor.remove-text'),
+            acceptButtonText: this.intl.t('fleet-ops.component.order-config.activity-flow-editor.delete-button'),
             confirm: (modal) => {
                 delete flow[status];
                 set(this, 'flow', flow);
@@ -231,7 +231,7 @@ export default class OrderConfigActivityFlowEditorComponent extends Component {
 
         // if status is created or dispatched prevent from dragging
         if (['created', 'dispatched', 'completed'].includes(format(status))) {
-            this.notifications.warning(`The '${format(status)}' must be in this order of sequence, unable to shift.`);
+            this.notifications.warning(this.intl.t('fleet-ops.component.order-config.activity-flow-editor.unable-warning', { status: format(status) }));
             this.drake.cancel(true);
             return;
         }
@@ -241,7 +241,7 @@ export default class OrderConfigActivityFlowEditorComponent extends Component {
 
         // if is not created but attempt to move to sequence 0
         if (format(status) !== 'created' && sequence === 0) {
-            this.notifications.warning(`The created status must always be the first sequence of an order flow.`);
+            this.notifications.warning(this.intl.t('fleet-ops.component.order-config.activity-flow-editor.order-warning'));
             this.drake.cancel(true);
             return;
         }

package/addon/components/order-config/details-editor.hbs

@@ -12,20 +12,20 @@
         </div>
         <div class="content-panel-body">
 
-            <InputGroup @name="Name" @value={{@orderConfig.name}} />
-            <InputGroup @name="Description" @value={{@orderConfig.description}} />
-            <InputGroup @name="Key" @value={{@orderConfig.key}} @disabled={{true}} readonly={{true}} @helpText="Pass this key into your order type to configure the order using this config." />
-            <InputGroup @name="Namespace" @value={{@orderConfig.namespace}} @disabled={{true}} readonly={{true}} @helpText="Unique namespace for this extension." />
-            <InputGroup @name="Extension ID" @value={{@orderConfig.extension_id}} @disabled={{true}} readonly={{true}} @helpText="Unique ID for this extension." />
-            <InputGroup @name="Extension Version" @value={{@orderConfig.version}} @disabled={{true}} readonly={{true}} @helpText="Version of this extension." />
+            <InputGroup @name={{t "fleet-ops.common.name"}} @value={{@orderConfig.name}} />
+            <InputGroup @name={{t "fleet-ops.common.description"}} @value={{@orderConfig.description}} />
+            <InputGroup @name={{t "fleet-ops.common.key"}} @value={{@orderConfig.key}} @disabled={{true}} readonly={{true}} @helpText={{t "fleet-ops.component.order-config.details-editor.key-text"}} />
+            <InputGroup @name={{t "fleet-ops.common.namespace"}} @value={{@orderConfig.namespace}} @disabled={{true}} readonly={{true}} @helpText={{t "fleet-ops.component.order-config.details-editor.namespace-text"}} />
+            <InputGroup @name={{t "fleet-ops.component.order-config.details-editor.id"}} @value={{@orderConfig.extension_id}} @disabled={{true}} readonly={{true}} @helpText={{t "fleet-ops.component.order-config.details-editor.id-text"}} />
+            <InputGroup @name={{t "fleet-ops.component.order-config.details-editor.version"}} @value={{@orderConfig.version}} @disabled={{true}} readonly={{true}} @helpText={{t "fleet-ops.component.order-config.details-editor.version-text"}} />
         </div>
     </div>
     <div class="flex items-center justify-end">
-        <Button @type="default" @icon="clone" @text="Clone Configuration" @size="sm" @wrapperClass="mr-2" @onClick={{fn this.sendAction "clone" @orderConfig}} />
+        <Button @type="default" @icon="clone" @text={{t "fleet-ops.component.order-config.details-editor.clone"}} @size="sm" @wrapperClass="mr-2" @onClick={{fn this.sendAction "clone" @orderConfig}} />
         {{#if @orderConfig.installed}}
-            <Button @type="danger" @icon="trash" @text="Uninstall Configuration" @size="sm" @onClick={{fn this.sendAction "uninstall" @orderConfig}} />
+            <Button @type="danger" @icon="trash" @text={{t "fleet-ops.component.order-config.details-editor.uninstall"}} @size="sm" @onClick={{fn this.sendAction "uninstall" @orderConfig}} />
         {{else}}
-            <Button @type="danger" @icon="trash" @text="Delete Configuration" @size="sm" @onClick={{fn this.sendAction "delete" @orderConfig}} />
+            <Button @type="danger" @icon="trash" @text={{t "fleet-ops.component.order-config.details-editor.delete"}} @size="sm" @onClick={{fn this.sendAction "delete" @orderConfig}} />
         {{/if}}
     </div>
     {{yield}}

package/addon/components/order-config/entities-editor.hbs

@@ -2,7 +2,7 @@
     <div class="content-panel mb-20">
         <div class="content-panel-header items-center">
             <h3 class="text-lg font-semibold dark:text-gray-100">
-                Entities
+                {{t "fleet-ops.component.order-config.entities-editor.title"}}
             </h3>
 
             <Button @text="New Entity Type" @icon="plus" @iconPrefix="fas" @onClick={{this.newEntity}} />
@@ -10,7 +10,7 @@
         <div class="content-panel-body">
             <div class="mb-6">
                 <p>
-                    Entities configuration will allow you to define the different type of entities that should be selectable for this order type. These should be used like templates to make manual order creation faster.
+                    {{t "fleet-ops.component.order-config.entities-editor.message"}}
                 </p>
             </div>
 
@@ -22,38 +22,38 @@
                                 <div class="flex items-center justify-between">
                                     <div>
                                         <FaIcon @icon="box-alt" class="mr-2 dark:text-sky-300" />
-                                        <span class="dark:text-gray-100 text-sm mr-1">Entity Type</span>
+                                        <span class="dark:text-gray-100 text-sm mr-1">{{t "fleet-ops.component.order-config.entities-editor.type"}}</span>
                                         <span class="dark:text-gray-100 text-sm">({{entity.name}})</span>
                                     </div>
                                     <div class="flex items-center">
                                         <a href="javascript:;" class="mr-2 btn btn-danger btn-sm" {{on "click" (fn this.removeEntity index)}}>
                                             <FaIcon @icon="trash" />
                                         </a>
-                                        <Button @text="Add meta field" @icon="plus" @iconPrefix="fas" @onClick={{fn this.addMetaField index}} />
+                                        <Button @text={{t "fleet-ops.component.order-config.entities-editor.add-meta"}} @icon="plus" @iconPrefix="fas" @onClick={{fn this.addMetaField index}} />
                                     </div>
                                 </div>
                             </div>
                             <div class="p-3">
                                 <div class="grid grid-cols-3 gap-2">
-                                    <InputGroup @name="Name" @value={{entity.name}} />
-                                    <InputGroup @name="Type" @value={{entity.type}}>
+                                    <InputGroup @name={{t "fleet-ops.common.name"}} @value={{entity.name}} />
+                                    <InputGroup @name={{t "fleet-ops.common.type"}} @value={{entity.type}}>
                                         <KeyInput @value={{entity.type}} @onChange={{fn (mut entity.type)}} />
                                     </InputGroup>
-                                    <InputGroup @name="Description" @value={{entity.description}} class="col-span-2" />
+                                    <InputGroup @name={{t "fleet-ops.common.description"}} @value={{entity.description}} class="col-span-2" />
                                 </div>
 
                                 <div class="grid grid-cols-5 gap-2">
-                                    <InputGroup @name="Weight" @value={{entity.weight}} class="col-span-3" />
-                                    <InputGroup @name="Unit">
+                                    <InputGroup @name={{t "fleet-ops.common.weight"}} @value={{entity.weight}} class="col-span-3" />
+                                    <InputGroup @name={{t "fleet-ops.common.unit"}}>
                                         <Select @value={{entity.weight_unit}} @options={{this.weightUnits}} @optionLabel="name" @optionValue="value" class="w-full" />
                                     </InputGroup>
                                 </div>
 
                                 <div class="grid grid-cols-5 gap-2">
-                                    <InputGroup @name="Length" @value={{entity.length}} />
-                                    <InputGroup @name="Width" @value={{entity.width}} />
-                                    <InputGroup @name="Height" @value={{entity.width}} />
-                                    <InputGroup @name="Unit">
+                                    <InputGroup @name={{t "fleet-ops.common.length"}} @value={{entity.length}} />
+                                    <InputGroup @name={{t "fleet-ops.common.width"}} @value={{entity.width}} />
+                                    <InputGroup @name={{t "fleet-ops.common.height"}} @value={{entity.width}} />
+                                    <InputGroup @name={{t "fleet-ops.common.unit"}}>
                                         <Select @value={{entity.dimentions_unit}} @options={{this.lengthUnits}} @optionLabel="name" @optionValue="value" class="w-full" />
                                     </InputGroup>
                                 </div>

package/addon/components/order-config/entities-editor.js

@@ -11,7 +11,7 @@ import getLengthUnits from '@fleetbase/ember-core/utils/get-length-units';
 export default class OrderConfigEntitiesEditorComponent extends Component {
     @service modalsManager;
     @service notifications;
-
+    @service intl;
     @tracked weightUnits = getWeightUnits();
     @tracked lengthUnits = getLengthUnits();
     @tracked _orderConfig = null;
@@ -75,7 +75,7 @@ export default class OrderConfigEntitiesEditorComponent extends Component {
                 const keyName = modal.getOption('keyName');
 
                 if (!keyName) {
-                    return this.notifications.warning('No meta field key name entered.');
+                    return this.notifications.warning(this.intl.t('fleet-ops.component.order-config.entities-editor.warning-message'));
                 }
 
                 modal.startLoading();

package/addon/components/order-config/fields-editor.hbs

@@ -2,16 +2,16 @@
     <div class="content-panel">
         <div class="content-panel-header items-center">
             <h3 class="text-lg font-semibold dark:text-gray-100">
-                Meta Fields
+                {{t "fleet-ops.component.order-config.fields-editor.field-title"}}
             </h3>
             <div>
-                <Button @icon="plus" @iconPrefix="fas" @text="New Custom Field" @size="sm" @onClick={{this.addField}} />
-                <Button @icon="plus" @iconPrefix="fas" @text="New Custom Fields Group" @size="sm" @onClick={{this.addMetaFieldGroup}} />
+                <Button @icon="plus" @iconPrefix="fas" @text={{t "fleet-ops.component.order-config.fields-editor.new-field"}} @size="sm" @onClick={{this.addField}} />
+                <Button @icon="plus" @iconPrefix="fas" @text={{t "fleet-ops.component.order-config.fields-editor.new-custom-field"}} @size="sm" @onClick={{this.addMetaFieldGroup}} />
             </div>
         </div>
         <div class="content-panel-body">
             <div class="mb-6">
-                <p>Meta fields configuration will allow you to define custom input fields that will be applied to orders.</p>
+                <p>{{t "fleet-ops.component.order-config.fields-editor.field-text"}}</p>
             </div>
 
             <Dragula @onDrop={{this.moveMetaField}} as |Container|>
@@ -19,16 +19,16 @@
                     <div class="content-panel">
                         <div class="content-panel-header items-center">
                             <div class="font-semibold dark:text-gray-100">
-                                <span class="mr-1">Custom Fields Group:</span>
+                                <span class="mr-1">{{t "fleet-ops.component.order-config.fields-editor.custom-field-group"}}:</span>
                                 {{#if group.value}}
                                     <span>{{smart-humanize group.value}}</span>
                                 {{else}}
-                                    <span>Default Fields</span>
+                                    <span>{{t "fleet-ops.component.order-config.fields-editor.default-field"}}</span>
                                 {{/if}}
                             </div>
 
                             <div>
-                                <Button @icon="plus" @iconPrefix="fas" @text="New Custom Field" @size="sm" @onClick={{fn this.addField group.value}} />
+                                <Button @icon="plus" @iconPrefix="fas" @text={{t "fleet-ops.component.order-config.fields-editor.new-field"}} @size="sm" @onClick={{fn this.addField group.value}} />
                                 {{#if group.value}}
                                     <Button @type="danger" @icon="times" @iconPrefix="fas" @size="sm" @onClick={{fn this.removeGroup group.value}} />
                                 {{/if}}
@@ -41,7 +41,7 @@
                                     <div class="content-panel cursor-move">
                                         <div class="content-panel-header items-center">
                                             <div class="font-semibold dark:text-gray-100">
-                                                <span class="mr-1">Custom Field:</span>
+                                                <span class="mr-1">{{t "fleet-ops.component.order-config.fields-editor.custom-field"}}:</span>
                                                 <span>{{metaField.label}}</span>
                                             </div>
                                             <a href="javascript:;" {{on "click" (fn this.removeField metaField)}} class="btn btn-danger btn-sm">
@@ -53,10 +53,10 @@
                                                 <InputGroup @name="Label" @value={{metaField.label}} {{on "keyup" (fn this.setFieldLabel metaField)}} />
                                                 <div class="input-group {{if (eq metaField.type "select") 'col-span-2'}}">
                                                     <div class="flex items-center justify-between">
-                                                        <label class="font-medium flex-1">Field Type</label>
+                                                        <label class="font-medium flex-1">{{t "fleet-ops.component.order-config.fields-editor.type"}}</label>
                                                     </div>
                                                     <div class="flex items-center justify-between">
-                                                        <Select class="w-full" @value={{metaField.type}} @options={{this.metaFieldTypes}} @optionLabel="label" @optionValue="key" @placeholder="Select field type" @onSelect={{fn (mut metaField.type)}} />
+                                                        <Select class="w-full" @value={{metaField.type}} @options={{this.metaFieldTypes}} @optionLabel="label" @optionValue="key" @placeholder={{t "fleet-ops.component.order-config.fields-editor.select-type"}} @onSelect={{fn (mut metaField.type)}} />
                                                         {{#if (eq metaField.type "select")}}
                                                             <div class="pl-2">
                                                                 <BasicDropdown @renderInPlace={{false}} as |dd|>
@@ -67,7 +67,7 @@
                                                                         <div class="w-80 mt-2 rounded shadow-md be-white dark:bg-gray-800">
                                                                             <div class="border border-gray-300 shdaow-sm rounded dark:border-gray-900">
                                                                                 <div class="flex items-start justify-between mb-1 p-3">
-                                                                                    <Button @type="primary" @size="xs" @text="Add Option" @onClick={{fn this.addMetaFieldOption metaField}} />
+                                                                                    <Button @type="primary" @size="xs" @text={{t "fleet-ops.component.order-config.fields-editor.add-option"}} @onClick={{fn this.addMetaFieldOption metaField}} />
                                                                                     <div class="flex flex-col space-y-3">
                                                                                         <Toggle @label="Key-Value" @isToggled={{metaField.useKvOptions}} @onToggle={{fn this.toggleMetaFieldKv metaField}} />
                                                                                         {{#unless metaField.useKvOptions}}
@@ -84,9 +84,9 @@
                                                                                                     <div class="flex items-start flex-1">
                                                                                                         <div class="space-y-3 flex flex-col pr-2 flex-1">
                                                                                                             {{#if metaField.useKvOptions}}
-                                                                                                                <Input @type="text" @value={{option.key}} class="form-input form-input-sm" placeholder="Key" />
+                                                                                                                <Input @type="text" @value={{option.key}} class="form-input form-input-sm" placeholder={{t "fleet-ops.common.key"}} />
                                                                                                             {{/if}}
-                                                                                                            <Input @type="text" @value={{option.value}} class="form-input form-input-sm" placeholder="Value" />
+                                                                                                            <Input @type="text" @value={{option.value}} class="form-input form-input-sm" placeholder={{t "fleet-ops.common.value"}} />
                                                                                                         </div>
                                                                                                         <Button @size="xs" @type="danger" @icon="trash" @onClick={{fn this.removeMetaFieldOption metaField option}} />
                                                                                                     </div>
@@ -103,7 +103,7 @@
                                                         {{/if}}
                                                     </div>
                                                 </div>
-                                                <InputGroup @name="Description" @value={{metaField.description}} />
+                                                <InputGroup @name={{t "fleet-ops.common.description"}} @value={{metaField.description}} />
                                                 <div class="input-group">
                                                     <Checkbox @label="Required" @onToggle={{fn (mut metaField.required)}} @value={{metaField.required}} />
                                                 </div>