@wayke-se/components-react 3.3.2 → 3.4.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/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/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/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-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/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/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-web/index.js

@@ -806,13 +806,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',
 })) `
@@ -7108,7 +7106,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 +7150,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 +7341,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,