@wayke-se/components-react 3.0.0-beta.6 → 3.0.0-beta.8

package/dist-src/layouts/searchItem/Related.js

@@ -0,0 +1,65 @@
+import React, { useCallback } from 'react';
+import Container from '../../components/Container/index';
+import { Repeat } from '../../components/Repeat/index';
+import { PageSection } from '../../components/Page/index';
+import SectionHeader from '../../components/SectionHeader/index';
+import { OverflowGridList, OverflowGrid, OverflowGridItem, } from '../../components/OverflowGrid/index';
+import ProductCard from '../../components/ProductCard/index';
+import { H2 } from '../../components/Heading/index';
+import useRelatedSearch from '../../State/RelatedSearch/useRelatedSearch';
+import Loader from '../../components/Loader/index';
+import { numberSeparator } from '../../utils/formats';
+import PubSub from '../../utils/pubsub/pubsub';
+import { regexPathGuid } from '../../utils/regex';
+const Related = ({ id, hashRoute, pathRoute, onClickSearchItem }) => {
+    const { loading, response, moreLikeThisUrl } = useRelatedSearch(id);
+    const onItemClicked = useCallback((id) => {
+        PubSub.publish('ItemClicked', id);
+        if (onClickSearchItem) {
+            onClickSearchItem(id);
+        }
+    }, []);
+    if (!(response === null || response === void 0 ? void 0 : response.documentList.documents.length) || (response === null || response === void 0 ? void 0 : response.documentList.documents.length) === 0) {
+        return null;
+    }
+    if (loading) {
+        return React.createElement(Loader, null);
+    }
+    return (React.createElement(PageSection, { accent: true, large: true, className: "wayke__theme wayke__color--accent-bg" },
+        React.createElement(Container, null,
+            moreLikeThisUrl ? (React.createElement(Repeat, null,
+                React.createElement(SectionHeader, { onClick: () => { } },
+                    React.createElement(H2, { noMargin: true }, "Relaterade fordon")))) : (React.createElement(Repeat, null,
+                React.createElement(SectionHeader, { onClick: () => { }, actionTitle: "Visa alla" },
+                    React.createElement(H2, { noMargin: true }, "Senast inkomna")))),
+            React.createElement(Repeat, null,
+                React.createElement(OverflowGrid, null,
+                    React.createElement(OverflowGridList, null, response === null || response === void 0 ? void 0 : response.documentList.documents.map((document) => {
+                        var _a, _b, _c;
+                        const prefix = pathRoute ? `/${pathRoute}` : '/';
+                        const r = regexPathGuid(pathRoute);
+                        const pathRouteUrl = window.location.pathname === '/'
+                            ? `${prefix}${document._id}`
+                            : r.test(`${pathRoute}${id}`)
+                                ? window.location.pathname.replace(r, `${pathRoute}${document._id}`)
+                                : `${window.location.pathname}${prefix}${document._id}`;
+                        return (React.createElement(OverflowGridItem, { key: document._id },
+                            React.createElement(ProductCard, { id: document._id, onClick: onItemClicked, title: document.title, href: pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined, image: (_c = (_b = (_a = document.featuredImage) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.url, description: document.shortDescription, uspList: [
+                                    {
+                                        title: document.modelYear,
+                                    },
+                                    {
+                                        title: `${numberSeparator(document.mileage)} mil`,
+                                    },
+                                    {
+                                        title: document.gearboxType,
+                                    },
+                                    {
+                                        title: document.fuelType,
+                                    },
+                                ], price: `${numberSeparator(document.price)} kr`, oldPrice: document.oldPrice !== undefined && document.price < document.oldPrice
+                                    ? `${numberSeparator(document.oldPrice)} kr`
+                                    : undefined, pathRoute: pathRoute })));
+                    })))))));
+};
+export default Related;

package/dist-src/layouts/searchItem/index.js

@@ -0,0 +1,183 @@
+import React, { useMemo, useRef, useCallback, useEffect } from 'react';
+import WaykeEcomWeb from '@wayke-se/ecom-web';
+import Container from '../../components/Container/index';
+import UspList from '../../components/UspList/index';
+import { Repeat, RepeatSmall } from '../../components/Repeat/index';
+import PriceTable from '../../components/PriceTable/index';
+import LogoBox from '../../components/LogoBox/index';
+import Content from '../../components/Content/index';
+import Blockquote from '../../components/Blockquote/index';
+import ExtendContent from '../../components/ExtendContent/index';
+import Gallery from '../../components/Gallery/index';
+import { Page, PageSection } from '../../components/Page/index';
+import { ProductPage, ProductPageMainSection, ProductPageAside, ProductPageMain, ProductPageAsideSection, } from '../../components/ProductPage/index';
+import { H1, H2 } from '../../components/Heading/index';
+import { ButtonPrimary, ButtonContent, ButtonInlineLight } from '../../components/Button/index';
+import { UtilityFontSizeSmall } from '../../components/Utility/index';
+import { IconChevronLeft } from '../../components/Icon/index';
+import useSearchItem from '../../hooks/useSearchItem';
+import { notEmpty, numberSeparator, dateTimeFormat } from '../../utils/formats';
+import { PortalNamespace, PortalElement } from '../../components/Portal/index';
+import Modal from '../../components/Modal/index';
+import FinancialOptions from '../../components/FinancialOptions/index';
+import InsuranceOptions from '../../components/InsuranceOptions/index';
+import ManufacturerPackageOption from './ManufacturerPackagesOption';
+import CheckList from './CheckList';
+import Related from './Related';
+import PackageOptions from './PackageOptions';
+import Branch from './Branch';
+import useCentralStorage from '../../State/CentralStorage/useCentralStorage';
+import Page404 from './Page404';
+import PageLoading from './PageLoading';
+import PubSub from '../../utils/pubsub/pubsub';
+import Property from './Property';
+import PdfDownloadContainer from '../../components/Pdf/index';
+import useSettings from '../../State/Settings/useSettings';
+const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, placeholderImage, modifyDocumentTitleItem, onClickSearchItem, }) => {
+    var _a, _b, _c;
+    const { ecomSettings } = useSettings();
+    const ecomContext = useRef();
+    const { loading, data: result } = useSearchItem(id);
+    const { vehicle: centralStorageVehicle, loading: loadingCentralStorageVehicle } = useCentralStorage(result === null || result === void 0 ? void 0 : result.vehicle);
+    useEffect(() => {
+        if (ecomSettings) {
+            ecomContext.current = new WaykeEcomWeb({
+                id,
+                ecomSdkConfig: {
+                    api: {
+                        address: ecomSettings.url,
+                    },
+                    bankIdThumbprint: ecomSettings === null || ecomSettings === void 0 ? void 0 : ecomSettings.bankIdThumbprint,
+                },
+                logo: ecomSettings.serviceLogotypeUrl,
+                logoX2: ecomSettings.serviceLogotypeUrl,
+                onEvent(view, event, currentStep, data) {
+                    PubSub.publish('EcomOnUserEvent', view, event, currentStep, data);
+                },
+            });
+        }
+        return () => {
+            if (ecomContext.current) {
+                ecomContext.current.destroy();
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (!disableResetScrollOnInit) {
+            window.scrollTo(0, 0);
+        }
+    }, []);
+    useEffect(() => {
+        var _a;
+        if (((_a = result === null || result === void 0 ? void 0 : result.vehicle) === null || _a === void 0 ? void 0 : _a.data) && modifyDocumentTitleItem) {
+            const { vehicle } = result;
+            const { registrationNumber } = vehicle.data;
+            document.title = `${registrationNumber} | ${vehicle.title} | ${vehicle.shortDescription}`;
+        }
+    }, [result]);
+    const options = useMemo(() => { var _a, _b, _c; return (_c = (_b = (_a = result === null || result === void 0 ? void 0 : result.vehicle) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.filter(notEmpty).map((opt) => ({ title: opt })); }, [(_b = (_a = result === null || result === void 0 ? void 0 : result.vehicle) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.options]);
+    const onShowMoreOptionsClick = useCallback(() => PubSub.publish('OptionsClick'), []);
+    if (loading) {
+        return React.createElement(PageLoading, null);
+    }
+    if (!((_c = result === null || result === void 0 ? void 0 : result.vehicle) === null || _c === void 0 ? void 0 : _c.data)) {
+        return React.createElement(Page404, null);
+    }
+    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, manufacturer, ecommerce, packageOptions, publishedAt, documents, } = vehicle;
+    const insuranceOptions = (centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.insuranceOptions)
+        ? centralStorageVehicle.insuranceOptions
+        : vehicle.insuranceOptions;
+    const { fuelType, mileage, gearbox, modelYear, propertySet } = vehicle.data;
+    const uspList = [
+        {
+            title: modelYear,
+        },
+        {
+            title: `${numberSeparator(mileage)} mil`,
+        },
+    ];
+    if (gearbox) {
+        uspList.push({ title: gearbox });
+    }
+    if (fuelType) {
+        uspList.push({ title: fuelType });
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Page, null,
+            React.createElement(PageSection, { large: true },
+                React.createElement(Container, null,
+                    React.createElement(ProductPage, null,
+                        React.createElement(ProductPageAside, null,
+                            React.createElement(ProductPageAsideSection, { mobileOrder: 1 },
+                                !pathRoute && hashRoute ? (React.createElement(Repeat, null,
+                                    React.createElement(UtilityFontSizeSmall, null,
+                                        React.createElement(ButtonInlineLight, { as: "a", href: "#", title: "Tillbaka till bils\u00F6k" },
+                                            React.createElement(ButtonContent, null,
+                                                React.createElement(IconChevronLeft, { block: true })),
+                                            React.createElement(ButtonContent, null, "Tillbaka till bils\u00F6k"))))) : null,
+                                (manufacturer === null || manufacturer === void 0 ? void 0 : manufacturer.logotype) && (React.createElement(Repeat, null,
+                                    React.createElement(LogoBox, { logo: manufacturer.logotype, alt: manufacturer.name }))),
+                                React.createElement(Repeat, null,
+                                    React.createElement(RepeatSmall, null,
+                                        React.createElement(H1, { noMargin: true }, title)),
+                                    shortDescription && (React.createElement(RepeatSmall, null,
+                                        React.createElement("div", null, shortDescription))),
+                                    React.createElement(RepeatSmall, null,
+                                        React.createElement(UspList, { small: true, items: uspList })))),
+                            React.createElement(ProductPageAsideSection, { mobileOrder: 2 },
+                                React.createElement(PriceTable, { price: price })),
+                            (financialOptions.length > 0 || insuranceOptions.length > 0) && (React.createElement(ProductPageAsideSection, { mobileOrder: 4 },
+                                financialOptions.length > 0 && (React.createElement(FinancialOptions, { id: id, financialOptions: financialOptions })),
+                                insuranceOptions.length > 0 && (React.createElement(InsuranceOptions, { id: id, branch: centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.branch, insuranceOptions: insuranceOptions })))),
+                            React.createElement(ProductPageAsideSection, { mobileOrder: 5 },
+                                React.createElement(CheckList, { manufacturer: manufacturer, packageOptions: packageOptions, ecommerce: ecommerce, branch: branch, contact: centralStorageVehicle === null || centralStorageVehicle === void 0 ? void 0 : centralStorageVehicle.contact, loadingCentralStorageVehicle: loadingCentralStorageVehicle, toggleEcomModal: () => { var _a; return (_a = ecomContext.current) === null || _a === void 0 ? void 0 : _a.start(); } }))),
+                        React.createElement(ProductPageMain, null,
+                            React.createElement(ProductPageAsideSection, { mobileOrder: 3 },
+                                React.createElement(Gallery, { media: media, placeholderImage: placeholderImage })),
+                            React.createElement(ProductPageMainSection, null,
+                                React.createElement(Repeat, null,
+                                    React.createElement(H2, { noMargin: true }, "Biluppgifter")),
+                                React.createElement(Repeat, null,
+                                    React.createElement(Content, null,
+                                        React.createElement("p", null, "Information direkt fr\u00E5n Transportstyrelsen och tillverkaren."))),
+                                React.createElement(Repeat, null,
+                                    React.createElement(Property, { propertySet: propertySet, vehicleData: vehicle.data }))),
+                            description && (React.createElement(ProductPageMainSection, null,
+                                React.createElement(Blockquote, { author: contact && contact.name ? contact.name : null, date: publishedAt
+                                        ? dateTimeFormat.format(publishedAt, dateTimeFormat.DayMonth)
+                                        : undefined, avatar: (contact === null || contact === void 0 ? void 0 : contact.avatar) || undefined }, !!description && React.createElement("p", null, description)))),
+                            ((options === null || options === void 0 ? void 0 : options.length) || 0) > 0 && (React.createElement(ProductPageMainSection, null,
+                                React.createElement(Repeat, null,
+                                    React.createElement(H2, { noMargin: true }, "Utrustning")),
+                                React.createElement(Repeat, null,
+                                    React.createElement(Content, null,
+                                        React.createElement("p", null, "Kompletterande uppgifter om bilen."))),
+                                React.createElement(Repeat, null,
+                                    React.createElement(ExtendContent, { actionTitle: "Visa mer", onClick: onShowMoreOptionsClick },
+                                        React.createElement(UspList, { items: options }))))),
+                            (documents.length || 0) > 0 && (React.createElement(ProductPageMainSection, null,
+                                React.createElement(Repeat, null,
+                                    React.createElement(H2, { noMargin: true }, "Dokument")),
+                                React.createElement(Repeat, null,
+                                    React.createElement(Content, null,
+                                        React.createElement("p", null, "Tillh\u00F6rande dokument f\u00F6r bilen."))),
+                                React.createElement(Repeat, null,
+                                    React.createElement(PdfDownloadContainer, { documents: documents })))),
+                            React.createElement(ProductPageMainSection, null,
+                                React.createElement(Branch, { branch: branch, loading: loadingCentralStorageVehicle }),
+                                ecommerce && ecommerce.enabled && (React.createElement(Repeat, null,
+                                    React.createElement(ButtonPrimary, { disabled: !!ecommerce.reserved, title: "K\u00F6p bilen online", onClick: () => { var _a; return (_a = ecomContext.current) === null || _a === void 0 ? void 0 : _a.start(); } }, "K\u00F6p bilen online")))),
+                            React.createElement(PackageOptions, { packageOptions: packageOptions }),
+                            React.createElement(ManufacturerPackageOption, { packageOption: manufacturer === null || manufacturer === void 0 ? void 0 : manufacturer.packageOption }))))),
+            React.createElement(Related, { id: id, hashRoute: hashRoute, pathRoute: pathRoute, onClickSearchItem: onClickSearchItem })),
+        false && (React.createElement(Modal, { title: "Modal", onClose: () => { } },
+            React.createElement(Content, null,
+                React.createElement("p", null,
+                    "Priset \u00E4r ett cirkapris och baserat p\u00E5 ditt avtals antal m\u00E5nader och din ber\u00E4knade \u00E5rliga k\u00F6rstr\u00E4cka. Kostnad f\u00F6r f\u00F6rs\u00E4kring och serviceavtal tillkommer. Kontakta s\u00E4ljare f\u00F6r komplett kostnadsf\u00F6rslag.",
+                    ' ')))),
+        React.createElement(PortalElement, { id: PortalNamespace.DefaultPortal })));
+};
+export default WaykeSearchItem;

package/dist-src/providers/WaykeItemProvidet.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import GraphqlProvider from './graphqlProvider';
+import Theme from './themeProvider';
+import Root from '../components/Root/index';
+import useEcom from '../hooks/useEcom';
+import SettingsProvider from '../State/Settings/SettingsProvider';
+import RelatedSearchProvider from '../State/RelatedSearch/RelatedSearchProvider';
+import CentralStorageProvider from '../State/CentralStorage/CentralStorageProvider';
+import PathProvider from '../State/Path/PathProvider';
+const WaykeItemProvider = ({ url, urlMlt, apiKey, ecomSettings, graphQlUrl, googleMapsApiKey, googleMapsMarker, children, }) => {
+    useEcom(ecomSettings);
+    return (React.createElement(PathProvider, null,
+        React.createElement(SettingsProvider, { googleMapsApiKey: googleMapsApiKey, googleMapsMarker: googleMapsMarker, ecomSettings: ecomSettings },
+            React.createElement(CentralStorageProvider, null,
+                React.createElement(GraphqlProvider, { uri: graphQlUrl },
+                    React.createElement(RelatedSearchProvider, { url: url, urlMlt: urlMlt, apiKey: apiKey },
+                        React.createElement(Theme, null,
+                            React.createElement(Root, null, children))))))));
+};
+export default WaykeItemProvider;

package/dist-src/providers/WaykeProvider.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import GraphqlProvider from './graphqlProvider';
+import Theme from './themeProvider';
+import SearchProvider from '../State/Search/SearchProvider';
+import Root from '../components/Root/index';
+import useEcom from '../hooks/useEcom';
+import SettingsProvider from '../State/Settings/SettingsProvider';
+import RelatedSearchProvider from '../State/RelatedSearch/RelatedSearchProvider';
+import CentralStorageProvider from '../State/CentralStorage/CentralStorageProvider';
+import PathProvider from '../State/Path/PathProvider';
+const WaykeProvider = ({ url, urlMlt, apiKey, ecomSettings, graphQlUrl, googleMapsApiKey, googleMapsMarker, useQueryParamsFromUrl, pathRoute, children, }) => {
+    useEcom(ecomSettings);
+    return (React.createElement(PathProvider, null,
+        React.createElement(SettingsProvider, { googleMapsApiKey: googleMapsApiKey, googleMapsMarker: googleMapsMarker, ecomSettings: ecomSettings },
+            React.createElement(CentralStorageProvider, null,
+                React.createElement(GraphqlProvider, { uri: graphQlUrl },
+                    React.createElement(SearchProvider, { url: url, apiKey: apiKey, useQueryParamsFromUrl: useQueryParamsFromUrl, pathRoute: pathRoute },
+                        React.createElement(RelatedSearchProvider, { url: url, urlMlt: urlMlt, apiKey: apiKey },
+                            React.createElement(Theme, null,
+                                React.createElement(Root, null, children)))))))));
+};
+export default WaykeProvider;

package/dist-src/providers/graphqlProvider.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ApolloProvider as ApolloProviderBase, ApolloClient, InMemoryCache } from '@apollo/client';
+const GraphqlProvider = ({ uri, children }) => {
+    const client = new ApolloClient({ uri, cache: new InMemoryCache() });
+    return React.createElement(ApolloProviderBase, { client: client }, children);
+};
+export default GraphqlProvider;

package/dist-src/providers/themeProvider.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ThemeProvider as ThemeProviderBase } from 'styled-components';
+import theme from '../layout/theme';
+const ThemeProvider = ({ children }) => (React.createElement(ThemeProviderBase, { theme: theme }, children));
+export default ThemeProvider;

