@wayke-se/components-react 3.0.0-beta.13 → 3.0.0-beta.14

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

@@ -0,0 +1,181 @@
+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, }) => {
+    const { ecomSettings } = useSettings();
+    const ecomContext = useRef();
+    const { loading, data: result } = useSearchItem(id);
+    const { vehicle: centralStorageVehicle, loading: loadingCentralStorageVehicle } = useCentralStorage(result?.vehicle);
+    useEffect(() => {
+        if (ecomSettings) {
+            ecomContext.current = new WaykeEcomWeb({
+                id,
+                ecomSdkConfig: {
+                    api: {
+                        address: ecomSettings.url,
+                    },
+                    bankIdThumbprint: 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(() => {
+        if (result?.vehicle?.data && modifyDocumentTitleItem) {
+            const { vehicle } = result;
+            const { registrationNumber } = vehicle.data;
+            document.title = `${registrationNumber} | ${vehicle.title} | ${vehicle.shortDescription}`;
+        }
+    }, [result]);
+    const options = useMemo(() => result?.vehicle?.data?.options?.filter(notEmpty).map((opt) => ({ title: opt })), [result?.vehicle?.data?.options]);
+    const onShowMoreOptionsClick = useCallback(() => PubSub.publish('OptionsClick'), []);
+    if (loading) {
+        return React.createElement(PageLoading, null);
+    }
+    if (!result?.vehicle?.data) {
+        return React.createElement(Page404, null);
+    }
+    const { vehicle } = result;
+    const contact = centralStorageVehicle?.contact;
+    const branch = centralStorageVehicle?.branch;
+    const { title, shortDescription, media, description, price, financialOptions, manufacturer, ecommerce, packageOptions, publishedAt, documents, } = vehicle;
+    const insuranceOptions = 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?.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?.branch, insuranceOptions: insuranceOptions })))),
+                            React.createElement(ProductPageAsideSection, { mobileOrder: 5 },
+                                React.createElement(CheckList, { manufacturer: manufacturer, packageOptions: packageOptions, ecommerce: ecommerce, branch: branch, contact: centralStorageVehicle?.contact, loadingCentralStorageVehicle: loadingCentralStorageVehicle, toggleEcomModal: () => ecomContext.current?.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?.avatar || undefined }, !!description && React.createElement("p", null, description)))),
+                            (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: () => ecomContext.current?.start() }, "K\u00F6p bilen online")))),
+                            React.createElement(PackageOptions, { packageOptions: packageOptions }),
+                            React.createElement(ManufacturerPackageOption, { packageOption: 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,16 @@
+import React from 'react';
+import GraphqlProvider from './graphqlProvider';
+import Theme from './themeProvider';
+import Root from '../components/Root/index';
+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, }) => (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,18 @@
+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 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, }) => (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/dist-src/queries/INSURANCE_CALCULATION.js

@@ -0,0 +1,41 @@
+import { gql } from '@apollo/client';
+const INSURANCE_CALCULATION = gql `
+  query InsuranceCalculation(
+    $id: ID!
+    $branch: ID
+    $personalNumber: PersonalNumber!
+    $drivingDistance: DrivingDistance!
+  ) {
+    insurances(
+      id: $id
+      branch: $branch
+      personalNumber: $personalNumber
+      drivingDistance: $drivingDistance
+    ) {
+      name
+      price
+      unit
+      description
+      logotype
+      addons {
+        id
+        title
+        description
+        price
+        unit
+        exclusions
+      }
+      items {
+        name
+        description
+      }
+      legality {
+        description
+        url
+      }
+      terms
+      url
+    }
+  }
+`;
+export default INSURANCE_CALCULATION;

package/dist-src/queries/LOAN_CALCULATION.js

@@ -0,0 +1,36 @@
+import { gql } from '@apollo/client';
+const FinancialOptionDetail = gql `
+  fragment FinancialOptionDetail on FinancialOptionDetail {
+    current
+    default
+    max
+    min
+    step
+  }
+`;
+const LOAN_CALCULATION = gql `
+  query LoanCalculation($id: ID!, $duration: Int!, $downPayment: Int!, $residual: Float!) {
+    loan(id: $id, duration: $duration, downPayment: $downPayment, residual: $residual) {
+      downPayment {
+        ...FinancialOptionDetail
+      }
+      effectiveInterest
+      duration {
+        ...FinancialOptionDetail
+      }
+      residual {
+        ...FinancialOptionDetail
+      }
+      mileage {
+        ...FinancialOptionDetail
+      }
+      interest
+      loanAmount
+      totalCreditCost
+      totalResidualValue
+      monthlyCost
+    }
+  }
+  ${FinancialOptionDetail}
+`;
+export default LOAN_CALCULATION;

package/dist-src/queries/SEARCH_ITEM_BRANCH_QUERY.js

@@ -0,0 +1,117 @@
+import { gql } from '@apollo/client';
+const HoursOpen = gql `
+  fragment HoursOpen on HoursOpen {
+    from
+    until
+  }
+`;
+const SEARCH_ITEM_BRANCH_QUERY = gql `
+  query SearchItemBranch($id: ID!, $branch: ID) {
+    vehicle(id: $id, branch: $branch) {
+      contact {
+        name
+        email
+        phonenumber
+        avatar
+      }
+      branch {
+        connections {
+          id
+          name
+          location {
+            city
+            county
+            streetAddress
+            postalCode
+            position {
+              latitude
+              longitude
+            }
+          }
+        }
+        contact {
+          name
+          email
+          phonenumber
+          avatar
+        }
+        id
+        description
+        name
+        homepage
+        flags {
+          mrf
+          centralStorage
+          ecommerce
+        }
+        logotype
+        openingHours {
+          monday {
+            ...HoursOpen
+          }
+          tuesday {
+            ...HoursOpen
+          }
+          wednesday {
+            ...HoursOpen
+          }
+          thursday {
+            ...HoursOpen
+          }
+          friday {
+            ...HoursOpen
+          }
+          saturday {
+            ...HoursOpen
+          }
+          sunday {
+            ...HoursOpen
+          }
+        }
+        organization {
+          branches {
+            id
+          }
+          parent {
+            id
+          }
+        }
+        location {
+          position {
+            latitude
+            longitude
+          }
+          city
+          county
+          streetAddress
+          postalCode
+        }
+        promos {
+          description
+          image
+          title
+        }
+        services {
+          markdown
+          title
+        }
+      }
+      insuranceOptions {
+        insuranceHeader
+        institute
+        identifier
+        logotype
+        name
+        description
+        longDescription
+        url
+        insuranceText
+        requiresPersonalNumber
+        requiresDistance
+        terms
+      }
+    }
+  }
+  ${HoursOpen}
+`;
+export default SEARCH_ITEM_BRANCH_QUERY;

package/dist-src/queries/SEARCH_ITEM_QUERY.js

@@ -0,0 +1,233 @@
+import { gql } from '@apollo/client';
+const FinancialOptionDetail = gql `
+  fragment FinancialOptionDetail on FinancialOptionDetail {
+    current
+    default
+    max
+    min
+    step
+  }
+`;
+const HoursOpen = gql `
+  fragment HoursOpen on HoursOpen {
+    from
+    until
+  }
+`;
+const SEARCH_ITEM_QUERY = gql `
+  query SearchItem($id: ID!) {
+    vehicle(id: $id) {
+      id
+      documents
+      contact {
+        name
+        email
+        phonenumber
+        avatar
+      }
+      manufacturer {
+        description
+        logotype
+        name
+        packageOption {
+          description
+          image
+          link {
+            title
+            url
+          }
+          title
+        }
+      }
+      packageOptions {
+        description
+        image
+        link {
+          title
+          url
+        }
+        title
+      }
+      publishedAt
+      branch {
+        connections {
+          id
+          name
+          location {
+            city
+            county
+            streetAddress
+            postalCode
+            position {
+              latitude
+              longitude
+            }
+          }
+        }
+        contact {
+          name
+          email
+          phonenumber
+          avatar
+        }
+        id
+        description
+        name
+        homepage
+        flags {
+          mrf
+          centralStorage
+          ecommerce
+        }
+        logotype
+        openingHours {
+          monday {
+            ...HoursOpen
+          }
+          tuesday {
+            ...HoursOpen
+          }
+          wednesday {
+            ...HoursOpen
+          }
+          thursday {
+            ...HoursOpen
+          }
+          friday {
+            ...HoursOpen
+          }
+          saturday {
+            ...HoursOpen
+          }
+          sunday {
+            ...HoursOpen
+          }
+        }
+        organization {
+          branches {
+            id
+          }
+          parent {
+            id
+          }
+        }
+        location {
+          position {
+            latitude
+            longitude
+          }
+          city
+          county
+          streetAddress
+          postalCode
+        }
+        promos {
+          description
+          image
+          title
+        }
+        services {
+          markdown
+          title
+        }
+      }
+      data {
+        enginePower
+        equipmentLevel
+        fuelType
+        gearbox
+        gearboxType
+        manufactureYear
+        manufacturer
+        mileage
+        modelName
+        modelSeries
+        modelYear
+        properties
+        propertySet
+        options
+        registrationNumber
+        salesName
+        vin
+      }
+      description
+      ecommerce {
+        enabled
+        reserved
+        withTradeIn
+        withHomeDelivery
+      }
+      insuranceOptions {
+        insuranceHeader
+        institute
+        identifier
+        logotype
+        name
+        description
+        longDescription
+        url
+        insuranceText
+        requiresPersonalNumber
+        requiresDistance
+        terms
+      }
+      financialOptions {
+        description
+        administrationFee
+        downPayment {
+          ...FinancialOptionDetail
+        }
+        duration {
+          ...FinancialOptionDetail
+        }
+        effectiveInterest
+        image
+        includes
+        includes
+        interest
+        link {
+          title
+          url
+        }
+        loanAmount
+        logotype
+        mileage {
+          ...FinancialOptionDetail
+        }
+        monthlyCost
+        name
+        residual {
+          ...FinancialOptionDetail
+        }
+        setupFee
+        terms
+        totalCreditCost
+        totalResidualValue
+        type
+        url
+      }
+      media {
+        type
+        files {
+          formats {
+            format
+            url
+          }
+          url
+        }
+      }
+      location {
+        city
+        county
+        streetAddress
+        postalCode
+      }
+      price
+      shortDescription
+      title
+    }
+  }
+  ${HoursOpen}
+  ${FinancialOptionDetail}
+`;
+export default SEARCH_ITEM_QUERY;