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

package/dist-src/layout/theme.js

@@ -0,0 +1,57 @@
+const _colors = {
+    black: '#000',
+    white: '#fff',
+    gray: '#ddd',
+    grayLight: '#f8f8f8',
+    grayLightTransparent: 'rgba(248, 248, 248, 0)',
+    grayLightDarker: '#ebebeb',
+    grayDark: '#717171',
+    blue: '#1d61ca',
+    ui: {
+        greenLight: '#cdf5c8',
+        green: '#2b8747',
+        redLight: '#ffd0d0',
+        red: '#c71f1f',
+        yellowLight: '#fff4c7',
+        blueLight: '#daf7fc',
+    },
+};
+const theme = {
+    color: {
+        bg: _colors.white,
+        link: _colors.blue,
+        accent: _colors.grayLight,
+        accentTransparent: _colors.grayLightTransparent,
+        accentDark: _colors.grayLightDarker,
+        border: _colors.gray,
+        textDark: _colors.black,
+        textDarkLighten: _colors.grayDark,
+        textLight: _colors.white,
+        hoverOverlay: 'rgba(0, 0, 0, 0.04)',
+        disabledBg: _colors.gray,
+        disabledText: _colors.grayDark,
+        placeholder: _colors.grayDark,
+        ui: {
+            positiveLight: _colors.ui.greenLight,
+            positive: _colors.ui.green,
+            neutralLight: _colors.ui.yellowLight,
+            negativeLight: _colors.ui.redLight,
+            negative: _colors.ui.red,
+            infoLight: _colors.ui.blueLight,
+        },
+    },
+    breakpoint: {
+        Sm: '@media (min-width: 600px)',
+        LtSm: '@media (max-width: 599px)',
+        Md: '@media (min-width: 900px)',
+        LtMd: '@media (max-width: 899px)',
+        Lg: '@media (min-width: 1200px)',
+        LtLg: '@media (max-width: 1199px)',
+    },
+    distances: {
+        baseUnit: '8px',
+        inputHeight: '48px',
+        containerMaxWidth: '1312px',
+    },
+};
+export default theme;

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/{src/layouts/searchItem/Page404.tsx → dist-src/layouts/searchItem/Page404.js}

@@ -1,17 +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 = () => (
-  <Page>
-    <PageSection large>
-      <Container>
-        <H1 noMargin>404</H1>
-      </Container>
-    </PageSection>
-  </Page>
-);
-
+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/{src/layouts/searchItem/PageLoading.tsx → dist-src/layouts/searchItem/PageLoading.js}

@@ -1,17 +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 = () => (
-  <Page>
-    <PageSection large>
-      <Container>
-        <Loader />
-      </Container>
-    </PageSection>
-  </Page>
-);
-
+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;