@fleetbase/fleetops-engine 0.3.0 → 0.3.2

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

@@ -16,11 +16,16 @@
         <div class="flex flex-row justify-between w-full">
             <div class="flex flex-col flex-1 w-3/4">
                 <div class="flex flex-row">
-                    <div class="w-14 flex items-center justify-center">
-                        <Image src={{this.vehicle.photo_url}} @fallbackSrc={{config "defaultValues.vehicleImage"}} alt={{this.vehicle.name}} height="48" width="48" class="h-12 w-12" />
-                        <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
-                            <InputInfo @text={{this.vehicle.public_id}} />
-                        </Attach::Tooltip>
+                    <div class="w-14">
+                        <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" />
+                            </Attach::Tooltip>
+                            <div class="upload-avatar-button-wrapper rounded-lg">
+                                <UploadButton @name="photos" @accept="image/*" @onFileAdded={{this.onUploadNewPhoto}} @icon="upload" @hideButtonText={{true}} @labelClass="upload-avatar-label-overlay" class="w-12 btn-reset" />
+                            </div>
+                        </div>
                     </div>
                     <div class="flex flex-col">
                         <h1 class="text-gray-900 dark:text-white text-2xl">
@@ -58,61 +63,47 @@
         <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">
-                    <div class="input-group mb-2">
-                        <label>
-                            Internal ID
-                        </label>
+                    <InputGroup @name="Internal ID">
                         <Input @value={{this.vehicle.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
-                    </div>
+                    </InputGroup>
 
-                    <div class="input-group mb-2">
-                        <label>
-                            Plate Number
-                        </label>
+                    <InputGroup @name="Plate Number">
                         <Input @value={{this.vehicle.plate_number}} @type="text" class="w-full form-input" placeholder="Plate Number" />
-                    </div>
+                    </InputGroup>
 
-                    <div class="input-group mb-2">
-                        <label>
-                            VIN Number
-                        </label>
+                    <InputGroup @name="VIN Number">
                         <Input @value={{this.vehicle.vin}} @type="text" class="w-full form-input" placeholder="VIN Number" />
-                    </div>
+                    </InputGroup>
 
-                    <div class="input-group mb-2">
-                        <label>
-                            Make
-                        </label>
+                    <InputGroup @name="Make">
                         <Input @value={{this.vehicle.make}} @type="text" class="w-full form-input" placeholder="Vehicle Make" />
-                    </div>
+                    </InputGroup>
 
-                    <div class="input-group mb-2">
-                        <label>
-                            Model
-                        </label>
+                    <InputGroup @name="Model">
                         <Input @value={{this.vehicle.model}} @type="text" class="w-full form-input" placeholder="Vehicle Model" />
-                    </div>
+                    </InputGroup>
 
-                    <div class="input-group mb-2">
-                        <label>
-                            Year
-                        </label>
+                    <InputGroup @name="Year">
                         <Input @value={{this.vehicle.year}} @type="text" class="w-full form-input" placeholder="Vehicle Year" />
-                    </div>
+                    </InputGroup>
 
-                    <div class="input-group mb-2">
-                        <label>
-                            Driver Assigned
-                        </label>
-                        <ModelSelect @modelName="driver" @selectedModel={{this.vehicle.driver}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut
-                                this.vehicle.driver)}} as |model|>
+                    <InputGroup @name="Driver Assigned">
+                        <ModelSelect @modelName="driver" @selectedModel={{this.vehicle.driver}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.vehicle.driver)}} as |model|>
                             {{model.name}}
                         </ModelSelect>
-                    </div>
+                    </InputGroup>
+
+                    <InputGroup @name="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" @triggerClass="form-select form-input" as |status|>
+                                {{smart-humanize status}}
+                            </PowerSelect>
+                        </div>
+                    </InputGroup>
                 </div>
             </ContentPanel>
 
-            <ContentPanel @title="Avatar" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <ContentPanel @title="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." />
@@ -121,7 +112,7 @@
                         </FetchSelect>
                     </div>
                     <div>
