Remove email requirement to view map (#1283)

Reverts temporarily email requirement in
#1251

Was put in place due to costs. Switch to Maplibre shows costs are now
negligible.

Author: jboolean

frontend/src/screens/App/screens/AnnouncementBanner/AnnouncementRegistry.tsx

@@ -2,16 +2,6 @@ import React from 'react';
 import Announcment from './Announcement';
 
 const ANNOUNCEMENTS_REGISTRY: Announcment[] = [
-  {
-    id: 'email-required',
-    expiresAt: new Date('2026-01-18'),
-    render: () => (
-      <React.Fragment>
-        Due to high usage, an email address is temporarily required to access
-        the map.
-      </React.Fragment>
-    ),
-  },
   {
     id: 'zoom',
     expiresAt: new Date('2025-01-31'),

frontend/src/screens/App/screens/MapPane/components/MainMap/index.tsx

@@ -1,61 +1 @@
-import React from 'react';
-
-import MapLibreMap from './MapLibreMap';
-
-import LoginForm from 'shared/components/LoginForm';
-import useLoginStore from 'shared/stores/LoginStore';
-import { MapInterface } from './MapInterface';
-import * as overlays from './overlays';
-
-// Export the OverlayId type from the appropriate module
-export { OverlayId } from './overlays';
-
-interface Props {
-  className?: string;
-  panOnClick: boolean;
-  overlay: overlays.OverlayId;
-  requireLogin?: boolean;
-}
-
-// Simple component that switches between implementations
-const MainMap = React.forwardRef<MapInterface, Props>((props, ref) => {
-  const { isLoggedInToNonAnonymousAccount, isLoadingMe } = useLoginStore();
-
-  // Only show map if user is logged in to a non-anonymous account
-  // But allow override if requireLogin is explicitly set to false
-  const canShowMap =
-    props.requireLogin === false ||
-    (isLoggedInToNonAnonymousAccount && !isLoadingMe);
-
-  if (!canShowMap) {
-    return (
-      <div
-        style={{
-          height: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: '#f5f5f5',
-          padding: '2rem',
-        }}
-      >
-        <div
-          style={{
-            textAlign: 'center',
-            maxWidth: '400px',
-          }}
-        >
-          <h2>Login Required</h2>
-          <p>Please log in to view the map.</p>
-          <LoginForm newEmailBehavior="create" />
-        </div>
-      </div>
-    );
-  }
-
-  return <MapLibreMap ref={ref} {...props} />;
-});
-
-MainMap.displayName = 'MainMap';
-
-export default MainMap;
+export { default, OverlayId } from './MapLibreMap';

frontend/src/screens/App/screens/ToteBag/components/Back.tsx

@@ -33,11 +33,7 @@ export default function ToteBag(): JSX.Element {
   return (
     <div className={stylesheet.back} ref={containerRef}>
       <div className={stylesheet.map}>
-        <MainMap
-          panOnClick={false}
-          overlay="default-map"
-          requireLogin={false}
-        />
+        <MainMap panOnClick={false} overlay="default-map" />
       </div>
       <div className={stylesheet.box}>
         <div className={stylesheet.subhead}>

frontend/src/screens/App/screens/Welcome/index.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import { useFeatureFlag } from 'screens/App/shared/stores/FeatureFlagsStore';
 import FeatureFlag from 'screens/App/shared/types/FeatureFlag';
 import Button from 'shared/components/Button';
-import LoginForm from 'shared/components/LoginForm';
-import useLoginStore from 'shared/stores/LoginStore';
 
 import PhotoAsideModal from '../PhotoAsideModal';
 import carouselImages from './carouselImages';
@@ -12,9 +10,6 @@ import classNames from 'classnames';
 
 import stylesheet from './welcome.less';
 
-// Set to false to disable email requirement
-const REQUIRE_EMAIL = true;
-
 interface Props {
   isOpen: boolean;
   onRequestClose: () => void;
@@ -26,17 +21,8 @@ export default function Welcome({
   // Used to hide this annoying modal in development
   const isWelcomeDisabled = useFeatureFlag(FeatureFlag.DISABLE_WELCOME_MODAL);
 
-  const { isLoggedInToNonAnonymousAccount, isLoadingMe } = useLoginStore();
-
-  // Only require login if REQUIRE_EMAIL is true
-  const isEmailRequirementMet = REQUIRE_EMAIL
-    ? isLoggedInToNonAnonymousAccount && !isLoadingMe
-    : true;
-
   const handleClose = (): void => {
-    if (isEmailRequirementMet) {
-      onRequestClose();
-    }
+    onRequestClose();
   };
 
   return (
@@ -45,7 +31,7 @@ export default function Welcome({
       className={stylesheet.welcomeModal}
       onRequestClose={handleClose}
       shouldCloseOnOverlayClick={false}
-      shouldCloseOnEsc={isEmailRequirementMet}
+      shouldCloseOnEsc={true}
       size="large"
       isCloseButtonVisible={false}
       carouselProps={{
@@ -66,31 +52,6 @@ export default function Welcome({
             <br />
             <strong>Zoom in! Every dot&nbsp;is&nbsp;a&nbsp;photo.</strong>
           </p>
-
-          {REQUIRE_EMAIL && !isEmailRequirementMet ? (
-            <div className={stylesheet.loginSection}>
-              <p>
-                <strong>
-                  An email address is temporarily required to access the site.
-                </strong>
-              </p>
-              <LoginForm newEmailBehavior="create" />
-            </div>
-          ) : (
-            <div
-              className={classNames(
-                stylesheet.buttonContainer,
-                stylesheet.mobileButton,
-                stylesheet.mobileOnly
-              )}
-              onClick={handleClose}
-            >
-              <Button buttonStyle="primary" className={stylesheet.explore}>
-                Start Exploring
-              </Button>
-            </div>
-          )}
-
           <hr />
           <p className={stylesheet.finePrint}>
             The photos on this site were retrieved from the NYC Department of
@@ -139,19 +100,17 @@ export default function Welcome({
             </a>
           </p>
         </div>
-        {(!REQUIRE_EMAIL || isEmailRequirementMet) && (
-          <div
-            className={classNames(
-              stylesheet.buttonContainer,
-              stylesheet.desktopOnly
-            )}
-            onClick={handleClose}
-          >
-            <Button buttonStyle="primary" className={stylesheet.explore}>
-              Start Exploring
-            </Button>
-          </div>
-        )}
+        <div
+          className={classNames(
+            stylesheet.buttonContainer,
+            stylesheet.desktopOnly
+          )}
+          onClick={handleClose}
+        >
+          <Button buttonStyle="primary" className={stylesheet.explore}>
+            Start Exploring
+          </Button>
+        </div>
       </div>
     </PhotoAsideModal>
   );