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

package/src/layout/theme.ts

@@ -1,60 +0,0 @@
-const _colors = {
-  black: '#000',
-  white: '#fff',
-  gray: '#ddd',
-  grayLight: '#f8f8f8',
-  grayLightTransparent: 'rgba(248, 248, 248, 0)',
-  grayLightDarker: '#ebebeb',
-  grayDark: '#717171',
-  blue: '#1d61ca',
-  ui: {
-    greenLight: '#cdf5c8',
-    green: '#2b8747',
-    redLight: '#ffd0d0',
-    red: '#c71f1f',
-    yellowLight: '#fff4c7',
-    blueLight: '#daf7fc',
-  },
-};
-
-const theme = {
-  color: {
-    bg: _colors.white,
-    link: _colors.blue,
-    accent: _colors.grayLight,
-    accentTransparent: _colors.grayLightTransparent,
-    accentDark: _colors.grayLightDarker,
-    border: _colors.gray,
-    textDark: _colors.black,
-    textDarkLighten: _colors.grayDark,
-    textLight: _colors.white,
-    hoverOverlay: 'rgba(0, 0, 0, 0.04)',
-    disabledBg: _colors.gray,
-    disabledText: _colors.grayDark,
-    placeholder: _colors.grayDark,
-    ui: {
-      positiveLight: _colors.ui.greenLight,
-      positive: _colors.ui.green,
-      neutralLight: _colors.ui.yellowLight,
-      negativeLight: _colors.ui.redLight,
-      negative: _colors.ui.red,
-      infoLight: _colors.ui.blueLight,
-    },
-  },
-  breakpoint: {
-    Sm: '@media (min-width: 600px)',
-    LtSm: '@media (max-width: 599px)',
-    Md: '@media (min-width: 900px)',
-    LtMd: '@media (max-width: 899px)',
-    Lg: '@media (min-width: 1200px)',
-    LtLg: '@media (max-width: 1199px)',
-  },
-  distances: {
-    baseUnit: '8px',
-    inputHeight: '48px',
-    containerMaxWidth: '1312px',
-  },
-};
-
-export type Theme = typeof theme;
-export default theme;

package/src/layouts/WaykeComposite.tsx

@@ -1,64 +0,0 @@
-import React, { useEffect } from 'react';
-import useHashGuid from '../hooks/useHashGuid';
-import PubSub from '../utils/pubsub/pubsub';
-
-import WaykeSearch, { WaykeSearchProps } from './search/index';
-import WaykeSearchItem, { WaykeSearchItemProps } from './searchItem/index';
-import usePath from '../State/Path/usePath';
-
-export type WaykeCompositeProps = Omit<WaykeSearchProps & WaykeSearchItemProps, 'id'>;
-
-const WaykeComposite = ({
-  filterList,
-  initialQueryParams,
-  removeSearchBar,
-  removeFilterOptions,
-  disableResetScrollOnInit,
-  placeholderImage,
-  pathRoute,
-  modifyDocumentTitleItem,
-  modifyDocumentTitleSearch,
-}: WaykeCompositeProps) => {
-  const hashId = useHashGuid();
-  const { id: pathId } = usePath();
-
-  useEffect(() => {
-    if (!pathRoute) {
-      if (hashId) {
-        PubSub.publish('HashRouteChange', hashId);
-      } else {
-        PubSub.publish('HashRouteChange');
-      }
-    }
-  }, [hashId]);
-
-  const id = pathId || hashId;
-
-  return (
-    <>
-      {id ? (
-        <WaykeSearchItem
-          id={id}
-          hashRoute={!pathRoute}
-          disableResetScrollOnInit={disableResetScrollOnInit}
-          placeholderImage={placeholderImage}
-          pathRoute={pathRoute}
-          modifyDocumentTitleItem={modifyDocumentTitleItem}
-        />
-      ) : (
-        <WaykeSearch
-          filterList={filterList}
-          initialQueryParams={initialQueryParams}
-          removeSearchBar={removeSearchBar}
-          hashRoute={!pathRoute}
-          placeholderImage={placeholderImage}
-          pathRoute={pathRoute}
-          removeFilterOptions={removeFilterOptions}
-          modifyDocumentTitleSearch={modifyDocumentTitleSearch}
-        />
-      )}
-    </>
-  );
-};
-
-export default WaykeComposite;

