@wayke-se/components-react 3.8.1 → 3.9.0-beta.1

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

@@ -1,66 +0,0 @@
-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 OverflowGrid 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, authorizedReseller, displayBranchName, onClickSearchItem, }) => {
-    const { loading, response, moreLikeThisUrl } = useRelatedSearch(id, !!authorizedReseller);
-    const onItemClicked = useCallback((id) => {
-        PubSub.publish('ItemClicked', id);
-        if (onClickSearchItem) {
-            onClickSearchItem(id);
-        }
-    }, []);
-    if (!response?.documentList.documents.length || 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, { accentBg: true, columns: 1.05, columnsSm: 2.1, columnsMd: 3, spacing: 2, items: response?.documentList.documents.map((document) => {
-                        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}`;
-                        return (React.createElement(ProductCard, { key: document._id, 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,
-                                },
-                                {
-                                    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, leasingPrice: document.leasingPrice !== undefined
-                                ? `${numberSeparator(document.leasingPrice)} kr/mån`
-                                : undefined, businessLeasingPrice: document.businessLeasingPrice !== undefined
-                                ? `${numberSeparator(document.businessLeasingPrice)} kr/mån`
-                                : undefined, pathRoute: pathRoute }));
-                    }) })))));
-};
-export default Related;

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

@@ -1,180 +0,0 @@
-import React, { useMemo, useRef, useCallback, useState, 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 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 DemoCarModal from './DemoCarModal';
-import useSettings from '../../State/Settings/useSettings';
-import Documents from './Documents';
-import AccessoriesSection from './Accessories/index';
-const WaykeSearchItem = ({ id, hashRoute, pathRoute, disableResetScrollOnInit, placeholderImage, modifyDocumentTitleItem, displayBranchName, onClickSearchItem, }) => {
-    const { ecomSettings } = useSettings();
-    const ecomContext = useRef();
-    const { loading, data: result } = useSearchItem(id);
-    const { vehicle: centralStorageVehicle, loading: loadingCentralStorageVehicle } = useCentralStorage(result?.vehicle);
-    const [demoCarModal, setDemoCarModal] = useState(false);
-    const onToggleDemoCarModal = useCallback(() => setDemoCarModal(!demoCarModal), [demoCarModal]);
-    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, accessories, shortDescription, media, description, price, discount, financialOptions, manufacturer, ecommerce, packageOptions, publishedAt, documents, availableFrom, flags, } = vehicle;
-    const insuranceOptions = centralStorageVehicle?.insuranceOptions
-        ? centralStorageVehicle.insuranceOptions
-        : vehicle.insuranceOptions;
-    const { fuelType, mileage, gearbox, modelYear, propertySet } = vehicle.data;
-    const uspList = [
-        {
-            title: modelYear,
-        },
-    ];
-    if (flags?.demoVersion) {
-        uspList.push({
-            title: 'Demobil',
-            onClick: onToggleDemoCarModal,
-        });
-    }
-    uspList.push({
-        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, discount: discount || undefined })),
-                            (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, availableFrom: availableFrom, 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 }))))),
-                            React.createElement(Documents, { documents: documents }),
-                            React.createElement(AccessoriesSection, { accessories: accessories }),
-                            React.createElement(ProductPageMainSection, null,
-                                React.createElement(Branch, { branch: branch, displayBranchName: displayBranchName, 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, authorizedReseller: !!branch?.flags?.authorizedReseller, displayBranchName: displayBranchName, onClickSearchItem: onClickSearchItem })),
-        React.createElement(PortalElement, { id: PortalNamespace.DefaultPortal }),
-        demoCarModal && React.createElement(DemoCarModal, { onClose: onToggleDemoCarModal })));
-};
-export default WaykeSearchItem;

package/dist-src/providers/WaykeItemProvidet.js

@@ -1,16 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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
-      }
-      accessories {
-        articleNumber
-        description
-        excerpt
-        id
-        images
-        logotype
-        manufacturer
-        model
-        name
-        price
-        assemblyPrice
-        productPage {
-          title
-          url
-        }
-        salePrice
-      }
-      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
-          authorizedReseller
-        }
-        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;