adp-web-components 0.0.90 → 0.0.92

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

@@ -17,267 +17,287 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { Host, h } from "@stencil/core";
 import cn from "../../global/lib/cn";
 import { scrollIntoContainerView } from "../../global/lib/scroll-into-container-view";
-import { getLocaleLanguage, getSharedLocal, sharedLocalesSchema } from "../../global/lib/get-local-language";
-import expiredIcon from "./assets/expired.svg";
-import pendingIcon from "./assets/pending.svg";
-import cancelledIcon from "./assets/cancelled.svg";
-import processedIcon from "./assets/processed.svg";
-import activationRequiredIcon from "./assets/activationRequired.svg";
-import { getVehicleInformation } from "../../global/api/vehicleInformation";
+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 { VehicleInfoLayout } from "../components/vehicle-info-layout";
-let mockData = {};
-const icons = {
-    expired: expiredIcon,
-    pending: pendingIcon,
-    processed: processedIcon,
-    cancelled: cancelledIcon,
-    activationRequired: activationRequiredIcon,
-};
+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.isDev = false;
         this.queryString = '';
-        this.coreOnly = false;
-        this.language = 'en';
+        this.uploadMultipleDocumentsAtTheForm = true;
+        this.isError = false;
+        this.isLoading = false;
         this.maximumDocumentFileSizeInMb = 30;
         this.claimEndPoint = 'api/vehicle/swift-claim';
-        this.sharedLocales = sharedLocalesSchema.getDefault();
-        this.locale = dynamicClaimSchema.getDefault();
         this.activeTab = '';
-        this.isError = false;
-        this.showPopup = false;
-        this.isLoading = false;
-        this.externalVin = null;
         this.showPrintBox = false;
-        this.errorMessage = null;
         this.tabAnimationLoading = false;
-        this.activePopupIndex = null;
-        this.tabs = [];
         this.lastSuccessfulClaimResponse = null;
-        this.pendingItemHighlighted = false;
-        this.onMouseLeave = () => {
-            clearTimeout(this.timeoutRef);
-            this.showPopup = false;
-            this.timeoutRef = setTimeout(() => {
-                this.activePopupIndex = null;
-            }, 400);
-        };
-        this.onMouseEnter = (dynamicClaimItemHeader, idx) => {
-            clearTimeout(this.timeoutRef);
-            this.activePopupIndex = idx;
-            this.timeoutRef = setTimeout(() => {
-                const positionRef = dynamicClaimItemHeader.querySelector('.popup-ref');
-                this.popupPositionRef = positionRef;
-                this.calculatePopupPos(this.el.shadowRoot);
-                this.showPopup = true;
-            }, 50);
-        };
+        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.vehicleInformation) === null || _a === void 0 ? void 0 : _a.serviceItems) === null || _b === void 0 ? void 0 : _b.length))
+            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.vehicleInformation) === null || _d === void 0 ? void 0 : _d.serviceItems;
-            return (_e = this.vehicleInformation) === 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; });
+                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;
-                this.claimableContentWrapper.scrollLeft = 0;
+                // wait for jsx update
                 setTimeout(() => {
                     this.tabAnimationLoading = false;
                     this.updateProgressBar();
-                }, 100);
-            }, 500);
+                }, 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 })));
+                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 localeResponses = await Promise.all([getLocaleLanguage(newLanguage, 'vehicleLookup.claimableItems', dynamicClaimSchema), getSharedLocal(newLanguage)]);
-        this.locale = localeResponses[0];
-        this.sharedLocales = localeResponses[1];
-    }
-    async componentDidLoad() {
-        this.claimableContentWrapper = this.el.shadowRoot.querySelector('.claimable-content-wrapper');
-        this.claimForm = this.el.shadowRoot.getElementById('vehicle-item-claim-form');
-        this.progressBar = this.el.shadowRoot.querySelector('.progress-bar');
+        const [sharedLocales, locale] = await Promise.all([getSharedLocal(newLanguage), getLocaleLanguage(newLanguage, 'vehicleLookup.claimableItems', dynamicClaimSchema)]);
+        this.locale = Object.assign({ sharedLocales }, locale);
     }
     async setMockData(newMockData) {
-        mockData = newMockData;
+        this.mockData = newMockData;
     }
