Dev Refactor Fixes

[1jeanpaul1]

Changes:

1. Added Test files back
2. Added google analytics back
3. Small Changes to fix build
4. Styling changes to put us back to what we have in production

I placed comments throughout the MR to mark important updates

Deployed here for QA testing: https://dev-refactor-jp.d1zqbru9k8x5eq.amplifyapp.com/

[1jeanpaul1]

API was incorrect - fixed

[1jeanpaul1]

Used colors that matches out color palette

[1jeanpaul1]

added analytics back

[1jeanpaul1]

snuck this one in here, not needed but we wanted to update the language so I just did it here

[1jeanpaul1]

snuck this one in here too, image sizing was too big so updated to the sizing that we wanted based on this previous MR

https://github.com/FridgeFinder/CFM_Frontend/pull/162/changes#diff-e1a393a61f6242ecff29fe36756332e519c6538c3db28011ab2bdeeac2a80577R135

[1jeanpaul1]

FridgeInformation component needs to be SSR, removed 'use client' and moved client side Share button to a different component

[1jeanpaul1]

Moved share button to a new component so that FridgeInformation component can be SSR

[1jeanpaul1]

dev-refactor introduced the "good" condition to the form, so removed the "ghost" condition from the form.

The team has agreed to move away from "ghost" condition so this will be the start

[1jeanpaul1]

This was removed in dev-refactor, added back in

[1jeanpaul1]

adding back sorting the fridges by name, and filtering out ghost fridges

[1jeanpaul1]

We want button text to be Capitalized (default), removing this

[1jeanpaul1]

Updating all of these to be more accurate to what we have in production

[1jeanpaul1]

remove search, it's not ready yet

[1jeanpaul1]

remove search

[1jeanpaul1]

decreased cluster radius slightly

[1jeanpaul1]

adding google analytics back

[1jeanpaul1]

next lint depecated in next 15+, using eslint instead

[Copilot]

Pull request overview

This PR restores and expands the frontend test suite, introduces a Google Analytics utility + layout integration, and applies several UI/theme adjustments intended to align styling with production while fixing build issues.

Changes:

• Added/updated Jest tests across utils, store, app routes, and atomic components.
• Introduced Google Analytics support (utils/analytics) and injected GA scripts from the root layout.
• Updated theme/typography and multiple UI components (map markers, footer, buttons, spacing) plus API/reporting and mock data tweaks.

Reviewed changes

