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        <Box position="sticky" top={0} zIndex={1100}>
54          <Banner
55            message={announcement}
56            open={showBanner}
57            onClear={onBannerClear}
58          />
59          {Topbar && <Topbar />}
60        </Box>
61        {displayMenu && (menuTitle || menuActions) && (
62          <GenericToolbar
63            title={menuTitle}
64            actions={menuActions}
65            goBack={goBack}
66          />
67        )}
68
69        {children}
70      </Box>
71    </div>
72  );
73};
74
75const getStoredValue = (storageKey: string) =>
76  typeof localStorage !== 'undefined' ? localStorage.getItem(storageKey) : '';
77
78const setStoredValue = (storageKey: string, value: string) =>
79  typeof localStorage !== 'undefined' &&
80  localStorage.setItem(storageKey, value);
81
82export default DefaultLayout;