@fleetbase/fleetops-engine 0.4.0 → 0.4.2

package/addon/components/vendor-form-panel/create-form.hbs

@@ -1,12 +1,12 @@
 <div class="space-y-4">
-    <ContentPanel @title="Setup" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
-        <InputGroup @name="Select vendor type">
+    <ContentPanel @title={{t "fleet-ops.component.vendor-form-panel.create-form.title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+        <InputGroup @name={{t "fleet-ops.component.vendor-form-panel.create-form.select-vendor-type"}}>
             <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                 <PowerSelect
                     @options={{this.vendorTypes}}
                     @selected={{this.selectedVendorType}}
                     @onChange={{this.onSelectVendorType}}
-                    @placeholder="Select vendor type"
+                    @placeholder={{t "fleet-ops.component.vendor-form-panel.create-form.select-vendor-type"}}
                     @triggerClass="form-select form-input"
                     as |vendorType|
                 >
@@ -15,7 +15,7 @@
             </div>
         </InputGroup>
         {{#if (eq this.selectedVendorType.value "integrated-vendor")}}
-            <InputGroup @name="Choose integrated vendor provider">
+            <InputGroup @name={{t "fleet-ops.component.vendor-form-panel.create-form.choose-vendor"}}>
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
                         @options={{this.supportedIntegratedVendors}}
@@ -37,22 +37,22 @@
     {{#if this.selectedVendorType.value}}
         {{#if (eq this.selectedVendorType.value "integrated-vendor")}}
             {{#if this.selectedIntegratedVendor}}
-                <ContentPanel @title="Provider" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "fleet-ops.component.vendor-form-panel.create-form.provider"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                     <div class="flex flex-row items-center">
                         <img src={{this.selectedIntegratedVendor.logo}} alt={{this.selectedIntegratedVendor.code}} class="w-12 h-12" width="48" height="48" />
                         <h3 class="text-base text-black dark:text-white ml-4">{{this.selectedIntegratedVendor.name}}</h3>
                     </div>
                 </ContentPanel>
-                <ContentPanel @title="Credentials" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "fleet-ops.component.vendor-form-panel.create-form.credentials"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                     {{#each this.selectedIntegratedVendor.credential_params as |param|}}
                         <InputGroup
                             @name={{smart-humanize param.key}}
                             @value={{mut (get this.integratedVendor.credentials param.key)}}
-                            @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}}
+                            @helpText={{concat (t "fleet-ops.component.vendor-form-panel.create-form.optionally")(smart-humanize param.key)(t "fleet-ops.component.vendor-form-panel.create-form.configure-vendor")}}
                         />
                     {{/each}}
                 </ContentPanel>
-                <ContentPanel @title="Options" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "fleet-ops.common.options"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                     {{#each this.selectedIntegratedVendor.option_params as |param|}}
                         {{#if param.options}}
                             <InputGroup @name={{smart-humanize param.key}}>
@@ -62,7 +62,7 @@
                                     @optionValue={{param.optionValue}}
                                     @optionLabel={{param.optionLabel}}
                                     @humanize={{true}}
-                                    @placeholder={{concat "Select " (smart-humanize param.key)}}
+                                    @placeholder={{concat (t "fleet-ops.component.vendor-form-panel.create-form.select") (smart-humanize param.key)}}
                                     @onSelect={{fn (mut (get this.integratedVendor.options param.key))}}
                                 />
                             </InputGroup>
@@ -70,7 +70,7 @@
                             <InputGroup
                                 @name={{smart-humanize param.key}}
                                 @value={{mut (get this.integratedVendor.options param.key)}}
-                                @helpText={{concat "Optionally supply your own " (smart-humanize param.key) " to configure this vendor."}}
+                                @helpText={{concat (t "fleet-ops.component.vendor-form-panel.create-form.optionally")(smart-humanize param.key)(t "fleet-ops.component.vendor-form-panel.create-form.configure-vendor")}}
                             />
                         {{/if}}
                     {{/each}}
@@ -78,48 +78,49 @@
                         <Checkbox @value={{this.integratedVendor.sandbox}} @label="Sandbox" @onToggle={{fn (mut this.integratedVendor.sandbox)}} @alignItems="center" @labelClass="mb-0i" />
                     </InputGroup>
                 </ContentPanel>
-                <ContentPanel @title="Advanced Options" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel @title={{t "fleet-ops.component.vendor-form-panel.create-form.advanced-options"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                     <div>
                         <a href="javascript:;" class="text-blue-600 underline text-sm" {{on "click" this.toggleAdvancedOptions}}>{{if
                                 this.showAdvancedOptions
-                                "Hide Advanced Options"
-                                "Show Advanced Options"
+                                (t "fleet-ops.component.vendor-form-panel.create-form.hide-advanced-options")
+                                (t "fleet-ops.component.vendor-form-panel.create-form.show-advanced-options")
                             }}</a>
                     </div>
                     {{#if this.showAdvancedOptions}}
                         <div class="mt-4">
-                            <InputGroup @name="Custom Host" @value={{this.integratedVendor.host}} @helpText="Optionally provide a custom host that should be used for this integration." />
+                            <InputGroup @name={{t "fleet-ops.component.vendor-form-panel.create-form.host"}}
+                                @value={{this.integratedVendor.host}} @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.host-text"}} />
                             <InputGroup
-                                @name="Custom Namespace"
+                                @name={{t "fleet-ops.component.vendor-form-panel.create-form.namespace"}}
                                 @value={{this.integratedVendor.namespace}}
-                                @helpText="Optionally provide a custom namespace or api version that should be used for the integration."
+                                @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.namespace-text"}}
                             />
                             <InputGroup
-                                @name="Webhook URL"
+                                @name={{t "fleet-ops.component.vendor-form-panel.create-form.webhook"}}
                                 @value={{this.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!"
+                                @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.webhook-text"}}
                             />
                         </div>
                     {{/if}}
                 </ContentPanel>
             {{else}}
                 <div class="flex items-center justify-center border-2 border-dashed h-32 w-full rounded-md dark:border-gray-700 border-gray-200">
-                    <h3 class="text-gray-800 dark:text-gray-400 italic text-sm">Select an integrated vendor provider.</h3>
+                    <h3 class="text-gray-800 dark:text-gray-400 italic text-sm">{{t "fleet-ops.component.vendor-form-panel.create-form.select-integrated"}}</h3>
                 </div>
             {{/if}}
         {{else}}
-            <ContentPanel @title="Vendor Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
-                <InputGroup @name="Name" @value={{this.vendor.name}} @helpText="The vendor's name, typically the name of a business." />
-                <InputGroup @name="Email" @type="email" @value={{this.vendor.email}} @helpText="The vendor's email, this can be used to trigger emails to the vendor." />
-                <InputGroup @name="Phone" @type="tel" @value={{this.vendor.phone}} @helpText="The vendor's phone #, this can be used to trigger SMS or messages to the vendor." />
-                <InputGroup @name="Website" @value={{this.vendor.website_url}} @helpText="The vendor's website, optionally add the vendors website for reference." />
-                <InputGroup @name="Type">
+            <ContentPanel @title={{t "fleet-ops.component.vendor-form-panel.create-form.vendor-details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <InputGroup @name={{t "fleet-ops.common.name"}} @value={{this.vendor.name}} @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.name-text"}} />
+                <InputGroup @name={{t "fleet-ops.common.email"}} @type="email" @value={{this.vendor.email}} @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.email-text"}} />
+                <InputGroup @name={{t "fleet-ops.common.phone"}} @type="tel" @value={{this.vendor.phone}} @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.phone-text"}} />
+                <InputGroup @name={{t "fleet-ops.common.website"}} @value={{this.vendor.website_url}} @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.website-text"}} />
+                <InputGroup @name={{t "fleet-ops.common.type"}}>
                     <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                         <PowerSelect
                             @options={{@vendorTypes}}
                             @selected={{this.vendor.type}}
                             @onChange={{fn (mut this.vendor.type)}}
-                            @placeholder="Select vendor type"
+                            @placeholder={{t "fleet-ops.component.vendor-form-panel.create-form.select-vendor-type"}}
                             @triggerClass="form-select form-input"
                             as |type|
                         >
@@ -127,13 +128,13 @@
                         </PowerSelect>
                     </div>
                 </InputGroup>
-                <InputGroup @name="Status">
+                <InputGroup @name={{t "fleet-ops.common.status"}}>
                     <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                         <PowerSelect
                             @options={{@vendorStatusOptions}}
                             @selected={{this.vendor.status}}
                             @onChange={{fn (mut this.vendor.status)}}
-                            @placeholder="Select vendor status"
+                            @placeholder={{t "fleet-ops.component.vendor-form-panel.create-form.select-vendor-status"}}
                             @triggerClass="form-select form-input"
                             as |status|
                         >
@@ -144,16 +145,16 @@
                 <InputGroup @wrapperClass="col-span-2">
                     <div class="flex items-center justify-between">
                         <label>
-                            Address
+                            {{t "fleet-ops.common.address"}}
                         </label>
                         <div class="mb-1.5 flex flex-row">
-                            <Button @type="default" @size="xs" @icon="edit" @text={{if this.vendor.has_place "Edit" "New Address"}} @onClick={{this.editAddress}} />
+                            <Button @type="default" @size="xs" @icon="edit" @text={{if this.vendor.has_place (t "fleet-ops.component.vendor-form-panel.create-form.edit") (t "fleet-ops.component.vendor-form-panel.create-form.new-address")}} @onClick={{this.editAddress}} />
                         </div>
                     </div>
                     <ModelSelect
                         @modelName="place"
                         @selectedModel={{this.vendor.place}}
-                        @placeholder="Select Address"
+                        @placeholder={{t "fleet-ops.component.vendor-form-panel.create-form.select-address"}}
                         @triggerClass="form-select form-input"
                         @infiniteScroll={{false}}
                         @renderInPlace={{true}}
@@ -166,8 +167,8 @@
                         </div>
                     </ModelSelect>
                 </InputGroup>
-                <InputGroup @name="Country">
-                    <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.vendor.country}} @onChange={{fn (mut this.vendor.country)}} placeholder="Country" />
+                <InputGroup @name={{t "fleet-ops.common.country"}}>
+                    <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.vendor.country}} @onChange={{fn (mut this.vendor.country)}} placeholder={{t "fleet-ops.common.country"}} />
                 </InputGroup>
             </ContentPanel>
         {{/if}}

package/addon/components/vendor-form-panel/create-form.js

@@ -16,6 +16,10 @@ export default class VendorFormPanelCreateFormComponent extends Component {
      * @service fetch
      */
     @service fetch;
+    /**
+     * @service intl
+     */
+    @service intl;
 
     /**
      * @service contextPanel
@@ -38,8 +42,8 @@ export default class VendorFormPanelCreateFormComponent extends Component {
      * @type {Array}
      */
     @tracked vendorTypes = [
-        { label: 'Choose a integrated vendor', value: 'integrated-vendor' },
-        { label: 'Create a custom vendor', value: 'vendor' },
+        { label: this.intl.t('fleet-ops.component.vendor-form-panel.create-form.integrated-vendor'), value: 'integrated-vendor' },
+        { label: this.intl.t('fleet-ops.component.vendor-form-panel.create-form.custom-vendor'), value: 'vendor' },
     ];
 
     /**

package/addon/components/vendor-form-panel/edit-form.hbs

@@ -1,27 +1,27 @@
 <div class="space-y-4">
     {{#if this.isIntegratedVendor}}
-        <ContentPanel @title="Provider" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+        <ContentPanel @title={{t "fleet-ops.component.vendor-form-panel.create-form.provider"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
             <div class="flex flex-row items-center">
                 <img src={{this.vendor.provider_settings.logo}} alt={{this.vendor.provider_settings.code}} class="w-12 h-12" width="48" height="48" />
                 <h3 class="text-base text-black dark:text-white ml-4">{{this.vendor.provider_settings.name}}</h3>
             </div>
         </ContentPanel>
-        <ContentPanel @title="Credentials" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+        <ContentPanel @title={{t "fleet-ops.component.vendor-form-panel.create-form.credentials"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
             {{#if this.isEditingCredentials}}
                 {{#each this.vendor.provider_settings.credential_params as |param|}}
-                    <InputGroup @name={{smart-humanize param.key}} @value={{mut (get this.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 this.vendor.credentials param.key)}} @helpText={{concat (t "fleet-ops.component.vendor-form-panel.create-form.optionally")(smart-humanize param.key)(t "fleet-ops.component.vendor-form-panel.create-form.configure-vendor")}} />
                 {{/each}}
                 <div class="mt-4">
-                    <a href="javascript:;" class="text-red-600 underline text-sm" {{on "click" this.toggleCredentialsReset}}>Cancel credentials reset</a>
+                    <a href="javascript:;" class="text-red-600 underline text-sm" {{on "click" this.toggleCredentialsReset}}>{{t "fleet-ops.component.vendor-form-panel.edit-form.cancel-credentials"}}</a>
                 </div>
             {{else}}
                 <div class="rounded-md border shadow-sm border-gray-200 text-black bg-white dark:border-gray-700 dark:bg-gray-900 dark:text-white text-xs px-3 py-2 mb-4 mt-2">
-                    <p class="mb-2">Sensitive credentials can only be reset, to update credentials you must re-enter the credentials.</p>
-                    <a href="javascript:;" class="text-red-600 underline text-sm" {{on "click" this.toggleCredentialsReset}}>Click here to reset credentials</a>
+                    <p class="mb-2">{{t "fleet-ops.component.vendor-form-panel.edit-form.sensitive-credentials"}}</p>
+                    <a href="javascript:;" class="text-red-600 underline text-sm" {{on "click" this.toggleCredentialsReset}}>{{t "fleet-ops.component.vendor-form-panel.edit-form.reset-credentials"}}</a>
                 </div>
                 <div>
                     {{#each this.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.vendor-form-panel.create-form.optionally")(smart-humanize param.key)(t "fleet-ops.component.vendor-form-panel.create-form.configure-vendor")}} />
                     {{/each}}
                 </div>
             {{/if}}
@@ -33,44 +33,44 @@
                         <Select @value={{mut (get this.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 this.vendor.options param.key))}} />
                     </InputGroup>
                 {{else}}
-                    <InputGroup @name={{smart-humanize param.key}} @value={{mut (get this.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 this.vendor.options param.key)}} @helpText={{concat (t "fleet-ops.component.vendor-form-panel.create-form.optionally")(smart-humanize param.key)(t "fleet-ops.component.vendor-form-panel.create-form.configure-vendor")}} />
                 {{/if}}
             {{/each}}
             <InputGroup>
                 <Checkbox @value={{this.vendor.sandbox}} @label="Sandbox" @onToggle={{fn (mut this.vendor.sandbox)}} @alignItems="center" @labelClass="mb-0i" />
             </InputGroup>
         </ContentPanel>
-        <ContentPanel @title="Advanced Options" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+        <ContentPanel @title={{t "fleet-ops.component.vendor-form-panel.create-form.advanced-options"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
             <div>
                 <a href="javascript:;" class="text-blue-600 underline text-sm" {{on "click" this.toggleAdvancedOptions}}>{{if
                         this.showAdvancedOptions
-                        "Hide Advanced Options"
-                        "Show Advanced Options"
+                        (t "fleet-ops.component.vendor-form-panel.create-form.hide-advanced-options")
+                        (t "fleet-ops.component.vendor-form-panel.create-form.show-advanced-options")
                     }}</a>
             </div>
             {{#if this.showAdvancedOptions}}
                 <div class="mt-4">
-                    <InputGroup @name="Custom Host" @value={{this.vendor.host}} @helpText="Optionally provide a custom host that should be used for this integration." />
-                    <InputGroup @name="Custom Namespace" @value={{this.vendor.namespace}} @helpText="Optionally provide a custom namespace or api version that should be used for the integration." />
-                    <InputGroup @name="Webhook URL" @value={{this.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.vendor-form-panel.create-form.host"}} @value={{this.vendor.host}} @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.host-text"}} />
+                    <InputGroup @name={{t "fleet-ops.component.vendor-form-panel.create-form.namespace"}} @value={{this.vendor.namespace}} @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.namespace-text"}} />
+                    <InputGroup @name={{t "fleet-ops.component.vendor-form-panel.create-form.webhook"}} @value={{this.vendor.webhook_url}} @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.webhook-text"}} />
                 </div>
             {{/if}}
         </ContentPanel>
     {{else}}
-        <InputGroup @name="Name" @value={{this.vendor.name}} @helpText="The vendor's name, typically the name of a business." />
-        <InputGroup @name="Email" @type="email" @value={{this.vendor.email}} @helpText="The vendor's email, this can be used to trigger emails to the vendor." />
-        <InputGroup @name="Phone" @type="tel" @value={{this.vendor.phone}} @helpText="The vendor's phone #, this can be used to trigger SMS or messages to the vendor." />
-        <InputGroup @name="Website" @value={{this.vendor.website_url}} @helpText="The vendor's website, optionally add the vendors website for reference." />
-        <InputGroup @name="Type">
+        <InputGroup @name={{t "fleet-ops.common.name"}} @value={{this.vendor.name}} @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.name-text"}} />
+        <InputGroup @name={{t "fleet-ops.common.email"}} @type="email" @value={{this.vendor.email}} @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.email-text"}} />
+        <InputGroup @name={{t "fleet-ops.common.phone"}} @type="tel" @value={{this.vendor.phone}} @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.phone-text"}} />
+        <InputGroup @name={{t "fleet-ops.common.website"}} @value={{this.vendor.website_url}} @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.website-text"}} />
+        <InputGroup @name={{t "fleet-ops.common.type"}}>
             <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
-                <PowerSelect @options={{@vendorTypes}} @selected={{this.vendor.type}} @onChange={{fn (mut this.vendor.type)}} @placeholder="Select vendor type" @triggerClass="form-select form-input" as |type|>
+                <PowerSelect @options={{@vendorTypes}} @selected={{this.vendor.type}} @onChange={{fn (mut this.vendor.type)}} @placeholder={{t "fleet-ops.component.vendor-form-panel.create-form.select-vendor-type"}} @triggerClass="form-select form-input" as |type|>
                     {{smart-humanize type}}
                 </PowerSelect>
             </div>
         </InputGroup>
-        <InputGroup @name="Status">
+        <InputGroup @name={{t "fleet-ops.common.status"}}>
             <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
-                <PowerSelect @options={{@vendorStatusOptions}} @selected={{this.vendor.status}} @onChange={{fn (mut this.vendor.status)}} @placeholder="Select vendor status" @triggerClass="form-select form-input" as |status|>
+                <PowerSelect @options={{@vendorStatusOptions}} @selected={{this.vendor.status}} @onChange={{fn (mut this.vendor.status)}} @placeholder={{t "fleet-ops.component.vendor-form-panel.create-form.select-vendor-status"}} @triggerClass="form-select form-input" as |status|>
                     {{smart-humanize status}}
                 </PowerSelect>
             </div>
@@ -78,21 +78,21 @@
         <InputGroup @wrapperClass="col-span-2">
             <div class="flex items-center justify-between">
                 <label>
-                    Address
+                    {{t "fleet-ops.common.address"}}
                 </label>
                 <div class="mb-1.5 flex flex-row">
-                    <Button @type="default" @size="xs" @icon="edit" @text={{if this.vendor.has_place "Edit" "New Address"}} @onClick={{this.editAddress}} />
+                    <Button @type="default" @size="xs" @icon="edit" @text={{if this.vendor.has_place (t "fleet-ops.component.vendor-form-panel.create-form.edit") (t "fleet-ops.component.vendor-form-panel.create-form.new-address")}} @onClick={{this.editAddress}} />
                 </div>
             </div>
-            <ModelSelect @modelName="place" @selectedModel={{this.vendor.place}} @placeholder="Select Address" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.selectVendorAddress}} as |model|>
+            <ModelSelect @modelName="place" @selectedModel={{this.vendor.place}} @placeholder={{t "fleet-ops.component.vendor-form-panel.edit-form.select-address"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.selectVendorAddress}} as |model|>
                 <div class="flex items-center flex-row justify-between">
                     <div class="truncate flex-1">{{n-a model.address}}</div>
                     <Badge @hideStatusDot={{true}} @status="info">{{model.public_id}}</Badge>
                 </div>
             </ModelSelect>
         </InputGroup>
-        <InputGroup @name="Country">
-            <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.vendor.country}} @onChange={{fn (mut this.vendor.country)}} placeholder="Country" />
+        <InputGroup @name={{t "fleet-ops.common.country"}}>
+            <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.vendor.country}} @onChange={{fn (mut this.vendor.country)}} placeholder={{t "fleet-ops.common.country"}} />
         </InputGroup>
     {{/if}}
 </div>

package/addon/components/vendor-form-panel/edit-form.js

@@ -5,6 +5,7 @@ import { action } from '@ember/object';
 
 export default class VendorFormPanelEditFormComponent extends Component {
     @service store;
+    @service intl;
     @service contextPanel;
     @tracked isIntegratedVendor;
     @tracked isEditingCredentials = false;

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

@@ -13,14 +13,14 @@
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">
                 {{#if this.vendor.id}}
-                    <Button @type="default" @icon="warehouse" @helpText="View vendor details" @onClick={{this.onViewDetails}} />
+                    <Button @type="default" @icon="warehouse" @helpText={{t "fleet-ops.component.vendor-form-panel.view-details"}} @onClick={{this.onViewDetails}} />
                 {{/if}}
             </div>
             <div class="flex flex-1 justify-end">
                 <div class="mr-2">
-                    <Button @icon={{if this.vendor.id "save" "check"}} @type="primary" @text={{if this.vendor.id "Save Vendor" "Create Vendor"}} @onClick={{this.save}} />
+                    <Button @icon={{if this.vendor.id "save" "check"}} @type="primary" @text={{if this.vendor.id (t "fleet-ops.component.vendor-form-panel.save-vendor")(t "fleet-ops.component.vendor-form-panel.create-vendor") }} @onClick={{this.save}} />
                 </div>
-                <Button @type="default" @icon="times" @helpText={{if this.vendor.id "Cancel edit vendor" "Cancel new vendor"}} @onClick={{this.onPressCancel}} />
+                <Button @type="default" @icon="times" @helpText={{if this.vendor.id (t "fleet-ops.component.vendor-form-panel.cancel-edit-vendor")(t "fleet-ops.component.vendor-form-panel.cancel-new-vendor") }} @onClick={{this.onPressCancel}} />
             </div>
         </div>
         <div class="flex flex-row justify-between w-full">
@@ -30,11 +30,11 @@
                         <div class="upload-avatar-overlay w-12 h-12 flex items-center justify-start rounded-lg">
                             <img src={{this.vendor.logo_url}} alt={{this.vendor.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
                             <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
-                                <InputInfo @text="Upload new photo" />
+                                <InputInfo @text={{t "fleet-ops.component.vendor-form-panel.upload-photo"}} />
                             </Attach::Tooltip>
                             <div class="upload-avatar-button-wrapper rounded-lg">
                                 <UploadButton
-                                    @name="photos"
+                                    @name={{t "fleet-ops.common.photos"}}
                                     @accept="image/*"
                                     @onFileAdded={{this.onUploadNewPhoto}}
                                     @icon="upload"
@@ -53,7 +53,7 @@
                                 {{#if this.vendor.name}}
                                     {{this.vendor.name}}
                                 {{else}}
-                                    <span>New Vendor</span>
+                                    <span>{{t "fleet-ops.component.vendor-form-panel.new-vendor"}}</span>
                                 {{/if}}
                             {{/if}}
                         </h1>

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

@@ -18,6 +18,11 @@ export default class VendorFormPanelComponent extends Component {
      */
     @service fetch;
 
+    /**
+     * @service intl
+     */
+    @service intl;
+
     /**
      * @service currentUser
      */
@@ -114,7 +119,7 @@ export default class VendorFormPanelComponent extends Component {
             return vendor
                 .save()
                 .then((vendor) => {
-                    this.notifications.success(`Vendor (${vendor.displayName}) saved successfully.`);
+                    this.notifications.success(this.intl.t('fleet-ops.component.vendor-form-panel.success-message', { vendorName: vendor.displayName }));
                     contextComponentCallback(this, 'onAfterSave', vendor);
                 })
                 .catch((error) => {
@@ -142,7 +147,7 @@ export default class VendorFormPanelComponent extends Component {
             {
                 path: `uploads/${this.currentUser.companyId}/vendors/${this.vendor.id}`,
                 subject_uuid: this.vendor.id,
-                subject_type: 'vendor',
+                subject_type: 'fleet-ops:vendor',
                 type: 'vendor_logo',
             },
             (uploadedFile) => {

package/addon/components/vendor-panel/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.common.sandbox"}}</div>
                     <div class="field-value">{{if this.vendor.sandbox "Yes" "No"}}</div>
                 </div>
                 <div class="field-info-container">
-                    <div class="field-name">Host</div>
+                    <div class="field-name">{{t "fleet-ops.common.host"}}</div>
                     <div class="field-value">{{n-a this.vendor.host}}</div>
                 </div>
                 <div class="field-info-container">
-                    <div class="field-name">Namespace</div>
+                    <div class="field-name">{{t "fleet-ops.common.namespace"}}</div>
                     <div class="field-value">{{n-a this.vendor.namespace}}</div>
                 </div>
                 {{#if (is-object this.vendor.options)}}
@@ -34,41 +34,41 @@
         {{else}}
             <div class="grid grid-cols-1 lg: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 this.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 this.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 this.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 this.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={{this.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={{this.vendor.status}} />
                     </div>
                 </div>
 
                 <div class="field-info-container col-span-2">
-                    <div class="field-name">Address</div>
+                    <div class="field-name">{{t "fleet-ops.common.address"}}</div>
                     <div class="field-value">{{n-a this.vendor.address}}</div>
                 </div>
             </div>

package/addon/components/vendor-panel.hbs

@@ -12,10 +12,10 @@
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i">
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">
-                <Button @type="default" @icon="pen" @helpText="Edit vendor" @onClick={{this.onEdit}} />
+                <Button @type="default" @icon="pen" @helpText={{t "fleet-ops.component.vendor-panel.edit"}} @onClick={{this.onEdit}} />
             </div>
             <div class="flex flex-1 justify-end">
-                <Button @type="default" @icon="times" @helpText="Close vendor details" @onClick={{this.onPressCancel}} />
+                <Button @type="default" @icon="times" @helpText={{t "fleet-ops.component.vendor-panel.close"}} @onClick={{this.onPressCancel}} />
             </div>
         </div>
         <div class="flex flex-row justify-between w-full">
@@ -40,7 +40,7 @@
                         {{#if this.vendor.id}}
                             {{this.vendor.name}}
                         {{else}}
-                            <span>New Vendor</span>
+                            <span>{{t "fleet-ops.component.vendor-panel.new-vendor"}}</span>
                         {{/if}}
                     </h1>
                     <div class="-mt-1">

package/addon/components/widget/fleet-ops-quickstart.hbs

@@ -10,7 +10,7 @@
                 {{#if this.isLoading}}
                     <div class="flex text-center items-center justify-center p-4">
                         <Spinner class="mr-2" />
-                        <span>Let's see what you can do to jumpstart operations...</span>
+                        <span>{{t "fleet-ops.component.widget.fleet-ops-quickstart.message"}}</span>
                     </div>
                 {{else}}
                     <div class="space-y-3">
@@ -27,7 +27,7 @@
                                 </div>
                                 <div>
                                     {{#if task.should}}
-                                        <a href="javascript:;" class="text-yellow-700 dark:text-yellow-700 hover:text-yellow-700 font-semibold underline" {{on "click" (fn this.startTask action)}}>Start Task</a>
+                                        <a href="javascript:;" class="text-yellow-700 dark:text-yellow-700 hover:text-yellow-700 font-semibold underline" {{on "click" (fn this.startTask action)}}>{{t "fleet-ops.component.widget.fleet-ops-quickstart.start-task"}}</a>
                                     {{/if}}
                                 </div>
                             </div>

package/addon/components/widget/fleet-ops-quickstart.js

@@ -4,6 +4,7 @@ import { inject as service } from '@ember/service';
 import { action, computed } from '@ember/object';
 
 export default class WidgetFleetOpsQuickstartComponent extends Component {
+    @service intl;
     @service fetch;
     @service hostRouter;
     @tracked tasks = {};