[CFM_214] feat: Create SearchInfo popup

src/components/atoms/SearchInfoPopup/SearchInfoPopup.jsx

@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+import { Card, CardContent, IconButton, Typography } from '@mui/material';
+import Zoom from '@mui/material/Zoom';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+
+export default function SearchInfoPopup() {
+  const cookieName = 'com.fridgefinder.searchInfoPopup';
+  const [popupOpen, setPopupOpen] = useState();
+
+  const handleClick = () => {
+    setPopupOpen(false);
+    localStorage.setItem(cookieName, 'false');
+  };
+
+  useEffect(() => {
+    const cookie = localStorage.getItem(cookieName);
+    if (!cookie) {
+      localStorage.setItem(cookieName, 'true');
+      setPopupOpen(true);
+    }
+    if (cookie === 'false') {
+      setPopupOpen(false);
+    }
+    if (cookie === 'true') {
+      setPopupOpen(true);
+    }
+  }, [cookieName, setPopupOpen]);
+
+  return (
+    <Zoom in={popupOpen}>
+      <Card
+        variant="outlined"
+        sx={{
+          position: 'fixed',
+          top: 157,
+          right: 16,
+          zIndex: 410,
+          width: 200,
+          padding: '15px',
+          backgroundColor: '#fff',
+          border: 'none ',
+        }}
+      >
+        <IconButton
+          onClick={handleClick}
+          sx={{
+            position: 'absolute',
+            top: 15,
+            right: 15,
+            width: 0,
+            height: 0,
+            p: 0,
+          }}
+        >
+          <CloseRoundedIcon fontSize="small" />
+        </IconButton>
+        <div
+          style={{ display: 'grid', gridTemplateColumns: '1fr auto', p: '0' }}
+        >
+          <CardContent sx={{ p: 0 }}>
+            <Typography
+              variant="h4"
+              sx={{
+                marginBottom: '4px',
+                fontSize: '12px',
+                lineHeight: '15px',
+              }}
+            >
+              Find Your Fridge
+            </Typography>
+            <Typography
+              variant="body2"
+              sx={{
+                fontSize: '11px',
+                lineHeight: '15px',
+              }}
+            >
+              Use the filters at the top of the map to find a fridge near you!
+            </Typography>
+          </CardContent>
+          <img height="84px" src="/card/paragraph/searchInfoPopupApple.svg" />
+        </div>
+      </Card>
+    </Zoom>
+  );
+}

src/components/atoms/SearchInfoPopup/index.js

@@ -0,0 +1 @@
+export { default } from './SearchInfoPopup';

src/components/atoms/index.js

@@ -7,3 +7,4 @@ export { default as PageHero } from './PageHero';
 export { default as PamphletParagraph } from './PamphletParagraph';
 export { default as ParagraphCard } from './ParagraphCard';
 export { default as TitleCard } from './TitleCard';
+export { default as SearchInfoPopup } from './SearchInfoPopup';

src/pages/browse.jsx

@@ -9,8 +9,9 @@ import {
   Divider,
   useMediaQuery,
 } from '@mui/material';
+
 import BrowseList from 'components/organisms/browse/List';
-import { MapToggle } from 'components/atoms/';
+import { MapToggle, SearchInfoPopup } from 'components/atoms/';
 
 import { getFridgeList } from 'model/view';
 import { useWindowHeight } from 'lib/browser';
@@ -85,7 +86,12 @@ export default function BrowsePage() {
           {currentView === MapToggle.view.list ? (
             <Box sx={{ flex: 1, px: 4 }}>{List}</Box>
           ) : (
-            <Box sx={{ flex: 1 }}>{Map}</Box>
+            <Box sx={{ flex: 1 }}>
+              <>
+                {Map}
+                <SearchInfoPopup />
+              </>
+            </Box>
           )}
 
           <MapToggle currentView={currentView} setView={setCurrentView} />