From 20b5849f18b7f100069a66fa9d3bdc1616953871 Mon Sep 17 00:00:00 2001
From: Lor3wp <61760289+Lor3wp@users.noreply.github.com>
Date: Thu, 30 Nov 2023 17:01:20 +0200
Subject: [PATCH 1/8] update on post commands

---
 .env                                |  1 +
 package-lock.json                   | 27 ++++++++++++++++++++++++++-
 package.json                        |  6 ++++--
 src/App.jsx                         |  1 +
 src/components/SelectTime.jsx       |  7 +++++--
 src/components/TimeForm.jsx         | 20 ++++++--------------
 src/components/TimePeriodButton.jsx | 26 +++++++++++++++++++++++++-
 src/hooks/useApi.js                 | 28 ++++++++++++++++++++++++++++
 src/services/ApiServices.js         | 17 +++++++++++++++++
 vite.config.js                      |  9 +++++++++
 10 files changed, 122 insertions(+), 20 deletions(-)
 create mode 100644 .env
 create mode 100644 src/hooks/useApi.js
 create mode 100644 src/services/ApiServices.js

diff --git a/.env b/.env
new file mode 100644
index 0000000..6c40f26
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+VITE_API_BASE_URL=https://hsytrailerapi.azurewebsites.net/api/
diff --git a/package-lock.json b/package-lock.json
index 1c11e3d..83898f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "bootstrap": "^5.3.2",
         "bootstrap-icons": "^1.11.1",
+        "dotenv": "^16.3.1",
         "i18next": "^23.7.6",
         "i18next-browser-languagedetector": "^7.2.0",
         "i18next-http-backend": "^2.4.2",
@@ -27,7 +28,8 @@
         "react-i18next": "^13.5.0",
         "react-router-dom": "^6.16.0",
         "react-simple-star-rating": "^5.1.7",