package/src/layouts/WaykeCompositeWithProvider.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import WaykeProvider, { WaykeProviderProps } from '../providers/WaykeProvider';
-import WaykeComposite, { WaykeCompositeProps } from './WaykeComposite';
-
-export interface WaykeCompositeWithProviderProps {
-  provider: WaykeProviderProps;
-  composite?: WaykeCompositeProps;
-}
-
-const WaykeCompositeWithProvider = ({ provider, composite }: WaykeCompositeWithProviderProps) => (
-  <WaykeProvider {...provider}>
-    <WaykeComposite {...composite} />
-  </WaykeProvider>
-);
-
-export default WaykeCompositeWithProvider;

package/src/layouts/search/index.tsx

@@ -1,124 +0,0 @@
-import React, { useEffect, useCallback, useMemo } from 'react';
-
-import Container from '../../components/Container/index';
-import { Page, PageSection } from '../../components/Page/index';
-import Result from '../../components/Result/index';
-import Filter from '../../components/Filter/index';
-import Grid from '../../components/Grid/index';
-import SearchTerm from '../../components/SearchTerm/index';
-import { PortalElement, PortalNamespace } from '../../components/Portal/index';
-import SearchFilter from '../../components/SearchFilter/index';
-import Snackbar from '../../components/Snackbar/index';
-import useSearch from '../../State/Search/useSearch';
-import { SearchFilterTypes } from '../../@types/filter';
-import PubSub from '../../utils/pubsub/pubsub';
-
-export interface WaykeSearchProps {
-  filterList?: SearchFilterTypes[];
-  initialQueryParams?: URLSearchParams | string;
-  removeSearchBar?: boolean;
-  removeFilterOptions?: boolean;
-  placeholderImage?: string;
-  hashRoute?: boolean;
-  pathRoute?: string;
-  modifyDocumentTitleSearch?: string;
-  onClickSearchItem?: (id: string) => void;
-}
-
-const WaykeSearch = ({
-  filterList,
-  initialQueryParams,
-  hashRoute,
-  pathRoute,
-  removeSearchBar,
-  placeholderImage,
-  removeFilterOptions,
-  modifyDocumentTitleSearch,
-  onClickSearchItem,
-}: WaykeSearchProps) => {
-  const { error, documents, queryFilter, onFilterUpdate, onInitialize } = useSearch();
-
-  useEffect(() => {
-    if (modifyDocumentTitleSearch) {
-      document.title = modifyDocumentTitleSearch;
-    }
-    onInitialize(
-      typeof initialQueryParams === 'string'
-        ? new URLSearchParams(initialQueryParams)
-        : initialQueryParams
-    );
-  }, []);
-
-  const onItemClicked = useCallback((id: string) => {
-    PubSub.publish('ItemClicked', id);
-    if (onClickSearchItem) {
-      onClickSearchItem(id);
-    }
-  }, []);
-
-  const onClearQuery = useCallback(() => {
-    const nextQuery = new URLSearchParams(queryFilter.searchParams);
-    nextQuery.delete('query');
-    onFilterUpdate(nextQuery.toString());
-  }, [queryFilter.searchParams]);
-
-  const searchQuery = useMemo(() => queryFilter.searchParams.get('query'), [documents]);
-
-  return (
-    <>
-      <Page>
-        {!removeSearchBar && (
-          <PageSection>
-            <Container>
-              <SearchFilter />
-            </Container>
-          </PageSection>
-        )}
-        {searchQuery && (
-          <PageSection>
-            <Container>
-              <SearchTerm onClear={onClearQuery}>{searchQuery}</SearchTerm>
-            </Container>
-          </PageSection>
-        )}
-        {!removeFilterOptions && (
-          <PageSection>
-            <Container>
-              <Filter filterList={filterList} />
-            </Container>
-          </PageSection>
-        )}
-        <PageSection accent fillSpace className="wayke__theme wayke__color--accent-bg">
-          <Container>
-            <Result>
-              <>
-                {error && (
-                  <Snackbar severity="error" icon heading="Ett fel har inträffat">
-                    Vänligen försök igen.
-                  </Snackbar>
-                )}
-                {!error && documents && documents.length > 0 && (
-                  <Grid
-                    hashRoute={hashRoute}
-                    pathRoute={pathRoute}
-                    onClickItem={onItemClicked}
-                    documents={documents}
-                    placeholderImage={placeholderImage}
-                  />
-                )}
-                {!error && documents && documents.length === 0 && (
-                  <Snackbar severity="warning" icon heading="Inga resultat">
-                    Det finns inga resultat som matchar din sökning.
-                  </Snackbar>
-                )}
-              </>
-            </Result>
-          </Container>
-        </PageSection>
-      </Page>
-      <PortalElement id={PortalNamespace.DefaultPortal} />
-    </>
-  );
-};
-
-export default WaykeSearch;

