@wayke-se/components-react 2.16.0 → 3.0.0-beta.10

package/dist-web/index.js

@@ -5,11 +5,11 @@ import { sv } from 'date-fns/locale';
 import ReactDOM from 'react-dom';
 import { Slider as Slider$1, Rail, Handles, Tracks } from 'react-compound-slider';
 import LazyLoad from 'react-lazyload';
+import WaykeEcomWeb from '@wayke-se/ecom-web';
 import Slider$2 from 'react-slick';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { gql, useQuery, ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import { marked } from 'marked';
-import EcomBase from '@wayke-se/ecom-react';
 import { parsePhoneNumberFromString } from 'libphonenumber-js/core';
 
 const _colors = {
@@ -679,14 +679,15 @@ const getTranslatedSortOptionDisplayName = (str) => {
 };
 
 const Result = ({ children }) => {
-    var _a;
     const { loading, response, documents, queryFilter, onLoadMore, onFilterUpdate } = useSearch();
     const onSortOptionChange = useCallback((e) => onFilterUpdate(e.currentTarget.value), []);
-    const numberOfDocuments = (documents === null || documents === void 0 ? void 0 : documents.length) || 0;
-    const numberOfHits = (response === null || response === void 0 ? void 0 : response.documentList.numberOfHits) || 0;
-    const useSkeletons = !!(queryFilter === null || queryFilter === void 0 ? void 0 : queryFilter.concatResult);
-    const selectedSortOption = (_a = response === null || response === void 0 ? void 0 : response.documentList.sortOptions.find((x) => x.selected)) === null || _a === void 0 ? void 0 : _a.query;
-    const sortOptions = response === null || response === void 0 ? void 0 : response.documentList.sortOptions.filter((x) => x.displayName !== 'relevance').map((so) => ({
+    const numberOfDocuments = documents?.length || 0;
+    const numberOfHits = response?.documentList.numberOfHits || 0;
+    const useSkeletons = !!queryFilter?.concatResult;
+    const selectedSortOption = response?.documentList.sortOptions.find((x) => x.selected)?.query;
+    const sortOptions = response?.documentList.sortOptions
+        .filter((x) => x.displayName !== 'relevance')
+        .map((so) => ({
         value: so.query,
         displayName: getTranslatedSortOptionDisplayName(so.displayName),
     }));
@@ -1196,7 +1197,7 @@ const ChecklistItem = ({ label, onClick, active, radio }) => (React__default.cre
         active && React__default.createElement(ActionIcon, null, radio ? React__default.createElement(IconRadio, { block: true }) : React__default.createElement(IconCheck, { block: true })),
         React__default.createElement(ActionLabel, { className: active ? 'wayke__theme wayke__font--bold wayke__color--primary-text' : '' }, label))));
 const Checklist = ({ items, radio }) => {
-    if (!(items === null || items === void 0 ? void 0 : items.length)) {
+    if (!items?.length) {
         return null;
     }
     return (React__default.createElement(List$2, null, items.map((item) => (React__default.createElement(ChecklistItem, { key: item.label, label: item.label, onClick: item.onClick, active: item.active, radio: radio })))));
@@ -1231,7 +1232,7 @@ const ChecklistFacet = ({ facet }) => {
                 .map((f) => ({
                 label: f.displayName,
                 onClick: () => onClick(f),
-                active: (selected === null || selected === void 0 ? void 0 : selected[f.displayName]) !== undefined ? selected[f.displayName] : f.selected,
+                active: selected?.[f.displayName] !== undefined ? selected[f.displayName] : f.selected,
             })) })));
 };
 
@@ -1369,7 +1370,7 @@ const ColorSelectFacet = ({ facet }) => {
             .map((f) => ({
             label: f.displayName,
             onClick: () => onClick(f),
-            active: (selected === null || selected === void 0 ? void 0 : selected[f.displayName]) !== undefined ? selected[f.displayName] : f.selected,
+            active: selected?.[f.displayName] !== undefined ? selected[f.displayName] : f.selected,
             hex: [getHexColorFromDisplayName(f.displayName)],
         })) }));
 };
