@wayke-se/components-react 3.0.0-beta.12 → 3.0.0-beta.14

package/dist-src/layouts/WaykeComposite.js

@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react';
+import useHashGuid from '../hooks/useHashGuid';
+import PubSub from '../utils/pubsub/pubsub';
+import WaykeSearch from './search/index';
+import WaykeSearchItem from './searchItem/index';
+import usePath from '../State/Path/usePath';
+const WaykeComposite = ({ filterList, initialQueryParams, removeSearchBar, removeFilterOptions, disableResetScrollOnInit, placeholderImage, pathRoute, modifyDocumentTitleItem, modifyDocumentTitleSearch, }) => {
+    const hashId = useHashGuid();
+    const { id: pathId } = usePath();
+    useEffect(() => {
+        if (!pathRoute) {
+            if (hashId) {
+                PubSub.publish('HashRouteChange', hashId);
+            }
+            else {
+                PubSub.publish('HashRouteChange');
+            }
+        }
+    }, [hashId]);
+    const id = pathId || hashId;
+    return (React.createElement(React.Fragment, null, id ? (React.createElement(WaykeSearchItem, { id: id, hashRoute: !pathRoute, disableResetScrollOnInit: disableResetScrollOnInit, placeholderImage: placeholderImage, pathRoute: pathRoute, modifyDocumentTitleItem: modifyDocumentTitleItem })) : (React.createElement(WaykeSearch, { filterList: filterList, initialQueryParams: initialQueryParams, removeSearchBar: removeSearchBar, hashRoute: !pathRoute, placeholderImage: placeholderImage, pathRoute: pathRoute, removeFilterOptions: removeFilterOptions, modifyDocumentTitleSearch: modifyDocumentTitleSearch }))));
+};
+export default WaykeComposite;

package/dist-src/layouts/WaykeCompositeWithProvider.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import WaykeProvider from '../providers/WaykeProvider';
+import WaykeComposite from './WaykeComposite';
+const WaykeCompositeWithProvider = ({ provider, composite }) => (React.createElement(WaykeProvider, { ...provider },
+    React.createElement(WaykeComposite, { ...composite })));
+export default WaykeCompositeWithProvider;

package/dist-src/layouts/search/index.js

