@wayke-se/components-react 2.15.0 → 3.0.0-beta.1

package/src/layouts/searchItem/index.tsx

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

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

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

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

@@ -0,0 +1,15 @@
+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/{dist-src/queries/INSURANCE_CALCULATION.js → src/queries/INSURANCE_CALCULATION.ts}

@@ -1,11 +1,18 @@
 import { gql } from '@apollo/client';
-const INSURANCE_CALCULATION = gql `
+
+const INSURANCE_CALCULATION = gql`
   query InsuranceCalculation(
     $id: ID!
+    $branch: ID
     $personalNumber: PersonalNumber!
     $drivingDistance: DrivingDistance!
   ) {
-    insurances(id: $id, personalNumber: $personalNumber, drivingDistance: $drivingDistance) {
+    insurances(
+      id: $id
+      branch: $branch
+      personalNumber: $personalNumber
+      drivingDistance: $drivingDistance
+    ) {
       name
       price
       unit
@@ -32,4 +39,5 @@ const INSURANCE_CALCULATION = gql `
     }
   }
 `;
+
 export default INSURANCE_CALCULATION;

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

@@ -1,5 +1,6 @@
 import { gql } from '@apollo/client';
-const FinancialOptionDetail = gql `
+
+const FinancialOptionDetail = gql`
   fragment FinancialOptionDetail on FinancialOptionDetail {
     current
     default
@@ -8,7 +9,8 @@ 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 {
@@ -33,4 +35,5 @@ const LOAN_CALCULATION = gql `
   }
   ${FinancialOptionDetail}
 `;
+
 export default LOAN_CALCULATION;

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

@@ -1,11 +1,13 @@
 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 {
@@ -96,8 +98,23 @@ const SEARCH_ITEM_BRANCH_QUERY = gql `
           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 → src/queries/SEARCH_ITEM_QUERY.ts}

@@ -1,5 +1,6 @@
 import { gql } from '@apollo/client';
-const FinancialOptionDetail = gql `
+
+const FinancialOptionDetail = gql`
   fragment FinancialOptionDetail on FinancialOptionDetail {
     current
     default
@@ -8,13 +9,15 @@ 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
@@ -158,10 +161,17 @@ const SEARCH_ITEM_QUERY = gql `
         withHomeDelivery
       }
       insuranceOptions {
-        description
+        insuranceHeader
+        institute
+        identifier
         logotype
-        url
         name
+        description
+        longDescription
+        url
+        insuranceText
+        requiresPersonalNumber
+        requiresDistance
         terms
       }
       financialOptions {
@@ -223,4 +233,5 @@ const SEARCH_ITEM_QUERY = gql `
   ${HoursOpen}
   ${FinancialOptionDetail}
 `;
+
 export default SEARCH_ITEM_QUERY;

package/src/styles.scss

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