@wayke-se/components-react 3.3.2 → 3.5.0

package/README.md

@@ -182,7 +182,7 @@ const App = ({}) => {
 | pathRoute                 | string                    |                           |
 | hashRoute                 | boolean                   |                           |
 | filterList                | SearchFilterTypes[]       |                           |
-| initialQueryParams        | URLSearchParams or string | query, manufacturer, modelSeries, fuelType, gearboxType, branch, color, environmentClass, properties.segment, drivingWheel, price.min, price.max, mileage.min, mileage.max, modelYear.min, modelYear.max |
+| initialQueryParams        | URLSearchParams or string | query, manufacturer, modelSeries, fuelType, gearboxType, branch, color, environmentClass, properties.segment, drivingWheel, price.min, price.max, mileage.min, mileage.max, modelYear.min, modelYear.max, leasingPrice.min, leasingPrice.max, businessLeasingPrice.min, businessLeasingPrice.max |
 | removeSearchBar           | boolean                   |                           |
 | removeFilterOptions       | boolean                   |                           |
 | placeholderImage          | string                    |                           |
@@ -192,7 +192,7 @@ const App = ({}) => {
 * Optional
   * `pathRoute` - If set, then if a item is clicked it will use the provided url and append the guid. Supports both relative and absolute.
   * `hashRoute` - If set to true, then if a item is clicked it will append #guid to the url (is not used if `pathRoute` is set).
-  * `filterList` - Select what filters that should be visible and in whiched order, drivingWheel, price, mileage, modelYear
+  * `filterList` - Select what filters that should be visible and in whiched order, drivingWheel, price, mileage, modelYear, leasingPrice, businessLeasingPrice
   * `initialQueryParams` - Set the default filter that should be applid upon init.
   * `removeSearchBar` - Removes search bar.
   * `removeFilterOptions` - Removes filter options.
@@ -271,7 +271,7 @@ WaykeSearchItem & WaykeSearch combined without `id`
 ### SearchFilterTypes
 | Property    | Type                  | Required | Values                                                                                                                                         |
 |-------------|-----------------------|----------|------------------------------------------------------------------------------------------------------------------------------------------------|
-| filterName  | SearchFilterNameTypes | true     | manufacturer, modelSeries, fuelType, gearboxType, branch, color, environmentClass, properties.segment, drivingWheel, price, mileage, modelYear |
+| filterName  | SearchFilterNameTypes | true     | manufacturer, modelSeries, fuelType, gearboxType, branch, color, environmentClass, properties.segment, drivingWheel, price, mileage, modelYear, leasingPrice, businessLeasingPrice |
 | displayName | string                | false    |                                                                                                                                                |
 
 * `displayName` override default translation of title

package/dist-node/index.js

@@ -503,6 +503,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'
@@ -595,6 +596,8 @@ const FacetIdToTitle = f => {
       return 'Modellår';
     case LEASING_PRICE:
       return 'Privatleasing';
+    case BUSINESS_LEASING_PRICE:
+      return 'Företagsleasing';
     default:
       return f;
   }
@@ -993,13 +996,11 @@ const H2 = styled__default(HeadingBase).attrs(props => ({
 }))`
   font-size: 1.5rem;
 `;
-/*
-export const H3 = styled(HeadingBase).attrs<{ as: string }>((props) => ({
-  as: props.as || 'h3',
+const H3 = styled__default(HeadingBase).attrs(props => ({
+  as: props.as || 'h3'
 }))`
   font-size: 1.125rem;
 `;
-*/
 const H4 = styled__default(HeadingBase).attrs(props => ({
   as: props.as || 'h4'
 }))`
@@ -1981,6 +1982,7 @@ const FacetSelector = ({
         unit: "kr",
         formatValues: true
       });
+    case BUSINESS_LEASING_PRICE:
     case LEASING_PRICE:
       return React__default.createElement(RangeFacet, {
         facet: facet,
@@ -2037,6 +2039,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:
@@ -2379,6 +2383,7 @@ const ProductCard = ({
   price,
   oldPrice,
   leasingPrice,
+  businessLeasingPrice,
   onClick
 }) => {
   const {
@@ -2415,7 +2420,7 @@ const ProductCard = ({
   }, title) : title), description && React__default.createElement(Description$1, null, description), uspList && React__default.createElement(Usp, null, React__default.createElement(UspList, {
     small: true,
     items: uspList
-  }))), React__default.createElement(ContentFooter, null, React__default.createElement(Price, null, React__default.createElement(PriceCell, null, 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(ContentFooter, null, React__default.createElement(Price, null, React__default.createElement(PriceCell, null, 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, "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 => {
@@ -2475,8 +2480,9 @@ const Grid = ({
         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 ? `${numberSeparator(document.oldPrice)} kr` : undefined
+      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
     }));
   })));
 };
@@ -6902,6 +6908,8 @@ const Related = ({
       }],
       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
     }));
   }))))));
@@ -8069,7 +8077,7 @@ const PdfListItem = styled__default.li.attrs(() => ({
     flex: 0 0 100%;
   }
 `;
-const PdfContainer = styled__default.ul`
+const List$a = styled__default.ul`
   list-style: none;
   padding: 0;
   display: flex;
@@ -8113,20 +8121,71 @@ const PdfListInner = styled__default.div`
   }
 `;
 
+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
-}) => 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 = ({
+}) => {
+  const contentType = React.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(PdfContainer, null, documents.map((document, i) => React__default.createElement(PdfDownloadItem, {
+}) => 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 {
+      var _SortOrder$category;
+      const category = curr.category || 'others';
+      prev.push({
+        category,
+        documents: [curr],
+        sortOrder: (_SortOrder$category = SortOrder === null || SortOrder === void 0 ? void 0 : SortOrder[category]) !== null && _SortOrder$category !== void 0 ? _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 === null || Translation === void 0 ? void 0 : Translation[group.category]) || Translation.other), React__default.createElement(DocumentList, {
+    documents: group.documents
+  }))));
+};
+
 const WaykeSearchItem = ({
   id,
   hashRoute,
@@ -8322,11 +8381,9 @@ const WaykeSearchItem = ({
     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, {
+  })))), React__default.createElement(Documents, {
     documents: documents
-  }))), React__default.createElement(ProductPageMainSection, null, React__default.createElement(Branch, {
+  }), React__default.createElement(ProductPageMainSection, null, React__default.createElement(Branch, {
     branch: branch,
     loading: loadingCentralStorageVehicle
   }), ecommerce && ecommerce.enabled && React__default.createElement(Repeat, null, React__default.createElement(ButtonPrimary, {