@fleetbase/fleetops-engine 0.4.0 → 0.4.2

package/addon/components/modals/vendor-details.hbs

@@ -11,15 +11,15 @@
             </div>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs dark:text-gray-100">
                 <div class="field-info-container">
-                    <div class="field-name">Sandbox</div>
+                    <div class="field-name">{{t "fleet-ops.component.modals.vendor-details.sandbox"}}</div>
                     <div class="field-value">{{if @options.vendor.sandbox "Yes" "No"}}</div>
                 </div>
                 <div class="field-info-container">
-                    <div class="field-name">Host</div>
+                    <div class="field-name">{{t "fleet-ops.component.modals.vendor-details.host"}}</div>
                     <div class="field-value">{{n-a @options.vendor.host}}</div>
                 </div>
                 <div class="field-info-container">
-                    <div class="field-name">Namespace</div>
+                    <div class="field-name">{{t "fleet-ops.component.modals.vendor-details.namespace"}}</div>
                     <div class="field-value">{{n-a @options.vendor.namespace}}</div>
                 </div>
                 {{#if (is-object @options.vendor.options)}}
@@ -34,41 +34,41 @@
         {{else}}
             <div class="grid grid-cols-3 md:grid-cols-2 gap-2 text-xs dark:text-gray-100">
                 <div class="field-info-container">
-                    <div class="field-name">Name</div>
+                    <div class="field-name">{{t "fleet-ops.common.name"}}</div>
                     <div class="field-value">{{n-a @options.vendor.name}}</div>
                 </div>
 
                 <div class="field-info-container">
-                    <div class="field-name">Email</div>
+                    <div class="field-name">{{t "fleet-ops.common.email"}}</div>
                     <div class="field-value">{{n-a @options.vendor.email}}</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 @options.vendor.phone}}</div>
                 </div>
 
                 <div class="field-info-container">
-                    <div class="field-name">Website URL</div>
+                    <div class="field-name">{{t "fleet-ops.common.website-url"}}</div>
                     <div class="field-value">{{n-a @options.vendor.website_url}}</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={{@options.vendor.country}} @showFlag={{true}} />
                     </div>
                 </div>
 
                 <div class="field-info-container">
-                    <div class="field-name">Status</div>
+                    <div class="field-name">{{t "fleet-ops.common.status"}}</div>
                     <div class="field-value">
                         <Badge @status={{@options.vendor.status}} />
                     </div>
                 </div>
 
                 <div class="field-info-container">
-                    <div class="field-name">Address</div>
+                    <div class="field-name">{{t "fleet-ops.common.address"}}</div>
                     <div class="field-value">{{n-a @options.vendor.address}}</div>
                 </div>
             </div>

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

@@ -8,7 +8,7 @@
                             <FaIcon @icon="handshake" @size="xl" class="text-blue-500" />
                         </div>
                         <div>
-                            <span class="text-gray-900 dark:text-gray-100 text-lg">Choose Integrated Vendor</span>
+                            <span class="text-gray-900 dark:text-gray-100 text-lg">{{t "fleet-ops.component.modals.vendor-form.choose-vendor"}}</span>
                         </div>
                     </button>
                     <button type="button" class="outline-none flex-1 rounded-lg bg-white dark:bg-gray-900 border-2 border-transparent px-4 py-2 flex items-center justify-center {{if (eq @options.action "create") 'border-blue-500'}}" {{on "click" (fn (mut @options.action) "create")}}>
@@ -16,7 +16,7 @@
                             <FaIcon @icon="building" @size="xl" class="text-blue-500" />
                         </div>
                         <div>
-                            <span class="text-gray-900 dark:text-gray-100 text-lg">Create Custom Vendor</span>
+                            <span class="text-gray-900 dark:text-gray-100 text-lg">{{t "fleet-ops.component.modals.vendor-form.create-vendor"}}</span>
                         </div>
                     </button>
                 </div>
@@ -39,38 +39,38 @@
 
             {{#if @options.selectedIntegratedVendor}}
                 <div class="mb-2">
-                    <label class="mb-2 block dark:text-gray-400 text-xs">Credentials</label>
+                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "fleet-ops.component.modals.vendor-form.credentials"}}</label>
                     {{#each @options.selectedIntegratedVendor.credential_params as |param|}}
-                        <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.integratedVendor.credentials param.key)}} @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}} />
+                        <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.integratedVendor.credentials param.key)}} @helpText={{concat (t "fleet-ops.component.modals.vendor-form.optionally") (smart-humanize param.key) (t "fleet-ops.component.modals.vendor-form.configure-vendor")}} />
                     {{/each}}
                 </div>
                 <div class="mb-2">
