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

package/src/State/CentralStorage/CentralStorageProvider.tsx

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

@@ -0,0 +1,37 @@
+import { useContext, useEffect } from 'react';
+import { CentralStorageContext } from './CentralStorageContext';
+import { Vehicle } from '../../@types/codegen/types';
+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

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

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

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

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

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

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

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

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

@@ -0,0 +1,243 @@
+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/{dist-src/State/Search/useSearch.js → src/State/Search/useSearch.ts}

@@ -1,4 +1,6 @@
 import { useContext } from 'react';
 import { SearchContext } from './SearchContext';
+
 const useSearch = () => useContext(SearchContext);
+
 export default useSearch;

package/src/State/Settings/SettingsContext.ts

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

@@ -0,0 +1,23 @@
+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/{dist-src/State/Settings/useSettings.js → src/State/Settings/useSettings.ts}

@@ -1,4 +1,7 @@
 import { useContext } from 'react';
+
 import { SettingsContext } from './SettingsContext';
+
 const useSettings = () => useContext(SettingsContext);
+
 export default useSettings;

package/src/components/Accordion/index.tsx

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