@wayke-se/components-react 3.4.0 → 3.5.1

package/dist-web/index.js

@@ -476,6 +476,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' };
 const COLOR_BLACK = { displayName: 'Svart', hex: '#000000' };
 const COLOR_GRAY = { displayName: 'Grå', hex: '#808080' };
@@ -532,6 +533,8 @@ const FacetIdToTitle = (f) => {
             return 'Modellår';
         case LEASING_PRICE:
             return 'Privatleasing';
+        case BUSINESS_LEASING_PRICE:
+            return 'Företagsleasing';
         default:
             return f;
     }
@@ -662,6 +665,8 @@ const SortOptionDisplayName = {
     Pricedesc: 'price-desc',
     ModelAsc: 'model-asc',
     Modeldesc: 'model-desc',
+    MileageAsc: 'mileage-asc',
+    Mileagedesc: 'mileage-desc',
 };
 const getTranslatedSortOptionDisplayName = (str) => {
     switch (str) {
@@ -677,6 +682,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;
     }
@@ -1609,6 +1618,7 @@ const FacetSelector = ({ facet }) => {
             return React__default.createElement(ColorSelectFacet, { facet: facet });
         case PRICE:
             return React__default.createElement(RangeFacet, { facet: facet, unit: "kr", formatValues: true });
+        case BUSINESS_LEASING_PRICE:
         case LEASING_PRICE:
             return React__default.createElement(RangeFacet, { facet: facet, unit: "kr/m\u00E5n", formatValues: true });
         case MILEAGE:
@@ -1641,6 +1651,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:
@@ -1779,6 +1791,11 @@ const ContentFooter = styled.div `
   margin-top: auto;
   padding-top: ${size(1)};
 `;
+const PreHeading = styled.div `
+  margin-bottom: ${size(0.25)};
+  color: ${(props) => props.theme.color.textDarkLighten};
+  font-size: 0.75rem;
+`;
 const Heading$2 = styled.h1.attrs(() => ({
     className: 'wayke__theme wayke__font--bold',
 })) `
@@ -1843,7 +1860,7 @@ const OldPrice = styled.div `
 `;
 const Label$3 = styled.label `
   color: ${(props) => props.theme.color.disabledText};
-  font-size: 0.875rem;
+  font-size: 0.75rem;
 `;
 
 const Item$5 = styled.li `
@@ -1954,7 +1971,7 @@ const usePath = () => {
     return context;
 };
 
-const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, description, uspList, price, oldPrice, leasingPrice, onClick, }) => {
+const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, branchName, description, uspList, price, oldPrice, leasingPrice, businessLeasingPrice, onClick, }) => {
     const { pushState } = usePath();
     const _onClick = useMemo(() => (onClick ? () => onClick(id) : undefined), [id]);
     const onHrefClick = useCallback((e) => {
@@ -1975,6 +1992,7 @@ const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, desc
                 React__default.createElement(Img, { src: placeholderImage || DEFAULT_PLACEHOLDER_IMAGE }))))),
         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, "aria-label": title }, title)) : (title)),
                 description && React__default.createElement(Description$1, null, description),
                 uspList && (React__default.createElement(Usp, null,
@@ -1985,8 +2003,11 @@ const ProductCard = ({ id, title, href, image, pathRoute, placeholderImage, desc
                         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(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) => {
@@ -1996,7 +2017,7 @@ const resolveImage = (document) => {
     }
     return undefined;
 };
-const Grid = ({ documents, placeholderImage, hashRoute, pathRoute, onClickItem }) => {
+const Grid = ({ documents, placeholderImage, hashRoute, pathRoute, displayBranchName, onClickItem, }) => {
     if (!documents) {
         return null;
     }
@@ -2023,7 +2044,7 @@ const Grid = ({ documents, placeholderImage, hashRoute, pathRoute, onClickItem }
             */
             const _pathRoute = pathRoute ? `${pathRoute}/${document._id}` : undefined;
             return (React__default.createElement(Item$4, { key: document._id },
-                React__default.createElement(ProductCard, { id: document._id, onClick: onClickItem, title: document.title, pathRoute: pathRoute, href: _pathRoute ? _pathRoute : hashRoute ? `#${document._id}` : undefined, image: resolveImage(document), placeholderImage: placeholderImage, description: document.shortDescription, uspList: [
+                React__default.createElement(ProductCard, { id: document._id, onClick: onClickItem, title: document.title, pathRoute: pathRoute, href: _pathRoute ? _pathRoute : hashRoute ? `#${document._id}` : undefined, image: resolveImage(document), placeholderImage: placeholderImage, description: document.shortDescription, branchName: displayBranchName ? document.branches?.[0]?.name : undefined, uspList: [
                         {
                             title: document.modelYear,
                         },
@@ -2036,10 +2057,12 @@ const Grid = ({ documents, placeholderImage, hashRoute, pathRoute, onClickItem }
                         {
                             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
+                    ], 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 })));
         }))));
 };
@@ -2421,7 +2444,7 @@ PubSub.publish = (eventName, ...args) => {
     }
 };
 
-const WaykeSearch = ({ filterList, initialQueryParams, hashRoute, pathRoute, removeSearchBar, placeholderImage, removeFilterOptions, modifyDocumentTitleSearch, onClickSearchItem, }) => {
+const WaykeSearch = ({ filterList, initialQueryParams, hashRoute, pathRoute, removeSearchBar, placeholderImage, removeFilterOptions, modifyDocumentTitleSearch, displayBranchName, onClickSearchItem, }) => {
     const { error, documents, queryFilter, onFilterUpdate, onInitialize } = useSearch();
     useEffect(() => {
         if (modifyDocumentTitleSearch) {
@@ -2459,7 +2482,7 @@ const WaykeSearch = ({ filterList, initialQueryParams, hashRoute, pathRoute, rem
                     React__default.createElement(Result, null,
                         React__default.createElement(React__default.Fragment, null,
                             error && (React__default.createElement(Snackbar, { severity: "error", icon: true, heading: "Ett fel har intr\u00E4ffat" }, "V\u00E4nligen f\u00F6rs\u00F6k igen.")),
-                            !error && documents && documents.length > 0 && (React__default.createElement(Grid, { hashRoute: hashRoute, pathRoute: pathRoute, onClickItem: onItemClicked, documents: documents, placeholderImage: placeholderImage })),
+                            !error && documents && documents.length > 0 && (React__default.createElement(Grid, { hashRoute: hashRoute, pathRoute: pathRoute, onClickItem: onItemClicked, documents: documents, placeholderImage: placeholderImage, displayBranchName: displayBranchName })),
                             !error && documents && documents.length === 0 && (React__default.createElement(Snackbar, { severity: "warning", icon: true, heading: "Inga resultat" }, "Det finns inga resultat som matchar din s\u00F6kning."))))))),
         React__default.createElement(PortalElement, { id: DefaultPortal })));
 };
@@ -5332,10 +5355,8 @@ const ManufacturerPackageOption = ({ packageOption }) => {
             React__default.createElement(LogoBox, { logo: packageOption.image, alt: "Logotyp", wide: true })))));
 };
 
-const initialValue = {};
-const getInitialValue = (title) => title && !!initialValue[title];
 const ToggleItem = ({ title, value, type, onClickVisible, onClickValue }) => {
-    const [visible, setVisible] = useState(() => getInitialValue(type));
+    const [visible, setVisible] = useState(false);
     const _onClickValue = useCallback(() => {
         if (onClickValue) {
             onClickValue();
@@ -5343,7 +5364,6 @@ const ToggleItem = ({ title, value, type, onClickVisible, onClickValue }) => {
     }, []);
     const onClick = useCallback(() => {
         if (!visible) {
-            initialValue[type] = true;
             setVisible(true);
             if (onClickVisible) {
                 onClickVisible();
@@ -5877,7 +5897,7 @@ const RelatedSearchContext = createContext({
     fetchRelated: (_) => { },
 });
 
-const useRelatedSearch = (id) => {
+const useRelatedSearch = (id, authorizedReseller) => {
     const data = useContext(RelatedSearchContext);
     useEffect(() => {
         const searchParams = new URLSearchParams();
@@ -5885,6 +5905,9 @@ const useRelatedSearch = (id) => {
         if (data.moreLikeThisUrl && id) {
             searchParams.set('id', id);
         }
+        if (authorizedReseller) {
+            searchParams.set('isAuthorizedResellerForManufacturer', 'true');
+        }
         data.fetchRelated(searchParams);
     }, [id]);
     return data;
@@ -5900,8 +5923,8 @@ const regexPathGuid = (path) => {
     return r;
 };
 
-const Related = ({ id, hashRoute, pathRoute, onClickSearchItem }) => {
-    const { loading, response, moreLikeThisUrl } = useRelatedSearch(id);
+const Related = ({ id, hashRoute, pathRoute, authorizedReseller, displayBranchName, onClickSearchItem, }) => {
+    const { loading, response, moreLikeThisUrl } = useRelatedSearch(id, !!authorizedReseller);
     const onItemClicked = useCallback((id) => {
         PubSub.publish('ItemClicked', id);
         if (onClickSearchItem) {
@@ -5932,7 +5955,7 @@ const Related = ({ id, hashRoute, pathRoute, onClickSearchItem }) => {
                                 ? window.location.pathname.replace(r, document._id)
                                 : `${window.location.pathname}${prefix}${document._id}`;
                         return (React__default.createElement(OverflowGridItem, { key: document._id },
-                            React__default.createElement(ProductCard, { id: document._id, onClick: onItemClicked, title: document.title, href: pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined, image: document.featuredImage?.files?.[0]?.url, description: document.shortDescription, uspList: [
+                            React__default.createElement(ProductCard, { id: document._id, onClick: onItemClicked, title: document.title, href: pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined, image: document.featuredImage?.files?.[0]?.url, description: document.shortDescription, branchName: displayBranchName ? document.branches?.[0]?.name : undefined, uspList: [
                                     {
                                         title: document.modelYear,
                                     },
@@ -5947,6 +5970,10 @@ const Related = ({ id, hashRoute, pathRoute, onClickSearchItem }) => {
                                     },
                                 ], 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 })));
                     })))))));
 };
@@ -6159,7 +6186,7 @@ const StaticMap = ({ position }) => {
                 React__default.createElement(ButtonContent, null, "Visa karta")))));
 };
 
-const Branch = ({ branch, loading }) => {
+const Branch = ({ branch, loading, displayBranchName }) => {
     const [modal, setModal] = useState(false);
     const openModal = useCallback(() => setModal(true), []);
     const closeModal = useCallback(() => setModal(false), []);
@@ -6174,9 +6201,11 @@ const Branch = ({ branch, loading }) => {
     return (React__default.createElement(React__default.Fragment, null,
         modal && (React__default.createElement(BranchModal, { loading: loading, connections: branch?.connections, onClose: closeModal })),
         React__default.createElement(Repeat, null,
-            React__default.createElement(H2, { noMargin: true }, branch?.location?.city
-                ? `Den här bilen finns på vår anläggning i ${branch?.location?.city}`
-                : 'Kontakt')),
+            React__default.createElement(H2, { noMargin: true }, displayBranchName
+                ? `Den här bilen finns på ${branch.name}`
+                : branch?.location?.city
+                    ? `Den här bilen finns på vår anläggning i ${branch?.location?.city}`
+                    : 'Kontakt')),
         React__default.createElement(Repeat, null,
             React__default.createElement(StaticMap, { position: branch?.location?.position })),
         (branch?.connections?.length || 0) > 1 && (React__default.createElement(Repeat, null,
@@ -6244,6 +6273,7 @@ const SEARCH_ITEM_BRANCH_QUERY = gql `
           mrf
           centralStorage
           ecommerce
+          authorizedReseller
         }
         logotype
         openingHours {
@@ -6643,6 +6673,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: '',
@@ -7210,7 +7242,7 @@ const Documents = ({ documents }) => {
             React__default.createElement(DocumentList, { documents: group.documents }))))));
 };
 
-const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, placeholderImage, modifyDocumentTitleItem, onClickSearchItem, }) => {
+const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, placeholderImage, modifyDocumentTitleItem, displayBranchName, onClickSearchItem, }) => {
     const { ecomSettings } = useSettings();
     const ecomContext = useRef();
     const { loading, data: result } = useSearchItem(id);
@@ -7343,13 +7375,12 @@ const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, p
                                         React__default.createElement(UspList, { items: options }))))),
                             React__default.createElement(Documents, { documents: documents }),
                             React__default.createElement(ProductPageMainSection, null,
-                                React__default.createElement(Branch, { branch: branch, loading: loadingCentralStorageVehicle }),
+                                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, title: "K\u00F6p bilen online", onClick: () => ecomContext.current?.start() }, "K\u00F6p bilen online")))),
                             React__default.createElement(PackageOptions, { packageOptions: packageOptions }),
                             React__default.createElement(ManufacturerPackageOption, { packageOption: manufacturer?.packageOption }))))),
-            React__default.createElement(Related, { id: id, hashRoute: hashRoute, pathRoute: pathRoute, onClickSearchItem: onClickSearchItem })),
-        false ,
+            React__default.createElement(Related, { id: id, hashRoute: hashRoute, pathRoute: pathRoute, authorizedReseller: !!branch?.flags?.authorizedReseller, displayBranchName: displayBranchName, onClickSearchItem: onClickSearchItem })),
         React__default.createElement(PortalElement, { id: DefaultPortal }),
         demoCarModal && React__default.createElement(DemoCarModal, { onClose: onToggleDemoCarModal })));
 };
@@ -7712,7 +7743,7 @@ const useHashGuid = () => {
     return id;
 };
 
-const WaykeComposite = ({ filterList, initialQueryParams, removeSearchBar, removeFilterOptions, disableResetScrollOnInit, placeholderImage, pathRoute, modifyDocumentTitleItem, modifyDocumentTitleSearch, }) => {
+const WaykeComposite = ({ filterList, initialQueryParams, removeSearchBar, removeFilterOptions, disableResetScrollOnInit, placeholderImage, pathRoute, modifyDocumentTitleItem, modifyDocumentTitleSearch, displayBranchName, }) => {
     const hashId = useHashGuid();
     const { id: pathId } = usePath();
     useEffect(() => {
@@ -7726,7 +7757,7 @@ const WaykeComposite = ({ filterList, initialQueryParams, removeSearchBar, remov
         }
     }, [hashId]);
     const id = pathId || hashId;
-    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 }))));
+    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, displayBranchName: displayBranchName })) : (React__default.createElement(WaykeSearch, { filterList: filterList, initialQueryParams: initialQueryParams, removeSearchBar: removeSearchBar, hashRoute: !pathRoute, placeholderImage: placeholderImage, pathRoute: pathRoute, removeFilterOptions: removeFilterOptions, modifyDocumentTitleSearch: modifyDocumentTitleSearch, displayBranchName: displayBranchName }))));
 };
 
 const WaykeCompositeWithProvider = ({ provider, composite }) => (React__default.createElement(WaykeProvider, { ...provider },