package/{src/queries/INSURANCE_CALCULATION.ts → dist-src/queries/INSURANCE_CALCULATION.js}

@@ -1,6 +1,5 @@
 import { gql } from '@apollo/client';
-
-const INSURANCE_CALCULATION = gql`
+const INSURANCE_CALCULATION = gql `
   query InsuranceCalculation(
     $id: ID!
     $branch: ID
@@ -39,5 +38,4 @@ const INSURANCE_CALCULATION = gql`
     }
   }
 `;
-
 export default INSURANCE_CALCULATION;

package/{src/queries/LOAN_CALCULATION.ts → dist-src/queries/LOAN_CALCULATION.js}

@@ -1,6 +1,5 @@
 import { gql } from '@apollo/client';
-
-const FinancialOptionDetail = gql`
+const FinancialOptionDetail = gql `
   fragment FinancialOptionDetail on FinancialOptionDetail {
     current
     default
@@ -9,8 +8,7 @@ const FinancialOptionDetail = gql`
     step
   }
 `;
-
-const LOAN_CALCULATION = gql`
+const LOAN_CALCULATION = gql `
   query LoanCalculation($id: ID!, $duration: Int!, $downPayment: Int!, $residual: Float!) {
     loan(id: $id, duration: $duration, downPayment: $downPayment, residual: $residual) {
       downPayment {
@@ -35,5 +33,4 @@ const LOAN_CALCULATION = gql`
   }
   ${FinancialOptionDetail}
 `;
-
 export default LOAN_CALCULATION;

package/{src/queries/SEARCH_ITEM_BRANCH_QUERY.ts → dist-src/queries/SEARCH_ITEM_BRANCH_QUERY.js}

@@ -1,13 +1,11 @@
 import { gql } from '@apollo/client';
-
-const HoursOpen = gql`
+const HoursOpen = gql `
   fragment HoursOpen on HoursOpen {
     from
     until
   }
 `;
-
-const SEARCH_ITEM_BRANCH_QUERY = gql`
+const SEARCH_ITEM_BRANCH_QUERY = gql `
   query SearchItemBranch($id: ID!, $branch: ID) {
     vehicle(id: $id, branch: $branch) {
       contact {
@@ -116,5 +114,4 @@ const SEARCH_ITEM_BRANCH_QUERY = gql`
   }
   ${HoursOpen}
 `;
-
 export default SEARCH_ITEM_BRANCH_QUERY;

package/{src/queries/SEARCH_ITEM_QUERY.ts → dist-src/queries/SEARCH_ITEM_QUERY.js}

@@ -1,6 +1,5 @@
 import { gql } from '@apollo/client';
-
-const FinancialOptionDetail = gql`
+const FinancialOptionDetail = gql `
   fragment FinancialOptionDetail on FinancialOptionDetail {
     current
     default
@@ -9,15 +8,13 @@ const FinancialOptionDetail = gql`
     step
   }
 `;
-
-const HoursOpen = gql`
+const HoursOpen = gql `
   fragment HoursOpen on HoursOpen {
     from
     until
   }
 `;
-
-const SEARCH_ITEM_QUERY = gql`
+const SEARCH_ITEM_QUERY = gql `
   query SearchItem($id: ID!) {
     vehicle(id: $id) {
       id
@@ -233,5 +230,4 @@ const SEARCH_ITEM_QUERY = gql`
   ${HoursOpen}
   ${FinancialOptionDetail}
 `;
-
 export default SEARCH_ITEM_QUERY;