@fleetbase/fleetops-engine 0.4.0 → 0.4.2

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

@@ -7,37 +7,37 @@
                         <div class="w-6">
                             <FaIcon @icon="user-plus" />
                         </div>
-                        <span>Create new customer</span>
+                        <span>{{t "fleet-ops.operations.orders.index.new.create-new-customer"}}</span>
                     </a>
                     <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.newFacilitator)}}>
                         <div class="w-6">
                             <FaIcon @icon="truck" />
                         </div>
-                        <span>Create new facilitator</span>
+                        <span>{{t "fleet-ops.operations.orders.index.new.create-new-facilitator"}}</span>
                     </a>
                     <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.createPlace)}}>
                         <div class="w-6">
                             <FaIcon @icon="map-pin" />
                         </div>
-                        <span>Create new place</span>
+                        <span>{{t "fleet-ops.operations.orders.index.new.create-new-place"}}</span>
                     </a>
                     <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.addEntity)}}>
                         <div class="w-6">
                             <FaIcon @icon="box" />
                         </div>
-                        <span>Add entity to order</span>
+                        <span>{{t "fleet-ops.operations.orders.index.new.add-order"}}</span>
                     </a>
                     <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.editMetaData)}}>
                         <div class="w-6">
                             <FaIcon @icon="table" />
                         </div>
-                        <span>Edit order metadata</span>
+                        <span>{{t "fleet-ops.operations.orders.index.new.edit-order"}}</span>
                     </a>
                     <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.addCustomField)}}>
                         <div class="w-6">
                             <FaIcon @icon="edit" />
                         </div>
-                        <span>Add custom field</span>
+                        <span>{{t "fleet-ops.operations.orders.index.new.add-field"}}</span>
                     </a>
                 </div>
             </div>
@@ -50,19 +50,19 @@
         <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-2">
                 <div class="input-group">
-                    <InputLabel @labelText="Order Type" @helpText="Selecting the order type will tell fleetbase what order configurations to use." />
-                    <Select class="w-full" @options={{this.types}} @value={{this.order.type}} @optionLabel="name" @optionValue="key" @onSelect={{this.setConfig}} @placeholder="Select Order Type" />
+                    <InputLabel @labelText={{t "fleet-ops.operations.orders.index.new.order-type"}} @helpText={{t "fleet-ops.operations.orders.index.new.order-type-help-text"}} />
+                    <Select class="w-full" @options={{this.types}} @value={{this.order.type}} @optionLabel="name" @optionValue="key" @onSelect={{this.setConfig}} @placeholder={{t "fleet-ops.operations.orders.index.new.order-type-placeholder"}} />
                 </div>
 
-                <InputGroup @name="Internal ID" @value={{this.order.internal_id}} @helpText="Use this field to optionally set a custom identifier or internal identifier for the order." />
+                <InputGroup @name={{t "fleet-ops.operations.orders.index.new.internal-id"}} @value={{this.order.internal_id}} @helpText={{t "fleet-ops.operations.orders.index.new.internal-id-help-text"}} />
 
                 <InputGroup>
-                    <InputLabel @labelText="Schedule" @helpText="The date and time the order will be dispatched. If no driver is assigned at time of dispatch, the dispatch will fail. If the order is Ad-Hoc the order will be pinged to drivers in vicinity of pickup." />
+                    <InputLabel @labelText={{t "fleet-ops.operations.orders.index.new.schedule"}} @helpText={{t "fleet-ops.operations.orders.index.new.schedule-help-text"}} />
                     <DateTimeInput class="form-input" @value={{this.order.scheduled_at}} @minDate={{format-date (now) "yyyy-MM-dd" }} @minTime={{format-date (now) "HH:mm" }} @onUpdate={{this.scheduleOrder}} @disabled={{this.order.dispatched}} />
                 </InputGroup>
 
