feat: Added subpages to StudyPage 1

src/App.js

@@ -49,6 +49,15 @@ const TourOperators = React.lazy(() =>
   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(
   persist(
     () => ({
@@ -288,6 +297,38 @@ function App() {
               </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
             path="/redirectPage/:url/:infoKey"
             element={

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;

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;

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;

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;

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
             confirmation, or contact your travel agency or the Service Centre.
             Alternatively, you can also rebook your flight details under{" "}
-            <a href="./">My Bookings.</a>
+            <a href="./my_bookings">My Bookings.</a>
           </Text>
         </Collapse>
         <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
             booking confirmation, or contact your travel agency or the Service
             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>
         </Collapse>
         <Collapse title="How do I get my money returned to me after a refund?">
@@ -122,10 +122,10 @@ function StartPage1({ redirectLoc }) {
           </Text>
           <ul>
             <li>
-              <a href="./">Flight Problems</a>
+              <a href="./flight_problems">Flight Problems</a>
             </li>
             <li>
-              <a href="./">Rebooking</a>
+              <a href="./rebooking">Rebooking</a>
             </li>
             <li>
               <a href={redirectLoc} onclick={saveMouseLog()}>
@@ -133,7 +133,7 @@ function StartPage1({ redirectLoc }) {
               </a>
             </li>
             <li>
-              <a href="./">General Concerns</a>
+              <a href="./general_concerns">General Concerns</a>
             </li>
           </ul>
         </Collapse>