adp-web-components 0.0.89 → 0.0.90

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

@@ -0,0 +1,959 @@
+/*!
+ * 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 { 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 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,
+};
+export class VehicleClaimableItems {
+    constructor() {
+        this.headers = {};
+        this.isDev = false;
+        this.queryString = '';
+        this.coreOnly = false;
+        this.language = 'en';
+        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.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))
+                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; });
+        };
+        this.onActiveTabChange = ({ label }) => {
+            this.tabAnimationLoading = true;
+            clearTimeout(this.tabAnimationTimeoutRef);
+            this.tabAnimationTimeoutRef = setTimeout(() => {
+                this.activeTab = label;
+                this.claimableContentWrapper.scrollLeft = 0;
+                setTimeout(() => {
+                    this.tabAnimationLoading = false;
+                    this.updateProgressBar();
+                }, 100);
+            }, 500);
+        };
+    }
+    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');
+    }
+    async setMockData(newMockData) {
+        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;
+            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);
+        }
+    }
+    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);
+    }
+    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();
+        }
+    }
+    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);
+        }
+    }
+    resetProgressBar() {
+        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');
+    }
+    async completeClaim(response) {
+        const serviceItems = this.getServiceItems();
+        const item = this.cachedClaimItem;
+        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';
+        });
+        this.pendingItemHighlighted = false;
+        const vehicleDataClone = JSON.parse(JSON.stringify(this.vehicleInformation));
+        vehicleDataClone.serviceItems = serviceDataClone;
+        this.vehicleInformation = JSON.parse(JSON.stringify(vehicleDataClone));
+        this.showPrintBox = true;
+        this.lastSuccessfulClaimResponse = response;
+    }
+    async claim(item) {
+        const serviceItems = this.getServiceItems();
+        const vinDataClone = JSON.parse(JSON.stringify(serviceItems));
+        const index = serviceItems.indexOf(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) {
+            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)))))));
+    }
+    render() {
+        var _a;
+        const serviceItems = this.getServiceItems();
+        const texts = this.locale;
+        const hasInactiveItems = serviceItems.filter(x => x.status === 'activationRequired').length > 0;
+        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)))))))));
+    }
+    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 {
+            "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": "any",
+                "attribute": "headers",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "{}"
+            },
+            "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,
+                "defaultValue": "false"
+            },
+            "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": "''"
+            },
+            "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"
+            },
+            "language": {
+                "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",
+                "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'"
+            },
+            "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": "~lib/get-local-language",
+                            "id": "src/global/lib/get-local-language.ts::ErrorKeys"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "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
+            },
+            "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 {
+            "sharedLocales": {},
+            "locale": {},
+            "activeTab": {},
+            "isError": {},
+            "showPopup": {},
+            "isLoading": {},
+            "externalVin": {},
+            "showPrintBox": {},
+            "errorMessage": {},
+            "tabAnimationLoading": {},
+            "activePopupIndex": {},
+            "tabs": {},
+            "lastSuccessfulClaimResponse": {},
+            "vehicleInformation": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setMockData": {
+                "complexType": {
+                    "signature": "(newMockData: MockJson<VehicleLookupDTO>) => Promise<void>",
+                    "parameters": [{
+                            "name": "newMockData",
+                            "type": "{ [key: string]: VehicleLookupDTO; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "MockJson": {
+                            "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"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setData": {
+                "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"
+                        },
+                        "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>"
+                },
+                "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": "~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"
+                        }
+                    },
+                    "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": "vehicleInformation",
+                "methodName": "resetProgressBar"
+            }, {
+                "propName": "popupClasses",
+                "methodName": "windowScrollListener"
+            }];
+    }
+}