package/src/layouts/searchItem/Branch.tsx

@@ -1,97 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-
-import { Repeat } from '../../components/Repeat/index';
-import Content from '../../components/Content/index';
-import { ProductPageContentLimit } from '../../components/ProductPage/index';
-import { H2 } from '../../components/Heading/index';
-import { ButtonContent, ButtonInline, ButtonInlineBold } from '../../components/Button/index';
-import { TableColumn, TableColumnRow, TableColumnCell } from '../../components/TableColumn/index';
-
-import OpeningHours from '../../components/OpeningHours/index';
-import PhoneNumber from '../../components/PhoneNumber/index';
-import Map from '../../components/Map/index';
-
-import { Branch, Maybe } from '../../@types/codegen';
-import BranchModal from './BranchModal';
-import { formatPhonenumber } from '../../utils/phonenumbers';
-
-interface BranchProps {
-  branch?: Maybe<Branch>;
-  loading: boolean;
-}
-
-const Branch = ({ branch, loading }: BranchProps) => {
-  const [modal, setModal] = useState(false);
-
-  const openModal = useCallback(() => setModal(true), []);
-  const closeModal = useCallback(() => setModal(false), []);
-
-  useEffect(() => {
-    if (branch && modal) {
-      setModal(false);
-    }
-  }, [branch]);
-
-  if (!branch) {
-    return null;
-  }
-
-  return (
-    <>
-      {modal && (
-        <BranchModal loading={loading} connections={branch?.connections} onClose={closeModal} />
-      )}
-      <Repeat>
-        <H2 noMargin>
-          {branch?.location?.city
-            ? `Den här bilen finns på vår anläggning i ${branch?.location?.city}`
-            : 'Kontakt'}
-        </H2>
-      </Repeat>
-      <Repeat>
-        <Map position={branch?.location?.position} />
-      </Repeat>
-      {(branch?.connections?.length || 0) > 1 && (
-        <Repeat>
-          <Content>
-            <p>
-              Denna bil tillhör ett centrallager och går att köpa genom flera anläggningar.{' '}
-              <ButtonInline as="span" role="button" onClick={openModal} inline>
-                Klicka här för att visa kontaktuppgifter till en annan anläggning
-              </ButtonInline>
-              .
-            </p>
-          </Content>
-        </Repeat>
-      )}
-      <Repeat>
-        <ProductPageContentLimit>
-          <Repeat>
-            <TableColumn>
-              {branch?.location?.streetAddress && branch?.location?.city && (
-                <TableColumnRow>
-                  <TableColumnCell>Adress</TableColumnCell>
-                  <TableColumnCell>
-                    <ButtonInlineBold>
-                      <ButtonContent>{`${branch?.location?.streetAddress}, ${branch?.location?.city}`}</ButtonContent>
-                    </ButtonInlineBold>
-                  </TableColumnCell>
-                </TableColumnRow>
-              )}
-              {branch?.contact?.phonenumber && (
-                <PhoneNumber phoneNumber={formatPhonenumber(branch.contact.phonenumber)} />
-              )}
-            </TableColumn>
-          </Repeat>
-          {branch?.openingHours && (
-            <Repeat>
-              <OpeningHours openingHours={branch.openingHours} />
-            </Repeat>
-          )}
-        </ProductPageContentLimit>
-      </Repeat>
-    </>
-  );
-};
-
-export default Branch;

package/src/layouts/searchItem/BranchModal.tsx

