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

package/src/components/Video/useThumbnail.ts

@@ -1,28 +0,0 @@
-import { useEffect, useState } from 'react';
-import { getVimeoId, getYoutubeThumbnail } from './utils';
-import useVimeoThumbnail from '../../hooks/useVimeoThumbnail';
-
-const useThumbnail = (url?: string | null, small?: boolean) => {
-  if (url?.toLowerCase().endsWith('.mp4')) return;
-
-  const [thumbnail, setThumbnail] = useState<string[]>();
-  const vimeoId = url ? getVimeoId(url) : undefined;
-  const vimeoThumbnail = useVimeoThumbnail(vimeoId, small);
-
-  useEffect(() => {
-    if (url) {
-      const youtubeThumbnail = getYoutubeThumbnail(url);
-      if (youtubeThumbnail) {
-        if (small) {
-          setThumbnail([youtubeThumbnail.mqdefault]);
-        } else {
-          setThumbnail([youtubeThumbnail.maxresdefault, youtubeThumbnail.hqdefault]);
-        }
-      }
-    }
-  }, [url]);
-
-  return vimeoThumbnail ? [vimeoThumbnail] : thumbnail;
-};
-
-export default useThumbnail;

package/src/components/Video/utils.ts

@@ -1,47 +0,0 @@
-export const getVimeoId = (url: string): string => {
-  const regExp = /\/(\d+)/;
-  const match = url.match(regExp);
-  return match && match[1].length > 3 ? match[1] : '';
-};
-
-export const getYouTubeId = (url: string): string => {
-  const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
-  const match = url.match(regExp);
-  return match && match[7].length === 11 ? match[7] : '';
-};
-
-const youtubeBase = 'https://img.youtube.com/vi/';
-export const getYoutubeThumbnail = (url: string) => {
-  const id = getYouTubeId(url);
-  if (!id) {
-    return undefined;
-  }
-  return {
-    maxresdefault: `${youtubeBase}${id}/maxresdefault.jpg`,
-    hqdefault: `${youtubeBase}${id}/hqdefault.jpg`,
-    mqdefault: `${youtubeBase}${id}/mqdefault.jpg`,
-  };
-};
-
-export const onImageLoad = (
-  e: React.SyntheticEvent<HTMLImageElement, Event>,
-  thumbnail?: string[]
-) => {
-  if (
-    thumbnail?.length === 2 &&
-    e.currentTarget.src === thumbnail[0] &&
-    e.currentTarget.naturalWidth === 120 &&
-    e.currentTarget.naturalHeight === 90
-  ) {
-    e.currentTarget.src = thumbnail[1];
-  }
-};
-
-export const onImageError = (
-  e: React.SyntheticEvent<HTMLImageElement, Event>,
-  thumbnail?: string[]
-) => {
-  if (thumbnail?.length === 2) {
-    e.currentTarget.src = thumbnail[1];
-  }
-};

package/src/components/Video/wrapper.tsx

@@ -1,29 +0,0 @@
-import styled from 'styled-components';
-
-type WrapperProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLDivElement>,
-  HTMLDivElement
-> & {
-  ratio?: string;
-  isPreview?: boolean;
-};
-
-export const Wrapper = styled.div<WrapperProps>`
-  position: relative;
-  width: 100%;
-  height: ${(props) => (props.isPreview ? '100%' : 0)};
-  padding-bottom: ${(props): string => (props.ratio ? props.ratio : '56.25%')};
-`;
-
-export const Iframe = styled.iframe.attrs(() => ({
-  width: '100%',
-  height: '100%',
-  allowFullScreen: true,
-  frameBorder: '0',
-}))`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-`;

package/src/hooks/useEcom.ts

@@ -1,21 +0,0 @@
-import { EcomSettings } from '../providers/WaykeProvider';
-
-const useEcom = (ecomSettings?: EcomSettings) => {
-  if (ecomSettings?.url) {
-    import('@wayke-se/ecom').then(({ config }) => {
-      config.bind({
-        api: {
-          address: ecomSettings.url,
-        },
-        /** Specifying an origin is optional **/
-        origin: {
-          topic: 'Wayke',
-          channel: 'wayke.se',
-        },
-        bankIdThumbprint: ecomSettings.bankIdThumbprint,
-      });
-    });
-  }
-};
-
-export default useEcom;

package/src/hooks/useFetch.ts

