Browse Source

feat: Added subpages to StudyPage 1

master
Denis Thiessen 5 months ago
parent
commit
5b3b6eeaba
  1. 41
      src/App.js
  2. 46
      src/pages/study_site_1/FlightProblems.jsx
  3. 31
      src/pages/study_site_1/GeneralConcerns.jsx
  4. 40
      src/pages/study_site_1/MyBookings.jsx
  5. 37
      src/pages/study_site_1/Rebooking.jsx
  6. 18
      src/pages/study_site_1/StartPage1.jsx

41
src/App.js

@ -49,6 +49,15 @@ const TourOperators = React.lazy(() =>
import("./pages/study_site_2/TourOperators") import("./pages/study_site_2/TourOperators")
); );
const GeneralConcerns = React.lazy(() =>
import("./pages/study_site_1/GeneralConcerns")
);
const MyBookings = React.lazy(() => import("./pages/study_site_1/MyBookings"));
const Rebooking = React.lazy(() => import("./pages/study_site_1/Rebooking"));
const FlightProblems = React.lazy(() =>
import("./pages/study_site_1/FlightProblems")
);
export const sensorLogState = createStore( export const sensorLogState = createStore(
persist( persist(
() => ({ () => ({
@ -288,6 +297,38 @@ function App() {
</React.Suspense> </React.Suspense>
} }
/> />
<Route
path="/general_concerns"
element={
<React.Suspense fallback={<>...</>}>
<GeneralConcerns />
</React.Suspense>
}
/>
<Route
path="/my_bookings"
element={
<React.Suspense fallback={<>...</>}>
<MyBookings />
</React.Suspense>
}
/>
<Route
path="/flight_problems"
element={
<React.Suspense fallback={<>...</>}>
<FlightProblems />
</React.Suspense>
}
/>
<Route
path="/rebooking"
element={
<React.Suspense fallback={<>...</>}>
<Rebooking />
</React.Suspense>
}
/>
<Route <Route
path="/redirectPage/:url/:infoKey" path="/redirectPage/:url/:infoKey"
element={ element={

46
src/pages/study_site_1/FlightProblems.jsx

@ -0,0 +1,46 @@
import React from "react";
import { Text, Spacer, Card, Grid } from "@geist-ui/core";
const flightIssues = [
{
flightNumber: "BB123",
issue: "Delayed",
details:
"The flight is delayed due to weather conditions. Estimated departure: 14:30.",
},
{
flightNumber: "BB456",
issue: "Cancelled",
details:
"The flight has been cancelled due to technical issues. Please contact support for rebooking.",
},
{
flightNumber: "BB789",
issue: "Rescheduled",
details:
"The flight has been rescheduled to a later time. New departure: 18:00.",
},
];
function FlightProblems() {
return (
<div>
<Spacer h={2} />
<h3>Current Flight Issues</h3>
<Spacer h={2} />
<Grid.Container gap={2} justify="center">
{flightIssues.map((issue, index) => (
<Grid xs={24} sm={12} md={8} key={index}>
<Card shadow>
<Text h4>{`Flight Number: ${issue.flightNumber}`}</Text>
<Text type="warning">{`Issue: ${issue.issue}`}</Text>
<Text>{`Details: ${issue.details}`}</Text>
</Card>
</Grid>
))}
</Grid.Container>
</div>
);
}
export default FlightProblems;

31
src/pages/study_site_1/GeneralConcerns.jsx

@ -0,0 +1,31 @@
import React from "react";
import { Text, Spacer } from "@geist-ui/core";
function GeneralConcerns() {
return (
<div>
<Spacer h={2} />
<h3>General Concerns</h3>
<Spacer h={2} />
<div>
<Text>
Have general concerns or questions about your flight with BudgetBird
Airlines? We're here to help. Whether you need information about our
policies, services, or anything else, our support team is available
24/7 to assist you.
</Text>
<Text>
Contact us via phone, email, or our online contact form for any
inquiries. We strive to provide a comfortable and enjoyable experience
for all our passengers.
</Text>
<Text>
For immediate assistance, please reach out to our customer support
team using the contact details provided on our website.
</Text>
</div>
</div>
);
}
export default GeneralConcerns;

40
src/pages/study_site_1/MyBookings.jsx

@ -0,0 +1,40 @@
import React from "react";
import { Text, Spacer } from "@geist-ui/core";
function MyBookings() {
return (
<div>
<Spacer h={2} />
<h3>My Bookings</h3>
<Spacer h={2} />
<div>
<Text>
Welcome to the My Bookings section. Here, you can view and manage all
your current and past flight bookings with BudgetBird Airlines. You
can:
</Text>
<ul>
<li>View your booking details</li>
<li>Check flight schedules</li>
<li>Update your contact information</li>
<li>Add special requests for your flights</li>
<li>Cancel or rebook your flights</li>
</ul>
<Text>
To access your bookings, please log in to your BudgetBird Airlines
account using your email and password.
</Text>
<Text>
If you encounter any issues while accessing your bookings, please
contact our customer support team for assistance.
</Text>
<Text>
And keep in mind, this is a user study, so there are no flight
bookings available. 😊
</Text>
</div>
</div>
);
}
export default MyBookings;

37
src/pages/study_site_1/Rebooking.jsx

@ -0,0 +1,37 @@
import React from "react";
import { Text, Spacer } from "@geist-ui/core";
function Rebooking() {
return (
<div>
<Spacer h={2} />
<h3>Rebooking</h3>
<Spacer h={2} />
<div>
<Text>
Need to change your booking? No problem. You can rebook your flight
with BudgetBird Airlines easily. To rebook, visit the{" "}
<a href="./my_bookings">My Bookings</a>
section, select the booking you wish to change, and follow the prompts
to update your travel dates or other details.
</Text>
<Text>
Please note that changes to your booking may incur additional fees
depending on the terms and conditions of your original booking. For
detailed information, refer to your booking confirmation or contact
our support team.
</Text>
<Text>
If you have any questions about the rebooking process or need
assistance, please contact our customer support team.
</Text>
<Text>
And keep in mind, this is a user study, so there are no flight
(re-)bookings available here. 😊
</Text>
</div>
</div>
);
}
export default Rebooking;

18
src/pages/study_site_1/StartPage1.jsx

@ -36,7 +36,7 @@ function StartPage1({ redirectLoc }) {
rebooked and whether there is a fee for this on your booking rebooked and whether there is a fee for this on your booking
confirmation, or contact your travel agency or the Service Centre. confirmation, or contact your travel agency or the Service Centre.
Alternatively, you can also rebook your flight details under{" "} Alternatively, you can also rebook your flight details under{" "}
<a href="./">My Bookings.</a>
<a href="./my_bookings">My Bookings.</a>
</Text> </Text>
</Collapse> </Collapse>
<Collapse title="Can I make a name change after I have booked?"> <Collapse title="Can I make a name change after I have booked?">
@ -75,11 +75,11 @@ function StartPage1({ redirectLoc }) {
ticket can be rebooked and whether there is a fee for this on your ticket can be rebooked and whether there is a fee for this on your
booking confirmation, or contact your travel agency or the Service booking confirmation, or contact your travel agency or the Service
Centre. Alternatively, you can also make a change to your flight Centre. Alternatively, you can also make a change to your flight
details in the <a href="./">My Bookings</a> section. Depending on
the alternative flight you choose, there may be surcharges on a
higher fare. The amount of the surcharge depends on the availability
of the selected booking class and will be communicated to you during
the rebooking process.
details in the <a href="./my_bookings">My Bookings</a> section.
Depending on the alternative flight you choose, there may be
surcharges on a higher fare. The amount of the surcharge depends on
the availability of the selected booking class and will be
communicated to you during the rebooking process.
</Text> </Text>
</Collapse> </Collapse>
<Collapse title="How do I get my money returned to me after a refund?"> <Collapse title="How do I get my money returned to me after a refund?">
@ -122,10 +122,10 @@ function StartPage1({ redirectLoc }) {
</Text> </Text>
<ul> <ul>
<li> <li>
<a href="./">Flight Problems</a>
<a href="./flight_problems">Flight Problems</a>
</li> </li>
<li> <li>
<a href="./">Rebooking</a>
<a href="./rebooking">Rebooking</a>
</li> </li>
<li> <li>
<a href={redirectLoc} onclick={saveMouseLog()}> <a href={redirectLoc} onclick={saveMouseLog()}>
@ -133,7 +133,7 @@ function StartPage1({ redirectLoc }) {
</a> </a>
</li> </li>
<li> <li>
<a href="./">General Concerns</a>
<a href="./general_concerns">General Concerns</a>
</li> </li>
</ul> </ul>
</Collapse> </Collapse>

Loading…
Cancel
Save