-                        <img alt={{this.vehicle.public_id}} src={{this.vehicle.avatar_url}} class="w-24 h-24" />
+                        <img alt={{this.vehicle.displayName}} src={{this.vehicle.avatar_url}} class="w-24 h-24" />
                     </div>
                 </div>
             </ContentPanel>

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

@@ -11,6 +11,16 @@ export default class VehicleFormPanelComponent extends Component {
      */
     @service store;
 
+    /**
+     * @service store
+     */
+    @service fetch;
+
+    /**
+     * @service currentUser
+     */
+    @service currentUser;
+
     /**
      * @service notifications
      */
@@ -43,6 +53,12 @@ export default class VehicleFormPanelComponent extends Component {
      */
     @tracked isLoading = false;
 
+    /**
+     * Status options for vehicles.
+     * @type {Array}
+     */
+    @tracked vehicleStatusOptions = ['active', 'pending'];
+
     /**
      * Constructs the component and applies initial state.
      */
@@ -97,6 +113,31 @@ export default class VehicleFormPanelComponent extends Component {
         }
     }
 
+    /**
+     * Uploads a new photo for the vehicle.
+     *
+     * @param {File} file
+     * @memberof DriverFormPanelComponent
+     */
+    @action onUploadNewPhoto(file) {
+        this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/${this.currentUser.companyId}/vehicles/${this.vehicle.id}`,
+                subject_uuid: this.vehicle.id,
+                subject_type: 'vehicle',
+                type: 'vehicle_photo',
+            },
+            (uploadedFile) => {
+                this.vehicle.setProperties({
+                    photo_uuid: uploadedFile.id,
+                    photo_url: uploadedFile.url,
+                    photo: uploadedFile,
+                });
+            }
+        );
+    }
+
     /**
      * View the details of the vehicle.
      *

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

@@ -1,6 +1,6 @@
-<div class="p-4">
+<div class="p-4 space-y-4">
     <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
-        <div class="grid grid-cols-2 gap-2 text-xs md:mb-6 dark:text-gray-100">
+        <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-value">{{n-a @vehicle.display_name}}</div>
@@ -31,4 +31,10 @@
             </div>
         </div>
     </ContentPanel>
+
+    <ContentPanel @title="Avatar" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+        <div class="p-4">
+            <img alt={{@vehicle.displayName}} src={{@vehicle.avatar_url}} class="w-24 h-24" />
+        </div>
+    </ContentPanel>
 </div>

package/addon/components/vehicle-panel.hbs

@@ -11,11 +11,13 @@
         <div class="flex flex-row justify-between w-full">
             <div class="flex flex-col flex-1 w-3/4">
                 <div class="flex flex-row">
-                    <div class="w-14 flex items-center justify-center">
-                        <Image src={{this.vehicle.photo_url}} @fallbackSrc={{this.vehicle.avatar_url}} alt={{this.vehicle.name}} height="48" width="48" class="h-12 w-12" />
-                        <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
-                            <InputInfo @text={{this.vehicle.public_id}} />
-                        </Attach::Tooltip>
+                    <div class="w-14">
+                        <div class="w-12 h-12 flex items-center justify-start rounded-lg">
+                            <Image src={{this.vehicle.photo_url}} @fallbackSrc={{config "defaultValues.vehicleImage"}} 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={{this.vehicle.displayName}} />
+                            </Attach::Tooltip>
+                        </div>
                     </div>
                     <div class="flex flex-col">
                         <h1 class="text-gray-900 dark:text-white text-2xl">{{this.vehicle.display_name}}</h1>
@@ -53,7 +55,7 @@
             </div>
         </div>
         <div class="tab-content tab-{{this.tab.slug}}">
-            {{component this.tab.component vehicle=this.vehicle tabOptions=this.tab params=this.tab.componentParams}}
+            {{component this.tab.component vehicle=this.vehicle tabOptions=this.tab options=this.tab.componentParams}}
         </div>
     </Overlay::Body>
 </Overlay>

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

@@ -0,0 +1,114 @@
+<div class="space-y-4">
+    <ContentPanel @title="Setup" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+        <InputGroup @name="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" @triggerClass="form-select form-input" as |vendorType|>
+                    {{vendorType.label}}
+                </PowerSelect>
+            </div>
+        </InputGroup>
+        {{#if (eq this.selectedVendorType.value "integrated-vendor")}}
+            <InputGroup @name="Choose integrated vendor provider">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect @options={{this.supportedIntegratedVendors}} @selected={{this.selectedIntegratedVendor}} @onChange={{this.onSelectIntegratedVendor}} @placeholder="Select integrated vendor provider" @triggerClass="form-select form-input" as |integratedVendor|>
+                        <div class="flex flex-row items-center">
+                            <Image src={{integratedVendor.logo}} alt={{integratedVendor.code}} class="w-4 h-4" width="16" height="16" />
+                            <h3 class="text-sm ml-4 dark:text-white">{{integratedVendor.name}}</h3>
+                        </div>
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+        {{/if}}
+    </ContentPanel>
+    {{#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">
+                    <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">
+                    {{#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."}} />
+                    {{/each}}
+                </ContentPanel>
+                <ContentPanel @title="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}}>
+                                <Select @value={{mut (get this.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 this.integratedVendor.options param.key))}} />
+                            </InputGroup>
+                        {{else}}
+                            <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."}} />
+                        {{/if}}
+                    {{/each}}
+                    <InputGroup>
+                        <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">
+                    <div>
+                        <a href="javascript:;" class="text-blue-600 underline text-sm" {{on "click" this.toggleAdvancedOptions}}>{{if
+                                this.showAdvancedOptions
+                                "Hide Advanced Options"
+                                "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="Custom Namespace" @value={{this.integratedVendor.namespace}} @helpText="Optionally provide a custom namespace or api version that should be used for the integration." />
+                            <InputGroup @name="Webhook URL" @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!" />
+                        </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>
+                </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}} @helpText="The vendor's website, optionally add the vendors website for reference." />
+                <InputGroup @name="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|>
+                            {{smart-humanize type}}
+                        </PowerSelect>
+                    </div>
+                </InputGroup>
+                <InputGroup @name="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|>
+                            {{smart-humanize status}}
+                        </PowerSelect>
+                    </div>
+                </InputGroup>
+                <InputGroup @wrapperClass="col-span-2">
+                    <div class="flex items-center justify-between">
+                        <label>
+                            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}} />
+                        </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|>
+                        <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>
+            </ContentPanel>
+        {{/if}}
+    {{/if}}
+</div>

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

@@ -0,0 +1,158 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+import apiUrl from '@fleetbase/ember-core/utils/api-url';
+import contextComponentCallback from '../../utils/context-component-callback';
+
+export default class VendorFormPanelCreateFormComponent extends Component {
+    /**
+     * @service store
+     */
+    @service store;
+
+    /**
+     * @service fetch
+     */
+    @service fetch;
+
+    /**
+     * @service contextPanel
+     */
+    @service contextPanel;
+    /**
+     * State of whether editing credentials is enabled.
+     * @type {Boolean}
+     */
+    @tracked isEditingCredentials = false;
+
+    /**
+     * State of whether to show advanced options for integrated vendor.
+     * @type {Boolean}
+     */
+    @tracked showAdvancedOptions = false;
+
+    /**
+     * The selectable types of vendors.
+     * @type {Array}
+     */
+    @tracked vendorTypes = [
+        { label: 'Choose a integrated vendor', value: 'integrated-vendor' },
+        { label: 'Create a custom vendor', value: 'vendor' },
+    ];
+
+    /**
+     * The selected type of vendor being created or edited.
+     * @type {String}
+     */
+    @tracked selectedVendorType = this.vendorTypes[1];
+
+    /**
+     * The supported integrated vendors.
+     * @type {Array}
+     */
+    @tracked supportedIntegratedVendors = [];
+
+    /**
+     * The selected integrated vendor provider.
+     * @type {Object}
+     */
+    @tracked selectedIntegratedVendor;
+
+    constructor() {
+        super(...arguments);
+        this.vendor = this.args.vendor;
+        this.fetchSupportedIntegratedVendors();
+    }
+
+    @action toggleCredentialsReset() {
+        if (this.isEditingCredentials) {
+            this.isEditingCredentials = false;
+        } else {
+            this.isEditingCredentials = true;
+        }
+    }
+
+    @action toggleAdvancedOptions() {
+        if (this.showAdvancedOptions) {
+            this.showAdvancedOptions = false;
+        } else {
+            this.showAdvancedOptions = true;
+        }
+    }
+
+    @action onSelectVendorType(selectedVendorType) {
+        this.selectedVendorType = selectedVendorType;
+    }
+
+    @action onSelectIntegratedVendor(integratedVendor) {
+        this.selectedIntegratedVendor = integratedVendor;
+        const { credential_params, option_params } = integratedVendor;
+
+        // create credentials object
+        const credentials = {};
+        if (isArray(integratedVendor.credential_params)) {
+            for (let i = 0; i < integratedVendor.credential_params.length; i++) {
+                const param = integratedVendor.credential_params.objectAt(i);
+                credentials[param] = null;
+            }
+        }
+
+        // create options object
+        const options = {};
+        if (isArray(integratedVendor.option_params)) {
+            for (let i = 0; i < integratedVendor.option_params.length; i++) {
+                const param = integratedVendor.option_params.objectAt(i);
+                options[param.key] = null;
+            }
+        }
+
+        const vendor = this.store.createRecord('integrated-vendor', {
+            provider: integratedVendor.code,
+            webhook_url: apiUrl(`listeners/${integratedVendor.code}`),
+            credentials: {},
+            options: {},
+            credential_params,
+            option_params,
+        });
+
+        this.vendor = vendor;
+
+        // trigger callback
+        contextComponentCallback(this, 'onVendorChanged', vendor);
+    }
+
+    @action selectVendorAddress(place) {
+        this.vendor.place = place;
+        this.vendor.place_uuid = place.id;
+    }
+
+    @action async editAddress() {
+        let place;
+
+        if (this.vendor.has_place) {
+            place = await this.vendor.place;
+        } else {
+            place = this.store.createRecord('place');
+        }
+
+        return this.contextPanel.focus(place, 'editing', {
+            onAfterSave: (place) => {
+                this.vendor.place = place;
+                this.contextPanel.clear();
+            },
+        });
+    }
+
+    /**
+     * Fetches the supported integrated vendors.
+     *
+     * @returns {Promise}
+     */
+    fetchSupportedIntegratedVendors() {
+        return this.fetch.get('integrated-vendors/supported').then((supportedIntegratedVendors) => {
+            this.supportedIntegratedVendors = supportedIntegratedVendors;
+        });
+    }
+}

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

@@ -0,0 +1,98 @@
+<div class="space-y-4">
+    {{#if this.isIntegratedVendor}}
+        <ContentPanel @title="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">
+            {{#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."}} />
+                {{/each}}
+                <div class="mt-4">
+                    <a href="javascript:;" class="text-red-600 underline text-sm" {{on "click" this.toggleCredentialsReset}}>Cancel credentials reset</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>
+                </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."}} />
+                    {{/each}}
+                </div>
+            {{/if}}
+        </ContentPanel>
+        <ContentPanel @title="Options" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            {{#each this.vendor.provider_settings.option_params as |param|}}
+                {{#if param.options}}
+                    <InputGroup @name={{smart-humanize param.key}}>
+                        <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."}} />
+                {{/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">
+            <div>
+                <a href="javascript:;" class="text-blue-600 underline text-sm" {{on "click" this.toggleAdvancedOptions}}>{{if
+                        this.showAdvancedOptions
+                        "Hide Advanced Options"
+                        "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!" />
+                </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}} @helpText="The vendor's website, optionally add the vendors website for reference." />
+        <InputGroup @name="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|>
+                    {{smart-humanize type}}
+                </PowerSelect>
+            </div>
+        </InputGroup>
+        <InputGroup @name="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|>
+                    {{smart-humanize status}}
+                </PowerSelect>
+            </div>
+        </InputGroup>
+        <InputGroup @wrapperClass="col-span-2">
+            <div class="flex items-center justify-between">
+                <label>
+                    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}} />
+                </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|>
+                <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>
+    {{/if}}
+</div>