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

package/src/State/CentralStorage/CentralStorageProvider.tsx

@@ -1,21 +0,0 @@
-import React, { useCallback } from 'react';
-import { CentralStorageContext } from './CentralStorageContext';
-import useSessionStorage from '../../hooks/useSessionStorage';
-
-interface CentralStorageProviderProps {
-  children: React.ReactNode;
-}
-
-const CentralStorageProvider = ({ children }: CentralStorageProviderProps) => {
-  const { value, set, remove } = useSessionStorage('centralStorage');
-
-  const setCentralStorageId = useCallback((id?: string) => (id ? set(id) : remove()), []);
-
-  return (
-    <CentralStorageContext.Provider value={{ centralStorageId: value, setCentralStorageId }}>
-      {children}
-    </CentralStorageContext.Provider>
-  );
-};
-
-export default CentralStorageProvider;

package/src/State/CentralStorage/useCentralStorage.ts

@@ -1,37 +0,0 @@
-import { useContext, useEffect } from 'react';
-import { CentralStorageContext } from './CentralStorageContext';
-import { Vehicle } from '../../@types/codegen';
-import useSearchItemBranch from '../../hooks/useSearchItemBranch';
-
-const useCentralStorage = (vehicle?: Vehicle | null) => {
-  const { centralStorageId, setCentralStorageId } = useContext(CentralStorageContext);
-
-  const connections = vehicle?.branch?.connections;
-  const branchId = centralStorageId
-    ? connections?.find((x) => x.id === centralStorageId)?.id
-    : undefined;
-
-  const { data, loading } = useSearchItemBranch(vehicle?.id, branchId);
-
-  useEffect(() => {
-    if ((connections?.length || 0) > 0) {
-      const match = centralStorageId
-        ? connections?.find((x) => x.id === centralStorageId)
-        : undefined;
-
-      if (!match) {
-        const first = connections?.[0];
-        if (first) {
-          setCentralStorageId(first.id);
-        }
-      }
-    }
-  }, [connections]);
-
-  return {
-    vehicle: (connections?.length || 0) > 0 ? data?.vehicle : vehicle,
-    loading,
-  };
-};
-
-export default useCentralStorage;

package/src/State/Path/PathContext.ts

@@ -1,11 +0,0 @@
-import { createContext } from 'react';
-
-export interface PathContextProps {
-  path: string;
-  previousPath?: string;
-  id?: string;
-  pushState: (id: string) => void;
-  replaceState: (id: string) => void;
-}
-
-export const PathContext = createContext<PathContextProps | undefined>(undefined);

package/src/State/Path/PathProvider.tsx

@@ -1,66 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useReducer } from 'react';
-import usePrevious from '../../hooks/usePrevious';
-
-import { PathContext, PathContextProps } from './PathContext';
-import reducer, { initialState, SET_PATH } from './reducer';
-
-const regexGuidAnyWhere =
-  /(\{){0,1}[0-9a-fA-F]{8}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{12}(\}){0,1}/g;
-const POP_STATE = 'popstate';
-
-interface PathProviderProps {
-  children: React.ReactNode;
-}
-
-const PathProvider = ({ children }: PathProviderProps) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
-  const previousPath = usePrevious(state.path);
-
-  useEffect(() => {
-    const onPopState = () => {
-      dispatch({ type: SET_PATH, path: window.location.pathname });
-    };
-
-    window.addEventListener(POP_STATE, onPopState);
-    return () => {
-      window.removeEventListener(POP_STATE, onPopState);
-    };
-  }, []);
-
-  const pushState = useCallback((path: string) => {
-    const h1 = window.location.hash;
-    history.pushState(null, '', `${path}`);
-    const h2 = window.location.hash;
-    if (h1.localeCompare(h2) !== 0) {
-      window.dispatchEvent(new HashChangeEvent('hashchange'));
-    }
-    dispatch({ type: SET_PATH, path });
-  }, []);
-
-  const replaceState = useCallback((path: string) => {
-    const h1 = window.location.hash;
-    history.replaceState(null, '', path);
-    const h2 = window.location.hash;
-    if (h1.localeCompare(h2) !== 0) {
-      window.dispatchEvent(new HashChangeEvent('hashchange'));
-    }
-    dispatch({ type: SET_PATH, path });
-  }, []);
-
-  const id = useMemo(() => state.path.match(regexGuidAnyWhere)?.pop(), [state.path]);
-
-  const value: PathContextProps = useMemo(
-    () => ({
-      ...state,
-      previousPath,
-      id,
-      pushState,
-      replaceState,
-    }),
-    [state]
-  );
-
-  return <PathContext.Provider value={value}>{children}</PathContext.Provider>;
-};
-
-export default PathProvider;