@@ -1,88 +0,0 @@
-import { useEffect, useState, useCallback } from 'react';
-
-const cache: { [key: string]: unknown | undefined } = {};
-
-const getCachedResult = <T>(key: string) => (cache?.[key] as T) || undefined;
-const setCachedResult = <T>(key: string, value: T) => {
-  cache[key] = value;
-};
-
-/**
- * Reusing already fired request by attaching to same promise.
- * Usefull if multiple request is fetching from same endpoint, while
- * the first request has not been finished (so no cache exist yet).
- */
-
-let pendingPromise: { [key: string]: Promise<globalThis.Response> } = {};
-const isPendingPromise = (url: string) => !!pendingPromise[url];
-const setPendingPromise = (url: string, promise: Promise<globalThis.Response>) => {
-  pendingPromise = {
-    ...pendingPromise,
-    [url]: promise,
-  };
-};
-const clearPendingPromise = (url: string) => {
-  delete pendingPromise[url];
-};
-
-interface Response<T> {
-  loading: boolean;
-  data?: T;
-  error: boolean;
-}
-
-const useFetch = <T>(
-  path: RequestInfo,
-  options?: RequestInit,
-  skip?: boolean,
-  promiseCache?: boolean
-): Response<T> => {
-  const [data, setData] = useState<T | undefined>();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(false);
-
-  const doFetch = useCallback(async () => {
-    const key = path.toString();
-    const cached = getCachedResult<T>(key);
-    setError(false);
-    if (cached) {
-      setData(cached);
-      return;
-    }
-    setLoading(true);
-    try {
-      const reusePromise = promiseCache && isPendingPromise(key);
-      const request = reusePromise ? pendingPromise[key] : fetch(path, options);
-      if (promiseCache) {
-        setPendingPromise(key, request);
-      }
-
-      const result = await request;
-      if (result.ok) {
-        const json = await result.clone().json();
-        setCachedResult(key, json);
-        setData(json);
-      }
-    } catch (e) {
-      setError(true);
-    } finally {
-      setLoading(false);
-      clearPendingPromise(key);
-    }
-    return;
-  }, [path, options]);
-
-  useEffect(() => {
-    if (!skip) {
-      doFetch();
-    }
-  }, [path, skip]);
-
-  return {
-    loading,
-    data,
-    error,
-  };
-};
-
-export default useFetch;

package/src/hooks/useHasBeenVisible.ts

@@ -1,17 +0,0 @@
-import { useEffect, useState } from 'react';
-import useOnScreen from './useOnScreen';
-
-const useHasBeenVisible = (ref: React.MutableRefObject<HTMLElement | null>) => {
-  const isVisible = useOnScreen(ref);
-  const [hasBeenVisible, setHasBeenVisible] = useState(false);
-
-  useEffect(() => {
-    if (isVisible && !hasBeenVisible) {
-      setHasBeenVisible(true);
-    }
-  }, [isVisible]);
-
-  return hasBeenVisible;
-};
-
-export default useHasBeenVisible;

package/src/hooks/useHashGuid.ts

@@ -1,33 +0,0 @@
-import { useState, useEffect } from 'react';
-
-const regexGuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
-const HASH_CHANGE = 'hashchange';
-
-const getGuid = () => {
-  const guid = window.location.hash.substr(1, window.location.hash.length);
-  return regexGuid.test(guid) || !guid ? guid : undefined;
-};
-
-const useHashGuid = () => {
-  const [id, setId] = useState<string | undefined>(() => getGuid());
-  const onHashChange = () => {
-    const guid = window.location.hash.substr(1, window.location.hash.length);
-    if (regexGuid.test(guid) || !guid) {
-      setId(window.location.hash.substr(1, window.location.hash.length));
-    } else {
-      throw 'Invalid Guid';
-    }
-  };
-
-  useEffect(() => {
-    onHashChange();
-    window.addEventListener(HASH_CHANGE, onHashChange);
-    return () => {
-      window.removeEventListener(HASH_CHANGE, onHashChange);
-    };
-  }, []);
-
-  return id;
-};
-
-export default useHashGuid;

package/src/hooks/useInsurance.ts

@@ -1,22 +0,0 @@
-import { useQuery, QueryResult } from '@apollo/client';
-import INSURANCE_CALCULATION from '../queries/INSURANCE_CALCULATION';
-
-import { DrivingDistance, QueryInsurancesArgs, Query } from '../@types/codegen';
-
-const useInsuranceCalculation = (
-  id: string,
-  branchId?: string,
-  personalNumber?: string,
-  drivingDistance?: DrivingDistance
-): QueryResult<Query, QueryInsurancesArgs> =>
-  useQuery<Query, QueryInsurancesArgs>(INSURANCE_CALCULATION, {
-    variables: {
-      id,
-      branch: branchId as string,
-      personalNumber: personalNumber as string,
-      drivingDistance: drivingDistance as DrivingDistance,
-    },
-    skip: personalNumber === undefined || drivingDistance === undefined || branchId === undefined,
-  });
-
-export default useInsuranceCalculation;

