chore: code reorganization

web/src/components/NewFeaturePopover.cy.tsx → web/src/components/NewFeaturePopover/NewFeaturePopover.cy.tsx

@@ -3,7 +3,7 @@ import { NewFeaturePopover } from './NewFeaturePopover';
 describe('New Feature Popover', () => {
   it('should display', () => {
     cy.mount(
-      <NewFeaturePopover side="bottom" content={<p>content</p>} isOpen>
+      <NewFeaturePopover side="bottom" content={<p>content</p>}>
         <p className="w-fit">anchor</p>
       </NewFeaturePopover>
     );
@@ -12,31 +12,22 @@ describe('New Feature Popover', () => {
 
   it('should display anchor if no content', () => {
     cy.mount(
-      <NewFeaturePopover content="" side="bottom" isOpen>
+      <NewFeaturePopover content="" side="bottom">
         <p>anchor</p>
       </NewFeaturePopover>
     );
     cy.contains('anchor');
     cy.contains('content').should('not.exist');
   });
 
-  it('should use a portal by default', () => {
+  it('should close on dismiss', () => {
     cy.mount(
-      <div className="flex justify-items-center">
-        <NewFeaturePopover side="bottom" content={<p>content</p>} isOpen>
-          <p>anchor</p>
-        </NewFeaturePopover>
-      </div>
-    );
-    cy.contains('anchor');
-  });
-
-  it('should not use a portal if specified', () => {
-    cy.mount(
-      <NewFeaturePopover side="bottom" content={<p>content</p>} portal={false} isOpen>
+      <NewFeaturePopover side="bottom" content={<p>content</p>}>
         <p>anchor</p>
       </NewFeaturePopover>
     );
     cy.contains('anchor');
+    cy.get('[data-test-id=dismiss]').click();
+    cy.contains('content').should('not.exist');
   });
 });

web/src/components/NewFeaturePopover.tsx → web/src/components/NewFeaturePopover/NewFeaturePopover.tsx

@@ -1,6 +1,13 @@
 import * as Popover from '@radix-ui/react-popover';
+import { useAtom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
 import { X } from 'lucide-react';
 
+export const newFeatureDismissedAtom = atomWithStorage(
+  'newFeatureDismissed',
+  Boolean(localStorage.getItem('newFeatureDismissed') ?? false)
+);
+
 interface NewFeaturePopoverProps {
   children: React.ReactNode;
   content: string | React.ReactNode;
@@ -16,10 +23,11 @@ export function NewFeaturePopover({
   content,
   side = 'left',
   sideOffset = 6,
-  isOpen,
-  portal = true,
-  onDismiss,
+  portal = false,
 }: NewFeaturePopoverProps) {
+  const [isDismissed, setIsDismissed] = useAtom(newFeatureDismissedAtom);
+  const onDismiss = () => setIsDismissed(true);
+
   if (!content) {
     return children;
   }
@@ -31,15 +39,19 @@ export function NewFeaturePopover({
       side={side}
     >
       {content}
-      <Popover.Close onClick={onDismiss} className="self-start text-white">
+      <Popover.Close
+        data-test-id="dismiss"
+        onClick={onDismiss}
+        className="self-start text-white"
+      >
         <X size={16} />
       </Popover.Close>
       <Popover.Arrow className="fill-brand-green" />
     </Popover.Content>
   );
 
   return (
-    <Popover.Root open={isOpen}>
+    <Popover.Root open={!isDismissed}>
       <Popover.Anchor>{children}</Popover.Anchor>
       {portal ? <Popover.Portal>{inner}</Popover.Portal> : inner}
     </Popover.Root>

web/src/components/NewFeaturePopover/NewFeaturePopoverContent.tsx

@@ -0,0 +1,16 @@
+import { CalendarSearch } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+export function NewFeaturePopoverContent() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col text-left">
+      <div className="flex flex-row items-center gap-2">
+        <CalendarSearch size={16} />
+        <h3>{t(`new-feature-popover.title`)}</h3>
+      </div>
+      <p>{t(`new-feature-popover.content`)}</p>
+    </div>
+  );
+}

web/src/features/time/TimeHeader.tsx

@@ -1,40 +1,32 @@
 import useGetState from 'api/getState';
 import Badge from 'components/Badge';
-import { NewFeaturePopover } from 'components/NewFeaturePopover';
+import { NewFeaturePopover } from 'components/NewFeaturePopover/NewFeaturePopover';
+import { NewFeaturePopoverContent } from 'components/NewFeaturePopover/NewFeaturePopoverContent';
 import { FormattedTime } from 'components/Time';
 import { loadingMapAtom } from 'features/map/mapAtoms';
 import { useAtom, useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import { selectedDatetimeIndexAtom, timeAverageAtom } from 'utils/state/atoms';
 
-import {
-  DatePickerFeaturePopoverContent,
-  newDatePickerDismissedAtom,
-} from './DatePickerFeaturePopoverContent';
-
 export default function TimeHeader() {
   const { t, i18n } = useTranslation();
   const timeAverage = useAtomValue(timeAverageAtom);
   const selectedDatetime = useAtomValue(selectedDatetimeIndexAtom);
-  const [isDismissed, setIsDismissed] = useAtom(newDatePickerDismissedAtom);
   const { isLoading: isLoadingData } = useGetState();
   const [isLoadingMap] = useAtom(loadingMapAtom);
 
   const allLoaded = !isLoadingMap && !isLoadingData;
 
-  const onPopoverDismiss = () => setIsDismissed(true);
-
   return (
     <div className="flex min-h-6 flex-row items-center">
       <h3 className="grow select-none text-left">
         {t(`time-controller.title.${timeAverage}`)}
       </h3>
       {allLoaded && (
         <NewFeaturePopover
-          isOpen={!isDismissed}
-          onDismiss={onPopoverDismiss}
           side="top"
-          content={<DatePickerFeaturePopoverContent />}
+          content={<NewFeaturePopoverContent />}
+          portal={false}
         >
           <Badge
             pillText={

web/src/locales/en.json

@@ -45,6 +45,10 @@
     "clipboard-error": "Error copying URL to clipboard",
     "share-error": "Error sharing URL"
   },
+  "new-feature-popover": {
+    "title": "Select a Date to Explore",
+    "content": "Use the date picker to view historical data on electricity sources, CO2 emissions, and prices."
+  },
   "onboarding-modal": {
     "view1": {
       "header": "Welcome to Electricity Maps",
@@ -229,11 +233,7 @@
     "daily": "daily",
     "hourly": "hourly",
     "monthly": "monthly",
-    "yearly": "yearly",
-    "new-feature-popover": {
-      "title": "Select a Date to Explore",
-      "content": "Use the date picker to view historical data on electricity sources, CO2 emissions, and prices."
-    }
+    "yearly": "yearly"
   },
   "left-panel": {
     "get-data": "See our commercial API offerings",