@@ -0,0 +1,55 @@
+import React, { useEffect, useCallback, useMemo } from 'react';
+import Container from '../../components/Container/index';
+import { Page, PageSection } from '../../components/Page/index';
+import Result from '../../components/Result/index';
+import Filter from '../../components/Filter/index';
+import Grid from '../../components/Grid/index';
+import SearchTerm from '../../components/SearchTerm/index';
+import { PortalElement, PortalNamespace } from '../../components/Portal/index';
+import SearchFilter from '../../components/SearchFilter/index';
+import Snackbar from '../../components/Snackbar/index';
+import useSearch from '../../State/Search/useSearch';
+import PubSub from '../../utils/pubsub/pubsub';
+const WaykeSearch = ({ filterList, initialQueryParams, hashRoute, pathRoute, removeSearchBar, placeholderImage, removeFilterOptions, modifyDocumentTitleSearch, onClickSearchItem, }) => {
+    const { error, documents, queryFilter, onFilterUpdate, onInitialize } = useSearch();
+    useEffect(() => {
+        if (modifyDocumentTitleSearch) {
+            document.title = modifyDocumentTitleSearch;
+        }
+        onInitialize(typeof initialQueryParams === 'string'
+            ? new URLSearchParams(initialQueryParams)
+            : initialQueryParams);
+    }, []);
+    const onItemClicked = useCallback((id) => {
+        PubSub.publish('ItemClicked', id);
+        if (onClickSearchItem) {
+            onClickSearchItem(id);
+        }
+    }, []);
+    const onClearQuery = useCallback(() => {
+        const nextQuery = new URLSearchParams(queryFilter.searchParams);
+        nextQuery.delete('query');
+        onFilterUpdate(nextQuery.toString());
+    }, [queryFilter.searchParams]);
+    const searchQuery = useMemo(() => queryFilter.searchParams.get('query'), [documents]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Page, null,
+            !removeSearchBar && (React.createElement(PageSection, null,
+                React.createElement(Container, null,
+                    React.createElement(SearchFilter, null)))),
+            searchQuery && (React.createElement(PageSection, null,
+                React.createElement(Container, null,
+                    React.createElement(SearchTerm, { onClear: onClearQuery }, searchQuery)))),
+            !removeFilterOptions && (React.createElement(PageSection, null,
+                React.createElement(Container, null,
+                    React.createElement(Filter, { filterList: filterList })))),
+            React.createElement(PageSection, { accent: true, fillSpace: true, className: "wayke__theme wayke__color--accent-bg" },
+                React.createElement(Container, null,
+                    React.createElement(Result, null,
+                        React.createElement(React.Fragment, null,
+                            error && (React.createElement(Snackbar, { severity: "error", icon: true, heading: "Ett fel har intr\u00E4ffat" }, "V\u00E4nligen f\u00F6rs\u00F6k igen.")),
+                            !error && documents && documents.length > 0 && (React.createElement(Grid, { hashRoute: hashRoute, pathRoute: pathRoute, onClickItem: onItemClicked, documents: documents, placeholderImage: placeholderImage })),
+                            !error && documents && documents.length === 0 && (React.createElement(Snackbar, { severity: "warning", icon: true, heading: "Inga resultat" }, "Det finns inga resultat som matchar din s\u00F6kning."))))))),
+        React.createElement(PortalElement, { id: PortalNamespace.DefaultPortal })));
+};
+export default WaykeSearch;

package/dist-src/layouts/searchItem/Branch.js

@@ -0,0 +1,53 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { Repeat } from '../../components/Repeat/index';
+import Content from '../../components/Content/index';
+import { ProductPageContentLimit } from '../../components/ProductPage/index';
+import { H2 } from '../../components/Heading/index';
+import { ButtonContent, ButtonInline, ButtonInlineBold } from '../../components/Button/index';
+import { TableColumn, TableColumnRow, TableColumnCell } from '../../components/TableColumn/index';
+import OpeningHours from '../../components/OpeningHours/index';
+import PhoneNumber from '../../components/PhoneNumber/index';
+import Map from '../../components/Map/index';
+import BranchModal from './BranchModal';
+import { formatPhonenumber } from '../../utils/phonenumbers';
+const Branch = ({ branch, loading }) => {
+    const [modal, setModal] = useState(false);
+    const openModal = useCallback(() => setModal(true), []);
+    const closeModal = useCallback(() => setModal(false), []);
+    useEffect(() => {
+        if (branch && modal) {
+            setModal(false);
+        }
+    }, [branch]);
+    if (!branch) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        modal && (React.createElement(BranchModal, { loading: loading, connections: branch?.connections, onClose: closeModal })),
+        React.createElement(Repeat, null,
+            React.createElement(H2, { noMargin: true }, branch?.location?.city
+                ? `Den här bilen finns på vår anläggning i ${branch?.location?.city}`
+                : 'Kontakt')),
+        React.createElement(Repeat, null,
+            React.createElement(Map, { position: branch?.location?.position })),
+        (branch?.connections?.length || 0) > 1 && (React.createElement(Repeat, null,
+            React.createElement(Content, null,
+                React.createElement("p", null,
+                    "Denna bil tillh\u00F6r ett centrallager och g\u00E5r att k\u00F6pa genom flera anl\u00E4ggningar.",
+                    ' ',
+                    React.createElement(ButtonInline, { as: "span", role: "button", onClick: openModal, inline: true }, "Klicka h\u00E4r f\u00F6r att visa kontaktuppgifter till en annan anl\u00E4ggning"),
+                    ".")))),
+        React.createElement(Repeat, null,
+            React.createElement(ProductPageContentLimit, null,
+                React.createElement(Repeat, null,
+                    React.createElement(TableColumn, null,
+                        branch?.location?.streetAddress && branch?.location?.city && (React.createElement(TableColumnRow, null,
+                            React.createElement(TableColumnCell, null, "Adress"),
+                            React.createElement(TableColumnCell, null,
+                                React.createElement(ButtonInlineBold, null,
+                                    React.createElement(ButtonContent, null, `${branch?.location?.streetAddress}, ${branch?.location?.city}`))))),
+                        branch?.contact?.phonenumber && (React.createElement(PhoneNumber, { phoneNumber: formatPhonenumber(branch.contact.phonenumber) })))),
+                branch?.openingHours && (React.createElement(Repeat, null,
+                    React.createElement(OpeningHours, { openingHours: branch.openingHours })))))));
+};
+export default Branch;