-                    <label class="mb-2 block dark:text-gray-400 text-xs">Options</label>
+                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "fleet-ops.component.modals.vendor-form.options"}}</label>
                     {{#each @options.selectedIntegratedVendor.option_params as |param|}}
                         {{#if param.options}}
                             <InputGroup @name={{smart-humanize param.key}}>
-                                <Select @value={{mut (get @options.integratedVendor.options param.key)}} @options={{param.options}} @optionValue={{param.optionValue}} @optionLabel={{param.optionLabel}} @humanize={{true}} @placeholder={{concat "Select " (smart-humanize param.key)}} @onSelect={{fn (mut (get @options.integratedVendor.options param.key))}} />
+                                <Select @value={{mut (get @options.integratedVendor.options param.key)}} @options={{param.options}} @optionValue={{param.optionValue}} @optionLabel={{param.optionLabel}} @humanize={{true}} @placeholder={{concat (t "fleet-ops.component.modals.vendor-form.select") (smart-humanize param.key)}} @onSelect={{fn (mut (get @options.integratedVendor.options param.key))}} />
                             </InputGroup>
                         {{else}}
-                            <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.integratedVendor.options param.key)}} @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}} />
+                            <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.integratedVendor.options param.key)}} @helpText={{concat (t "fleet-ops.component.modals.vendor-form.optionally") (smart-humanize param.key) (t "fleet-ops.component.modals.vendor-form.configure-vendor")}} />
                         {{/if}}
                     {{/each}}
                 </div>
                 <InputGroup @wrapperClass="mb-2">
-                    <Checkbox @value={{@options.integratedVendor.sandbox}} @label="Sandbox" @onToggle={{fn (mut @options.integratedVendor.sandbox)}} @alignItems="center" @labelClass="mb-0i" />
+                    <Checkbox @value={{@options.integratedVendor.sandbox}} @label={{t "fleet-ops.component.modals.vendor-form.sandbox"}} @onToggle={{fn (mut @options.integratedVendor.sandbox)}} @alignItems="center" @labelClass="mb-0i" />
                 </InputGroup>
                 <div>
                     <button type="button" class="btn-link text-xs outline-none text-blue-600 hover:text-blue-600 mb-3" {{on "click" @options.toggleAdvancedOptions}}>
                         {{#if @options.showAdvancedOptions}}
-                            <span>Hide Advanced</span>
+                            <span>{{t "fleet-ops.component.modals.vendor-form.hide-advanced"}}</span>
                         {{else}}
-                            <span>Show Advanced</span>
+                            <span>{{t "fleet-ops.component.modals.vendor-form.show-advanced"}}</span>
                         {{/if}}
                     </button>
                     {{#if @options.showAdvancedOptions}}
-                        <InputGroup @name="Custom Host" @value={{@options.integratedVendor.host}} @helpText="Optionally provide a custom host that should be used for this integration." />
-                        <InputGroup @name="Custom Namespace" @value={{@options.integratedVendor.namespace}} @helpText="Optionally provide a custom namespace or api version that should be used for the integration." />
-                        <InputGroup @name="Webhook URL" @value={{@options.integratedVendor.webhook_url}} @helpText="Integrated vendors will typically require this so that Fleetbase can receive activity updates on the order. Do not change unless you know what you are doing! Changing this may break your order updates!" />
+                        <InputGroup @name={{t "fleet-ops.component.modals.vendor-form.custom-host"}} @value={{@options.integratedVendor.host}} @helpText={{t "fleet-ops.component.modals.vendor-form.host-text"}} />
+                        <InputGroup @name={{t "fleet-ops.component.modals.vendor-form.custom-namespace"}} @value={{@options.integratedVendor.namespace}} @helpText={{t "fleet-ops.component.modals.vendor-form.namespace-text"}} />
+                        <InputGroup @name={{t "fleet-ops.component.modals.vendor-form.webhook"}} @value={{@options.integratedVendor.webhook_url}} @helpText={{t "fleet-ops.component.modals.vendor-form.webhook-text"}} />
                     {{/if}}
                 </div>
             {{/if}}
@@ -85,35 +85,35 @@
                     </div>
                 </div>
                 <div class="mb-2">
-                    <label class="mb-2 block dark:text-gray-400 text-xs">Credentials</label>
+                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "fleet-ops.component.modals.vendor-form.credentials"}}</label>
                     {{#if @options.isEditingCredentials}}
                         {{#each @options.vendor.provider_settings.credential_params as |param|}}
-                            <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.vendor.credentials param.key)}} @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}} />
+                            <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.vendor.credentials param.key)}} @helpText={{concat (t "fleet-ops.component.modals.vendor-form.optionally") (smart-humanize param.key) (t "fleet-ops.component.modals.vendor-form.configure-vendor")}} />
                         {{/each}}
                         <div class="my-4">