-    async setData(newData, headers = {}) {
-        var _a;
-        clearTimeout(this.networkTimeoutRef);
-        if (this.abortController)
-            this.abortController.abort();
-        this.abortController = new AbortController();
-        let scopedTimeoutRef;
-        const isVinRequest = typeof newData === 'string';
-        const vin = isVinRequest ? newData : newData === null || newData === void 0 ? void 0 : newData.vin;
-        this.externalVin = vin;
-        try {
-            if (!vin || vin.trim().length === 0) {
-                this.isError = false;
-                this.vehicleInformation = null;
-                return;
-            }
-            this.isLoading = true;
+    async fetchData(newData, headers = {}) {
+        const beforeAssignment = async (vehicleLookup) => {
             this.showPrintBox = false;
-            await new Promise(r => {
-                scopedTimeoutRef = setTimeout(r, 1000);
-                this.networkTimeoutRef = scopedTimeoutRef;
-            });
-            this.claimableContentWrapper.scrollLeft = 0;
-            const vehicleResponse = isVinRequest ? await getVehicleInformation(this, { scopedTimeoutRef, vin, mockData }, headers) : newData;
-            if (this.networkTimeoutRef === scopedTimeoutRef) {
-                if (!vehicleResponse)
-                    throw new Error('wrongResponseFormat');
-                if (!Array.isArray(vehicleResponse.serviceItems))
-                    throw new Error('noServiceAvailable');
-                this.vehicleInformation = vehicleResponse;
-                if ((_a = vehicleResponse === null || vehicleResponse === void 0 ? void 0 : vehicleResponse.serviceItems) === null || _a === void 0 ? void 0 : _a.length) {
-                    let orderedGroups = [];
-                    const unOrderedGroups = [];
-                    vehicleResponse.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 = '';
-                }
-            }
-            this.errorMessage = null;
-            this.isLoading = false;
-            this.isError = false;
-        }
-        catch (error) {
-            if (error && (error === null || error === void 0 ? void 0 : error.name) === 'AbortError')
-                return;
-            if (this.errorCallback)
-                this.errorCallback(error.message);
-            console.error(error);
-            this.setErrorMessage(error.message);
-        }
+            await this.parseGroupData(vehicleLookup);
+            return vehicleLookup;
+        };
+        await setVehicleLookupData(this, newData, headers, { beforeAssignment });
     }
     async setErrorMessage(message) {
-        this.isError = true;
-        this.isLoading = false;
-        this.vehicleInformation = null;
-        this.errorMessage = message;
-    }
-    async fetchData(requestedVin = this.externalVin, headers = {}) {
-        await this.setData(requestedVin, headers);
+        setVehicleLookupErrorState(this, message);
     }
     onLoadingChange(newValue) {
         if (this.loadingStateChange)
             this.loadingStateChange(newValue);
-        this.setLoadingUi(newValue);
     }
-    async setLoadingUi(isLoading) {
-        if (!isLoading) {
-            this.progressBar.style.width = '0';
-            this.progressBar.style.opacity = '0';
-            await new Promise(r => setTimeout(r, 200));
-            this.updateProgressBar();
-        }
+    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);
     }
-    updateProgressBar() {
-        var _a, _b;
-        const serviceItems = this.getServiceItems();
-        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)) {
-            this.progressBar.style.width = '0%';
-            this.progressBar.style.opacity = '0';
-            return;
-        }
-        if (serviceItems.filter(x => x.status === 'pending').length === 0) {
-            if (serviceItems.length === 0 || serviceItems.filter(x => x.status === 'activationRequired').length === serviceItems.length) {
-                this.progressBar.style.width = '0%';
-                this.progressBar.style.opacity = '0';
-            }
-            else {
-                this.progressBar.style.width = '100%';
-                this.progressBar.style.opacity = '1';
-                const claimableItems = this.claimableContentWrapper.getElementsByClassName('claimable-item');
-                scrollIntoContainerView(claimableItems[claimableItems.length - 1], this.claimableContentWrapper);
-            }
-        }
-        else {
-            const firstPendingItem = serviceItems.find(x => x.status === 'pending');
-            const firstPendingItemIndex = serviceItems.indexOf(firstPendingItem) + 1;
-            const firstPendingItemRef = this.claimableContentWrapper.getElementsByClassName('claimable-item')[firstPendingItemIndex - 1];
-            this.progressBar.style.width = (firstPendingItemIndex / serviceItems.length - 1 / (serviceItems.length * 2)) * 100 + '%';
-            this.progressBar.style.opacity = this.progressBar.style.width === '0%' ? '0' : '1';
-            scrollIntoContainerView(firstPendingItemRef, this.claimableContentWrapper);
-        }
+    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);
     }
