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

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/types';
-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/types';
-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/types';
-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/types';
-
-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;

package/src/layouts/searchItem/MetadataItem.tsx

@@ -1,74 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { Property } from '../../@types/vehicle-properties';
-
-import {
-  TableListItem,
-  TableListKey,
-  TableListValue,
-  TableListBooleanPos,
-  TableListBooleanNeg,
-} from '../../components/TableList/index';
-import { IconCheck, IconCancel } from '../../components/Icon/index';
-import { SrOnly } from '../../components/SrOnly/index';
-import { ButtonInline } from '../../components/Button/index';
-import Modal from '../../components/Modal/index';
-import Content from '../../components/Content/index';
-
-const formatValue = (value: Property['value'], unit: Property['unit']) => {
-  if (typeof value === 'boolean') {
-    return value ? (
-      <TableListBooleanPos title="Ja">
-        <SrOnly>Ja</SrOnly>
-        <IconCheck block />
-      </TableListBooleanPos>
-    ) : (
-      <TableListBooleanNeg title="Nej">
-        <SrOnly>Nej</SrOnly>
-        <IconCancel block />
-      </TableListBooleanNeg>
-    );
-  }
-  if (Array.isArray(value)) {
-    return value.join(', ');
-  }
-  if (!!value && !!unit) {
-    return `${value} ${unit}`;
-  }
-  return value;
-};
-
-interface MetadataItemProps {
-  name: string;
-  hint?: string | null | undefined;
-  value: Property['value'];
-  unit: Property['unit'];
-}
-
-const MetadataItem = ({ name, hint, value, unit }: MetadataItemProps) => {
-  const [foldout, setFoldout] = useState(false);
-  const onToggleFoldout = useCallback(() => setFoldout(!foldout), [foldout]);
-
-  const presentedValue = formatValue(value, unit);
-
-  return (
-    <TableListItem>
-      <TableListKey>
-        {hint ? (
-          <ButtonInline onClick={onToggleFoldout} title={`Mer information om ${name}`}>
-            {name}
-          </ButtonInline>
-        ) : (
-          name
-        )}
-      </TableListKey>
-      <TableListValue>{value !== undefined ? presentedValue : 'Uppgift saknas'}</TableListValue>
-      {hint && foldout && (
-        <Modal title={name} onClose={onToggleFoldout}>
-          <Content dangerouslySetInnerHTML={{ __html: hint }} />
-        </Modal>
-      )}
-    </TableListItem>
-  );
-};
-
-export default MetadataItem;

package/src/layouts/searchItem/PackageOptionModal.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { marked } from 'marked';
-
-import { Repeat } from '../../components/Repeat/index';
-import { ButtonInline } from '../../components/Button/index';
-import Modal from '../../components/Modal/index';
-import Content from '../../components/Content/index';
-import LogoBox from '../../components/LogoBox/index';
-
-interface ModelLink {
-  href?: string | null;
-  title?: string | null;
-}
-
-export interface PackageOptionModalData {
-  title?: string | null;
-  image?: string | null;
-  description?: string | null;
-  link?: ModelLink | null;
-}
-
-interface PackageOptionsModalProps {
-  packageOption: PackageOptionModalData;
-  onClose: () => void;
-}
-
-const PackageOptionModal = ({ packageOption, onClose }: PackageOptionsModalProps) => (
-  <Modal title={packageOption.title || ''} onClose={onClose}>
-    {packageOption.image && (
-      <Repeat>
-        <LogoBox logo={packageOption.image} alt={packageOption.title || undefined} wide />
-      </Repeat>
-    )}
-    {packageOption.description && (
-      <Repeat>
-        <Content dangerouslySetInnerHTML={{ __html: marked(packageOption.description) }} />
-      </Repeat>
-    )}
-    {packageOption.link?.href && packageOption.link.title && (
-      <Repeat>
-        <ButtonInline
-          as="a"
-          href={packageOption.link.href}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          {packageOption.link.title}
-        </ButtonInline>
-      </Repeat>
-    )}
-  </Modal>
-);
-
-export default PackageOptionModal;

package/src/layouts/searchItem/PackageOptions.tsx

@@ -1,58 +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 { PackageOption } from '../../@types/codegen/types';
-
-interface PackageOptionsProps {
-  packageOptions?: PackageOption[] | null;
-}
-
-const PackageOptions = ({ packageOptions }: PackageOptionsProps) => {
-  if (!packageOptions) {
-    return null;
-  }
-
-  return (
-    <>
-      {packageOptions.map((packageOption, index) => (
-        <ProductPageMainSection key={packageOption.title || index}>
-          <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 PackageOptions;