@fleetbase/fleetops-engine 0.3.9 → 0.4.1

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}}

package/addon/components/place-form-panel.hbs

@@ -10,39 +10,39 @@
     @width={{or this.width @width "570px"}}
 >
     <Overlay::Header
-        @title={{if this.place.public_id this.place.name "New Place"}}
+        @title={{if this.place.public_id this.place.name (t "fleet-ops.component.place-form-panel.place") }}
         @status={{this.place.public_id}}
         @hideStatusDot={{true}}
         @createdAt={{this.place.createdAt}}
         @titleWrapperClass="leading-5"
     >
         <div class="flex flex-1 justify-end">
-            <Button @icon={{if this.place.id "save" "check"}} @type="primary" @text={{if this.place.id "Save Place" "Create Place"}} @onClick={{this.save}} @wrapperClass="mr-2" />
-            <Button @type="default" @icon="times" @helpText={{if this.place.id "Cancel edit place" "Cancel new place"}} @onClick={{this.onPressCancel}} />
+            <Button @icon={{if this.place.id "save" "check"}} @type="primary" @text={{if this.place.id (t "fleet-ops.component.place-form-panel.save-place")(t "fleet-ops.component.place-form-panel.create-place") }} @onClick={{this.save}} @wrapperClass="mr-2" />
+            <Button @type="default" @icon="times" @helpText={{if this.place.id (t "fleet-ops.component.place-form-panel.cancel-edit-place")(t "fleet-ops.component.place-form-panel.cancel-new-place") }} @onClick={{this.onPressCancel}} />
         </div>
     </Overlay::Header>
 
     <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
         <div class="grid grid-cols-3 gap-1 text-xs dark:text-gray-100">
-            <InputGroup @name="Name" @wrapperClass="col-span-2">
-                <Input @value={{this.place.name}} @type="text" class="w-full form-input" placeholder="Name" />
+            <InputGroup @name={{t "fleet-ops.common.name"}} @wrapperClass="col-span-2">
+                <Input @value={{this.place.name}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.name"}} />
             </InputGroup>
-            <InputGroup @name="Street 1" @value={{this.place.street1}} @wrapperClass="col-span-3">
-                <AutocompleteInput @value={{this.place.street1}} @fetchUrl="places/lookup" @onSelect={{this.onAutocomplete}} placeholder="Street 1" class="w-full" as |result|>
+            <InputGroup @name={{t "fleet-ops.component.place-form-panel.street-1"}} @value={{this.place.street1}} @wrapperClass="col-span-3">
+                <AutocompleteInput @value={{this.place.street1}} @fetchUrl="places/lookup" @onSelect={{this.onAutocomplete}} placeholder={{t "fleet-ops.component.place-form-panel.street-1"}} class="w-full" as |result|>
                     {{result.address}}
                 </AutocompleteInput>
             </InputGroup>
-            <InputGroup @name="Street 2" @autocomplete="nope" @value={{this.place.street2}} @wrapperClass="col-span-3" />
-            <InputGroup @name="Neighborhood" @autocomplete="nope" @value={{this.place.neighborhood}} />
-            <InputGroup @name="Building" @autocomplete="nope" @value={{this.place.building}} />
-            <InputGroup @name="Security Access Code" @autocomplete="nope" @value={{this.place.security_access_code}} />
-            <InputGroup @name="Postal Code" @autocomplete="nope" @value={{this.place.postal_code}} />
-            <InputGroup @name="City" @autocomplete="nope" @value={{this.place.city}} />
-            <InputGroup @name="State" @autocomplete="nope" @value={{this.place.province}} />
-            <InputGroup @name="Country" @wrapperClass="col-span-2">
-                <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.place.country}} @onChange={{fn (mut this.place.country)}} placeholder="Country" />
+            <InputGroup @name={{t "fleet-ops.component.place-form-panel.street-2"}} @autocomplete="nope" @value={{this.place.street2}} @wrapperClass="col-span-3" />
+            <InputGroup @name={{t "fleet-ops.component.place-form-panel.neighborhood"}} @autocomplete="nope" @value={{this.place.neighborhood}} />
+            <InputGroup @name={{t "fleet-ops.component.place-form-panel.building"}} @autocomplete="nope" @value={{this.place.building}} />
+            <InputGroup @name={{t "fleet-ops.component.place-form-panel.security-code"}} @autocomplete="nope" @value={{this.place.security_access_code}} />
+            <InputGroup @name={{t "fleet-ops.component.place-form-panel.postal-code"}} @autocomplete="nope" @value={{this.place.postal_code}} />
+            <InputGroup @name={{t "fleet-ops.common.city"}} @autocomplete="nope" @value={{this.place.city}} />
+            <InputGroup @name={{t "fleet-ops.component.place-form-panel.state"}} @autocomplete="nope" @value={{this.place.province}} />
+            <InputGroup @name={{t "fleet-ops.common.country"}} @wrapperClass="col-span-2">
+                <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.place.country}} @onChange={{fn (mut this.place.country)}} placeholder={{t "fleet-ops.common.country"}} />
             </InputGroup>
