fix: Address CodeRabbit review — sessionStorage fallback + semantic Footer link

Author: ayoub3bidi

src/components/Footer.jsx

@@ -9,7 +9,7 @@ import { FileText, WarningCircle, MapPin } from '@phosphor-icons/react';
 import { SiYoutube, SiInstagram, SiTiktok } from 'react-icons/si';
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import {
   GITHUB_REPO_NAME,
   GITHUB_REPO_OWNER,
@@ -288,15 +288,12 @@ function Footer() {
               © {currentYear} Bayan Flow. {t('footer.allRightsReserved')}
             </p>
             <div className="flex flex-wrap items-center justify-center gap-4">
-              <motion.button
-                type="button"
-                onClick={() => handleLinkClick('/pro')}
+              <Link
+                to="/pro"
                 className="text-xs text-text-secondary hover:text-[#3b82f6] transition-colors"
-                whileHover={{ scale: 1.02 }}
-                whileTap={{ scale: 0.98 }}
               >
                 {t('footer.proPlan')}
-              </motion.button>
+              </Link>
               <motion.button
                 type="button"
                 onClick={() => handleLinkClick('/privacy')}

src/components/Footer.test.jsx

@@ -5,7 +5,9 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { renderWithI18n, screen, fireEvent } from '../test/testUtils';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
 import Footer from './Footer';
 import i18n from '../i18n';
 
@@ -19,6 +21,16 @@ vi.mock('react-router-dom', async importOriginal => {
   };
 });
 
+function renderFooter() {
+  return render(
+    <MemoryRouter>
+      <I18nextProvider i18n={i18n}>
+        <Footer />
+      </I18nextProvider>
+    </MemoryRouter>
+  );
+}
+
 describe('Footer', () => {
   beforeEach(async () => {
     mockNavigate.mockClear();
@@ -27,36 +39,42 @@ describe('Footer', () => {
   });
 
   it('renders privacy and terms links', () => {
-    renderWithI18n(<Footer />);
+    renderFooter();
 
     expect(screen.getByText(i18n.t('footer.privacy'))).toBeInTheDocument();
     expect(screen.getByText(i18n.t('footer.terms'))).toBeInTheDocument();
   });
 
   it('navigates to privacy policy on click', () => {
-    renderWithI18n(<Footer />);
+    renderFooter();
 
     fireEvent.click(screen.getByText(i18n.t('footer.privacy')));
     expect(mockNavigate).toHaveBeenCalledWith('/privacy');
   });
 
   it('navigates to terms of use on click', () => {
-    renderWithI18n(<Footer />);
+    renderFooter();
 
     fireEvent.click(screen.getByText(i18n.t('footer.terms')));
     expect(mockNavigate).toHaveBeenCalledWith('/terms');
   });
 
   it('renders pro plan link', () => {
-    renderWithI18n(<Footer />);
+    renderFooter();
 
-    expect(screen.getByText(i18n.t('footer.proPlan'))).toBeInTheDocument();
+    const link = screen.getByRole('link', {
+      name: i18n.t('footer.proPlan'),
+    });
+    expect(link).toHaveAttribute('href', '/pro');
   });
 
   it('navigates to pro page on click', () => {
-    renderWithI18n(<Footer />);
+    renderFooter();
 
-    fireEvent.click(screen.getByText(i18n.t('footer.proPlan')));
-    expect(mockNavigate).toHaveBeenCalledWith('/pro');
+    const link = screen.getByRole('link', {
+      name: i18n.t('footer.proPlan'),
+    });
+    expect(link).toHaveAttribute('href', '/pro');
+    fireEvent.click(link);
   });
 });

src/components/ProWaitlistBanner.jsx

@@ -29,7 +29,11 @@ function ProWaitlistBannerContent({ source, pathname, inRouter }) {
       if (dismissedFlag == null) {
         const legacy = sessionStorage.getItem(WAITLIST_BANNER_DISMISSED_KEY);
         if (legacy != null) {
-          localStorage.setItem(WAITLIST_BANNER_DISMISSED_KEY, legacy);
+          try {
+            localStorage.setItem(WAITLIST_BANNER_DISMISSED_KEY, legacy);
+          } catch {
+            // migration write failed, but we still have the legacy value
+          }
           dismissedFlag = legacy;
         }
       }
@@ -60,7 +64,11 @@ function ProWaitlistBannerContent({ source, pathname, inRouter }) {
     try {
       localStorage.setItem(WAITLIST_BANNER_DISMISSED_KEY, '1');
     } catch {
-      // ignore
+      try {
+        sessionStorage.setItem(WAITLIST_BANNER_DISMISSED_KEY, '1');
+      } catch {
+        // ignore
+      }
     }
     setDismissed(true);
     window.dispatchEvent(new CustomEvent('bayan-flow:banner-dismissed'));

src/services/waitlistService.js

@@ -47,7 +47,11 @@ export function persistWaitlistEmail(email) {
   try {
     localStorage.setItem(WAITLIST_EMAIL_STORAGE_KEY, email);
   } catch {
-    // ignore quota / private mode
+    try {
+      sessionStorage.setItem(WAITLIST_EMAIL_STORAGE_KEY, email);
+    } catch {
+      // ignore quota / private mode
+    }
   }
 }
 
@@ -60,13 +64,22 @@ export function readStoredWaitlistEmail() {
     if (value == null) {
       const legacy = sessionStorage.getItem(WAITLIST_EMAIL_STORAGE_KEY);
       if (legacy != null) {
-        localStorage.setItem(WAITLIST_EMAIL_STORAGE_KEY, legacy);
+        try {
+          localStorage.setItem(WAITLIST_EMAIL_STORAGE_KEY, legacy);
+        } catch {
+          // migration write failed, but we still have the legacy value
+        }
         value = legacy;
       }
     }
     return value ? normalizeWaitlistEmail(value) : null;
   } catch {
-    return null;
+    try {
+      const fallback = sessionStorage.getItem(WAITLIST_EMAIL_STORAGE_KEY);
+      return fallback ? normalizeWaitlistEmail(fallback) : null;
+    } catch {
+      return null;
+    }
   }
 }