@wayke-se/components-react 2.16.0 → 3.0.0-beta.2

package/src/layout/theme.ts

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

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

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

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

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

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

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

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