package/src/hooks/useLoan.ts

@@ -1,21 +0,0 @@
-import { useQuery, QueryResult } from '@apollo/client';
-import LOAN_CALCULATION from '../queries/LOAN_CALCULATION';
-import { QueryLoanArgs, Query } from '../@types/codegen';
-
-const useLoanCalculation = (
-  id: string,
-  duration?: number,
-  downPayment?: number,
-  residual?: number
-): QueryResult<Query, QueryLoanArgs> =>
-  useQuery<Query, QueryLoanArgs>(LOAN_CALCULATION, {
-    variables: {
-      id,
-      duration: duration as number,
-      downPayment: downPayment as number,
-      residual: (residual as number) || 0,
-    },
-    skip: duration === undefined || downPayment === undefined,
-  });
-
-export default useLoanCalculation;

package/src/hooks/useOnScreen.ts

@@ -1,20 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const useOnScreen = (ref: React.MutableRefObject<HTMLElement | null>) => {
-  const [isIntersecting, setIntersecting] = useState(false);
-
-  const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting));
-
-  useEffect(() => {
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-
-  return isIntersecting;
-};
-
-export default useOnScreen;

package/src/hooks/useOutsideClick.ts

@@ -1,19 +0,0 @@
-import { useEffect } from 'react';
-
-const useOutsideClick = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
-  const handleClick = (e: MouseEvent) => {
-    if (ref.current && e.target && !ref.current.contains(e.target as Node)) {
-      callback();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('click', handleClick);
-
-    return () => {
-      document.removeEventListener('click', handleClick);
-    };
-  });
-};
-
-export default useOutsideClick;

package/src/hooks/usePrevious.ts

@@ -1,11 +0,0 @@
-import { useRef, useEffect } from 'react';
-
-const usePrevious = <T>(value: T) => {
-  const ref = useRef<T>();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};
-
-export default usePrevious;

package/src/hooks/useSearchItem.ts

@@ -1,11 +0,0 @@
-import { useQuery, QueryResult } from '@apollo/client';
-import SEARCH_ITEM_QUERY from '../queries/SEARCH_ITEM_QUERY';
-import { QueryVehicleArgs, Query } from '../@types/codegen';
-
-const useSearchItem = (id?: string): QueryResult<Query, QueryVehicleArgs> =>
-  useQuery<Query, QueryVehicleArgs>(SEARCH_ITEM_QUERY, {
-    variables: { id: id as string },
-    skip: !id,
-  });
-
-export default useSearchItem;

package/src/hooks/useSearchItemBranch.ts

@@ -1,14 +0,0 @@
-import { useQuery, QueryResult } from '@apollo/client';
-import SEARCH_ITEM_BRANCH_QUERY from '../queries/SEARCH_ITEM_BRANCH_QUERY';
-import { QueryVehicleArgs, Query } from '../@types/codegen';
-
-const useSearchItemBranch = (
-  id?: string | null,
-  branch?: string | null
-): QueryResult<Query, QueryVehicleArgs> =>
-  useQuery<Query, QueryVehicleArgs>(SEARCH_ITEM_BRANCH_QUERY, {
-    variables: { id: id as string, branch: branch as string },
-    skip: !id || !branch,
-  });
-
-export default useSearchItemBranch;

package/src/hooks/useSessionStorage.ts

@@ -1,32 +0,0 @@
-import { useState, useCallback } from 'react';
-
-const useSessionStorage = (key: string) => {
-  const [value, setValue] = useState(sessionStorage.getItem(key));
-
-  const set = useCallback(
-    (v: string) => {
-      sessionStorage.setItem(key, v);
-      setValue(v);
-    },
-    [key]
-  );
-
-  const remove = useCallback(() => {
-    sessionStorage.removeItem(key);
-    setValue(null);
-  }, [key]);
-
-  const clear = useCallback(() => {
-    sessionStorage.clear();
-    setValue(null);
-  }, [key]);
-
-  return {
-    value,
-    set,
-    remove,
-    clear,
-  };
-};
-
-export default useSessionStorage;

package/src/hooks/useVimeoThumbnail.ts