package/src/State/Path/reducer.ts

@@ -1,30 +0,0 @@
-import { BaseAction } from '../../@types/action';
-
-export const SET_PATH = 'SET_PATH';
-type SET_PATH_TYPE = BaseAction<typeof SET_PATH> & {
-  path: string;
-};
-
-type PathAction = SET_PATH_TYPE;
-
-interface PathState {
-  path: string;
-}
-
-export const initialState: PathState = {
-  path: window.location.pathname,
-};
-
-const pathReducer = (state: PathState, action: PathAction) => {
-  const next = { ...state };
-  switch (action.type) {
-    case SET_PATH:
-      next.path = action.path;
-      return next;
-
-    default:
-      throw new Error(`Unsupported action type`);
-  }
-};
-
-export default pathReducer;

package/src/State/Path/usePath.ts

@@ -1,13 +0,0 @@
-import { useContext } from 'react';
-import { PathContext, PathContextProps } from './PathContext';
-
-const usePath = (): PathContextProps => {
-  const context = useContext(PathContext);
-
-  if (!context) {
-    throw new Error('usePath must be used within a PathProvider');
-  }
-
-  return context;
-};
-export default usePath;

package/src/State/RelatedSearch/RelatedSearchContext.ts

@@ -1,18 +0,0 @@
-import { createContext } from 'react';
-import { Search } from '../../@types/search';
-
-export interface RelatedSearchContextProps {
-  moreLikeThisUrl: boolean;
-  loading: boolean;
-  response?: Search;
-  error: boolean;
-  fetchRelated: (searchParmas: URLSearchParams) => void;
-}
-
-export const RelatedSearchContext = createContext<RelatedSearchContextProps>({
-  moreLikeThisUrl: false,
-  loading: false,
-  error: false,
-  response: undefined,
-  fetchRelated: (_) => {},
-});

package/src/State/RelatedSearch/RelatedSearchProvider.tsx

@@ -1,55 +0,0 @@
-import React, { useState, useCallback } from 'react';
-
-import { Search } from '../../@types/search';
-import { QueryFilter } from '../../@types/queryFilter';
-import useFetch from '../../hooks/useFetch';
-import { RelatedSearchContext } from './RelatedSearchContext';
-
-interface RelatedSearchProviderProps {
-  url: string;
-  urlMlt?: string;
-  apiKey?: string;
-  children: React.ReactNode;
-}
-
-const RelatedSearchProvider = ({ url, urlMlt, apiKey, children }: RelatedSearchProviderProps) => {
-  const [queryFilter, setQueryFilter] = useState<QueryFilter>();
-
-  const query = queryFilter?.searchParams.toString();
-  const {
-    loading,
-    data: response,
-    error,
-  } = useFetch<Search>(
-    `${urlMlt || url}${query ? `?${query}` : ''}`,
-    {
-      headers: apiKey
-        ? {
-            'x-api-key': apiKey,
-          }
-        : {},
-    },
-    !queryFilter
-  );
-
-  const fetchRelated = useCallback(
-    (searchParams: URLSearchParams) =>
-      setQueryFilter({
-        searchParams,
-      }),
-    []
-  );
-
-  const value = {
-    moreLikeThisUrl: !!urlMlt,
-    loading,
-    error,
-    response,
-    queryFilter,
-    fetchRelated,
-  };
-
-  return <RelatedSearchContext.Provider value={value}>{children}</RelatedSearchContext.Provider>;
-};
-
-export default RelatedSearchProvider;

package/src/State/RelatedSearch/useRelatedSearch.ts

@@ -1,20 +0,0 @@
-import { useContext, useEffect } from 'react';
-
-import { RelatedSearchContext } from './RelatedSearchContext';
-
-const useRelatedSearch = (id: string) => {
-  const data = useContext(RelatedSearchContext);
-
-  useEffect(() => {
-    const searchParams = new URLSearchParams();
-    searchParams.set('hits', '3');
-    if (data.moreLikeThisUrl && id) {
-      searchParams.set('id', id);
-    }
-    data.fetchRelated(searchParams);
-  }, [id]);
-
-  return data;
-};
-
-export default useRelatedSearch;

