@fleetbase/fleetops-engine 0.4.0 → 0.4.1

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

@@ -13,7 +13,7 @@
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">
                 {{#if this.vehicle.id}}
-                    <Button @type="default" @icon="car" @helpText="View vehicle details" @onClick={{this.onViewDetails}} @disabled={{this.isLoading}} />
+                    <Button @type="default" @icon="car" @helpText={{t "fleet-ops.component.vehicle-form-panel.view-details"}} @onClick={{this.onViewDetails}} @disabled={{this.isLoading}} />
                 {{/if}}
             </div>
             <div class="flex flex-1 justify-end">
@@ -21,7 +21,7 @@
                     <Button
                         @icon={{if this.vehicle.id "save" "check"}}
                         @type="primary"
-                        @text={{if this.vehicle.id "Save Vehicle" "Create Vehicle"}}
+                        @text={{if this.vehicle.id (t "fleet-ops.component.vehicle-form-panel.save-vehicle")(t "fleet-ops.component.vehicle-form-panel.create-vehicle") }}
                         @onClick={{this.save}}
                         @isLoading={{this.isLoading}}
                     />
@@ -29,7 +29,7 @@
                 <Button
                     @type="default"
                     @icon="times"
-                    @helpText={{if this.vehicle.id "Cancel edit vehicle" "Cancel new vehicle"}}
+                    @helpText={{if this.vehicle.id (t "fleet-ops.component.vehicle-form-panel.cancel-edit-vehicle")(t "fleet-ops.component.vehicle-form-panel.cancel-new-vehicle") }}
                     @onClick={{this.onPressCancel}}
                     @disabled={{this.isLoading}}
                 />
@@ -42,11 +42,11 @@
                         <div class="upload-avatar-overlay w-12 h-12 flex items-center justify-start rounded-lg">
                             <img src={{this.vehicle.photo_url}} alt={{this.vehicle.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.vehicle-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"
@@ -65,7 +65,7 @@
                                 {{#if this.vehicle.displayName}}
                                     {{this.vehicle.displayName}}
                                 {{else}}
-                                    <span>New Vehicle</span>
+                                    <span>{{t "fleet-ops.component.vehicle-form-panel.new-vehicle"}}</span>
                                 {{/if}}
                             {{/if}}
                         </h1>
@@ -76,7 +76,7 @@
                                 </div>
                             {{else}}
                                 <div class="flex flex-row items-center">
-                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">No driver assigned</span>
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{t "fleet-ops.component.vehicle-form-panel.not-assigned"}}</span>
                                 </div>
                             {{/if}}
                         </div>
@@ -93,35 +93,35 @@
         <div class="flex-1 space-y-4">
             <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                 <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
-                    <InputGroup @name="Internal ID">
-                        <Input @value={{this.vehicle.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
+                    <InputGroup @name={{t "fleet-ops.common.internal-id"}}>
+                        <Input @value={{this.vehicle.internal_id}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.common.internal-id"}} />
                     </InputGroup>
 
-                    <InputGroup @name="Plate Number">
-                        <Input @value={{this.vehicle.plate_number}} @type="text" class="w-full form-input" placeholder="Plate Number" />
+                    <InputGroup @name={{t "fleet-ops.component.vehicle-form-panel.plate-number"}}>
+                        <Input @value={{this.vehicle.plate_number}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.vehicle-form-panel.plate-number"}} />
                     </InputGroup>
 
-                    <InputGroup @name="VIN Number">
-                        <Input @value={{this.vehicle.vin}} @type="text" class="w-full form-input" placeholder="VIN Number" />
+                    <InputGroup @name={{t "fleet-ops.component.vehicle-form-panel.vin-number"}}>
+                        <Input @value={{this.vehicle.vin}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.vehicle-form-panel.vin-number"}} />
                     </InputGroup>
 
-                    <InputGroup @name="Make">
-                        <Input @value={{this.vehicle.make}} @type="text" class="w-full form-input" placeholder="Vehicle Make" />
+                    <InputGroup @name={{t "fleet-ops.component.vehicle-form-panel.make"}}>
+                        <Input @value={{this.vehicle.make}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.vehicle-form-panel.vehicle-make"}} />
                     </InputGroup>
 
-                    <InputGroup @name="Model">
-                        <Input @value={{this.vehicle.model}} @type="text" class="w-full form-input" placeholder="Vehicle Model" />
+                    <InputGroup @name={{t "fleet-ops.component.vehicle-form-panel.model"}}>
+                        <Input @value={{this.vehicle.model}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.vehicle-form-panel.vehicle-model"}} />
                     </InputGroup>
 
-                    <InputGroup @name="Year">
-                        <Input @value={{this.vehicle.year}} @type="text" class="w-full form-input" placeholder="Vehicle Year" />
+                    <InputGroup @name={{t "fleet-ops.component.vehicle-form-panel.year"}}>
+                        <Input @value={{this.vehicle.year}} @type="text" class="w-full form-input" placeholder={{t "fleet-ops.component.vehicle-form-panel.vehicle-year"}} />
                     </InputGroup>
 
-                    <InputGroup @name="Driver Assigned">
+                    <InputGroup @name={{t "fleet-ops.component.vehicle-form-panel.driver-assigned"}}>
                         <ModelSelect
                             @modelName="driver"
                             @selectedModel={{this.vehicle.driver}}
-                            @placeholder="Select Driver"
+                            @placeholder={{t "fleet-ops.component.vehicle-form-panel.select-driver"}}
                             @triggerClass="form-select form-input"
                             @infiniteScroll={{false}}
                             @renderInPlace={{true}}
@@ -132,13 +132,13 @@
                         </ModelSelect>
                     </InputGroup>
 
-                    <InputGroup @name="Status">
+                    <InputGroup @name={{t "fleet-ops.common.status"}}>
                         <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                             <PowerSelect
                                 @options={{this.vehicleStatusOptions}}
                                 @selected={{this.vehicle.status}}
                                 @onChange={{fn (mut this.vehicle.status)}}
-                                @placeholder="Select vehicle status"
+                                @placeholder={{t "fleet-ops.component.vehicle-form-panel.select-vehicle"}}
                                 @triggerClass="form-select form-input"
                                 as |status|
                             >
@@ -146,7 +146,7 @@
                             </PowerSelect>
                         </div>
                     </InputGroup>
-                    <InputGroup @name="Coordinates" @wrapperClass="col-span-2">
+                    <InputGroup @name={{t "fleet-ops.common.coordinates"}} @wrapperClass="col-span-2">
                 <CoordinatesInput
                     @value={{this.vehicle.location}}
                     @onChange={{this.onCoordinatesChanged}}
@@ -158,13 +158,13 @@
                 </div>
             </ContentPanel>
 
-            <ContentPanel @title="Avatar" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <ContentPanel @title={{t "fleet-ops.component.vehicle-form-panel.avatar"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                 <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                     <div class="input-group mb-2">
-                        <InputLabel @labelText="Select map avatar" @helpText="Select an avatar to be used for rendering on maps when using geolocation tracking features." />
+                        <InputLabel @labelText={{t "fleet-ops.component.vehicle-form-panel.select-map-avatar"}} @helpText={{t "fleet-ops.component.vehicle-form-panel.select-avatar-rendering"}} />
                         <FetchSelect
                             @wrapperClass="w-60"
-                            @placeholder="Select avatar"
+                            @placeholder={{t "fleet-ops.component.vehicle-form-panel.select-avatar"}}
                             @endpoint="vehicles/avatars"
                             @selected={{this.vehicle.avatar_url}}
                             @optionValue="value"

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

@@ -13,10 +13,15 @@ export default class VehicleFormPanelComponent extends Component {
     @service store;
 
     /**
-     * @service store
+     * @service fetch
      */
     @service fetch;
 
+    /**
+     * @service intl
+     */
+    @service intl;
+
     /**
      * @service currentUser
      */
@@ -98,7 +103,7 @@ export default class VehicleFormPanelComponent extends Component {
             return vehicle
                 .save()
                 .then((vehicle) => {
-                    this.notifications.success(`Vehicle (${vehicle.displayName}) saved successfully.`);
+                    this.notifications.success(this.intl.t('fleet-ops.component.vehicle-form-panel.success-message', { vehicleName: vehicle.displayName }));
                     contextComponentCallback(this, 'onAfterSave', vehicle);
                 })
                 .catch((error) => {

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

@@ -2,32 +2,32 @@
     <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
         <div class="grid 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 @vehicle.display_name}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Plate Number</div>
+                <div class="field-name">{{t "fleet-ops.common.plate-number"}}</div>
                 <div class="field-value">{{n-a @vehicle.plate_number}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">VIN Number</div>
+                <div class="field-name">{{t "fleet-ops.common.vin-number"}}</div>
                 <div class="field-value">{{n-a @vehicle.vin}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Make</div>
+                <div class="field-name">{{t "fleet-ops.common.make"}}</div>
                 <div class="field-value">{{n-a @vehicle.make}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Model</div>
+                <div class="field-name">{{t "fleet-ops.common.model"}}</div>
                 <div class="field-value">{{n-a @vehicle.model}}</div>
             </div>
             <div class="field-info-container">
-                <div class="field-name">Year</div>
+                <div class="field-name">{{t "fleet-ops.common.year"}}</div>
                 <div class="field-value">{{n-a @vehicle.year}}</div>
             </div>
             <div class="field-info-container col-span-3">
                 <div class="field-name">
-                    Coordinates
+                    {{t "fleet-ops.common.coordinates"}}
                 </div>
                 <div class="field-value">
                     {{point-coordinates @vehicle.location}}

package/addon/components/vehicle-panel.hbs

@@ -12,10 +12,10 @@
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
         <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 vehicle" @onClick={{this.onEdit}} />
+                <Button @type="default" @icon="pen" @helpText={{t "fleet-ops.component.vehicle-panel.edit"}} @onClick={{this.onEdit}} />
             </div>
             <div class="flex flex-1 justify-end">
-                <Button @type="default" @icon="times" @helpText="Close vehicle details" @onClick={{this.onPressCancel}} />
+                <Button @type="default" @icon="times" @helpText={{t "fleet-ops.component.vehicle-panel.close"}} @onClick={{this.onPressCancel}} />
             </div>
         </div>
         <div class="flex flex-row justify-between w-full">
@@ -45,8 +45,8 @@
                                 </div>
                             {{else}}
                                 <div class="flex flex-row items-center">
-                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">No driver assigned</span>
-                                    {{! <Button @icon="user-plus" @size="xs" @helpText="Assign a driver to vehicle" /> }}
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{t "fleet-ops.component.vehicle-panel.not-assigned"}}</span>
+                                    {{!-- <Button @icon="user-plus" @size="xs" @helpText={{t "fleet-ops.component.vehicle-panel.assign-driver"}} /> --}}
                                 </div>
                             {{/if}}
                         </div>

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;