1import {ReactNode, useState} from 'react';
 2import {Helmet} from 'react-helmet';
 3import useGTM from '../hooks/useGTM';
 4import GenericToolbar from '../containers/GenericToolbar';
 5import {ActionType} from '../containers/GenericMenu/Action';
 6import Box from '@material-ui/core/Box';
 7import Banner from '../components/Banner';
 8import useSettings from '../hooks/useSettings';
 9import useMatomo from '../hooks/useMatomo';
10
11const ANNOUNCEMENT_STORAGE_KEY = 'lastAnnouncementSeen';
12
13interface Props {
14  children: ReactNode;
15  Topbar?: ReactNode;
16  className?: string;
17  menuTitle?: string;
18  menuActions?: Array<ActionType>;
19  pageTitle?: string;
20  displayMenu?: boolean;
21  goBack?: () => void;
22}
23
24const DefaultLayout = (props: Props) => {
25  useGTM();
26  useMatomo();
27  const {
28    children,
29    Topbar = null,
30    className,
31    pageTitle = undefined,
32    displayMenu = true,
33    menuTitle = 'Caroster',
34    menuActions,
35    goBack = null,
36  } = props;
37  const {announcement = ''} = useSettings() || {};
38  const [lastAnnouncementSeen, setLastAnnouncementSeen] = useState(
39    getStoredValue(ANNOUNCEMENT_STORAGE_KEY)
40  );
41  const showBanner = !!announcement && announcement !== lastAnnouncementSeen;
42
43  const onBannerClear = () => {
44    setStoredValue(ANNOUNCEMENT_STORAGE_KEY, `${announcement}`);
45    setLastAnnouncementSeen(announcement);
46  };
47
48  return (
49    <div className={className}>
50      <Helmet>
51        <title>{pageTitle || menuTitle}</title>
52      </Helmet>
53      <Box display="flex" flexDirection="column" height="100vh" width="100%">
54        <Box position="sticky" top={0} zIndex={1100}>
55          <Banner
56            message={announcement}
57            open={showBanner}
58            onClear={onBannerClear}
59          />
60          {Topbar && <Topbar />}
61        </Box>
62        {displayMenu && (menuTitle || menuActions) && (
63          <GenericToolbar
64            title={menuTitle}
65            actions={menuActions}
66            goBack={goBack}
67          />
68        )}
69
70        {children}
71      </Box>
72    </div>
73  );
74};
75
76const getStoredValue = (storageKey: string) =>
77  typeof localStorage !== 'undefined' ? localStorage.getItem(storageKey) : '';
78
79const setStoredValue = (storageKey: string, value: string) =>
80  typeof localStorage !== 'undefined' &&
81  localStorage.setItem(storageKey, value);
82
83export default DefaultLayout;