Copilot reviewed 33 out of 35 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
yarn.lock	Adds new type deps (@types/gtag.js, @types/jest) and related transitive entries.
package.json	Switches lint script to eslint . and adds new devDependencies for typings.
next-env.d.ts	Adds a Next navigation compat type reference.
src/utils/analytics.ts	New GA helper module exporting tracking ID + view/event helpers.
src/utils/analytics.test.ts	Tests env-driven tracking ID behavior via module reload.
src/utils/geo.test.ts	Adds unit tests for deltaInMeters.
src/app/layout.tsx	Injects Google Analytics scripts when tracking ID is configured.
src/app/globals.css	Adds global box-sizing reset and changes cluster marker colors.
src/theme/typography.ts	Adds MUI typography variant augmentation + adjusts typography scale and introduces footer variant.
src/theme/index.ts	Updates typography typing usage and tweaks button styling overrides.
src/store/useFridgeStore.ts	Filters out ghost fridges and sorts fridges by name after fetch.
src/store/useFridgeStore.test.ts	Adds tests for store fetch lifecycle and selectors.
src/features/navigation/components/ResponsiveAppBar.tsx	Adjusts mobile drawer width.
src/features/fridge-map/components/layers/MarkerLayer.tsx	Enhances popup content with MUI typography + adds action buttons; adjusts clustering radius.
src/features/fridge-management/components/ReportForm.tsx	Updates condition label copy and comments out “ghost” option.
src/features/fridge-list/components/FridgeList.tsx	Improves aria-label copy and adjusts button font sizing.
src/features/fridge-details/components/ShareButton.tsx	Adds a dedicated client-side share button component.
src/features/fridge-details/components/FridgeInformation.tsx	Refactors share logic into ShareButton, adjusts copy, and changes image rendering layout.
src/components/atoms/TitleCard/TitleCard.tsx	Adjusts card sizing and typography variant.
src/components/atoms/TitleCard/TitleCard.test.tsx	Adds render/link/image test coverage for TitleCard.
src/components/atoms/SoftWrap/SoftWrap.test.tsx	Adds tests for sentence wrapping and edge cases.
src/components/atoms/ParagraphCard/ParagraphCard.test.tsx	Adds tests for ParagraphCard variants and CTA link.
src/components/atoms/PamphletParagraph/PamphletParagraph.test.tsx	Adds tests for optional/required rendering behavior.
src/components/atoms/PageHero/PageHero.tsx	Removes fontVariant: small-caps styling.
src/components/atoms/PageHero/PageHero.test.tsx	Adds tests for PageHero rendering with/without button.
src/components/atoms/PageFooter/PageFooter.tsx	Switches footer typography variant + updates year and styling.
src/components/atoms/PageFooter/PageFooter.test.tsx	Adds tests for footer text and scroll button behavior.
src/components/atoms/FeedbackCard/FeedbackCard.test.tsx	Adds tests covering multiple FeedbackCard variants and interactions.
src/components/atoms/ButtonLink/ButtonLink.test.tsx	Adds tests for ButtonLink variants and URL handling.
src/app/user/fridge/report/[fridgeId]/page.tsx	Updates report POST endpoint to be fridge-scoped and makes param access more defensive.
src/app/user/fridge/report/[fridgeId]/page.test.tsx	Adds tests for form rendering, submit success, and error flows.
src/app/user/contact/page.tsx	Makes useSearchParams() access more defensive and switches to nullish coalescing.
src/app/pamphlet/best-practices/page.tsx	Adjusts page vertical padding.
mock/data.json	Adds missing IDs to reports and seeds contact entries.

Comments suppressed due to low confidence (1)

src/app/browse/page.tsx:50

• showSearchMap is initialized to false and is only ever set to false (via onClose), so the SearchMap UI can never be opened anymore. That also makes searchQuery effectively not user-editable, so filtering can’t be used. Reintroduce an explicit control that sets setShowSearchMap(true) (mobile/desktop as appropriate), or remove the dead state and related JSX if search is intentionally being removed.

  const [currentView, setCurrentView] = useState<MapView>('map');
  const [showSearchMap, setShowSearchMap] = useState(false);

  const { searchQuery, setSearchQuery, filteredFridges } =
    useFridgeSearch(fridges);

  const availableHeight = useWindowHeight();
  const isWindowDesktop = useMediaQuery((theme: Theme) =>
    theme.breakpoints.up('md')
  );

  useEffect(() => {
    fetchFridges();
  }, [fetchFridges]);

  const Map = (
    <Box sx={{ position: 'relative', height: '100%' }}>
      <DynamicMap
        fridges={filteredFridges}
        selectedFridgeId={selectedFridgeId}
        onMarkerClick={setSelectedFridgeId}
      />
      {showSearchMap && (
        <SearchMap
          searchQuery={searchQuery}
          onSearchChange={setSearchQuery}
          onClose={() => setShowSearchMap(false)}
        />

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

width="100" becomes width: 100 (unitless) in CSS, which is invalid and will be ignored by the browser. If the intent is full width, use width="100%" (or sx={{ width: '100%' }}); if it’s pixels, pass a number (width={100}).

Suggested change

	<Stack direction="row" width="100" spacing={3} sx={{ mt: 3 }}>
	<Stack direction="row" width="100%" spacing={3} sx={{ mt: 3 }}>

[1jeanpaul1]

we want to serve the latest report, no cache