@@ -1514,9 +1515,9 @@ const RangeSlider = ({ loading, values, domain, steps, unit, formatValues, maxPr
 
 const getInitialValues = (domain, facet, searchParams) => {
     const facetMin = domain[0]; //parseInt(facet.filters[0].displayName, 10);
-    const _queryMin = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(`${facet.id}.min`)) || null;
+    const _queryMin = searchParams?.get(`${facet.id}.min`) || null;
     const facetMax = domain[domain.length - 1]; //parseInt(facet.filters[facet.filters.length - 1].displayName, 10);
-    const _queryMax = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(`${facet.id}.max`)) || null;
+    const _queryMax = searchParams?.get(`${facet.id}.max`) || null;
     const queryMin = parseInt(_queryMin === null ? `${facetMin}` : _queryMin, 10);
     const min = facetMin > queryMin ? facetMin : queryMin;
     const queryMax = parseInt(_queryMax === null ? `${facetMax}` : _queryMax, 10);
@@ -1538,41 +1539,39 @@ const getSteps$1 = (initialAllValues) => {
     return initialAllValues;
 };
 const RangeFacet = ({ facet, unit, formatValues }) => {
-    var _a, _b, _c;
     const { loading, queryFilter, initialFacets, onFilterUpdate } = useSearch();
-    const initialFacet = initialFacets === null || initialFacets === void 0 ? void 0 : initialFacets.find((x) => x.id === facet.id);
-    const maxPrefix = (_b = (_a = initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.filters[(initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.filters.length) - 1]) === null || _a === void 0 ? void 0 : _a.displayName) === null || _b === void 0 ? void 0 : _b.includes('+');
+    const initialFacet = initialFacets?.find((x) => x.id === facet.id);
+    const maxPrefix = initialFacet?.filters[initialFacet?.filters.length - 1]?.displayName?.includes('+');
     const [state, setValues] = useState(undefined);
     useEffect(() => {
-        const _initialAllValues = (initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.filters.map((f) => parseInt(f.displayName.replace(/[\<\>+-]+/g, ''), 10))) || [1, 2];
+        const _initialAllValues = initialFacet?.filters.map((f) => parseInt(f.displayName.replace(/[\<\>+-]+/g, ''), 10)) || [1, 2];
         const _steps = getSteps$1(_initialAllValues);
         const domain = [_steps[0], _steps[_steps.length - 1]];
         setValues({
-            id: initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.id,
+            id: initialFacet?.id,
             steps: _steps,
             domain: [_steps[0], _steps[_steps.length - 1]],
-            values: (initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.filters.length)
+            values: initialFacet?.filters.length
                 ? getInitialValues(domain, initialFacet, queryFilter.searchParams)
                 : [0, 0],
         });
-    }, [initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.id]);
+    }, [initialFacet?.id]);
     useEffect(() => {
-        var _a, _b;
-        if (state === null || state === void 0 ? void 0 : state.id) {
-            const init = (initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.filters.length)
+        if (state?.id) {
+            const init = initialFacet?.filters.length
                 ? getInitialValues(state.domain, initialFacet, queryFilter.searchParams)
                 : [0, 0];
-            const minStr = (_a = queryFilter.searchParams) === null || _a === void 0 ? void 0 : _a.get(`${facet.id}.min`);
-            const maxStr = (_b = queryFilter.searchParams) === null || _b === void 0 ? void 0 : _b.get(`${facet.id}.max`);
+            const minStr = queryFilter.searchParams?.get(`${facet.id}.min`);
+            const maxStr = queryFilter.searchParams?.get(`${facet.id}.max`);
             const min = minStr ? parseFloat(minStr) : init[0];
             const max = maxStr ? parseFloat(maxStr) : init[1];
             if (min !== state.values[0] || max !== state.values[1]) {
                 onChange([min, max]);
             }
         }
-    }, [(_c = queryFilter.searchParams) === null || _c === void 0 ? void 0 : _c.toString()]);
+    }, [queryFilter.searchParams?.toString()]);
     const onChange = useCallback((nextValues) => {
-        if (state === null || state === void 0 ? void 0 : state.id) {
+        if (state?.id) {
             if (state.values[0] !== nextValues[0] || state.values[1] !== nextValues[1]) {
                 setValues({ ...state, values: nextValues.slice() });
                 const query = new URLSearchParams(queryFilter.searchParams);
@@ -1631,7 +1630,7 @@ const FilterPanel = ({ facet, filteredFacets, numberOfHits, loading, onFilterUpd
                         React__default.createElement(ButtonContent, null, `Visa ${numberOfHits} ${numberOfHits === 1 ? 'bil' : 'bilar'}`))))) },
         React__default.createElement(Accordion, null, filteredFacets
             .filter((x) => x.filters.length)
-            .map((f) => (React__default.createElement(AccordionItem, { key: f.displayName, heading: f.displayName, isActive: f.id === (facet === null || facet === void 0 ? void 0 : facet.id) },
+            .map((f) => (React__default.createElement(AccordionItem, { key: f.displayName, heading: f.displayName, isActive: f.id === facet?.id },
             React__default.createElement(Repeat, null,
                 React__default.createElement(FacetSelector, { facet: f }))))))));
 };
@@ -1647,9 +1646,8 @@ const isSelected = (f, searchParams) => {
     }
 };
 const Filter = ({ filterList }) => {
-    var _a;
     const { queryFilter, initialFacets, loading, response, onFilterUpdate } = useSearch();
-    const facets = response === null || response === void 0 ? void 0 : response.facets;
+    const facets = response?.facets;
     const [facet, setFacet] = useState();
     const onSelectFacet = useCallback((nextFacet) => setFacet(nextFacet), []);
     const onClose = useCallback(() => setFacet(undefined), []);
@@ -1657,12 +1655,16 @@ const Filter = ({ filterList }) => {
         return null;
     }
     const filterNames = filterList ? filterList.map((x) => x.filterName) : undefined;
-    const filteredFacets = (_a = facets === null || facets === void 0 ? void 0 : facets.filter((x) => x.id !== 'segment')) === null || _a === void 0 ? void 0 : _a.filter((f) => (filterNames ? filterNames.includes(f.id) : true)).sort((a, b) => filterNames
+    const filteredFacets = facets
+        ?.filter((x) => x.id !== 'segment')
+        ?.filter((f) => (filterNames ? filterNames.includes(f.id) : true))
+        .sort((a, b) => filterNames
         ? filterNames.indexOf(a.id) -
             filterNames.indexOf(b.id)
-        : 0).map((x) => {
-        const match = filterList === null || filterList === void 0 ? void 0 : filterList.find((y) => y.filterName === x.id);
-        if (match === null || match === void 0 ? void 0 : match.displayName) {
+        : 0)
+        .map((x) => {
+        const match = filterList?.find((y) => y.filterName === x.id);
+        if (match?.displayName) {
             return {
                 ...x,
                 displayName: match.displayName,
@@ -1674,7 +1676,7 @@ const Filter = ({ filterList }) => {
         };
     });
     return (React__default.createElement(React__default.Fragment, null,
-        initialFacets && facet && (React__default.createElement(FilterPanel, { filterList: filterList, facet: facet, loading: loading, filteredFacets: filteredFacets, numberOfHits: (response === null || response === void 0 ? void 0 : response.documentList.numberOfHits) || 0, onFilterUpdate: onFilterUpdate, onClose: onClose })),
+        initialFacets && facet && (React__default.createElement(FilterPanel, { filterList: filterList, facet: facet, loading: loading, filteredFacets: filteredFacets, numberOfHits: response?.documentList.numberOfHits || 0, onFilterUpdate: onFilterUpdate, onClose: onClose })),
         React__default.createElement(List, null, filteredFacets
             .filter((x) => x.filters.length)
             .map((f) => {
@@ -1983,8 +1985,7 @@ const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, desc
 };
 
 const resolveImage = (document) => {
-    var _a, _b, _c;
-    const img = (_c = (_b = (_a = document.featuredImage) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.url;
+    const img = document.featuredImage?.files?.[0]?.url;
     if (img) {
         return `${img}?w=567&q=72`;
     }
@@ -1996,7 +1997,7 @@ const Grid = ({ documents, placeholderImage, hashRoute, pathRoute, onClickItem }
     }
     return (React__default.createElement(Wrapper$7, null,
         React__default.createElement(List$4, null, documents.map((document) => {
-            const _path = pathRoute === null || pathRoute === void 0 ? void 0 : pathRoute.replace(/^\/|\/$/g, '');
+            const _path = pathRoute?.replace(/^\/|\/$/g, '');
             const prefix = _path ? `/${_path}/` : '/';
             const pathRouteUrl = window.location.pathname === '/'
                 ? `${prefix}${document._id}`
@@ -2668,7 +2669,7 @@ const ExtendContent = ({ children, actionTitle, onClick }) => {
         }
     }, []);
     const onRef = (ref) => {
-        const refHeight = (ref === null || ref === void 0 ? void 0 : ref.clientHeight) || 0;
+        const refHeight = ref?.clientHeight || 0;
         if (refHeight < 207) {
             setExtend(true);
         }
@@ -3082,7 +3083,7 @@ const getYoutubeThumbnail = (url) => {
     };
 };
 const onImageLoad = (e, thumbnail) => {
-    if ((thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.length) === 2 &&
+    if (thumbnail?.length === 2 &&
         e.currentTarget.src === thumbnail[0] &&
         e.currentTarget.naturalWidth === 120 &&
         e.currentTarget.naturalHeight === 90) {
@@ -3090,7 +3091,7 @@ const onImageLoad = (e, thumbnail) => {
     }
 };
 const onImageError = (e, thumbnail) => {
-    if ((thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.length) === 2) {
+    if (thumbnail?.length === 2) {
         e.currentTarget.src = thumbnail[1];
     }
 };
@@ -3570,7 +3571,7 @@ const Lightbox = ({ index, media, onClose }) => {
             onClose();
         }
     };
-    return (React__default.createElement(Wrapper$h, { ref: (ref) => ref === null || ref === void 0 ? void 0 : ref.focus(), onKeyDown: onKeyDown, tabIndex: 0 },
+    return (React__default.createElement(Wrapper$h, { ref: (ref) => ref?.focus(), onKeyDown: onKeyDown, tabIndex: 0 },
         React__default.createElement(UiBlock$1, { onClick: onClose, "aria-hidden": true }),
         media.map((m, i) => (React__default.createElement(Item$8, { key: i, ref: index === i ? onRef : undefined },
             m.type === 'image' && (React__default.createElement(Img$1, { id: `lightbox-image-${i}`, src: m.files[0].url, alt: `Bild ${i + 1}` })),
@@ -3582,7 +3583,7 @@ const Lightbox = ({ index, media, onClose }) => {
 };
 
 const cache = {};
-const getCachedResult = (key) => (cache === null || cache === void 0 ? void 0 : cache[key]) || undefined;
+const getCachedResult = (key) => cache?.[key] || undefined;
 const setCachedResult = (key, value) => {
     cache[key] = value;
 };
@@ -3653,7 +3654,7 @@ const useVimeoThumbnail = (id, small) => {
     const [thumbnail, setThumbnail] = useState();
     const { data } = useFetch(`http://vimeo.com/api/v2/video/${id}.json`, {}, !id || !!thumbnail, true);
     useEffect(() => {
-        if (data === null || data === void 0 ? void 0 : data[0]) {
+        if (data?.[0]) {
             if (small && data[0].thumbnail_small) {
                 setThumbnail(data[0].thumbnail_small);
             }
@@ -3666,7 +3667,7 @@ const useVimeoThumbnail = (id, small) => {
 };
 
 const useThumbnail = (url, small) => {
-    if (url === null || url === void 0 ? void 0 : url.toLowerCase().endsWith('.mp4'))
+    if (url?.toLowerCase().endsWith('.mp4'))
         return;
     const [thumbnail, setThumbnail] = useState();
     const vimeoId = url ? getVimeoId(url) : undefined;
@@ -3825,7 +3826,7 @@ const GalleryEmbed = ({ src, index }) => {
     const onError = useCallback((e) => onImageError(e, thumbnail), [thumbnail]);
     const onLoad = useCallback((e) => onImageLoad(e, thumbnail), [thumbnail]);
     const customVideo = src.toLowerCase().endsWith('.mp4');
-    if ((thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.length) && !customVideo) {
+    if (thumbnail?.length && !customVideo) {
         return (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(ImageFull, { onLoad: onLoad, src: thumbnail[0], onError: onError, alt: `Bild ${index + 1}` }),
             React__default.createElement(MediaButton, { text: "Spela video", onClick: onClick }),
@@ -3845,8 +3846,8 @@ const QuickNavEmbeded = ({ src, index }) => {
     const thumbnail = useThumbnail(src);
     const onError = useCallback((e) => onImageError(e, thumbnail), [thumbnail]);
     const onLoad = useCallback((e) => onImageLoad(e, thumbnail), [thumbnail]);
-    const customVideo = src === null || src === void 0 ? void 0 : src.toLowerCase().endsWith('.mp4');
-    if ((thumbnail === null || thumbnail === void 0 ? void 0 : thumbnail.length) && !customVideo)
+    const customVideo = src?.toLowerCase().endsWith('.mp4');
+    if (thumbnail?.length && !customVideo)
         return (React__default.createElement(QuickNavImg, { onLoad: onLoad, src: thumbnail[0], onError: onError, alt: `Bild ${index + 1}` }));
     if (customVideo)
         return React__default.createElement(CustomPlayer, { key: index, url: src, ratio: "66.66%" });
@@ -3907,8 +3908,7 @@ const Gallery = ({ media, placeholderImage }) => {
     const [lightbox, setLightbox] = useState(false);
     const [navigationDisabled, setNavigationDisabled] = useState(false);
     const beforeChange = useCallback((_, newIndex) => {
-        var _a, _b;
-        const element = (_b = (_a = quickNavRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('li')) === null || _b === void 0 ? void 0 : _b[newIndex];
+        const element = quickNavRef.current?.querySelectorAll('li')?.[newIndex];
         if (element) {
             scrollIntoView(element, { scrollMode: 'if-needed', block: 'nearest', inline: 'nearest' });
         }
@@ -3926,7 +3926,7 @@ const Gallery = ({ media, placeholderImage }) => {
     }, []);
     const onClick = useCallback(() => {
         PubSub.publish('ImagesClick');
-        if (!isDragging.current && !lightbox && !!(media === null || media === void 0 ? void 0 : media.length)) {
+        if (!isDragging.current && !lightbox && !!media?.length) {
             setLightbox(true);
         }
     }, [lightbox, media]);
@@ -3961,20 +3961,17 @@ const Gallery = ({ media, placeholderImage }) => {
         setNavigationDisabled(false);
     };
     const onToggleLightbox = useCallback(() => setLightbox(!lightbox), [lightbox]);
-    const mediaLength = (media === null || media === void 0 ? void 0 : media.length) || 0;
+    const mediaLength = media?.length || 0;
     const placeholder = useMemo(() => placeholderImage || DEFAULT_PLACEHOLDER_IMAGE, [placeholderImage]);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Wrapper$g, null,
             React__default.createElement(Main, null,
                 React__default.createElement(SliderWrapper, { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onClick: onClick },
-                    React__default.createElement(Slider$2, { ...sliderSettings, swipe: !navigationDisabled, touchMove: !navigationDisabled, swipeToSlide: !navigationDisabled, ref: slider, beforeChange: beforeChange }, !!(media === null || media === void 0 ? void 0 : media.length) ? (media.map((m, i) => {
-                        var _a;
-                        return (React__default.createElement(Item$7, { key: m.files[0].url || i },
-                            m.type === 'image' && (React__default.createElement(Image$1, { src: (_a = m.files[0].formats.filter(notEmpty).find((x) => x.format === '1170x')) === null || _a === void 0 ? void 0 : _a.url, alt: `Bild ${i + 1}` })),
-                            m.type === 'threesixty' && (React__default.createElement(ThreeSixty, { urls: m.files.map((x) => x.url), visible: i === index, onDisableNavigation: onDisableNavigation, navigationDisabled: navigationDisabled })),
-                            m.type === 'embedded' && React__default.createElement(GalleryEmbed, { src: m.files[0].url, index: i + 1 }),
-                            m.type === 'sphere' && (React__default.createElement(Sphere, { visible: i === index, url: m.files[0].url, preview: m.files[0].url, onDisableNavigation: onDisableNavigation, navigationDisabled: navigationDisabled }))));
-                    })) : (React__default.createElement(Item$7, { key: placeholder },
+                    React__default.createElement(Slider$2, { ...sliderSettings, swipe: !navigationDisabled, touchMove: !navigationDisabled, swipeToSlide: !navigationDisabled, ref: slider, beforeChange: beforeChange }, !!media?.length ? (media.map((m, i) => (React__default.createElement(Item$7, { key: m.files[0].url || i },
+                        m.type === 'image' && (React__default.createElement(Image$1, { src: m.files[0].formats.filter(notEmpty).find((x) => x.format === '1170x')?.url, alt: `Bild ${i + 1}` })),
+                        m.type === 'threesixty' && (React__default.createElement(ThreeSixty, { urls: m.files.map((x) => x.url), visible: i === index, onDisableNavigation: onDisableNavigation, navigationDisabled: navigationDisabled })),
+                        m.type === 'embedded' && React__default.createElement(GalleryEmbed, { src: m.files[0].url, index: i + 1 }),
+                        m.type === 'sphere' && (React__default.createElement(Sphere, { visible: i === index, url: m.files[0].url, preview: m.files[0].url, onDisableNavigation: onDisableNavigation, navigationDisabled: navigationDisabled })))))) : (React__default.createElement(Item$7, { key: placeholder },
                         React__default.createElement(Image$1, { src: placeholder, alt: `Bild 1` })))),
                     navigationDisabled && mediaLength > 1 && (React__default.createElement(EnableNavigationButton, null,
                         React__default.createElement(ButtonSecondary, { onClick: onEnableNavigation, title: "St\u00E4ng" },
@@ -3985,9 +3982,8 @@ const Gallery = ({ media, placeholderImage }) => {
                     React__default.createElement(ArrowRight, { onClick: nextImage, title: "N\u00E4sta bild" },
                         React__default.createElement(IconChevronRight, { block: true }))))),
             React__default.createElement(Alt, null,
-                React__default.createElement(QuickNav, { ref: quickNavRef }, !!(media === null || media === void 0 ? void 0 : media.length) ? (media.map((m, i) => {
-                    var _a;
-                    const src = ((_a = m.files[0].formats.filter(notEmpty).find((x) => x.format === '225x150')) === null || _a === void 0 ? void 0 : _a.url) ||
+                React__default.createElement(QuickNav, { ref: quickNavRef }, !!media?.length ? (media.map((m, i) => {
+                    const src = m.files[0].formats.filter(notEmpty).find((x) => x.format === '225x150')?.url ||
                         m.files[0].url;
                     return (React__default.createElement(QuickNavItem, { key: src || i, active: index === i },
                         React__default.createElement(QuickNavBtn, { onClick: () => goTo(i), title: `Gå till bild ${i + 1}` },
@@ -3998,7 +3994,7 @@ const Gallery = ({ media, placeholderImage }) => {
                 })) : (React__default.createElement(QuickNavItem, { key: placeholder, active: true },
                     React__default.createElement(QuickNavBtn, { onClick: () => goTo(0), title: `Gå till bild 0` },
                         React__default.createElement(QuickNavImg, { src: placeholder, alt: `Bild 1` }))))))),
-        lightbox && !!(media === null || media === void 0 ? void 0 : media.length) && (React__default.createElement(Lightbox, { media: media, index: index, onClose: onToggleLightbox }))));
+        lightbox && !!media?.length && (React__default.createElement(Lightbox, { media: media, index: index, onClose: onToggleLightbox }))));
 };
 
 const ProductPage = styled.div `
@@ -4418,11 +4414,11 @@ const Leasing = ({ financialOption }) => {
                             },
                             {
                                 label: 'Bindningstid',
-                                value: `${duration === null || duration === void 0 ? void 0 : duration.current} månader`,
+                                value: `${duration?.current} månader`,
                             },
                             {
                                 label: 'Årlig körsträcka',
-                                value: `${numberSeparator((mileage === null || mileage === void 0 ? void 0 : mileage.current) || 0)} mil/år`,
+                                value: `${numberSeparator(mileage?.current || 0)} mil/år`,
                             },
                         ] }))))),
         React__default.createElement(OptionBox, null,
@@ -4431,14 +4427,14 @@ const Leasing = ({ financialOption }) => {
                 React__default.createElement("p", null,
                     "Privatleasing",
                     ' ',
-                    (mileage === null || mileage === void 0 ? void 0 : mileage.current) && (duration === null || duration === void 0 ? void 0 : duration.current) && (React__default.createElement(React__default.Fragment, null,
+                    mileage?.current && duration?.current && (React__default.createElement(React__default.Fragment, null,
                         React__default.createElement(UtilityTextPrimary, null,
-                            numberSeparator(mileage === null || mileage === void 0 ? void 0 : mileage.current),
+                            numberSeparator(mileage?.current),
                             " mil/\u00E5r"),
                         ' ',
                         "i ",
-                        React__default.createElement(UtilityTextPrimary, null, duration === null || duration === void 0 ? void 0 :
-                            duration.current,
+                        React__default.createElement(UtilityTextPrimary, null,
+                            duration?.current,
                             " m\u00E5n"),
                         ".",
                         ' '))),
@@ -4569,7 +4565,7 @@ const SliderWithLabel = ({ label, values, domain, steps, loading, unit, formatVa
     }, [loading]);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(RepeatTiny, null,
-            React__default.createElement(RangeSliderLabel, { label: label, value: `${numberSeparator((local === null || local === void 0 ? void 0 : local[0]) || values[0])}${unit ? ` ${unit}` : ''}` })),
+            React__default.createElement(RangeSliderLabel, { label: label, value: `${numberSeparator(local?.[0] || values[0])}${unit ? ` ${unit}` : ''}` })),
         React__default.createElement(RepeatTiny, null,
             React__default.createElement(RangeSliderSimple, { loading: loading, values: values, domain: domain, steps: steps, onChange: onChange, onUpdate: onUpdate, unit: unit, formatValues: formatValues }))));
 };
@@ -4585,7 +4581,6 @@ const stepGenerator = (step, max, steps = [], current) => {
     return stepGenerator(step, max, steps, nextCurrent);
 };
 const LoanModal = ({ id, financialOption, onClose }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const [tmp, setTmp] = useState();
     const [extend, setExtend] = React__default.useState(false);
     const onToggleExtend = React__default.useCallback(() => {
@@ -4595,60 +4590,59 @@ const LoanModal = ({ id, financialOption, onClose }) => {
         setExtend(!extend);
     }, [extend]);
     const [variables, setVariables] = useState({
-        duration: (_a = financialOption.duration) === null || _a === void 0 ? void 0 : _a.current,
-        downPayment: (_b = financialOption.downPayment) === null || _b === void 0 ? void 0 : _b.current,
-        residual: (_c = financialOption.residual) === null || _c === void 0 ? void 0 : _c.current,
+        duration: financialOption.duration?.current,
+        downPayment: financialOption.downPayment?.current,
+        residual: financialOption.residual?.current,
     });
     const { duration, downPayment, residual } = variables;
     const { loading, data } = useLoanCalculation(id, duration, downPayment, residual);
     useEffect(() => {
-        var _a, _b, _c, _d, _e, _f;
         if (data) {
             setTmp(data);
             setVariables({
-                duration: ((_b = (_a = data === null || data === void 0 ? void 0 : data.loan) === null || _a === void 0 ? void 0 : _a.duration) === null || _b === void 0 ? void 0 : _b.current) || 0,
-                downPayment: ((_d = (_c = data === null || data === void 0 ? void 0 : data.loan) === null || _c === void 0 ? void 0 : _c.downPayment) === null || _d === void 0 ? void 0 : _d.current) || 0,
-                residual: ((_f = (_e = data === null || data === void 0 ? void 0 : data.loan) === null || _e === void 0 ? void 0 : _e.residual) === null || _f === void 0 ? void 0 : _f.current) || 0,
+                duration: data?.loan?.duration?.current || 0,
+                downPayment: data?.loan?.downPayment?.current || 0,
+                residual: data?.loan?.residual?.current || 0,
             });
         }
     }, [data]);
-    const loan = (data === null || data === void 0 ? void 0 : data.loan) || (tmp === null || tmp === void 0 ? void 0 : tmp.loan);
-    const downPaymentCurrent = ((_d = loan === null || loan === void 0 ? void 0 : loan.downPayment) === null || _d === void 0 ? void 0 : _d.current) || 0;
-    const downPaymentMin = ((_e = loan === null || loan === void 0 ? void 0 : loan.downPayment) === null || _e === void 0 ? void 0 : _e.min) || 0;
-    const downPaymentMax = ((_f = loan === null || loan === void 0 ? void 0 : loan.downPayment) === null || _f === void 0 ? void 0 : _f.max) || 0;
-    const downPaymentStep = ((_g = loan === null || loan === void 0 ? void 0 : loan.downPayment) === null || _g === void 0 ? void 0 : _g.step) || 0;
+    const loan = data?.loan || tmp?.loan;
+    const downPaymentCurrent = loan?.downPayment?.current || 0;
+    const downPaymentMin = loan?.downPayment?.min || 0;
+    const downPaymentMax = loan?.downPayment?.max || 0;
+    const downPaymentStep = loan?.downPayment?.step || 0;
     const downPaymentSteps = stepGenerator(downPaymentStep, downPaymentMax);
     const onDownPaymentChange = useCallback((values) => {
         PubSub.publish('FinanceInterest');
         setVariables({ ...variables, downPayment: values[0] });
     }, [variables]);
-    const durationCurrent = ((_h = loan === null || loan === void 0 ? void 0 : loan.duration) === null || _h === void 0 ? void 0 : _h.current) || 0;
-    const durationMin = ((_j = loan === null || loan === void 0 ? void 0 : loan.duration) === null || _j === void 0 ? void 0 : _j.min) || 0;
-    const durationMax = ((_k = loan === null || loan === void 0 ? void 0 : loan.duration) === null || _k === void 0 ? void 0 : _k.max) || 0;
-    const durationStep = ((_l = loan === null || loan === void 0 ? void 0 : loan.duration) === null || _l === void 0 ? void 0 : _l.step) || 0;
+    const durationCurrent = loan?.duration?.current || 0;
+    const durationMin = loan?.duration?.min || 0;
+    const durationMax = loan?.duration?.max || 0;
+    const durationStep = loan?.duration?.step || 0;
     const durationSteps = stepGenerator(durationStep, durationMax);
     const onDurationChange = useCallback((values) => {
         PubSub.publish('FinanceInterest');
         setVariables({ ...variables, duration: values[0] });
     }, [variables]);
-    const residualCurrent = (((_m = loan === null || loan === void 0 ? void 0 : loan.residual) === null || _m === void 0 ? void 0 : _m.current) || 0) * 100 || 0;
-    const residualMin = (((_o = loan === null || loan === void 0 ? void 0 : loan.residual) === null || _o === void 0 ? void 0 : _o.min) || 0) * 100 || 0;
-    const residualMax = (((_p = loan === null || loan === void 0 ? void 0 : loan.residual) === null || _p === void 0 ? void 0 : _p.max) || 0) * 100 || 0;
-    const residualStep = (((_q = loan === null || loan === void 0 ? void 0 : loan.residual) === null || _q === void 0 ? void 0 : _q.step) || 0) * 100 || 0;
+    const residualCurrent = (loan?.residual?.current || 0) * 100 || 0;
+    const residualMin = (loan?.residual?.min || 0) * 100 || 0;
+    const residualMax = (loan?.residual?.max || 0) * 100 || 0;
+    const residualStep = (loan?.residual?.step || 0) * 100 || 0;
     const residualSteps = stepGenerator(residualStep, residualMax);
     const onResidualChange = useCallback((values) => {
         PubSub.publish('FinanceInterest');
         setVariables({ ...variables, residual: values[0] / 100 });
     }, [variables]);
-    const interestText = (((loan === null || loan === void 0 ? void 0 : loan.interest) || 0) * 100).toFixed(2);
-    const effectiveInterestText = (((loan === null || loan === void 0 ? void 0 : loan.effectiveInterest) || 0) * 100).toFixed(2);
+    const interestText = ((loan?.interest || 0) * 100).toFixed(2);
+    const effectiveInterestText = ((loan?.effectiveInterest || 0) * 100).toFixed(2);
     return (React__default.createElement(Modal, { title: "L\u00E5nealternativ", onClose: onClose },
         React__default.createElement(Repeat, null,
             React__default.createElement(ContentLogo, null,
-                (financialOption === null || financialOption === void 0 ? void 0 : financialOption.description) && (React__default.createElement(ContentLogoText, null,
+                financialOption?.description && (React__default.createElement(ContentLogoText, null,
                     React__default.createElement(Content$2, null,
                         React__default.createElement("p", null, financialOption.description)))),
-                (financialOption === null || financialOption === void 0 ? void 0 : financialOption.image) && (React__default.createElement(ContentLogoMedia, null,
+                financialOption?.image && (React__default.createElement(ContentLogoMedia, null,
                     React__default.createElement(LogoBox, { logo: financialOption.image, alt: financialOption.name || 'Logotyp', wide: true }))))),
         React__default.createElement(Repeat, null,
             React__default.createElement(RepeatSmall, null,
@@ -4660,7 +4654,7 @@ const LoanModal = ({ id, financialOption, onClose }) => {
             React__default.createElement(RepeatSmall, null,
                 React__default.createElement(RepeatTiny, null,
                     React__default.createElement(Content$2, { small: true },
-                        React__default.createElement("p", null, `*Beräknat på ${interestText} % ränta (effektivt ${effectiveInterestText} %)${(loan === null || loan === void 0 ? void 0 : loan.mileage) !== null ? `och en årlig körsträcka om ${loan === null || loan === void 0 ? void 0 : loan.mileage} mil.` : ''}`)))),
+                        React__default.createElement("p", null, `*Beräknat på ${interestText} % ränta (effektivt ${effectiveInterestText} %)${loan?.mileage !== null ? `och en årlig körsträcka om ${loan?.mileage} mil.` : ''}`)))),
             React__default.createElement(RepeatSmall, null,
                 React__default.createElement(ButtonClear, { onClick: onToggleExtend, title: extend ? 'Visa mindre information' : 'Visa mer information' },
                     React__default.createElement(ButtonContent, null, extend ? 'Mindre information' : 'Mer information'))),
@@ -4677,28 +4671,27 @@ const LoanModal = ({ id, financialOption, onClose }) => {
                             },
                             {
                                 label: 'Uppläggningskostnad',
-                                value: `${numberSeparator((financialOption === null || financialOption === void 0 ? void 0 : financialOption.setupFee) || 0)} kr`,
+                                value: `${numberSeparator(financialOption?.setupFee || 0)} kr`,
                             },
                             {
                                 label: 'Administrativa avgifter',
-                                value: `${numberSeparator((financialOption === null || financialOption === void 0 ? void 0 : financialOption.administrationFee) || 0)} kr/mån`,
+                                value: `${numberSeparator(financialOption?.administrationFee || 0)} kr/mån`,
                             },
                             {
                                 label: 'Total kreditkostnad',
-                                value: `${numberSeparator((loan === null || loan === void 0 ? void 0 : loan.totalCreditCost) || 0)} kr`,
+                                value: `${numberSeparator(loan?.totalCreditCost || 0)} kr`,
                             },
                         ] }))))))));
 };
 
 const Loan = ({ id, financialOption }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
     const [modal, setModal] = useState(false);
     const toggleModal = useCallback(() => setModal(!modal), [modal]);
-    const { data } = useLoanCalculation(id, (_a = financialOption.duration) === null || _a === void 0 ? void 0 : _a.current, (_b = financialOption.downPayment) === null || _b === void 0 ? void 0 : _b.current, (_c = financialOption.residual) === null || _c === void 0 ? void 0 : _c.current);
-    const interest = (_d = data === null || data === void 0 ? void 0 : data.loan) === null || _d === void 0 ? void 0 : _d.interest;
-    const duration = (_f = (_e = data === null || data === void 0 ? void 0 : data.loan) === null || _e === void 0 ? void 0 : _e.duration) === null || _f === void 0 ? void 0 : _f.current;
-    const monthlyCost = (_g = data === null || data === void 0 ? void 0 : data.loan) === null || _g === void 0 ? void 0 : _g.monthlyCost;
-    const logo = (financialOption === null || financialOption === void 0 ? void 0 : financialOption.logotype) || 'https://placehold.it/67x10';
+    const { data } = useLoanCalculation(id, financialOption.duration?.current, financialOption.downPayment?.current, financialOption.residual?.current);
+    const interest = data?.loan?.interest;
+    const duration = data?.loan?.duration?.current;
+    const monthlyCost = data?.loan?.monthlyCost;
+    const logo = financialOption?.logotype || 'https://placehold.it/67x10';
     // Skeleton?
     if (financialOption.loanAmount === undefined ||
         financialOption.loanAmount === null ||
@@ -5044,7 +5037,7 @@ const Icon$4 = styled.div `
 `;
 
 const InputSelect = ({ value, options, onChange, unit, title }) => (React__default.createElement(Wrapper$s, null,
-    React__default.createElement(Select$1, { value: value, onChange: onChange, title: title, "aria-label": title }, options === null || options === void 0 ? void 0 : options.map((option) => (React__default.createElement(Option$1, { key: option.value, value: option.value },
+    React__default.createElement(Select$1, { value: value, onChange: onChange, title: title, "aria-label": title }, options?.map((option) => (React__default.createElement(Option$1, { key: option.value, value: option.value },
         option.displayName || option.value,
         unit ? ` ${unit}` : '')))),
     React__default.createElement(Icon$4, null,
@@ -5159,7 +5152,7 @@ const InsuranceModal = ({ id, branch, onClose, insuranceOptions }) => {
         drivingDistance: DrivingDistance.Between0And1000,
     });
     const [payload, setPayload] = useState();
-    const { loading, data, error } = useInsuranceCalculation(id, (branch === null || branch === void 0 ? void 0 : branch.id) ? branch === null || branch === void 0 ? void 0 : branch.id : undefined, ssnIsValid(payload === null || payload === void 0 ? void 0 : payload.ssn) ? payload === null || payload === void 0 ? void 0 : payload.ssn : undefined, payload === null || payload === void 0 ? void 0 : payload.drivingDistance);
+    const { loading, data, error } = useInsuranceCalculation(id, branch?.id ? branch?.id : undefined, ssnIsValid(payload?.ssn) ? payload?.ssn : undefined, payload?.drivingDistance);
     const onChangeSsn = useCallback((e) => setForm({ ...form, ssn: e.currentTarget.value }), [form]);
     const onChangeDrivingDistance = useCallback((e) => setForm({ ...form, drivingDistance: e.currentTarget.value }), [form]);
     const onShowInsurances = useCallback(() => {
@@ -5179,7 +5172,7 @@ const InsuranceModal = ({ id, branch, onClose, insuranceOptions }) => {
         { value: DrivingDistance.Over2500, displayName: '2500+' },
     ];
     return (React__default.createElement(Modal, { title: "F\u00F6rs\u00E4kring", onClose: onClose },
-        ((insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.description) || (insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.logotype)) && (React__default.createElement(Repeat, null,
+        (insuranceOptions?.description || insuranceOptions?.logotype) && (React__default.createElement(Repeat, null,
             React__default.createElement(ContentLogo, null,
                 insuranceOptions.description && (React__default.createElement(ContentLogoText, null,
                     React__default.createElement(Content$2, null,
@@ -5207,7 +5200,7 @@ const InsuranceModal = ({ id, branch, onClose, insuranceOptions }) => {
             React__default.createElement(Loader, null))),
         error && (React__default.createElement(Repeat, null,
             React__default.createElement(Snackbar, { severity: "error", icon: true, heading: "Ett fel har intr\u00E4ffat" }, "Kunde inte h\u00E4mta f\u00F6rs\u00E4kringar. V\u00E4nligen f\u00F6rs\u00F6k igen."))),
-        React__default.createElement(React__default.Fragment, null, (data === null || data === void 0 ? void 0 : data.insurances) && (React__default.createElement(Repeat, null, data === null || data === void 0 ? void 0 : data.insurances.map((insurance) => (React__default.createElement(Repeat, { key: insurance.name },
+        React__default.createElement(React__default.Fragment, null, data?.insurances && (React__default.createElement(Repeat, null, data?.insurances.map((insurance) => (React__default.createElement(Repeat, { key: insurance.name },
             React__default.createElement(DetailBox, { heading: `${numberSeparator(insurance.price)} ${insurance.unit}`, description: insurance.name },
                 React__default.createElement(Repeat, null,
                     React__default.createElement(React__default.Fragment, null, insurance.description && (React__default.createElement(RepeatTiny, null,
@@ -5253,20 +5246,18 @@ const Insurance = ({ id, branch, insuranceOptions }) => {
 };
 
 const InsuranceFreeModal = ({ onClose, insuranceOptions }) => {
-    var _a;
-    return (React__default.createElement(Modal, { title: (_a = insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.insuranceHeader) !== null && _a !== void 0 ? _a : 'Försäkring', onClose: onClose },
-        (insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.longDescription) && (React__default.createElement(Repeat, null,
+    return (React__default.createElement(Modal, { title: insuranceOptions?.insuranceHeader ?? 'Försäkring', onClose: onClose },
+        insuranceOptions?.longDescription && (React__default.createElement(Repeat, null,
             React__default.createElement(Content$2, { dangerouslySetInnerHTML: {
                     __html: marked(insuranceOptions.longDescription),
                 } }))),
-        (insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.url) && (React__default.createElement(Repeat, null,
+        insuranceOptions?.url && (React__default.createElement(Repeat, null,
             React__default.createElement(ButtonInline, { as: "a", href: insuranceOptions.url, target: "_blank", rel: "noopener noreferrer" }, "L\u00E4s mer om f\u00F6rs\u00E4kringen (\u00D6ppnas i ett nytt f\u00F6nster)"))),
-        (insuranceOptions === null || insuranceOptions === void 0 ? void 0 : insuranceOptions.logotype) && (React__default.createElement(Repeat, null,
+        insuranceOptions?.logotype && (React__default.createElement(Repeat, null,
             React__default.createElement(LogoBox, { logo: insuranceOptions.logotype, alt: insuranceOptions.name || 'Logotyp', wide: true })))));
 };
 
 const Insurance$1 = ({ insuranceOptions }) => {
-    var _a, _b;
     const [modal, setModal] = useState(false);
     const toggleModal = useCallback(() => setModal(!modal), [modal]);
     if (!insuranceOptions.length) {
@@ -5276,7 +5267,7 @@ const Insurance$1 = ({ insuranceOptions }) => {
         modal && React__default.createElement(InsuranceFreeModal, { onClose: toggleModal, insuranceOptions: insuranceOptions[0] }),
         React__default.createElement(Repeat, null,
             React__default.createElement(RepeatTiny, null,
-                React__default.createElement(VisualHeading, null, (_b = (_a = insuranceOptions[0]) === null || _a === void 0 ? void 0 : _a.insuranceHeader) !== null && _b !== void 0 ? _b : 'Försäkring')),
+                React__default.createElement(VisualHeading, null, insuranceOptions[0]?.insuranceHeader ?? 'Försäkring')),
             React__default.createElement(RepeatTiny, null,
                 React__default.createElement(React__default.Fragment, null, insuranceOptions.map((insuranceOption, index) => (React__default.createElement(OptionBox, { key: `${insuranceOption.url}-${index}`, logo: insuranceOption.logotype || undefined, logoAlt: insuranceOption.name || 'Logotyp' },
                     insuranceOption.description && (React__default.createElement(Content$2, { dangerouslySetInnerHTML: {
@@ -5299,56 +5290,7 @@ const InsuranceOptions = ({ id, branch, insuranceOptions }) => {
     return null;
 };
 
-const SettingsContext = createContext({});
-
-const useSettings = () => useContext(SettingsContext);
-
-const Ecom = ({ vehicle, manufacturer, onExit, onUserEvent }) => {
-    var _a, _b, _c;
-    const { ecomSettings } = useSettings();
-    useEffect(() => {
-        PubSub.publish('EcomOnInit');
-    }, []);
-    const onUserEventLocal = useCallback((userEvent, currentStep) => {
-        PubSub.publish('EcomOnUserEvent', userEvent, currentStep);
-        if (onUserEvent) {
-            onUserEvent(userEvent, currentStep);
-        }
-    }, []);
-    const onExitLocal = useCallback(() => {
-        PubSub.publish('EcomOnExit');
-        if (onExit) {
-            onExit();
-        }
-    }, []);
-    const { id, title, shortDescription, price, data, media } = vehicle;
-    const { modelYear, mileage, gearbox, fuelType } = data;
-    const imageUrl = (_c = (_b = (_a = media === null || media === void 0 ? void 0 : media[0]) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.url;
-    const ecomData = {
-        vehicle: {
-            id,
-            title,
-            shortDescription: shortDescription || '',
-            price,
-            imageUrl,
-            modelYear,
-            milage: `${mileage}`,
-            gearBox: gearbox || '',
-            fuelType: fuelType || '',
-        },
-        serviceLogotypeUrl: (ecomSettings === null || ecomSettings === void 0 ? void 0 : ecomSettings.serviceLogotypeUrl) ||
-            (manufacturer === null || manufacturer === void 0 ? void 0 : manufacturer.logotype) ||
-            'https://cdn.wayke.se/wui/images/ecom/wayke-logo.svg',
-        onExit: onExitLocal,
-        onUserEvent: onUserEventLocal,
-        useBankId: ecomSettings === null || ecomSettings === void 0 ? void 0 : ecomSettings.useBankId,
-        displayBankIdAlert: ecomSettings === null || ecomSettings === void 0 ? void 0 : ecomSettings.displayBankIdAlert,
-    };
-    return React__default.createElement(EcomBase, { ...ecomData });
-};
-
 const ManufacturerPackageOption = ({ packageOption }) => {
-    var _a;
     if (!packageOption) {
         return null;
     }
@@ -5357,7 +5299,7 @@ const ManufacturerPackageOption = ({ packageOption }) => {
             React__default.createElement(H2, { noMargin: true }, packageOption.title)),
         packageOption.description && (React__default.createElement(Repeat, null,
             React__default.createElement(Content$2, { dangerouslySetInnerHTML: { __html: marked(packageOption.description) } }))),
-        ((_a = packageOption.link) === null || _a === void 0 ? void 0 : _a.url) && (React__default.createElement(Repeat, null,
+        packageOption.link?.url && (React__default.createElement(Repeat, null,
             React__default.createElement(ButtonInline, { as: "a", href: packageOption.link.url, target: "_blank", rel: "noopener noreferrer" }, packageOption.link.title
                 ? packageOption.link.title
                 : 'Läs mer (Öppnas i ett nytt fönster)'))),
@@ -5479,7 +5421,7 @@ const typedMetadata = Metadata;
 const formatPhonenumber = (text) => {
     try {
         const parsed = parsePhoneNumberFromString(text.replace('-', '').replace(/ /g, ''), typedMetadata);
-        return (parsed === null || parsed === void 0 ? void 0 : parsed.formatNational()) || text;
+        return parsed?.formatNational() || text;
     }
     catch (e) {
         return text;
@@ -5487,9 +5429,8 @@ const formatPhonenumber = (text) => {
 };
 
 const ActionList = ({ contact, branch }) => {
-    var _a, _b;
-    const email = (contact === null || contact === void 0 ? void 0 : contact.email) || ((_a = branch === null || branch === void 0 ? void 0 : branch.contact) === null || _a === void 0 ? void 0 : _a.email);
-    const phonenumber = (contact === null || contact === void 0 ? void 0 : contact.phonenumber) || ((_b = branch === null || branch === void 0 ? void 0 : branch.contact) === null || _b === void 0 ? void 0 : _b.phonenumber);
+    const email = contact?.email || branch?.contact?.email;
+    const phonenumber = contact?.phonenumber || branch?.contact?.phonenumber;
     const onClickMailVisible = useCallback(() => PubSub.publish('MailVisible'), []);
     const onClickPhoneVisible = useCallback(() => PubSub.publish('PhonenumberVisible'), []);
     const onClickPhoneValue = useCallback(() => PubSub.publish('PhonenumberCall'), []);
@@ -5642,7 +5583,7 @@ const BranchModal = ({ loading, connections, onClose }) => {
                     React__default.createElement("p", null, "V\u00E4lj den anl\u00E4ggning du vill visa kontaktuppgifter f\u00F6r."))),
             React__default.createElement(RepeatTiny, null,
                 React__default.createElement(InputLabel, null, "V\u00E4lj anl\u00E4ggning"),
-                React__default.createElement(InputSelect, { value: localValue, onChange: onChange, options: connections === null || connections === void 0 ? void 0 : connections.map((x) => ({
+                React__default.createElement(InputSelect, { value: localValue, onChange: onChange, options: connections?.map((x) => ({
                         value: x.id,
                         displayName: x.name,
                     })), title: "V\u00E4lj anl\u00E4ggning" }))),
@@ -5651,16 +5592,13 @@ const BranchModal = ({ loading, connections, onClose }) => {
                 React__default.createElement(ButtonContent, null, "V\u00E4lj")))));
 };
 
-const PackageOptionModal = ({ packageOption, onClose }) => {
-    var _a;
-    return (React__default.createElement(Modal, { title: packageOption.title || '', onClose: onClose },
-        packageOption.image && (React__default.createElement(Repeat, null,
-            React__default.createElement(LogoBox, { logo: packageOption.image, alt: packageOption.title || undefined, wide: true }))),
-        packageOption.description && (React__default.createElement(Repeat, null,
-            React__default.createElement(Content$2, { dangerouslySetInnerHTML: { __html: marked(packageOption.description) } }))),
-        ((_a = packageOption.link) === null || _a === void 0 ? void 0 : _a.href) && packageOption.link.title && (React__default.createElement(Repeat, null,
-            React__default.createElement(ButtonInline, { as: "a", href: packageOption.link.href, target: "_blank", rel: "noopener noreferrer nofollow" }, packageOption.link.title)))));
-};
+const PackageOptionModal = ({ packageOption, onClose }) => (React__default.createElement(Modal, { title: packageOption.title || '', onClose: onClose },
+    packageOption.image && (React__default.createElement(Repeat, null,
+        React__default.createElement(LogoBox, { logo: packageOption.image, alt: packageOption.title || undefined, wide: true }))),
+    packageOption.description && (React__default.createElement(Repeat, null,
+        React__default.createElement(Content$2, { dangerouslySetInnerHTML: { __html: marked(packageOption.description) } }))),
+    packageOption.link?.href && packageOption.link.title && (React__default.createElement(Repeat, null,
+        React__default.createElement(ButtonInline, { as: "a", href: packageOption.link.href, target: "_blank", rel: "noopener noreferrer nofollow" }, packageOption.link.title)))));
 
 const CheckList = ({ manufacturer, packageOptions, ecommerce, branch, contact, toggleEcomModal, loadingCentralStorageVehicle, }) => {
     const [modalBranch, setModalBranch] = useState(false);
@@ -5674,45 +5612,45 @@ const CheckList = ({ manufacturer, packageOptions, ecommerce, branch, contact, t
             setModalBranch(false);
         }
     }, [branch, contact]);
-    const packageOption = manufacturer === null || manufacturer === void 0 ? void 0 : manufacturer.packageOption;
+    const packageOption = manufacturer?.packageOption;
     return (React__default.createElement(React__default.Fragment, null,
-        modalBranch && (React__default.createElement(BranchModal, { loading: loadingCentralStorageVehicle, connections: branch === null || branch === void 0 ? void 0 : branch.connections, onClose: closeModalBranch })),
+        modalBranch && (React__default.createElement(BranchModal, { loading: loadingCentralStorageVehicle, connections: branch?.connections, onClose: closeModalBranch })),
         modal && React__default.createElement(PackageOptionModal, { packageOption: modal, onClose: onClose }),
         React__default.createElement(Repeat, null,
             React__default.createElement(CheckMarkList, null,
-                (packageOption === null || packageOption === void 0 ? void 0 : packageOption.title) && (React__default.createElement(CheckMarkListItem, null,
+                packageOption?.title && (React__default.createElement(CheckMarkListItem, null,
                     React__default.createElement(React__default.Fragment, null,
                         "Inkl.",
                         ' ',
                         React__default.createElement(ButtonInline, { onClick: () => onOpen({
-                                title: packageOption === null || packageOption === void 0 ? void 0 : packageOption.title,
-                                image: packageOption === null || packageOption === void 0 ? void 0 : packageOption.image,
-                                description: packageOption === null || packageOption === void 0 ? void 0 : packageOption.description,
-                                link: packageOption === null || packageOption === void 0 ? void 0 : packageOption.link,
+                                title: packageOption?.title,
+                                image: packageOption?.image,
+                                description: packageOption?.description,
+                                link: packageOption?.link,
                             }) }, packageOption.title),
                         ' ',
-                        "begagnatgaranti"))), packageOptions === null || packageOptions === void 0 ? void 0 :
-                packageOptions.map((packageOption, index) => (React__default.createElement(CheckMarkListItem, { key: packageOption.title || index },
+                        "begagnatgaranti"))),
+                packageOptions?.map((packageOption, index) => (React__default.createElement(CheckMarkListItem, { key: packageOption.title || index },
                     React__default.createElement(React__default.Fragment, null,
                         "Inkl.",
                         ' ',
                         React__default.createElement(ButtonInline, { onClick: () => onOpen({
-                                title: packageOption === null || packageOption === void 0 ? void 0 : packageOption.title,
-                                image: packageOption === null || packageOption === void 0 ? void 0 : packageOption.image,
-                                description: packageOption === null || packageOption === void 0 ? void 0 : packageOption.description,
-                                link: packageOption === null || packageOption === void 0 ? void 0 : packageOption.link,
+                                title: packageOption?.title,
+                                image: packageOption?.image,
+                                description: packageOption?.description,
+                                link: packageOption?.link,
                             }) }, packageOption.title))))),
-                (ecommerce === null || ecommerce === void 0 ? void 0 : ecommerce.withHomeDelivery) && React__default.createElement(CheckMarkListItem, null, "Hemleverans"))),
+                ecommerce?.withHomeDelivery && React__default.createElement(CheckMarkListItem, null, "Hemleverans"))),
         React__default.createElement(Repeat, null,
             ecommerce && ecommerce.enabled && (React__default.createElement(RepeatTiny, null,
                 React__default.createElement(ButtonPrimary, { disabled: !!ecommerce.reserved, fullWidth: true, onClick: toggleEcomModal },
                     React__default.createElement(ButtonContent, null, "K\u00F6p bilen online")))),
-            (ecommerce === null || ecommerce === void 0 ? void 0 : ecommerce.reserved) && (React__default.createElement(RepeatTiny, null,
+            ecommerce?.reserved && (React__default.createElement(RepeatTiny, null,
                 React__default.createElement(SwitchBar, { title: "Bilen \u00E4r reserverad", body: "Denna bil \u00E4r reserverad av en annan k\u00F6pare." },
                     React__default.createElement(Content$2, null,
                         React__default.createElement("p", null, "Denna bil \u00E4r reserverad av en annan k\u00F6pare."))))),
             React__default.createElement(ActionList, { branch: branch, contact: contact })),
-        ((branch === null || branch === void 0 ? void 0 : branch.connections.length) || 0) > 1 && (React__default.createElement(Repeat, null,
+        (branch?.connections.length || 0) > 1 && (React__default.createElement(Repeat, null,
             React__default.createElement(SwitchBar, { title: "Centrallagerbil", actionTitle: "Byt anl\u00E4ggning", onClick: openModalBranch },
                 React__default.createElement(Content$2, null,
                     React__default.createElement("p", null, "Denna bil tillh\u00F6r ett centrallager och g\u00E5r att k\u00F6pa genom flera anl\u00E4ggningar. Byt anl\u00E4ggning f\u00F6r att visa kontaktuppgifter till just den anl\u00E4ggningen.")))))));
@@ -5839,7 +5777,7 @@ const Related = ({ id, hashRoute, pathRoute, onClickSearchItem }) => {
             onClickSearchItem(id);
         }
     }, []);
-    if (!(response === null || response === void 0 ? void 0 : response.documentList.documents.length) || (response === null || response === void 0 ? void 0 : response.documentList.documents.length) === 0) {
+    if (!response?.documentList.documents.length || response?.documentList.documents.length === 0) {
         return null;
     }
     if (loading) {
@@ -5854,8 +5792,7 @@ const Related = ({ id, hashRoute, pathRoute, onClickSearchItem }) => {
                     React__default.createElement(H2, { noMargin: true }, "Senast inkomna")))),
             React__default.createElement(Repeat, null,
                 React__default.createElement(OverflowGrid, null,
-                    React__default.createElement(OverflowGridList, null, response === null || response === void 0 ? void 0 : response.documentList.documents.map((document) => {
-                        var _a, _b, _c;
+                    React__default.createElement(OverflowGridList, null, response?.documentList.documents.map((document) => {
                         const prefix = pathRoute ? `/${pathRoute}` : '/';
                         const r = regexPathGuid(pathRoute);
                         const pathRouteUrl = window.location.pathname === '/'
@@ -5864,7 +5801,7 @@ const Related = ({ id, hashRoute, pathRoute, onClickSearchItem }) => {
                                 ? window.location.pathname.replace(r, `${pathRoute}${document._id}`)
                                 : `${window.location.pathname}${prefix}${document._id}`;
                         return (React__default.createElement(OverflowGridItem, { key: document._id },
-                            React__default.createElement(ProductCard, { id: document._id, onClick: onItemClicked, title: document.title, href: pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined, image: (_c = (_b = (_a = document.featuredImage) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.url, description: document.shortDescription, uspList: [
+                            React__default.createElement(ProductCard, { id: document._id, onClick: onItemClicked, title: document.title, href: pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined, image: document.featuredImage?.files?.[0]?.url, description: document.shortDescription, uspList: [
                                     {
                                         title: document.modelYear,
                                     },
@@ -5887,20 +5824,17 @@ const PackageOptions = ({ packageOptions }) => {
     if (!packageOptions) {
         return null;
     }
-    return (React__default.createElement(React__default.Fragment, null, packageOptions.map((packageOption, index) => {
-        var _a;
-        return (React__default.createElement(ProductPageMainSection, { key: packageOption.title || index },
-            React__default.createElement(Repeat, null,
-                React__default.createElement(H2, { noMargin: true }, packageOption.title)),
-            packageOption.description && (React__default.createElement(Repeat, null,
-                React__default.createElement(Content$2, { dangerouslySetInnerHTML: { __html: marked(packageOption.description) } }))),
-            ((_a = packageOption.link) === null || _a === void 0 ? void 0 : _a.url) && (React__default.createElement(Repeat, null,
-                React__default.createElement(ButtonInline, { as: "a", href: packageOption.link.url, target: "_blank", rel: "noopener noreferrer" }, packageOption.link.title
-                    ? packageOption.link.title
-                    : 'Läs mer (Öppnas i ett nytt fönster)'))),
-            packageOption.image && (React__default.createElement(Repeat, null,
-                React__default.createElement(LogoBox, { logo: packageOption.image, alt: "Logotyp", wide: true })))));
-    })));
+    return (React__default.createElement(React__default.Fragment, null, packageOptions.map((packageOption, index) => (React__default.createElement(ProductPageMainSection, { key: packageOption.title || index },
+        React__default.createElement(Repeat, null,
+            React__default.createElement(H2, { noMargin: true }, packageOption.title)),
+        packageOption.description && (React__default.createElement(Repeat, null,
+            React__default.createElement(Content$2, { dangerouslySetInnerHTML: { __html: marked(packageOption.description) } }))),
+        packageOption.link?.url && (React__default.createElement(Repeat, null,
+            React__default.createElement(ButtonInline, { as: "a", href: packageOption.link.url, target: "_blank", rel: "noopener noreferrer" }, packageOption.link.title
+                ? packageOption.link.title
+                : 'Läs mer (Öppnas i ett nytt fönster)'))),
+        packageOption.image && (React__default.createElement(Repeat, null,
+            React__default.createElement(LogoBox, { logo: packageOption.image, alt: "Logotyp", wide: true }))))))));
 };
 
 const TableColumn = styled.div `
@@ -5971,15 +5905,15 @@ const arr = [];
 const GetOpeningHours = (o) => KeyOrder.reduce((prev, current) => {
     const title = TranslateWeekDays(current);
     const item = o[current];
-    const previous = prev === null || prev === void 0 ? void 0 : prev[prev.length - 1];
-    if (previous && previous.from == (item === null || item === void 0 ? void 0 : item.from) && previous.until === (item === null || item === void 0 ? void 0 : item.until)) {
+    const previous = prev?.[prev.length - 1];
+    if (previous && previous.from == item?.from && previous.until === item?.until) {
         prev[prev.length - 1].titleTo = title;
     }
     else {
         prev.push({
             titleFrom: title,
-            from: item === null || item === void 0 ? void 0 : item.from,
-            until: item === null || item === void 0 ? void 0 : item.until,
+            from: item?.from,
+            until: item?.until,
         });
     }
     return prev;
@@ -5990,8 +5924,8 @@ const GetOpeningHoursToday = (o) => {
     const current = o[day];
     return {
         title: current ? 'Öppetider idag' : 'Stängt idag',
-        from: current === null || current === void 0 ? void 0 : current.from,
-        until: current === null || current === void 0 ? void 0 : current.until,
+        from: current?.from,
+        until: current?.until,
     };
 };
 const valuOfDateString = (s) => {
@@ -6002,7 +5936,7 @@ const OpeningHours = ({ openingHours }) => {
     const today = useMemo(() => (openingHours ? GetOpeningHoursToday(openingHours) : null), [openingHours]);
     const currentlyOpen = useMemo(() => {
         try {
-            if ((today === null || today === void 0 ? void 0 : today.from) && (today === null || today === void 0 ? void 0 : today.until)) {
+            if (today?.from && today?.until) {
                 const currentDate = new Date().valueOf();
                 const from = valuOfDateString(today.from);
                 const until = valuOfDateString(today.until);
@@ -6024,9 +5958,9 @@ const OpeningHours = ({ openingHours }) => {
             React__default.createElement(TableColumn, null,
                 React__default.createElement(TableColumnRow, null,
                     React__default.createElement(TableColumnCell, null,
-                        React__default.createElement(UtilityTextBold, null, today === null || today === void 0 ? void 0 : today.title)),
+                        React__default.createElement(UtilityTextBold, null, today?.title)),
                     React__default.createElement(TableColumnCell, null,
-                        React__default.createElement(UtilityTextBold, null, (today === null || today === void 0 ? void 0 : today.from) ? `${today.from}-${today.until}` : 'Stängt'))),
+                        React__default.createElement(UtilityTextBold, null, today?.from ? `${today.from}-${today.until}` : 'Stängt'))),
                 oh.map((o) => (React__default.createElement(TableColumnRow, { key: o.titleFrom },
                     React__default.createElement(TableColumnCell, null, o.titleTo ? `${o.titleFrom}-${o.titleTo}` : o.titleFrom),
                     React__default.createElement(TableColumnCell, null, o.from ? `${o.from}-${o.until}` : 'Stängt'))))))));
@@ -6042,6 +5976,10 @@ const PhoneNumber = ({ phoneNumber }) => {
             React__default.createElement(ButtonContent, null, "Visa telefonnummer"))))));
 };
 
+const SettingsContext = createContext({});
+
+const useSettings = () => useContext(SettingsContext);
+
 const Wrapper$w = styled.a `
   display: block;
 `;
@@ -6091,7 +6029,6 @@ const StaticMap = ({ position }) => {
 };
 
 const Branch = ({ branch, loading }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const [modal, setModal] = useState(false);
     const openModal = useCallback(() => setModal(true), []);
     const closeModal = useCallback(() => setModal(false), []);
@@ -6104,14 +6041,14 @@ const Branch = ({ branch, loading }) => {
         return null;
     }
     return (React__default.createElement(React__default.Fragment, null,
-        modal && (React__default.createElement(BranchModal, { loading: loading, connections: branch === null || branch === void 0 ? void 0 : branch.connections, onClose: closeModal })),
+        modal && (React__default.createElement(BranchModal, { loading: loading, connections: branch?.connections, onClose: closeModal })),
         React__default.createElement(Repeat, null,
-            React__default.createElement(H2, { noMargin: true }, ((_a = branch === null || branch === void 0 ? void 0 : branch.location) === null || _a === void 0 ? void 0 : _a.city)
-                ? `Den här bilen finns på vår anläggning i ${(_b = branch === null || branch === void 0 ? void 0 : branch.location) === null || _b === void 0 ? void 0 : _b.city}`
+            React__default.createElement(H2, { noMargin: true }, branch?.location?.city
+                ? `Den här bilen finns på vår anläggning i ${branch?.location?.city}`
                 : 'Kontakt')),
         React__default.createElement(Repeat, null,
-            React__default.createElement(StaticMap, { position: (_c = branch === null || branch === void 0 ? void 0 : branch.location) === null || _c === void 0 ? void 0 : _c.position })),
-        (((_d = branch === null || branch === void 0 ? void 0 : branch.connections) === null || _d === void 0 ? void 0 : _d.length) || 0) > 1 && (React__default.createElement(Repeat, null,
+            React__default.createElement(StaticMap, { position: branch?.location?.position })),
+        (branch?.connections?.length || 0) > 1 && (React__default.createElement(Repeat, null,
             React__default.createElement(Content$2, null,
                 React__default.createElement("p", null,
                     "Denna bil tillh\u00F6r ett centrallager och g\u00E5r att k\u00F6pa genom flera anl\u00E4ggningar.",
@@ -6122,13 +6059,13 @@ const Branch = ({ branch, loading }) => {
             React__default.createElement(ProductPageContentLimit, null,
                 React__default.createElement(Repeat, null,
                     React__default.createElement(TableColumn, null,
-                        ((_e = branch === null || branch === void 0 ? void 0 : branch.location) === null || _e === void 0 ? void 0 : _e.streetAddress) && ((_f = branch === null || branch === void 0 ? void 0 : branch.location) === null || _f === void 0 ? void 0 : _f.city) && (React__default.createElement(TableColumnRow, null,
+                        branch?.location?.streetAddress && branch?.location?.city && (React__default.createElement(TableColumnRow, null,
                             React__default.createElement(TableColumnCell, null, "Adress"),
                             React__default.createElement(TableColumnCell, null,
                                 React__default.createElement(ButtonInlineBold, null,
-                                    React__default.createElement(ButtonContent, null, `${(_g = branch === null || branch === void 0 ? void 0 : branch.location) === null || _g === void 0 ? void 0 : _g.streetAddress}, ${(_h = branch === null || branch === void 0 ? void 0 : branch.location) === null || _h === void 0 ? void 0 : _h.city}`))))),
-                        ((_j = branch === null || branch === void 0 ? void 0 : branch.contact) === null || _j === void 0 ? void 0 : _j.phonenumber) && (React__default.createElement(PhoneNumber, { phoneNumber: formatPhonenumber(branch.contact.phonenumber) })))),
-                (branch === null || branch === void 0 ? void 0 : branch.openingHours) && (React__default.createElement(Repeat, null,
+                                    React__default.createElement(ButtonContent, null, `${branch?.location?.streetAddress}, ${branch?.location?.city}`))))),
+                        branch?.contact?.phonenumber && (React__default.createElement(PhoneNumber, { phoneNumber: formatPhonenumber(branch.contact.phonenumber) })))),
+                branch?.openingHours && (React__default.createElement(Repeat, null,
                     React__default.createElement(OpeningHours, { openingHours: branch.openingHours })))))));
 };
 
@@ -6254,20 +6191,19 @@ const useSearchItemBranch = (id, branch) => useQuery(SEARCH_ITEM_BRANCH_QUERY, {
 });
 
 const useCentralStorage = (vehicle) => {
-    var _a, _b;
     const { centralStorageId, setCentralStorageId } = useContext(CentralStorageContext);
-    const connections = (_a = vehicle === null || vehicle === void 0 ? void 0 : vehicle.branch) === null || _a === void 0 ? void 0 : _a.connections;
+    const connections = vehicle?.branch?.connections;
     const branchId = centralStorageId
-        ? (_b = connections === null || connections === void 0 ? void 0 : connections.find((x) => x.id === centralStorageId)) === null || _b === void 0 ? void 0 : _b.id
+        ? connections?.find((x) => x.id === centralStorageId)?.id
         : undefined;
-    const { data, loading } = useSearchItemBranch(vehicle === null || vehicle === void 0 ? void 0 : vehicle.id, branchId);
+    const { data, loading } = useSearchItemBranch(vehicle?.id, branchId);
     useEffect(() => {
-        if (((connections === null || connections === void 0 ? void 0 : connections.length) || 0) > 0) {
+        if ((connections?.length || 0) > 0) {
             const match = centralStorageId
-                ? connections === null || connections === void 0 ? void 0 : connections.find((x) => x.id === centralStorageId)
+                ? connections?.find((x) => x.id === centralStorageId)
                 : undefined;
             if (!match) {
-                const first = connections === null || connections === void 0 ? void 0 : connections[0];
+                const first = connections?.[0];
                 if (first) {
                     setCentralStorageId(first.id);
                 }
@@ -6275,7 +6211,7 @@ const useCentralStorage = (vehicle) => {
         }
     }, [connections]);
     return {
-        vehicle: ((connections === null || connections === void 0 ? void 0 : connections.length) || 0) > 0 ? data === null || data === void 0 ? void 0 : data.vehicle : vehicle,
+        vehicle: (connections?.length || 0) > 0 ? data?.vehicle : vehicle,
         loading,
     };
 };
@@ -6292,14 +6228,14 @@ const PageLoading = () => (React__default.createElement(Page, null,
 
 class PropertyTreeCreator {
     constructor(properties) {
-        this.propertiesWithCategory = (propertyKey) => { var _a; return !!((_a = this.properties[propertyKey].category) === null || _a === void 0 ? void 0 : _a.id); };
+        this.propertiesWithCategory = (propertyKey) => !!this.properties[propertyKey].category?.id;
         this.propertiesWithoutCategory = (propertyKey) => !this.propertiesWithCategory(propertyKey);
         this.isList = (property) => property.type === PropertyTreeCreator.TEXT_LIST_TYPE;
         this.isNonList = (property) => !this.isList(property);
-        this.hasCategoryWithId = (propertyKey, categoryId) => { var _a; return ((_a = this.properties[propertyKey].category) === null || _a === void 0 ? void 0 : _a.id) === categoryId; };
-        this.propertiesWithSubCategory = (propertyKey) => { var _a, _b; return !!((_b = (_a = this.properties[propertyKey].category) === null || _a === void 0 ? void 0 : _a.subCategory) === null || _b === void 0 ? void 0 : _b.id); };
+        this.hasCategoryWithId = (propertyKey, categoryId) => this.properties[propertyKey].category?.id === categoryId;
+        this.propertiesWithSubCategory = (propertyKey) => !!this.properties[propertyKey].category?.subCategory?.id;
         this.propertiesWithoutSubCategory = (propertyKey) => !this.propertiesWithSubCategory(propertyKey);
-        this.hasSubCategoryWithId = (propertyKey, categoryId) => { var _a, _b; return ((_b = (_a = this.properties[propertyKey].category) === null || _a === void 0 ? void 0 : _a.subCategory) === null || _b === void 0 ? void 0 : _b.id) === categoryId; };
+        this.hasSubCategoryWithId = (propertyKey, categoryId) => this.properties[propertyKey].category?.subCategory?.id === categoryId;
         this.properties = properties;
     }
     create() {
@@ -6366,7 +6302,7 @@ class PropertyTreeCreator {
         const categories = Object.keys(this.properties)
             .filter((key) => this.hasCategoryWithId(key, id))
             .filter(this.propertiesWithSubCategory)
-            .map((key) => { var _a; return (_a = this.properties[key].category) === null || _a === void 0 ? void 0 : _a.subCategory; })
+            .map((key) => this.properties[key].category?.subCategory)
             .filter(PropertyTreeCreator.distinctCategories);
         return categories;
     }
@@ -6995,7 +6931,6 @@ const MetadataCategory = ({ properties, subCategories }) => (React__default.crea
     !!subCategories.length &&
         subCategories.map((subCategory, index) => (React__default.createElement(MetadataSubCategory, { name: subCategory.name, properties: subCategory.properties, key: `${subCategory.name}-${index}` })))));
 const PropertySet = ({ propertySet, vehicleData }) => {
-    var _a, _b;
     const [activeCategoryId, setActiveCategoryId] = useState(-1);
     const mappedProperties = useMemo(() => {
         if (!propertySet) {
@@ -7009,20 +6944,19 @@ const PropertySet = ({ propertySet, vehicleData }) => {
         return tree;
     }, [propertySet]);
     useEffect(() => {
-        var _a;
-        const categories = ((_a = mappedProperties === null || mappedProperties === void 0 ? void 0 : mappedProperties.categories) === null || _a === void 0 ? void 0 : _a.length) !== undefined ? mappedProperties === null || mappedProperties === void 0 ? void 0 : mappedProperties.categories : undefined;
+        const categories = mappedProperties?.categories?.length !== undefined ? mappedProperties?.categories : undefined;
         if (activeCategoryId < 0 && categories !== undefined && categories.length > 0) {
             setActiveCategoryId(categories[0].id);
         }
     }, [mappedProperties]);
     const onTab = useCallback((id) => setActiveCategoryId(parseInt(id, 10)), []);
-    const activeCategory = (_a = mappedProperties === null || mappedProperties === void 0 ? void 0 : mappedProperties.categories) === null || _a === void 0 ? void 0 : _a.find((category) => category.id === activeCategoryId);
+    const activeCategory = mappedProperties?.categories?.find((category) => category.id === activeCategoryId);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Repeat, null,
-            React__default.createElement(Tabs, { tabs: ((_b = mappedProperties === null || mappedProperties === void 0 ? void 0 : mappedProperties.categories) === null || _b === void 0 ? void 0 : _b.map((category) => ({
+            React__default.createElement(Tabs, { tabs: mappedProperties?.categories?.map((category) => ({
                     name: `${category.id}`,
                     displayName: category.name,
-                }))) || [], active: `${activeCategoryId}`, onClick: onTab })),
+                })) || [], active: `${activeCategoryId}`, onClick: onTab })),
         activeCategory && (React__default.createElement(Repeat, null,
             React__default.createElement(MetadataCategory, { properties: activeCategory.properties, subCategories: activeCategory.subCategories })))));
 };
@@ -7091,37 +7025,58 @@ const PdfDownloadItem = ({ document }) => (React__default.createElement(PdfListI
 const PdfDownloadContainer = ({ documents }) => (React__default.createElement(PdfContainer, null, documents.map((document, i) => (React__default.createElement(PdfDownloadItem, { key: `${document.url}-${i}`, document: document })))));
 
 const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, placeholderImage, modifyDocumentTitleItem, onClickSearchItem, }) => {
-    var _a, _b, _c;
-    const [ecomModal, setEcomModal] = useState(false);
+    const { ecomSettings } = useSettings();
+    const ecomContext = useRef();
     const { loading, data: result } = useSearchItem(id);
-    const toggleEcomModal = useCallback(() => setEcomModal(!ecomModal), [ecomModal]);
-    const { vehicle: centralStorageVehicle, loading: loadingCentralStorageVehicle } = useCentralStorage(result === null || result === void 0 ? void 0 : result.vehicle);
+    const { vehicle: centralStorageVehicle, loading: loadingCentralStorageVehicle } = useCentralStorage(result?.vehicle);
+    useEffect(() => {
+        if (ecomSettings) {
+            ecomContext.current = new WaykeEcomWeb({
+                id,
+                ecomSdkConfig: {
+                    api: {
+                        address: ecomSettings.url,
+                    },
+                    bankIdThumbprint: ecomSettings?.bankIdThumbprint,
+                },
+                logo: ecomSettings.serviceLogotypeUrl,
+                logoX2: ecomSettings.serviceLogotypeUrl,
+                onEvent(view, event, currentStep, data) {
+                    PubSub.publish('EcomOnUserEvent', view, event, currentStep, data);
+                },
+            });
+        }
+        return () => {
+            if (ecomContext.current) {
+                ecomContext.current.destroy();
+            }
+        };
+    }, []);
     useEffect(() => {
         if (!disableResetScrollOnInit) {
             window.scrollTo(0, 0);
         }
     }, []);
     useEffect(() => {
-        var _a;
-        if (((_a = result === null || result === void 0 ? void 0 : result.vehicle) === null || _a === void 0 ? void 0 : _a.data) && modifyDocumentTitleItem) {
+        if (result?.vehicle?.data && modifyDocumentTitleItem) {
             const { vehicle } = result;
             const { registrationNumber } = vehicle.data;
             document.title = `${registrationNumber} | ${vehicle.title} | ${vehicle.shortDescription}`;
         }
     }, [result]);
-    const options = useMemo(() => { var _a, _b, _c; return (_c = (_b = (_a = result === null || result === void 0 ? void 0 : result.vehicle) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.filter(notEmpty).map((opt) => ({ title: opt })); }, [(_b = (_a = result === null || result === void 0 ? void 0 : result.vehicle) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.options]);
+    const options = useMemo(() => result?.vehicle?.data?.options?.filter(notEmpty).map((opt) => ({ title: opt })), [result?.vehicle?.data?.options]);
     const onShowMoreOptionsClick = useCallback(() => PubSub.publish('OptionsClick'), []);
     if (loading) {
         return React__default.createElement(PageLoading, null);
     }
-    if (!((_c = result === null || result === void 0 ? void 0 : result.vehicle) === null || _c === void 0 ? void 0 : _c.data)) {
+    if (!result?.vehicle?.data) {
         return React__default.createElement(Page404, null);
     }
     const { vehicle } = result;
-    const contact = centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.contact;
-    const branch = centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.branch;
+    const contact = centralStorageVehicle?.contact;
+    const branch = centralStorageVehicle?.branch;
     const { title, shortDescription, media, description, price, financialOptions, manufacturer, ecommerce, packageOptions, publishedAt, documents, } = vehicle;
-    const insuranceOptions = (centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.insuranceOptions)
+    const insuranceOptions = centralStorageVehicle?.insuranceOptions
         ? centralStorageVehicle.insuranceOptions
         : vehicle.insuranceOptions;
     const { fuelType, mileage, gearbox, modelYear, propertySet } = vehicle.data;
@@ -7140,7 +7095,6 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
         uspList.push({ title: fuelType });
     }
     return (React__default.createElement(React__default.Fragment, null,
-        ecomModal && React__default.createElement(Ecom, { vehicle: vehicle, manufacturer: manufacturer, onExit: toggleEcomModal }),
         React__default.createElement(Page, null,
             React__default.createElement(PageSection, { large: true },
                 React__default.createElement(Container, null,
@@ -7153,7 +7107,7 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
                                             React__default.createElement(ButtonContent, null,
                                                 React__default.createElement(IconChevronLeft, { block: true })),
                                             React__default.createElement(ButtonContent, null, "Tillbaka till bils\u00F6k"))))) : null,
-                                (manufacturer === null || manufacturer === void 0 ? void 0 : manufacturer.logotype) && (React__default.createElement(Repeat, null,
+                                manufacturer?.logotype && (React__default.createElement(Repeat, null,
                                     React__default.createElement(LogoBox, { logo: manufacturer.logotype, alt: manufacturer.name }))),
                                 React__default.createElement(Repeat, null,
                                     React__default.createElement(RepeatSmall, null,
@@ -7166,9 +7120,9 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
                                 React__default.createElement(PriceTable, { price: price })),
                             (financialOptions.length > 0 || insuranceOptions.length > 0) && (React__default.createElement(ProductPageAsideSection, { mobileOrder: 4 },
                                 financialOptions.length > 0 && (React__default.createElement(FinancialOptions, { id: id, financialOptions: financialOptions })),
-                                insuranceOptions.length > 0 && (React__default.createElement(InsuranceOptions, { id: id, branch: centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.branch, insuranceOptions: insuranceOptions })))),
+                                insuranceOptions.length > 0 && (React__default.createElement(InsuranceOptions, { id: id, branch: centralStorageVehicle?.branch, insuranceOptions: insuranceOptions })))),
                             React__default.createElement(ProductPageAsideSection, { mobileOrder: 5 },
-                                React__default.createElement(CheckList, { manufacturer: manufacturer, packageOptions: packageOptions, ecommerce: ecommerce, branch: branch, contact: centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.contact, loadingCentralStorageVehicle: loadingCentralStorageVehicle, toggleEcomModal: toggleEcomModal }))),
+                                React__default.createElement(CheckList, { manufacturer: manufacturer, packageOptions: packageOptions, ecommerce: ecommerce, branch: branch, contact: centralStorageVehicle?.contact, loadingCentralStorageVehicle: loadingCentralStorageVehicle, toggleEcomModal: () => ecomContext.current?.start() }))),
                         React__default.createElement(ProductPageMain, null,
                             React__default.createElement(ProductPageAsideSection, { mobileOrder: 3 },
                                 React__default.createElement(Gallery, { media: media, placeholderImage: placeholderImage })),
@@ -7183,8 +7137,8 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
                             description && (React__default.createElement(ProductPageMainSection, null,
                                 React__default.createElement(Blockquote, { author: contact && contact.name ? contact.name : null, date: publishedAt
                                         ? dateTimeFormat.format(publishedAt, dateTimeFormat.DayMonth)
-                                        : undefined, avatar: (contact === null || contact === void 0 ? void 0 : contact.avatar) || undefined }, !!description && React__default.createElement("p", null, description)))),
-                            ((options === null || options === void 0 ? void 0 : options.length) || 0) > 0 && (React__default.createElement(ProductPageMainSection, null,
+                                        : undefined, avatar: contact?.avatar || undefined }, !!description && React__default.createElement("p", null, description)))),
+                            (options?.length || 0) > 0 && (React__default.createElement(ProductPageMainSection, null,
                                 React__default.createElement(Repeat, null,
                                     React__default.createElement(H2, { noMargin: true }, "Utrustning")),
                                 React__default.createElement(Repeat, null,
@@ -7204,9 +7158,9 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
                             React__default.createElement(ProductPageMainSection, null,
                                 React__default.createElement(Branch, { branch: branch, loading: loadingCentralStorageVehicle }),
                                 ecommerce && ecommerce.enabled && (React__default.createElement(Repeat, null,
-                                    React__default.createElement(ButtonPrimary, { disabled: !!ecommerce.reserved, title: "K\u00F6p bilen online", onClick: toggleEcomModal }, "K\u00F6p bilen online")))),
+                                    React__default.createElement(ButtonPrimary, { disabled: !!ecommerce.reserved, title: "K\u00F6p bilen online", onClick: () => ecomContext.current?.start() }, "K\u00F6p bilen online")))),
                             React__default.createElement(PackageOptions, { packageOptions: packageOptions }),
-                            React__default.createElement(ManufacturerPackageOption, { packageOption: manufacturer === null || manufacturer === void 0 ? void 0 : manufacturer.packageOption }))))),
+                            React__default.createElement(ManufacturerPackageOption, { packageOption: manufacturer?.packageOption }))))),
             React__default.createElement(Related, { id: id, hashRoute: hashRoute, pathRoute: pathRoute, onClickSearchItem: onClickSearchItem })),
         false ,
         React__default.createElement(PortalElement, { id: DefaultPortal })));
@@ -7246,7 +7200,7 @@ const SearchProvider = ({ url, apiKey, useQueryParamsFromUrl, pathRoute, childre
                 'x-api-key': apiKey,
             }
             : {},
-    }, !initialize || !!(queryFilter === null || queryFilter === void 0 ? void 0 : queryFilter.block));
+    }, !initialize || !!queryFilter?.block);
     const popStateEvent = (event) => {
         const { currentTarget } = event;
         if (currentTarget) {
@@ -7289,7 +7243,7 @@ const SearchProvider = ({ url, apiKey, useQueryParamsFromUrl, pathRoute, childre
             const nextSearch = nextSearchParams.toString() ? `?${nextSearchParams}` : '';
             if (initialize) {
                 if (window.location.search.localeCompare(nextSearch) !== 0) {
-                    const _path = pathRoute === null || pathRoute === void 0 ? void 0 : pathRoute.replace(/^\/|\/$/g, '');
+                    const _path = pathRoute?.replace(/^\/|\/$/g, '');
                     const prefix = _path ? `/${_path}/` : '/';
                     const index = _path ? window.location.pathname.indexOf(prefix) : -1;
                     let pathname = window.location.pathname;
@@ -7302,12 +7256,11 @@ const SearchProvider = ({ url, apiKey, useQueryParamsFromUrl, pathRoute, childre
         }
     }, [queryFilter, initialize, useQueryParamsFromUrl]);
     useEffect(() => {
-        var _a;
         if (response) {
             if (!initialFacets && !useQueryParamsFromUrl) {
                 setInitialFacets(response.facets);
             }
-            if (useQueryParamsFromUrl && ((_a = response.query) === null || _a === void 0 ? void 0 : _a.parameters)) {
+            if (useQueryParamsFromUrl && response.query?.parameters) {
                 const nextSearchParams = new URLSearchParams(response.query.parameters);
                 nextSearchParams.delete('hits');
                 nextSearchParams.delete('offset');
@@ -7320,7 +7273,7 @@ const SearchProvider = ({ url, apiKey, useQueryParamsFromUrl, pathRoute, childre
                     });
                 }
             }
-            if (queryFilter === null || queryFilter === void 0 ? void 0 : queryFilter.concatResult) {
+            if (queryFilter?.concatResult) {
                 setDocuments([...(documents || []), ...(response.documentList.documents || [])]);
             }
             else {
@@ -7339,10 +7292,9 @@ const SearchProvider = ({ url, apiKey, useQueryParamsFromUrl, pathRoute, childre
         }
     }, [initialize]);
     const onLoadMore = useCallback(() => {
-        var _a;
         if (response) {
             setQueryFilter({
-                searchParams: new URLSearchParams((_a = response === null || response === void 0 ? void 0 : response.documentList.pagination.nextPage) === null || _a === void 0 ? void 0 : _a.query),
+                searchParams: new URLSearchParams(response?.documentList.pagination.nextPage?.query),
                 concatResult: true,
             });
         }
@@ -7355,9 +7307,8 @@ const SearchProvider = ({ url, apiKey, useQueryParamsFromUrl, pathRoute, childre
                 : _initialQueryParams;
             if (useQueryParamsFromUrl && _initialQueryParams) {
                 _initialQueryParams.forEach((value, key) => {
-                    var _a;
-                    if (!((_a = initialQueryParams === null || initialQueryParams === void 0 ? void 0 : initialQueryParams.getAll(key)) === null || _a === void 0 ? void 0 : _a.some((v) => v === value))) {
-                        initialQueryParams === null || initialQueryParams === void 0 ? void 0 : initialQueryParams.append(key, value);
+                    if (!initialQueryParams?.getAll(key)?.some((v) => v === value)) {
+                        initialQueryParams?.append(key, value);
                     }
                 });
             }
@@ -7415,29 +7366,11 @@ const Root = styled.div.attrs(() => ({
   }
 `;
 
-const useEcom = (ecomSettings) => {
-    if (ecomSettings === null || ecomSettings === void 0 ? void 0 : ecomSettings.url) {
-        import('@wayke-se/ecom').then(({ config }) => {
-            config.bind({
-                api: {
-                    address: ecomSettings.url,
-                },
-                /** Specifying an origin is optional **/
-                origin: {
-                    topic: 'Wayke',
-                    channel: 'wayke.se',
-                },
-                bankIdThumbprint: ecomSettings.bankIdThumbprint,
-            });
-        });
-    }
-};
-
 const SettingsProvider = ({ googleMapsApiKey, googleMapsMarker, ecomSettings, children, }) => (React__default.createElement(SettingsContext.Provider, { value: { ecomSettings, googleMapsApiKey, googleMapsMarker } }, children));
 
 const RelatedSearchProvider = ({ url, urlMlt, apiKey, children }) => {
     const [queryFilter, setQueryFilter] = useState();
-    const query = queryFilter === null || queryFilter === void 0 ? void 0 : queryFilter.searchParams.toString();
+    const query = queryFilter?.searchParams.toString();
     const { loading, data: response, error, } = useFetch(`${urlMlt || url}${query ? `?${query}` : ''}`, {
         headers: apiKey
             ? {
@@ -7542,7 +7475,7 @@ const PathProvider = ({ children }) => {
         }
         dispatch({ type: SET_PATH, path });
     }, []);
-    const id = useMemo(() => { var _a; return (_a = state.path.match(regexGuidAnyWhere)) === null || _a === void 0 ? void 0 : _a.pop(); }, [state.path]);
+    const id = useMemo(() => state.path.match(regexGuidAnyWhere)?.pop(), [state.path]);
     const value = useMemo(() => ({
         ...state,
         previousPath,
@@ -7553,17 +7486,14 @@ const PathProvider = ({ children }) => {
     return React__default.createElement(PathContext.Provider, { value: value }, children);
 };
 
-const WaykeProvider = ({ url, urlMlt, apiKey, ecomSettings, graphQlUrl, googleMapsApiKey, googleMapsMarker, useQueryParamsFromUrl, pathRoute, children, }) => {
-    useEcom(ecomSettings);
-    return (React__default.createElement(PathProvider, null,
-        React__default.createElement(SettingsProvider, { googleMapsApiKey: googleMapsApiKey, googleMapsMarker: googleMapsMarker, ecomSettings: ecomSettings },
-            React__default.createElement(CentralStorageProvider, null,
-                React__default.createElement(GraphqlProvider, { uri: graphQlUrl },
-                    React__default.createElement(SearchProvider, { url: url, apiKey: apiKey, useQueryParamsFromUrl: useQueryParamsFromUrl, pathRoute: pathRoute },
-                        React__default.createElement(RelatedSearchProvider, { url: url, urlMlt: urlMlt, apiKey: apiKey },
-                            React__default.createElement(ThemeProvider, null,
-                                React__default.createElement(Root, null, children)))))))));
-};
+const WaykeProvider = ({ url, urlMlt, apiKey, ecomSettings, graphQlUrl, googleMapsApiKey, googleMapsMarker, useQueryParamsFromUrl, pathRoute, children, }) => (React__default.createElement(PathProvider, null,
+    React__default.createElement(SettingsProvider, { googleMapsApiKey: googleMapsApiKey, googleMapsMarker: googleMapsMarker, ecomSettings: ecomSettings },
+        React__default.createElement(CentralStorageProvider, null,
+            React__default.createElement(GraphqlProvider, { uri: graphQlUrl },
+                React__default.createElement(SearchProvider, { url: url, apiKey: apiKey, useQueryParamsFromUrl: useQueryParamsFromUrl, pathRoute: pathRoute },
+                    React__default.createElement(RelatedSearchProvider, { url: url, urlMlt: urlMlt, apiKey: apiKey },
+                        React__default.createElement(ThemeProvider, null,
+                            React__default.createElement(Root, null, children)))))))));
 
 const regexGuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
 const HASH_CHANGE = 'hashchange';
@@ -7612,16 +7542,13 @@ const WaykeComposite = ({ filterList, initialQueryParams, removeSearchBar, remov
 const WaykeCompositeWithProvider = ({ provider, composite }) => (React__default.createElement(WaykeProvider, { ...provider },
     React__default.createElement(WaykeComposite, { ...composite })));
 
-const WaykeItemProvider = ({ url, urlMlt, apiKey, ecomSettings, graphQlUrl, googleMapsApiKey, googleMapsMarker, children, }) => {
-    useEcom(ecomSettings);
-    return (React__default.createElement(PathProvider, null,
-        React__default.createElement(SettingsProvider, { googleMapsApiKey: googleMapsApiKey, googleMapsMarker: googleMapsMarker, ecomSettings: ecomSettings },
-            React__default.createElement(CentralStorageProvider, null,
-                React__default.createElement(GraphqlProvider, { uri: graphQlUrl },
-                    React__default.createElement(RelatedSearchProvider, { url: url, urlMlt: urlMlt, apiKey: apiKey },
-                        React__default.createElement(ThemeProvider, null,
-                            React__default.createElement(Root, null, children))))))));
-};
+const WaykeItemProvider = ({ url, urlMlt, apiKey, ecomSettings, graphQlUrl, googleMapsApiKey, googleMapsMarker, children, }) => (React__default.createElement(PathProvider, null,
+    React__default.createElement(SettingsProvider, { googleMapsApiKey: googleMapsApiKey, googleMapsMarker: googleMapsMarker, ecomSettings: ecomSettings },
+        React__default.createElement(CentralStorageProvider, null,
+            React__default.createElement(GraphqlProvider, { uri: graphQlUrl },
+                React__default.createElement(RelatedSearchProvider, { url: url, urlMlt: urlMlt, apiKey: apiKey },
+                    React__default.createElement(ThemeProvider, null,
+                        React__default.createElement(Root, null, children))))))));
 
 export default WaykeCompositeWithProvider;
 export { SearchBar, WaykeItemProvider, WaykeProvider, PubSub as WaykePubSub, WaykeSearch, WaykeSearchItem, ThemeProvider as WaykeThemeProvider };