package/dist-src/layouts/searchItem/BranchModal.js

@@ -0,0 +1,36 @@
+import React, { useState, useCallback, useContext } from 'react';
+import { Repeat, RepeatTiny } from '../../components/Repeat/index';
+import InputSelect from '../../components/InputSelect/index';
+import { ButtonPrimary, ButtonContent } from '../../components/Button/index';
+import Modal from '../../components/Modal/index';
+import Content from '../../components/Content/index';
+import InputLabel from '../../components/InputLabel/index';
+import { CentralStorageContext } from '../../State/CentralStorage/CentralStorageContext';
+const BranchModal = ({ loading, connections, onClose }) => {
+    const { centralStorageId, setCentralStorageId } = useContext(CentralStorageContext);
+    const [localValue, setLocalValue] = useState(centralStorageId);
+    const onConfirm = useCallback((id) => {
+        if (id) {
+            setCentralStorageId(id);
+        }
+    }, []);
+    const onChange = useCallback((e) => setLocalValue(e.currentTarget.value), []);
+    if (!localValue) {
+        return null;
+    }
+    return (React.createElement(Modal, { title: "Byt anl\u00E4ggning", onClose: onClose },
+        React.createElement(Repeat, null,
+            React.createElement(RepeatTiny, null,
+                React.createElement(Content, null,
+                    React.createElement("p", null, "V\u00E4lj den anl\u00E4ggning du vill visa kontaktuppgifter f\u00F6r."))),
+            React.createElement(RepeatTiny, null,
+                React.createElement(InputLabel, null, "V\u00E4lj anl\u00E4ggning"),
+                React.createElement(InputSelect, { value: localValue, onChange: onChange, options: connections?.map((x) => ({
+                        value: x.id,
+                        displayName: x.name,
+                    })), title: "V\u00E4lj anl\u00E4ggning" }))),
+        React.createElement(Repeat, null,
+            React.createElement(ButtonPrimary, { disabled: loading, fullWidth: true, onClick: () => onConfirm(localValue) },
+                React.createElement(ButtonContent, null, "V\u00E4lj")))));
+};
+export default BranchModal;

package/dist-src/layouts/searchItem/CheckList.js

