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

package/src/layouts/searchItem/index.tsx

@@ -1,344 +0,0 @@
-import React, { useMemo, useRef, useCallback, useEffect } from 'react';
-import WaykeEcomWeb from '@wayke-se/ecom-web';
-// import '@wayke-se/ecom-web/dist/index.css';
-
-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 Ecom from '../../components/Ecom/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';
-
-export interface WaykeSearchItemProps {
-  id: string;
-  hashRoute?: boolean;
-  pathRoute?: string;
-  disableResetScrollOnInit?: boolean;
-  placeholderImage?: string;
-  modifyDocumentTitleItem?: boolean;
-  onClickSearchItem?: (id: string) => void;
-}
-
-const WaykeSearchItem = ({
-  id,
-  hashRoute,
-  pathRoute,
-  disableResetScrollOnInit,
-  placeholderImage,
-  modifyDocumentTitleItem,
-  onClickSearchItem,
-}: WaykeSearchItemProps) => {
-  const { ecomSettings } = useSettings();
-  const ecomContext = useRef<WaykeEcomWeb | undefined>();
-
-  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,
-        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 <PageLoading />;
-  }
-
-  if (!result?.vehicle?.data) {
-    return <Page404 />;
-  }
-
-  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 (
-    <>
-      <Page>
-        <PageSection large>
-          <Container>
-            <ProductPage>
-              <ProductPageAside>
-                <ProductPageAsideSection mobileOrder={1}>
-                  {!pathRoute && hashRoute ? (
-                    <Repeat>
-                      <UtilityFontSizeSmall>
-                        <ButtonInlineLight as="a" href="#" title="Tillbaka till bilsök">
-                          <ButtonContent>
-                            <IconChevronLeft block />
-                          </ButtonContent>
-                          <ButtonContent>Tillbaka till bilsök</ButtonContent>
-                        </ButtonInlineLight>
-                      </UtilityFontSizeSmall>
-                    </Repeat>
-                  ) : null}
-                  {manufacturer?.logotype && (
-                    <Repeat>
-                      <LogoBox logo={manufacturer.logotype} alt={manufacturer.name} />
-                    </Repeat>
-                  )}
-                  <Repeat>
-                    <RepeatSmall>
-                      <H1 noMargin>{title}</H1>
-                    </RepeatSmall>
-                    {shortDescription && (
-                      <RepeatSmall>
-                        <div>{shortDescription}</div>
-                      </RepeatSmall>
-                    )}
-                    <RepeatSmall>
-                      <UspList small items={uspList} />
-                    </RepeatSmall>
-                  </Repeat>
-                </ProductPageAsideSection>
-
-                <ProductPageAsideSection mobileOrder={2}>
-                  <PriceTable price={price} />
-                </ProductPageAsideSection>
-
-                {(financialOptions.length > 0 || insuranceOptions.length > 0) && (
-                  <ProductPageAsideSection mobileOrder={4}>
-                    {financialOptions.length > 0 && (
-                      <FinancialOptions id={id} financialOptions={financialOptions} />
-                    )}
-                    {insuranceOptions.length > 0 && (
-                      <InsuranceOptions
-                        id={id}
-                        branch={centralStorageVehicle?.branch}
-                        insuranceOptions={insuranceOptions}
-                      />
-                    )}
-                  </ProductPageAsideSection>
-                )}
-
-                <ProductPageAsideSection mobileOrder={5}>
-                  <CheckList
-                    manufacturer={manufacturer}
-                    packageOptions={packageOptions}
-                    ecommerce={ecommerce}
-                    branch={branch}
-                    contact={centralStorageVehicle?.contact}
-                    loadingCentralStorageVehicle={loadingCentralStorageVehicle}
-                    toggleEcomModal={() => ecomContext.current?.start()}
-                  />
-                </ProductPageAsideSection>
-              </ProductPageAside>
-              <ProductPageMain>
-                <ProductPageAsideSection mobileOrder={3}>
-                  <Gallery media={media} placeholderImage={placeholderImage} />
-                </ProductPageAsideSection>
-
-                <ProductPageMainSection>
-                  <Repeat>
-                    <H2 noMargin>Biluppgifter</H2>
-                  </Repeat>
-                  <Repeat>
-                    <Content>
-                      <p>Information direkt från Transportstyrelsen och tillverkaren.</p>
-                    </Content>
-                  </Repeat>
-                  <Repeat>
-                    <Property propertySet={propertySet} vehicleData={vehicle.data} />
-                  </Repeat>
-                </ProductPageMainSection>
-
-                {description && (
-                  <ProductPageMainSection>
-                    <Blockquote
-                      author={contact && contact.name ? contact.name : null}
-                      date={
-                        publishedAt
-                          ? dateTimeFormat.format(publishedAt, dateTimeFormat.DayMonth)
-                          : undefined
-                      }
-                      avatar={contact?.avatar || undefined}
-                    >
-                      {!!description && <p>{description}</p>}
-                    </Blockquote>
-                  </ProductPageMainSection>
-                )}
-
-                {(options?.length || 0) > 0 && (
-                  <ProductPageMainSection>
-                    <Repeat>
-                      <H2 noMargin>Utrustning</H2>
-                    </Repeat>
-                    <Repeat>
-                      <Content>
-                        <p>Kompletterande uppgifter om bilen.</p>
-                      </Content>
-                    </Repeat>
-                    <Repeat>
-                      <ExtendContent actionTitle="Visa mer" onClick={onShowMoreOptionsClick}>
-                        <UspList items={options} />
-                      </ExtendContent>
-                    </Repeat>
-                  </ProductPageMainSection>
-                )}
-
-                {(documents.length || 0) > 0 && (
-                  <ProductPageMainSection>
-                    <Repeat>
-                      <H2 noMargin>Dokument</H2>
-                    </Repeat>
-                    <Repeat>
-                      <Content>
-                        <p>Tillhörande dokument för bilen.</p>
-                      </Content>
-                    </Repeat>
-                    <Repeat>
-                      <PdfDownloadContainer documents={documents} />
-                    </Repeat>
-                  </ProductPageMainSection>
-                )}
-
-                <ProductPageMainSection>
-                  <Branch branch={branch} loading={loadingCentralStorageVehicle} />
-                  {ecommerce && ecommerce.enabled && (
-                    <Repeat>
-                      <ButtonPrimary
-                        disabled={!!ecommerce.reserved}
-                        title="Köp bilen online"
-                        onClick={() => ecomContext.current?.start()}
-                      >
-                        Köp bilen online
-                      </ButtonPrimary>
-                    </Repeat>
-                  )}
-                </ProductPageMainSection>
-                <PackageOptions packageOptions={packageOptions} />
-                <ManufacturerPackageOption packageOption={manufacturer?.packageOption} />
-              </ProductPageMain>
-            </ProductPage>
-          </Container>
-        </PageSection>
-        <Related
-          id={id}
-          hashRoute={hashRoute}
-          pathRoute={pathRoute}
-          onClickSearchItem={onClickSearchItem}
-        />
-      </Page>
-      {false && (
-        <Modal title="Modal" onClose={() => {}}>
-          <Content>
-            <p>
-              Priset är ett cirkapris och baserat på ditt avtals antal månader och din beräknade
-              årliga körsträcka. Kostnad för försäkring och serviceavtal tillkommer. Kontakta
-              säljare för komplett kostnadsförslag.{' '}
-            </p>
-          </Content>
-        </Modal>
-      )}
-      <PortalElement id={PortalNamespace.DefaultPortal} />
-    </>
-  );
-};
-
-export default WaykeSearchItem;

