@wayke-se/components-react 3.5.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                    |
@@ -188,6 +190,7 @@ const App = ({}) => {
 | 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.
@@ -199,6 +202,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.
   * `modifyDocumentTitleSearch` - Set custom document title
+  * `displayBranchName` - Displays branch name on product cards
 
 ## Types
 

package/dist-node/index.js

@@ -806,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) {
@@ -822,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;
   }
@@ -2184,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'
 }))`
@@ -2248,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`
@@ -2378,6 +2389,7 @@ const ProductCard = ({
   image,
   pathRoute,
   placeholderImage,
+  branchName,
   description,
   uspList,
   price,
@@ -2412,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,
@@ -2436,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}/` : '/';
@@ -2470,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
       }, {
@@ -2922,6 +2937,7 @@ const WaykeSearch = ({
   placeholderImage,
   removeFilterOptions,
   modifyDocumentTitleSearch,
+  displayBranchName,
   onClickSearchItem
 }) => {
   const {
@@ -2966,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,
@@ -6286,8 +6303,6 @@ const ManufacturerPackageOption = ({
   })));
 };
 
-const initialValue = {};
-const getInitialValue = title => title && !!initialValue[title];
 const ToggleItem = ({
   title,
   value,
@@ -6295,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();
@@ -6303,7 +6318,6 @@ const ToggleItem = ({
   }, []);
   const onClick = React.useCallback(() => {
     if (!visible) {
-      initialValue[type] = true;
       setVisible(true);
       if (onClickVisible) {
         onClickVisible();
@@ -6824,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();
@@ -6832,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;
@@ -6851,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) {
@@ -6884,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}`;
@@ -6897,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
       }, {
@@ -7150,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);
@@ -7170,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",
@@ -7228,6 +7249,7 @@ const SEARCH_ITEM_BRANCH_QUERY = client.gql`
           mrf
           centralStorage
           ecommerce
+          authorizedReseller
         }
         logotype
         openingHours {
@@ -7622,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: '',
@@ -8193,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();
@@ -8385,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,
@@ -8401,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
@@ -8867,7 +8895,8 @@ const WaykeComposite = ({
   placeholderImage,
   pathRoute,
   modifyDocumentTitleItem,
-  modifyDocumentTitleSearch
+  modifyDocumentTitleSearch,
+  displayBranchName
 }) => {
   const hashId = useHashGuid();
   const {
@@ -8889,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,
@@ -8898,7 +8928,8 @@ const WaykeComposite = ({
     placeholderImage: placeholderImage,
     pathRoute: pathRoute,
     removeFilterOptions: removeFilterOptions,
-    modifyDocumentTitleSearch: modifyDocumentTitleSearch
+    modifyDocumentTitleSearch: modifyDocumentTitleSearch,
+    displayBranchName: displayBranchName
   }));
 };