package/src/State/Search/SearchContext.ts

@@ -1,27 +0,0 @@
-import { createContext } from 'react';
-import { Facet, Document, Search } from '../../@types/search';
-import { QueryFilter } from '../../@types/queryFilter';
-
-export interface SearchContextProps {
-  loading: boolean;
-  response?: Search;
-  error: boolean;
-  documents?: Document[];
-  initialFacets?: Facet[];
-  queryFilter: QueryFilter;
-  onFilterUpdate: (nextQuery: string) => void;
-  onLoadMore: () => void;
-  onInitialize: (initialQueryParams?: URLSearchParams) => void;
-}
-
-export const SearchContext = createContext<SearchContextProps>({
-  loading: false,
-  error: false,
-  response: undefined,
-  documents: undefined,
-  initialFacets: undefined,
-  queryFilter: { searchParams: new URLSearchParams() },
-  onFilterUpdate: (_) => {},
-  onLoadMore: () => {},
-  onInitialize: (_) => {},
-});

package/src/State/Search/SearchProvider.tsx

@@ -1,243 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-
-import { Facet, Document, Search } from '../../@types/search';
-import { QueryFilter } from '../../@types/queryFilter';
-import useFetch from '../../hooks/useFetch';
-import { SearchContext } from './SearchContext';
-import { getUrlSearchParamsFromUrl } from '../../utils/url';
-import { WaykePubSub } from '../../index';
-import { ActionOnFilterUpdate } from '../../utils/pubsub/Actions';
-import usePath from '../Path/usePath';
-
-interface SearchProviderProps {
-  url: string;
-  apiKey?: string;
-  useQueryParamsFromUrl?: boolean;
-  pathRoute?: string;
-  children: React.ReactNode;
-}
-
-const initialSearchParams = new URLSearchParams();
-initialSearchParams.set('hits', '30');
-initialSearchParams.set('sort', 'published-desc');
-
-const SearchProvider = ({
-  url,
-  apiKey,
-  useQueryParamsFromUrl,
-  pathRoute,
-  children,
-}: SearchProviderProps) => {
-  const { replaceState, pushState } = usePath();
-  const [queryFilter, setQueryFilter] = useState<QueryFilter>({
-    searchParams: initialSearchParams,
-  });
-
-  const [initialFacets, setInitialFacets] = useState<Facet[]>();
-  const [documents, setDocuments] = useState<Document[]>();
-  const [initialize, setInitialize] = useState(false);
-
-  const { data: initialDataRepsonse } = useFetch<Search>(
-    `${url}?hits=0`,
-    {
-      headers: apiKey
-        ? {
-            'x-api-key': apiKey,
-          }
-        : {},
-    },
-    !!initialFacets
-  );
-
-  const query = queryFilter.searchParams.toString();
-  const {
-    loading,
-    data: response,
-    error,
-  } = useFetch<Search>(
-    `${url}${query ? `?${query}` : ''}`,
-    {
-      headers: apiKey
-        ? {
-            'x-api-key': apiKey,
-          }
-        : {},
-    },
-    !initialize || !!queryFilter?.block
-  );
-
-  const popStateEvent = (event: PopStateEvent) => {
-    const { currentTarget } = event;
-    if (currentTarget) {
-      const nextSearchParams = new URLSearchParams((currentTarget as Window).location.search);
-
-      if (!nextSearchParams.has('sort')) {
-        nextSearchParams.set('sort', 'published-desc');
-      }
-
-      setQueryFilter({
-        searchParams: nextSearchParams,
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (useQueryParamsFromUrl) {
-      window.addEventListener('popstate', popStateEvent);
-    }
-
-    const onFilterUpdateEvent: ActionOnFilterUpdate = {
-      actionName: 'onFilterUpdate',
-      callback: onFilterUpdate,
-    };
-
-    WaykePubSub.subscribeAction(onFilterUpdateEvent);
-    return () => {
-      window.removeEventListener('popstate', popStateEvent);
-      WaykePubSub.unsubscribeAction(onFilterUpdateEvent);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (initialDataRepsonse) {
-      setInitialFacets(initialDataRepsonse.facets);
-    }
-  }, [initialDataRepsonse]);
-
-  useEffect(() => {
-    if (useQueryParamsFromUrl) {
-      const nextSearchParams = new URLSearchParams(queryFilter.searchParams);
-      nextSearchParams.delete('hits');
-      nextSearchParams.delete('offset');
-      if (nextSearchParams.get('sort') === 'published-desc') {
-        nextSearchParams.delete('sort');
-      }
-
-      const nextSearch = nextSearchParams.toString() ? `?${nextSearchParams}` : '';
-      if (initialize) {
-        if (window.location.search.localeCompare(nextSearch) !== 0) {
-          const _path = pathRoute?.replace(/^\/|\/$/g, '');
-          const prefix = _path ? `/${_path}/` : '/';
-
-          const index = _path ? window.location.pathname.indexOf(prefix) : -1;
-          let pathname = window.location.pathname;
-          if (index > -1) {
-            pathname = pathname.substr(0, index);
-          }
-
-          pushState(`${pathname}${nextSearch}`);
-        }
-      }
-    }
-  }, [queryFilter, initialize, useQueryParamsFromUrl]);
-
-  useEffect(() => {
-    if (response) {
-      if (!initialFacets && !useQueryParamsFromUrl) {
-        setInitialFacets(response.facets);
-      }
-
-      if (useQueryParamsFromUrl && response.query?.parameters) {
-        const nextSearchParams = new URLSearchParams(response.query.parameters);
-        nextSearchParams.delete('hits');
-        nextSearchParams.delete('offset');
-        const nextSearch = nextSearchParams.toString() ? `?${nextSearchParams}` : '';
-        if (window.location.search.localeCompare(nextSearch) !== 0) {
-          replaceState(`${window.location.pathname}${nextSearch}`);
-          setQueryFilter({
-            searchParams: new URLSearchParams(nextSearch),
-            block: true,
-          });
-        }
-      }
-
-      if (queryFilter?.concatResult) {
-        setDocuments([...(documents || []), ...(response.documentList.documents || [])]);
-      } else {
-        setDocuments(response.documentList.documents || []);
-      }
-    }
-  }, [response, useQueryParamsFromUrl]);
-
-  const onFilterUpdate = useCallback(
-    (nextQuery: string) => {
-      {
-        if (!initialize) {
-          setInitialize(true);
-        }
-
-        setQueryFilter({
-          searchParams: new URLSearchParams(nextQuery),
-        });
-      }
-    },
-    [initialize]
-  );
-
-  const onLoadMore = useCallback(() => {
-    if (response) {
-      setQueryFilter({
-        searchParams: new URLSearchParams(response?.documentList.pagination.nextPage?.query),
-        concatResult: true,
-      });
-    }
-  }, [response]);
-
-  const onInitialize = useCallback(
-    (_initialQueryParams?: URLSearchParams) => {
-      if (!initialize) {
-        const searchParamsFromUrl = getUrlSearchParamsFromUrl();
-
-        const initialQueryParams = useQueryParamsFromUrl
-          ? searchParamsFromUrl
-          : _initialQueryParams;
-
-        if (useQueryParamsFromUrl && _initialQueryParams) {
-          _initialQueryParams.forEach((value, key) => {
-            if (!initialQueryParams?.getAll(key)?.some((v) => v === value)) {
-              initialQueryParams?.append(key, value);
-            }
-          });
-        }
-
-        if (initialQueryParams) {
-          const nextSearchParams = new URLSearchParams(initialQueryParams);
-          nextSearchParams.delete('hits');
-          nextSearchParams.delete('offset');
-
-          if (!initialQueryParams.has('hits')) {
-            initialQueryParams.set('hits', '30');
-          }
-          if (!initialQueryParams.has('sort')) {
-            initialQueryParams.set('sort', 'published-desc');
-          }
-
-          const nextSearch = nextSearchParams.toString() ? `?${nextSearchParams}` : '';
-
-          setQueryFilter({
-            searchParams: initialQueryParams,
-          });
-          replaceState(`${window.location.pathname}${nextSearch}`);
-        }
-        setInitialize(true);
-      }
-    },
-    [initialize]
-  );
-
-  const value = {
-    loading,
-    error,
-    response,
-    documents,
-    initialFacets,
-    queryFilter,
-    onFilterUpdate,
-    onLoadMore,
-    onInitialize,
-  };
-
-  return <SearchContext.Provider value={value}>{children}</SearchContext.Provider>;
-};
-
-export default SearchProvider;

package/src/State/Settings/SettingsContext.ts

@@ -1,15 +0,0 @@
-import { createContext } from 'react';
-
-export interface SettingsContextProps {
-  googleMapsApiKey?: string;
-  googleMapsMarker?: string;
-  ecomSettings?: {
-    url: string;
-    useBankId?: boolean;
-    displayBankIdAlert?: boolean;
-    serviceLogotypeUrl?: string;
-    bankIdThumbprint?: string;
-  };
-}
-
-export const SettingsContext = createContext<SettingsContextProps>({});

package/src/State/Settings/SettingsProvider.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { SettingsContext } from './SettingsContext';
-import { EcomSettings } from '../../providers/WaykeProvider';
-
-interface SettingsProps {
-  ecomSettings?: EcomSettings;
-  googleMapsApiKey?: string;
-  googleMapsMarker?: string;
-  children: React.ReactNode;
-}
-
-const SettingsProvider = ({
-  googleMapsApiKey,
-  googleMapsMarker,
-  ecomSettings,
-  children,
-}: SettingsProps) => (
-  <SettingsContext.Provider value={{ ecomSettings, googleMapsApiKey, googleMapsMarker }}>
-    {children}
-  </SettingsContext.Provider>
-);
-
-export default SettingsProvider;

package/src/components/Accordion/index.tsx

@@ -1,57 +0,0 @@
-import React, { useState, useCallback } from 'react';
-
-import {
-  List,
-  Item,
-  Header,
-  Label,
-  Heading,
-  Indicator,
-  IndicatorValue,
-  Icon,
-  Body,
-} from './wrapper';
-import { IconChevronDown } from '../Icon/index';
-
-export interface IAccordionItem {
-  heading: string;
-  activeCount?: number;
-  children: React.ReactNode;
-  isActive?: boolean;
-}
-
-export interface IAccordion {
-  children?: React.ReactNode;
-}
-
-export const AccordionItem = ({ heading, children, activeCount, isActive }: IAccordionItem) => {
-  const [extend, setExtend] = useState(isActive || false);
-  const onToggleExtend = useCallback(() => setExtend(!extend), [extend]);
-
-  return (
-    <Item isOpen={extend}>
-      <Header onClick={onToggleExtend} title="Visa mer">
-        <Label>
-          <Heading
-            className={activeCount && activeCount > 0 ? 'wayke__theme wayke__font--bold' : ''}
-          >
-            {heading}
-          </Heading>
-          {activeCount && activeCount > 0 && (
-            <Indicator>
-              <IndicatorValue>{activeCount}</IndicatorValue>
-            </Indicator>
-          )}
-        </Label>
-        <Icon>
-          <IconChevronDown block />
-        </Icon>
-      </Header>
-      <Body>{children}</Body>
-    </Item>
-  );
-};
-
-const Accordion = ({ children }: IAccordion) => <List>{children}</List>;
-
-export default Accordion;

package/src/components/ActionList/index.tsx

@@ -1,48 +0,0 @@
-import React, { useCallback } from 'react';
-
-import ToggleItem from './toggle-item';
-import { Maybe, ContactOptions, Branch } from '../../@types/codegen';
-import { formatPhonenumber } from '../../utils/phonenumbers';
-import PubSub from '../../utils/pubsub/pubsub';
-
-interface ActionListProps {
-  branch?: Maybe<Branch>;
-  contact?: Maybe<ContactOptions>;
-}
-
-const ActionList = ({ contact, branch }: ActionListProps) => {
-  const email = contact?.email || branch?.contact?.email;
-  const phonenumber = contact?.phonenumber || branch?.contact?.phonenumber;
-
-  const onClickMailVisible = useCallback(() => PubSub.publish('MailVisible'), []);
-  const onClickPhoneVisible = useCallback(() => PubSub.publish('PhonenumberVisible'), []);
-  const onClickPhoneValue = useCallback(() => PubSub.publish('PhonenumberCall'), []);
-
-  if (!email && !phonenumber) {
-    return null;
-  }
-
-  return (
-    <>
-      {email && (
-        <ToggleItem
-          onClickVisible={onClickMailVisible}
-          title="Visa mailadress"
-          value={email}
-          type="mailto"
-        />
-      )}
-      {phonenumber && (
-        <ToggleItem
-          title="Visa telefonnummer"
-          value={formatPhonenumber(phonenumber)}
-          type="tel"
-          onClickVisible={onClickPhoneVisible}
-          onClickValue={onClickPhoneValue}
-        />
-      )}
-    </>
-  );
-};
-
-export default ActionList;