From b10532b2d20cdbf5d6189df0cc99918dd8469b03 Mon Sep 17 00:00:00 2001
From: Amberroseweeks <weeksamberrose@gmail.com>
Date: Thu, 17 Oct 2024 15:06:47 -0400
Subject: [PATCH 1/2] amberroseweeks-917-data-disclaimer

---
 .../find-properties/[[...opa_id]]/page.tsx    |  3 +
 src/components/DataDisclaimerModal.tsx        | 66 +++++++++++++++++++
 2 files changed, 69 insertions(+)
 create mode 100644 src/components/DataDisclaimerModal.tsx

diff --git a/src/app/find-properties/[[...opa_id]]/page.tsx b/src/app/find-properties/[[...opa_id]]/page.tsx
index 587bde18..c7a1f809 100644
--- a/src/app/find-properties/[[...opa_id]]/page.tsx
+++ b/src/app/find-properties/[[...opa_id]]/page.tsx
@@ -18,6 +18,7 @@ import { ThemeButton } from '../../../components/ThemeButton';
 import { useRouter } from 'next/navigation';
 import { ViewState } from 'react-map-gl';
 import { PiX } from 'react-icons/pi';
+import DataDisclaimerModal from '@/components/DataDisclaimerModal';
 
 export type BarClickOptions = 'filter' | 'download' | 'detail' | 'list';
 
@@ -209,6 +210,7 @@ const MapPage = ({ params }: MapPageProps) => {
 
   return (
     <NextUIProvider>
+      <DataDisclaimerModal />
       <div className="flex flex-col">
         <div className="flex flex-grow overflow-hidden">
           <StreetViewModal
@@ -223,6 +225,7 @@ const MapPage = ({ params }: MapPageProps) => {
               fov="0.7"
             />
           </StreetViewModal>
+
           <div className={`flex-grow ${isVisible('map')}`}>
             <div className={`sticky top-0 z-10 sm:hidden ${isVisible('map')}`}>
               <SidePanelControlBar {...controlBarProps} />
diff --git a/src/components/DataDisclaimerModal.tsx b/src/components/DataDisclaimerModal.tsx
new file mode 100644
index 00000000..dd250020
--- /dev/null
+++ b/src/components/DataDisclaimerModal.tsx
@@ -0,0 +1,66 @@
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  useDisclosure,
+} from '@nextui-org/react';
+import { ThemeButton } from './ThemeButton';
+import { useEffect } from 'react';
+import { PiX } from 'react-icons/pi';
+
+export default function DataDisclaimerModal() {
+  const { isOpen, onOpen, onClose } = useDisclosure(); // Get onClose too
+
+  // Use useEffect to open the modal when the page loads
+  useEffect(() => {
+    onOpen(); // Open modal on component mount
+  }, [onOpen]);
+
+  return (
+    <>
+      <Modal
+        isOpen={isOpen}
+        onOpenChange={onClose}
+        size={'3xl'}
+        hideCloseButton={true}
+        className="items-center"
+      >
+        <ModalContent>
+          <ModalHeader className="flex flex-col gap-1 text-green-600 text-4xl text-center">
+            <h2>Disclaimer</h2>
+            <ThemeButton
+              color="tertiary"
+              className="right-4 lg:right-[24px] absolute top-4 min-w-[3rem]"
+              aria-label="Close"
+              startContent={<PiX />}
+              onPress={onClose}
+            />
+          </ModalHeader>
+
+          <ModalBody className="p-10">
+            <p>
+              The City of Philadelphia recently stopped collecting key
+              information used in determining which properties in the city are
+              likely vacant. We are currently in conversations with relevant
+              partners about how to address this challenge. In the meantime,
+              please be advised that the vacancy data that we are showing here
+              have not been updated since July of 2024.
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <ThemeButton
+              color="primary"
+              className=""
+              aria-label="Close"
+              label="I understand"
+              onPress={onClose}
+            />
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

From d191653997f4669aead73cb62e753ad279254394 Mon Sep 17 00:00:00 2001
From: Amberroseweeks <weeksamberrose@gmail.com>
Date: Fri, 18 Oct 2024 10:56:33 -0400
Subject: [PATCH 2/2] limit disclaimer modal to only appear once

---
 src/components/DataDisclaimerModal.tsx | 27 +++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/DataDisclaimerModal.tsx b/src/components/DataDisclaimerModal.tsx
index dd250020..31d1b3a7 100644
--- a/src/components/DataDisclaimerModal.tsx
+++ b/src/components/DataDisclaimerModal.tsx
@@ -4,21 +4,34 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter,
-  Button,
   useDisclosure,
 } from '@nextui-org/react';
 import { ThemeButton } from './ThemeButton';
-import { useEffect } from 'react';
 import { PiX } from 'react-icons/pi';
+import { useEffect, useState } from 'react';
 
 export default function DataDisclaimerModal() {
-  const { isOpen, onOpen, onClose } = useDisclosure(); // Get onClose too
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [isClientSide, setIsClientSide] = useState(false);
 
-  // Use useEffect to open the modal when the page loads
+  // Use useEffect to check if modal has been shown and open it if not
   useEffect(() => {
-    onOpen(); // Open modal on component mount
+    setIsClientSide(true); // Ensure client-side rendering
+
+    const hasSeenModal = localStorage.getItem('hasSeenModal'); // Check localStorage
+
+    if (!hasSeenModal) {
+      onOpen(); // Open modal if not seen before
+    }
   }, [onOpen]);
 
+  const closeHandler = () => {
+    localStorage.setItem('hasSeenModal', 'true'); // Set flag so modal doesn't show again
+    onClose(); // Close modal
+  };
+
+  if (!isClientSide) return null;
+
   return (
     <>
       <Modal
@@ -36,7 +49,7 @@ export default function DataDisclaimerModal() {
               className="right-4 lg:right-[24px] absolute top-4 min-w-[3rem]"
               aria-label="Close"
               startContent={<PiX />}
-              onPress={onClose}
+              onPress={closeHandler} // Close modal and set flag
             />
           </ModalHeader>
 
@@ -56,7 +69,7 @@ export default function DataDisclaimerModal() {
               className=""
               aria-label="Close"
               label="I understand"
-              onPress={onClose}
+              onPress={closeHandler} // Close modal and set flag
             />
           </ModalFooter>
         </ModalContent>