@@ -0,0 +1,65 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { Repeat, RepeatTiny } from '../../components/Repeat/index';
+import ActionList from '../../components/ActionList/index';
+import { ButtonPrimary, ButtonContent, ButtonInline } from '../../components/Button/index';
+import CheckMarkList, { CheckMarkListItem } from '../../components/CheckMarkList/index';
+import Content from '../../components/Content/index';
+import SwitchBar from '../../components/SwitchBar/index';
+import BranchModal from './BranchModal';
+import PackageOptionModal from './PackageOptionModal';
+const CheckList = ({ manufacturer, packageOptions, ecommerce, branch, contact, toggleEcomModal, loadingCentralStorageVehicle, }) => {
+    const [modalBranch, setModalBranch] = useState(false);
+    const openModalBranch = useCallback(() => setModalBranch(true), []);
+    const closeModalBranch = useCallback(() => setModalBranch(false), []);
+    const [modal, setModal] = useState();
+    const onOpen = useCallback((nextModal) => setModal(nextModal), []);
+    const onClose = useCallback(() => setModal(undefined), []);
+    useEffect(() => {
+        if ((branch || contact) && modalBranch) {
+            setModalBranch(false);
+        }
+    }, [branch, contact]);
+    const packageOption = manufacturer?.packageOption;
+    return (React.createElement(React.Fragment, null,
+        modalBranch && (React.createElement(BranchModal, { loading: loadingCentralStorageVehicle, connections: branch?.connections, onClose: closeModalBranch })),
+        modal && React.createElement(PackageOptionModal, { packageOption: modal, onClose: onClose }),
+        React.createElement(Repeat, null,
+            React.createElement(CheckMarkList, null,
+                packageOption?.title && (React.createElement(CheckMarkListItem, null,
+                    React.createElement(React.Fragment, null,
+                        "Inkl.",
+                        ' ',
+                        React.createElement(ButtonInline, { onClick: () => onOpen({
+                                title: packageOption?.title,
+                                image: packageOption?.image,
+                                description: packageOption?.description,
+                                link: packageOption?.link,
+                            }) }, packageOption.title),
+                        ' ',
+                        "begagnatgaranti"))),
+                packageOptions?.map((packageOption, index) => (React.createElement(CheckMarkListItem, { key: packageOption.title || index },
+                    React.createElement(React.Fragment, null,
+                        "Inkl.",
+                        ' ',
+                        React.createElement(ButtonInline, { onClick: () => onOpen({
+                                title: packageOption?.title,
+                                image: packageOption?.image,
+                                description: packageOption?.description,
+                                link: packageOption?.link,
+                            }) }, packageOption.title))))),
+                ecommerce?.withHomeDelivery && React.createElement(CheckMarkListItem, null, "Hemleverans"))),
+        React.createElement(Repeat, null,
+            ecommerce && ecommerce.enabled && (React.createElement(RepeatTiny, null,
+                React.createElement(ButtonPrimary, { disabled: !!ecommerce.reserved, fullWidth: true, onClick: toggleEcomModal },
+                    React.createElement(ButtonContent, null, "K\u00F6p bilen online")))),
+            ecommerce?.reserved && (React.createElement(RepeatTiny, null,
+                React.createElement(SwitchBar, { title: "Bilen \u00E4r reserverad", body: "Denna bil \u00E4r reserverad av en annan k\u00F6pare." },
+                    React.createElement(Content, null,
+                        React.createElement("p", null, "Denna bil \u00E4r reserverad av en annan k\u00F6pare."))))),
+            React.createElement(ActionList, { branch: branch, contact: contact })),
+        (branch?.connections.length || 0) > 1 && (React.createElement(Repeat, null,
+            React.createElement(SwitchBar, { title: "Centrallagerbil", actionTitle: "Byt anl\u00E4ggning", onClick: openModalBranch },
+                React.createElement(Content, null,
+                    React.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.")))))));
+};
+export default CheckList;

package/dist-src/layouts/searchItem/ManufacturerPackagesOption.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { marked } from 'marked';
+import { Repeat } from '../../components/Repeat/index';
+import { ProductPageMainSection } from '../../components/ProductPage/index';
+import Content from '../../components/Content/index';
+import { H2 } from '../../components/Heading/index';
+import { ButtonInline } from '../../components/Button/index';
+import LogoBox from '../../components/LogoBox/index';
+const ManufacturerPackageOption = ({ packageOption }) => {
+    if (!packageOption) {
+        return null;
+    }
+    return (React.createElement(ProductPageMainSection, null,
+        React.createElement(Repeat, null,
+            React.createElement(H2, { noMargin: true }, packageOption.title)),
+        packageOption.description && (React.createElement(Repeat, null,
+            React.createElement(Content, { dangerouslySetInnerHTML: { __html: marked(packageOption.description) } }))),
+        packageOption.link?.url && (React.createElement(Repeat, null,
+            React.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.createElement(Repeat, null,
+            React.createElement(LogoBox, { logo: packageOption.image, alt: "Logotyp", wide: true })))));
+};
+export default ManufacturerPackageOption;

package/dist-src/layouts/searchItem/MetadataItem.js

@@ -0,0 +1,34 @@
+import React, { useState, useCallback } from 'react';
+import { TableListItem, TableListKey, TableListValue, TableListBooleanPos, TableListBooleanNeg, } from '../../components/TableList/index';
+import { IconCheck, IconCancel } from '../../components/Icon/index';
+import { SrOnly } from '../../components/SrOnly/index';
+import { ButtonInline } from '../../components/Button/index';
+import Modal from '../../components/Modal/index';
+import Content from '../../components/Content/index';
+const formatValue = (value, unit) => {
+    if (typeof value === 'boolean') {
+        return value ? (React.createElement(TableListBooleanPos, { title: "Ja" },
+            React.createElement(SrOnly, null, "Ja"),
+            React.createElement(IconCheck, { block: true }))) : (React.createElement(TableListBooleanNeg, { title: "Nej" },
+            React.createElement(SrOnly, null, "Nej"),
+            React.createElement(IconCancel, { block: true })));
+    }
+    if (Array.isArray(value)) {
+        return value.join(', ');
+    }
+    if (!!value && !!unit) {
+        return `${value} ${unit}`;
+    }
+    return value;
+};
+const MetadataItem = ({ name, hint, value, unit }) => {
+    const [foldout, setFoldout] = useState(false);
+    const onToggleFoldout = useCallback(() => setFoldout(!foldout), [foldout]);
+    const presentedValue = formatValue(value, unit);
+    return (React.createElement(TableListItem, null,
+        React.createElement(TableListKey, null, hint ? (React.createElement(ButtonInline, { onClick: onToggleFoldout, title: `Mer information om ${name}` }, name)) : (name)),
+        React.createElement(TableListValue, null, value !== undefined ? presentedValue : 'Uppgift saknas'),
+        hint && foldout && (React.createElement(Modal, { title: name, onClose: onToggleFoldout },
+            React.createElement(Content, { dangerouslySetInnerHTML: { __html: hint } })))));
+};
+export default MetadataItem;

package/dist-src/layouts/searchItem/PackageOptionModal.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { marked } from 'marked';
+import { Repeat } from '../../components/Repeat/index';
+import { ButtonInline } from '../../components/Button/index';
+import Modal from '../../components/Modal/index';
+import Content from '../../components/Content/index';
+import LogoBox from '../../components/LogoBox/index';
+const PackageOptionModal = ({ packageOption, onClose }) => (React.createElement(Modal, { title: packageOption.title || '', onClose: onClose },
+    packageOption.image && (React.createElement(Repeat, null,
+        React.createElement(LogoBox, { logo: packageOption.image, alt: packageOption.title || undefined, wide: true }))),
+    packageOption.description && (React.createElement(Repeat, null,
+        React.createElement(Content, { dangerouslySetInnerHTML: { __html: marked(packageOption.description) } }))),
+    packageOption.link?.href && packageOption.link.title && (React.createElement(Repeat, null,
+        React.createElement(ButtonInline, { as: "a", href: packageOption.link.href, target: "_blank", rel: "noopener noreferrer nofollow" }, packageOption.link.title)))));
+export default PackageOptionModal;

package/dist-src/layouts/searchItem/PackageOptions.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { marked } from 'marked';
+import { Repeat } from '../../components/Repeat/index';
+import { ProductPageMainSection } from '../../components/ProductPage/index';
+import Content from '../../components/Content/index';
+import { H2 } from '../../components/Heading/index';
+import { ButtonInline } from '../../components/Button/index';
+import LogoBox from '../../components/LogoBox/index';
+const PackageOptions = ({ packageOptions }) => {
+    if (!packageOptions) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null, packageOptions.map((packageOption, index) => (React.createElement(ProductPageMainSection, { key: packageOption.title || index },
+        React.createElement(Repeat, null,
+            React.createElement(H2, { noMargin: true }, packageOption.title)),
+        packageOption.description && (React.createElement(Repeat, null,
+            React.createElement(Content, { dangerouslySetInnerHTML: { __html: marked(packageOption.description) } }))),
+        packageOption.link?.url && (React.createElement(Repeat, null,
+            React.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.createElement(Repeat, null,
+            React.createElement(LogoBox, { logo: packageOption.image, alt: "Logotyp", wide: true }))))))));
+};
+export default PackageOptions;

package/dist-src/layouts/searchItem/Page404.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import Container from '../../components/Container/index';
+import { Page, PageSection } from '../../components/Page/index';
+import { H1 } from '../../components/Heading/index';
+const Page404 = () => (React.createElement(Page, null,
+    React.createElement(PageSection, { large: true },
+        React.createElement(Container, null,
+            React.createElement(H1, { noMargin: true }, "404")))));
+export default Page404;

package/dist-src/layouts/searchItem/PageLoading.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import Container from '../../components/Container/index';
+import { Page, PageSection } from '../../components/Page/index';
+import Loader from '../../components/Loader/index';
+const PageLoading = () => (React.createElement(Page, null,
+    React.createElement(PageSection, { large: true },
+        React.createElement(Container, null,
+            React.createElement(Loader, null)))));
+export default PageLoading;

package/dist-src/layouts/searchItem/Property.js

@@ -0,0 +1,51 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import PropertyTreeCreator from '../../utils/vehicle-properties/property-tree-creator';
+import sortTree from '../../utils/vehicle-properties/property-tree-sorter';
+import enrichWithHint from '../../utils/vehicle-properties/property-hint-enricher';
+import addCustomProperties from '../../utils/vehicle-properties/custom-property-adder';
+import removeProperties from '../../utils/vehicle-properties/property-remover';
+import MetadataItem from './MetadataItem';
+import { H5 } from '../../components/Heading/index';
+import { Repeat } from '../../components/Repeat/index';
+import { TableList } from '../../components/TableList/index';
+import Tabs from '../../components/Tabs/index';
+const MetadataSubCategory = ({ name, properties }) => (React.createElement(Repeat, null,
+    React.createElement(H5, { as: "h3" }, name),
+    React.createElement(TableList, null, !!properties.length &&
+        properties.map((property, index) => (React.createElement(MetadataItem, { name: property.name, hint: property.hint, value: property.value, unit: property.unit, key: `${property.name}-${index}` }))))));
+const MetadataCategory = ({ properties, subCategories }) => (React.createElement("div", { className: "tab-section" },
+    !!properties.length && (React.createElement(Repeat, null,
+        React.createElement(TableList, null, properties.map((property, index) => (React.createElement(MetadataItem, { name: property.name, hint: property.hint, value: property.value, unit: property.unit, key: `${property.name}-${index}` })))))),
+    !!subCategories.length &&
+        subCategories.map((subCategory, index) => (React.createElement(MetadataSubCategory, { name: subCategory.name, properties: subCategory.properties, key: `${subCategory.name}-${index}` })))));
+const PropertySet = ({ propertySet, vehicleData }) => {
+    const [activeCategoryId, setActiveCategoryId] = useState(-1);
+    const mappedProperties = useMemo(() => {
+        if (!propertySet) {
+            return undefined;
+        }
+        let newProperties = removeProperties(propertySet);
+        newProperties = addCustomProperties(vehicleData, newProperties);
+        const enrichedProperties = enrichWithHint(newProperties);
+        const tree = new PropertyTreeCreator(enrichedProperties).create();
+        sortTree(tree);
+        return tree;
+    }, [propertySet]);
+    useEffect(() => {
+        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 = mappedProperties?.categories?.find((category) => category.id === activeCategoryId);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Repeat, null,
+            React.createElement(Tabs, { tabs: mappedProperties?.categories?.map((category) => ({
+                    name: `${category.id}`,
+                    displayName: category.name,
+                })) || [], active: `${activeCategoryId}`, onClick: onTab })),
+        activeCategory && (React.createElement(Repeat, null,
+            React.createElement(MetadataCategory, { properties: activeCategory.properties, subCategories: activeCategory.subCategories })))));
+};
+export default PropertySet;

package/dist-src/layouts/searchItem/Related.js

@@ -0,0 +1,64 @@
+import React, { useCallback } from 'react';
+import Container from '../../components/Container/index';
+import { Repeat } from '../../components/Repeat/index';
+import { PageSection } from '../../components/Page/index';
+import SectionHeader from '../../components/SectionHeader/index';
+import { OverflowGridList, OverflowGrid, OverflowGridItem, } from '../../components/OverflowGrid/index';
+import ProductCard from '../../components/ProductCard/index';
+import { H2 } from '../../components/Heading/index';
+import useRelatedSearch from '../../State/RelatedSearch/useRelatedSearch';
+import Loader from '../../components/Loader/index';
+import { numberSeparator } from '../../utils/formats';
+import PubSub from '../../utils/pubsub/pubsub';
+import { regexPathGuid } from '../../utils/regex';
+const Related = ({ id, hashRoute, pathRoute, onClickSearchItem }) => {
+    const { loading, response, moreLikeThisUrl } = useRelatedSearch(id);
+    const onItemClicked = useCallback((id) => {
+        PubSub.publish('ItemClicked', id);
+        if (onClickSearchItem) {
+            onClickSearchItem(id);
+        }
+    }, []);
+    if (!response?.documentList.documents.length || response?.documentList.documents.length === 0) {
+        return null;
+    }
+    if (loading) {
+        return React.createElement(Loader, null);
+    }
+    return (React.createElement(PageSection, { accent: true, large: true, className: "wayke__theme wayke__color--accent-bg" },
+        React.createElement(Container, null,
+            moreLikeThisUrl ? (React.createElement(Repeat, null,
+                React.createElement(SectionHeader, { onClick: () => { } },
+                    React.createElement(H2, { noMargin: true }, "Relaterade fordon")))) : (React.createElement(Repeat, null,
+                React.createElement(SectionHeader, { onClick: () => { }, actionTitle: "Visa alla" },
+                    React.createElement(H2, { noMargin: true }, "Senast inkomna")))),
+            React.createElement(Repeat, null,
+                React.createElement(OverflowGrid, null,
+                    React.createElement(OverflowGridList, null, response?.documentList.documents.map((document) => {
+                        const prefix = pathRoute ? `/${pathRoute}` : '/';
+                        const r = regexPathGuid(pathRoute);
+                        const pathRouteUrl = window.location.pathname === '/'
+                            ? `${prefix}${document._id}`
+                            : r.test(`${pathRoute}${id}`)
+                                ? window.location.pathname.replace(r, `${pathRoute}${document._id}`)
+                                : `${window.location.pathname}${prefix}${document._id}`;
+                        return (React.createElement(OverflowGridItem, { key: document._id },
+                            React.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,
+                                    },
+                                    {
+                                        title: `${numberSeparator(document.mileage)} mil`,
+                                    },
+                                    {
+                                        title: document.gearboxType,
+                                    },
+                                    {
+                                        title: document.fuelType,
+                                    },
+                                ], price: `${numberSeparator(document.price)} kr`, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
+                                    ? `${numberSeparator(document.oldPrice)} kr`
+                                    : undefined, pathRoute: pathRoute })));
+                    })))))));
+};
+export default Related;