@@ -1,67 +0,0 @@
-import React, { useState, useCallback, useContext } from 'react';
-
-import { Repeat, RepeatTiny } from '../../components/Repeat/index';
-import InputSelect from '../../components/InputSelect/index';
-import { ButtonPrimary, ButtonContent } from '../../components/Button/index';
-import Modal from '../../components/Modal/index';
-import Content from '../../components/Content/index';
-import InputLabel from '../../components/InputLabel/index';
-import { BranchConnection } from '../../@types/codegen';
-import { CentralStorageContext } from '../../State/CentralStorage/CentralStorageContext';
-
-interface BranchModalProps {
-  loading: boolean;
-  connections?: BranchConnection[];
-  onClose: () => void;
-}
-
-const BranchModal = ({ loading, connections, onClose }: BranchModalProps) => {
-  const { centralStorageId, setCentralStorageId } = useContext(CentralStorageContext);
-  const [localValue, setLocalValue] = useState(centralStorageId);
-
-  const onConfirm = useCallback((id: string) => {
-    if (id) {
-      setCentralStorageId(id);
-    }
-  }, []);
-
-  const onChange = useCallback(
-    (e: React.ChangeEvent<HTMLSelectElement>) => setLocalValue(e.currentTarget.value),
-    []
-  );
-
-  if (!localValue) {
-    return null;
-  }
-
-  return (
-    <Modal title="Byt anläggning" onClose={onClose}>
-      <Repeat>
-        <RepeatTiny>
-          <Content>
-            <p>Välj den anläggning du vill visa kontaktuppgifter för.</p>
-          </Content>
-        </RepeatTiny>
-        <RepeatTiny>
-          <InputLabel>Välj anläggning</InputLabel>
-          <InputSelect
-            value={localValue}
-            onChange={onChange}
-            options={connections?.map((x) => ({
-              value: x.id,
-              displayName: x.name,
-            }))}
-            title="Välj anläggning"
-          />
-        </RepeatTiny>
-      </Repeat>
-      <Repeat>
-        <ButtonPrimary disabled={loading} fullWidth onClick={() => onConfirm(localValue)}>
-          <ButtonContent>Välj</ButtonContent>
-        </ButtonPrimary>
-      </Repeat>
-    </Modal>
-  );
-};
-
-export default BranchModal;

package/src/layouts/searchItem/CheckList.tsx

