Merge pull request #76 from Lor3wp/dev

Dev

.env.example

@@ -0,0 +1,3 @@
+VITE_PUBLIC_PORT=3000
+NODE_ENV=development
+VITE_PUBLIC_DOMAIN=localhost

.gitignore

@@ -42,4 +42,6 @@ psd
 thumb
 sketch
 
+.env
+
 # End of https://www.toptal.com/developers/gitignore/api/react

package.json

@@ -14,6 +14,7 @@
     "format": "prettier --write ./src"
   },
   "dependencies": {
+    "axios": "^1.6.2",
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.11.1",
     "geolib": "^3.3.4",

public/locales/en/translation.json

@@ -52,6 +52,7 @@
   "Maksaminen": "Payment",
 
   "Peruuta varaus": "Cancel your rent",
+  "Varauksen peruutus epäonnistui!": "Rent cancellation failed!",
   "Oletko varma, että haluat peruuttaa varauksen?": "Are you sure you want to cancel your rent?",
   "Haluatko varmasti poistua sivustolta?": "Are you sure you want to leave site?",
   "Tekemiäsi muutoksia ei tallenneta.": "Any changes you made will not be saved.",
@@ -145,17 +146,19 @@
   "successful_card_title": "Trailer booking <1>successful!</1>",
   "Lähetimme sähköpostiisi ohjeet ja varausvahvistuksen.": "We will send you instructions and a booking confirmation by email.",
 
+  "Laatikkopyörä": "Cargo bike",
+  "Peräkärry": "Trailer",
   "Varauksesi": "Your reservation",
   "Alkaa": "Starts at",
   "Varauksesi alkaa pian!": "Your rent will start soon!",
   "days_until": "Starts in {{daysUntil}} days",
   "hours_until": "Starts in {{hoursUntil}} hours",
   "Tuote palautettu!": "Item returned!",
-  "Varaus peruutettu!": "Rent cancelled!",
+  "Varaus peruutettu!": "Item rent cancelled!",
   "Ennen palautusta": "Before returning",
   "late_cancel_warning_paragraph": "The product must be at the Sortti-station! Late returns will be charged a <1>€40</1> late fee according to the terms of the contract.",
   "Palvelun peruuttaminen ei ole mahdollista, jos vuokra-ajan alkamiseen on jäljellä 24 tuntia tai vähemmän.": "Cancellation of the service is not possible if there are 24 hours or less remaining until the start of the rental period.",
-  "Erityistilanteissa suosittelemme ottamaan suoraan yhteyttä asiakaspalveluumme:": "for special situations, we recommend that you contact our customer service directly:",
+  "Erityistilanteissa suosittelemme ottamaan suoraan yhteyttä asiakaspalveluumme:": "In special circumstances, we recommend that you contact our customer service directly:",
   "Varauksen peruutus": "Cancellation of a reservation",
   "jäljellä": "left",
   "Varaus aika päättyi!": "Rent time expired!",
@@ -172,6 +175,7 @@
   "Ole hyvä ja kirjoita palautetta ennen lähettämistä!": "Please write a feedback before sending it!",
   "Palaute lähetetty!": "Feedback sent!",
   "Lähetä": "Send",
+  "Palautteen lähettäminen epäonnistui!": "Failed to send feedback!",
 
   "Aloita varaus uudelleen.": "Start the booking again.",
   "rent_process_timer": "Time left to rent: {{minutes}}:{{seconds}}"

public/locales/fi/translation.json

@@ -52,6 +52,7 @@
   "Maksaminen": "Maksaminen",
 
   "Peruuta varaus": "Peruuta varaus",
+  "Varauksen peruutus epäonnistui!": "Varauksen peruutus epäonnistui!",
   "Oletko varma, että haluat peruuttaa varauksen?": "Oletko varma, että haluat peruuttaa varauksen?",
   "Haluatko varmasti poistua sivustolta?": "Haluatko varmasti poistua sivustolta?",
   "Tekemiäsi muutoksia ei tallenneta.": "Tekemiäsi muutoksia ei tallenneta.",
@@ -144,6 +145,8 @@
   "successful_card_title": "Peräkärryn varaus <1>onnistui!</1>",
   "Lähetimme sähköpostiisi ohjeet ja varausvahvistuksen.": "Lähetimme sähköpostiisi ohjeet ja varausvahvistuksen.",
 
+  "Laatikkopyörä": "Laatikkopyörä",
+  "Peräkärry": "Peräkärry",
   "Varauksesi": "Varauksesi",
   "Alkaa": "Alkaa",
   "Varauksesi alkaa pian!": "Varauksesi alkaa pian!",
@@ -171,6 +174,7 @@
   "Ole hyvä ja kirjoita palautetta ennen lähettämistä!": "Ole hyvä ja kirjoita palautetta ennen lähettämistä!",
   "Palaute lähetetty!": "Palaute lähetetty!",
   "Lähetä": "Lähetä",
+  "Palautteen lähettäminen epäonnistui!": "Palautteen lähettäminen epäonnistui!",
 
   "Aloita varaus uudelleen.": "Aloita varaus uudelleen.",
   "rent_process_timer": "Varausaikaa jäljellä: {{minutes}}:{{seconds}}"

public/locales/sv/translation.json

@@ -52,6 +52,7 @@
   "Maksaminen": "Betalning",
 
   "Peruuta varaus": "Säga upp din hyra",
+  "Varauksen peruutus epäonnistui!": "Hyressättningen misslyckades!",
   "Oletko varma, että haluat peruuttaa varauksen?": "Är du säker på att du vill säga upp din hyra?",
   "Haluatko varmasti poistua sivustolta?": "Är du säker på att du vill lämna sidan?",
   "Tekemiäsi muutoksia ei tallenneta.": "Dina ändringar kommer inte att sparas.",
@@ -144,6 +145,8 @@
   "successful_card_title": "Trailerbokning <1>framgångsrik!</1>",
   "Lähetimme sähköpostiisi ohjeet ja varausvahvistuksen.": "Vi skickar instruktioner och en bokningsbekräftelse till dig via e-post.",
 
+  "Laatikkopyörä": "Lastcykel",
+  "Peräkärry": "Trailer",
   "Varauksesi": "Din bokning",
   "Alkaa": "Börjar vid",
   "Varauksesi alkaa pian!": "Din hyra kommer att börja snart!",
@@ -171,6 +174,7 @@
   "Ole hyvä ja kirjoita palautetta ennen lähettämistä!": "Vänligen skriv en feedback innan du skickar den!",
   "Palaute lähetetty!": "Feedback skickad!",
   "Lähetä": "Skicka",
+  "Palautteen lähettäminen epäonnistui!": "Misslyckades med att skicka feedback!",
 
   "Aloita varaus uudelleen.": "Starta bokningen igen.",
   "rent_process_timer": "Tid kvar till uthyrning: {{minutes}}:{{seconds}}"

src/App.jsx

@@ -1,5 +1,4 @@
-import { useState } from 'react';
-import { Route, Routes, Navigate } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import FrontPage from './pages/FrontPage';
 import RentInfoPage from './pages/RentInfo';
 import NotFoundPage from './pages/NotFound';
@@ -12,23 +11,17 @@ import './App.css';
 import './theme.css';
 import { StepperProvider } from './context/StepperContext';
 import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
 
 function App() {
-  // TODO: Set to false when backend is ready
-  const [rentSuccessful, setRentSuccessful] = useState(true);
-  const [itemReturned, setItemReturned] = useState(true);
-
-  const { t } = useTranslation();
-
-  // TODO: Pass this down when the backend is ready
-  const handleSuccessfulRent = () => {
-    setRentSuccessful(true);
-  };
+  const [itemReturned, setItemReturned] = useState(false);
 
   const handleItemReturned = () => {
     setItemReturned(true);
   };
 
+  const { t } = useTranslation();
+
   return (
     <Routes>
       <Route path="/" element={<FrontPage />} />
@@ -43,35 +36,27 @@ function App() {
           </>
         }
       />
-      {rentSuccessful ? (
-        <Route
-          path="/rent-successful"
-          element={
-            <>
-              <Header title={t('Peräkärryn vuokraus')} />
-              <SuccessfulRentalPage />
-            </>
-          }
-        />
-      ) : (
-        <Route path="*" element={<Navigate to="/" />} />
-      )}
-      {itemReturned ? (
-        <Route
-          path="/rent-info"
-          element={
-            <>
-              <Header title={t('Varauksen tiedot')} />
-              <RentInfoPage handleItemReturned={handleItemReturned} />
-            </>
-          }
-        />
-      ) : (
-        <Route path="*" element={<Navigate to="/" />} />
-      )}
+      <Route
+        path="/rent-successful/:id"
+        element={
+          <>
+            <Header title={t('Peräkärryn vuokraus')} />
+            <SuccessfulRentalPage />
+          </>
+        }
+      />
+      <Route
+        path="/rent-info/:id"
+        element={
+          <>
+            <Header title={t('Varauksen tiedot')} />
+            <RentInfoPage handleItemReturned={handleItemReturned} />
+          </>
+        }
+      />
       {itemReturned ? (
         <Route
-          path="/rate-item"
+          path="/rate-item/:id"
           element={
             <>
               <Header title={t('Palaute')} />
@@ -82,6 +67,7 @@ function App() {
       ) : (
         <Route path="*" element={<Navigate to="/" />} />
       )}
+
       <Route path="*" element={<NotFoundPage />} />
     </Routes>
   );

src/components/BankButton.jsx

@@ -5,7 +5,7 @@ import PopUpWarningModal from '../components/PopUpWarningModal';
 import { useNavigate } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 
-const BankButton = ({ logo, bankName }) => {
+const BankButton = ({ logo, bankName, rentId }) => {
   const [showWarningModal, setShowWarningModal] = useState(false);
   const navigate = useNavigate();
 
@@ -15,7 +15,7 @@ const BankButton = ({ logo, bankName }) => {
     if (bankName === 'HSY') {
       handleOpenWarningModal();
     } else {
-      navigate('/rent-successful');
+      navigate(`/rent-successful/${rentId}`);
     }
   };
 
@@ -68,6 +68,7 @@ const BankButton = ({ logo, bankName }) => {
 BankButton.propTypes = {
   logo: PropTypes.any.isRequired,
   bankName: PropTypes.string,
+  rentId: PropTypes.string.isRequired,
 };
 
 export default BankButton;