@wayke-se/components-react 3.3.2 → 3.5.0

package/dist-src/components/DocumentList/index.js

@@ -0,0 +1,23 @@
+import React, { useMemo } from 'react';
+import { PdfListItem, PdfSubtitle, PdfTitle, List, PdfListInner, PdfLink, PdfColumn, } from './wrapper';
+const translateContentType = (document) => {
+    switch (document.contentType) {
+        case 'application/pdf':
+            return 'PDF';
+        default:
+            const formattedContentType = document.url && document.url.includes('.') ? document.url.split('.').pop() : '';
+            return formattedContentType;
+    }
+};
+export const PdfDownloadItem = ({ document }) => {
+    const contentType = useMemo(() => translateContentType(document), [document]);
+    return (React.createElement(PdfListItem, null,
+        React.createElement(PdfListInner, null,
+            React.createElement(PdfColumn, null,
+                React.createElement(PdfTitle, null, document.name),
+                React.createElement(PdfSubtitle, null, contentType)),
+            React.createElement(PdfColumn, null,
+                React.createElement(PdfLink, { href: document.url, rel: "noopener noreferrer nofollow", target: "_blank" }, "\u00D6ppna")))));
+};
+export const DocumentList = ({ documents }) => (React.createElement(List, null, documents.map((document, i) => (React.createElement(PdfDownloadItem, { key: `${document.url}-${i}`, document: document })))));
+export default DocumentList;

package/dist-src/components/{Pdf → DocumentList}/wrapper.js

