@fleetbase/fleetops-engine 0.3.1 → 0.3.3

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>

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

@@ -0,0 +1,51 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class VendorFormPanelEditFormComponent extends Component {
+    @service store;
+    @service contextPanel;
+    @tracked isIntegratedVendor;
+    @tracked isEditingCredentials = false;
+    @tracked showAdvancedOptions = false;
+
+    constructor() {
+        super(...arguments);
+        this.vendor = this.args.vendor;
+        this.isIntegratedVendor = this.vendor && this.vendor.type === 'integrated-vendor';
+    }
+
+    @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 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);
+    }
+}

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

@@ -0,0 +1,48 @@
+<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
+    <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i">
+        <div class="flex flex-row justify-between w-full">
+            <div class="flex flex-1 flex-row">
+                <div class="w-14">
+                    <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" />
+                        </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">
+                        {{#if this.vendor.id}}
+                            {{this.vendor.name}}
+                        {{else}}
+                            <span>New Vendor</span>
+                        {{/if}}
+                    </h1>
+                    <div class="-mt-1">
+                        <div class="flex flex-row items-center">
+                            <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{n-a (smart-humanize this.vendor.type)}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <Button @icon={{if this.vendor.id "save" "check"}} @type="primary" @text={{if this.vendor.id "Save Vendor" "Create Vendor"}} @onClick={{this.save}} @wrapperClass="mr-2" />
+                {{#if this.vendor.id}}
+                    <Button @type="default" @icon="id-card" @helpText="View fleet details" @onClick={{this.onViewDetails}} @wrapperClass="mr-2" />
+                {{/if}}
+                <Button @type="default" @icon="times" @helpText={{if this.vendor.id "Cancel edit vendor" "Cancel new vendor"}} @onClick={{this.onPressCancel}} />
+            </div>
+        </div>
+    </Overlay::Header>
+
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
+        {{#if this.isEditing}}
+            <VendorFormPanel::EditForm @vendor={{this.vendor}} @vendorTypes={{this.vendorTypeOptions}} @vendorStatusOptions={{this.vendorStatusOptions}} @onVendorChanged={{this.onVendorChanged}} />
+        {{else}}
+            <VendorFormPanel::CreateForm @vendor={{this.vendor}} @vendorTypes={{this.vendorTypeOptions}} @vendorStatusOptions={{this.vendorStatusOptions}} @onVendorChanged={{this.onVendorChanged}} />
+        {{/if}}
+    </Overlay::Body>
+</Overlay>