/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import { h, r as registerInstance, H as Host, a as getElement } from './index-Bf4Ol6Qt.js';
import { L as LoaderIcon } from './loader-icon-DM4Vm5gX.js';
import { c as cn } from './cn-BK16Cn81.js';
import { c as create$3, b as create$6, s as sharedFormLocalesSchema } from './types-BDhR4pDq.js';
import { a as formLanguageChange, b as formLoadingHandler, c as formErrorHandler, d as formSuccessHandler, g as getMarketingValues, e as formDidLoadHandler, h as formGetFormHandler, i as handleFormSubmit, j as formStructureRenderedHandler } from './functions-BKI2r8xy.js';
import { g as getLanguageFromUrl } from './get-language-from-url-DvR7LGV5.js';
import './get-local-language-CE9dtbnG.js';

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 = '';
const VehicleImageViewer = ({ form }) => {
    var _a, _b, _c, _d;
    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.value === vehicleId);
    let imSrc;
    if (selectedVehicle) {
        imSrc = (_b = selectedVehicle === null || selectedVehicle === void 0 ? void 0 : selectedVehicle.meta) === null || _b === void 0 ? void 0 : _b.image;
        vehicleId = selectedVehicle.value;
    }
    else if (form.context['vehicleList'] && form.context['vehicleList'][0]) {
        imSrc = (_d = (_c = form.context['vehicleList'][0]) === null || _c === void 0 ? void 0 : _c.meta) === null || _d === void 0 ? void 0 : _d.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", { style: { 'min-height': '60px' }, part: "vehicle-image-wrapper", class: cn('vehicle-image-wrapper', { loading: isLoading }) },
            h("div", { part: cn('vehicle-image-loading-wrapper', { 'vehicle-image-active-loading-wrapper': isLoading }), class: "loading-wrapper" },
                h(LoaderIcon, { part: "vehicle-image-loader-icon", class: "img" })),
            h("img", { alt: "vehicle image", part: "vehicle-image", src: imageSrcBase64, style: { 'border-radius': '6px', 'transition': 'opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);', 'opacity': isLoading ? '0' : '1' } }))));
};

const vehicleQuotationElements = {
    'submit': ({ props }) => h("form-submit", Object.assign({}, props)),
    'name': ({ props }) => {
        return h("form-input", Object.assign({}, props));
    },
    'phone': ({ props, isLoading }) => h("form-phone-number", Object.assign({ isLoading: isLoading }, props)),
    'vehicle': ({ form, language, props }) => {
        var _a;
        const fetcher = async ({ signal }) => {
            var _a, _b, _c;
            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 } });
            if ((_c = (_b = form.context.structure) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.vehiclesApiStrapiFormat) {
                const res = await response.json();
                let options = res.data;
                return options.map(vehicle => {
                    var _a, _b, _c, _d, _e, _f;
                    return ({
                        label: (vehicle === null || vehicle === void 0 ? void 0 : vehicle.GradeName) || ((_a = vehicle === null || vehicle === void 0 ? void 0 : vehicle.attributes) === null || _a === void 0 ? void 0 : _a.GradeName),
                        value: `${vehicle.id}`,
                        meta: Object.assign(Object.assign({}, vehicle), { image: ((_b = vehicle === null || vehicle === void 0 ? void 0 : vehicle.Cover) === null || _b === void 0 ? void 0 : _b.url) || ((_f = (_e = (_d = (_c = vehicle === null || vehicle === void 0 ? void 0 : vehicle.attributes) === null || _c === void 0 ? void 0 : _c.Cover) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.attributes) === null || _f === void 0 ? void 0 : _f.url) }),
                    });
                });
            }
            else {
                const options = await response.json();
                return options.map(vehicle => ({
                    label: vehicle.Title,
                    value: `${vehicle.ID}`,
                    meta: Object.assign(Object.assign({}, vehicle), { image: vehicle.Image }),
                }));
            }
        };
        let defaultValue;
        if (!props.defaultValue) {
            const params = new URLSearchParams(window.location.search);
            defaultValue = params.get((_a = form.context.structure.data) === null || _a === void 0 ? void 0 : _a.vehicleIdQueryParam);
        }
        else {
            defaultValue = props.defaultValue;
        }
        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 } });
            const options = (await response.json()).map(dealer => ({
                label: dealer.Name,
                value: `${dealer.ID}`,
                meta: Object.assign({}, dealer),
            }));
            return options;
        };
        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: 'Installments',
                    label: locale.Installments,
                },
                {
                    value: 'Flexible',
                    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': 'en' } });
            const options = (await response.json()).filter(vehicle => vehicle.name !== 'Other');
            return [
                ...options.map(vehicle => ({
                    label: vehicle.Name,
                    value: `${vehicle.ID}`,
                    meta: Object.assign({}, vehicle),
                })),
                {
                    value: 'Other',
                    label: locale.Other,
                },
            ];
        };
        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, _b;
            if (!currentVehicleBrand)
                return [];
            const selectedBrand = (_b = (_a = form.context['currentVehicleBrandList']) === null || _a === void 0 ? void 0 : _a.find(vehicle => vehicle.value === currentVehicleBrand)) === null || _b === void 0 ? void 0 : _b.meta;
            if (!selectedBrand)
                return [];
            return [
                ...selectedBrand === null || selectedBrand === void 0 ? void 0 : selectedBrand.Models.map(model => ({ label: model.Name, value: `${model.ID}` })),
                {
                    value: 'Other',
                    label: locale.Other,
                },
            ];
        };
        return (h("form-select", Object.assign({}, props, { searchable: true, fetcher: fetcher, language: language, resetKey: currentVehicleBrand, fetcherKey: currentVehicleBrand, isRequired: ownVehicle && currentVehicleBrand !== 'Other', isDisabled: !currentVehicleBrand || currentVehicleBrand === 'Other' })));
    },
    'vehicleImage': ({ form }) => h(VehicleImageViewer, { form: form }),
    'choose': ({ locale }) => h("h1", { part: "section-title" }, locale.Choose),
    'current car': ({ locale }) => h("h1", { part: "section-title" }, locale['Your current car']),
    'contact information': ({ locale }) => h("h1", { part: "section-title" }, locale['Contact Information']),
    'city': ({ form, language, props }) => {
        const fetcher = async ({ signal }) => {
            var _a;
            const cityEndpoint = (_a = form.context.structure) === null || _a === void 0 ? void 0 : _a.data.cityApi;
            const response = await fetch(cityEndpoint, { signal, headers: { 'Accept-Language': language } });
            const options = (await response.json()).map(city => ({
                label: city.Name,
                value: `${city.ID}`,
                meta: Object.assign({}, city),
            }));
            return options;
        };
        return h("form-select", Object.assign({}, props, { clearable: true, searchable: true, fetcher: fetcher, language: language }));
    },
};

