@wayke-se/components-react 3.4.0 → 3.5.1

package/README.md

@@ -164,7 +164,8 @@ const App = ({}) => {
 | disableResetScrollOnInit | boolean  | false    |                      |
 | placeholderImage         | string   | false    |                      |
 | onClickSearchItem        | function | false    | (id: string) => void |
-| modifyDocumentTitleItem  | boolean  | false    |                      | 
+| modifyDocumentTitleItem  | boolean  | false    |                      |
+| displayBranchName        | boolean  | false    |                      |
 
 * Required
   * `id` - Guid that represents a vehicle.
@@ -175,6 +176,7 @@ const App = ({}) => {
   * `placeholderImage` - Provide custom placeholder image when image is missing.
   * `onClickSearchItem` - Function that can be provided that will be triggered once a item is clicked.
   * `modifyDocumentTitleItem` - Update document title with vehicle data
+  * `displayBranchName` - Displays branch name on related product cards and using branch name in presentation of where the vehicle exist
 
 ### WaykeSearch
 | Property                  | Type                      | Values                    |
@@ -182,23 +184,25 @@ 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                    |                           |
 | onClickSearchItem         | function                  | (id: string) => void      |
 | modifyDocumentTitleSearch | string                    |                           |
+| displayBranchName         | string                    |                           |
 
 * 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.
   * `placeholderImage` - Provide custom placeholder image when image is missing.
   * `onClickSearchItem` - Function that can be provided that will be triggered once a item is clicked.
   * `modifyDocumentTitleSearch` - Set custom document title
+  * `displayBranchName` - Displays branch name on product cards
 
 ## Types
 
@@ -271,7 +275,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;
   }
@@ -803,7 +806,9 @@ const SortOptionDisplayName = {
   PriceAsc: 'price-asc',
   Pricedesc: 'price-desc',
   ModelAsc: 'model-asc',
-  Modeldesc: 'model-desc'
+  Modeldesc: 'model-desc',
+  MileageAsc: 'mileage-asc',
+  Mileagedesc: 'mileage-desc'
 };
 const getTranslatedSortOptionDisplayName = str => {
   switch (str) {
@@ -819,6 +824,10 @@ const getTranslatedSortOptionDisplayName = str => {
       return 'Årsmodell äldst';
     case SortOptionDisplayName.Modeldesc:
       return 'Årsmodell nyast';
+    case SortOptionDisplayName.MileageAsc:
+      return 'Miltal lägst';
+    case SortOptionDisplayName.Mileagedesc:
+      return 'Miltal högst';
     default:
       return str;
   }
@@ -1979,6 +1988,7 @@ const FacetSelector = ({
         unit: "kr",
         formatValues: true
       });
+    case BUSINESS_LEASING_PRICE:
     case LEASING_PRICE:
       return React__default.createElement(RangeFacet, {
         facet: facet,
@@ -2035,6 +2045,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:
@@ -2178,6 +2190,11 @@ const ContentFooter = styled__default.div`
   margin-top: auto;
   padding-top: ${size(1)};
 `;
+const PreHeading = styled__default.div`
+  margin-bottom: ${size(0.25)};
+  color: ${props => props.theme.color.textDarkLighten};
+  font-size: 0.75rem;
+`;
 const Heading$2 = styled__default.h1.attrs(() => ({
   className: 'wayke__theme wayke__font--bold'
 }))`
@@ -2242,7 +2259,7 @@ const OldPrice = styled__default.div`
 `;
 const Label$3 = styled__default.label`
   color: ${props => props.theme.color.disabledText};
-  font-size: 0.875rem;
+  font-size: 0.75rem;
 `;
 
 const Item$5 = styled__default.li`
@@ -2372,11 +2389,13 @@ const ProductCard = ({
   image,
   pathRoute,
   placeholderImage,
+  branchName,
   description,
   uspList,
   price,
   oldPrice,
   leasingPrice,
+  businessLeasingPrice,
   onClick
 }) => {
   const {
@@ -2405,7 +2424,7 @@ const ProductCard = ({
     alt: title
   }))) : React__default.createElement(Picture, null, React__default.createElement(Img, {
     src: placeholderImage || DEFAULT_PLACEHOLDER_IMAGE
-  })))), React__default.createElement(Content, null, React__default.createElement(ContentBody, null, React__default.createElement(Heading$2, null, href ? React__default.createElement(Link, {
+  })))), React__default.createElement(Content, null, React__default.createElement(ContentBody, null, branchName && React__default.createElement(PreHeading, null, branchName), React__default.createElement(Heading$2, null, href ? React__default.createElement(Link, {
     onClick: onHrefClick,
     href: href,
     title: title,
@@ -2413,7 +2432,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 => {
@@ -2429,12 +2448,14 @@ const Grid = ({
   placeholderImage,
   hashRoute,
   pathRoute,
+  displayBranchName,
   onClickItem
 }) => {
   if (!documents) {
     return null;
   }
   return React__default.createElement(Wrapper$7, null, React__default.createElement(List$4, null, documents.map(document => {
+    var _document$branches, _document$branches$;
     /*
     const _path = pathRoute?.replace(/^\/|\/$/g, '');
        const prefix = _path ? `/${_path}/` : '/';
@@ -2463,6 +2484,7 @@ const Grid = ({
       image: resolveImage(document),
       placeholderImage: placeholderImage,
       description: document.shortDescription,
+      branchName: displayBranchName ? (_document$branches = document.branches) === null || _document$branches === void 0 ? void 0 : (_document$branches$ = _document$branches[0]) === null || _document$branches$ === void 0 ? void 0 : _document$branches$.name : undefined,
       uspList: [{
         title: document.modelYear
       }, {
@@ -2473,8 +2495,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
     }));
   })));
 };
@@ -2914,6 +2937,7 @@ const WaykeSearch = ({
   placeholderImage,
   removeFilterOptions,
   modifyDocumentTitleSearch,
+  displayBranchName,
   onClickSearchItem
 }) => {
   const {
@@ -2958,7 +2982,8 @@ const WaykeSearch = ({
     pathRoute: pathRoute,
     onClickItem: onItemClicked,
     documents: documents,
-    placeholderImage: placeholderImage
+    placeholderImage: placeholderImage,
+    displayBranchName: displayBranchName
   }), !error && documents && documents.length === 0 && React__default.createElement(Snackbar, {
     severity: "warning",
     icon: true,
@@ -6278,8 +6303,6 @@ const ManufacturerPackageOption = ({
   })));
 };
 
-const initialValue = {};
-const getInitialValue = title => title && !!initialValue[title];
 const ToggleItem = ({
   title,
   value,
@@ -6287,7 +6310,7 @@ const ToggleItem = ({
   onClickVisible,
   onClickValue
 }) => {
-  const [visible, setVisible] = React.useState(() => getInitialValue(type));
+  const [visible, setVisible] = React.useState(false);
   const _onClickValue = React.useCallback(() => {
     if (onClickValue) {
       onClickValue();
@@ -6295,7 +6318,6 @@ const ToggleItem = ({
   }, []);
   const onClick = React.useCallback(() => {
     if (!visible) {
-      initialValue[type] = true;
       setVisible(true);
       if (onClickVisible) {
         onClickVisible();
@@ -6816,7 +6838,7 @@ const RelatedSearchContext = React.createContext({
   fetchRelated: _ => {}
 });
 
-const useRelatedSearch = id => {
+const useRelatedSearch = (id, authorizedReseller) => {
   const data = React.useContext(RelatedSearchContext);
   React.useEffect(() => {
     const searchParams = new URLSearchParams();
@@ -6824,6 +6846,9 @@ const useRelatedSearch = id => {
     if (data.moreLikeThisUrl && id) {
       searchParams.set('id', id);
     }
+    if (authorizedReseller) {
+      searchParams.set('isAuthorizedResellerForManufacturer', 'true');
+    }
     data.fetchRelated(searchParams);
   }, [id]);
   return data;
@@ -6843,13 +6868,15 @@ const Related = ({
   id,
   hashRoute,
   pathRoute,
+  authorizedReseller,
+  displayBranchName,
   onClickSearchItem
 }) => {
   const {
     loading,
     response,
     moreLikeThisUrl
-  } = useRelatedSearch(id);
+  } = useRelatedSearch(id, !!authorizedReseller);
   const onItemClicked = React.useCallback(id => {
     PubSub.publish('ItemClicked', id);
     if (onClickSearchItem) {
@@ -6876,7 +6903,7 @@ const Related = ({
   }, React__default.createElement(H2, {
     noMargin: true
   }, "Senast inkomna"))), React__default.createElement(Repeat, null, React__default.createElement(OverflowGrid, null, React__default.createElement(OverflowGridList, null, response === null || response === void 0 ? void 0 : response.documentList.documents.map(document => {
-    var _document$featuredIma, _document$featuredIma2, _document$featuredIma3;
+    var _document$featuredIma, _document$featuredIma2, _document$featuredIma3, _document$branches, _document$branches$;
     const prefix = pathRoute ? `/${pathRoute}` : '/';
     const r = regexPathGuid();
     const pathRouteUrl = window.location.pathname === '/' ? `${prefix}${document._id}` : r.test(`${pathRoute}${id}`) ? window.location.pathname.replace(r, document._id) : `${window.location.pathname}${prefix}${document._id}`;
@@ -6889,6 +6916,7 @@ const Related = ({
       href: pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined,
       image: (_document$featuredIma = document.featuredImage) === null || _document$featuredIma === void 0 ? void 0 : (_document$featuredIma2 = _document$featuredIma.files) === null || _document$featuredIma2 === void 0 ? void 0 : (_document$featuredIma3 = _document$featuredIma2[0]) === null || _document$featuredIma3 === void 0 ? void 0 : _document$featuredIma3.url,
       description: document.shortDescription,
+      branchName: displayBranchName ? (_document$branches = document.branches) === null || _document$branches === void 0 ? void 0 : (_document$branches$ = _document$branches[0]) === null || _document$branches$ === void 0 ? void 0 : _document$branches$.name : undefined,
       uspList: [{
         title: document.modelYear
       }, {
@@ -6900,6 +6928,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
     }));
   }))))));
@@ -7140,7 +7170,8 @@ const StaticMap = ({
 
 const Branch = ({
   branch,
-  loading
+  loading,
+  displayBranchName
 }) => {
   var _branch$location, _branch$location2, _branch$location3, _branch$connections, _branch$location4, _branch$location5, _branch$location6, _branch$location7, _branch$contact;
   const [modal, setModal] = React.useState(false);
@@ -7160,7 +7191,7 @@ const Branch = ({
     onClose: closeModal
   }), React__default.createElement(Repeat, null, React__default.createElement(H2, {
     noMargin: true
-  }, branch !== null && branch !== void 0 && (_branch$location = branch.location) !== null && _branch$location !== void 0 && _branch$location.city ? `Den här bilen finns på vår anläggning i ${branch === null || branch === void 0 ? void 0 : (_branch$location2 = branch.location) === null || _branch$location2 === void 0 ? void 0 : _branch$location2.city}` : 'Kontakt')), React__default.createElement(Repeat, null, React__default.createElement(StaticMap, {
+  }, displayBranchName ? `Den här bilen finns på ${branch.name}` : branch !== null && branch !== void 0 && (_branch$location = branch.location) !== null && _branch$location !== void 0 && _branch$location.city ? `Den här bilen finns på vår anläggning i ${branch === null || branch === void 0 ? void 0 : (_branch$location2 = branch.location) === null || _branch$location2 === void 0 ? void 0 : _branch$location2.city}` : 'Kontakt')), React__default.createElement(Repeat, null, React__default.createElement(StaticMap, {
     position: branch === null || branch === void 0 ? void 0 : (_branch$location3 = branch.location) === null || _branch$location3 === void 0 ? void 0 : _branch$location3.position
   })), ((branch === null || branch === void 0 ? void 0 : (_branch$connections = branch.connections) === null || _branch$connections === void 0 ? void 0 : _branch$connections.length) || 0) > 1 && React__default.createElement(Repeat, null, React__default.createElement(Content$2, null, React__default.createElement("p", null, "Denna bil tillh\u00F6r ett centrallager och g\u00E5r att k\u00F6pa genom flera anl\u00E4ggningar.", ' ', React__default.createElement(ButtonInline, {
     as: "span",
@@ -7218,6 +7249,7 @@ const SEARCH_ITEM_BRANCH_QUERY = client.gql`
           mrf
           centralStorage
           ecommerce
+          authorizedReseller
         }
         logotype
         openingHours {
@@ -7612,6 +7644,8 @@ const HINTS = Object.freeze({
   finish: '',
   fuelConsumptionCityDriving: 'Bränsleförbrukning vid stadskörning.',
   fuelConsumptionCountryRoadDriving: 'Bränsleförbrukning vid landsvägskörning.',
+  fuelConsumptionMixedDrivingNEDC: 'Bränsleförbrukning vid blandad körning.',
+  fuelConsumptionMixedDrivingWLTP: 'Bränsleförbrukning vid blandad körning.',
   fuelConsumptionMixedDriving: 'Bränsleförbrukning vid blandad körning. Dvs. stadskörning och landsvägskörning under en och samma färd.',
   fuelType: 'Vad bilen ska tankas med och drivs av.',
   gearboxName: '',
@@ -8183,9 +8217,10 @@ const WaykeSearchItem = ({
   disableResetScrollOnInit,
   placeholderImage,
   modifyDocumentTitleItem,
+  displayBranchName,
   onClickSearchItem
 }) => {
-  var _result$vehicle3, _result$vehicle3$data, _result$vehicle4;
+  var _result$vehicle3, _result$vehicle3$data, _result$vehicle4, _branch$flags;
   const {
     ecomSettings
   } = useSettings();
@@ -8375,6 +8410,7 @@ const WaykeSearchItem = ({
     documents: documents
   }), React__default.createElement(ProductPageMainSection, null, React__default.createElement(Branch, {
     branch: branch,
+    displayBranchName: displayBranchName,
     loading: loadingCentralStorageVehicle
   }), ecommerce && ecommerce.enabled && React__default.createElement(Repeat, null, React__default.createElement(ButtonPrimary, {
     disabled: !!ecommerce.reserved,
@@ -8391,8 +8427,10 @@ const WaykeSearchItem = ({
     id: id,
     hashRoute: hashRoute,
     pathRoute: pathRoute,
+    authorizedReseller: !!(branch !== null && branch !== void 0 && (_branch$flags = branch.flags) !== null && _branch$flags !== void 0 && _branch$flags.authorizedReseller),
+    displayBranchName: displayBranchName,
     onClickSearchItem: onClickSearchItem
-  })), false , React__default.createElement(PortalElement, {
+  })), React__default.createElement(PortalElement, {
     id: DefaultPortal
   }), demoCarModal && React__default.createElement(DemoCarModal, {
     onClose: onToggleDemoCarModal
@@ -8857,7 +8895,8 @@ const WaykeComposite = ({
   placeholderImage,
   pathRoute,
   modifyDocumentTitleItem,
-  modifyDocumentTitleSearch
+  modifyDocumentTitleSearch,
+  displayBranchName
 }) => {
   const hashId = useHashGuid();
   const {
@@ -8879,7 +8918,8 @@ const WaykeComposite = ({
     disableResetScrollOnInit: disableResetScrollOnInit,
     placeholderImage: placeholderImage,
     pathRoute: pathRoute,
-    modifyDocumentTitleItem: modifyDocumentTitleItem
+    modifyDocumentTitleItem: modifyDocumentTitleItem,
+    displayBranchName: displayBranchName
   }) : React__default.createElement(WaykeSearch, {
     filterList: filterList,
     initialQueryParams: initialQueryParams,
@@ -8888,7 +8928,8 @@ const WaykeComposite = ({
     placeholderImage: placeholderImage,
     pathRoute: pathRoute,
     removeFilterOptions: removeFilterOptions,
-    modifyDocumentTitleSearch: modifyDocumentTitleSearch
+    modifyDocumentTitleSearch: modifyDocumentTitleSearch,
+    displayBranchName: displayBranchName
   }));
 };