package/src/providers/WaykeItemProvidet.tsx

@@ -1,68 +0,0 @@
-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';
-
-export interface EcomSettings {
-  url: string;
-  useBankId?: boolean;
-  displayBankIdAlert?: boolean;
-  serviceLogotypeUrl?: string;
-  bankIdThumbprint?: string;
-}
-
-export interface WaykeItemProviderSettings {
-  url: string;
-  urlMlt?: string;
-  graphQlUrl: string;
-  apiKey?: string;
-  ecomSettings?: EcomSettings;
-  googleMapsApiKey?: string;
-  googleMapsMarker?: string;
-}
-
-export type WaykeItemProviderProps = WaykeItemProviderSettings & {
-  children?: React.ReactNode;
-};
-
-const WaykeItemProvider = ({
-  url,
-  urlMlt,
-  apiKey,
-  ecomSettings,
-  graphQlUrl,
-  googleMapsApiKey,
-  googleMapsMarker,
-  children,
-}: WaykeItemProviderProps) => {
-  useEcom(ecomSettings);
-
-  return (
-    <PathProvider>
-      <SettingsProvider
-        googleMapsApiKey={googleMapsApiKey}
-        googleMapsMarker={googleMapsMarker}
-        ecomSettings={ecomSettings}
-      >
-        <CentralStorageProvider>
-          <GraphqlProvider uri={graphQlUrl}>
-            <RelatedSearchProvider url={url} urlMlt={urlMlt} apiKey={apiKey}>
-              <Theme>
-                <Root>{children}</Root>
-              </Theme>
-            </RelatedSearchProvider>
-          </GraphqlProvider>
-        </CentralStorageProvider>
-      </SettingsProvider>
-    </PathProvider>
-  );
-};
-
-export default WaykeItemProvider;

