@wayke-se/components-react 3.5.0 → 3.5.2

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;
   }
@@ -889,6 +895,7 @@ function _objectSpread2(target) {
   return target;
 }
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -901,6 +908,20 @@ function _defineProperty(obj, key, value) {
   }
   return obj;
 }
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 
 const List = styled__default.ul`
   display: flex;
@@ -2184,6 +2205,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 +2274,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 +2404,7 @@ const ProductCard = ({
   image,
   pathRoute,
   placeholderImage,
+  branchName,
   description,
   uspList,
   price,
@@ -2412,7 +2439,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 +2463,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 +2499,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 +2952,7 @@ const WaykeSearch = ({
   placeholderImage,
   removeFilterOptions,
   modifyDocumentTitleSearch,
+  displayBranchName,
   onClickSearchItem
 }) => {
   const {
@@ -2966,7 +2997,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,
@@ -5212,14 +5244,17 @@ const Leasing = ({
     description,
     monthlyCost,
     duration,
-    mileage
+    mileage,
+    type,
+    name
   } = financialOption;
+  const title = type === 'leasing' ? 'Privatleasa' : type === 'business-leasing' ? 'Företagsleasa' : type;
   return React__default.createElement(React__default.Fragment, null, modal && React__default.createElement(Modal, {
-    title: "Privatleasing",
+    title: title,
     onClose: toggleModal
   }, image && React__default.createElement(Image$2, {
     src: image,
-    alt: "Privatleasing"
+    alt: title
   }), description && React__default.createElement(Content$2, {
     dangerouslySetInnerHTML: {
       __html: description
@@ -5235,7 +5270,7 @@ const Leasing = ({
       label: 'Årlig körsträcka',
       value: `${numberSeparator((mileage === null || mileage === void 0 ? void 0 : mileage.current) || 0)} mil/år`
     }]
-  })))), React__default.createElement(OptionBox, null, React__default.createElement(React__default.Fragment, null, monthlyCost !== null && monthlyCost !== undefined && React__default.createElement(OptionBoxHeading, null, `ca ${numberSeparator(monthlyCost)} kr/mån`)), React__default.createElement(OptionBoxContent, null, React__default.createElement("p", null, "Privatleasing", ' ', (mileage === null || mileage === void 0 ? void 0 : mileage.current) && (duration === null || duration === void 0 ? void 0 : duration.current) && React__default.createElement(React__default.Fragment, null, React__default.createElement(UtilityTextPrimary, null, numberSeparator(mileage === null || mileage === void 0 ? void 0 : mileage.current), " mil/\u00E5r"), ' ', "i ", React__default.createElement(UtilityTextPrimary, null, duration === null || duration === void 0 ? void 0 : duration.current, " m\u00E5n"), ".", ' ')), React__default.createElement("p", null, React__default.createElement(ButtonInline, {
+  })))), React__default.createElement(OptionBox, null, React__default.createElement(React__default.Fragment, null, monthlyCost !== null && monthlyCost !== undefined && React__default.createElement(OptionBoxHeading, null, `ca ${numberSeparator(monthlyCost)} kr/mån`)), React__default.createElement(OptionBoxContent, null, React__default.createElement("p", null, title, ' ', (mileage === null || mileage === void 0 ? void 0 : mileage.current) && (duration === null || duration === void 0 ? void 0 : duration.current) && React__default.createElement(React__default.Fragment, null, React__default.createElement(UtilityTextPrimary, null, numberSeparator(mileage === null || mileage === void 0 ? void 0 : mileage.current), " mil/\u00E5r"), ' ', "i ", React__default.createElement(UtilityTextPrimary, null, duration === null || duration === void 0 ? void 0 : duration.current, " m\u00E5n"), ".", ' ')), name && React__default.createElement("p", null, React__default.createElement(ButtonInline, {
     onClick: toggleModal
   }, "L\u00E4s mer")))));
 };
@@ -5610,7 +5645,7 @@ const FinancialOptions = ({
   financialOptions
 }) => React__default.createElement(Repeat, null, React__default.createElement(RepeatTiny, null, React__default.createElement(VisualHeading, null, "Andra finansieringsalternativ")), React__default.createElement(RepeatTiny, null, financialOptions.map((financialOption, index) => React__default.createElement(React.Fragment, {
   key: index
-}, financialOption.type === 'leasing' && React__default.createElement(Leasing, {
+}, (financialOption.type === 'leasing' || financialOption.type === 'business-leasing') && React__default.createElement(Leasing, {
   financialOption: financialOption
 }), financialOption.type === 'loan' && React__default.createElement(Loan, {
   id: id,
@@ -6286,8 +6321,6 @@ const ManufacturerPackageOption = ({
   })));
 };
 
-const initialValue = {};
-const getInitialValue = title => title && !!initialValue[title];
 const ToggleItem = ({
   title,
   value,
@@ -6295,7 +6328,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 +6336,6 @@ const ToggleItem = ({
   }, []);
   const onClick = React.useCallback(() => {
     if (!visible) {
-      initialValue[type] = true;
       setVisible(true);
       if (onClickVisible) {
         onClickVisible();
@@ -6824,7 +6856,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 +6864,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 +6886,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 +6921,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 +6934,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 +7188,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 +7209,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 +7267,7 @@ const SEARCH_ITEM_BRANCH_QUERY = client.gql`
           mrf
           centralStorage
           ecommerce
+          authorizedReseller
         }
         logotype
         openingHours {
@@ -7622,6 +7662,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 +8235,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 +8428,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 +8445,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 +8913,8 @@ const WaykeComposite = ({
   placeholderImage,
   pathRoute,
   modifyDocumentTitleItem,
-  modifyDocumentTitleSearch
+  modifyDocumentTitleSearch,
+  displayBranchName
 }) => {
   const hashId = useHashGuid();
   const {
@@ -8889,7 +8936,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 +8946,8 @@ const WaykeComposite = ({
     placeholderImage: placeholderImage,
     pathRoute: pathRoute,
     removeFilterOptions: removeFilterOptions,
-    modifyDocumentTitleSearch: modifyDocumentTitleSearch
+    modifyDocumentTitleSearch: modifyDocumentTitleSearch,
+    displayBranchName: displayBranchName
   }));
 };