const vehicleQuotationInputsValidation = create$3({
    vehicle: create$6()
        .meta({ label: 'Vehicle', placeholder: 'Please select a Vehicle' })
        .required('This field is required.'),
    name: create$6()
        .meta({ label: 'Full name', placeholder: 'Full name' })
        .required('Full name is required')
        .min(3, 'Full name minimum'),
    dealer: create$6()
        .meta({ label: 'Dealer', placeholder: 'Select a dealer' })
        .required('Dealer is required'),
    city: create$6()
        .meta({ label: 'City', placeholder: 'Select a City' })
        .required('This field is required.'),
    paymentType: create$6()
        .meta({ label: 'Preferred purchasing method', placeholder: 'Select the purchasing method' })
        .when('$paymentTypeRequired', {
        is: true,
        otherwise: schema => schema.optional(),
        then: schema => schema.required('This field is required.'),
    }),
    contactTime: create$6()
        .meta({ label: 'Preferred contact time', placeholder: 'Please select a time' })
        .when('$contactTimeRequired', {
        is: true,
        otherwise: schema => schema.optional(),
        then: schema => schema.required('This field is required.'),
    }),
    ownVehicle: create$6()
        .meta({ label: 'Do you own a vehicle?', placeholder: 'Do you own a vehicle?' })
        .when('$ownVehicleRequired', {
        is: true,
        otherwise: schema => schema.optional(),
        then: schema => schema.required('This field is required.'),
    }),
    currentVehicleBrand: create$6()
        .meta({ label: 'Your current vehicle', placeholder: 'Your current vehicle' })
        .when('ownVehicle', {
        is: (val) => val === 'yes',
        then: schema => schema.required('Please answer this field'),
        otherwise: schema => schema.optional(),
    }),
    currentVehicleModel: create$6()
        .meta({ label: 'Vehicle Model', placeholder: 'Vehicle Model' })
        .when(['ownVehicle', 'currentVehicleBrand'], {
        is: (ownVehicle, brand) => ownVehicle === 'yes' && brand !== 'Other',
        then: schema => schema.required('Please answer this field'),
        otherwise: schema => schema.optional(),
    }),
});

