adp-web-components 0.0.95 → 0.0.97

package/dist/collection/components/forms/{service-booking-form.js → demo-form.js}

@@ -4,38 +4,58 @@
  */
 import { Host, h } from "@stencil/core";
 import cn from "../../global/lib/cn";
-import { FormHook } from "../../global/lib/form-hook";
-import { contactUsSchema } from "./service-booking/validations";
-import themes from "./service-booking/themes.json";
-import { contactUsElements } from "./service-booking/element-mapper";
-export class ContactUsForm {
+import demoSchema from "../../locales/forms/demo/type";
+import { DemoStructures } from "./demo/structure";
+import { demoElements } from "./demo/element-mapper";
+import { demoInputsValidation } from "./demo/validations";
+import { FormHook } from "../../features/form-hook/form-hook";
+import { gistLoader } from "../../features/form-hook/index";
+import { getLocaleLanguage, getSharedFormLocal, sharedFormLocalesSchema } from "../../features/multi-lingual/index";
+export class DemoForm {
     constructor() {
-        this.queryString = '';
+        // ====== Start Localization
         this.language = 'en';
-        this.structure = '["submit.Submit"]';
+        this.locale = Object.assign({ sharedFormLocales: sharedFormLocalesSchema.getDefault() }, demoSchema.getDefault());
+        this.queryString = '';
         this.recaptchaKey = '6Lehq6IpAAAAAETTDS2Zh60nHIT1a8oVkRtJ2WsA';
-        this.renderControl = {};
         this.recaptchaWidget = null;
-        this.form = new FormHook(this, contactUsSchema);
+        this.form = new FormHook(this, demoInputsValidation);
     }
-    async componentDidLoad() {
-        try {
-            if (this.recaptchaKey) {
-                const script = document.createElement('script');
-                script.src = `https://www.google.com/recaptcha/api.js?render=${this.recaptchaKey}&hl=${this.language}`;
-                script.async = true;
-                script.defer = true;
-                document.head.appendChild(script);
-            }
-        }
-        catch (error) {
-            console.log(error);
-        }
+    async changeLanguage(newLanguage) {
+        const [sharedLocales, locale] = await Promise.all([getSharedFormLocal(newLanguage), getLocaleLanguage(newLanguage, 'forms.demo', demoSchema)]);
+        this.locale = Object.assign(Object.assign({}, sharedLocales), locale);
+        this.form.rerender({ rerenderAll: true });
+    }
+    setIsLoading(isLoading) {
+        this.isLoading = isLoading;
+        if (this.loadingChanges)
+            this.loadingChanges(true);
+    }
+    setErrorCallback(error) {
+        if (error === null || error === void 0 ? void 0 : error.message)
+            this.errorMessage = error.message;
+        if (this.errorCallback)
+            this.errorCallback(error);
+    }
+    setSuccessCallback(data) {
+        if (this.successCallback)
+            this.successCallback(data);
+    }
+    async componentWillLoad() {
+        await this.changeLanguage(this.language);
+        if (this.structure)
+            return;
+        if (this.gistId)
+            this.structure = await gistLoader(this.gistId);
+        else if (this.theme === 'tiq')
+            this.structure = DemoStructures.tiq;
     }
     async formSubmit(formValues) {
         try {
-            if (this.loadingChanges)
-                this.loadingChanges(true);
+            console.log(formValues);
+            this.setIsLoading(true);
+            if (formValues)
+                throw new Error('a');
             const token = await grecaptcha.execute(this.recaptchaKey, { action: 'submit' });
             const response = await fetch(`${this.baseUrl}?${this.queryString}`, {
                 method: 'post',
@@ -48,43 +68,78 @@ export class ContactUsForm {
                 },
             });
             const data = await response.json();
-            if (this.successCallback)
-                this.successCallback(data);
-            this.form.successAnimation();
+            this.setSuccessCallback(data);
+            this.form.openDialog();
             setTimeout(() => {
                 this.form.reset();
             }, 1000);
         }
         catch (error) {
             console.error(error);
-            if (this.errorCallback)
-                this.errorCallback(error);
-            if (error === null || error === void 0 ? void 0 : error.message)
-                this.errorMessage = error.message;
+            this.setErrorCallback(error);
         }
         finally {
-            if (this.loadingChanges)
-                this.loadingChanges(false);
+            this.setIsLoading(false);
+        }
+    }
+    async componentDidLoad() {
+        try {
+            if (this.recaptchaKey) {
+                const script = document.createElement('script');
+                script.src = `https://www.google.com/recaptcha/api.js?render=${this.recaptchaKey}&hl=${this.language}`;
+                script.async = true;
+                script.defer = true;
+                document.head.appendChild(script);
+            }
+        }
+        catch (error) {
+            console.log(error);
         }
     }
     render() {
-        return (h(Host, { key: '57f35d04d5143f9189a9d0fbaaee4eb66b5cc85e', class: cn({
-                [`contact-us-${this.theme}`]: this.theme,
-            }) }, h("form-structure", { key: '75abaa68a1f53950df1f2ffaed471c09e995aa29', themes: themes, form: this.form, theme: this.theme, language: this.language, isLoading: this.isLoading, errorMessage: this.errorMessage, renderControl: this.renderControl, formElementMapper: contactUsElements }, h("slot", { key: 'bd586fa7cd1904d6d1d46c45c8a6b8d53dd461ec' }))));
+        return (h(Host, { key: '14d89e07a2c08ef76120b6294501be5b6a123fd8', class: cn({
+                [`demo-${this.theme}`]: this.theme,
+            }) }, h("form-structure", { key: 'df56b9446ecac93641b32caa4a501cba900500f7', form: this.form, language: this.language, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, errorMessage: this.errorMessage, formElementMapper: demoElements }, h("slot", { key: 'c014998b1962835e798764b19328ed718216616f' }))));
     }
-    static get is() { return "service-booking-form"; }
+    static get is() { return "demo-form"; }
     static get originalStyleUrls() {
         return {
-            "$": ["service-booking/form.css"]
+            "$": ["demo/themes.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["service-booking/form.css"]
+            "$": ["demo/themes.css"]
         };
     }
     static get properties() {
         return {
+            "language": {
+                "type": "string",
+                "attribute": "language",
+                "mutable": false,
+                "complexType": {
+                    "original": "LanguageKeys",
+                    "resolved": "\"ar\" | \"en\" | \"ku\" | \"ru\"",
+                    "references": {
+                        "LanguageKeys": {
+                            "location": "import",
+                            "path": "~features/multi-lingual",
+                            "id": "src/features/multi-lingual/index.ts::LanguageKeys"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'en'"
+            },
             "theme": {
                 "type": "string",
                 "attribute": "theme",
@@ -104,9 +159,9 @@ export class ContactUsForm {
                 "setter": false,
                 "reflect": false
             },
-            "baseUrl": {
+            "gistId": {
                 "type": "string",
-                "attribute": "base-url",
+                "attribute": "gist-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -114,7 +169,7 @@ export class ContactUsForm {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -142,13 +197,13 @@ export class ContactUsForm {
                 "setter": false,
                 "reflect": false
             },
-            "queryString": {
-                "type": "string",
-                "attribute": "query-string",
+            "errorCallback": {
+                "type": "unknown",
+                "attribute": "error-callback",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "(error: any) => void",
+                    "resolved": "(error: any) => void",
                     "references": {}
                 },
                 "required": false,
@@ -158,24 +213,16 @@ export class ContactUsForm {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "''"
+                "setter": false
             },
-            "language": {
-                "type": "string",
-                "attribute": "language",
+            "successCallback": {
+                "type": "unknown",
+                "attribute": "success-callback",
                 "mutable": false,
                 "complexType": {
-                    "original": "LanguageKeys",
-                    "resolved": "\"ar\" | \"en\" | \"ku\" | \"ru\"",
-                    "references": {
-                        "LanguageKeys": {
-                            "location": "import",
-                            "path": "~features/multi-lingual",
-                            "id": "src/features/multi-lingual/index.ts::LanguageKeys"
-                        }
-                    }
+                    "original": "(data: any) => void",
+                    "resolved": "(data: any) => void",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
@@ -184,17 +231,15 @@ export class ContactUsForm {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'en'"
+                "setter": false
             },
-            "structure": {
-                "type": "string",
-                "attribute": "structure",
+            "loadingChanges": {
+                "type": "unknown",
+                "attribute": "loading-changes",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "(loading: boolean) => void",
+                    "resolved": "(loading: boolean) => void",
                     "references": {}
                 },
                 "required": false,
@@ -204,18 +249,27 @@ export class ContactUsForm {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'[\"submit.Submit\"]'"
+                "setter": false
             },
-            "recaptchaKey": {
-                "type": "string",
-                "attribute": "recaptcha-key",
+            "structure": {
+                "type": "unknown",
+                "attribute": "structure",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "FormElementStructure<demoElementNames> | undefined",
+                    "resolved": "{ data?: Record<string, any>; } & { id?: string; class?: string; children?: (\"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }> | FormElementStructureComponents<\"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }>>)[]; } & { tag: string; name?: \"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }>; } | { data?: Record<string, any>; } & { id?: string; class?: string; children?: (\"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }> | FormElementStructureComponents<\"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }>>)[]; } & { tag?: string; name: \"submit\" | OptionalKeys<{ confirmPolicy: boolean; ageConfirmation: true; cityId: string; email: string; message: string; generalTicketType: string; name: string; phone: string; }>; }",
+                    "references": {
+                        "FormElementStructure": {
+                            "location": "import",
+                            "path": "~features/form-hook",
+                            "id": "src/features/form-hook/index.ts::FormElementStructure"
+                        },
+                        "demoElementNames": {
+                            "location": "import",
+                            "path": "./demo/element-mapper",
+                            "id": "src/components/forms/demo/element-mapper.tsx::demoElementNames"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -224,17 +278,15 @@ export class ContactUsForm {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'6Lehq6IpAAAAAETTDS2Zh60nHIT1a8oVkRtJ2WsA'"
+                "setter": false
             },
-            "errorCallback": {
-                "type": "unknown",
-                "attribute": "error-callback",
+            "baseUrl": {
+                "type": "string",
+                "attribute": "base-url",
                 "mutable": false,
                 "complexType": {
-                    "original": "(error: any) => void",
-                    "resolved": "(error: any) => void",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -244,15 +296,16 @@ export class ContactUsForm {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false
             },
-            "successCallback": {
-                "type": "unknown",
-                "attribute": "success-callback",
+            "queryString": {
+                "type": "string",
+                "attribute": "query-string",
                 "mutable": false,
                 "complexType": {
-                    "original": "(values: any) => void",
-                    "resolved": "(values: any) => void",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -262,15 +315,17 @@ export class ContactUsForm {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
             },
-            "loadingChanges": {
-                "type": "unknown",
-                "attribute": "loading-changes",
+            "recaptchaKey": {
+                "type": "string",
+                "attribute": "recaptcha-key",
                 "mutable": false,
                 "complexType": {
-                    "original": "(loading: boolean) => void",
-                    "resolved": "(loading: boolean) => void",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -280,16 +335,24 @@ export class ContactUsForm {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'6Lehq6IpAAAAAETTDS2Zh60nHIT1a8oVkRtJ2WsA'"
             }
         };
     }
     static get states() {
         return {
+            "locale": {},
             "isLoading": {},
-            "renderControl": {},
             "errorMessage": {}
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "language",
+                "methodName": "changeLanguage"
+            }];
+    }
 }

package/dist/collection/components/forms/vehicle-quotation/VehicleImageViewer.js

@@ -0,0 +1,50 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { h } from "@stencil/core";
+import { LoaderIcon } from "../../../global/assets/loader-icon";
+import cn from "../../../global/lib/cn";
+const cachedImages = {};
+const cacheImage = (form, imSrc, id) => {
+    fetch(imSrc)
+        .then(res => res.blob())
+        .then(blob => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            cachedImages[id] = reader.result;
+            form.rerender({ rerenderForm: true });
+        };
+        reader.readAsDataURL(blob);
+    })
+        .catch(e => {
+        console.log(e);
+        // fail silently, keep fallback
+    });
+};
+let imageSrcBase64 = '';
+export const VehicleImageViewer = ({ form }) => {
+    var _a, _b, _c;
+    form.addWatcher('vehicle');
+    let vehicleId = form.getValue('vehicle');
+    let openContainer = !!vehicleId;
+    const selectedVehicle = (_a = form.context['vehicleList']) === null || _a === void 0 ? void 0 : _a.find(vehicle => `${vehicle === null || vehicle === void 0 ? void 0 : vehicle.ID}` === vehicleId);
+    let imSrc;
+    if (selectedVehicle) {
+        imSrc = selectedVehicle === null || selectedVehicle === void 0 ? void 0 : selectedVehicle.Image;
+        vehicleId = selectedVehicle.ID;
+    }
+    else if (form.context['vehicleList'] && form.context['vehicleList'][0]) {
+        imSrc = (_c = (_b = form.context['vehicleList'][0]) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c.image;
+        vehicleId = form.context['vehicleList'][0].value;
+    }
+    let isLoading = false;
+    if (cachedImages[vehicleId]) {
+        imageSrcBase64 = cachedImages[vehicleId];
+    }
+    else if (form && imSrc && vehicleId) {
+        cacheImage(form, imSrc, vehicleId);
+        isLoading = true;
+    }
+    return (h("flexible-container", { isOpened: openContainer }, h("div", { class: cn('vehicle-image-wrapper', { loading: isLoading }) }, h("div", { class: "loading-wrapper" }, h(LoaderIcon, { class: "img" })), h("img", { src: imageSrcBase64, alt: "toyota vehicle" }))));
+};

package/dist/collection/components/forms/vehicle-quotation/element-mapper.js

@@ -0,0 +1,139 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { forceUpdate, h } from "@stencil/core";
+import { phoneValidator } from "./validations";
+import { VehicleImageViewer } from "./VehicleImageViewer";
+export const vehicleQuotationElements = {
+    'submit': ({ props }) => h("form-submit", Object.assign({}, props)),
+    'name': ({ props }) => h("form-input", Object.assign({}, props)),
+    'phone': ({ props, isLoading }) => h("form-phone-number", Object.assign({}, props, { isLoading: isLoading, defaultValue: phoneValidator.default, validator: phoneValidator })),
+    'vehicle': ({ form, language, props }) => {
+        var _a;
+        const fetcher = async ({ signal }) => {
+            var _a;
+            const vehicleEndpoint = (_a = form.context.structure) === null || _a === void 0 ? void 0 : _a.data.vehicleApi;
+            const response = await fetch(vehicleEndpoint, { signal, headers: { 'Accept-Language': language } });
+            form.context['vehicleList'] = await response.json();
+            forceUpdate(form.formStructure);
+            return form.context['vehicleList'].map(vehicle => ({
+                label: vehicle.Title,
+                value: `${vehicle.ID}`,
+                meta: { image: vehicle.Image },
+            }));
+        };
+        const params = new URLSearchParams(window.location.search);
+        const defaultValue = params.get((_a = form.context.structure.data) === null || _a === void 0 ? void 0 : _a.vehicleIdQueryParam);
+        return h("form-select", Object.assign({}, props, { defaultValue: defaultValue, searchable: true, fetcher: fetcher, language: language }));
+    },
+    'dealer': ({ form, language, props }) => {
+        const fetcher = async ({ signal }) => {
+            var _a;
+            const dealerEndpoint = (_a = form.context.structure) === null || _a === void 0 ? void 0 : _a.data.dealerApi;
+            const response = await fetch(dealerEndpoint, { signal, headers: { 'Accept-Language': language } });
+            form.context['dealerList'] = (await response.json()).map(dealer => ({
+                label: dealer.Name,
+                value: `${dealer.ID}`,
+            }));
+            return form.context['dealerList'];
+        };
+        return h("form-select", Object.assign({}, props, { clearable: true, searchable: true, fetcher: fetcher, language: language }));
+    },
+    'paymentType': ({ language, props, locale }) => {
+        const fetcher = async ({}) => {
+            return [
+                {
+                    value: 'Cash',
+                    label: locale === null || locale === void 0 ? void 0 : locale.Cash,
+                },
+                {
+                    value: 'FlexiblePaymentPlan',
+                    label: locale.Flexible,
+                },
+            ];
+        };
+        return h("form-select", Object.assign({}, props, { clearable: true, fetcher: fetcher, language: language }));
+    },
+    'contactTime': ({ language, props, locale }) => {
+        const fetcher = async ({}) => {
+            return [
+                {
+                    value: 'Morning',
+                    label: locale === null || locale === void 0 ? void 0 : locale.Morning,
+                },
+                {
+                    value: 'Noon',
+                    label: locale === null || locale === void 0 ? void 0 : locale.Noon,
+                },
+                {
+                    value: 'Afternoon',
+                    label: locale === null || locale === void 0 ? void 0 : locale.Afternoon,
+                },
+            ];
+        };
+        return h("form-select", Object.assign({}, props, { clearable: true, fetcher: fetcher, language: language }));
+    },
+    'ownVehicle': ({ language, props, locale }) => {
+        const fetcher = async ({}) => {
+            return [
+                {
+                    value: 'yes',
+                    label: locale === null || locale === void 0 ? void 0 : locale.Yes,
+                },
+                {
+                    value: 'no',
+                    label: locale === null || locale === void 0 ? void 0 : locale.No,
+                },
+            ];
+        };
+        return h("form-select", Object.assign({}, props, { fetcher: fetcher, language: language }));
+    },
+    'currentVehicleBrand': ({ form, language, props, locale }) => {
+        form.addWatcher('ownVehicle');
+        const ownVehicle = form.getValue('ownVehicle') === 'yes';
+        const fetcher = async ({ signal }) => {
+            var _a;
+            const currentVehiclesEndpoint = (_a = form.context.structure) === null || _a === void 0 ? void 0 : _a.data.currentVehiclesApi;
+            const response = await fetch(currentVehiclesEndpoint, { signal, headers: { 'Accept-Language': language } });
+            form.context['currentVehiclesList'] = await response.json();
+            return [
+                ...form.context['currentVehiclesList'].map(vehicle => ({
+                    label: vehicle.name,
+                    value: `${vehicle.id}`,
+                })),
+                {
+                    value: 'others',
+                    label: locale.Others,
+                },
+            ];
+        };
+        return h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, language: language, resetKey: ownVehicle, isRequired: ownVehicle, isDisabled: !ownVehicle }));
+    },
+    'currentVehicleModel': ({ form, language, props, locale }) => {
+        form.addWatcher('ownVehicle');
+        form.addWatcher('currentVehicleBrand');
+        const ownVehicle = form.getValue('ownVehicle') === 'yes';
+        const currentVehicleBrand = form.getValue('currentVehicleBrand');
+        const fetcher = async ({}) => {
+            var _a;
+            if (!currentVehicleBrand)
+                return [];
+            const selectedBrand = (_a = form.context['currentVehiclesList']) === null || _a === void 0 ? void 0 : _a.find(vehicle => `${vehicle === null || vehicle === void 0 ? void 0 : vehicle.id}` === currentVehicleBrand);
+            if (!selectedBrand)
+                return [];
+            return [
+                ...selectedBrand === null || selectedBrand === void 0 ? void 0 : selectedBrand.models.map(model => ({ label: model.name, value: `${model.id}` })),
+                {
+                    value: 'others',
+                    label: locale.Others,
+                },
+            ];
+        };
+        return (h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, language: language, resetKey: currentVehicleBrand, fetcherKey: currentVehicleBrand, isRequired: ownVehicle && currentVehicleBrand !== 'others', isDisabled: !currentVehicleBrand || currentVehicleBrand === 'others' })));
+    },
+    'vehicleImage': ({ form }) => h(VehicleImageViewer, { form: form }),
+    'choose': ({ locale }) => h("h1", { class: "section-title" }, locale.Choose),
+    'current car': ({ locale }) => h("h1", { class: "section-title" }, locale['Your current car']),
+    'contact information': ({ locale }) => h("h1", { class: "section-title" }, locale['Contact Information']),
+};

package/dist/collection/components/forms/vehicle-quotation/structure.js

@@ -0,0 +1,34 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+// import { vehicleQuotationElementNames } from './element-mapper';
+// import { FormElementStructure } from '~features/form-hook';
+// const tiq: FormElementStructure<vehicleQuotationElementNames> = {
+//   data: {
+//     theme: 'tiq',
+//     brandId: 'kWrKw',
+//     vehicleIdQueryParam: 'cId',
+//     nameContactedVehicles: true,
+//     quotationType: 'NewVehiclePurchase',
+//     recaptchaKey: '6Lehq6IpAAAAAETTDS2Zh60nHIT1a8oVkRtJ2WsA',
+//     vehicleApi: 'https://tiq-publications-functions.azurewebsites.net/api/models',
+//     currentVehiclesApi: 'https://tiq-vehicles-functions-staging.azurewebsites.net/api/BrandAndModels',
+//     requestUrl: 'https://tiq-tickets.azurewebsites.net/api/external/website/vehicle-quotation?production=false',
+//     dealerApi: 'https://tiq-identity-server.azurewebsites.net/api/public/company-branch?brands=TYT&services=new-vehicle-sale',
+//   },
+//   tag: 'div',
+//   id: 'container',
+//   children: [
+//     'choose',
+//     { tag: 'div', id: 'vehicle-wrapper', children: ['vehicle', 'vehicleImage'] },
+//     { tag: 'hr' },
+//     'contact information',
+//     { tag: 'div', id: 'inputs_wrapper', children: ['name', 'phone', 'dealer', 'paymentType'] },
+//     { tag: 'hr' },
+//     'current car',
+//     { tag: 'div', id: 'inputs_wrapper', children: ['ownVehicle', 'currentVehicleBrand', 'currentVehicleModel'] },
+//     { name: 'submit', id: 'Submit' },
+//   ],
+// };
+// export const VehicleQuotationStructures = { tiq };