@@ -10,7 +10,7 @@ export const PdfListItem = styled.li.attrs(() => ({
     flex: 0 0 100%;
   }
 `;
-export const PdfContainer = styled.ul `
+export const List = styled.ul `
   list-style: none;
   padding: 0;
   display: flex;

package/dist-src/components/Filter/index.js

@@ -1,13 +1,15 @@
 import React, { useState, useCallback } from 'react';
 import { List, Item, Action, Label, Indicator, IndicatorValue } from './wrapper';
 import { FacetIdToTitle } from '../../utils/formats';
-import { PRICE, MILEAGE, MODEL_YEAR } from '../../utils/constants';
+import { PRICE, MILEAGE, MODEL_YEAR, LEASING_PRICE, BUSINESS_LEASING_PRICE, } from '../../utils/constants';
 import useSearch from '../../State/Search/useSearch';
 import FilterPanel from '../FilterPanel/index';
 const isSelected = (f, searchParams) => {
     switch (f.id) {
         case PRICE:
         case MILEAGE:
+        case LEASING_PRICE:
+        case BUSINESS_LEASING_PRICE:
         case MODEL_YEAR:
             return searchParams.has(`${f.id}.min`) || searchParams.has(`${f.id}.max`) ? 1 : 0;
         default:

package/dist-src/components/FilterPanel/faceSelector.js

@@ -2,7 +2,7 @@ import React from 'react';
 import CheckListFacet from './checkListFacet';
 import ColorSelectFacet from './colorFacet';
 import RangeFacet from './rangeFacet';
-import { MANUFACTURER, MODEL_SERIES, FUEL_TYPE, GEARBOX_TYPE, ENVIRONMENT_CLASS, SEGMENT, DRIVING_WHEEL, COLOR, PRICE, BRANCH, MILEAGE, MODEL_YEAR, LEASING_PRICE, } from '../../utils/constants';
+import { MANUFACTURER, MODEL_SERIES, FUEL_TYPE, GEARBOX_TYPE, ENVIRONMENT_CLASS, SEGMENT, DRIVING_WHEEL, COLOR, PRICE, BRANCH, MILEAGE, MODEL_YEAR, LEASING_PRICE, BUSINESS_LEASING_PRICE, } from '../../utils/constants';
 const FacetSelector = ({ facet }) => {
     switch (facet.id) {
         case MANUFACTURER:
@@ -18,6 +18,7 @@ const FacetSelector = ({ facet }) => {
             return React.createElement(ColorSelectFacet, { facet: facet });
         case PRICE:
             return React.createElement(RangeFacet, { facet: facet, unit: "kr", formatValues: true });
+        case BUSINESS_LEASING_PRICE:
         case LEASING_PRICE:
             return React.createElement(RangeFacet, { facet: facet, unit: "kr/m\u00E5n", formatValues: true });
         case MILEAGE:

package/dist-src/components/Grid/index.js

@@ -49,10 +49,12 @@ const Grid = ({ documents, placeholderImage, hashRoute, pathRoute, onClickItem }
                         {
                             title: document.fuelType,
                         },
-                    ], price: `${numberSeparator(document.price)} kr`, leasingPrice: document.leasingPrice !== undefined
-                        ? `${numberSeparator(document.leasingPrice)} kr`
-                        : undefined, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
+                    ], price: `${numberSeparator(document.price)} kr`, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
                         ? `${numberSeparator(document.oldPrice)} kr`
+                        : undefined, leasingPrice: document.leasingPrice !== undefined
+                        ? `${numberSeparator(document.leasingPrice)} kr/mån`
+                        : undefined, businessLeasingPrice: document.businessLeasingPrice !== undefined
+                        ? `${numberSeparator(document.businessLeasingPrice)} kr/mån`
                         : undefined })));
         }))));
 };

package/dist-src/components/Heading/index.js

@@ -23,13 +23,11 @@ export const H2 = styled(HeadingBase).attrs((props) => ({
 })) `
   font-size: 1.5rem;
 `;
-/*
-export const H3 = styled(HeadingBase).attrs<{ as: string }>((props) => ({
-  as: props.as || 'h3',
-}))`
+export const H3 = styled(HeadingBase).attrs((props) => ({
+    as: props.as || 'h3',
+})) `
   font-size: 1.125rem;
 `;
-*/
 export const H4 = styled(HeadingBase).attrs((props) => ({
     as: props.as || 'h4',
 })) `

package/dist-src/components/ProductCard/index.js

@@ -4,7 +4,7 @@ import { Wrapper, Image, Picture, Source, Img, Content, ContentBody, ContentFoot
 import UspList from '../UspList/index';
 import { DEFAULT_PLACEHOLDER_IMAGE } from '../../utils/constants';
 import usePath from '../../State/Path/usePath';
-const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, description, uspList, price, oldPrice, leasingPrice, onClick, }) => {
+const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, description, uspList, price, oldPrice, leasingPrice, businessLeasingPrice, onClick, }) => {
     const { pushState } = usePath();
     const _onClick = useMemo(() => (onClick ? () => onClick(id) : undefined), [id]);
     const onHrefClick = useCallback((e) => {
@@ -35,7 +35,10 @@ const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, desc
                         oldPrice ? React.createElement(OldPrice, null, oldPrice) : React.createElement(Label, null, "Pris"),
                         React.createElement(CurrentPrice, null, price)),
                     leasingPrice && (React.createElement(PriceCell, null,
-                        React.createElement(Label, null, "Leasingpris"),
-                        React.createElement(CurrentPrice, null, leasingPrice))))))));
+                        React.createElement(Label, null, "Privatleasing"),
+                        React.createElement(CurrentPrice, null, leasingPrice))),
+                    businessLeasingPrice && (React.createElement(PriceCell, null,
+                        React.createElement(Label, null, "F\u00F6retagsleasing"),
+                        React.createElement(CurrentPrice, null, businessLeasingPrice))))))));
 };
 export default ProductCard;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { H2, H3 } from '../../components/Heading/index';
+import { ProductPageMainSection } from '../../components/ProductPage/index';
+import DocumentList from '../../components/DocumentList/index';
+import { Repeat } from '../../components/Repeat/index';
+const Translation = {
+    'tyre-label': 'Energideklaration för däck',
+    'content declaration': 'Varudeklaration',
+    other: 'Övriga dokument',
+};
+const SortOrder = {
+    'tyre-label': 2,
+    'content declaration': 1,
+    other: 3,
+};
+const Documents = ({ documents }) => {
+    const categorised = documents
+        .reduce((prev, curr) => {
+        const index = prev.findIndex((x) => x.category === (curr.category || 'others'));
+        if (index > -1) {
+            prev[index].documents.push(curr);
+        }
+        else {
+            const category = curr.category || 'others';
+            prev.push({
+                category,
+                documents: [curr],
+                sortOrder: SortOrder?.[category] ?? 99,
+            });
+        }
+        return prev;
+    }, [])
+        .sort((a, b) => a.sortOrder - b.sortOrder);
+    if (!documents.length)
+        return null;
+    const manyCategories = categorised.length > 1;
+    return (React.createElement(ProductPageMainSection, null,
+        React.createElement(Repeat, null,
+            React.createElement(H2, { noMargin: true }, "Dokument")),
+        categorised.map((group) => (React.createElement(Repeat, { key: group.category },
+            manyCategories && (React.createElement(H3, null, Translation?.[group.category] || Translation.other)),
+            React.createElement(DocumentList, { documents: group.documents }))))));
+};
+export default Documents;

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

@@ -58,6 +58,10 @@ const Related = ({ id, hashRoute, pathRoute, onClickSearchItem }) => {
                                     },
                                 ], price: `${numberSeparator(document.price)} kr`, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
                                     ? `${numberSeparator(document.oldPrice)} kr`
+                                    : undefined, leasingPrice: document.leasingPrice !== undefined
+                                    ? `${numberSeparator(document.leasingPrice)} kr/mån`
+                                    : undefined, businessLeasingPrice: document.businessLeasingPrice !== undefined
+                                    ? `${numberSeparator(document.businessLeasingPrice)} kr/mån`
                                     : undefined, pathRoute: pathRoute })));
                     })))))));
 };

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

@@ -32,8 +32,8 @@ import PageLoading from './PageLoading';
 import PubSub from '../../utils/pubsub/pubsub';
 import Property from './Property';
 import DemoCarModal from './DemoCarModal';
-import PdfDownloadContainer from '../../components/Pdf/index';
 import useSettings from '../../State/Settings/useSettings';
+import Documents from './Documents';
 const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, placeholderImage, modifyDocumentTitleItem, onClickSearchItem, }) => {
     const { ecomSettings } = useSettings();
     const ecomContext = useRef();
@@ -165,14 +165,7 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
                                 React.createElement(Repeat, null,
                                     React.createElement(ExtendContent, { actionTitle: "Visa mer", onClick: onShowMoreOptionsClick },
                                         React.createElement(UspList, { items: options }))))),
-                            (documents.length || 0) > 0 && (React.createElement(ProductPageMainSection, null,
-                                React.createElement(Repeat, null,
-                                    React.createElement(H2, { noMargin: true }, "Dokument")),
-                                React.createElement(Repeat, null,
-                                    React.createElement(Content, null,
-                                        React.createElement("p", null, "Tillh\u00F6rande dokument f\u00F6r bilen."))),
-                                React.createElement(Repeat, null,
-                                    React.createElement(PdfDownloadContainer, { documents: documents })))),
+                            React.createElement(Documents, { documents: documents }),
                             React.createElement(ProductPageMainSection, null,
                                 React.createElement(Branch, { branch: branch, loading: loadingCentralStorageVehicle }),
                                 ecommerce && ecommerce.enabled && (React.createElement(Repeat, null,

package/dist-src/utils/constants.js

@@ -11,6 +11,7 @@ export const PRICE = 'price';
 export const MILEAGE = 'mileage';
 export const MODEL_YEAR = 'modelYear';
 export const LEASING_PRICE = 'leasingPrice';
+export const BUSINESS_LEASING_PRICE = 'businessLeasingPrice';
 export const COLOR_WHITE = { displayName: 'Vit', hex: '#ffffff' };
 export const COLOR_BLACK = { displayName: 'Svart', hex: '#000000' };
 export const COLOR_GRAY = { displayName: 'Grå', hex: '#808080' };

package/dist-src/utils/formats.js

@@ -10,7 +10,7 @@ export const numberSeparator = (value, n = 0, x = 3, s = ' ', c = '.') => {
     const num = value.toFixed(Math.max(0, ~~n));
     return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), `$&${s || ','}`);
 };
-import { MANUFACTURER, MODEL_SERIES, FUEL_TYPE, GEARBOX_TYPE, ENVIRONMENT_CLASS, SEGMENT, DRIVING_WHEEL, COLOR, PRICE, BRANCH, MILEAGE, MODEL_YEAR, LEASING_PRICE, } from './constants';
+import { MANUFACTURER, MODEL_SERIES, FUEL_TYPE, GEARBOX_TYPE, ENVIRONMENT_CLASS, SEGMENT, DRIVING_WHEEL, COLOR, PRICE, BRANCH, MILEAGE, MODEL_YEAR, LEASING_PRICE, BUSINESS_LEASING_PRICE, } from './constants';
 export const FacetIdToTitle = (f) => {
     switch (f) {
         case MANUFACTURER:
@@ -39,6 +39,8 @@ export const FacetIdToTitle = (f) => {
             return 'Modellår';
         case LEASING_PRICE:
             return 'Privatleasing';
+        case BUSINESS_LEASING_PRICE:
+            return 'Företagsleasing';
         default:
             return f;
     }

package/dist-types/@types/codegen/types.d.ts

@@ -21,6 +21,8 @@ export declare type Scalars = {
     DateTime: Date;
     Email: string;
     FileDocument: {
+        webp: string;
+        category: string;
         contentType: string;
         name: string;
         url: string;

package/dist-types/@types/filter.d.ts

@@ -1,4 +1,4 @@
-export declare type SearchFilterNameTypes = 'manufacturer' | 'modelSeries' | 'fuelType' | 'gearboxType' | 'branch' | 'color' | 'environmentClass' | 'properties.segment' | 'drivingWheel' | 'price' | 'mileage' | 'modelYear';
+export declare type SearchFilterNameTypes = 'manufacturer' | 'modelSeries' | 'fuelType' | 'gearboxType' | 'branch' | 'color' | 'environmentClass' | 'properties.segment' | 'drivingWheel' | 'price' | 'mileage' | 'modelYear' | 'leasingPrice' | 'businessLeasingPrice';
 export declare type SearchFilterTypes = {
     filterName: SearchFilterNameTypes;
     displayName?: string;

package/dist-types/@types/search.d.ts

@@ -73,6 +73,7 @@ export interface Document {
     shortDescription: string;
     title: string;
     leasingPrice?: number;
+    businessLeasingPrice?: number;
 }
 export interface FacetFilter {
     displayName: string;

package/dist-types/components/{Pdf → DocumentList}/index.d.ts

@@ -4,8 +4,8 @@ interface PdfDownloadItemProps {
     document: Scalars['FileDocument'];
 }
 export declare const PdfDownloadItem: ({ document }: PdfDownloadItemProps) => JSX.Element;
-interface PdfDownloadContainerProps {
+interface IDocumentList {
     documents: Scalars['FileDocument'][];
 }
-export declare const PdfDownloadContainer: ({ documents }: PdfDownloadContainerProps) => JSX.Element;
-export default PdfDownloadContainer;
+export declare const DocumentList: ({ documents }: IDocumentList) => JSX.Element;
+export default DocumentList;

package/dist-types/components/{Pdf → DocumentList}/wrapper.d.ts

@@ -1,7 +1,7 @@
 export declare const PdfListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
     className: "wayke__theme wayke__color--primary-text";
 }, "className">;
-export declare const PdfContainer: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const List: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
 export declare const PdfLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {
     className: "wayke__theme wayke__color--primary-text wayke__font--bold";
 }, "className">;

package/dist-types/components/Heading/index.d.ts

@@ -9,6 +9,11 @@ export declare const H2: import("styled-components").StyledComponent<"div", impo
 } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     noMargin?: boolean | undefined;
 }, "className">;
+export declare const H3: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    className: "wayke__theme wayke__font--bold";
+} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    noMargin?: boolean | undefined;
+}, "className">;
 export declare const H4: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     className: "wayke__theme wayke__font--bold";
 } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {

package/dist-types/components/ProductCard/index.d.ts

@@ -12,7 +12,8 @@ interface Props {
     price: string;
     leasingPrice?: string;
     oldPrice?: string;
+    businessLeasingPrice?: string;
     onClick?: (id: string) => void;
 }
-declare const ProductCard: ({ id, title, href, image, pathRoute, placeholderImage, description, uspList, price, oldPrice, leasingPrice, onClick, }: Props) => JSX.Element;
+declare const ProductCard: ({ id, title, href, image, pathRoute, placeholderImage, description, uspList, price, oldPrice, leasingPrice, businessLeasingPrice, onClick, }: Props) => JSX.Element;
 export default ProductCard;

package/dist-types/layouts/searchItem/Documents.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Scalars } from '../../@types/codegen/types';
+interface DocumentsProps {
+    documents: Scalars['FileDocument'][];
+}
+declare const Documents: ({ documents }: DocumentsProps) => JSX.Element | null;
+export default Documents;

package/dist-types/utils/constants.d.ts

@@ -11,6 +11,7 @@ export declare const PRICE = "price";
 export declare const MILEAGE = "mileage";
 export declare const MODEL_YEAR = "modelYear";
 export declare const LEASING_PRICE = "leasingPrice";
+export declare const BUSINESS_LEASING_PRICE = "businessLeasingPrice";
 export declare const COLOR_WHITE: {
     displayName: string;
     hex: string;

package/dist-web/index.js

@@ -476,6 +476,7 @@ const PRICE = 'price';
 const MILEAGE = 'mileage';
 const MODEL_YEAR = 'modelYear';
 const LEASING_PRICE = 'leasingPrice';
+const BUSINESS_LEASING_PRICE = 'businessLeasingPrice';
 const COLOR_WHITE = { displayName: 'Vit', hex: '#ffffff' };
 const COLOR_BLACK = { displayName: 'Svart', hex: '#000000' };
 const COLOR_GRAY = { displayName: 'Grå', hex: '#808080' };
@@ -532,6 +533,8 @@ const FacetIdToTitle = (f) => {
             return 'Modellår';
         case LEASING_PRICE:
             return 'Privatleasing';
+        case BUSINESS_LEASING_PRICE:
+            return 'Företagsleasing';
         default:
             return f;
     }
@@ -806,13 +809,11 @@ const H2 = styled(HeadingBase).attrs((props) => ({
 })) `
   font-size: 1.5rem;
 `;
-/*
-export const H3 = styled(HeadingBase).attrs<{ as: string }>((props) => ({
-  as: props.as || 'h3',
-}))`
+const H3 = styled(HeadingBase).attrs((props) => ({
+    as: props.as || 'h3',
+})) `
   font-size: 1.125rem;
 `;
-*/
 const H4 = styled(HeadingBase).attrs((props) => ({
     as: props.as || 'h4',
 })) `
@@ -1611,6 +1612,7 @@ const FacetSelector = ({ facet }) => {
             return React__default.createElement(ColorSelectFacet, { facet: facet });
         case PRICE:
             return React__default.createElement(RangeFacet, { facet: facet, unit: "kr", formatValues: true });
+        case BUSINESS_LEASING_PRICE:
         case LEASING_PRICE:
             return React__default.createElement(RangeFacet, { facet: facet, unit: "kr/m\u00E5n", formatValues: true });
         case MILEAGE:
@@ -1643,6 +1645,8 @@ const isSelected = (f, searchParams) => {
     switch (f.id) {
         case PRICE:
         case MILEAGE:
+        case LEASING_PRICE:
+        case BUSINESS_LEASING_PRICE:
         case MODEL_YEAR:
             return searchParams.has(`${f.id}.min`) || searchParams.has(`${f.id}.max`) ? 1 : 0;
         default:
@@ -1956,7 +1960,7 @@ const usePath = () => {
     return context;
 };
 
-const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, description, uspList, price, oldPrice, leasingPrice, onClick, }) => {
+const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, description, uspList, price, oldPrice, leasingPrice, businessLeasingPrice, onClick, }) => {
     const { pushState } = usePath();
     const _onClick = useMemo(() => (onClick ? () => onClick(id) : undefined), [id]);
     const onHrefClick = useCallback((e) => {
@@ -1987,8 +1991,11 @@ const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, desc
                         oldPrice ? React__default.createElement(OldPrice, null, oldPrice) : React__default.createElement(Label$3, null, "Pris"),
                         React__default.createElement(CurrentPrice, null, price)),
                     leasingPrice && (React__default.createElement(PriceCell, null,
-                        React__default.createElement(Label$3, null, "Leasingpris"),
-                        React__default.createElement(CurrentPrice, null, leasingPrice))))))));
+                        React__default.createElement(Label$3, null, "Privatleasing"),
+                        React__default.createElement(CurrentPrice, null, leasingPrice))),
+                    businessLeasingPrice && (React__default.createElement(PriceCell, null,
+                        React__default.createElement(Label$3, null, "F\u00F6retagsleasing"),
+                        React__default.createElement(CurrentPrice, null, businessLeasingPrice))))))));
 };
 
 const resolveImage = (document) => {
@@ -2038,10 +2045,12 @@ const Grid = ({ documents, placeholderImage, hashRoute, pathRoute, onClickItem }
                         {
                             title: document.fuelType,
                         },
-                    ], price: `${numberSeparator(document.price)} kr`, leasingPrice: document.leasingPrice !== undefined
-                        ? `${numberSeparator(document.leasingPrice)} kr`
-                        : undefined, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
+                    ], price: `${numberSeparator(document.price)} kr`, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
                         ? `${numberSeparator(document.oldPrice)} kr`
+                        : undefined, leasingPrice: document.leasingPrice !== undefined
+                        ? `${numberSeparator(document.leasingPrice)} kr/mån`
+                        : undefined, businessLeasingPrice: document.businessLeasingPrice !== undefined
+                        ? `${numberSeparator(document.businessLeasingPrice)} kr/mån`
                         : undefined })));
         }))));
 };
@@ -5949,6 +5958,10 @@ const Related = ({ id, hashRoute, pathRoute, onClickSearchItem }) => {
                                     },
                                 ], price: `${numberSeparator(document.price)} kr`, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
                                     ? `${numberSeparator(document.oldPrice)} kr`
+                                    : undefined, leasingPrice: document.leasingPrice !== undefined
+                                    ? `${numberSeparator(document.leasingPrice)} kr/mån`
+                                    : undefined, businessLeasingPrice: document.businessLeasingPrice !== undefined
+                                    ? `${numberSeparator(document.businessLeasingPrice)} kr/mån`
                                     : undefined, pathRoute: pathRoute })));
                     })))))));
 };
@@ -7108,7 +7121,7 @@ const PdfListItem = styled.li.attrs(() => ({
     flex: 0 0 100%;
   }
 `;
-const PdfContainer = styled.ul `
+const List$a = styled.ul `
   list-style: none;
   padding: 0;
   display: flex;
@@ -7152,14 +7165,65 @@ const PdfListInner = styled.div `
   }
 `;
 
-const PdfDownloadItem = ({ document }) => (React__default.createElement(PdfListItem, null,
-    React__default.createElement(PdfListInner, null,
-        React__default.createElement(PdfColumn, null,
-            React__default.createElement(PdfTitle, null, document.name),
-            React__default.createElement(PdfSubtitle, null, document.contentType)),
-        React__default.createElement(PdfColumn, null,
-            React__default.createElement(PdfLink, { href: document.url, rel: "noopener noreferrer nofollow", target: "_blank" }, "\u00D6ppna")))));
-const PdfDownloadContainer = ({ documents }) => (React__default.createElement(PdfContainer, null, documents.map((document, i) => (React__default.createElement(PdfDownloadItem, { key: `${document.url}-${i}`, document: document })))));
+const translateContentType = (document) => {
+    switch (document.contentType) {
+        case 'application/pdf':
+            return 'PDF';
+        default:
+            const formattedContentType = document.url && document.url.includes('.') ? document.url.split('.').pop() : '';
+            return formattedContentType;
+    }
+};
+const PdfDownloadItem = ({ document }) => {
+    const contentType = useMemo(() => translateContentType(document), [document]);
+    return (React__default.createElement(PdfListItem, null,
+        React__default.createElement(PdfListInner, null,
+            React__default.createElement(PdfColumn, null,
+                React__default.createElement(PdfTitle, null, document.name),
+                React__default.createElement(PdfSubtitle, null, contentType)),
+            React__default.createElement(PdfColumn, null,
+                React__default.createElement(PdfLink, { href: document.url, rel: "noopener noreferrer nofollow", target: "_blank" }, "\u00D6ppna")))));
+};
+const DocumentList = ({ documents }) => (React__default.createElement(List$a, null, documents.map((document, i) => (React__default.createElement(PdfDownloadItem, { key: `${document.url}-${i}`, document: document })))));
+
+const Translation = {
+    'tyre-label': 'Energideklaration för däck',
+    'content declaration': 'Varudeklaration',
+    other: 'Övriga dokument',
+};
+const SortOrder = {
+    'tyre-label': 2,
+    'content declaration': 1,
+    other: 3,
+};
+const Documents = ({ documents }) => {
+    const categorised = documents
+        .reduce((prev, curr) => {
+        const index = prev.findIndex((x) => x.category === (curr.category || 'others'));
+        if (index > -1) {
+            prev[index].documents.push(curr);
+        }
+        else {
+            const category = curr.category || 'others';
+            prev.push({
+                category,
+                documents: [curr],
+                sortOrder: SortOrder?.[category] ?? 99,
+            });
+        }
+        return prev;
+    }, [])
+        .sort((a, b) => a.sortOrder - b.sortOrder);
+    if (!documents.length)
+        return null;
+    const manyCategories = categorised.length > 1;
+    return (React__default.createElement(ProductPageMainSection, null,
+        React__default.createElement(Repeat, null,
+            React__default.createElement(H2, { noMargin: true }, "Dokument")),
+        categorised.map((group) => (React__default.createElement(Repeat, { key: group.category },
+            manyCategories && (React__default.createElement(H3, null, Translation?.[group.category] || Translation.other)),
+            React__default.createElement(DocumentList, { documents: group.documents }))))));
+};
 
 const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, placeholderImage, modifyDocumentTitleItem, onClickSearchItem, }) => {
     const { ecomSettings } = useSettings();
@@ -7292,14 +7356,7 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
                                 React__default.createElement(Repeat, null,
                                     React__default.createElement(ExtendContent, { actionTitle: "Visa mer", onClick: onShowMoreOptionsClick },
                                         React__default.createElement(UspList, { items: options }))))),
-                            (documents.length || 0) > 0 && (React__default.createElement(ProductPageMainSection, null,
-                                React__default.createElement(Repeat, null,
-                                    React__default.createElement(H2, { noMargin: true }, "Dokument")),
-                                React__default.createElement(Repeat, null,
-                                    React__default.createElement(Content$2, null,
-                                        React__default.createElement("p", null, "Tillh\u00F6rande dokument f\u00F6r bilen."))),
-                                React__default.createElement(Repeat, null,
-                                    React__default.createElement(PdfDownloadContainer, { documents: documents })))),
+                            React__default.createElement(Documents, { documents: documents }),
                             React__default.createElement(ProductPageMainSection, null,
                                 React__default.createElement(Branch, { branch: branch, loading: loadingCentralStorageVehicle }),
                                 ecommerce && ecommerce.enabled && (React__default.createElement(Repeat, null,