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

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/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

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

@@ -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/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

@@ -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/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

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

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

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

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

package/src/layout/keyframes.tsx

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

package/src/layout/theme.ts

@@ -1,60 +0,0 @@
-const _colors = {
-  black: '#000',
-  white: '#fff',
-  gray: '#ddd',
-  grayLight: '#f8f8f8',
-  grayLightTransparent: 'rgba(248, 248, 248, 0)',
-  grayLightDarker: '#ebebeb',
-  grayDark: '#717171',
-  blue: '#1d61ca',
-  ui: {
-    greenLight: '#cdf5c8',
-    green: '#2b8747',
-    redLight: '#ffd0d0',
-    red: '#c71f1f',
-    yellowLight: '#fff4c7',
-    blueLight: '#daf7fc',
-  },
-};
-
-const theme = {
-  color: {
-    bg: _colors.white,
-    link: _colors.blue,
-    accent: _colors.grayLight,
-    accentTransparent: _colors.grayLightTransparent,
-    accentDark: _colors.grayLightDarker,
-    border: _colors.gray,
-    textDark: _colors.black,
-    textDarkLighten: _colors.grayDark,
-    textLight: _colors.white,
-    hoverOverlay: 'rgba(0, 0, 0, 0.04)',
-    disabledBg: _colors.gray,
-    disabledText: _colors.grayDark,
-    placeholder: _colors.grayDark,
-    ui: {
-      positiveLight: _colors.ui.greenLight,
-      positive: _colors.ui.green,
-      neutralLight: _colors.ui.yellowLight,
-      negativeLight: _colors.ui.redLight,
-      negative: _colors.ui.red,
-      infoLight: _colors.ui.blueLight,
-    },
-  },
-  breakpoint: {
-    Sm: '@media (min-width: 600px)',
-    LtSm: '@media (max-width: 599px)',
-    Md: '@media (min-width: 900px)',
-    LtMd: '@media (max-width: 899px)',
-    Lg: '@media (min-width: 1200px)',
-    LtLg: '@media (max-width: 1199px)',
-  },
-  distances: {
-    baseUnit: '8px',
-    inputHeight: '48px',
-    containerMaxWidth: '1312px',
-  },
-};
-
-export type Theme = typeof theme;
-export default theme;

package/src/layouts/WaykeComposite.tsx

@@ -1,64 +0,0 @@
-import React, { useEffect } from 'react';
-import useHashGuid from '../hooks/useHashGuid';
-import PubSub from '../utils/pubsub/pubsub';
-
-import WaykeSearch, { WaykeSearchProps } from './search/index';
-import WaykeSearchItem, { WaykeSearchItemProps } from './searchItem/index';
-import usePath from '../State/Path/usePath';
-
-export type WaykeCompositeProps = Omit<WaykeSearchProps & WaykeSearchItemProps, 'id'>;
-
-const WaykeComposite = ({
-  filterList,
-  initialQueryParams,
-  removeSearchBar,
-  removeFilterOptions,
-  disableResetScrollOnInit,
-  placeholderImage,
-  pathRoute,
-  modifyDocumentTitleItem,
-  modifyDocumentTitleSearch,
-}: WaykeCompositeProps) => {
-  const hashId = useHashGuid();
-  const { id: pathId } = usePath();
-
-  useEffect(() => {
-    if (!pathRoute) {
-      if (hashId) {
-        PubSub.publish('HashRouteChange', hashId);
-      } else {
-        PubSub.publish('HashRouteChange');
-      }
-    }
-  }, [hashId]);
-
-  const id = pathId || hashId;
-
-  return (
-    <>
-      {id ? (
-        <WaykeSearchItem
-          id={id}
-          hashRoute={!pathRoute}
-          disableResetScrollOnInit={disableResetScrollOnInit}
-          placeholderImage={placeholderImage}
-          pathRoute={pathRoute}
-          modifyDocumentTitleItem={modifyDocumentTitleItem}
-        />
-      ) : (
-        <WaykeSearch
-          filterList={filterList}
-          initialQueryParams={initialQueryParams}
-          removeSearchBar={removeSearchBar}
-          hashRoute={!pathRoute}
-          placeholderImage={placeholderImage}
-          pathRoute={pathRoute}
-          removeFilterOptions={removeFilterOptions}
-          modifyDocumentTitleSearch={modifyDocumentTitleSearch}
-        />
-      )}
-    </>
-  );
-};
-
-export default WaykeComposite;

package/src/layouts/WaykeCompositeWithProvider.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import WaykeProvider, { WaykeProviderProps } from '../providers/WaykeProvider';
-import WaykeComposite, { WaykeCompositeProps } from './WaykeComposite';
-
-export interface WaykeCompositeWithProviderProps {
-  provider: WaykeProviderProps;
-  composite?: WaykeCompositeProps;
-}
-
-const WaykeCompositeWithProvider = ({ provider, composite }: WaykeCompositeWithProviderProps) => (
-  <WaykeProvider {...provider}>
-    <WaykeComposite {...composite} />
-  </WaykeProvider>
-);
-
-export default WaykeCompositeWithProvider;