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 Headroom from 'react-headroom';
 9import useSettings from '../hooks/useSettings';
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  const {
27    children,
28    Topbar = null,
29    className,
30    pageTitle = undefined,
31    displayMenu = true,
32    menuTitle = 'Caroster',
33    menuActions,
34    goBack = null,
35  } = props;
36  const {announcement = ''} = useSettings() || {};
37  const [lastAnnouncementSeen, setLastAnnouncementSeen] = useState(
38    getStoredValue(ANNOUNCEMENT_STORAGE_KEY)
39  );
40  const showBanner = !!announcement && announcement !== lastAnnouncementSeen;
41
42  const onBannerClear = () => {
43    setStoredValue(ANNOUNCEMENT_STORAGE_KEY, `${announcement}`);
44    setLastAnnouncementSeen(announcement);
45  };
46
47  return (
48    <div className={className}>
49      <Helmet>
50        <title>{pageTitle || menuTitle}</title>
51      </Helmet>
52      <Box display="flex" flexDirection="column" height="100vh" width="100%">
53        <Headroom>
54          <Banner
55            message={announcement}
56            open={showBanner}
57            onClear={onBannerClear}
58          />
59          {displayMenu && (menuTitle || menuActions) && (
60            <GenericToolbar
61              title={menuTitle}
62              actions={menuActions}
63              goBack={goBack}
64            />
65          )}
66          {Topbar && <Topbar />}
67        </Headroom>
68        {children}
69      </Box>
70    </div>
71  );
72};
73
74const getStoredValue = (storageKey: string) =>
75  typeof localStorage !== 'undefined' ? localStorage.getItem(storageKey) : '';
76
77const setStoredValue = (storageKey: string, value: string) =>
78  typeof localStorage !== 'undefined' &&
79  localStorage.setItem(storageKey, value);
80
81export default DefaultLayout;