-                <InputGroup @name="Customer" @helpText="Optionally assign the customer of this order. If it's a new customer, use the 'New Customer' button above.">
-                    <ModelSelect @modelName="customer" @selectedModel={{this.order.customer}} @placeholder="Select Customer" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @allowClear={{true}} @onChange={{this.setOrderCustomer}} as |model|>
+                <InputGroup @name={{t "fleet-ops.operations.orders.index.new.customer"}} @helpText={{t "fleet-ops.operations.orders.index.new.customer-help-text"}}>
+                    <ModelSelect @modelName="customer" @selectedModel={{this.order.customer}} @placeholder={{t "fleet-ops.operations.orders.index.new.customer-placeholder"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @allowClear={{true}} @onChange={{this.setOrderCustomer}} as |model|>
                         <div class="flex items-center">
                             <div class="w-7">
                                 <FaIcon @icon={{if model.isVendor "warehouse" "user" }} />
@@ -74,8 +74,8 @@
                     </ModelSelect>
                 </InputGroup>
 
-                <InputGroup @name="Facilitator" @helpText="Optionally assign a facilitator for this order, a facilitator can be a 3rd party subcontractor or service that will facilitate the transport of this order.">
-                    <ModelSelect @modelName="facilitator" @selectedModel={{this.order.facilitator}} @placeholder="Select Facilitator" @triggerClass="form-select form-input" @allowClear={{true}} @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.setOrderFacilitator}} as |model|>
+                <InputGroup @name={{t "fleet-ops.operations.orders.index.new.facilitator"}} @helpText={{t "fleet-ops.operations.orders.index.new.facilitator-help-text"}}>
+                    <ModelSelect @modelName="facilitator" @selectedModel={{this.order.facilitator}} @placeholder={{t "fleet-ops.operations.orders.index.new.facilitator-placeholder"}} @triggerClass="form-select form-input" @allowClear={{true}} @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.setOrderFacilitator}} as |model|>
                         <div class="flex items-center">
                             <div class="w-7">
                                 {{#if model.isIntegratedVendor}}
@@ -92,13 +92,13 @@
                 </InputGroup>
 
                 {{#if (and this.order.facilitator.isIntegratedVendor this.order.facilitator.service_types.length)}}
-                    <InputGroup @name="Service Type" @helpText={{concat "Select the service type you wish to use for " this.order.facilitator.name "."}}>
-                        <Select class="w-full" @options={{this.order.facilitator.service_types}} @value={{this.integratedVendorServiceType}} @optionLabel="description" @optionValue="key" @onSelect={{this.selectIntegratedServiceType}} @placeholder="Select Service Type" />
+                    <InputGroup @name={{t "fleet-ops.operations.orders.index.new.service-type"}} @helpText={{concat (t "fleet-ops.operations.orders.index.new.service-type-help-text") this.order.facilitator.name "."}}>
+                        <Select class="w-full" @options={{this.order.facilitator.service_types}} @value={{this.integratedVendorServiceType}} @optionLabel="description" @optionValue="key" @onSelect={{this.selectIntegratedServiceType}} @placeholder={{t "fleet-ops.operations.orders.index.new.service-type-placeholder"}} />
                     </InputGroup>
                 {{/if}}
 
-                <InputGroup @name="Assign Driver" @helpText="Assign the driver this order will be dispatched to.">
-                    <ModelSelect @modelName="driver" @selectedModel={{this.order.driver_assigned}} @query={{@options.driversQuery}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @allowClear={{true}} @disabled={{this.isUsingIntegratedVendor}} @onChange={{fn (mut this.order.driver_assigned)}} as |model|>
+                <InputGroup @name={{t "fleet-ops.operations.orders.index.new.assign-driver"}} @helpText={{t "fleet-ops.operations.orders.index.new.assign-driver-help-text"}}>
+                    <ModelSelect @modelName="driver" @selectedModel={{this.order.driver_assigned}} @query={{@options.driversQuery}} @placeholder={{t "fleet-ops.operations.orders.index.new.assign-driver-placeholder"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @allowClear={{true}} @disabled={{this.isUsingIntegratedVendor}} @onChange={{fn (mut this.order.driver_assigned)}} as |model|>
                         <div class="flex items-center">
                             <div class="w-7">
                                 <FaIcon @icon="id-card-alt" />
@@ -120,36 +120,36 @@
 
                 {{#if (and this.order.pod_required (not this.isUsingIntegratedVendor))}}
                     <InputGroup>
-                        <InputLabel @labelText="Proof of Delivery" @helpText="Select the type of proof of delivery to require. This can either be QR code scan or Signature method." />
-                        <Select class="w-full" @options={{this.podOptions}} @value={{this.order.pod_method}} @onSelect={{fn (mut this.order.pod_method)}} @placeholder="Select Proof of Delivery Method" />
+                        <InputLabel @labelText={{t "fleet-ops.operations.orders.index.new.proof-delivery"}} @helpText={{t "fleet-ops.operations.orders.index.new.proof-delivery-help-text"}} />
+                        <Select class="w-full" @options={{this.podOptions}} @value={{this.order.pod_method}} @onSelect={{fn (mut this.order.pod_method)}} @placeholder={{t "fleet-ops.operations.orders.index.new.proof-delivery-placeholder"}} />
                     </InputGroup>
                 {{/if}}
 
                 {{#if this.order.adhoc}}
                     <div>
-                        <InputGroup @name="Adhoc Ping Distance" @type="number" @value={{this.order.adhoc_distance}} @wrapperClass="mb-0" @helpText="This setting determines the adhoc distance to ping for this order, if unset it will fallback to the default setting." />
+                        <InputGroup @name={{t "fleet-ops.operations.orders.index.new.adhoc-ping"}} @type="number" @value={{this.order.adhoc_distance}} @wrapperClass="mb-0" @helpText={{t "fleet-ops.operations.orders.index.new.adhoc-ping-help-text"}} />
                         <div class="mt-2 px-3 py-1 rounded-lg border border-blue-600 bg-blue-100 flex items-center">
                             <FaIcon @icon="triangle-exclamation" class="text-blue-900 mr-1.5" />
-                            <span class="text-blue-900 text-xs">Distance must be in meters</span>
+                            <span class="text-blue-900 text-xs">{{t "fleet-ops.operations.orders.index.new.adhoc-ping-message"}}</span>
                         </div>
                     </div>
                 {{/if}}
 
                 <div class="lg:col-span-2">
                     <InputGroup @wrapperClass="pt-2">
-                        <Toggle @label="Ad-Hoc" @wrapperClass="justify-start-i" @isToggled={{this.order.adhoc}} @onToggle={{this.toggleAdhoc}} @disabled={{this.isUsingIntegratedVendor}} @helpText="Toggling Ad-Hoc will enable the order to intelligently ping drivers within the order pickup vicinity about the order allowing the first available driver to accept the order. This is an alternative to manually assigning the driver for real-time orders." />
+                        <Toggle @label={{t "fleet-ops.operations.orders.index.new.ad-hoc"}} @wrapperClass="justify-start-i" @isToggled={{this.order.adhoc}} @onToggle={{this.toggleAdhoc}} @disabled={{this.isUsingIntegratedVendor}} @helpText={{t "fleet-ops.operations.orders.index.new.ad-hoc-help-text"}} />
                     </InputGroup>
                 </div>
 
                 <div class="lg:col-span-2">
                     <InputGroup @wrapperClass="pt-1">
-                        <Toggle @label="Dispatch Immediately" @wrapperClass="justify-start-i" @isToggled={{this.order.dispatched}} @onToggle={{fn (mut this.order.dispatched)}} @disabled={{this.isUsingIntegratedVendor}} @helpText="Toggling dispatch will dispatch this order immediatley following creation." />
+                        <Toggle @label={{t "fleet-ops.operations.orders.index.new.dispatch"}} @wrapperClass="justify-start-i" @isToggled={{this.order.dispatched}} @onToggle={{fn (mut this.order.dispatched)}} @disabled={{this.isUsingIntegratedVendor}} @helpText={{t "fleet-ops.operations.orders.index.new.dispatch-help-text"}} />
                     </InputGroup>
                 </div>
 
                 <div class="lg:col-span-2">
                     <InputGroup @wrapperClass="pt-1">
-                        <Toggle @label="Require Proof of Delivery" @wrapperClass="justify-start-i" @isToggled={{this.order.pod_required}} @onToggle={{this.toggleProofOfDelivery}} @helpText="Toggling this will require driver to complete a proof of delivery." />
+                        <Toggle @label={{t "fleet-ops.operations.orders.index.new.require-proof"}} @wrapperClass="justify-start-i" @isToggled={{this.order.pod_required}} @onToggle={{this.toggleProofOfDelivery}} @helpText={{t "fleet-ops.operations.orders.index.new.require-proof-help-text"}} />
                     </InputGroup>
                 </div>
             </div>
@@ -157,7 +157,7 @@
 
         {{#if this.typeConfig}}
             {{#each this.groupedMetaFields as |group|}}
-                <ContentPanel @title={{if group.value (humanize group.value) "Additional Details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{if group.value (humanize group.value) (t "fleet-ops.operations.orders.index.new.additional-details")}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                     <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-2">
                         {{#each group.items as |metaField|}}
                             <div class="input-group {{if (eq metaField.type "boolean") "col-span-2 items-center" ""}}">
@@ -169,7 +169,7 @@
                                     {{#if metaField.removable}}
                                         <div class="flex items-center pr-1">
                                             <a href="javascript:;" {{on "click" (fn this.removeMeta metaField)}}>
-                                                Remove
+                                                {{t "fleet-ops.common.remove"}}
                                             </a>
                                         </div>
                                     {{/if}}
@@ -183,7 +183,7 @@
             {{/each}}
         {{/if}}
 
-        <ContentPanel @title="Metadata" @open={{this.order.meta.length}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800" @actionButtons={{this.metadataButtons}}>
+        <ContentPanel @title={{t "fleet-ops.operations.orders.index.new.metadata"}} @open={{this.order.meta.length}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800" @actionButtons={{this.metadataButtons}}>
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-2">
                 {{#each this.order.meta as |metaField index|}}
                     <InputGroup>
@@ -199,21 +199,21 @@
             </div>
         </ContentPanel>
 
-        <ContentPanel @title="Route" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+        <ContentPanel @title={{t "fleet-ops.operations.orders.index.new.route"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
             <div class="flex flex-row justify-between mb-4">
                 <div class="flex">
-                    <Toggle @isToggled={{this.isMultipleDropoffOrder}} @onToggle={{this.toggleMultiDropOrder}} @label="Multiple Dropoff's" />
+                    <Toggle @isToggled={{this.isMultipleDropoffOrder}} @onToggle={{this.toggleMultiDropOrder}} @label={{t "fleet-ops.operations.orders.index.new.route-label"}} />
                 </div>
                 <div class="flex flex-1 justify-end space-x-2">
                     {{#if this.isMultipleDropoffOrder}}
-                        <Button @type="magic" @icon="magic" @text="Optimize Route" @size="sm" @onClick={{this.optimizeRoute}} @helpText="Fleetbase will automatically optimize the route." @disabled={{lt this.waypoints.length 3}} @isLoading={{this.isOptimizingRoute}} />
-                        <Button @icon="map-marked-alt" @text="Add Waypoint" @size="sm" @onClick={{this.addWaypoint}} @helpText="Use the `Add Waypoint` button to add more stops for this order. The Fleetbase routing engine will automatically optimize the route as each stop is added or removed." />
+                        <Button @type="magic" @icon="magic" @text={{t "fleet-ops.operations.orders.index.new.optimize-route"}} @size="sm" @onClick={{this.optimizeRoute}} @helpText={{t "fleet-ops.operations.orders.index.new.optimize-route-help-text"}} @disabled={{lt this.waypoints.length 3}} @isLoading={{this.isOptimizingRoute}} />
+                        <Button @icon="map-marked-alt" @text={{t "fleet-ops.operations.orders.index.new.add-waypoint"}} @size="sm" @onClick={{this.addWaypoint}} @helpText={{t "fleet-ops.operations.orders.index.new.add-waypoint-help-text"}} />
                     {{/if}}
                 </div>
             </div>
 
             {{#if this.isMultipleDropoffOrder}}
-                <DragSortList class="overflow-visible" @items={{this.waypoints}} @dragEndAction={{this.sortWaypoints}} as |waypoint index|>
+                <DragSortList class="multi-drop-select-container overflow-visible" @items={{this.waypoints}} @dragEndAction={{this.sortWaypoints}} as |waypoint index|>
                     <div id={{concat "waypoint_" (add index 1)}} class="border rounded-md px-3 py-2 shadow-sm border-gray-300 dark:border-gray-900 mb-3">
                         <div class="flex items-center justify-between">
                             <div class="flex items-center justify-between cursor-move">
@@ -224,17 +224,17 @@
                             </div>
 
                             <div class="flex-1 px-3">
-                                <ModelSelect @modelName="place" @selectedModel={{waypoint.place}} @placeholder={{concat "Select Waypoint " (add index 1)}} @triggerClass="form-select form-input truncate max-w-300px" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=this.userLatitude longitude=this.userLongitude}} @renderInPlace={{true}} @onChange={{fn this.setWaypointPlace index}} as |model|>
+                                <ModelSelect @modelName="place" @selectedModel={{waypoint.place}} @placeholder={{concat (t "fleet-ops.operations.orders.index.new.select-waypoint-placeholder")" " (add index 1)}} @triggerClass="form-select form-input truncate max-w-300px" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=this.userLatitude longitude=this.userLongitude}} @renderInPlace={{true}} @onChange={{fn this.setWaypointPlace index}} as |model|>
                                     {{model.address}}
                                 </ModelSelect>
 
                                 {{#if (and this.isUsingIntegratedVendor (is-not-facilitator-supported-place this.order.facilitator waypoint.place))}}
-                                    <InfoBlock class="my-2 px-4 py-1.5 danger" @blockClass="flex flex-row items-center" @text={{concat this.order.facilitator.name " is not able to support this location."}} />
+                                    <InfoBlock class="my-2 px-4 py-1.5 danger" @blockClass="flex flex-row items-center" @text={{concat this.order.facilitator.name (t "fleet-ops.operations.orders.index.new.infoblock-text")}} />
                                 {{/if}}
 
                                 {{#if waypoint.place.hasInvalidCoordinates}}
                                     <div class="leading-5 text-sm text-red-400 mt-2">
-                                        <FaIcon @icon="exclamation-triangle" class="mr-1" /> Invalid coordinates!
+                                        <FaIcon @icon="exclamation-triangle" class="mr-1" /> {{t "fleet-ops.operations.orders.index.new.invalid-coordinates"}}
                                     </div>
                                 {{/if}}
                             </div>
@@ -252,7 +252,7 @@
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-2 text-xs dark:text-gray-100">
                     <InputGroup>
                         <div class="flex items-center justify-between">
-                            <label>Pickup</label>
+                            <label>{{t "fleet-ops.operations.orders.index.new.pickup"}}</label>
 
                             <div class="flex-row space-x-2 pr-0.5">
                                 {{#if this.payload.pickup}}
@@ -266,24 +266,24 @@
                             </div>
                         </div>
 
-                        <ModelSelect @modelName="place" @selectedModel={{this.payload.pickup}} @placeholder="Select Pickup" @triggerClass="form-select form-input" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=this.userLatitude longitude=this.userLongitude}} @renderInPlace={{true}} @onChange={{fn this.setPayloadPlace "pickup" }} as |model|>
+                        <ModelSelect @modelName="place" @selectedModel={{this.payload.pickup}} @placeholder={{t "fleet-ops.operations.orders.index.new.select-pickup"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=this.userLatitude longitude=this.userLongitude}} @renderInPlace={{true}} @onChange={{fn this.setPayloadPlace "pickup" }} as |model|>
                             {{model.address}}
                         </ModelSelect>
 
                         {{#if (and this.isUsingIntegratedVendor (is-not-facilitator-supported-place this.order.facilitator this.payload.pickup))}}
-                            <InfoBlock class="my-2 px-4 py-1.5 danger" @blockClass="flex flex-row items-center" @text={{concat this.order.facilitator.name " is not able to support this location."}} />
+                            <InfoBlock class="my-2 px-4 py-1.5 danger" @blockClass="flex flex-row items-center" @text={{concat this.order.facilitator.name (t "fleet-ops.operations.orders.index.new.infoblock-text")}} />
                         {{/if}}
 
                         {{#if this.payload.pickup.hasInvalidCoordinates}}
                             <div class="leading-5 text-sm text-red-400 mt-2">
-                                <FaIcon @icon="exclamation-triangle" class="mr-1" /> Invalid coordinates!
+                                <FaIcon @icon="exclamation-triangle" class="mr-1" /> {{t "fleet-ops.operations.orders.index.new.invalid-coordinates"}}
                             </div>
                         {{/if}}
                     </InputGroup>
 
                     <InputGroup>
                         <div class="flex items-center justify-between">
-                            <label>Dropoff</label>
+                            <label>{{t "fleet-ops.operations.orders.index.new.dropoff"}}</label>
 
                             <div class="flex-row space-x-2 pr-0.5">
                                 {{#if this.payload.dropoff}}
@@ -297,41 +297,41 @@
                             </div>
                         </div>
 
-                        <ModelSelect @modelName="place" @selectedModel={{this.payload.dropoff}} @placeholder="Select Dropoff" @triggerClass="form-select form-input" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=this.userLatitude longitude=this.userLongitude}} @renderInPlace={{true}} @onChange={{fn this.setPayloadPlace "dropoff" }} as |model|>
+                        <ModelSelect @modelName="place" @selectedModel={{this.payload.dropoff}} @placeholder={{t "fleet-ops.operations.orders.index.new.select-dropoff"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=this.userLatitude longitude=this.userLongitude}} @renderInPlace={{true}} @onChange={{fn this.setPayloadPlace "dropoff" }} as |model|>
                             {{model.address}}
                         </ModelSelect>
 
                         {{#if (and this.isUsingIntegratedVendor (is-not-facilitator-supported-place this.order.facilitator this.payload.dropoff))}}
-                            <InfoBlock class="my-2 px-4 py-1.5 danger" @blockClass="flex flex-row items-center" @text={{concat this.order.facilitator.name " is not able to support this location."}} />
+                            <InfoBlock class="my-2 px-4 py-1.5 danger" @blockClass="flex flex-row items-center" @text={{concat this.order.facilitator.name (t "fleet-ops.operations.orders.index.new.infoblock-text")}} />
                         {{/if}}
 
                         {{#if this.payload.dropoff.hasInvalidCoordinates}}
                             <div class="leading-5 text-sm text-red-400 mt-2">
-                                <FaIcon @icon="exclamation-triangle" class="mr-1" /> Invalid coordinates!
+                                <FaIcon @icon="exclamation-triangle" class="mr-1" /> {{t "fleet-ops.operations.orders.index.new.invalid-coordinates"}}
                             </div>
                         {{/if}}
                     </InputGroup>
 
                     <InputGroup>
                         <div class="flex items-center justify-between">
-                            <label>Return</label>
+                            <label>{{t "fleet-ops.operations.orders.index.new.return"}}</label>
 
                             {{#if this.payload.return}}
-                                <a href="javascript:;" {{on "click" (fn this.editPlace this.payload.return)}}>Edit Address</a>
+                                <a href="javascript:;" {{on "click" (fn this.editPlace this.payload.return)}}>{{t "fleet-ops.operations.orders.index.new.edit-address"}}</a>
                             {{/if}}
                         </div>
 
-                        <ModelSelect @modelName="place" @selectedModel={{this.payload.return}} @placeholder="Select Return" @triggerClass="form-select form-input" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=this.userLatitude longitude=this.userLongitude}} @renderInPlace={{true}} @onChange={{fn this.setPayloadPlace "return" }} as |model|>
+                        <ModelSelect @modelName="place" @selectedModel={{this.payload.return}} @placeholder={{t "fleet-ops.operations.orders.index.new.select-return"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=this.userLatitude longitude=this.userLongitude}} @renderInPlace={{true}} @onChange={{fn this.setPayloadPlace "return" }} as |model|>
                             {{model.address}}
                         </ModelSelect>
 
                         {{#if (and this.isUsingIntegratedVendor (is-not-facilitator-supported-place this.order.facilitator this.payload.return))}}
-                            <InfoBlock class="my-2 px-4 py-1.5 danger" @blockClass="flex flex-row items-center" @text={{concat this.order.facilitator.name " is not able to support this location."}} />
+                            <InfoBlock class="my-2 px-4 py-1.5 danger" @blockClass="flex flex-row items-center" @text={{concat this.order.facilitator.name (t "fleet-ops.operations.orders.index.new.infoblock-text")}} />
                         {{/if}}
 
                         {{#if this.payload.return.hasInvalidCoordinates}}
                             <div class="leading-5 text-sm text-red-400 mt-2">
-                                <FaIcon @icon="exclamation-triangle" class="mr-1" /> Invalid coordinates!
+                                <FaIcon @icon="exclamation-triangle" class="mr-1" /> {{t "fleet-ops.operations.orders.index.new.invalid-coordinates"}}
                             </div>
                         {{/if}}
                     </InputGroup>
@@ -339,9 +339,9 @@
             {{/if}}
         </ContentPanel>
 
-        <ContentPanel @title="Payload / Entities" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+        <ContentPanel @title={{t "fleet-ops.operations.orders.index.new.payload-entities"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
             {{#if this.isNotCsvImportedOrder}}
-                <Button @wrapperClass="mb-4" @icon="plus" @iconPrefix="fas" @text="Add Item to Order" @size="sm" @onClick={{this.addEntity}} />
+                <Button @wrapperClass="mb-4" @icon="plus" @iconPrefix="fas" @text={{t "fleet-ops.operations.orders.index.new.add-item-order"}} @size="sm" @onClick={{this.addEntity}} />
             {{/if}}
             {{#if this.isCsvImportedOrder}}
                 <div class="space-y-2">
@@ -349,11 +349,11 @@
                         <div class="rounded-md border border-gray-200 dark:border-gray-900 p-3">
                             <div class="mb-3 flex justify-between">
                                 <div class="w-3/4">
-                                    <div class="dark:text-gray-100 text-sm">Items drop at</div>
+                                    <div class="dark:text-gray-100 text-sm">{{t "fleet-ops.operations.orders.index.new.items-drop"}}</div>
                                     <h4 class="font-bold dark:text-gray-100">{{group.waypoint.place.address}}</h4>
                                 </div>
                                 <div>
-                                    <Button @icon="plus" @iconPrefix="fas" @text="Add Item" @size="sm" @onClick={{fn this.addEntity group.importId}} />
+                                    <Button @icon="plus" @iconPrefix="fas" @text={{t "fleet-ops.operations.orders.index.new.add-item-button"}} @size="sm" @onClick={{fn this.addEntity group.importId}} />
                                 </div>
                             </div>
                             <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-2">
@@ -365,12 +365,12 @@
                                             </div>
                                             <div class="space-y-2">
                                                 <div>
-                                                    <Input @value={{entity.name}}  @type="text" class="w-full form-input form-input-sm" placeholder="Name" />
+                                                    <Input @value={{entity.name}}  @type="text" class="w-full form-input form-input-sm" placeholder={{t "fleet-ops.common.name"}} />
                                                 </div>
                                                 <div>
-                                                    <Input @value={{entity.sku}}  @type="text" class="w-full form-input form-input-sm" placeholder="SKU" />
+                                                    <Input @value={{entity.sku}}  @type="text" class="w-full form-input form-input-sm" placeholder={{t "fleet-ops.operations.orders.index.new.sku"}} />
                                                 </div>
-                                                <Button @icon="pencil" @text="Edit Item" @size="sm" @onClick={{fn this.editEntity entity}} />
+                                                <Button @icon="pencil" @text={{t "fleet-ops.operations.orders.index.new.edit-item"}} @size="sm" @onClick={{fn this.editEntity entity}} />
                                             </div>
                                             <div class="absolute top-0 right-0 p-2">
                                                 <Button @icon="times" @iconPrefix="fas" @type="danger" @size="xs" @onClick={{fn this.removeEntity entity}} @wrapperClass={{if (eq index 0) "invisible"}} />
@@ -392,16 +392,16 @@
                                 </div>
                                 <div class="space-y-2">
                                     <div>
-                                        <Input @value={{entity.name}}  @type="text" class="w-full form-input form-input-sm" placeholder="Name" />
+                                        <Input @value={{entity.name}}  @type="text" class="w-full form-input form-input-sm" placeholder={{t "fleet-ops.common.name"}} />
                                     </div>
                                     <div>
-                                        <Input @value={{entity.sku}}  @type="text" class="w-full form-input form-input-sm" placeholder="SKU" />
+                                        <Input @value={{entity.sku}}  @type="text" class="w-full form-input form-input-sm" placeholder={{t "fleet-ops.operations.orders.index.new.sku"}}/>
                                     </div>
                                     {{#if this.waypoints.length}}
                                         <select class="form-select w-full form-input-sm" {{on "change" (fn
                                                                 this.setEntityDestionation index)}}>
                                             <option selected disabled>
-                                                Select Desintation
+                                                {{t "fleet-ops.operations.orders.index.new.select-destination"}}
                                             </option>
                                             {{#each this.waypoints as |waypoint|}}
                                                 {{#if waypoint.place}}
@@ -413,7 +413,7 @@
                                             {{/each}}
                                         </select>
                                     {{/if}}
-                                    <Button @icon="pencil" @text="Edit Item" @size="sm" @onClick={{fn this.editEntity entity}} />
+                                    <Button @icon="pencil" @text={{t "fleet-ops.operations.orders.index.new.edit-item"}} @size="sm" @onClick={{fn this.editEntity entity}} />
                                 </div>
                                 <div class="absolute top-0 right-0 p-2">
                                     <Button @icon="times" @iconPrefix="fas" @type="danger" @size="xs" @onClick={{fn this.removeEntity entity}} @wrapperClass={{if (eq index 0) "invisible"}} />
@@ -425,29 +425,29 @@
             {{/if}}
         </ContentPanel>
 
-        <ContentPanel @title="Service" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
-            <Toggle @label="Apply service rate" @wrapperClass="justify-start-i mb-4" @isToggled={{this.servicable}} @onToggle={{this.checkServiceRates}} @disabled={{this.isNotServicable}} @helpText="Select a defined service rate to generate real time service quotations to apply to this order." />
+        <ContentPanel @title={{t "fleet-ops.common.service"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <Toggle @label={{t "fleet-ops.operations.orders.index.new.apply-service-rate"}} @wrapperClass="justify-start-i mb-4" @isToggled={{this.servicable}} @onToggle={{this.checkServiceRates}} @disabled={{this.isNotServicable}} @helpText={{t "fleet-ops.operations.orders.index.new.service-help-text"}} />
 
             {{#if this.servicable}}
-                <ContentPanel @title="Service Quotes" @open={{true}} @pad={{true}} @wrapperClass="mt-6" @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "fleet-ops.operations.orders.index.new.service-quotes"}} @open={{true}} @pad={{true}} @wrapperClass="mt-6" @panelBodyClass="bg-white dark:bg-gray-800">
                     {{#unless this.isUsingIntegratedVendor}}
                         <div class="input-group mb-2i">
-                            <InputLabel @labelText="Select Service Rate" @helpText="Select which service rate to fetch quotes for." />
+                            <InputLabel @labelText={{t "fleet-ops.operations.orders.index.new.select-service-rate"}} @helpText={{t "fleet-ops.operations.orders.index.new.service-quotes-help-text"}} />
 
-                            <Select class="w-full" @options={{this.serviceRates}} @value={{this.selectedServiceRate}} @optionLabel="service_name" @optionValue="uuid" @onSelect={{this.getQuotes}} @placeholder="Select Service Rate" />
+                            <Select class="w-full" @options={{this.serviceRates}} @value={{this.selectedServiceRate}} @optionLabel="service_name" @optionValue="uuid" @onSelect={{this.getQuotes}} @placeholder={{t "fleet-ops.operations.orders.index.new.select-service-rate"}} />
                         </div>
                     {{/unless}}
 
                     <div class="flex flex-row justify-end">
-                        <Button @icon="retweet" @text="Refresh" @disabled={{this.isFetchingQuotes}} @onClick={{this.getQuotes}} />
+                        <Button @icon="retweet" @text={{t "fleet-ops.operations.orders.index.new.refresh-button"}} @disabled={{this.isFetchingQuotes}} @onClick={{this.getQuotes}} />
                     </div>
 
                     {{#if this.isFetchingQuotes}}
                         <div class="flex items-center justify-center py-5">
-                            <Spinner class="text-sm dark:text-gray-100 flex flex-row items-center" @iconClass="mr-2" @loadingMessage="Loading service quotes..." />
+                            <Spinner class="text-sm dark:text-gray-100 flex flex-row items-center" @iconClass="mr-2" @loadingMessage={{t "fleet-ops.operations.orders.index.new.loading-message"}} />
                         </div>
                     {{else}}
-                        <InfoBlock class="my-3" @text="Select a real time service quote to apply to this order. Once a quote is applied to the order, it will become a purchased rate. Transactions will be tracked within the Fleetbase ledger." />
+                        <InfoBlock class="my-3" @text={{t "fleet-ops.operations.orders.index.new.info-text"}} />
 
                         <div class="radio-group-condensed -space-y-px">
                             {{#each this.serviceQuotes as |serviceQuote index|}}
@@ -463,7 +463,7 @@
                                         <table class="table table-fixed flex-1">
                                             <thead>
                                                 <tr>
-                                                    <th class="text-left">Breakdown</th>
+                                                    <th class="text-left">{{t "fleet-ops.operations.orders.index.new.breakdown"}}</th>
                                                     <th></th>
                                                 </tr>
                                             </thead>
@@ -480,7 +480,7 @@
                                                 {{/each}}
                                                 <tr class="border-b-0">
                                                     <td class="border-b-0">
-                                                        <span class="font-semibold">Total</span>
+                                                        <span class="font-semibold">{{t "fleet-ops.common.total"}}</span>
                                                     </td>
                                                     <td class="border-b-0">
                                                         <span>{{format-currency serviceQuote.amount serviceQuote.currency}}</span>
@@ -491,7 +491,7 @@
                                     </div>
                                 </div>
                             {{else}}
-                                <InfoBlock class="my-2 px-4 py-1.5 warning" @blockClass="flex flex-row items-center" @text={{if this.payloadCoordinates.length "No service quotes." "Input order route to view service quotes."}} />
+                                <InfoBlock class="my-2 px-4 py-1.5 warning" @blockClass="flex flex-row items-center" @text={{if this.payloadCoordinates.length (t "fleet-ops.operations.orders.index.new.no-service-info-text") (t "fleet-ops.operations.orders.index.new.input-order-info-text")}} />
                             {{/each}}
                         </div>
                     {{/if}}
@@ -499,8 +499,8 @@
             {{/if}}
         </ContentPanel>
 
-        <ContentPanel @title="Notes" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
-            <Textarea @value={{this.order.notes}} class="form-input w-full" placeholder="Enter order notes here...." rows={{4}} />
+        <ContentPanel @title={{t "fleet-ops.operations.orders.index.new.notes-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <Textarea @value={{this.order.notes}} class="form-input w-full" placeholder={{t "fleet-ops.operations.orders.index.new.notes-placeholder"}} rows={{4}} />
         </ContentPanel>
     </Overlay::Body>
 </Overlay>