adp-web-components 0.0.89 → 0.0.91

package/dist/collection/components/vehicle-lookup/vehicle-claimable-items.js

@@ -0,0 +1,826 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Host, h } from "@stencil/core";
+import cn from "../../global/lib/cn";
+import { scrollIntoContainerView } from "../../global/lib/scroll-into-container-view";
+import { VehicleInfoLayout } from "../../features/vehicle-info-layout/index";
+import { setVehicleLookupData, setVehicleLookupErrorState } from "../../features/vehicle-lookup-component/index";
+import { getLocaleLanguage, getSharedLocal, sharedLocalesSchema } from "../../features/multi-lingual/index";
+import { ClaimableItem } from "./components/claimable-item";
+import { ClaimableItemPopover } from "./components/claimable-item-popover";
+import dynamicClaimSchema from "../../locales/vehicleLookup/claimableItems/type";
+import { PrintIcon } from "../../global/assets/print-icon";
+import { ActivationIcon } from "../../global/assets/activation-icon";
+import { EmptyTableIcon } from "../../global/assets/empty-table-icon";
+export class VehicleClaimableItems {
+    constructor() {
+        // ====== Start Localization
+        this.language = 'en';
+        this.locale = Object.assign({ sharedLocales: sharedLocalesSchema.getDefault() }, dynamicClaimSchema.getDefault());
+        // ====== End Localization
+        // ====== Start Vehicle info layout prop
+        this.coreOnly = false;
+        this.headers = {};
+        this.queryString = '';
+        this.uploadMultipleDocumentsAtTheForm = true;
+        this.isError = false;
+        this.isLoading = false;
+        this.maximumDocumentFileSizeInMb = 30;
+        this.claimEndPoint = 'api/vehicle/swift-claim';
+        this.activeTab = '';
+        this.showPrintBox = false;
+        this.tabAnimationLoading = false;
+        this.lastSuccessfulClaimResponse = null;
+        this.showClaimableItemPopover = false;
+        this.tabs = [];
+        this.popoverTargetLocation = { left: 0, bottom: 0, top: 0 };
+        this.getServiceItems = () => {
+            var _a, _b, _c, _d, _e;
+            if (!((_b = (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.serviceItems) === null || _b === void 0 ? void 0 : _b.length))
+                return [];
+            if (!((_c = this.tabs) === null || _c === void 0 ? void 0 : _c.length))
+                return (_d = this.vehicleLookup) === null || _d === void 0 ? void 0 : _d.serviceItems;
+            return (_e = this.vehicleLookup) === null || _e === void 0 ? void 0 : _e.serviceItems.filter(serviceItem => { var _a; return ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.group) === null || _a === void 0 ? void 0 : _a.name) === this.activeTab; });
+        };
+        this.parseGroupData = (vehicleLookup) => {
+            var _a;
+            if ((_a = vehicleLookup === null || vehicleLookup === void 0 ? void 0 : vehicleLookup.serviceItems) === null || _a === void 0 ? void 0 : _a.length) {
+                let orderedGroups = [];
+                const unOrderedGroups = [];
+                vehicleLookup.serviceItems.forEach(({ group }) => {
+                    if (!(group === null || group === void 0 ? void 0 : group.name))
+                        return;
+                    if ([...orderedGroups, ...unOrderedGroups].find(g => (g === null || g === void 0 ? void 0 : g.name) === (group === null || group === void 0 ? void 0 : group.name)))
+                        return;
+                    if (group === null || group === void 0 ? void 0 : group.isDefault)
+                        this.activeTab = group === null || group === void 0 ? void 0 : group.name;
+                    if (typeof (group === null || group === void 0 ? void 0 : group.tabOrder) === 'number')
+                        orderedGroups.push(group);
+                    else
+                        unOrderedGroups.push(group);
+                });
+                if (!!unOrderedGroups.length || !!orderedGroups.length) {
+                    orderedGroups = orderedGroups.sort((a, b) => a.tabOrder - b.tabOrder);
+                    this.tabs = [...orderedGroups, ...unOrderedGroups];
+                    if (!this.activeTab)
+                        this.activeTab = this.tabs[0].name;
+                }
+                else {
+                    this.tabs = [];
+                    this.activeTab = '';
+                }
+            }
+            else {
+                this.tabs = [];
+                this.activeTab = '';
+            }
+            return vehicleLookup;
+        };
+        this.updateProgressBar = async (payload) => {
+            var _a, _b;
+            // payload indicates its not a fresh list rather it is an update to current one
+            if (!payload) {
+                // hard reset of the bar
+                this.progressBar.style.transitionDuration = '0s';
+                this.progressBar.style.opacity = '0';
+                this.progressBar.style.width = '0%';
+                // apply changes
+                await new Promise(r => setTimeout(r, 10));
+            }
+            this.progressBar.style.transitionDuration = '1s';
+            this.progressBar.style.opacity = '1';
+            if (!this.vehicleLookup)
+                return;
+            if (!!((_a = this.tabs) === null || _a === void 0 ? void 0 : _a.length) && this.tabs.find(tab => tab.name === this.activeTab) && !((_b = this.tabs.find(tab => tab.name === this.activeTab)) === null || _b === void 0 ? void 0 : _b.isSequential))
+                return;
+            const serviceItems = this.getServiceItems();
+            const firstPendingItemIndex = serviceItems.findIndex(x => x.status === 'pending');
+            if (firstPendingItemIndex !== -1) {
+                const pendingItemRef = this.el.shadowRoot.querySelectorAll('.claimable-item')[firstPendingItemIndex];
+                const progressLaneRef = this.el.shadowRoot.querySelector('.progress-lane');
+                const { left: pendingItemLeftOffset } = pendingItemRef.getBoundingClientRect();
+                const { width: progressLaneWidth, left: progressLeftOffset } = progressLaneRef.getBoundingClientRect();
+                const offsetToLeftRatio = ((pendingItemLeftOffset - progressLeftOffset) / progressLaneWidth) * 100;
+                this.progressBar.style.width = `${offsetToLeftRatio.toFixed(2)}%`;
+                if (firstPendingItemIndex === serviceItems.length - 1)
+                    this.claimableItemsBox.scrollTo({
+                        left: this.claimableItemsBox.scrollWidth,
+                        behavior: 'smooth',
+                    });
+                else
+                    scrollIntoContainerView(pendingItemRef, this.claimableItemsBox);
+            }
+            else if (!(serviceItems.length === 0 || serviceItems.filter(x => x.status === 'activationRequired').length === serviceItems.length)) {
+                this.progressBar.style.width = '100%';
+                this.claimableItemsBox.scrollTo({
+                    left: this.claimableItemsBox.scrollWidth,
+                    behavior: 'smooth',
+                });
+            }
+        };
+        this.onActiveTabChange = ({ label }) => {
+            this.tabAnimationLoading = true;
+            clearTimeout(this.tabAnimationTimeoutRef);
+            this.tabAnimationTimeoutRef = setTimeout(() => {
+                this.activeTab = label;
+                // wait for jsx update
+                setTimeout(() => {
+                    this.tabAnimationLoading = false;
+                    this.updateProgressBar();
+                }, 50);
+            }, 750);
+        };
+        this.activateClaimItem = () => {
+            if (this.activate)
+                this.activate(this.vehicleLookup);
+        };
+        this.printLastClaimResponse = () => {
+            if (this.print) {
+                this.print(this.lastSuccessfulClaimResponse);
+            }
+            else {
+                if (this.lastSuccessfulClaimResponse.PrintURL) {
+                    window.open(this.lastSuccessfulClaimResponse.PrintURL, '_blank').focus();
+                }
+            }
+        };
+        this.updatePopoverLocation = () => {
+            if (!this.claimableItemPopoverRef)
+                return;
+            const { left, bottom, width, top } = this.claimableItemPopoverRef.getBoundingClientRect();
+            this.popoverTargetLocation = { left: left + width / 2, bottom, top };
+        };
+        this.setClaimableItemPopover = (showPopover, claimableItem, claimableItemPopoverRef) => {
+            if (showPopover) {
+                this.claimableItemPopoverRef = claimableItemPopoverRef;
+                this.updatePopoverLocation();
+                this.selectedClaimItem = claimableItem;
+                this.showClaimableItemPopover = true;
+            }
+            else {
+                this.showClaimableItemPopover = false;
+            }
+        };
+        this.handleClaim = async (_a) => {
+            var { documents } = _a, payload = __rest(_a, ["documents"]);
+            try {
+                const formData = new FormData();
+                formData.append('payload', JSON.stringify(Object.assign(Object.assign({}, payload), { vin: this.vehicleLookup.vin, serviceItem: this.claimForm.item, saleInformation: this.vehicleLookup.saleInformation, cancelledServiceItems: this.claimForm.canceledItems })));
+                if (documents && documents.length > 0) {
+                    documents.forEach(doc => {
+                        formData.append('document', doc);
+                    });
+                }
+                await new Promise((resolve, reject) => {
+                    const xhr = new XMLHttpRequest();
+                    xhr.open('POST', this.claimEndPoint);
+                    Object.entries(this.headers || {}).forEach(([key, value]) => {
+                        xhr.setRequestHeader(key, value);
+                    });
+                    xhr.upload.onprogress = e => {
+                        if (e.lengthComputable)
+                            this.claimForm.setFileUploadProgression(Math.round((e.loaded / e.total) * 100));
+                    };
+                    xhr.onload = () => {
+                        if (xhr.status === 200) {
+                            try {
+                                const responseData = JSON.parse(xhr.responseText);
+                                this.completeClaim(responseData);
+                                resolve();
+                            }
+                            catch (parseError) {
+                                console.error('Response is not valid JSON', {
+                                    rawResponse: xhr.responseText,
+                                    error: parseError,
+                                });
+                                reject(new Error('Upload succeeded but response is not valid JSON'));
+                            }
+                            resolve();
+                        }
+                        else {
+                            try {
+                                const responseData = JSON.parse(xhr.responseText);
+                                alert(responseData.Message);
+                            }
+                            catch (_a) {
+                                reject(new Error(`Upload failed with status ${xhr.status}`));
+                            }
+                        }
+                    };
+                    xhr.onerror = e => {
+                        console.log(e);
+                        reject(new Error('Network error'));
+                    };
+                    xhr.send(formData);
+                });
+            }
+            catch (error) {
+                console.error(error);
+                alert(this.locale.sharedLocales.errors.requestFailedPleaseTryAgainLater);
+            }
+        };
+        this.handleDevClaim = async ({ documents }) => {
+            if (documents && documents.length > 0) {
+                this.claimForm.setFileUploadProgression(0);
+                let uploadChunks = 20;
+                for (let index = 0; index < uploadChunks; index++) {
+                    const uploadPercentage = Math.round(((index + 1) / uploadChunks) * 100);
+                    await new Promise(r => setTimeout(r, 200));
+                    this.claimForm.setFileUploadProgression(uploadPercentage);
+                }
+            }
+            await new Promise(r => setTimeout(r, 1000));
+            this.completeClaim({ Success: true, ID: '11223344', PrintURL: 'http://localhost/test/print/1122' });
+        };
+    }
+    async componentWillLoad() {
+        await this.changeLanguage(this.language);
+    }
+    async changeLanguage(newLanguage) {
+        const [sharedLocales, locale] = await Promise.all([getSharedLocal(newLanguage), getLocaleLanguage(newLanguage, 'vehicleLookup.claimableItems', dynamicClaimSchema)]);
+        this.locale = Object.assign({ sharedLocales }, locale);
+    }
+    async setMockData(newMockData) {
+        this.mockData = newMockData;
+    }
+    async fetchData(newData, headers = {}) {
+        const beforeAssignment = async (vehicleLookup) => {
+            this.showPrintBox = false;
+            await this.parseGroupData(vehicleLookup);
+            return vehicleLookup;
+        };
+        await setVehicleLookupData(this, newData, headers, { beforeAssignment });
+    }
+    async setErrorMessage(message) {
+        setVehicleLookupErrorState(this, message);
+    }
+    onLoadingChange(newValue) {
+        if (this.loadingStateChange)
+            this.loadingStateChange(newValue);
+    }
+    async componentDidLoad() {
+        this.progressBar = this.el.shadowRoot.querySelector('.progress-bar');
+        this.claimForm = this.el.shadowRoot.querySelector('.vehicle-item-claim-form');
+        this.claimableItemsBox = this.el.shadowRoot.querySelector('.claimable-items-box');
+        window.addEventListener('resize', this.updateProgressBar);
+        if (this.claimableItemsBox)
+            this.claimableItemsBox.addEventListener('scroll', this.updatePopoverLocation);
+        window.addEventListener('scroll', this.updatePopoverLocation);
+        window.addEventListener('resize', this.updatePopoverLocation);
+    }
+    async disconnectedCallback() {
+        window.removeEventListener('resize', this.updateProgressBar);
+        if (this.claimableItemsBox)
+            this.claimableItemsBox.removeEventListener('scroll', this.updatePopoverLocation);
+        window.removeEventListener('scroll', this.updatePopoverLocation);
+        window.removeEventListener('resize', this.updatePopoverLocation);
+    }
+    async onVehicleChange() {
+        // wait for jsx update
+        setTimeout(() => {
+            this.updateProgressBar();
+        }, 50);
+    }
+    async completeClaim(response) {
+        const serviceItems = this.getServiceItems();
+        const item = this.selectedClaimItem;
+        const serviceDataClone = JSON.parse(JSON.stringify(serviceItems));
+        const index = serviceItems.indexOf(item);
+        const pendingItemsBefore = serviceDataClone.slice(0, index).filter(x => x.status === 'pending');
+        serviceDataClone[index].claimable = false;
+        serviceDataClone[index].status = 'processed';
+        pendingItemsBefore.forEach(function (otherItem) {
+            otherItem.status = 'cancelled';
+        });
+        const vehicleDataClone = JSON.parse(JSON.stringify(this.vehicleLookup));
+        vehicleDataClone.serviceItems = serviceDataClone;
+        this.vehicleLookup = JSON.parse(JSON.stringify(vehicleDataClone));
+        this.showPrintBox = true;
+        this.lastSuccessfulClaimResponse = response;
+    }
+    async claim(item) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const serviceItems = this.getServiceItems();
+        const vinDataClone = JSON.parse(JSON.stringify(serviceItems));
+        const index = serviceItems.indexOf(item);
+        this.selectedClaimItem = item;
+        //Find other items before this item that have status 'pending'
+        let pendingItemsBefore = vinDataClone.slice(0, index).filter(x => x.status === 'pending');
+        if ((item === null || item === void 0 ? void 0 : item.maximumMileage) === null)
+            pendingItemsBefore = [];
+        this.claimForm.item = item;
+        this.claimForm.vin = (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.vin;
+        this.claimForm.canceledItems = pendingItemsBefore;
+        if (((_c = (_b = this.vehicleLookup) === null || _b === void 0 ? void 0 : _b.saleInformation) === null || _c === void 0 ? void 0 : _c.broker) !== null && ((_f = (_e = (_d = this.vehicleLookup) === null || _d === void 0 ? void 0 : _d.saleInformation) === null || _e === void 0 ? void 0 : _e.broker) === null || _f === void 0 ? void 0 : _f.invoiceDate) === null)
+            this.claimForm.unInvoicedByBrokerName = (_j = (_h = (_g = this.vehicleLookup) === null || _g === void 0 ? void 0 : _g.saleInformation) === null || _h === void 0 ? void 0 : _h.broker) === null || _j === void 0 ? void 0 : _j.brokerName;
+        else
+            this.claimForm.unInvoicedByBrokerName = null;
+        this.claimForm.handleClaiming = this.isDev ? this.handleDevClaim.bind(this) : this.handleClaim.bind(this);
+        this.claimForm.open();
+    }
+    // ====== End Component Logic
+    render() {
+        var _a;
+        const serviceItems = this.getServiceItems();
+        const isNoServicesAvailable = !this.isLoading && this.vehicleLookup && !serviceItems.length;
+        const hideTabs = this.isLoading || this.isError || !this.tabs.length || !serviceItems.length;
+        const tabs = this.tabs.map(group => group.name);
+        const hasInactiveItems = serviceItems.filter(x => x.status === 'activationRequired').length > 0;
+        return (h(Host, { key: '44360220c1bc6d62278f09d2e2dedf5e607636e2' }, h("vehicle-item-claim-form", { key: '84bf2c209a66abfa205e724ba14ea74d16787198', class: "vehicle-item-claim-form", maximumDocumentFileSizeInMb: this.maximumDocumentFileSizeInMb, uploadMultipleDocuments: this.uploadMultipleDocumentsAtTheForm, locale: Object.assign({ sharedLocales: this.locale.sharedLocales }, this.locale.claimForm) }), h(ClaimableItemPopover, { key: '9afc9a2220229a1a18dfcf60eddc82c9fccf5086', locale: this.locale, claim: this.claim.bind(this), item: this.selectedClaimItem, showPopover: this.showClaimableItemPopover, targetLocation: this.popoverTargetLocation }), h(VehicleInfoLayout, { key: 'e29f026f769f9ba2faf944d8fc9c89a58d54c56f', isError: this.isError, coreOnly: this.coreOnly, header: (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.vin, direction: this.locale.sharedLocales.direction, isLoading: this.isLoading || this.tabAnimationLoading, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, h("div", { key: 'e0a9efd29b5597e4dcb4eeb866f6509248956f8b', dir: "ltr", class: cn('relative flex items-center h-[320px] transition-all duration-300', { loading: this.isLoading || this.tabAnimationLoading }) }, h("div", { key: '318a1e9f274cbaffeccb4e031ed45727942da8f6', dir: this.locale.sharedLocales.direction, class: "absolute top-0 z-10 w-full pt-[16px]" }, h("div", { key: '610e25bec66ff292599b940107ca8d47b9b7296a', class: cn('duration-300', { 'translate-y-[-50%] opacity-0': hideTabs }) }, h("shift-tabs", { key: '09776839ef94cc3669122708b569035461ec9b13', activeTabLabel: this.activeTab, changeActiveTab: this.onActiveTabChange, tabs: tabs }))), h("div", { key: '0aecf12769963ca12e3b89a888bc6aef95284933', class: cn('absolute w-[calc(100%-60px)] left-[30px] progress-container-style opacity-0', { 'opacity-100': this.isLoading || this.tabAnimationLoading }) }, h("div", { key: 'bf6e063fd65c34efb40cbd87ab6282617e533f63', class: "w-full h-full rounded-[4px] overflow-x-hidden absolute left-0 top-0" }, h("div", { key: 'a3041409aadacc17c846208fa8a37b140dcc2179', class: "absolute opacity-0 bg-[#1a1a1a] w-[150%] h-full" }), h("div", { key: '8071ef4c5df5bb97a08d78e55354cd313d2bc001', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-inc" }), h("div", { key: 'f9191cf4d792b4ddb44c629e48de1d8e7f266a46', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-dec" }))), h("div", { key: '861ef1c868847ed41d3a183187ec47f35fd4b771', dir: this.locale.sharedLocales.direction, class: cn('absolute w-[90%] z-10 pointer-events-none border opacity-0 translate-y-[-5px] scale-[70%] text-[#8a6d3b] bg-[#fcf8e3] border-[#faebcc] p-[25px] text-[16px] rounded-[6px] flex items-center justify-between left-1/2 -translate-x-1/2 h-10 bottom-[40px] transition duration-500', {
+                'opacity-100 pointer-events-auto translate-y-0 scale-100': !this.isLoading && this.vehicleLookup && !this.tabAnimationLoading && (hasInactiveItems || this.showPrintBox),
+            }) }, h("span", { key: '1524fe7df95945e61b47d1eeb61fe0ea71bae523', class: "font-semibold" }, this.showPrintBox ? this.locale.successFulClaimMessage : this.locale.warrantyAndServicesNotActivated), h("button", { key: '83e2945f1874e1f72042d3256144ce6497f527c5', class: "claim-button", onClick: this.showPrintBox ? this.printLastClaimResponse : this.activateClaimItem }, this.showPrintBox ? h(PrintIcon, { class: "size-[30px] duration-200" }) : h(ActivationIcon, { class: "size-[30px] duration-200" }), h("span", { key: 'b40c96dff55772899aed1f2fdf5a3d97c200dd4b' }, this.showPrintBox ? this.locale.print : this.locale.activateNow))), h("div", { key: 'e283a8e067b2a25fa700383923f4b1fcb8b9f64a', class: "claimable-items-box px-[30px] min-w-full relative overflow-x-scroll h-full overflow-y-hidden" }, h("div", { key: 'cc7b8b22ecdba6060e8823ad3c44143328cc9a64', class: "flex relative w-fit min-w-full items-center h-full [&_*]:shrink-0 gap-[250px] justify-between" }, h("div", { key: 'd56212043b5e13ace1f023b1b617605282ba6753', class: cn('progress-container-style progress-lane absolute overflow-hidden w-[calc(100%-0px)] translate-y-0 opacity-100', {
+                'opacity-0': this.isLoading || this.tabAnimationLoading || isNoServicesAvailable || !this.vehicleLookup,
+            }) }, h("div", { key: 'a537adcf3a231d964282b7b1791e93fd490e62a1', part: "progress-bar", class: "progress-bar transition-all w-1/2 h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)]" })), h("div", { key: 'beb0abf55009aa202bd29ccfaaa7720a5a475ed7', class: "ml-[-125px]" }), serviceItems.map((item, idx) => (h(ClaimableItem, { item: item, locale: this.locale, setClaimableItemPopover: this.setClaimableItemPopover, addStatusClass: item.status !== 'pending' || serviceItems.findIndex(i => i.status === 'pending') === idx }))), h("div", { key: 'a035f9892e2ac7a4136bffe471c03e2d02eb6c85', class: "ml-[-125px]" })), h("div", { key: '7411e36b7cebaaab816e18480ccfcb2e202323c3', dir: this.locale.sharedLocales.direction, class: cn('absolute top-0 left-0 pointer-events-none size-full box-content flex flex-col justify-center opacity-0 transition duration-500 items-center text-slate-700', {
+                'opacity-100 scale-100': isNoServicesAvailable,
+            }) }, h(EmptyTableIcon, { key: '116b499c66991c504a80092b6b142219b414ce64', class: "size-[90px]" }), h("div", { key: '4e75124a913148beb49815ae3b4c16d58eb3d3b3', class: "text-[22px]" }, this.locale.sharedLocales.errors.noServiceAvailable)))))));
+    }
+    static get is() { return "vehicle-claimable-items"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vehicle-claimable-items.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vehicle-claimable-items.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'"
+            },
+            "coreOnly": {
+                "type": "boolean",
+                "attribute": "core-only",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isDev": {
+                "type": "boolean",
+                "attribute": "is-dev",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "baseUrl": {
+                "type": "string",
+                "attribute": "base-url",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "headers": {
+                "type": "unknown",
+                "attribute": "headers",
+                "mutable": false,
+                "complexType": {
+                    "original": "object",
+                    "resolved": "object",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "queryString": {
+                "type": "string",
+                "attribute": "query-string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "uploadMultipleDocumentsAtTheForm": {
+                "type": "boolean",
+                "attribute": "upload-multiple-documents-at-the-form",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "errorCallback": {
+                "type": "unknown",
+                "attribute": "error-callback",
+                "mutable": false,
+                "complexType": {
+                    "original": "(errorMessage: ErrorKeys) => void",
+                    "resolved": "(errorMessage: OptionalKeys<{ noBaseUrl: string; invalidVin: string; vinNumberRequired: string; partNumberRequired: string; wrongResponseFormat: string; noPartsFound: string; noServiceAvailable: string; wrongFormStructure: string; wildCard: string; requestFailedPleaseTryAgainLater: string; }>) => void",
+                    "references": {
+                        "ErrorKeys": {
+                            "location": "import",
+                            "path": "~features/multi-lingual",
+                            "id": "src/features/multi-lingual/index.ts::ErrorKeys"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "loadingStateChange": {
+                "type": "unknown",
+                "attribute": "loading-state-change",
+                "mutable": false,
+                "complexType": {
+                    "original": "(isLoading: boolean) => void",
+                    "resolved": "(isLoading: boolean) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "loadedResponse": {
+                "type": "unknown",
+                "attribute": "loaded-response",
+                "mutable": false,
+                "complexType": {
+                    "original": "(response: VehicleLookupDTO) => void",
+                    "resolved": "(response: VehicleLookupDTO) => void",
+                    "references": {
+                        "VehicleLookupDTO": {
+                            "location": "import",
+                            "path": "~types/generated/vehicle-lookup/vehicle-lookup-dto",
+                            "id": "src/global/types/generated/vehicle-lookup/vehicle-lookup-dto.ts::VehicleLookupDTO"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "print": {
+                "type": "unknown",
+                "attribute": "print",
+                "mutable": false,
+                "complexType": {
+                    "original": "(claimResponse: any) => void",
+                    "resolved": "(claimResponse: any) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "maximumDocumentFileSizeInMb": {
+                "type": "number",
+                "attribute": "maximum-document-file-size-in-mb",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "30"
+            },
+            "claimEndPoint": {
+                "type": "string",
+                "attribute": "claim-end-point",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'api/vehicle/swift-claim'"
+            },
+            "activate": {
+                "type": "unknown",
+                "attribute": "activate",
+                "mutable": false,
+                "complexType": {
+                    "original": "(vehicleInformation: VehicleLookupDTO) => void",
+                    "resolved": "(vehicleInformation: VehicleLookupDTO) => void",
+                    "references": {
+                        "VehicleLookupDTO": {
+                            "location": "import",
+                            "path": "~types/generated/vehicle-lookup/vehicle-lookup-dto",
+                            "id": "src/global/types/generated/vehicle-lookup/vehicle-lookup-dto.ts::VehicleLookupDTO"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "locale": {},
+            "isError": {},
+            "errorMessage": {},
+            "isLoading": {},
+            "vehicleLookup": {},
+            "activeTab": {},
+            "showPrintBox": {},
+            "tabAnimationLoading": {},
+            "lastSuccessfulClaimResponse": {},
+            "showClaimableItemPopover": {},
+            "selectedClaimItem": {},
+            "tabs": {},
+            "popoverTargetLocation": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setMockData": {
+                "complexType": {
+                    "signature": "(newMockData: VehicleLookupMock) => Promise<void>",
+                    "parameters": [{
+                            "name": "newMockData",
+                            "type": "{ [key: string]: VehicleLookupDTO; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "VehicleLookupMock": {
+                            "location": "import",
+                            "path": "~features/vehicle-lookup-component/types",
+                            "id": "src/features/vehicle-lookup-component/types.ts::VehicleLookupMock"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "fetchData": {
+                "complexType": {
+                    "signature": "(newData: VehicleLookupDTO | string, headers?: any) => Promise<void>",
+                    "parameters": [{
+                            "name": "newData",
+                            "type": "string | VehicleLookupDTO",
+                            "docs": ""
+                        }, {
+                            "name": "headers",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "VehicleLookupDTO": {
+                            "location": "import",
+                            "path": "~types/generated/vehicle-lookup/vehicle-lookup-dto",
+                            "id": "src/global/types/generated/vehicle-lookup/vehicle-lookup-dto.ts::VehicleLookupDTO"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setErrorMessage": {
+                "complexType": {
+                    "signature": "(message: ErrorKeys) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "\"noBaseUrl\" | \"invalidVin\" | \"vinNumberRequired\" | \"partNumberRequired\" | \"wrongResponseFormat\" | \"noPartsFound\" | \"noServiceAvailable\" | \"wrongFormStructure\" | \"wildCard\" | \"requestFailedPleaseTryAgainLater\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ErrorKeys": {
+                            "location": "import",
+                            "path": "~features/multi-lingual",
+                            "id": "src/features/multi-lingual/index.ts::ErrorKeys"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "completeClaim": {
+                "complexType": {
+                    "signature": "(response: any) => Promise<void>",
+                    "parameters": [{
+                            "name": "response",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "VehicleLookupDTO": {
+                            "location": "import",
+                            "path": "~types/generated/vehicle-lookup/vehicle-lookup-dto",
+                            "id": "src/global/types/generated/vehicle-lookup/vehicle-lookup-dto.ts::VehicleLookupDTO"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "claim": {
+                "complexType": {
+                    "signature": "(item: VehicleServiceItemDTO) => Promise<void>",
+                    "parameters": [{
+                            "name": "item",
+                            "type": "{ group: VehicleServiceItemGroup; showDocumentUploader: boolean; documentUploaderIsRequired: boolean; name: string; description: string; title: string; image: string; type: string; typeEnum: \"Free\" | \"Paid\"; activatedAt: string; expiresAt?: string; status: string; statusEnum: \"Processed\" | \"Expired\" | \"Pending\" | \"Cancelled\" | \"ActivationRequired\"; campaignID?: number; campaignUniqueReference: string; packageCode: string; cost?: number; claimDate?: string; modelCostID?: number; serviceItemID: number; paidServiceInvoiceLineID?: number; companyID: string; companyName: string; invoiceNumber: string; jobNumber: string; maximumMileage?: number; claimable: boolean; claimingMethodEnum: \"ClaimByScanningQRCode\" | \"ClaimByEnteringInvoiceAndJobNumber\"; vehicleInspectionID: string; signature: string; signatureExpiry: string; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "VehicleServiceItemDTO": {
+                            "location": "import",
+                            "path": "~types/generated/vehicle-lookup/vehicle-service-item-dto",
+                            "id": "src/global/types/generated/vehicle-lookup/vehicle-service-item-dto.ts::VehicleServiceItemDTO"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "language",
+                "methodName": "changeLanguage"
+            }, {
+                "propName": "isLoading",
+                "methodName": "onLoadingChange"
+            }, {
+                "propName": "vehicleLookup",
+                "methodName": "onVehicleChange"
+            }];
+    }
+}