package/src/providers/WaykeProvider.tsx

@@ -1,80 +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 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';
-
-export interface EcomSettings {
-  url: string;
-  useBankId?: boolean;
-  displayBankIdAlert?: boolean;
-  serviceLogotypeUrl?: string;
-  bankIdThumbprint?: string;
-}
-
-export interface WaykeProviderSettings {
-  url: string;
-  urlMlt?: string;
-  apiKey?: string;
-  graphQlUrl: string;
-  ecomSettings?: EcomSettings;
-  googleMapsApiKey?: string;
-  googleMapsMarker?: string;
-  useQueryParamsFromUrl?: boolean;
-  pathRoute?: string;
-}
-
-export type WaykeProviderProps = WaykeProviderSettings & {
-  children?: React.ReactNode;
-};
-
-const WaykeProvider = ({
-  url,
-  urlMlt,
-  apiKey,
-  ecomSettings,
-  graphQlUrl,
-  googleMapsApiKey,
-  googleMapsMarker,
-  useQueryParamsFromUrl,
-  pathRoute,
-  children,
-}: WaykeProviderProps) => {
-  useEcom(ecomSettings);
-
-  return (
-    <PathProvider>
-      <SettingsProvider
-        googleMapsApiKey={googleMapsApiKey}
-        googleMapsMarker={googleMapsMarker}
-        ecomSettings={ecomSettings}
-      >
-        <CentralStorageProvider>
-          <GraphqlProvider uri={graphQlUrl}>
-            <SearchProvider
-              url={url}
-              apiKey={apiKey}
-              useQueryParamsFromUrl={useQueryParamsFromUrl}
-              pathRoute={pathRoute}
-            >
-              <RelatedSearchProvider url={url} urlMlt={urlMlt} apiKey={apiKey}>
-                <Theme>
-                  <Root>{children}</Root>
-                </Theme>
-              </RelatedSearchProvider>
-            </SearchProvider>
-          </GraphqlProvider>
-        </CentralStorageProvider>
-      </SettingsProvider>
-    </PathProvider>
-  );
-};
-
-export default WaykeProvider;

package/src/providers/graphqlProvider.tsx

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

package/src/providers/themeProvider.tsx

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

package/src/styles.scss

@@ -1 +0,0 @@
-@import '@wayke-se/ecom-web/dist/index.css';