@wayke-se/components-react 2.16.0 → 3.0.0-beta.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/useEcom.ts

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

@@ -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';
+
+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';
+
+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';
+
+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';
+
+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,144 @@
+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

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

@@ -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);
     }