@fleetbase/fleetops-engine 0.4.0 → 0.4.2

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>

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

@@ -17,6 +17,7 @@ export default class OrderConfigFieldsEditorComponent extends Component {
         }
     }
 
+    @service intl;
     @service modalsManager;
     @service notifications;
 
@@ -25,34 +26,34 @@ export default class OrderConfigFieldsEditorComponent extends Component {
     @tracked fields = [];
     @tracked metaFieldTypes = [
         {
-            label: 'Text Field',
+            label: this.intl.t('fleet-ops.component.order-config.fields-editor.text-field'),
             key: 'text',
         },
         {
-            label: 'Boolean',
-            description: 'Allows user to toggle a true or false property by checkbox',
+            label: this.intl.t('fleet-ops.component.order-config.fields-editor.boolean'),
+            description: this.intl.t('fleet-ops.component.order-config.fields-editor.boolean-text'),
             key: 'boolean',
         },
         {
-            label: 'Dropdown Select',
-            description: 'Allows user to select an option from a dropdown of options',
+            label: this.intl.t('fleet-ops.component.order-config.fields-editor.dropdown'),
+            description: this.intl.t('fleet-ops.component.order-config.fields-editor.dropdown-text'),
             key: 'select',
             hasOptions: true,
         },
         {
-            label: 'Datetime Selector',
-            description: 'Allows user to select a date & time',
+            label: this.intl.t('fleet-ops.component.order-config.fields-editor.datetime'),
+            description: this.intl.t('fleet-ops.component.order-config.fields-editor.datetime'),
             key: 'datetime',
         },
         {
-            label: 'Port Selector',
-            description: 'Allows user to select a port',
+            label: this.intl.t('fleet-ops.component.order-config.fields-editor.port'),
+            description: this.intl.t('fleet-ops.component.order-config.fields-editor.port-text'),
             serialize: 'model:port',
             key: 'port',
         },
         {
-            label: 'Vessel Selector',
-            description: 'Allows user to select a vessel',
+            label: this.intl.t('fleet-ops.component.order-config.fields-editor.vessel'),
+            description: this.intl.t('fleet-ops.component.order-config.fields-editor.vessel-text'),
             serialize: 'model:vessel',
             key: 'vessel',
         },
@@ -99,7 +100,7 @@ export default class OrderConfigFieldsEditorComponent extends Component {
                 const groupName = modal.getOption('groupName');
 
                 if (typeof groupName !== 'string') {
-                    return this.notifications.warning('No group name entered.');
+                    return this.notifications.warning(this.intl.t('fleet-ops.component.order-config.fields-editor.warning-message'));
                 }
 
                 const group = underscore(groupName.toLowerCase());

package/addon/components/order-config.hbs

@@ -2,23 +2,23 @@
     <div class="space-y-1">
         <div class="px-5 mt-6 flex">
             <div class="flex-1">
-                <InfoBlock class="px-3 py-2">Select an order configuration to modify, or click "New Config" to create a new order configuration.</InfoBlock>
+                <InfoBlock class="px-3 py-2">{{t "fleet-ops.component.order-config.select-message"}}</InfoBlock>
             </div>
             <div>
-                <Button class="ml-6" @icon="plus" @iconPrefix="fas" @text="New Config" @size="md" @onClick={{this.createNewOrderConfig}} />
+                <Button class="ml-6" @icon="plus" @iconPrefix="fas" @text={{t "fleet-ops.component.order-config.new-config"}} @size="md" @onClick={{this.createNewOrderConfig}} />
             </div>
         </div>
         <div class="flex items-center justify-between p-4">
             {{#if this.isLoading}}
                 <div class="flex text-center items-center justify-center p-4">
                     <Spinner class="mr-2 dark:text-gray-100" />
-                    <span class="dark:text-gray-100">Loading your order configurations...</span>
+                    <span class="dark:text-gray-100">{{t "fleet-ops.component.order-config.loading-configuration"}}</span>
                 </div>
             {{else}}
-                <Select class="w-full flex-1" @value={{this.selected}} @options={{this.configurations}} @optionLabel="name" @optionValue="namespace" @placeholder="Select order configuration" @onSelect={{this.selectConfig}} />
+                <Select class="w-full flex-1" @value={{this.selected}} @options={{this.configurations}} @optionLabel="name" @optionValue="namespace" @placeholder={{t "fleet-ops.component.order-config.select-order"}} @onSelect={{this.selectConfig}} />
                 {{#if this.selected}}
                     <div class="pl-6">
-                        <Button @type="primary" @icon="save" @text="Save Changes" @size="md" @isLoading={{this.isSaving}} @onClick={{this.saveConfig}} />
+                        <Button @type="primary" @icon="save" @text={{t "fleet-ops.component.order-config.save-changes"}} @size="md" @isLoading={{this.isSaving}} @onClick={{this.saveConfig}} />
                     </div>
                 {{/if}}
             {{/if}}
@@ -30,19 +30,19 @@
                     <nav>
                         <a href="javascript:;" class="ui-tab {{if (eq this.activeTab 'details') 'active'}}" {{on "click" (fn
                             (mut this.activeTab) "details" )}}>
-                            Details
+                            {{t "fleet-ops.component.order-config.details"}}
                         </a>
                         <a href="javascript:;" class="ui-tab  {{if (eq this.activeTab 'meta') 'active'}}" {{on "click" (fn
                             (mut this.activeTab) "meta" )}}>
-                            Custom Fields
+                            {{t "fleet-ops.component.order-config.fields"}}
                         </a>
                         <a href="javascript:;" class="ui-tab  {{if (eq this.activeTab 'activity') 'active'}}" {{on "click"
                             (fn (mut this.activeTab) "activity" )}}>
-                            Activity Flow
+                            {{t "fleet-ops.component.order-config.flow"}}
                         </a>
                         <a href="javascript:;" class="ui-tab  {{if (eq this.activeTab 'entities') 'active'}}" {{on "click"
                             (fn (mut this.activeTab) "entities" )}}>
-                            Entities
+                            {{t "fleet-ops.component.order-config.entities"}}
                         </a>
                     </nav>
                 </div>

package/addon/components/order-config.js

@@ -9,6 +9,7 @@ export default class OrderConfigComponent extends Component {
     @service modalsManager;
     @service fetch;
     @service socket;
+    @service intl;
     @service store;
     @service notifications;
     @service crud;
@@ -95,7 +96,7 @@ export default class OrderConfigComponent extends Component {
         const tags = [];
 
         this.modalsManager.show('modals/new-order-config', {
-            title: 'Create a new order configuration',
+            title: this.intl.t('fleet-ops.component.order-config.create-new-title'),
             acceptButtonIcon: 'check',
             acceptButtonIconPrefix: 'fas',
             declineButtonIcon: 'times',
@@ -116,7 +117,7 @@ export default class OrderConfigComponent extends Component {
 
                 if (!name) {
                     modal.stopLoading();
-                    return this.notifications.warning('Order configuration requires a name');
+                    return this.notifications.warning(this.intl.t('fleet-ops.component.order-config.warning-message'));
                 }
 
                 return this.fetch
@@ -125,7 +126,7 @@ export default class OrderConfigComponent extends Component {
                         const newConfigExtension = this.fetch.jsonToModel(newConfig, 'extension');
 
                         this.configurations.pushObject(newConfigExtension);
-                        this.notifications.success('New order config created successfully.');
+                        this.notifications.success(this.intl.t('fleet-ops.component.order-config.success-message'));
                         this.selectConfig(newConfigExtension.namespace);
                     })
                     .catch((error) => {
@@ -139,7 +140,7 @@ export default class OrderConfigComponent extends Component {
         const { orderConfig } = this;
 
         if (!orderConfig) {
-            this.notifications.warning('No order configuration selected.');
+            this.notifications.warning(this.intl.t('fleet-ops.component.order-config.no-order-warning'));
 
             return;
         }
@@ -150,7 +151,7 @@ export default class OrderConfigComponent extends Component {
                 data: orderConfig,
             })
             .then(() => {
-                this.notifications.success(`${orderConfig.name} order configuration saved.`);
+                this.notifications.success(this.intl.t('fleet-ops.component.order-config.saved-success', { orderName: orderConfig.name }));
                 this.isSaving = false;
             })
             .catch((error) => {
@@ -164,7 +165,7 @@ export default class OrderConfigComponent extends Component {
         const description = extension.description;
 
         this.modalsManager.show('modals/clone-config-form', {
-            title: 'Enter name of cloned configuration',
+            title: this.intl.t('fleet-ops.component.order-config.enter-name-title'),
             acceptButtonIcon: 'check',
             acceptButtonIconPrefix: 'fas',
             declineButtonIcon: 'times',
@@ -177,7 +178,7 @@ export default class OrderConfigComponent extends Component {
                 const { name, description } = modal.getOptions();
 
                 if (!name) {
-                    return this.notifications.warning('No config name entered.');
+                    return this.notifications.warning(this.intl.t('fleet-ops.component.order-config.no-config-warning'));
                 }
 
                 return this.fetch
@@ -190,7 +191,7 @@ export default class OrderConfigComponent extends Component {
                     .then((newConfig) => {
                         const clone = this.fetch.jsonToModel(newConfig, 'extension');
                         this.configurations.pushObject(clone);
-                        this.notifications.success('Order config successfully cloned.');
+                        this.notifications.success(this.intl.t('fleet-ops.component.order-config.cloned-success'));
                         this.selectConfig(clone.namespace);
                     })
                     .catch((error) => {
@@ -204,7 +205,7 @@ export default class OrderConfigComponent extends Component {
         const uninstall = isModel(extension) ? extension : this.fetch.jsonToModel(extension, 'extension');
 
         return this.crud.delete(uninstall, {
-            body: 'Once this order configuration is deleted you will not be able to create orders using it anymore. Are you sure?',
+            body: this.intl.t('fleet-ops.component.order-config.body'),
             acceptButtonIcon: 'trash',
             declineButtonIcon: 'times',
             declineButtonIconPrefix: 'fas',
@@ -221,7 +222,7 @@ export default class OrderConfigComponent extends Component {
         this.listenForUninstallProgress(extension);
 
         this.modalsManager.show('modals/uninstall-prompt', {
-            title: 'Uninstall Configuration',
+            title: this.intl.t('fleet-ops.component.order-config.uninstall-title'),
             acceptButtonText: 'Uninstall',
             acceptButtonScheme: 'danger',
             extension,
@@ -236,7 +237,7 @@ export default class OrderConfigComponent extends Component {
                     .uninstall()
                     .then(() => {
                         this.closeUninstallChannel();
-                        this.notifications.success(`Extension '${extensionName}' uninstalled.`);
+                        this.notifications.success(this.intl.t('fleet-ops.component.order-config.uninstall-success', { extensionName: extensionName }));
                         this.configurations.removeObject(extension);
                         this.selected = undefined;
                         done();

package/addon/components/order-list-overlay.hbs

@@ -4,7 +4,7 @@
             <div class="absolute h-full left-0 top-0 bottom-0 pl-4 flex items-center justify-center">
                 <FaIcon @icon="search" />
             </div>
-            <Input @value={{this.query}} @type="text" placeholder="Search orders..." class="w-full p-0 m-0 h-full bg-transparent order-list-overlay-search" />
+            <Input @value={{this.query}} @type="text" placeholder={{t "fleet-ops.component.order-list-overlay.search"}} class="w-full p-0 m-0 h-full bg-transparent order-list-overlay-search" />
         </div>
         {{#if this.selectedOrders.length}}
             <BasicDropdown class="mr-2" @renderInPlace={{true}} as |dd|>
@@ -17,14 +17,14 @@
                     <div class="next-dd-menu">
                         <div class="px-1">
                             <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1">
-                                Selected {{pluralize this.selectedOrders.length "Order"}}
+                                {{t "fleet-ops.component.order-list-overlay.selected"}} {{pluralize this.selectedOrders.length "Order"}}
                             </div>
                         </div>
                         <div class="next-dd-menu-seperator"></div>
                         <div class="px-1">
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.onDropdownAction dd "onPressAssignOrders")}}>Assign to driver...</a>
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.onDropdownAction dd "onPressCancelOrders" this.selectedOrders)}}>Cancel orders...</a>
-                            <a href="javascript:;" class="next-dd-item text-danger" {{on "click" (fn this.onDropdownAction dd "onPressDeleteOrders" this.selectedOrders)}}>Delete orders...</a>
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.onDropdownAction dd "onPressAssignOrders")}}>{{t "fleet-ops.component.order-list-overlay.assign"}}</a>
+                            <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.onDropdownAction dd "onPressCancelOrders" this.selectedOrders)}}>{{t "fleet-ops.component.order-list-overlay.cancel"}}</a>
+                            <a href="javascript:;" class="next-dd-item text-danger" {{on "click" (fn this.onDropdownAction dd "onPressDeleteOrders" this.selectedOrders)}}>{{t "fleet-ops.component.order-list-overlay.delete"}}</a>
                         </div>
                     </div>
                 </dd.Content>
@@ -40,13 +40,13 @@
                 <div class="next-dd-menu">
                     <div class="px-1">
                         <div class="text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1">
-                            Actions
+                            {{t "fleet-ops.component.order-list-overlay.actions"}}
                         </div>
                     </div>
                     <div class="next-dd-menu-seperator"></div>
                     <div class="px-1">
-                        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.onDropdownAction dd "onPressCreateOrder")}}>Create new order...</a>
-                        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.onDropdownAction dd "onPressCreateFleet")}}>Create new fleet...</a>
+                        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.onDropdownAction dd "onPressCreateOrder")}}>{{t "fleet-ops.component.order-list-overlay.create-order"}}</a>
+                        <a href="javascript:;" class="next-dd-item" {{on "click" (fn this.onDropdownAction dd "onPressCreateFleet")}}>{{t "fleet-ops.component.order-list-overlay.create-fleet"}}</a>
                     </div>
                 </div>
             </dd.Content>
@@ -57,34 +57,34 @@
         {{#if this.isLoading}}
             <div class="flex items-center p-4">
                 <Spinner class="mr-2" />
-                <span>Loading...</span>
+                <span>{{t "fleet-ops.common.loading"}}</span>
             </div>
         {{/if}}
 
         <div class="space-y-4 orders-panel-fleets">
             <div class="next-content-panel-wrapper mb-2">
-                <ContentPanel @title="Active orders" @subtitle={{pluralize this.activeOrders.length "Order"}} @open={{this.activeOrders.length}} @pad={{true}} @panelSubtitleInlineClass="text-xs" @panelBodyClass="order-listings bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "fleet-ops.component.order-list-overlay.active-order"}} @subtitle={{pluralize this.activeOrders.length "Order"}} @open={{this.activeOrders.length}} @pad={{true}} @panelSubtitleInlineClass="text-xs" @panelBodyClass="order-listings bg-white dark:bg-gray-800">
                     {{#each this.activeOrders as |order index|}}
                         <OrderListOverlay::Order @order={{order}} @index={{add index 1}} @isSelected={{includes order this.selectedOrders}} @onClick={{this.selectOrder}} @onDoubleClick={{fn this.onAction "onPressViewOrder"}} as |isSelected|>
                             {{#if isSelected}}
                                 <div class="order-listings-row selected px-4 py-2">
                                     <div class="flex flex-row items-center space-x-2">
                                         {{!-- <Button @type="default" @icon="map" @text="Map" @size="xs" class="btn-transparent-border" /> --}}
-                                        <Button @type="default" @icon="file-invoice" @text="Details" @size="xs" class="btn-transparent-border" @onClick={{fn this.onAction "onPressViewOrder" order}} />
+                                        <Button @type="default" @icon="file-invoice" @text={{t "fleet-ops.common.details"}} @size="xs" class="btn-transparent-border" @onClick={{fn this.onAction "onPressViewOrder" order}} />
                                     </div>
                                 </div>
                             {{/if}}
                         </OrderListOverlay::Order>
                     {{/each}}
                 </ContentPanel>
-                <ContentPanel @title="Unassigned orders" @subtitle={{pluralize this.unassignedOrders.length "Order"}} @open={{this.unassignedOrders.length}} @pad={{true}} @panelSubtitleInlineClass="text-xs" @panelBodyClass="order-listings bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "fleet-ops.component.order-list-overlay.unassigned-order"}} @subtitle={{pluralize this.unassignedOrders.length "Order"}} @open={{this.unassignedOrders.length}} @pad={{true}} @panelSubtitleInlineClass="text-xs" @panelBodyClass="order-listings bg-white dark:bg-gray-800">
                     {{#each this.unassignedOrders as |order index|}}
                         <OrderListOverlay::Order @order={{order}} @index={{add index 1}} @isSelected={{includes order this.selectedOrders}} @onClick={{this.selectOrder}} @onDoubleClick={{fn this.onAction "onPressViewOrder"}} as |isSelected|>
                             {{#if isSelected}}
                                 <div class="order-listings-row selected px-4 py-2">
                                     <div class="flex flex-row items-center space-x-2">
                                         {{!-- <Button @type="default" @icon="map" @text="Map" @size="xs" class="btn-transparent-border" /> --}}
-                                        <Button @type="default" @icon="file-invoice" @text="Details" @size="xs" class="btn-transparent-border" @onClick={{fn this.onAction "onPressViewOrder" order}} />
+                                        <Button @type="default" @icon="file-invoice" @text={{t "fleet-ops.common.details"}} @size="xs" class="btn-transparent-border" @onClick={{fn this.onAction "onPressViewOrder" order}} />
                                     </div>
                                 </div>
                             {{/if}}
@@ -105,7 +105,7 @@
                                         <div class="order-listings-row selected px-4 py-2">
                                             <div class="flex flex-row items-center space-x-2">
                                                 {{!-- <Button @type="default" @icon="map" @text="Map" @size="xs" class="btn-transparent-border" /> --}}
-                                                <Button @type="default" @icon="file-invoice" @text="Details" @size="xs" class="btn-transparent-border" @onClick={{fn this.onAction "onPressViewOrder" order}} />
+                                                <Button @type="default" @icon="file-invoice" @text={{t "fleet-ops.common.details"}} @size="xs" class="btn-transparent-border" @onClick={{fn this.onAction "onPressViewOrder" order}} />
                                             </div>
                                         </div>
                                     {{/if}}