feat: Completed Study Site 6

src/pages/study_site_6/DeliveryRegions.jsx

@@ -0,0 +1,155 @@
+import React from "react";
+import { Spacer } from "@geist-ui/core";
+
+const DeliveryRegions = () => {
+  const regions = {
+    amsterdam: [
+      { name: "Amsterdam-Zuid", deliveryTime: "Same-day delivery" },
+      { name: "Amsterdam-Oost", deliveryTime: "Same-day delivery" },
+      { name: "Amsterdam-Noord", deliveryTime: "Same-day delivery" },
+    ],
+    nearbyCities: [
+      { name: "Haarlem", deliveryTime: "Next-day delivery" },
+      { name: "Utrecht", deliveryTime: "Next-day delivery" },
+      { name: "The Hague", deliveryTime: "Next-day delivery" },
+      { name: "Rotterdam", deliveryTime: "Next-day delivery" },
+    ],
+    international: [
+      "🇺🇸 United States",
+      "🇨🇦 Canada",
+      "🇬🇧 United Kingdom",
+      "🇩🇪 Germany",
+      "🇫🇷 France",
+      "🇮🇹 Italy",
+      "🇪🇸 Spain",
+      "🇦🇺 Australia",
+      "🇯🇵 Japan",
+      "🇨🇳 China",
+      "🇮🇳 India",
+      "🇧🇷 Brazil",
+      "🇲🇽 Mexico",
+      "🇷🇺 Russia",
+      "🇰🇷 South Korea",
+      "🇳🇱 Netherlands",
+      "🇸🇪 Sweden",
+      "🇳🇴 Norway",
+      "🇩🇰 Denmark",
+      "🇫🇮 Finland",
+      "🇧🇪 Belgium",
+      "🇨🇭 Switzerland",
+      "🇦🇹 Austria",
+      "🇮🇪 Ireland",
+      "🇵🇹 Portugal",
+      "🇬🇷 Greece",
+      "🇵🇱 Poland",
+      "🇨🇿 Czech Republic",
+      "🇭🇺 Hungary",
+      "🇹🇷 Turkey",
+      "🇮🇱 Israel",
+      "🇿🇦 South Africa",
+      "🇳🇿 New Zealand",
+      "🇦🇷 Argentina",
+      "🇨🇱 Chile",
+      "🇨🇴 Colombia",
+      "🇵🇪 Peru",
+      "🇻🇪 Venezuela",
+      "🇪🇬 Egypt",
+      "🇸🇦 Saudi Arabia",
+      "🇦🇪 United Arab Emirates",
+      "🇶🇦 Qatar",
+      "🇰🇼 Kuwait",
+      "🇧🇭 Bahrain",
+      "🇴🇲 Oman",
+      "🇯🇴 Jordan",
+      "🇱🇧 Lebanon",
+      "🇲🇾 Malaysia",
+      "🇸🇬 Singapore",
+      "🇹🇭 Thailand",
+      "🇻🇳 Vietnam",
+      "🇵🇭 Philippines",
+      "🇮🇩 Indonesia",
+      "🇵🇰 Pakistan",
+      "🇧🇩 Bangladesh",
+      "🇱🇰 Sri Lanka",
+      "🇺🇦 Ukraine",
+      "🇷🇴 Romania",
+      "🇧🇬 Bulgaria",
+      "🇭🇷 Croatia",
+      "🇸🇮 Slovenia",
+      "🇷🇸 Serbia",
+      "🇸🇰 Slovakia",
+      "🇱🇺 Luxembourg",
+      "🇪🇪 Estonia",
+      "🇱🇻 Latvia",
+      "🇱🇹 Lithuania",
+      "🇮🇸 Iceland",
+      "🇲🇹 Malta",
+      "🇨🇾 Cyprus",
+      "🇲🇦 Morocco",
+      "🇹🇳 Tunisia",
+      "🇳🇬 Nigeria",
+      "🇰🇪 Kenya",
+      "🇬🇭 Ghana",
+      "🇨🇮 Ivory Coast",
+      "🇸🇳 Senegal",
+      "🇰🇿 Kazakhstan",
+      "🇺🇿 Uzbekistan",
+      "🇬🇪 Georgia",
+      "🇦🇲 Armenia",
+      "🇦🇿 Azerbaijan",
+      "🇧🇾 Belarus",
+      "🇲🇩 Moldova",
+      "🇧🇦 Bosnia and Herzegovina",
+      "🇦🇱 Albania",
+      "🇲🇰 Macedonia",
+      "🇲🇪 Montenegro",
+      "🇽🇰 Kosovo",
+      "🇵🇾 Paraguay",
+      "🇺🇾 Uruguay",
+      "🇧🇴 Bolivia",
+      "🇪🇨 Ecuador",
+      "🇵🇦 Panama",
+      "🇨🇷 Costa Rica",
+      "🇬🇹 Guatemala",
+      "🇭🇳 Honduras",
+      "🇸🇻 El Salvador",
+      "🇯🇲 Jamaica",
+    ].map((country) => ({
+      name: country,
+      deliveryTime: "International shipping",
+    })),
+  };
+
+  return (
+    <div>
+      <h3>QuickDeliver Delivery Regions</h3>
+      <Spacer h={2} />
+      <h4>Amsterdam Neighborhoods</h4>
+      <ul>
+        {regions.amsterdam.map((region) => (
+          <li key={region.name}>
+            {region.name}: <i>{region.deliveryTime}</i>
+          </li>
+        ))}
+      </ul>
+      <h4>Nearby Cities</h4>
+      <ul>
+        {regions.nearbyCities.map((city) => (
+          <li key={city.name}>
+            {city.name}: <i>{city.deliveryTime}</i>
+          </li>
+        ))}
+      </ul>
+      <h4>International Shipping</h4>
+      <ul>
+        {regions.international.map((country) => (
+          <li key={country.name}>
+            {country.name}: <i>{country.deliveryTime}</i>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default DeliveryRegions;

src/pages/study_site_6/DownloadApp.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+
+function DownloadApp() {
+  const [showReminder, setShowReminder] = useState(false);
+
+  const handleButtonClick = () => {
+    setShowReminder(true);
+  };
+
+  return (
+    <div style={{ textAlign: "center", padding: "20px" }}>
+      <h3>Download the QuickDeliver App</h3>
+      <p>
+        Experience the convenience of QuickDeliver right at your fingertips.
+      </p>
+      <div style={{ margin: "20px 0" }}>
+        <button
+          onClick={handleButtonClick}
+          style={{ margin: "10px", padding: "10px 20px", fontSize: "16px" }}
+        >
+          Download for iOS
+        </button>
+        <button
+          onClick={handleButtonClick}
+          style={{ margin: "10px", padding: "10px 20px", fontSize: "16px" }}
+        >
+          Download for Android
+        </button>
+      </div>
+      {showReminder && (
+        <div>
+          <p style={{ fontSize: "18px", color: "red", marginTop: "20px" }}>
+            🚨 Just a friendly reminder: This is a study, and there is no actual
+            app! 🚨
+          </p>
+          <p>
+            Thanks for participating and have fun exploring our mock-up delivery
+            service.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default DownloadApp;

src/pages/study_site_6/StartPage6.jsx

@@ -0,0 +1,220 @@
+import React, { useState } from "react";
+import { getTranslation } from "../../core/i18n/I18NHandler";
+import WebpageBanner from "../../components/webpage_container/WebpageBanner";
+import {
+  StudySite,
+  getHeatmapData,
+} from "../../components/webpage_container/StudySite";
+import { pushToMouseLog, getSensorLog } from "../../core/log/SensorLogger";
+import { Collapse, Text, Spacer } from "@geist-ui/core";
+import PopupModal from "../../components/PopupModal";
+
+function StartPage6({ redirectLoc }) {
+  const [modalVisible, setModalVisible] = useState(false);
+
+  var saveMouseLog = function () {
+    pushToMouseLog(getHeatmapData());
+  };
+
+  const closeModal = () => {
+    setModalVisible(false);
+  };
+
+  const pricingStructure = (
+    <div>
+      <ul>
+        <li>Within Amsterdam: €7.99 for small packages.</li>
+        <li>Haarlem, Utrecht, and The Hague: €12.99 for small packages.</li>
+        <li>Insurance: Starts at €1 per €100 of coverage.</li>
+        <li>Signature confirmation: Additional €2.</li>
+      </ul>
+      <Text>
+        International shipping rates vary, with discounts available for bulk
+        shipments or regular business customers.
+      </Text>
+    </div>
+  );
+
+  // TODO THINK IF I WANT TO JUST USE AN OVERLAY FOR OTHER DUMMY LINKS, WHICH ARENT CORRECT???
+  // IS THAT OKAY???
+
+  return (
+    <StudySite>
+      <WebpageBanner translationKey="task_6_info" />
+      <Spacer h={1} />
+      <img
+        src="/images/quickdeliver_logo.png"
+        width="150px"
+        alt="QuickDeliver Logo"
+        class="centeredLogo"
+      />
+      <Text>
+        Welcome to QuickDeliver, your quickest and safest way to deliver goods
+        to anywhere in Amsterdam, the Netherlands and around the world.
+      </Text>
+      <Collapse.Group>
+        <Collapse title="Service Overview">
+          <Text>
+            Using QuickDeliver is simple and hassle-free. Start by visiting our
+            website or downloading our app, where you can easily{" "}
+            <a href="./download_quickdeliver">create an account</a> and schedule
+            your delivery. Enter the pickup and drop-off locations, select your
+            preferred delivery speed, and choose any additional services such as
+            signature confirmation or insurance. Our system will provide an
+            instant quote, and once confirmed, a courier will be dispatched to
+            your location. You can track your package in real-time and receive
+            notifications at every stage of the delivery process.
+          </Text>
+        </Collapse>
+        <Collapse title="How it works">
+          <Text>
+            Using QuickDeliver is simple and hassle-free. Start by visiting our
+            website or downloading our app, where you can easily{" "}
+            <a href="./download_quickdeliver">create an account</a> and schedule
+            your delivery. Enter the pickup and drop-off locations, select your
+            preferred delivery speed, and choose any additional services such as
+            signature confirmation or insurance. Our system will provide an
+            instant quote, and once confirmed, a courier will be dispatched to
+            your location. You can track your package in real-time and receive
+            notifications at every stage of the delivery process.
+          </Text>
+        </Collapse>
+        <Collapse title="Pricing">
+          <Text>
+            At QuickDeliver, we offer competitive pricing tailored to your
+            delivery needs. Our rates are based on the package's size, weight,
+            and delivery speed. See our pricing structure for more information:
+          </Text>
+          <button
+            className="centeredLogo"
+            onClick={() => {
+              setModalVisible(true);
+            }}
+          >
+            Pricing Structure
+          </button>
+          <Text>For an exact quote, contact our customer service team.</Text>
+          <PopupModal
+            visible={modalVisible}
+            closeHandler={closeModal}
+            title="Pricing Structure"
+            content={pricingStructure}
+          />
+        </Collapse>
+        <Collapse title="Delivery Areas">
+          <Text>
+            QuickDeliver operates within Amsterdam and extends to surrounding
+            cities and regions. Our same-day delivery service covers all
+            neighborhoods in Amsterdam, including Amsterdam-Zuid,
+            Amsterdam-Oost, and Amsterdam-Noord. Next-day delivery is available
+            for cities like Haarlem, Utrecht, The Hague, and Rotterdam. Our
+            international shipping network covers over 100 countries worldwide.
+            We are continually expanding our service areas to reach more
+            customers. Check <a href="./delivery_regions">our website</a> for
+            the latest updates on service availability in your region.
+          </Text>
+        </Collapse>
+        <Collapse title="Package Restrictions">
+          <Text>
+            To ensure the safety and security of all deliveries, QuickDeliver
+            has specific restrictions on certain items. We do not transport
+            hazardous materials, perishable goods, live animals, or illegal
+            substances. Additionally, packages exceeding 30 kg or dimensions
+            larger than 120 cm on any side require special arrangements. Please
+            review our detailed list of restricted items on our website or
+            contact customer support if you have questions about your package's
+            eligibility.
+          </Text>
+        </Collapse>
+        <Collapse title="Tracking">
+          <Text>
+            Stay informed about your delivery with QuickDeliver's real-time
+            tracking feature. Once your package is picked up, you'll receive a
+            tracking number that you can use on our website or{" "}
+            <a href="./download_quickdeliver">app</a>. Track the package's
+            journey from pickup to delivery, with updates at every stage. You'll
+            receive notifications via email when the package is out for delivery
+            and when it has been successfully delivered. For additional peace of
+            mind, opt for our signature confirmation service to ensure your
+            package is received by the intended recipient.
+          </Text>
+          <Text>
+            For additional costs for signature confirmation, please to the
+            pricing structure
+          </Text>
+          <button
+            className="centeredLogo"
+            onClick={() => {
+              setModalVisible(true);
+            }}
+          >
+            Pricing Structure
+          </button>
+          <PopupModal
+            visible={modalVisible}
+            closeHandler={closeModal}
+            title="Pricing Structure"
+            content={pricingStructure}
+          />
+        </Collapse>
+        <Collapse title="Customer Support">
+          <Text>
+            QuickDeliver is committed to providing excellent customer service.
+            Our support team is available 24/7 to assist with any questions or
+            concerns. Whether you need help scheduling a delivery, tracking a
+            package, or resolving an issue, we're here to help. Contact us via{" "}
+            <a href="tel:999 999 999 999">phone</a>, or{" "}
+            <a href="mailto:quickdeliver@example.com">email</a>.
+          </Text>
+        </Collapse>
+        <Collapse title="Returns and Refunds">
+          <Text>
+            We understand that sometimes things don't go as planned.
+            QuickDeliver offers a straightforward returns and refunds policy to
+            ensure customer satisfaction. If your package is damaged or lost
+            during transit, you may be eligible for a refund or replacement.
+            Contact our customer support team within 7 days of delivery to
+            initiate a claim. For packages that need to be returned to the
+            sender, we offer discounted return shipping rates. Please{" "}
+            <a
+              href={redirectLoc}
+              onClick={() => {
+                saveMouseLog();
+              }}
+            >
+              {" "}
+              contact us
+            </a>
+            in regards to any returns and refunds.
+          </Text>
+        </Collapse>
+        <Collapse title="Business Solutions">
+          <Text>
+            QuickDeliver provides tailored delivery solutions for businesses of
+            all sizes. Our business accounts offer benefits such as volume
+            discounts, dedicated account managers, and customizable delivery
+            options. From e-commerce shipments to important business documents,
+            we ensure your packages are delivered efficiently and
+            professionally. Sign up for a business account on our website and
+            discover how QuickDeliver can streamline your delivery needs and
+            enhance your customer experience.
+          </Text>
+        </Collapse>
+        <Collapse title="Safety and Security">
+          <Text>
+            The safety and security of your packages are our top priority.
+            QuickDeliver employs advanced security measures, including
+            tamper-evident packaging and real-time tracking, to protect your
+            items during transit. Our couriers undergo thorough background
+            checks and training to ensure reliable and professional service. In
+            the event of an issue, our dedicated support team is available to
+            assist and resolve any concerns promptly. Trust QuickDeliver for a
+            secure and worry-free delivery experience.
+          </Text>
+        </Collapse>
+      </Collapse.Group>
+    </StudySite>
+  );
+}
+
+export default StartPage6;