@wayke-se/components-react 2.11.0 → 2.15.0

package/dist-web/index.js

@@ -9,8 +9,8 @@ import Slider$2 from 'react-slick';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { gql, useQuery, ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import EcomBase from '@wayke-se/ecom-react';
-import marked from 'marked';
-import { parsePhoneNumberFromString } from 'libphonenumber-js/custom';
+import { marked } from 'marked';
+import { parsePhoneNumberFromString } from 'libphonenumber-js/core';
 
 const _colors = {
     black: '#000',
@@ -87,13 +87,7 @@ const Wrapper = styled.div `
 
 const Container = ({ children }) => React__default.createElement(Wrapper, null, children);
 
-const Page = styled.main `
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  min-height: -webkit-fill-available;
-  padding-top: ${size(4)};
-`;
+const Page = styled.div ``;
 const PageSection = styled.section `
   margin-bottom: ${size(4)};
 
@@ -1465,14 +1459,14 @@ const Handle = styled.div.attrs(() => ({
   }
 `;
 
-const Handle$1 = ({ domain: [min, max], handle: { id, value, percent }, getHandleProps, }) => (React__default.createElement(Handle, Object.assign({ role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, style: {
+const Handle$1 = ({ domain: [min, max], handle: { id, value, percent }, getHandleProps, }) => (React__default.createElement(Handle, { role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, style: {
         left: `${percent}%`,
-    } }, getHandleProps(id))));
+    }, ...getHandleProps(id) }));
 
-const Track$1 = ({ source, target, getTrackProps }) => (React__default.createElement(Track, Object.assign({ style: {
+const Track$1 = ({ source, target, getTrackProps }) => (React__default.createElement(Track, { style: {
         left: `${source.percent}%`,
         width: `${target.percent - source.percent}%`,
-    } }, getTrackProps())));
+    }, ...getTrackProps() }));
 
 const getSteps = (steps) => {
     let current = Number.MAX_SAFE_INTEGER;
@@ -1510,7 +1504,7 @@ const RangeSlider = ({ loading, values, domain, steps, unit, formatValues, maxPr
                 React__default.createElement(Handle, { role: "slider", "aria-disabled": true, style: { left: '0' } }),
                 React__default.createElement(Handle, { role: "slider", "aria-disabled": true, style: { left: '100%' } })))) : (React__default.createElement(Slider, null,
             React__default.createElement(Slider$1, { disabled: loading, mode: 1, step: step, domain: domain, onChange: onChange, onUpdate: onUpdate, values: values, rootStyle: { position: 'relative' } },
-                React__default.createElement(Rail, null, ({ getRailProps }) => React__default.createElement(Bar$1, Object.assign({}, getRailProps()))),
+                React__default.createElement(Rail, null, ({ getRailProps }) => React__default.createElement(Bar$1, { ...getRailProps() })),
                 React__default.createElement(Handles, null, ({ handles, getHandleProps }) => (React__default.createElement("div", { className: "slider-handles" }, handles.map((handle) => (React__default.createElement(Handle$1, { key: handle.id, handle: handle, domain: domain, getHandleProps: getHandleProps })))))),
                 React__default.createElement(Tracks, { left: false, right: false }, ({ tracks, getTrackProps }) => (React__default.createElement("div", { className: "slider-tracks" }, tracks.map(({ id, source, target }) => (React__default.createElement(Track$1, { key: id, source: source, target: target, getTrackProps: getTrackProps }))))))))),
         React__default.createElement(RangeSpan, null,
@@ -3968,7 +3962,7 @@ const Gallery = ({ media, placeholderImage }) => {
         React__default.createElement(Wrapper$g, null,
             React__default.createElement(Main, null,
                 React__default.createElement(SliderWrapper, { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onClick: onClick },
-                    React__default.createElement(Slider$2, Object.assign({}, sliderSettings, { swipe: !navigationDisabled, touchMove: !navigationDisabled, swipeToSlide: !navigationDisabled, ref: slider, beforeChange: beforeChange }), !!(media === null || media === void 0 ? void 0 : media.length) ? (media.map((m, i) => {
+                    React__default.createElement(Slider$2, { ...sliderSettings, swipe: !navigationDisabled, touchMove: !navigationDisabled, swipeToSlide: !navigationDisabled, ref: slider, beforeChange: beforeChange }, !!(media === null || media === void 0 ? void 0 : media.length) ? (media.map((m, i) => {
                         var _a;
                         return (React__default.createElement(Item$7, { key: m.files[0].url || i },
                             m.type === 'image' && (React__default.createElement(Image$1, { src: (_a = m.files[0].formats.filter(notEmpty).find((x) => x.format === '1170x')) === null || _a === void 0 ? void 0 : _a.url, alt: `Bild ${i + 1}` })),
@@ -4104,6 +4098,7 @@ const SEARCH_ITEM_QUERY = gql `
   query SearchItem($id: ID!) {
     vehicle(id: $id) {
       id
+      documents
       contact {
         name
         email
@@ -4545,7 +4540,7 @@ const RangeSliderSimple = ({ loading, values, domain, steps, unit, formatValues,
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Slider, null,
             React__default.createElement(Slider$1, { disabled: loading, mode: 1, step: step, domain: domain, onChange: onChange, onUpdate: onUpdate, values: values, rootStyle: { position: 'relative' } },
-                React__default.createElement(Rail, null, ({ getRailProps }) => React__default.createElement(Bar$1, Object.assign({}, getRailProps()))),
+                React__default.createElement(Rail, null, ({ getRailProps }) => React__default.createElement(Bar$1, { ...getRailProps() })),
                 React__default.createElement(Handles, null, ({ handles, getHandleProps }) => (React__default.createElement("div", { className: "slider-handles" }, handles.map((handle) => (React__default.createElement(Handle$1, { key: handle.id, handle: handle, domain: domain, getHandleProps: getHandleProps })))))),
                 React__default.createElement(Tracks, { right: false }, ({ tracks, getTrackProps }) => (React__default.createElement("div", { className: "slider-tracks" }, tracks.map(({ id, source, target }) => (React__default.createElement(Track$1, { key: id, source: source, target: target, getTrackProps: getTrackProps })))))))),
         false ));
@@ -4937,7 +4932,7 @@ const Label$8 = styled.label.attrs(() => ({
     margin-top: -2px;
   }
 `;
-const Wrapper$r = styled((props) => createElement("div", Object.assign({}, props))).attrs(({ type, checked }) => ({
+const Wrapper$r = styled((props) => createElement("div", { ...props })).attrs(({ type, checked }) => ({
     role: type || 'checkbox',
     'aria-checked': checked,
 })) `
@@ -4952,7 +4947,7 @@ const Wrapper$r = styled((props) => createElement("div", Object.assign({}, props
       }
     `}
 `;
-const Input$2 = styled((props) => (createElement("input", Object.assign({}, props, { className: `${props.checked ? 'checked' : undefined} ${props.className}` })))).attrs(({ type, checked }) => ({
+const Input$2 = styled((props) => (createElement("input", { ...props, className: `${props.checked ? 'checked' : undefined} ${props.className}` }))).attrs(({ type, checked }) => ({
     checked,
     type: type || 'checkbox',
 })) `
@@ -5283,7 +5278,7 @@ const Ecom = ({ vehicle, manufacturer, onExit, onUserEvent }) => {
         useBankId: ecomSettings === null || ecomSettings === void 0 ? void 0 : ecomSettings.useBankId,
         displayBankIdAlert: ecomSettings === null || ecomSettings === void 0 ? void 0 : ecomSettings.displayBankIdAlert,
     };
-    return React__default.createElement(EcomBase, Object.assign({}, ecomData));
+    return React__default.createElement(EcomBase, { ...ecomData });
 };
 
 const ManufacturerPackageOption = ({ packageOption }) => {
@@ -6834,7 +6829,7 @@ const MetadataItem = ({ name, hint, value, unit }) => {
     const onToggleFoldout = useCallback(() => setFoldout(!foldout), [foldout]);
     const presentedValue = formatValue(value, unit);
     return (React__default.createElement(TableListItem, null,
-        React__default.createElement(TableListKey, null, hint ? (React__default.createElement(ButtonInlinePrimary, { onClick: onToggleFoldout, title: `Mer information om ${name}` }, name)) : (name)),
+        React__default.createElement(TableListKey, null, hint ? (React__default.createElement(ButtonInline, { onClick: onToggleFoldout, title: `Mer information om ${name}` }, name)) : (name)),
         React__default.createElement(TableListValue, null, value !== undefined ? presentedValue : 'Uppgift saknas'),
         hint && foldout && (React__default.createElement(Modal, { title: name, onClose: onToggleFoldout },
             React__default.createElement(Content$2, { dangerouslySetInnerHTML: { __html: hint } })))));
@@ -6952,6 +6947,69 @@ const PropertySet = ({ propertySet, vehicleData }) => {
             React__default.createElement(MetadataCategory, { properties: activeCategory.properties, subCategories: activeCategory.subCategories })))));
 };
 
+const PdfListItem = styled.li.attrs(() => ({
+    className: 'wayke__theme wayke__color--primary-text',
+})) `
+  flex: 0 0 50%;
+  padding: ${size(1)};
+
+  ${({ theme }) => theme.breakpoint.LtSm} {
+    flex: 0 0 100%;
+  }
+`;
+const PdfContainer = styled.ul `
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin: ${size(-1)};
+`;
+const PdfLink = styled.a.attrs(() => ({
+    className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
+})) `
+  text-decoration: none;
+  font-size: 0.875rem;
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+`;
+const PdfTitle = styled.div `
+  color: ${(props) => props.theme.color.textDark};
+`;
+const PdfSubtitle = styled.div `
+  color: ${(props) => props.theme.color.textDarkLighten};
+`;
+const PdfColumn = styled.div `
+  flex 0 0 auto;
+  &:first-child {
+    flex: 1 1 auto;
+  }
+`;
+const PdfListInner = styled.div `
+  position: relative;
+  border: 1px solid ${(props) => props.theme.color.border};
+  padding: ${size(1.5)};
+  display: flex;
+  align-items: center;
+  :hover {
+    background-color: ${(props) => props.theme.color.hoverOverlay};
+  }
+`;
+
+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 WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, placeholderImage, modifyDocumentTitleItem, onClickSearchItem, }) => {
     var _a, _b, _c;
     const [ecomModal, setEcomModal] = useState(false);
@@ -6982,7 +7040,7 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
     const { vehicle } = result;
     const contact = centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.contact;
     const branch = centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.branch;
-    const { title, shortDescription, media, description, price, financialOptions, insuranceOptions, manufacturer, ecommerce, packageOptions, publishedAt, } = vehicle;
+    const { title, shortDescription, media, description, price, financialOptions, insuranceOptions, manufacturer, ecommerce, packageOptions, publishedAt, documents, } = vehicle;
     const { fuelType, mileage, gearbox, modelYear, propertySet } = vehicle.data;
     const uspList = [
         {
@@ -7052,6 +7110,14 @@ 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(ProductPageMainSection, null,
                                 React__default.createElement(Branch, { branch: branch, loading: loadingCentralStorageVehicle }),
                                 ecommerce && ecommerce.enabled && (React__default.createElement(Repeat, null,
@@ -7460,8 +7526,8 @@ const WaykeComposite = ({ filterList, initialQueryParams, removeSearchBar, remov
     return (React__default.createElement(React__default.Fragment, null, id ? (React__default.createElement(WaykeSearchItem, { id: id, hashRoute: !pathRoute, disableResetScrollOnInit: disableResetScrollOnInit, placeholderImage: placeholderImage, pathRoute: pathRoute, modifyDocumentTitleItem: modifyDocumentTitleItem })) : (React__default.createElement(WaykeSearch, { filterList: filterList, initialQueryParams: initialQueryParams, removeSearchBar: removeSearchBar, hashRoute: !pathRoute, placeholderImage: placeholderImage, pathRoute: pathRoute, removeFilterOptions: removeFilterOptions, modifyDocumentTitleSearch: modifyDocumentTitleSearch }))));
 };
 
-const WaykeCompositeWithProvider = ({ provider, composite }) => (React__default.createElement(WaykeProvider, Object.assign({}, provider),
-    React__default.createElement(WaykeComposite, Object.assign({}, composite))));
+const WaykeCompositeWithProvider = ({ provider, composite }) => (React__default.createElement(WaykeProvider, { ...provider },
+    React__default.createElement(WaykeComposite, { ...composite })));
 
 const WaykeItemProvider = ({ url, urlMlt, apiKey, ecomSettings, graphQlUrl, googleMapsApiKey, googleMapsMarker, children, }) => {
     useEcom(ecomSettings);