Skip to content

Integrate Price Alerts feature into top banner #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Mr-Technician wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Integrate Price Alerts feature into top banner #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { BrowserRouter } from "react-router-dom";
import AppRouter from "./AppRouter";
import Footer from "./Footer";
import UpdateBar from "./UpdateBar";
Expand Down Expand Up @@ -29,11 +30,13 @@ export default function App() {
<ThemeProvider theme={darkTheme}>
<CssBaseline />
<LocalizationProvider dateAdapter={AdapterDayjs}>
<div className="fade-in">
<UpdateBar />
<AppRouter />
<Footer />
</div>
<BrowserRouter>
<div className="fade-in">
<UpdateBar />
<AppRouter />
<Footer />
</div>
</BrowserRouter>
</LocalizationProvider>
</ThemeProvider>
);
Expand Down
76 changes: 37 additions & 39 deletions src/AppRouter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Route, Routes } from "react-router-dom";
import About from "./About";
import Alerts from "./Alerts";
import Home from "./Home";
Expand All @@ -24,44 +24,42 @@ export default function AppRouter() {

return (
<main>
<BrowserRouter>
<Navbar />
<Routes>
<Route
path="/"
element={
<Home
searching={searching}
setSearching={setSearching}
searchError={searchError}
setSearchError={setSearchError}
showTurnstile={showTurnstile}
setShowTurnstile={setShowTurnstile}
searchAnimationsBool={searchAnimationsBool}
setSearchAnimationsBool={setSearchAnimationsBool}
/>
}
/>
<Route path="/about" element={<About />} />
<Route path="/alerts" element={<Alerts />} />
<Route path="/subscribed" element={<Subscribed />} />
<Route path="/unsubscribed" element={<Unsubscribed />} />
<Route
path="/:mode/*"
element={
<Home
searching={searching}
setSearching={setSearching}
searchError={searchError}
setSearchError={setSearchError}
showTurnstile={showTurnstile}
setShowTurnstile={setShowTurnstile}
/>
}
/>
<Route path="*" element={<NotFound msg={"Invalid URL"} />} />
</Routes>
</BrowserRouter>
<Navbar />
<Routes>
<Route
path="/"
element={
<Home
searching={searching}
setSearching={setSearching}
searchError={searchError}
setSearchError={setSearchError}
showTurnstile={showTurnstile}
setShowTurnstile={setShowTurnstile}
searchAnimationsBool={searchAnimationsBool}
setSearchAnimationsBool={setSearchAnimationsBool}
/>
}
/>
<Route path="/about" element={<About />} />
<Route path="/alerts" element={<Alerts />} />
<Route path="/subscribed" element={<Subscribed />} />
<Route path="/unsubscribed" element={<Unsubscribed />} />
<Route
path="/:mode/*"
element={
<Home
searching={searching}
setSearching={setSearching}
searchError={searchError}
setSearchError={setSearchError}
showTurnstile={showTurnstile}
setShowTurnstile={setShowTurnstile}
/>
}
/>
<Route path="*" element={<NotFound msg={"Invalid URL"} />} />
</Routes>
{searching && !searchError && !showTurnstile && searchAnimationsBool && (
<img alt="" id="acela" src="/images/acela.svg" />
)}
Expand Down
2 changes: 1 addition & 1 deletion src/Navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function Navbar() {
<Link to={useLocation().pathname === "/alerts" ? "/" : "/alerts"}>
{useLocation().pathname === "/alerts"
? "Home"
: `${!mobile ? "Fare " : ""}Alerts`}
: `${!mobile ? "Price " : ""}Alerts`}
</Link>
{!mobile && (
<a
Expand Down
30 changes: 27 additions & 3 deletions src/UpdateBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useState } from "react";
import { Link } from "react-router-dom";
import "./UpdateBar.css";
import CloseIcon from "@mui/icons-material/Close";
import Button from "@mui/material/Button";
Expand All @@ -17,7 +18,7 @@ export default function UpdateBar() {
<div>
<div id="update-bar-container" style={{ display: open ? "" : "none" }}>
<span id="update-bar">
Amtrak Thruway services now supported!{" "}
New! Get emailed when your fare drops with Price Alerts.{" "}
<span onClick={() => setDialog(true)}>Read more</span>
</span>
<IconButton onClick={() => setOpen(false)} size="small">
Expand All @@ -34,9 +35,32 @@ export default function UpdateBar() {
</IconButton>
<DialogContent>
<DialogContentText>
<h2>Never Miss a Price Drop</h2>
Tired of refreshing fares hoping for a better deal? Now you don't
have to. Introducing{" "}
<Link to="/alerts" onClick={() => setDialog(false)}>
Price Alerts
</Link>
—tell us your route, travel dates, and the price you're after, and
we'll email you when a matching fare drops.
<br></br>
<br></br>
Set up an alert in seconds: pick your origin and destination, choose
an accommodation, and optionally set a target price. We'll keep an eye
on fares for you and check back regularly, so the next time prices
fall, you'll hear about it. Unsubscribe anytime with a single click.
Head to the{" "}
<Link to="/alerts" onClick={() => setDialog(false)}>
Alerts
</Link>{" "}
page to create yours today.
<br></br>
<br></br>
<hr></hr>
<br></br>
Comment on lines +38 to +60
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Jun 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Use a non-paragraph container for the rich modal content.

This block adds heading/separator markup inside DialogContentText, which is paragraph-typed and not semantically valid for <h2>/<hr>. Switch DialogContentText to component="div" (or use Box) for this section.

Proposed fix 
-				<DialogContentText>
+				<DialogContentText component="div">
 						<h2>Never Miss a Price Drop</h2>
 						...
 					</DialogContentText>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<h2>Never Miss a Price Drop</h2>
Tired of refreshing fares hoping for a better deal? Now you don't
have to. Introducing{" "}
<Link to="/alerts" onClick={() => setDialog(false)}>
Price Alerts
</Link>
—tell us your route, travel dates, and the price you're after, and
we'll email you when a matching fare drops.
<br></br>
<br></br>
Set up an alert in seconds: pick your origin and destination, choose
an accommodation, and optionally set a target price. We'll keep an eye
on fares for you and check back regularly, so the next time prices
fall, you'll hear about it. Unsubscribe anytime with a single click.
Head to the{" "}
<Link to="/alerts" onClick={() => setDialog(false)}>
Alerts
</Link>{" "}
page to create yours today.
<br></br>
<br></br>
<hr></hr>
<br></br>
<DialogContentText component="div">
<h2>Never Miss a Price Drop</h2>
Tired of refreshing fares hoping for a better deal? Now you don't
have to. Introducing{" "}
<Link to="/alerts" onClick={() => setDialog(false)}>
Price Alerts
</Link>
—tell us your route, travel dates, and the price you're after, and
we'll email you when a matching fare drops.
<br></br>
<br></br>
Set up an alert in seconds: pick your origin and destination, choose
an accommodation, and optionally set a target price. We'll keep an eye
on fares for you and check back regularly, so the next time prices
fall, you'll hear about it. Unsubscribe anytime with a single click.
Head to the{" "}
<Link to="/alerts" onClick={() => setDialog(false)}>
Alerts
</Link>{" "}
page to create yours today.
<br></br>
<br></br>
<hr></hr>
<br></br>
</DialogContentText>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/UpdateBar.js` around lines 38 - 60, The modal content currently renders
semantic elements like <h2> and <hr> inside DialogContentText (in UpdateBar.js),
which is paragraph-typed and invalid; update the DialogContentText wrapper used
for this block to use component="div" (or replace with a Box/div) so headings
and separators are valid, keeping the existing Link and onClick={() =>
setDialog(false)} behavior unchanged.

<h2>All Aboard Amtrak's Mardi Gras Service!</h2>
Get ready to ride the rails to the Gulf Coast! Amtrak has announced its new
<a href="https://www.amtrak.com/Mardi-Gras-Service"
Get ready to ride the rails to the Gulf Coast! Amtrak has announced its new
<a href="https://www.amtrak.com/amtrak-mardi-gras-service-train"
rel="noopener noreferrer"
target="_blank">
Mardi Gras Service
Expand Down