-                            <Button @text="Cancel credentials reset" @type="danger" @size="sm" @icon="times" @onClick={{@options.toggleCredentialsReset}} />
+                            <Button @text={{t "fleet-ops.component.modals.vendor-form.cancel-credentials"}} @type="danger" @size="sm" @icon="times" @onClick={{@options.toggleCredentialsReset}} />
                         </div>
                     {{else}}
                         <div>
                             <div class="rounded-md border border-blue-300 dark:border-blue-600 bg-blue-100 dark:bg-blue-500 text-blue-900 dark:text-white text-sm px-4 py-2 mb-4">
-                                <p class="mb-2">Sensitive credentials can only be reset, to update credentials you must re-enter the credentials.</p>
+                                <p class="mb-2">{{t "fleet-ops.component.modals.vendor-form.reset-message"}}</p>
                                 <Button @type="default" @size="xs" @icon="repeat" @text="Click here to reset" @onClick={{@options.toggleCredentialsReset}} />
                             </div>
                         </div>
                         {{#each @options.vendor.provider_settings.credential_params as |param|}}
-                            <InputGroup @name={{smart-humanize param.key}} @value="*********" @disabled="true" @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}} />
+                            <InputGroup @name={{smart-humanize param.key}} @value="*********" @disabled="true" @helpText={{concat (t "fleet-ops.component.modals.vendor-form.optionally") (smart-humanize param.key) (t "fleet-ops.component.modals.vendor-form.configure-vendor")}} />
                         {{/each}}
                     {{/if}}
                 </div>
                 <div class="mb-2">
-                     <label class="mb-2 block dark:text-gray-400 text-xs">Options</label>
+                     <label class="mb-2 block dark:text-gray-400 text-xs">{{t "fleet-ops.component.modals.vendor-form.options"}}</label>
                     {{#each @options.vendor.provider_settings.option_params as |param|}}
                         {{#if param.options}}
                             <InputGroup @name={{smart-humanize param.key}}>
-                                <Select @value={{mut (get @options.vendor.options param.key)}} @options={{param.options}} @optionValue={{param.optionValue}} @optionLabel={{param.optionLabel}} @humanize={{true}} @placeholder={{concat "Select " (smart-humanize param.key)}} @onSelect={{fn (mut (get @options.vendor.options param.key))}} />
+                                <Select @value={{mut (get @options.vendor.options param.key)}} @options={{param.options}} @optionValue={{param.optionValue}} @optionLabel={{param.optionLabel}} @humanize={{true}} @placeholder={{concat (t "fleet-ops.component.modals.vendor-form.select") (smart-humanize param.key)}} @onSelect={{fn (mut (get @options.vendor.options param.key))}} />
                             </InputGroup>
                         {{else}}
-                            <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.vendor.options param.key)}} @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}} />
+                            <InputGroup @name={{smart-humanize param.key}} @value={{mut (get @options.vendor.options param.key)}} @helpText={{concat (t "fleet-ops.component.modals.vendor-form.optionally") (smart-humanize param.key) (t "fleet-ops.component.modals.vendor-form.configure-vendor")}} />
                         {{/if}}
                     {{/each}}
                 </div>