-    resetProgressBar() {
+    async onVehicleChange() {
+        // wait for jsx update
         setTimeout(() => {
             this.updateProgressBar();
-        }, 100);
-    }
-    windowScrollListener(newValue) {
-        if (newValue) {
-            this.scrollListenerRef = () => this.calculatePopupPos(this.el.shadowRoot);
-            window.addEventListener('scroll', this.scrollListenerRef);
-            this.claimableContentWrapper.addEventListener('scroll', this.scrollListenerRef);
-        }
-        else {
-            window.removeEventListener('scroll', this.scrollListenerRef);
-            this.claimableContentWrapper.removeEventListener('scroll', this.scrollListenerRef);
-        }
-    }
-    calculatePopupPos(root) {
-        const popupPositionRef = root.querySelector('.popup-ref');
-        let { x, y } = popupPositionRef.getBoundingClientRect();
-        const popupContainer = popupPositionRef.querySelector('.popup-container');
-        const { width } = popupContainer.getBoundingClientRect();
-        const popupInfo = popupContainer.querySelector('.popup-info');
-        const windowWidth = window.innerWidth; // Get the viewport's width
-        popupContainer.style.top = `${y}px`;
-        popupContainer.style.left = `${x - width / 2}px`;
-        const offsetFromLeft = x - width / 2; // Distance from left side of the viewport
-        const offsetFromRight = windowWidth - (x + width / 2); // Distance from right side of the viewport
-        let movingNeeded = 0;
-        let horizontalMargin = 16;
-        if (offsetFromRight < horizontalMargin)
-            movingNeeded = offsetFromRight - horizontalMargin;
-        else if (offsetFromLeft < horizontalMargin)
-            movingNeeded = Math.abs(offsetFromLeft - horizontalMargin);
-        popupInfo.style.transform = `translateX(${movingNeeded}px)`;
-    }
-    removeLoadAnimationClass(event) {
-        const component = event.target;
-        component.classList.remove('load-animation');
+        }, 50);
     }
     async completeClaim(response) {
         const serviceItems = this.getServiceItems();
-        const item = this.cachedClaimItem;
+        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');
@@ -286,175 +306,42 @@ export class VehicleClaimableItems {
         pendingItemsBefore.forEach(function (otherItem) {
             otherItem.status = 'cancelled';
         });
-        this.pendingItemHighlighted = false;
-        const vehicleDataClone = JSON.parse(JSON.stringify(this.vehicleInformation));
+        const vehicleDataClone = JSON.parse(JSON.stringify(this.vehicleLookup));
         vehicleDataClone.serviceItems = serviceDataClone;
-        this.vehicleInformation = JSON.parse(JSON.stringify(vehicleDataClone));
+        this.vehicleLookup = JSON.parse(JSON.stringify(vehicleDataClone));
         this.showPrintBox = true;
         this.lastSuccessfulClaimResponse = response;
     }
     async claim(item) {
+        var _a;
         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');
-        this.cachedClaimItem = item;
-        if (item.maximumMileage === null) {
+        if ((item === null || item === void 0 ? void 0 : item.maximumMileage) === null)
             pendingItemsBefore = [];
-        }
-        this.onMouseLeave();
-        this.openRedeem(item, pendingItemsBefore);
-    }
-    async handleClaiming() {
-        if (this.isDev) {
-            this.claimForm.handleClaiming = async ({ document }) => {
-                if (document) {
-                    this.claimForm.uploadProgress = 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);
-                    }
-                }
-                this.claimForm.quite();
-                this.completeClaim({ Success: true, ID: '11223344', PrintURL: 'http://localhost/test/print/1122' });
-                this.claimForm.handleClaiming = null;
-            };
-        }
-        else {
-            this.claimForm.handleClaiming = async (_a) => {
-                var { document } = _a, payload = __rest(_a, ["document"]);
-                try {
-                    const formData = new FormData();
-                    formData.append('payload', JSON.stringify(Object.assign(Object.assign({}, payload), { vin: this.vehicleInformation.vin, saleInformation: this.vehicleInformation.saleInformation, serviceItem: this.claimForm.item, cancelledServiceItems: this.claimForm.canceledItems })));
-                    if (document)
-                        formData.append('document', document);
-                    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 = () => {
-                            this.claimForm.quite();
-                            this.claimForm.handleClaiming = null;
-                            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);
-                            this.claimForm.quite();
-                            this.claimForm.handleClaiming = null;
-                            reject(new Error('Network error'));
-                        };
-                        xhr.send(formData);
-                    });
-                }
-                catch (error) {
-                    console.error(error);
-                    alert(this.sharedLocales.errors.requestFailedPleaseTryAgainLater);
-                    this.claimForm.quite();
-                    this.claimForm.handleClaiming = null;
-                }
-            };
-        }
-    }
-    openRedeem(item, oldItems) {
-        var _a, _b, _c, _d, _e;
-        const vehicleInformation = this.vehicleInformation;
-        this.claimForm.vin = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.vin;
         this.claimForm.item = item;
-        this.claimForm.canceledItems = oldItems;
-        if (((_a = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.saleInformation) === null || _a === void 0 ? void 0 : _a.broker) !== null && ((_c = (_b = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.saleInformation) === null || _b === void 0 ? void 0 : _b.broker) === null || _c === void 0 ? void 0 : _c.invoiceDate) === null)
-            this.claimForm.unInvoicedByBrokerName = (_e = (_d = vehicleInformation === null || vehicleInformation === void 0 ? void 0 : vehicleInformation.saleInformation) === null || _d === void 0 ? void 0 : _d.broker) === null || _e === void 0 ? void 0 : _e.brokerName;
-        else
-            this.claimForm.unInvoicedByBrokerName = null;
-        this.handleClaiming();
-    }
-    createPopup(item) {
-        const texts = this.locale;
-        return (h("div", { dir: this.sharedLocales.direction, class: "popup-ref w-0 h-0 bottom-0 flex absolute justify-center" }, h("div", { class: "popup-container fixed z-[100]" }, h("div", { class: cn('opacity-0 w-full z-[101] flex transition-all duration-[0.4s] relative invisible justify-center translate-y-[-9px]', {
-                '!opacity-100 !visible': this.showPopup,
-            }) }, h("div", { class: "absolute w-0 h-0 border-[10px] border-t-0 !border-b-[#dddddd] border-transparent" }), h("div", { class: "mt-[1px] absolute w-0 h-0 border-[10px] border-t-0 !border-b-[#f9f9f9] border-transparent" })), h("div", { class: cn('popup-info bg-[#f9f9f9] border border-[#ddd] w-auto p-[20px] rounded-[5px] transition-all duration-[0.4s] text-[#282828] opacity-0 invisible', {
-                '!opacity-100 !visible': this.showPopup,
-            }) }, h("table", { class: cn('w-full border-collapse', '[&_th]:border-b [&_th]:border-[#ddd] [&_th]:p-[10px] [&_th]:pe-[50px] [&_th]:text-start [&_th]:whitespace-nowrap', '[&_td]:border-b [&_td]:border-[#ddd] [&_td]:p-[10px] [&_td]:pe-[50px] [&_td]:text-start [&_td]:whitespace-nowrap') }, h("tbody", null, h("tr", null, h("th", null, texts.serviceType), h("td", null, item.type.charAt(0).toUpperCase() + item.type.slice(1))), h("tr", null, h("th", null, texts.activationDate), h("td", null, item.activatedAt)), h("tr", null, h("th", null, texts.expireDate), h("td", null, item.expiresAt)), h("tr", null, h("th", null, texts.claimAt), h("td", null, item.claimDate)), h("tr", null, h("th", null, texts.claimingCompany), h("td", null, item.companyName)), h("tr", null, h("th", null, texts.invoiceNumber), h("td", null, item.invoiceNumber)), h("tr", null, h("th", null, texts.jobNumber), h("td", null, item.jobNumber)), h("tr", null, h("th", null, texts.packageCode), h("td", null, item.packageCode)))), item.claimable && (h("button", { onClick: () => this.claim(item), class: "claim-button m-auto mt-[15px] w-[80%] justify-center" }, h("svg", { class: "size-[30px] duration-200", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "stroke-width": "0" }), h("g", { "stroke-linecap": "round", "stroke-linejoin": "round" }), h("g", null, h("circle", { cx: "12", cy: "12", r: "8", "fill-opacity": "0.24" }), h("path", { d: "M8.5 11L11.3939 13.8939C11.4525 13.9525 11.5475 13.9525 11.6061 13.8939L19.5 6", "stroke-width": "1.2" }))), h("span", null, texts.claim)))))));
+        this.claimForm.vin = (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.vin;
+        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 texts = this.locale;
-        const hasInactiveItems = serviceItems.filter(x => x.status === 'activationRequired').length > 0;
+        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);
-        return (h(Host, { key: '650300d8b2495485e104a8450e6849111f45a843' }, h("vehicle-item-claim-form", { key: '205514a455cab1507e9798c66924d10b6b10e09c', locale: texts.claimForm, language: this.language, id: "vehicle-item-claim-form", maximumDocumentFileSizeInMb: this.maximumDocumentFileSizeInMb }), h(VehicleInfoLayout, { key: '24bcc50ed3fd697fe0e1bd536b04300572905519', isError: this.isError, coreOnly: this.coreOnly, isLoading: this.isLoading, vin: (_a = this.vehicleInformation) === null || _a === void 0 ? void 0 : _a.vin, direction: this.sharedLocales.direction, errorMessage: this.sharedLocales.errors[this.errorMessage] || this.sharedLocales.errors.wildCard }, h("div", { key: 'a133d8beadb9dfc21efc4ea3f3eca8f9c97643e5', class: "absolute z-10 w-full pt-[16px]" }, h("div", { key: '3e27fb454add0e0a7a103bddecafaa98fdf39fea', class: cn('duration-300', { 'translate-y-[-50%] opacity-0': hideTabs }) }, h("shift-tabs", { key: 'a71888699a3189bef9f8391b811c0ab2bbbe82d3', activeTabLabel: this.activeTab, changeActiveTab: this.onActiveTabChange, tabs: tabs }))), h("div", { key: 'f879a081b412cf82ff15592034aa8a190edd5964', class: "relative" }, h("div", { key: 'ce6e960144465d725acf883b14a723835bec1292', class: "flex px-[30px] absolute w-full h-[320px] items-center" }, h("div", { key: 'bf3a6cd026eae91abcd895ae4550098f14648273', class: "h-[10px] translate-y-[-5px] relative bg-[#f2f2f2] border border-[#ddd] rounded-[10px] w-[calc(100%-62px)] items-center justify-around" }, h("div", { key: '0bd1d257ab6a49da3dfb15fda773e0ee7a7b951e', class: "w-full h-full rounded-[4px] overflow-x-hidden absolute left-0 top-0" }, h("div", { key: '73b1ab665d109c6f4e77c975ced5c7f8ff587495', class: "absolute opacity-0 bg-[#1a1a1a] w-[150%] h-full" }), h("div", { key: 'cdce5de783b1c1eec2b50d3775f07997af209bff', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-inc" }), h("div", { key: 'c34ecca02274697dd705f522e06d194747e94c76', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-dec" })))), h("div", { key: '4230dfc62c4398edb5277c884e2641260ff736d4', dir: "ltr", class: cn('flex overflow-x-scroll px-[30px] relative h-[320px] items-center transition-all duration-300 claimable-content-wrapper', {
-                'hide-scroll': this.tabAnimationLoading,
-            }) }, h("div", { key: 'caa65ad50775e49b88d082409ece04b9a2e20b6a', class: cn('h-[10px] bg-[#f2f2f2] border flex-1 border-[#ddd] rounded-[10px] flex items-center justify-around relative', {
-                'bg-transparent border-transparent': this.isLoading || this.tabAnimationLoading || !serviceItems.length,
-            }) }, serviceItems.map((item, idx) => {
-            let statusClass = '';
-            if (item.status === 'pending') {
-                if (serviceItems.findIndex(i => i.status === 'pending') === idx)
-                    statusClass = item.status;
-            }
-            else
-                statusClass = item.status;
-            return (h("div", { key: item.name, class: cn('claimable-item flex flex-col items-center gap-[5px] font-[14px] min-w-[250px]', statusClass), onMouseLeave: this.onMouseLeave }, h("div", { onAnimationEnd: this.removeLoadAnimationClass, class: cn('claimable-item-header load-animation hover:[&>img]:rotate-[360deg] hover:[&>img]:scale-[125%] relative duration-[0.4s] py-[10px] leading-[1em] h-[3em] flex flex-col items-center cursor-pointer', {
-                    '!opacity-0 !translate-y-[-5px] !scale-[70%]': this.isLoading || this.tabAnimationLoading,
-                }), onMouseEnter: event => this.onMouseEnter(event.target, idx) }, h("img", { class: "duration-[0.4s]", src: icons[item.status], alt: "status icon" }), h("span", { dir: this.sharedLocales.direction, class: "font-bold" }, texts[item.status]), this.activePopupIndex === idx && this.createPopup(item)), h("div", { onAnimationEnd: this.removeLoadAnimationClass, class: cn('claimable-item-circle load-animation w-[18px] translate-y-[2px] h-[18px] rounded-[50%] bg-[#a1a1a1] border-[5px] border-double border-[#ececec] transition-all duration-[0.4s] z-[1]', {
-                    '!opacity-0 !scale-[150%]': this.isLoading || this.tabAnimationLoading,
-                }) }), h("p", { onAnimationEnd: this.removeLoadAnimationClass, class: cn('claimable-item-footer load-animation transition-all duration-[0.4s] px-[20px] text-center leading-[1.5em] h-[4.5em] overflow-hidden text-ellipsis m-0', {
-                    '!opacity-0 !translate-y-[10px] !scale-[70%]': this.isLoading || this.tabAnimationLoading,
-                }) }, item.name)));
-        }), h("div", { key: 'bde59a64354da72d443fe00d4f5e655e17f4010b', class: cn('progress-bar h-[10px] opacity-0 bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] border border-[#ddd] rounded-[10px] w-0 absolute left-0 transition-all duration-500 z-0', {
-                '!w-0 !opacity-0': this.isLoading || this.tabAnimationLoading,
-            }) })), h("div", { key: '0d26706af93683381eeb154d660e30888a55ef57', class: cn('absolute w-[90%] left-1/2 ml-[-45%] bottom-[40px] z-[1]', { '!z-[-1]': !(this.vehicleInformation && hasInactiveItems) }) }, h("div", { key: '65f407d2ead8a828ba8cbd85f745286ed7c182a4', class: cn('card warning-card span-entire-1st-row activation-panel', {
-                loading: this.isLoading || this.tabAnimationLoading,
-                visible: hasInactiveItems,
-            }), onAnimationEnd: this.removeLoadAnimationClass }, h("p", { key: '3bc24cddfff666c5e5d6151128e5556246f4191c', class: "no-padding flex gap-2" }, h("span", { key: '97ec53465789ac41c60ba78476865c526516f28d', class: "font-semibold" }, texts.warrantyAndServicesNotActivated)), h("button", { key: '3559fbedb98d0d66a018448b47a0c5ae22181e13', onClick: () => {
-                if (this.activate) {
-                    this.activate(this.vehicleInformation);
-                }
-            }, class: "claim-button" }, h("svg", { key: 'afaad252b24ef036246d7ea4e5dfa0e586072286', class: "size-[30px] duration-200", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '29417f41b50310c2a3196aa09f9ec8356f444b2b', "stroke-width": "0" }), h("g", { key: '337ff662f389278eb4252e67d7297b8104b58ad9', "stroke-linecap": "round", "stroke-linejoin": "round" }), h("g", { key: '69055decd90dbf005e604c49e1b8758766b4e59d' }, h("circle", { key: '0e241fa0f14d0363201609a701bf1fe5d09c611f', cx: "12", cy: "12", r: "8", "fill-opacity": "0.24" }), h("path", { key: 'cdc48fe47ee90b76cb94f6db6fbd2b66170c4fdd', d: "M8.5 11L11.3939 13.8939C11.4525 13.9525 11.5475 13.9525 11.6061 13.8939L19.5 6", "stroke-width": "1.2" }))), h("span", { key: '5cfe67e43afa0342e680e9f195dd37c95f0d2dbb' }, texts.activateNow)))), h("div", { key: '2ecd71e4bd4f8e096473b74e330de8f50272f6c5', class: cn('absolute w-[90%] left-1/2 ml-[-45%] bottom-[40px] z-[1]', { '!z-[-1]': !this.showPrintBox }) }, h("div", { key: 'bda52bd244b2af92b3c6c0501e8f85eded6c56c5', class: cn('card warning-card span-entire-1st-row activation-panel', {
-                loading: this.isLoading,
-                visible: this.showPrintBox,
-            }), onAnimationEnd: this.removeLoadAnimationClass }, h("p", { key: '77be3dfd74e1271f4a6c8799feed44d611733604', class: "no-padding flex gap-2" }, h("span", { key: '7cb43c7a81f928396fe932385955bdbe9543a487', class: "font-semibold" }, texts.successFulClaimMessage)), h("button", { key: 'ea9a839303813a7177b66023cc1f961954f4f91b', onClick: () => {
-                if (this.print) {
-                    this.print(this.lastSuccessfulClaimResponse);
-                }
-                else {
-                    if (this.lastSuccessfulClaimResponse.PrintURL) {
-                        window.open(this.lastSuccessfulClaimResponse.PrintURL, '_blank').focus();
-                    }
-                }
-            }, class: "claim-button dynamic-claim-button" }, h("svg", { key: 'fec1b6e0cf6615788bcf9ef246a3e9259ae694f9', width: "30px", height: "30px", viewBox: "-5 -5 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f2348cb0d49cb586e28111952f6b0620948b7d25', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M17 7H7V6h10v1zm0 12H7v-6h10v6zm2-12V3H5v4H1v8.996C1 17.103 1.897 18 3.004 18H5v3h14v-3h1.996A2.004 2.004 0 0 0 23 15.996V7h-4z", fill: "rgb(252, 248, 227)" })), h("span", { key: 'cf58fe2d58d553130b8281d28c3057b5a89097e3' }, texts.print)))))))));
+        const hasInactiveItems = serviceItems.filter(x => x.status === 'activationRequired').length > 0;
+        return (h(Host, { key: '420836fe97f84d0c85c03c30442d2893fca3f8ba' }, h("vehicle-item-claim-form", { key: 'a8d947cf4ab32179c86bfb4683920069fc799a68', class: "vehicle-item-claim-form", maximumDocumentFileSizeInMb: this.maximumDocumentFileSizeInMb, uploadMultipleDocuments: this.uploadMultipleDocumentsAtTheForm, locale: Object.assign({ sharedLocales: this.locale.sharedLocales }, this.locale.claimForm) }), h(ClaimableItemPopover, { key: '191bc792eddd6ab4852d12857a7ca664752b9bcf', locale: this.locale, claim: this.claim.bind(this), item: this.selectedClaimItem, showPopover: this.showClaimableItemPopover, targetLocation: this.popoverTargetLocation }), h(VehicleInfoLayout, { key: 'd22f93480af931843c3eca6af382f41947b1de84', 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: 'd37a20ac1c8b391b88fe0d4bc4735cbbcb48331e', dir: "ltr", class: cn('relative flex items-center h-[320px] transition-all duration-300', { loading: this.isLoading || this.tabAnimationLoading }) }, h("div", { key: 'b5cd132511def343a95e136826e5e60d7b1887a8', dir: this.locale.sharedLocales.direction, class: "absolute top-0 z-10 w-full pt-[16px]" }, h("div", { key: 'b37bfd31d0a0971782da446054020331c3ee0800', class: cn('duration-300', { 'translate-y-[-50%] opacity-0': hideTabs }) }, h("shift-tabs", { key: '5657c8726e556c4e263f8beaf97bc0e03dbb5792', activeTabLabel: this.activeTab, changeActiveTab: this.onActiveTabChange, tabs: tabs }))), h("div", { key: 'b3a916499dd50965e2e1bbb3941bbe3aca446dd3', class: cn('absolute w-[calc(100%-60px)] left-[30px] progress-container-style opacity-0', { 'opacity-100': this.isLoading || this.tabAnimationLoading }) }, h("div", { key: '642cb0e00a9639c80ed2260b1e934e2ee2f6dec9', class: "w-full h-full rounded-[4px] overflow-x-hidden absolute left-0 top-0" }, h("div", { key: 'b5e07aaafe87a5b4e99badb35013140665cfa6bd', class: "absolute opacity-0 bg-[#1a1a1a] w-[150%] h-full" }), h("div", { key: 'b40bb1d459c19585913afccf5b2a929f75abf6fd', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-inc" }), h("div", { key: '8833ad2dae76e0b4a9df6c14b0040af5ca66ed8d', class: "absolute h-full bg-[linear-gradient(to_bottom,_#428bca_0%,_#3071a9_100%)] lane-dec" }))), h("div", { key: 'fbd0c6c826753ad7bc7d63d5349598aa75bbdf39', 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: '2af47dd3e74425ebf33e8c4541513a383aa91094', class: "font-semibold" }, this.showPrintBox ? this.locale.successFulClaimMessage : this.locale.warrantyAndServicesNotActivated), h("button", { key: '4636341286d8e242ca7a8f6c7f79ecf344481af2', 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: '0ed0f78745db4b036079bd3b6b29989d58e0f2ca' }, this.showPrintBox ? this.locale.print : this.locale.activateNow))), h("div", { key: 'e83d05efabd56909beb7e3e090ddd72ac778b75d', class: "claimable-items-box px-[30px] min-w-full relative overflow-x-scroll h-full overflow-y-hidden" }, h("div", { key: '75df6fd87dfbdf36e8a96344f15954d59f40b8ed', class: "flex relative w-fit min-w-full items-center h-full [&_*]:shrink-0 gap-[250px] justify-between" }, h("div", { key: '4c5116ce0f5111887c4351631e904051d6d64724', 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: '383a47e72978b4fa81210eb59b4bfd95166c3a7f', 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: '1b788c61a3910e659cc19e122d5b708cb1cb2b25', 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: '4d7130b602882354ab73bdac1dd03c51704fd9aa', class: "ml-[-125px]" })), h("div", { key: 'e1d3a01cc8caa27d297ca8ad5bbd8bd7f646c146', 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: '57054dfaa04a58b1a2accb0174f5d45265660293', class: "size-[90px]" }), h("div", { key: '1a5d4dc74a5e1aa755f31d68ed3505d8f7e9f2ac', class: "text-[22px]" }, this.locale.sharedLocales.errors.noServiceAvailable)))))));
     }
     static get is() { return "vehicle-claimable-items"; }
     static get encapsulation() { return "shadow"; }
@@ -470,14 +357,20 @@ export class VehicleClaimableItems {
     }
     static get properties() {
         return {
-            "baseUrl": {
+            "language": {
                 "type": "string",
-                "attribute": "base-url",
+                "attribute": "language",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "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,
@@ -487,15 +380,16 @@ export class VehicleClaimableItems {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'en'"
             },
-            "headers": {
-                "type": "any",
-                "attribute": "headers",
+            "coreOnly": {
+                "type": "boolean",
+                "attribute": "core-only",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -507,7 +401,7 @@ export class VehicleClaimableItems {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "{}"
+                "defaultValue": "false"
             },
             "isDev": {
                 "type": "boolean",
@@ -526,12 +420,11 @@ export class VehicleClaimableItems {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             },
-            "queryString": {
+            "baseUrl": {
                 "type": "string",
-                "attribute": "query-string",
+                "attribute": "base-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -546,16 +439,15 @@ export class VehicleClaimableItems {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "''"
+                "reflect": false
             },
-            "coreOnly": {
-                "type": "boolean",
-                "attribute": "core-only",
+            "headers": {
+                "type": "unknown",
+                "attribute": "headers",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "object",
+                    "resolved": "object",
                     "references": {}
                 },
                 "required": false,
@@ -566,60 +458,15 @@ export class VehicleClaimableItems {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "{}"
             },
-            "language": {
+            "queryString": {
                 "type": "string",
-                "attribute": "language",
-                "mutable": false,
-                "complexType": {
-                    "original": "LanguageKeys",
-                    "resolved": "\"ar\" | \"en\" | \"ku\" | \"ru\"",
-                    "references": {
-                        "LanguageKeys": {
-                            "location": "import",
-                            "path": "~types/locale",
-                            "id": "src/global/types/locale.ts::LanguageKeys"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "'en'"
-            },
-            "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",
+                "attribute": "query-string",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -631,15 +478,15 @@ export class VehicleClaimableItems {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "30"
+                "defaultValue": "''"
             },
-            "claimEndPoint": {
-                "type": "string",
-                "attribute": "claim-end-point",
+            "uploadMultipleDocumentsAtTheForm": {
+                "type": "boolean",
+                "attribute": "upload-multiple-documents-at-the-form",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -651,7 +498,7 @@ export class VehicleClaimableItems {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'api/vehicle/swift-claim'"
+                "defaultValue": "true"
             },
             "errorCallback": {
                 "type": "unknown",
@@ -663,13 +510,13 @@ export class VehicleClaimableItems {
                     "references": {
                         "ErrorKeys": {
                             "location": "import",
-                            "path": "~lib/get-local-language",
-                            "id": "src/global/lib/get-local-language.ts::ErrorKeys"
+                            "path": "~features/multi-lingual",
+                            "id": "src/features/multi-lingual/index.ts::ErrorKeys"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -719,6 +566,64 @@ export class VehicleClaimableItems {
                 "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",
@@ -747,27 +652,26 @@ export class VehicleClaimableItems {
     }
     static get states() {
         return {
-            "sharedLocales": {},
             "locale": {},
-            "activeTab": {},
             "isError": {},
-            "showPopup": {},
+            "errorMessage": {},
             "isLoading": {},
-            "externalVin": {},
+            "vehicleLookup": {},
+            "activeTab": {},
             "showPrintBox": {},
-            "errorMessage": {},
             "tabAnimationLoading": {},
-            "activePopupIndex": {},
-            "tabs": {},
             "lastSuccessfulClaimResponse": {},
-            "vehicleInformation": {}
+            "showClaimableItemPopover": {},
+            "selectedClaimItem": {},
+            "tabs": {},
+            "popoverTargetLocation": {}
         };
     }
     static get methods() {
         return {
             "setMockData": {
                 "complexType": {
-                    "signature": "(newMockData: MockJson<VehicleLookupDTO>) => Promise<void>",
+                    "signature": "(newMockData: VehicleLookupMock) => Promise<void>",
                     "parameters": [{
                             "name": "newMockData",
                             "type": "{ [key: string]: VehicleLookupDTO; }",
@@ -778,15 +682,10 @@ export class VehicleClaimableItems {
                             "location": "global",
                             "id": "global::Promise"
                         },
-                        "MockJson": {
+                        "VehicleLookupMock": {
                             "location": "import",
-                            "path": "~types/components",
-                            "id": "src/global/types/components.ts::MockJson"
-                        },
-                        "VehicleLookupDTO": {
-                            "location": "import",
-                            "path": "~types/generated/vehicle-lookup/vehicle-lookup-dto",
-                            "id": "src/global/types/generated/vehicle-lookup/vehicle-lookup-dto.ts::VehicleLookupDTO"
+                            "path": "~features/vehicle-lookup-component/types",
+                            "id": "src/features/vehicle-lookup-component/types.ts::VehicleLookupMock"
                         }
                     },
                     "return": "Promise<void>"
@@ -796,7 +695,7 @@ export class VehicleClaimableItems {
                     "tags": []
                 }
             },
-            "setData": {
+            "fetchData": {
                 "complexType": {
                     "signature": "(newData: VehicleLookupDTO | string, headers?: any) => Promise<void>",
                     "parameters": [{
@@ -817,15 +716,6 @@ export class VehicleClaimableItems {
                             "location": "import",
                             "path": "~types/generated/vehicle-lookup/vehicle-lookup-dto",
                             "id": "src/global/types/generated/vehicle-lookup/vehicle-lookup-dto.ts::VehicleLookupDTO"
-                        },
-                        "ReturnType": {
-                            "location": "global",
-                            "id": "global::ReturnType"
-                        },
-                        "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>"
@@ -850,33 +740,8 @@ export class VehicleClaimableItems {
                         },
                         "ErrorKeys": {
                             "location": "import",
-                            "path": "~lib/get-local-language",
-                            "id": "src/global/lib/get-local-language.ts::ErrorKeys"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "fetchData": {
-                "complexType": {
-                    "signature": "(requestedVin?: string, headers?: any) => Promise<void>",
-                    "parameters": [{
-                            "name": "requestedVin",
-                            "type": "string",
-                            "docs": ""
-                        }, {
-                            "name": "headers",
-                            "type": "any",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
+                            "path": "~features/multi-lingual",
+                            "id": "src/features/multi-lingual/index.ts::ErrorKeys"
                         }
                     },
                     "return": "Promise<void>"
@@ -917,7 +782,7 @@ export class VehicleClaimableItems {
                     "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; }",
+                            "type": "{ group: VehicleServiceItemGroup; showDocumentUploader: boolean; warnings?: VehicleItemWarning[]; printUrl?: string; 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": {
@@ -949,11 +814,8 @@ export class VehicleClaimableItems {
                 "propName": "isLoading",
                 "methodName": "onLoadingChange"
             }, {
-                "propName": "vehicleInformation",
-                "methodName": "resetProgressBar"
-            }, {
-                "propName": "popupClasses",
-                "methodName": "windowScrollListener"
+                "propName": "vehicleLookup",
+                "methodName": "onVehicleChange"
             }];
     }
 }