-        "react-toastify": "^9.1.3"
+        "react-toastify": "^9.1.3",
+        "uuid": "^9.0.1"
       },
       "devDependencies": {
         "@types/react": "^18.2.15",
@@ -1288,6 +1290,17 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
+      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/motdotla/dotenv?sponsor=1"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.567",
       "dev": true,
@@ -4244,6 +4257,18 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "4.5.0",
       "dev": true,
diff --git a/package.json b/package.json
index 102f5fc..372ec16 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.11.1",
+    "dotenv": "^16.3.1",
     "i18next": "^23.7.6",
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-http-backend": "^2.4.2",
@@ -33,7 +34,8 @@
     "react-i18next": "^13.5.0",
     "react-router-dom": "^6.16.0",
     "react-simple-star-rating": "^5.1.7",
-    "react-toastify": "^9.1.3"
+    "react-toastify": "^9.1.3",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
@@ -48,4 +50,4 @@
     "prettier": "3.0.3",
     "vite": "^4.4.5"
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.jsx b/src/App.jsx
index 936b025..0bdb348 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -13,6 +13,7 @@ import './theme.css';
 import { StepperProvider } from './context/StepperContext';
 import { useTranslation } from 'react-i18next';
 
+
 function App() {
   // TODO: Set to false when backend is ready
   const [rentSuccessful, setRentSuccessful] = useState(true);
diff --git a/src/components/SelectTime.jsx b/src/components/SelectTime.jsx
index b3b8148..8313a46 100644
--- a/src/components/SelectTime.jsx
+++ b/src/components/SelectTime.jsx
@@ -7,6 +7,7 @@ function SelectTime({
   setSelectedStationAndTime,
   stationName,
   timeSlots,
+  randomUUID,
 }) {
   const handleClick = (stationName, timeSlot) => {
     setSelectedStationAndTime({
@@ -16,6 +17,7 @@ function SelectTime({
 
   const itemElements = timeSlots.map((item, index) => (
     <TimePeriodButton
+      randomUUID={randomUUID}
       buttonText={item}
       setSelectedTime={handleClick}
       key={index}
@@ -35,12 +37,13 @@ function SelectTime({
 }
 
 SelectTime.propTypes = {
-  selectedStationAndTime: PropTypes.obj,
+  selectedStationAndTime: PropTypes.object,
   setSelectedStationAndTime: PropTypes.func,
   setSelectedStation: PropTypes.func,
   stationName: PropTypes.string.isRequired, // Expect a string prop, and it's required
-  selectedTime: PropTypes.string,
   timeSlots: PropTypes.array.isRequired,
+  randomUUID: PropTypes.string,
 };
 
+
 export default SelectTime;
diff --git a/src/components/TimeForm.jsx b/src/components/TimeForm.jsx
index d48ed27..1c74d8d 100644
--- a/src/components/TimeForm.jsx
+++ b/src/components/TimeForm.jsx
@@ -12,7 +12,11 @@ import { ChevronCompactLeft } from 'react-bootstrap-icons';
 import { ChevronCompactRight } from 'react-bootstrap-icons';
 import { useStepper } from '../hooks/useStepper';
 import { useTranslation } from 'react-i18next';
-
+import { v4 as uuidv4 } from 'uuid';
+// create random uuid for user identification in temporary reservation
+const randomUUID = uuidv4();
+// fill with Date values to disable those dates from caledar
+const futureDates = [];
 const ProductAndTime = ({
   onProductAndTimeSelected,
   onPrevStep,
@@ -31,21 +35,8 @@ const ProductAndTime = ({
     selectedProduct,
   } = useStepper();
 
-  // values will be used in future
-  const currentDate = new Date();
-  const currentMonth = currentDate.getMonth();
-  const currentYear = currentDate.getFullYear();
-  const currentDay = currentDate.getDate();
-  const futureDates = [];
-
   const navigate = useNavigate();
 
-  // TODO: Where do we need that? Seems unnecessary.
-  for (let i = 1; i < 4; i++) {
-    const randomDate = new Date(currentYear, currentMonth, currentDay + i);
-    futureDates.push(randomDate);
-  }
-
   // handling the button click for selecting a time and date
   const handleSubmit = () => {
     if (
@@ -97,6 +88,7 @@ const ProductAndTime = ({
             if (station.selected) {
               return (
                 <SelectTime
+                  randomUUID={randomUUID}
                   timeSlots={station.timeSlots}
                   setSelectedStationAndTime={setSelectedStationAndTime}
                   selectedStationAndTime={selectedStationAndTime}
diff --git a/src/components/TimePeriodButton.jsx b/src/components/TimePeriodButton.jsx
index ca8676d..321efdb 100644
--- a/src/components/TimePeriodButton.jsx
+++ b/src/components/TimePeriodButton.jsx
@@ -1,15 +1,38 @@
 import Button from 'react-bootstrap/Button';
 import PropTypes from 'prop-types';
 import style from '../css/TimeButton.module.css';
+import { useApi } from '../hooks/useApi';
+import { useStepper } from '../hooks/useStepper';
 
 function TimePeriodButton({
   buttonText,
   setSelectedTime,
   selectedTime,
   stationName,
+  randomUUID,
 }) {
-  const handleClick = () => {
+  const { postRequest } = useApi();
+  const { selectedDate, selectedProduct, isAdapter } = useStepper();
+
+  const handleClick = async () => {
     setSelectedTime(stationName, buttonText);
+    try {
+      const bodyData = {
+        isAdapter: false,
+        uuid: randomUUID,
+        station: stationName,
+        timeSlot: buttonText,
+        product: selectedProduct,
+        date: selectedDate,
+      };
+      const isEmptyField = Object.values(bodyData).some((value) => !value);
+      if (!isEmptyField) {
+        const response = await postRequest('add-temp-reservation', bodyData);
+        console.log('api response: ', response);
+      }
+    } catch (error) {
+      console.error('api error: ', error);
+    }
   };
 
   return (
@@ -35,6 +58,7 @@ TimePeriodButton.propTypes = {
   stationName: PropTypes.string.isRequired,
   setSelectedTime: PropTypes.func.isRequired,
   setSelectedStation: PropTypes.func,
+  randomUUID: PropTypes.string,
 };
 
 export default TimePeriodButton;
diff --git a/src/hooks/useApi.js b/src/hooks/useApi.js
new file mode 100644
index 0000000..9a73079
--- /dev/null
+++ b/src/hooks/useApi.js
@@ -0,0 +1,28 @@
+import { postRequest } from '../services/ApiServices';
+import { useNavigate } from 'react-router-dom';
+
+export const useApi = () => {
+  const navigate = useNavigate();
+
+  const handleApiError = (error) => {
+    console.error('API Error:', error);
+    navigate('/error');
+  };
+
+  const handleApiSuccess = (response) => {
+    console.log('API Response:', response);
+  };
+
+  const postApiRequest = async (endpoint, data) => {
+    try {
+      const response = await postRequest(endpoint, data);
+      handleApiSuccess(response);
+    } catch (error) {
+      handleApiError(error);
+    }
+  };
+
+  return {
+    postRequest: postApiRequest,
+  };
+};
diff --git a/src/services/ApiServices.js b/src/services/ApiServices.js
new file mode 100644
index 0000000..b36270a
--- /dev/null
+++ b/src/services/ApiServices.js
@@ -0,0 +1,17 @@
+const API_BASE_URL = 'https://hsytrailerapi.azurewebsites.net/api/';
+
+export const postRequest = async (endpoint, data) => {
+  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(data),
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! Status: ${response.status}`);
+  }
+
+  return response.json();
+};
diff --git a/vite.config.js b/vite.config.js
index 89e04ca..3e0094e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,5 +5,14 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
   base: '/', // gh pages base config
   plugins: [react()],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5173', // Point to your Vite development server
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
 });
 

From b5c12701c2e1d1430ff879bc2bc7dfee6b8fa1bf Mon Sep 17 00:00:00 2001
From: Lor3wp <61760289+Lor3wp@users.noreply.github.com>
Date: Wed, 6 Dec 2023 19:08:53 +0200
Subject: [PATCH 2/8] temp resevation replaced on confirmed rental

---
 src/components/PopUpWarningModal.jsx |  2 +-
 src/components/TimeForm.jsx          | 31 +++++++++++++++++++++++++---
 src/components/TimePeriodButton.jsx  |  6 +++---
 src/components/UserForm.jsx          | 28 +++++++++++++++++++++++--
 src/hooks/useApi.js                  | 11 +++++++++-
 src/pages/RentProcess.jsx            |  9 ++++++--
 src/services/ApiServices.js          | 14 +++++++++++++
 7 files changed, 89 insertions(+), 12 deletions(-)

diff --git a/src/components/PopUpWarningModal.jsx b/src/components/PopUpWarningModal.jsx
index 134d025..9736a51 100644
--- a/src/components/PopUpWarningModal.jsx
+++ b/src/components/PopUpWarningModal.jsx
@@ -40,7 +40,7 @@ PopUpWarningModal.propTypes = {
   show: PropTypes.bool,
   onHide: PropTypes.func,
   title: PropTypes.string,
-  body: PropTypes.obj,
+  body: PropTypes.string,
   backButton: PropTypes.string,
   acceptButton: PropTypes.string,
   acceptButtonVariant: PropTypes.string,
diff --git a/src/components/TimeForm.jsx b/src/components/TimeForm.jsx
index 1c74d8d..f7be6ae 100644
--- a/src/components/TimeForm.jsx
+++ b/src/components/TimeForm.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import RentCalendar from '../components/Calendar';
 import SelectTime from '../components/SelectTime';
 import timeStyle from '../css/SelectTime.module.css';
@@ -12,16 +12,17 @@ import { ChevronCompactLeft } from 'react-bootstrap-icons';
 import { ChevronCompactRight } from 'react-bootstrap-icons';
 import { useStepper } from '../hooks/useStepper';
 import { useTranslation } from 'react-i18next';
-import { v4 as uuidv4 } from 'uuid';
+import { useApi } from '../hooks/useApi';
 // create random uuid for user identification in temporary reservation
-const randomUUID = uuidv4();
 // fill with Date values to disable those dates from caledar
 const futureDates = [];
 const ProductAndTime = ({
   onProductAndTimeSelected,
   onPrevStep,
   handleWarningModal,
+  randomUUID,
 }) => {
+  const { deleteRequest } = useApi();
   const [showWarningModal, setShowWarningModal] = useState(false);
 
   const { t } = useTranslation();
@@ -58,6 +59,29 @@ const ProductAndTime = ({
     setShowWarningModal(true);
   };
 
+  // TODO add before unload delete temp reservation with uuid
+  useEffect(() => {
+    const sendDeleteRequestOnUnload = async () => {
+      window.addEventListener('beforeunload', async () => {
+        try {
+          const responce = await deleteRequest(
+            'delete-temp-reservation/',
+            randomUUID,
+          );
+          console.log('TimeForm.jsx 72 ', responce);
+        } catch (error) {
+          console.error('Error sending DELETE request:', error);
+        }
+      });
+    };
+
+    sendDeleteRequestOnUnload();
+
+    // Cleanup the event listener when the component unmounts
+    return () => {
+      window.removeEventListener('beforeunload', sendDeleteRequestOnUnload);
+    };
+  }, []);
   return (
     <>
       <PopUpWarningModal
@@ -123,6 +147,7 @@ ProductAndTime.propTypes = {
   onProductAndTimeSelected: PropTypes.func.isRequired,
   onPrevStep: PropTypes.func.isRequired,
   handleWarningModal: PropTypes.func,
+  randomUUID: PropTypes.string.isRequired,
 };
 
 export default ProductAndTime;
diff --git a/src/components/TimePeriodButton.jsx b/src/components/TimePeriodButton.jsx
index 321efdb..fee4768 100644
--- a/src/components/TimePeriodButton.jsx
+++ b/src/components/TimePeriodButton.jsx
@@ -12,23 +12,23 @@ function TimePeriodButton({
   randomUUID,
 }) {
   const { postRequest } = useApi();
-  const { selectedDate, selectedProduct, isAdapter } = useStepper();
+  const { selectedDate, selectedProduct, selectAdaptor } = useStepper();
 
   const handleClick = async () => {
     setSelectedTime(stationName, buttonText);
     try {
       const bodyData = {
-        isAdapter: false,
         uuid: randomUUID,
         station: stationName,
         timeSlot: buttonText,
         product: selectedProduct,
         date: selectedDate,
+        isAdapter: selectAdaptor,
       };
       const isEmptyField = Object.values(bodyData).some((value) => !value);
       if (!isEmptyField) {
         const response = await postRequest('add-temp-reservation', bodyData);
-        console.log('api response: ', response);
+        console.log('TimePeriodButton.jsx 30 ', response);
       }
     } catch (error) {
       console.error('api error: ', error);
diff --git a/src/components/UserForm.jsx b/src/components/UserForm.jsx
index 6ab532a..e594786 100644
--- a/src/components/UserForm.jsx
+++ b/src/components/UserForm.jsx
@@ -13,7 +13,7 @@ import PopUpWarningModal from '../components/PopUpWarningModal';
 import hsyLogo from '../assets/hsy_logo_dark.png';
 import { useStepper } from '../hooks/useStepper';
 import { useTranslation } from 'react-i18next';
-
+import { useApi } from '../hooks/useApi';
 const UserForm = ({ onSubmit, onPrevStep }) => {
   const [validated, setValidated] = useState(false);
   const [showInfoModal, setShowInfoModal] = useState(false);
@@ -31,8 +31,10 @@ const UserForm = ({ onSubmit, onPrevStep }) => {
     setUserData,
     acceptTerms,
     setAcceptTerms,
+    randomUUID,
   } = useStepper();
 
+  const { postRequest } = useApi();
   const { t } = useTranslation();
 
   const navigate = useNavigate();
@@ -175,7 +177,7 @@ const UserForm = ({ onSubmit, onPrevStep }) => {
     navigate('/', { replace: true });
   };
 
-  const handleConfirmRentInfo = () => {
+  const handleConfirmRentInfo = async () => {
     onSubmit({
       firstName: submitEvent.elements.firstName.value,
       lastName: submitEvent.elements.lastName.value,
@@ -185,6 +187,27 @@ const UserForm = ({ onSubmit, onPrevStep }) => {
       postalCode: submitEvent.elements.postalCode.value,
       cityName: submitEvent.elements.cityName.value,
     });
+
+    try {
+      const bodyData = {
+        customerInfo: {
+          name: submitEvent.elements.firstName.value,
+          lastName: submitEvent.elements.lastName.value,
+          phoneNumber: submitEvent.elements.phoneNumber.value,
+          email: submitEvent.elements.emailAddress.value,
+          addres: submitEvent.elements.streetName.value,
+          zipCode: submitEvent.elements.postalCode.value,
+          city: submitEvent.elements.cityName.value,
+        },
+        idPrepaid: false,
+        uuid: randomUUID,
+      };
+
+      const responce = await postRequest('add-reservation', bodyData);
+      console.log('UserForm.jsx 209', responce);
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   const handleOpenTosModal = () => {
@@ -357,6 +380,7 @@ UserForm.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   handleInfoModal: PropTypes.func,
   onPrevStep: PropTypes.func.isRequired,
+  randomUUID: PropTypes.string.isRequired,
 };
 
 export default UserForm;
diff --git a/src/hooks/useApi.js b/src/hooks/useApi.js
index 9a73079..1b4a184 100644
--- a/src/hooks/useApi.js
+++ b/src/hooks/useApi.js
@@ -1,4 +1,4 @@
-import { postRequest } from '../services/ApiServices';
+import { postRequest, deleteRequest } from '../services/ApiServices';
 import { useNavigate } from 'react-router-dom';
 
 export const useApi = () => {
@@ -21,8 +21,17 @@ export const useApi = () => {
       handleApiError(error);
     }
   };
+  const deleteApiRequest = async (endpoint, uuid) => {
+    try {
+      const response = await deleteRequest(endpoint, uuid);
+      handleApiSuccess(response);
+    } catch (error) {
+      handleApiError(error);
+    }
+  };
 
   return {
     postRequest: postApiRequest,
+    deleteRequest: deleteApiRequest,
   };
 };
diff --git a/src/pages/RentProcess.jsx b/src/pages/RentProcess.jsx
index 354a2ec..72362a9 100644
--- a/src/pages/RentProcess.jsx
+++ b/src/pages/RentProcess.jsx
@@ -25,14 +25,17 @@ import styles from '../css/BankButton.module.css';
 import BankType from '../components/BankType';
 import PopUpWarningModal from '../components/PopUpWarningModal';
 import { useTranslation } from 'react-i18next';
-
+import { v4 as uuidv4 } from 'uuid';
 const RentProcessPage = () => {
   const countdownDuration = 20 * 60 * 1000;
 
   const [activeStep, setActiveStep] = useState(0);
   const [isMobile, setIsMobile] = useState(window.innerWidth < 820);
   const [showWarningModal, setShowWarningModal] = useState(false);
-
+  const [randomUUID, setRandomUUID] = useState('');
+  useEffect(() => {
+    setRandomUUID(uuidv4());
+  }, []);
   const [reservationDeadline, setReservationDeadline] = useState(
     calculateReservationDeadline(),
   );
@@ -176,6 +179,7 @@ const RentProcessPage = () => {
             handleWarningModal={handleWarningModal}
             onProductAndTimeSelected={handleProductAndTimeSelected}
             onPrevStep={handlePrevStep}
+            randomUUID={randomUUID}
           />
         );
       case 2:
@@ -184,6 +188,7 @@ const RentProcessPage = () => {
             handleWarningModal={handleWarningModal}
             onSubmit={handleFormSubmit}
             onPrevStep={handlePrevStep}
+            randomUUID={randomUUID}
           />
         );
       case 3:
diff --git a/src/services/ApiServices.js b/src/services/ApiServices.js
index b36270a..927c865 100644
--- a/src/services/ApiServices.js
+++ b/src/services/ApiServices.js
@@ -15,3 +15,17 @@ export const postRequest = async (endpoint, data) => {
 
   return response.json();
 };
+export const deleteRequest = async (endpoint, uuid) => {
+  const response = await fetch(`${API_BASE_URL}${endpoint}${uuid}`, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! Status: ${response.status}`);
+  }
+
+  return response.json();
+};

From a952c922f5ff276dbf2a1781f24cc6ec111b71d6 Mon Sep 17 00:00:00 2001
From: Lor3wp <61760289+Lor3wp@users.noreply.github.com>
Date: Wed, 6 Dec 2023 20:53:01 +0200
Subject: [PATCH 3/8] resolve

---
 package-lock.json                   |  3 ---
 package.json                        |  3 ---
 src/components/TimeForm.jsx         |  2 +-
 src/components/TimePeriodButton.jsx |  2 +-
 src/components/UserForm.jsx         |  2 +-
 src/hooks/useApi.js                 | 13 ++++++-------
 src/pages/RentProcess.jsx           |  4 ++++
 7 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6b7bbfe..af956f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,11 +11,8 @@
         "axios": "^1.6.2",
         "bootstrap": "^5.3.2",
         "bootstrap-icons": "^1.11.1",
-<<<<<<< HEAD
         "dotenv": "^16.3.1",
-=======
         "geolib": "^3.3.4",
->>>>>>> origin/dev
         "i18next": "^23.7.6",
         "i18next-browser-languagedetector": "^7.2.0",
         "i18next-http-backend": "^2.4.2",
diff --git a/package.json b/package.json
index b493089..6b3705a 100644
--- a/package.json
+++ b/package.json
@@ -17,11 +17,8 @@
     "axios": "^1.6.2",
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.11.1",
-<<<<<<< HEAD
     "dotenv": "^16.3.1",
-=======
     "geolib": "^3.3.4",
->>>>>>> origin/dev
     "i18next": "^23.7.6",
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-http-backend": "^2.4.2",
diff --git a/src/components/TimeForm.jsx b/src/components/TimeForm.jsx
index 6fe39ad..f3611aa 100644
--- a/src/components/TimeForm.jsx
+++ b/src/components/TimeForm.jsx
@@ -12,7 +12,7 @@ import { ChevronCompactLeft } from 'react-bootstrap-icons';
 import { ChevronCompactRight } from 'react-bootstrap-icons';
 import { useStepper } from '../hooks/useStepper';
 import { useTranslation } from 'react-i18next';
-import { useApi } from '../hooks/useApi';
+import useApi from '../hooks/useApi';
 // create random uuid for user identification in temporary reservation
 // fill with Date values to disable those dates from caledar
 const futureDates = [];
diff --git a/src/components/TimePeriodButton.jsx b/src/components/TimePeriodButton.jsx
index fee4768..adc3769 100644
--- a/src/components/TimePeriodButton.jsx
+++ b/src/components/TimePeriodButton.jsx
@@ -1,7 +1,7 @@
 import Button from 'react-bootstrap/Button';
 import PropTypes from 'prop-types';
 import style from '../css/TimeButton.module.css';
-import { useApi } from '../hooks/useApi';
+import useApi from '../hooks/useApi';
 import { useStepper } from '../hooks/useStepper';
 
 function TimePeriodButton({
diff --git a/src/components/UserForm.jsx b/src/components/UserForm.jsx
index 3c3e400..57e41f4 100644
--- a/src/components/UserForm.jsx
+++ b/src/components/UserForm.jsx
@@ -13,7 +13,7 @@ import PopUpWarningModal from '../components/PopUpWarningModal';
 import hsyLogo from '../assets/hsy_logo_dark.png';
 import { useStepper } from '../hooks/useStepper';
 import { useTranslation } from 'react-i18next';
-import { useApi } from '../hooks/useApi';
+import useApi from '../hooks/useApi';
 const UserForm = ({ onSubmit, onPrevStep }) => {
   const [validated, setValidated] = useState(false);
   const [showInfoModal, setShowInfoModal] = useState(false);
diff --git a/src/hooks/useApi.js b/src/hooks/useApi.js
index 7a3cb30..9dc52e1 100644
--- a/src/hooks/useApi.js
+++ b/src/hooks/useApi.js
@@ -4,8 +4,6 @@ import { errorHandling } from '../utils/errorHandling';
 import { postRequest, deleteRequest } from '../services/ApiServices';
 import { useNavigate } from 'react-router-dom';
 const useApi = () => {
-// TODO use ApiService.js 
-  /** 
   const [error, setError] = useState(null);
 
   const getRentById = async (rentId) => {
@@ -32,7 +30,6 @@ const useApi = () => {
     return await errorHandling(deleteRent, (err) => setError(err));
   };
 
-
   const navigate = useNavigate();
 
   const handleApiError = (error) => {
@@ -43,7 +40,6 @@ const useApi = () => {
   const handleApiSuccess = (response) => {
     console.log('API Response:', response);
   };
-  */
 
   const postApiRequest = async (endpoint, data) => {
     try {
@@ -65,8 +61,11 @@ const useApi = () => {
   return {
     postRequest: postApiRequest,
     deleteRequest: deleteApiRequest,
+    getRentById,
+    updateRent,
+    deleteRent,
+    error,
   };
-
-  // return {    getRentById, updateRent, deleteRent}
-
 };
+
+export default useApi;
\ No newline at end of file
diff --git a/src/pages/RentProcess.jsx b/src/pages/RentProcess.jsx
index ba9661c..6dfd83f 100644
--- a/src/pages/RentProcess.jsx
+++ b/src/pages/RentProcess.jsx
@@ -40,6 +40,10 @@ const RentProcessPage = () => {
     calculateReservationDeadline(),
   );
 
+   const mockRentData = {
+     id: '656e0884162df1917d30e826',
+   };
+
   const { t } = useTranslation();
 
   function calculateReservationDeadline() {

From 1e4c65eff9f86de2940f95a490c2cf0d1055c336 Mon Sep 17 00:00:00 2001
From: Lor3wp <61760289+Lor3wp@users.noreply.github.com>
Date: Wed, 6 Dec 2023 21:00:46 +0200
Subject: [PATCH 4/8] resolved and working

---
 src/components/TimePeriodButton.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TimePeriodButton.jsx b/src/components/TimePeriodButton.jsx
index adc3769..c4c37c8 100644
--- a/src/components/TimePeriodButton.jsx
+++ b/src/components/TimePeriodButton.jsx
@@ -26,7 +26,7 @@ function TimePeriodButton({
         isAdapter: selectAdaptor,
       };
       const isEmptyField = Object.values(bodyData).some((value) => !value);
-      if (!isEmptyField) {
+      if (isEmptyField) {
         const response = await postRequest('add-temp-reservation', bodyData);
         console.log('TimePeriodButton.jsx 30 ', response);
       }

From 333bcabea5c40e6590f9061b9b36c11e94465176 Mon Sep 17 00:00:00 2001
From: Lor3wp <61760289+Lor3wp@users.noreply.github.com>
Date: Wed, 6 Dec 2023 23:23:36 +0200
Subject: [PATCH 5/8] changes

---
 src/components/BankButton.jsx | 29 ++++++++++++++++++++++++++---
 src/components/BankType.jsx   | 11 ++++++++++-
 src/components/UserForm.jsx   | 25 -------------------------
 src/pages/RentProcess.jsx     | 13 ++++++++-----
 4 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/src/components/BankButton.jsx b/src/components/BankButton.jsx
index a112a9b..2b1d74c 100644
--- a/src/components/BankButton.jsx
+++ b/src/components/BankButton.jsx
@@ -4,17 +4,39 @@ import { useState } from 'react';
 import PopUpWarningModal from '../components/PopUpWarningModal';
 import { useNavigate } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
-
-const BankButton = ({ logo, bankName, rentId }) => {
+import useApi from '../hooks/useApi';
+// import { useStepper } from '../hooks/useStepper';
+const BankButton = ({ logo, bankName, rentId, randomUUID }) => {
   const [showWarningModal, setShowWarningModal] = useState(false);
   const navigate = useNavigate();
 
   const { t } = useTranslation();
+  // const { userData } = useStepper();
+  // const { postRequest } = useApi();
 
-  const handleClick = (bankName) => {
+  const handleClick = async (bankName) => {
     if (bankName === 'HSY') {
       handleOpenWarningModal();
     } else {
+      // try {
+      //   const bodyData = {
+      //     customerInfo: {
+      //       name: userData.firstName,
+      //       lastName: userData.lastName,
+      //       phoneNumber: userData.phoneNumber,
+      //       email: userData.emailAddress,
+      //       address: userData.streetName,
+      //       zipCode: userData.postalCode,
+      //       city: userData.cityName,
+      //     },
+      //     uuid: randomUUID,
+      //   };
+
+      //   const responce = await postRequest('add-reservation', bodyData);
+      //   console.log('BankButton.jsx 36', responce);
+      // } catch (error) {
+      //   console.log(error);
+      // }
       navigate(`/rent-successful/${rentId}`);
     }
   };
@@ -69,6 +91,7 @@ BankButton.propTypes = {
   logo: PropTypes.any.isRequired,
   bankName: PropTypes.string,
   rentId: PropTypes.string.isRequired,
+  randomUUID: PropTypes.string.isRequired,
 };
 
 export default BankButton;
diff --git a/src/components/BankType.jsx b/src/components/BankType.jsx
index 68b56bd..32d082d 100644
--- a/src/components/BankType.jsx
+++ b/src/components/BankType.jsx
@@ -2,7 +2,14 @@ import PropTypes from 'prop-types';
 import BankButton from './BankButton';
 import styles from '../css/BankButton.module.css';
 
-const BankType = ({ gridName, title, arrayName, paymentName, rentId }) => {
+const BankType = ({
+  gridName,
+  title,
+  arrayName,
+  paymentName,
+  rentId,
+  randomUUID,
+}) => {
   return (
     <div className={styles.titleButtonContainer}>
       <h3>{title}</h3>
@@ -14,6 +21,7 @@ const BankType = ({ gridName, title, arrayName, paymentName, rentId }) => {
               bankName={item.bankName}
               key={item.bankName}
               rentId={rentId}
+              randomUUID={randomUUID}
             ></BankButton>
           </div>
         ))}
@@ -28,5 +36,6 @@ BankType.propTypes = {
   arrayName: PropTypes.array,
   paymentName: PropTypes.string,
   rentId: PropTypes.string.isRequired,
+  randomUUID: PropTypes.string.isRequired,
 };
 export default BankType;
diff --git a/src/components/UserForm.jsx b/src/components/UserForm.jsx
index 57e41f4..d628796 100644
--- a/src/components/UserForm.jsx
+++ b/src/components/UserForm.jsx
@@ -13,7 +13,6 @@ import PopUpWarningModal from '../components/PopUpWarningModal';
 import hsyLogo from '../assets/hsy_logo_dark.png';
 import { useStepper } from '../hooks/useStepper';
 import { useTranslation } from 'react-i18next';
-import useApi from '../hooks/useApi';
 const UserForm = ({ onSubmit, onPrevStep }) => {
   const [validated, setValidated] = useState(false);
   const [showInfoModal, setShowInfoModal] = useState(false);
@@ -31,10 +30,8 @@ const UserForm = ({ onSubmit, onPrevStep }) => {
     setUserData,
     acceptTerms,
     setAcceptTerms,
-    randomUUID,
   } = useStepper();
 
-  const { postRequest } = useApi();
   const { t } = useTranslation();
 
   const navigate = useNavigate();
@@ -187,27 +184,6 @@ const UserForm = ({ onSubmit, onPrevStep }) => {
       postalCode: submitEvent.elements.postalCode.value,
       cityName: submitEvent.elements.cityName.value,
     });
-
-    try {
-      const bodyData = {
-        customerInfo: {
-          name: submitEvent.elements.firstName.value,
-          lastName: submitEvent.elements.lastName.value,
-          phoneNumber: submitEvent.elements.phoneNumber.value,
-          email: submitEvent.elements.emailAddress.value,
-          addres: submitEvent.elements.streetName.value,
-          zipCode: submitEvent.elements.postalCode.value,
-          city: submitEvent.elements.cityName.value,
-        },
-        idPrepaid: false,
-        uuid: randomUUID,
-      };
-
-      const responce = await postRequest('add-reservation', bodyData);
-      console.log('UserForm.jsx 209', responce);
-    } catch (error) {
-      console.log(error);
-    }
   };
 
   const handleOpenTosModal = () => {
@@ -380,7 +356,6 @@ UserForm.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   handleInfoModal: PropTypes.func,
   onPrevStep: PropTypes.func.isRequired,
-  randomUUID: PropTypes.string.isRequired,
 };
 
 export default UserForm;
diff --git a/src/pages/RentProcess.jsx b/src/pages/RentProcess.jsx
index 6dfd83f..909f30f 100644
--- a/src/pages/RentProcess.jsx
+++ b/src/pages/RentProcess.jsx
@@ -26,7 +26,7 @@ import BankType from '../components/BankType';
 import PopUpWarningModal from '../components/PopUpWarningModal';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuidv4 } from 'uuid';
-const RentProcessPage = () => {
+const RentProcessPage = async () => {
   const countdownDuration = 20 * 60 * 1000;
 
   const [activeStep, setActiveStep] = useState(0);
@@ -40,9 +40,9 @@ const RentProcessPage = () => {
     calculateReservationDeadline(),
   );
 
-   const mockRentData = {
-     id: '656e0884162df1917d30e826',
-   };
+  const mockRentData = {
+    id: '656e0884162df1917d30e826',
+  };
 
   const { t } = useTranslation();
 
@@ -145,6 +145,7 @@ const RentProcessPage = () => {
           title={t('Mobiilimaksutavat')}
           arrayName={mobileBanks}
           paymentName={styles.mobilePayment}
+          randomUUID={randomUUID}
         />
         <BankType
           rentId={mockRentData.id}
@@ -152,6 +153,7 @@ const RentProcessPage = () => {
           title={t('Korttimaksutavat')}
           arrayName={cardPayments}
           paymentName={styles.cardPayment}
+          randomUUID={randomUUID}
         />
         <BankType
           rentId={mockRentData.id}
@@ -159,6 +161,7 @@ const RentProcessPage = () => {
           title={t('Pankkimaksutavat')}
           arrayName={bankPayments}
           paymentName={styles.bankPayment}
+          randomUUID={randomUUID}
         />
         <BankType
           rentId={mockRentData.id}
@@ -166,6 +169,7 @@ const RentProcessPage = () => {
           title={t('Maksu paikan päällä')}
           arrayName={irlPayments}
           paymentName={styles.irlPayment}
+          randomUUID={randomUUID}
         />
       </div>
     );
@@ -196,7 +200,6 @@ const RentProcessPage = () => {
             handleWarningModal={handleWarningModal}
             onSubmit={handleFormSubmit}
             onPrevStep={handlePrevStep}
-            randomUUID={randomUUID}
           />
         );
       case 3:

From 94173bda1ba91e82618653e158f94c3c63f118c6 Mon Sep 17 00:00:00 2001
From: Lor3wp <61760289+Lor3wp@users.noreply.github.com>
Date: Wed, 6 Dec 2023 23:27:35 +0200
Subject: [PATCH 6/8] working

---
 src/components/BankButton.jsx | 42 +++++++++++++++++------------------
 src/components/UserForm.jsx   |  2 +-
 src/pages/RentProcess.jsx     |  2 +-
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/components/BankButton.jsx b/src/components/BankButton.jsx
index 2b1d74c..2b233f7 100644
--- a/src/components/BankButton.jsx
+++ b/src/components/BankButton.jsx
@@ -5,38 +5,38 @@ import PopUpWarningModal from '../components/PopUpWarningModal';
 import { useNavigate } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 import useApi from '../hooks/useApi';
-// import { useStepper } from '../hooks/useStepper';
+import { useStepper } from '../hooks/useStepper';
 const BankButton = ({ logo, bankName, rentId, randomUUID }) => {
   const [showWarningModal, setShowWarningModal] = useState(false);
   const navigate = useNavigate();
 
   const { t } = useTranslation();
-  // const { userData } = useStepper();
-  // const { postRequest } = useApi();
+  const { userData } = useStepper();
+  const { postRequest } = useApi();
 
   const handleClick = async (bankName) => {
     if (bankName === 'HSY') {
       handleOpenWarningModal();
     } else {
-      // try {
-      //   const bodyData = {
-      //     customerInfo: {
-      //       name: userData.firstName,
-      //       lastName: userData.lastName,
-      //       phoneNumber: userData.phoneNumber,
-      //       email: userData.emailAddress,
-      //       address: userData.streetName,
-      //       zipCode: userData.postalCode,
-      //       city: userData.cityName,
-      //     },
-      //     uuid: randomUUID,
-      //   };
+      try {
+        const bodyData = {
+          customerInfo: {
+            name: userData.firstName,
+            lastName: userData.lastName,
+            phoneNumber: userData.phoneNumber,
+            email: userData.emailAddress,
+            address: userData.streetName,
+            zipCode: userData.postalCode,
+            city: userData.cityName,
+          },
+          uuid: randomUUID,
+        };
 
-      //   const responce = await postRequest('add-reservation', bodyData);
-      //   console.log('BankButton.jsx 36', responce);
-      // } catch (error) {
-      //   console.log(error);
-      // }
+        const responce = await postRequest('add-reservation', bodyData);
+        console.log('BankButton.jsx 36', responce);
+      } catch (error) {
+        console.log(error);
+      }
       navigate(`/rent-successful/${rentId}`);
     }
   };
diff --git a/src/components/UserForm.jsx b/src/components/UserForm.jsx
index d628796..170185d 100644
--- a/src/components/UserForm.jsx
+++ b/src/components/UserForm.jsx
@@ -174,7 +174,7 @@ const UserForm = ({ onSubmit, onPrevStep }) => {
     navigate('/', { replace: true });
   };
 
-  const handleConfirmRentInfo = async () => {
+  const handleConfirmRentInfo = () => {
     onSubmit({
       firstName: submitEvent.elements.firstName.value,
       lastName: submitEvent.elements.lastName.value,
diff --git a/src/pages/RentProcess.jsx b/src/pages/RentProcess.jsx
index 909f30f..8cd0a9f 100644
--- a/src/pages/RentProcess.jsx
+++ b/src/pages/RentProcess.jsx
@@ -26,7 +26,7 @@ import BankType from '../components/BankType';
 import PopUpWarningModal from '../components/PopUpWarningModal';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuidv4 } from 'uuid';
-const RentProcessPage = async () => {
+const RentProcessPage = () => {
   const countdownDuration = 20 * 60 * 1000;
 
   const [activeStep, setActiveStep] = useState(0);

From 534e592861115d1a2671b68fba30201085797d7c Mon Sep 17 00:00:00 2001
From: Lor3wp <61760289+Lor3wp@users.noreply.github.com>
Date: Wed, 6 Dec 2023 23:37:59 +0200
Subject: [PATCH 7/8] id passed

---
 src/components/BankButton.jsx | 5 +++--
 src/hooks/useApi.js           | 2 ++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/BankButton.jsx b/src/components/BankButton.jsx
index 2b233f7..05b1de8 100644
--- a/src/components/BankButton.jsx
+++ b/src/components/BankButton.jsx
@@ -8,6 +8,7 @@ import useApi from '../hooks/useApi';
 import { useStepper } from '../hooks/useStepper';
 const BankButton = ({ logo, bankName, rentId, randomUUID }) => {
   const [showWarningModal, setShowWarningModal] = useState(false);
+
   const navigate = useNavigate();
 
   const { t } = useTranslation();
@@ -33,11 +34,11 @@ const BankButton = ({ logo, bankName, rentId, randomUUID }) => {
         };
 
         const responce = await postRequest('add-reservation', bodyData);
-        console.log('BankButton.jsx 36', responce);
+        console.log('BankButton.jsx 36', responce.updatedReservation._id);
+        navigate(`/rent-successful/${responce.updatedReservation._id}`);
       } catch (error) {
         console.log(error);
       }
-      navigate(`/rent-successful/${rentId}`);
     }
   };
 
diff --git a/src/hooks/useApi.js b/src/hooks/useApi.js
index 9dc52e1..585d124 100644
--- a/src/hooks/useApi.js
+++ b/src/hooks/useApi.js
@@ -45,6 +45,7 @@ const useApi = () => {
     try {
       const response = await postRequest(endpoint, data);
       handleApiSuccess(response);
+      return response;
     } catch (error) {
       handleApiError(error);
     }
@@ -53,6 +54,7 @@ const useApi = () => {
     try {
       const response = await deleteRequest(endpoint, uuid);
       handleApiSuccess(response);
+      return response;
     } catch (error) {
       handleApiError(error);
     }

From 839c089516fbba165a72ef110443d07b0582b66b Mon Sep 17 00:00:00 2001
From: Lor3wp <61760289+Lor3wp@users.noreply.github.com>
Date: Wed, 6 Dec 2023 23:44:09 +0200
Subject: [PATCH 8/8] get rent info

---
 src/components/BankButton.jsx | 3 +--
 src/utils/axios.js            | 6 +-----
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/BankButton.jsx b/src/components/BankButton.jsx
index 05b1de8..62bfdd0 100644
--- a/src/components/BankButton.jsx
+++ b/src/components/BankButton.jsx
@@ -6,7 +6,7 @@ import { useNavigate } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 import useApi from '../hooks/useApi';
 import { useStepper } from '../hooks/useStepper';
-const BankButton = ({ logo, bankName, rentId, randomUUID }) => {
+const BankButton = ({ logo, bankName, randomUUID }) => {
   const [showWarningModal, setShowWarningModal] = useState(false);
 
   const navigate = useNavigate();
@@ -91,7 +91,6 @@ const BankButton = ({ logo, bankName, rentId, randomUUID }) => {
 BankButton.propTypes = {
   logo: PropTypes.any.isRequired,
   bankName: PropTypes.string,
-  rentId: PropTypes.string.isRequired,
   randomUUID: PropTypes.string.isRequired,
 };
 
diff --git a/src/utils/axios.js b/src/utils/axios.js
index eb25be9..d4dd889 100644
--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@@ -1,10 +1,6 @@
 import axios from 'axios';
-import { NODE_ENV, PUBLIC_DOMAIN, PUBLIC_PORT } from './constants';
 
-const baseURL =
-  NODE_ENV === 'production'
-    ? 'https://hsytrailerapi.azurewebsites.net/api/'
-    : `http://${PUBLIC_DOMAIN ?? 'localhost'}:${PUBLIC_PORT ?? '3000'}/api/`;
+const baseURL = 'https://hsytrailerapi.azurewebsites.net/api/';
 
 const axiosInstance = axios.create({
   baseURL: baseURL,