@@ -123,43 +123,43 @@
                 <div>
                     <button type="button" class="btn-link text-xs outline-none text-blue-600 hover:text-blue-600 mb-3" {{on "click" @options.toggleAdvancedOptions}}>
                         {{#if @options.showAdvancedOptions}}
-                            <span>Hide Advanced</span>
+                            <span>{{t "fleet-ops.component.modals.vendor-form.hide-advanced"}}</span>
                         {{else}}
-                            <span>Show Advanced</span>
+                            <span>{{t "fleet-ops.component.modals.vendor-form.show-advanced"}}</span>
                         {{/if}}
                     </button>
                     {{#if @options.showAdvancedOptions}}
-                        <InputGroup @name="Custom Host" @value={{@options.vendor.host}} @helpText="Optionally provide a custom host that should be used for this integration." />
-                        <InputGroup @name="Custom Namespace" @value={{@options.vendor.namespace}} @helpText="Optionally provide a custom namespace or api version that should be used for the integration." />
-                        <InputGroup @name="Webhook URL" @value={{@options.vendor.webhook_url}} @helpText="Integrated vendors will typically require this so that Fleetbase can receive activity updates on the order. Do not change unless you know what you are doing! Changing this may break your order updates!" />
+                        <InputGroup @name={{t "fleet-ops.component.modals.vendor-form.custom-host"}} @value={{@options.vendor.host}} @helpText={{t "fleet-ops.component.modals.vendor-form.host-text"}} />
+                        <InputGroup @name={{t "fleet-ops.component.modals.vendor-form.custom-namespace"}} @value={{@options.vendor.namespace}} @helpText={{t "fleet-ops.component.modals.vendor-form.namespace-text"}} />
+                        <InputGroup @name={{t "fleet-ops.component.modals.vendor-form.webhook"}} @value={{@options.vendor.webhook_url}} @helpText={{t "fleet-ops.component.modals.vendor-form.webhook-text"}} />
                     {{/if}}
                 </div>
             {{else}}
                 <div class="grid lg:grid-cols-2 grid-cols-1 gap-2 text-xs dark:text-gray-100">
-                    <InputGroup @name="Name" @value={{@options.vendor.name}} @wrapperClass="mb-0" @helpText="The vendor's name, typically the name of a business." />
-                    <InputGroup @name="Email" @type="email" @value={{@options.vendor.email}} @wrapperClass="mb-0" @helpText="The vendor's email, this can be used to trigger emails to the vendor." />
-                    <InputGroup @name="Phone" @type="tel" @value={{@options.vendor.phone}} @wrapperClass="mb-0" @helpText="The vendor's phone #, this can be used to trigger SMS or messages to the vendor." />
-                    <InputGroup @name="Website" @value={{@options.vendor.website}} @wrapperClass="mb-0" @helpText="The vendor's website, optionally add the vendors website for reference." />
+                    <InputGroup @name={{t "fleet-ops.common.name"}} @value={{@options.vendor.name}} @wrapperClass="mb-0" @helpText={{t "fleet-ops.component.modals.vendor-form.name-text"}} />
+                    <InputGroup @name={{t "fleet-ops.common.email"}} @type="email" @value={{@options.vendor.email}} @wrapperClass="mb-0" @helpText={{t "fleet-ops.component.modals.vendor-form.email-text"}} />
+                    <InputGroup @name={{t "fleet-ops.common.phone"}} @type="tel" @value={{@options.vendor.phone}} @wrapperClass="mb-0" @helpText={{t "fleet-ops.component.modals.vendor-form.phone-text"}} />
+                    <InputGroup @name={{t "fleet-ops.common.website"}} @value={{@options.vendor.website}} @wrapperClass="mb-0" @helpText={{t "fleet-ops.component.modals.vendor-form.website-text"}} />
                     <InputGroup @wrapperClass="mb-0 col-span-2">
                         <div class="flex items-start justify-between">
                             <label>
-                                Address
+                                {{t "fleet-ops.common.address"}}
                             </label>
                             <div class="mb-1.5 flex flex-row">
                                 {{#if @options.vendor.has_place}}
-                                    <Button @type="default" @size="xs" @icon="edit" @text="Edit" @onClick={{@options.editAddress}} />
+                                    <Button @type="default" @size="xs" @icon="edit" @text={{t "fleet-ops.common.edit"}} @onClick={{@options.editAddress}} />
                                 {{/if}}
-                                <Button @type="default" @size="xs" @icon="plus" @text="New" @onClick={{@options.newAddress}} />
+                                <Button @type="default" @size="xs" @icon="plus" @text={{t "fleet-ops.common.new"}} @onClick={{@options.newAddress}} />
                             </div>
                         </div>
 
-                        <ModelSelect @modelName="place" @selectedModel={{@options.vendor.place}} @placeholder="Select Address" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{@options.selectAddress}} as |model|>
+                        <ModelSelect @modelName="place" @selectedModel={{@options.vendor.place}} @placeholder={{t "fleet-ops.component.modals.vendor-form.select-address"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{@options.selectAddress}} as |model|>
                             {{model.name}} - {{model.street1}}
                         </ModelSelect>
                     </InputGroup>
 
-                    <InputGroup @name="Country" @wrapperClass="mb-0">
-                        <CountrySelect class="w-full form-input form-select form-datalist" @value={{@options.vendor.country}} @onChange={{fn (mut @options.vendor.country)}} placeholder="Country" />
+                    <InputGroup @name={{t "fleet-ops.common.country"}} @wrapperClass="mb-0">
+                        <CountrySelect class="w-full form-input form-select form-datalist" @value={{@options.vendor.country}} @onChange={{fn (mut @options.vendor.country)}} placeholder={{t "fleet-ops.common.country"}} />
                     </InputGroup>
                 </div>
             {{/if}}

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

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

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

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

package/addon/components/order/header.hbs

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

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

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

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

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

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

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

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

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