const themesCss = "*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host{all:initial!important;display:block;font-family:inherit!important}@keyframes spin{to{transform:rotate(1turn)}}.form-loader-container .img{animation:spin 2s linear infinite;height:32px;width:32px}*{-webkit-user-select:none;-moz-user-select:none;user-select:none}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-0{top:0}.flex{display:flex}.h-full{height:100%}.min-h-\\[150px\\]{min-height:150px}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.opacity-0{opacity:0}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-500{transition-duration:.5s}.\\!h-auto{height:auto!important}.min-w-full{min-width:100%}.resize{resize:both}.overflow-hidden{overflow:hidden}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.\\!transition-none{transition-property:none!important}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\\!duration-0{transition-duration:0s!important}.\\!duration-500{transition-duration:.5s!important}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.cursor-pointer{cursor:pointer}";

const VehicleQuotationForm = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.locale = { sharedFormLocales: sharedFormLocalesSchema.getDefault() };
        this.isLoading = false;
        this.structureRendered = false;
        this.isDev = false;
        this.isMobileForm = false;
    }
    async changeLanguage(newLanguage) {
        await formLanguageChange(this, newLanguage);
    }
    setIsLoading(isLoading) {
        formLoadingHandler(this, isLoading);
    }
    setErrorCallback(error) {
        formErrorHandler(this, error);
    }
    setSuccessCallback(data) {
        formSuccessHandler(this, data);
    }
    async componentWillLoad() {
        if (!this.language)
            this.language = getLanguageFromUrl();
    }
    async formSubmit(formValues) {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
        try {
            this.setIsLoading(true);
            const nameContactedVehicles = (_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.nameContactedVehicles;
            const marketingValues = getMarketingValues(this.structure);
            let payload = Object.assign({ name: formValues.name, phone: formValues.phone, companyBranchId: formValues.dealer, cityId: formValues === null || formValues === void 0 ? void 0 : formValues.city, vehicleQuotationType: (_d = (_c = this.structure) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.quotationType, preferredContactTime: (formValues === null || formValues === void 0 ? void 0 : formValues.contactTime) || 'NotSpecified', preferredPaymentMethod: (formValues === null || formValues === void 0 ? void 0 : formValues.paymentType) || 'Flexible' }, marketingValues);
            if (nameContactedVehicles) {
                payload.vehicle = ((_e = this['vehicleList'].find(vehicle => vehicle.value === formValues.vehicle)) === null || _e === void 0 ? void 0 : _e.label) || '';
                if ((formValues === null || formValues === void 0 ? void 0 : formValues.ownVehicle) === 'yes') {
                    const currentBrand = ((_f = this['currentVehicleBrandList'].find(brand => brand.value === formValues.currentVehicleBrand)) === null || _f === void 0 ? void 0 : _f.meta) || false;
                    let currentModel;
                    if (currentBrand)
                        currentModel = currentBrand.Models.find(model => `${model.ID}` === formValues.currentVehicleModel) || false;
                    payload.currentOrTradeInVehicle = `${(currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.Name) || this.locale.Other} - ${(currentModel === null || currentModel === void 0 ? void 0 : currentModel.Name) || this.locale.Other}`;
                }
            }
            else {
                payload.vehicle = formValues.vehicle;
                payload.additionalData = {
                    DoYouOwnAVehicle: (formValues === null || formValues === void 0 ? void 0 : formValues.ownVehicle) === 'yes',
                };
                if ((formValues === null || formValues === void 0 ? void 0 : formValues.ownVehicle) === 'yes') {
                    payload.additionalData.yourCurrentVehicle = (formValues === null || formValues === void 0 ? void 0 : formValues.currentVehicleBrand) || this.locale.Other;
                    payload.additionalData.vehicleModel = (formValues === null || formValues === void 0 ? void 0 : formValues.currentVehicleModel) || this.locale.Other;
                }
            }
            const headers = {
                'Brand': (_h = (_g = this.structure) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.brandId,
                'Accept-Language': this.localeLanguage || 'en',
                'Content-Type': 'application/json',
            };
            let requestEndpoint = '';
            if (this.isMobileForm) {
                const token = await this.getMobileToken();
                if (token.toLowerCase().startsWith('bearer')) {
                    headers['Authorization'] = token;
                    requestEndpoint = (_k = (_j = this.structure) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.requestAppUrl;
                }
                else {
                    headers['verification-token'] = token;
                    requestEndpoint = (_m = (_l = this.structure) === null || _l === void 0 ? void 0 : _l.data) === null || _m === void 0 ? void 0 : _m.requestAppCheckUrl;
                }
            }
            else {
                requestEndpoint = (_p = (_o = this.structure) === null || _o === void 0 ? void 0 : _o.data) === null || _p === void 0 ? void 0 : _p.requestUrl;
                const token = await grecaptcha.execute((_r = (_q = this.structure) === null || _q === void 0 ? void 0 : _q.data) === null || _r === void 0 ? void 0 : _r.recaptchaKey, { action: 'submit' });
                headers['Recaptcha-Token'] = token;
            }
            if (this.isDev)
                requestEndpoint = requestEndpoint.replaceAll('production=true', 'production=false');
            if ((_t = (_s = this.structure) === null || _s === void 0 ? void 0 : _s.data) === null || _t === void 0 ? void 0 : _t.extraPayload)
                payload = Object.assign(Object.assign({}, payload), (_v = (_u = this.structure) === null || _u === void 0 ? void 0 : _u.data) === null || _v === void 0 ? void 0 : _v.extraPayload);
            const response = await fetch(requestEndpoint, {
                headers,
                method: 'POST',
                body: JSON.stringify(payload),
            });
            if (response === null || response === void 0 ? void 0 : response.ok) {
                const result = await (response === null || response === void 0 ? void 0 : response.json().catch(() => ({})));
                const eventHolder = (_x = (_w = this.structure) === null || _w === void 0 ? void 0 : _w.data) === null || _x === void 0 ? void 0 : _x.pushAnalyticsEventTo;
                if (eventHolder) {
                    window[eventHolder] = window[eventHolder] || [];
                    window[eventHolder].push({
                        event: 'get_a_quote',
                        phone: formValues.phone,
                        fullname: formValues.name,
                        dealer: (_y = this['dealerList'].find(d => d.value === formValues.dealer)) === null || _y === void 0 ? void 0 : _y.label,
                        vehicle: (_z = this['vehicleList'].find(v => v.value === formValues.vehicle)) === null || _z === void 0 ? void 0 : _z.label,
                    });
                }
                this.setSuccessCallback(result);
                setTimeout(() => {
                    this.form.reset();
                    this.form.rerender({ rerenderForm: true, rerenderAll: true });
                }, 100);
            }
            else {
                const contentType = response.headers.get('content-type') || '';
                const errorText = contentType.includes('application/json') ? ((_2 = (_1 = (_0 = (await response.json().catch(() => ({})))) === null || _0 === void 0 ? void 0 : _0.message) === null || _1 === void 0 ? void 0 : _1.body) !== null && _2 !== void 0 ? _2 : '') : await response.text().catch(() => '');
                throw new Error(errorText);
            }
        }
        catch (error) {
            console.error(error);
            this.setErrorCallback(error);
        }
        finally {
            this.setIsLoading(false);
        }
    }
    // #endregion
    // #region Component Logic
    async componentDidLoad() {
        await formDidLoadHandler(this, vehicleQuotationInputsValidation);
    }
    async getForm() {
        return await formGetFormHandler(this);
    }
    async submit() {
        await handleFormSubmit(this);
    }
    async structureChanged(isRendered) {
        await formStructureRenderedHandler(this, isRendered);
    }
    // #endregion
    render() {
        var _a, _b;
        return (h(Host, { key: 'fdc919a8b52675e1dd598408cc7f056d992c1517', translate: "no" }, h("div", { key: 'd11a5531f061e778038eedea7cca02b0ad834332', part: `shift-form vehicle-quotation-${(_b = (_a = this.structure) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.theme}` }, h("div", { key: 'abac151f3be810dbd850b63e7c692afe4e5f14fe', part: "form-container", class: "relative min-h-[150px]" }, h("div", { key: 'e6dcec2bd78ddef371e3adb5f249b4c3e7e8587c', part: "form-loader-container", class: cn('form-loader-container absolute top-0 left-0 w-full h-full pointer-events-none flex justify-center items-center transition-opacity duration-500', {
                'opacity-0': this.structureRendered,
            }) }, h(LoaderIcon, { key: '155668175e0735e2314ce55b586bd82df4a3c2df', part: "form-loader-icon", class: "img" })), h("flexible-container", { key: '61dea530ef1a00cd09a2b2871262573e8b1248a3', onlyForMounting: true, isOpened: this.structureRendered }, !!this.form && (h("form-structure", { key: '572c108a4d67e1443ca9f90585fa3339a5ffaea5', form: this.form, fields: this.fields, formId: this.formId, formLocale: this.locale, structure: this.structure, isLoading: this.isLoading, language: this.localeLanguage, errorMessage: this.errorMessage, formElementMapper: vehicleQuotationElements, successMessage: this.locale['Form submitted successfully.'] }, h("slot", { key: '8e0b1e969144912d4ce5c87edb8d7ede708be3e0' }))))))));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "language": ["changeLanguage"],
        "structureRendered": ["structureChanged"]
    }; }
};
VehicleQuotationForm.style = themesCss;

export { VehicleQuotationForm as vehicle_quotation_form };
