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

package/src/layouts/searchItem/Page404.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import Container from '../../components/Container/index';
-import { Page, PageSection } from '../../components/Page/index';
-import { H1 } from '../../components/Heading/index';
-
-const Page404 = () => (
-  <Page>
-    <PageSection large>
-      <Container>
-        <H1 noMargin>404</H1>
-      </Container>
-    </PageSection>
-  </Page>
-);
-
-export default Page404;

package/src/layouts/searchItem/PageLoading.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import Container from '../../components/Container/index';
-import { Page, PageSection } from '../../components/Page/index';
-import Loader from '../../components/Loader/index';
-
-const PageLoading = () => (
-  <Page>
-    <PageSection large>
-      <Container>
-        <Loader />
-      </Container>
-    </PageSection>
-  </Page>
-);
-
-export default PageLoading;

package/src/layouts/searchItem/Property.tsx

@@ -1,134 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Category, Property } from '../../@types/vehicle-properties';
-import PropertyTreeCreator from '../../utils/vehicle-properties/property-tree-creator';
-import sortTree from '../../utils/vehicle-properties/property-tree-sorter';
-import enrichWithHint from '../../utils/vehicle-properties/property-hint-enricher';
-import addCustomProperties from '../../utils/vehicle-properties/custom-property-adder';
-import removeProperties from '../../utils/vehicle-properties/property-remover';
-import MetadataItem from './MetadataItem';
-
-import { H5 } from '../../components/Heading/index';
-import { Repeat } from '../../components/Repeat/index';
-import { TableList } from '../../components/TableList/index';
-import Tabs from '../../components/Tabs/index';
-import { VehicleData } from '../../@types/codegen/types';
-
-interface MetadataSubCategoryProps {
-  name: string;
-  properties: Property[];
-}
-
-const MetadataSubCategory = ({ name, properties }: MetadataSubCategoryProps) => (
-  <Repeat>
-    <H5 as="h3">{name}</H5>
-    <TableList>
-      {!!properties.length &&
-        properties.map((property, index) => (
-          <MetadataItem
-            name={property.name}
-            hint={property.hint}
-            value={property.value}
-            unit={property.unit}
-            key={`${property.name}-${index}`}
-          />
-        ))}
-    </TableList>
-  </Repeat>
-);
-
-interface MetadataCaregoryProps {
-  properties: Property[];
-  subCategories: Category[];
-}
-
-const MetadataCategory = ({ properties, subCategories }: MetadataCaregoryProps) => (
-  <div className="tab-section">
-    {!!properties.length && (
-      <Repeat>
-        <TableList>
-          {properties.map((property, index) => (
-            <MetadataItem
-              name={property.name}
-              hint={property.hint}
-              value={property.value}
-              unit={property.unit}
-              key={`${property.name}-${index}`}
-            />
-          ))}
-        </TableList>
-      </Repeat>
-    )}
-    {!!subCategories.length &&
-      subCategories.map((subCategory, index) => (
-        <MetadataSubCategory
-          name={subCategory.name}
-          properties={subCategory.properties}
-          key={`${subCategory.name}-${index}`}
-        />
-      ))}
-  </div>
-);
-
-interface PropertySetProps {
-  propertySet: any;
-  vehicleData: VehicleData;
-}
-
-const PropertySet = ({ propertySet, vehicleData }: PropertySetProps) => {
-  const [activeCategoryId, setActiveCategoryId] = useState(-1);
-  const mappedProperties = useMemo(() => {
-    if (!propertySet) {
-      return undefined;
-    }
-
-    let newProperties = removeProperties(propertySet);
-    newProperties = addCustomProperties(vehicleData, newProperties);
-    const enrichedProperties = enrichWithHint(newProperties);
-
-    const tree = new PropertyTreeCreator(enrichedProperties).create();
-    sortTree(tree);
-    return tree;
-  }, [propertySet]);
-
-  useEffect(() => {
-    const categories =
-      mappedProperties?.categories?.length !== undefined ? mappedProperties?.categories : undefined;
-
-    if (activeCategoryId < 0 && categories !== undefined && categories.length > 0) {
-      setActiveCategoryId(categories[0].id);
-    }
-  }, [mappedProperties]);
-
-  const onTab = useCallback((id: string) => setActiveCategoryId(parseInt(id, 10)), []);
-
-  const activeCategory = mappedProperties?.categories?.find(
-    (category) => category.id === activeCategoryId
-  );
-
-  return (
-    <>
-      <Repeat>
-        <Tabs
-          tabs={
-            mappedProperties?.categories?.map((category) => ({
-              name: `${category.id}`,
-              displayName: category.name,
-            })) || []
-          }
-          active={`${activeCategoryId}`}
-          onClick={onTab}
-        />
-      </Repeat>
-      {activeCategory && (
-        <Repeat>
-          <MetadataCategory
-            properties={activeCategory.properties}
-            subCategories={activeCategory.subCategories}
-          />
-        </Repeat>
-      )}
-    </>
-  );
-};
-
-export default PropertySet;

package/src/layouts/searchItem/Related.tsx

@@ -1,120 +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 {
-  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';
-
-interface RelatedProps {
-  id: string;
-  hashRoute?: boolean;
-  pathRoute?: string;
-  onClickSearchItem?: (id: string) => void;
-}
-
-const Related = ({ id, hashRoute, pathRoute, onClickSearchItem }: RelatedProps) => {
-  const { loading, response, moreLikeThisUrl } = useRelatedSearch(id);
-
-  const onItemClicked = useCallback((id: string) => {
-    PubSub.publish('ItemClicked', id);
-    if (onClickSearchItem) {
-      onClickSearchItem(id);
-    }
-  }, []);
-
-  if (!response?.documentList.documents.length || response?.documentList.documents.length === 0) {
-    return null;
-  }
-
-  if (loading) {
-    return <Loader />;
-  }
-
-  return (
-    <PageSection accent large className="wayke__theme wayke__color--accent-bg">
-      <Container>
-        {moreLikeThisUrl ? (
-          <Repeat>
-            <SectionHeader onClick={() => {}}>
-              <H2 noMargin>Relaterade fordon</H2>
-            </SectionHeader>
-          </Repeat>
-        ) : (
-          <Repeat>
-            <SectionHeader onClick={() => {}} actionTitle="Visa alla">
-              <H2 noMargin>Senast inkomna</H2>
-            </SectionHeader>
-          </Repeat>
-        )}
-
-        <Repeat>
-          <OverflowGrid>
-            <OverflowGridList>
-              {response?.documentList.documents.map((document) => {
-                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 (
-                  <OverflowGridItem key={document._id}>
-                    <ProductCard
-                      id={document._id}
-                      onClick={onItemClicked}
-                      title={document.title}
-                      href={pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined}
-                      image={document.featuredImage?.files?.[0]?.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}
-                    />
-                  </OverflowGridItem>
-                );
-              })}
-            </OverflowGridList>
-          </OverflowGrid>
-        </Repeat>
-      </Container>
-    </PageSection>
-  );
-};
-
-export default Related;

package/src/layouts/searchItem/index.tsx

@@ -1,342 +0,0 @@
-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';
-
-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,
-        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 <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,63 +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';
-
-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) => (
-  <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;