-            <InputGroup @name="Coordinates" @wrapperClass="col-span-2">
+            <InputGroup @name={{t "fleet-ops.common.coordinates"}} @wrapperClass="col-span-2">
                 <CoordinatesInput
                     @value={{this.place.location}}
                     @onChange={{this.updatePlaceCoordinates}}
@@ -52,7 +52,7 @@
                 />
             </InputGroup>
             <div class="col-span-1"></div>
-            <InputGroup @name="Phone">
+            <InputGroup @name={{t "fleet-ops.common.phone"}}>
                 <PhoneInput @value={{this.place.phone}} @autocomplete="nope" @onInput={{this.phone}} class="form-input w-full" />
             </InputGroup>
         </div>

package/addon/components/place-form-panel.js

@@ -18,6 +18,11 @@ export default class PlaceFormPanelComponent extends Component {
      */
     @service fetch;
 
+    /**
+     * @service intl
+     */
+    @service intl;
+
     /**
      * @service notifications
      */
@@ -101,7 +106,7 @@ export default class PlaceFormPanelComponent extends Component {
             return place
                 .save()
                 .then((place) => {
-                    this.notifications.success(`place (${place.address}) saved successfully.`);
+                    this.notifications.success(this.intl.t('fleet-ops.component.place-form-panel.success-message', { placeAddress: place.address }));
                     contextComponentCallback(this, 'onAfterSave', place);
                 })
                 .catch((error) => {

package/addon/components/place-panel/details.hbs

@@ -22,55 +22,55 @@
     <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-2 text-xs dark:text-gray-100">
             <div class="field-info-container col-span-3">
-                <div class="field-name">Name</div>
+                <div class="field-name">{{t "fleet-ops.common.name"}}</div>
                 <div class="field-value">{{n-a @place.name}}</div>
             </div>
 
             <div class="field-info-container col-span-3">
-                <div class="field-name">Street</div>
+                <div class="field-name">{{t "fleet-ops.common.street"}}</div>
                 <div class="field-value">{{n-a @place.street1}}</div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">Neighborhood</div>
+                <div class="field-name">{{t "fleet-ops.common.neighborhood"}}</div>
                 <div class="field-value">{{n-a @place.neighborhood}}</div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">Building</div>
+                <div class="field-name">{{t "fleet-ops.common.building"}}</div>
                 <div class="field-value">{{n-a @place.building}}</div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">Security Access Code</div>
+                <div class="field-name">{{t "fleet-ops.common.security-access-code"}}</div>
                 <div class="field-value">{{n-a @place.security_access_code}}</div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">City</div>
+                <div class="field-name">{{t "fleet-ops.common.city"}}</div>
                 <div class="field-value">{{n-a @place.city}}</div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">State</div>
+                <div class="field-name">{{t "fleet-ops.common.state"}}</div>
                 <div class="field-value">{{n-a @place.province}}</div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">Country</div>
+                <div class="field-name">{{t "fleet-ops.common.country"}}</div>
                 <div class="field-value">
                     <CountryName @country={{@place.country}} @showFlag={{true}} />
                 </div>
             </div>
 
             <div class="field-info-container">
-                <div class="field-name">Phone</div>
+                <div class="field-name">{{t "fleet-ops.common.phone"}}</div>
                 <div class="field-value">{{n-a @place.phone}}</div>
             </div>
 
             <div class="field-info-container col-span-3">
                 <div class="field-name">
-                    Coordinates
+                    {{t "fleet-ops.common.coordinates"}}
                     {{!-- <a href="javascript:;" class="block ml-3" {{on "click" @place.viewPlaceOnMap}}>
                                 <FaIcon @icon="map" class="mr-1" />
                                 View on map

package/addon/components/place-panel.hbs

@@ -10,8 +10,8 @@
     @width={{or this.width @width "570px"}}
 >
     <Overlay::Header @title={{this.place.name}} @status={{this.place.public_id}} @hideStatusDot={{true}} @createdAt={{this.place.createdAt}}>
-        <Button @type="default" @icon="pen" @helpText="Edit place" @onClick={{this.onEdit}} @wrapperClass="mr-2" />
-        <Button @type="default" @icon="times" @helpText={{if this.place.id "Cancel edit place" "Cancel new place"}} @onClick={{this.onPressCancel}} />
+        <Button @type="default" @icon="pen" @helpText={{t "fleet-ops.component.place-panel.edit-place"}} @onClick={{this.onEdit}} @wrapperClass="mr-2" />
+        <Button @type="default" @icon="times" @helpText={{if this.place.id (t "fleet-ops.component.place-panel.cancel-edit-place")(t "fleet-ops.component.place-panel.cancel-new-place") }} @onClick={{this.onPressCancel}} />
     </Overlay::Header>
     <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
         <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">

package/addon/components/route-list.hbs

@@ -15,9 +15,9 @@
             <div class="px-3 py-2 w-full bg-yellow-200 text-yellow-900 rounded shadow-sm flex flex-col justify-center items-start mb-3">
                 <div class="flex flex-row items-center">
                     <FaIcon @icon="eye" class="mr-2 text-yellow-900" />
-                    <span class="font-bold">{{if this.isWaypointsCollapsed "Tap to expand" "Tap to collapse"}}</span>
+                    <span class="font-bold">{{if this.isWaypointsCollapsed (t "fleet-ops.component.route-list.expand")(t "fleet-ops.component.route-list.collapse") }}</span>
                 </div>
-                <div>{{@order.payload.middleWaypoints.length}} more waypoints</div>
+                <div>{{@order.payload.middleWaypoints.length}} {{t "fleet-ops.component.route-list.more-waypoints"}}</div>
             </div>
         </Button>
         {{#unless this.isWaypointsCollapsed}}

package/addon/components/settings-window.hbs

@@ -1,14 +1,14 @@
-<Overlay @onLoad={{this.onLoad}} @isOpen={{@isOpen}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{true}} @isMaximizable={{true}} @isMinimizable={{true}} @width="570px" as |overlay|>
-    <Overlay::Header @overlay={{overlay}} @title="FleetOps Settings" @onPressCancel={{@onPressCancel}}>
-        <Button @icon="save" @type="primary" @text={{if (media 'isMobile') "" "Save Changes"}} @onClick={{this.saveSettings}} @isLoading={{this.isSaving}} @disabled={{or this.isLoading this.isSaving}} />
+<Overlay @onLoad={{this.onLoad}} @isOpen={{@isOpen}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{true}} @isMaximizable={{true}} @isMinimizable={{true}} @width="600px" as |overlay|>
+    <Overlay::Header @overlay={{overlay}} @title={{t "fleet-ops.component.settings-window.title"}} @onPressCancel={{@onPressCancel}}>
+        <Button @icon="save" @type="primary" @text={{if (media 'isMobile') "" (t "fleet-ops.component.settings-window.save") }} @onClick={{this.saveSettings}} @isLoading={{this.isSaving}} @disabled={{or this.isLoading this.isSaving}} />
     </Overlay::Header>
 
     <Overlay::Body>
         <div class="px-5 py-4">
-            <InputGroup @name="Default Adhoc Ping Distance" @type="number" @value={{this.company.options.fleetops.adhoc_distance}} @wrapperClass="mb-0" @helpText="This setting determines the default distance in meters adhoc orders should ping drivers within vicinity of the order pickup point." />
+            <InputGroup @name={{t "fleet-ops.component.settings-window.name"}} @type="number" @value={{this.company.options.fleetops.adhoc_distance}} @wrapperClass="mb-0" @helpText={{t "fleet-ops.component.settings-window.name-text"}} />
             <div class="mt-2 px-3 py-1 rounded-lg border border-blue-600 bg-blue-100 flex items-center">
                 <FaIcon @icon="triangle-exclamation" class="text-blue-900 mr-1.5" />
-                <span class="text-blue-900 text-xs">Distance must be in meters</span>
+                <span class="text-blue-900 text-xs">{{t "fleet-ops.component.settings-window.message"}}</span>
             </div>
         </div>
     </Overlay::Body>

package/addon/components/settings-window.js

@@ -7,6 +7,7 @@ export default class SettingsWindowComponent extends Component {
     @service currentUser;
     @service store;
     @service notifications;
+    @service intl;
 
     @tracked isSaving = false;
     @tracked isLoading = false;
@@ -53,7 +54,7 @@ export default class SettingsWindowComponent extends Component {
         return this.company
             .save()
             .then(() => {
-                this.notifications.success('Settings successfully saved.');
+                this.notifications.success(this.intl.t('fleet-ops.component.settings-window.success-message'));
             })
             .finally(() => {
                 this.isSaving = false;