@@ -1,146 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-
-import { Repeat, RepeatTiny } from '../../components/Repeat/index';
-import ActionList from '../../components/ActionList/index';
-import { ButtonPrimary, ButtonContent, ButtonInline } from '../../components/Button/index';
-import CheckMarkList, { CheckMarkListItem } from '../../components/CheckMarkList/index';
-import Content from '../../components/Content/index';
-import SwitchBar from '../../components/SwitchBar/index';
-import {
-  Manufacturer,
-  PackageOption,
-  Ecommerce,
-  ContactOptions,
-  Branch,
-} from '../../@types/codegen';
-import BranchModal from './BranchModal';
-import PackageOptionModal, { PackageOptionModalData } from './PackageOptionModal';
-
-interface CheckList {
-  manufacturer?: Manufacturer | null;
-  packageOptions: PackageOption[];
-  ecommerce?: Ecommerce | null;
-  branch?: Branch | null;
-  contact?: ContactOptions | null;
-  loadingCentralStorageVehicle: boolean;
-  toggleEcomModal: () => void;
-}
-
-const CheckList = ({
-  manufacturer,
-  packageOptions,
-  ecommerce,
-  branch,
-  contact,
-  toggleEcomModal,
-  loadingCentralStorageVehicle,
-}: CheckList) => {
-  const [modalBranch, setModalBranch] = useState(false);
-  const openModalBranch = useCallback(() => setModalBranch(true), []);
-  const closeModalBranch = useCallback(() => setModalBranch(false), []);
-
-  const [modal, setModal] = useState<PackageOptionModalData>();
-  const onOpen = useCallback((nextModal: PackageOptionModalData) => setModal(nextModal), []);
-  const onClose = useCallback(() => setModal(undefined), []);
-
-  useEffect(() => {
-    if ((branch || contact) && modalBranch) {
-      setModalBranch(false);
-    }
-  }, [branch, contact]);
-
-  const packageOption = manufacturer?.packageOption;
-
-  return (
-    <>
-      {modalBranch && (
-        <BranchModal
-          loading={loadingCentralStorageVehicle}
-          connections={branch?.connections}
-          onClose={closeModalBranch}
-        />
-      )}
-      {modal && <PackageOptionModal packageOption={modal} onClose={onClose} />}
-      <Repeat>
-        <CheckMarkList>
-          {packageOption?.title && (
-            <CheckMarkListItem>
-              <>
-                Inkl.{' '}
-                <ButtonInline
-                  onClick={() =>
-                    onOpen({
-                      title: packageOption?.title,
-                      image: packageOption?.image,
-                      description: packageOption?.description,
-                      link: packageOption?.link,
-                    })
-                  }
-                >
-                  {packageOption.title}
-                </ButtonInline>{' '}
-                begagnatgaranti
-              </>
-            </CheckMarkListItem>
-          )}
-          {packageOptions?.map((packageOption, index) => (
-            <CheckMarkListItem key={packageOption.title || index}>
-              <>
-                Inkl.{' '}
-                <ButtonInline
-                  onClick={() =>
-                    onOpen({
-                      title: packageOption?.title,
-                      image: packageOption?.image,
-                      description: packageOption?.description,
-                      link: packageOption?.link,
-                    })
-                  }
-                >
-                  {packageOption.title}
-                </ButtonInline>
-              </>
-            </CheckMarkListItem>
-          ))}
-          {ecommerce?.withHomeDelivery && <CheckMarkListItem>Hemleverans</CheckMarkListItem>}
-        </CheckMarkList>
-      </Repeat>
-      <Repeat>
-        {ecommerce && ecommerce.enabled && (
-          <RepeatTiny>
-            <ButtonPrimary disabled={!!ecommerce.reserved} fullWidth onClick={toggleEcomModal}>
-              <ButtonContent>Köp bilen online</ButtonContent>
-            </ButtonPrimary>
-          </RepeatTiny>
-        )}
-        {ecommerce?.reserved && (
-          <RepeatTiny>
-            <SwitchBar
-              title="Bilen är reserverad"
-              body="Denna bil är reserverad av en annan köpare."
-            >
-              <Content>
-                <p>Denna bil är reserverad av en annan köpare.</p>
-              </Content>
-            </SwitchBar>
-          </RepeatTiny>
-        )}
-        <ActionList branch={branch} contact={contact} />
-      </Repeat>
-      {(branch?.connections.length || 0) > 1 && (
-        <Repeat>
-          <SwitchBar title="Centrallagerbil" actionTitle="Byt anläggning" onClick={openModalBranch}>
-            <Content>
-              <p>
-                Denna bil tillhör ett centrallager och går att köpa genom flera anläggningar. Byt
-                anläggning för att visa kontaktuppgifter till just den anläggningen.
-              </p>
-            </Content>
-          </SwitchBar>
-        </Repeat>
-      )}
-    </>
-  );
-};
-
-export default CheckList;

package/src/layouts/searchItem/ManufacturerPackagesOption.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { marked } from 'marked';
-
-import { Repeat } from '../../components/Repeat/index';
-import { ProductPageMainSection } from '../../components/ProductPage/index';
-import Content from '../../components/Content/index';
-import { H2 } from '../../components/Heading/index';
-import { ButtonInline } from '../../components/Button/index';
-import LogoBox from '../../components/LogoBox/index';
-import { Maybe, PackageOption } from '../../@types/codegen';
-
-interface ManufacturerPackageOption {
-  packageOption?: Maybe<PackageOption>;
-}
-
-const ManufacturerPackageOption = ({ packageOption }: ManufacturerPackageOption) => {
-  if (!packageOption) {
-    return null;
-  }
-
-  return (
-    <ProductPageMainSection>
-      <Repeat>
-        <H2 noMargin>{packageOption.title}</H2>
-      </Repeat>
-      {packageOption.description && (
-        <Repeat>
-          <Content dangerouslySetInnerHTML={{ __html: marked(packageOption.description) }} />
-        </Repeat>
-      )}
-      {packageOption.link?.url && (
-        <Repeat>
-          <ButtonInline
-            as="a"
-            href={packageOption.link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {packageOption.link.title
-              ? packageOption.link.title
-              : 'Läs mer (Öppnas i ett nytt fönster)'}
-          </ButtonInline>
-        </Repeat>
-      )}
-      {packageOption.image && (
-        <Repeat>
-          <LogoBox logo={packageOption.image} alt="Logotyp" wide />
-        </Repeat>
-      )}
-    </ProductPageMainSection>
-  );
-};
-
-export default ManufacturerPackageOption;