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

package/src/components/Video/useThumbnail.ts

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

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

@@ -0,0 +1,29 @@
+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/useFetch.ts

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

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

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

@@ -0,0 +1,22 @@
+import { useQuery, QueryResult } from '@apollo/client';
+import INSURANCE_CALCULATION from '../queries/INSURANCE_CALCULATION';
+
+import { DrivingDistance, QueryInsurancesArgs, Query } from '../@types/codegen/types';
+
+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

@@ -0,0 +1,21 @@
+import { useQuery, QueryResult } from '@apollo/client';
+import LOAN_CALCULATION from '../queries/LOAN_CALCULATION';
+import { QueryLoanArgs, Query } from '../@types/codegen/types';
+
+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

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

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

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

@@ -0,0 +1,11 @@
+import { useQuery, QueryResult } from '@apollo/client';
+import SEARCH_ITEM_QUERY from '../queries/SEARCH_ITEM_QUERY';
+import { QueryVehicleArgs, Query } from '../@types/codegen/types';
+
+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

@@ -0,0 +1,14 @@
+import { useQuery, QueryResult } from '@apollo/client';
+import SEARCH_ITEM_BRANCH_QUERY from '../queries/SEARCH_ITEM_BRANCH_QUERY';
+import { QueryVehicleArgs, Query } from '../@types/codegen/types';
+
+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

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

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import '../example/src/assets/style/theme.css';
+import '../example/src/assets/style/ecom.css';
+import '../assets/default.css';
+
+import WaykeComposite, { WaykePubSub } from '.';
+
+WaykePubSub.subscribe({
+  eventName: 'All',
+  // eslint-disable-next-line
+  callback: (eventName, data) => console.log('subscribed All:', eventName, data),
+});
+
+window.addEventListener('DOMContentLoaded', (_) => {
+  const container = document.getElementById('root');
+  const root = createRoot(container!);
+  root.render(
+    <WaykeComposite
+      composite={{
+        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,
+      }}
+    />
+  );
+});

package/src/index-esbuild.ts

@@ -0,0 +1,74 @@
+import '../assets/default.css';
+
+import WaykeSearch, { WaykeSearchProps } from './layouts/search/index';
+import WaykeSearchItem, { WaykeSearchItemProps } from './layouts/searchItem/index';
+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 type { SearchFilterTypes, SearchFilterNameTypes } from './@types/filter';
+
+import type {
+  EventHashRouteChange,
+  EventItemClicked,
+  EventEcomOnInit,
+  EventEcomOnUser,
+  EventEcomOnExit,
+  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,
+  EventEcomOnInit,
+  EventEcomOnUser,
+  EventEcomOnExit,
+  EventImagesClick,
+  EventOptionsClick,
+  EventPhonenumberVisible,
+  EventPhonenumberCall,
+  EventMailVisible,
+  EventInsuranceInterest,
+  EventFinanceInterest,
+  EventAll,
+  EventType,
+  EventNames,
+  CallbackHashRouteChange,
+  CallbackEventItemClicked,
+  CallbackEcomOnUserEvent,
+  CallbackEmpty,
+};
+
+export default WaykeComposite;

package/src/index.ts

@@ -0,0 +1,72 @@
+import WaykeSearch, { WaykeSearchProps } from './layouts/search/index';
+import WaykeSearchItem, { WaykeSearchItemProps } from './layouts/searchItem/index';
+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 type { SearchFilterTypes, SearchFilterNameTypes } from './@types/filter';
+
+import type {
+  EventHashRouteChange,
+  EventItemClicked,
+  EventEcomOnInit,
+  EventEcomOnUser,
+  EventEcomOnExit,
+  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,
+  EventEcomOnInit,
+  EventEcomOnUser,
+  EventEcomOnExit,
+  EventImagesClick,
+  EventOptionsClick,
+  EventPhonenumberVisible,
+  EventPhonenumberCall,
+  EventMailVisible,
+  EventInsuranceInterest,
+  EventFinanceInterest,
+  EventAll,
+  EventType,
+  EventNames,
+  CallbackHashRouteChange,
+  CallbackEventItemClicked,
+  CallbackEcomOnUserEvent,
+  CallbackEmpty,
+};
+
+export default WaykeComposite;

package/src/layout/helpers.tsx

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

package/{dist-src/layout/keyframes.js → src/layout/keyframes.tsx}

@@ -1,10 +1,12 @@
 import { keyframes } from 'styled-components';
-export const noTransform = keyframes `
+
+export const noTransform = keyframes`
     to {
         transform: none;
     }
 `;
-export const fadeIn = keyframes `
+
+export const fadeIn = keyframes`
     from {
         opacity: 0;
     }
@@ -13,7 +15,8 @@ export const fadeIn = keyframes `
         opacity: 1;
     }
 `;
-export const rotate = keyframes `
+
+export const rotate = keyframes`
     to {
         transform: rotate(360deg);
     }