@@ -1,31 +0,0 @@
-import { useEffect, useState } from 'react';
-import useFetch from './useFetch';
-
-interface VimeoItem {
-  thumbnail_large: string;
-  thumbnail_small: string;
-}
-
-const useVimeoThumbnail = (id?: string, small?: boolean) => {
-  const [thumbnail, setThumbnail] = useState<string>();
-  const { data } = useFetch<VimeoItem[]>(
-    `http://vimeo.com/api/v2/video/${id}.json`,
-    {},
-    !id || !!thumbnail,
-    true
-  );
-
-  useEffect(() => {
-    if (data?.[0]) {
-      if (small && data[0].thumbnail_small) {
-        setThumbnail(data[0].thumbnail_small);
-      } else if (data[0].thumbnail_large) {
-        setThumbnail(data[0].thumbnail_large);
-      }
-    }
-  }, [data]);
-
-  return thumbnail;
-};
-
-export default useVimeoThumbnail;

package/src/index-dev.tsx

@@ -1,144 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import '@wayke-se/ecom-web/dist/index.css';
-
-import WaykeComposite, {
-  WaykePubSub,
-  WaykeProvider,
-  WaykeItemProvider,
-  WaykeSearch,
-  WaykeSearchItem,
-} from '.';
-
-WaykePubSub.subscribe({
-  eventName: 'All',
-  // eslint-disable-next-line
-  callback: (eventName, data) => console.log('subscribed All:', eventName, data),
-});
-
-type InitType = 'hash' | 'default' | 'path' | 'search' | 'item';
-
-const App = ({ type }: { type: InitType }) => {
-  switch (type) {
-    case 'hash':
-      return (
-        <WaykeComposite
-          composite={{
-            // initialQueryParams,
-            removeSearchBar: false,
-          }}
-          provider={{
-            graphQlUrl: process.env.WAYKE_GRAPH_QL_URL as string,
-            url: process.env.WAYKE_SEARCH_URL as string,
-            urlMlt: process.env.WAYKE_SEARCH_MLT_URL as string,
-            ecomSettings: {
-              url: process.env.WAYKE_ECOM_URL as string,
-              useBankId: true,
-              serviceLogotypeUrl: 'https://cdn.wayke.se/wui/images/ecom/wayke-logo.svg',
-            },
-            //googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY as string,
-            googleMapsMarker: 'https://www.wayke.se/images/map/marker.png',
-            useQueryParamsFromUrl: true,
-          }}
-        />
-      );
-
-    case 'path':
-      return (
-        <WaykeComposite
-          composite={{
-            // initialQueryParams,
-            removeSearchBar: false,
-            pathRoute: '/id/',
-            modifyDocumentTitleItem: true,
-            modifyDocumentTitleSearch: 'Wayke',
-            initialQueryParams: 'modelSeries=A5&modelSeries=A3',
-          }}
-          provider={{
-            graphQlUrl: process.env.WAYKE_GRAPH_QL_URL as string,
-            url: process.env.WAYKE_SEARCH_URL as string,
-            urlMlt: process.env.WAYKE_SEARCH_MLT_URL as string,
-            ecomSettings: {
-              url: process.env.WAYKE_ECOM_URL as string,
-              useBankId: true,
-              serviceLogotypeUrl: 'https://cdn.wayke.se/wui/images/ecom/wayke-logo.svg',
-            },
-            //googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY as string,
-            googleMapsMarker: 'https://www.wayke.se/images/map/marker.png',
-            useQueryParamsFromUrl: true,
-            pathRoute: '/id/',
-          }}
-        />
-      );
-
-    case 'search':
-      return (
-        <WaykeProvider
-          graphQlUrl={process.env.WAYKE_GRAPH_QL_URL as string}
-          url={process.env.WAYKE_SEARCH_URL as string}
-          urlMlt={process.env.WAYKE_SEARCH_MLT_URL as string}
-          ecomSettings={{
-            url: process.env.WAYKE_ECOM_URL as string,
-            useBankId: true,
-            serviceLogotypeUrl: 'https://cdn.wayke.se/wui/images/ecom/wayke-logo.svg',
-          }}
-          //googleMapsApiKey={process.env.GOOGLE_MAPS_API_KEY as string}
-        >
-          <WaykeSearch
-            onClickSearchItem={(id: string) => {
-              //eslint-disable-next-line
-              console.log(id);
-            }}
-          />
-        </WaykeProvider>
-      );
-
-    case 'item':
-      return (
-        <WaykeItemProvider
-          graphQlUrl={process.env.WAYKE_GRAPH_QL_URL as string}
-          url={process.env.WAYKE_SEARCH_URL as string}
-          urlMlt={process.env.WAYKE_SEARCH_MLT_URL as string}
-          ecomSettings={{
-            url: process.env.WAYKE_ECOM_URL as string,
-            useBankId: true,
-            serviceLogotypeUrl: 'https://cdn.wayke.se/wui/images/ecom/wayke-logo.svg',
-          }}
-          //googleMapsApiKey={process.env.GOOGLE_MAPS_API_KEY as string}
-        >
-          <WaykeSearchItem id="6fa0161f-abc9-4544-8ba3-c648613a77b7" />
-        </WaykeItemProvider>
-      );
-
-    case 'default':
-    default:
-      return (
-        <WaykeComposite
-          composite={{
-            // initialQueryParams,
-            removeSearchBar: false,
-            removeFilterOptions: false,
-            modifyDocumentTitleItem: true,
-            modifyDocumentTitleSearch: 'Wayke',
-          }}
-          provider={{
-            graphQlUrl: process.env.WAYKE_GRAPH_QL_URL as string,
-            url: process.env.WAYKE_SEARCH_URL as string,
-            urlMlt: process.env.WAYKE_SEARCH_MLT_URL as string,
-            ecomSettings: {
-              url: process.env.WAYKE_ECOM_URL as string,
-              useBankId: true,
-              serviceLogotypeUrl: 'https://cdn.wayke.se/wui/images/ecom/wayke-logo.svg',
-            },
-            //googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY as string,
-            googleMapsMarker: 'https://www.wayke.se/images/map/marker.png',
-            useQueryParamsFromUrl: true,
-          }}
-        />
-      );
-  }
-};
-
-const container = document.getElementById('root');
-const root = createRoot(container!);
-root.render(<App type="default" />);

package/src/index.ts

@@ -1,70 +0,0 @@
-import './styles.scss';
-
-import WaykeSearch, { WaykeSearchProps } from './layouts/search';
-import WaykeSearchItem, { WaykeSearchItemProps } from './layouts/searchItem';
-import WaykeProvider, { WaykeProviderSettings } from './providers/WaykeProvider';
-import WaykeComposite, {
-  WaykeCompositeWithProviderProps,
-} from './layouts/WaykeCompositeWithProvider';
-import SearchBar from './components/SearchBar/index';
-import WaykeThemeProvider from './providers/themeProvider';
-import WaykeItemProvider, { WaykeItemProviderSettings } from './providers/WaykeItemProvidet';
-import WaykePubSub, { EventSubscriptions } from './utils/pubsub/pubsub';
-import { SearchFilterTypes, SearchFilterNameTypes } from './@types/filter';
-
-import {
-  EventHashRouteChange,
-  EventItemClicked,
-  EventEcomOnUser,
-  EventImagesClick,
-  EventOptionsClick,
-  EventPhonenumberVisible,
-  EventPhonenumberCall,
-  EventMailVisible,
-  EventInsuranceInterest,
-  EventFinanceInterest,
-  EventAll,
-  EventType,
-  EventNames,
-  CallbackHashRouteChange,
-  CallbackEventItemClicked,
-  CallbackEcomOnUserEvent,
-  CallbackEmpty,
-} from './utils/pubsub/Events';
-
-export {
-  WaykeProvider,
-  WaykeItemProvider,
-  WaykeSearch,
-  WaykeSearchItem,
-  SearchBar,
-  WaykeThemeProvider,
-  WaykeItemProviderSettings,
-  WaykePubSub,
-  WaykeCompositeWithProviderProps,
-  WaykeProviderSettings,
-  WaykeSearchProps,
-  WaykeSearchItemProps,
-  SearchFilterTypes,
-  SearchFilterNameTypes,
-  EventSubscriptions,
-  EventHashRouteChange,
-  EventItemClicked,
-  EventEcomOnUser,
-  EventImagesClick,
-  EventOptionsClick,
-  EventPhonenumberVisible,
-  EventPhonenumberCall,
-  EventMailVisible,
-  EventInsuranceInterest,
-  EventFinanceInterest,
-  EventAll,
-  EventType,
-  EventNames,
-  CallbackHashRouteChange,
-  CallbackEventItemClicked,
-  CallbackEcomOnUserEvent,
-  CallbackEmpty,
-};
-
-export default WaykeComposite;

package/src/layout/helpers.tsx

@@ -1,6 +0,0 @@
-import theme from './theme';
-
-export const size = (multiplier = 1) => {
-  const baseUnit = parseFloat(theme.distances.baseUnit);
-  return `${multiplier * baseUnit}px`;
-};