Merge pull request #59 from Lor3wp/dev

Dev

src/components/CircularCountdownTimer.jsx

@@ -20,46 +20,48 @@ const formatRemainingTime = (remainingTime) => {
 
 export const CircularCountdownTimer = ({
   isPlaying = false,
-  rentStartTime,
+  timerInfoText,
   duration = DEFAULT_TIME_DURATION,
   timerText = 'Jäljellä',
 }) => {
+  const renderTime = ({ remainingTime }) => {
+    if (remainingTime === 0) {
+      return <div className={styles.timerInfoText}>Varaus aika päättyi!</div>;
+    }
+
+    return (
+      <Container>
+        {isPlaying ? (
+          <>
+            <div className={styles.timer}>
+              {formatRemainingTime(remainingTime)}
+            </div>
+            <div className={styles.timerText}>{timerText}</div>
+          </>
+        ) : (
+          <div className={styles.rentStartText}>{timerInfoText}</div>
+        )}
+      </Container>
+    );
+  };
+
   return (
     <CountdownCircleTimer
       isPlaying={isPlaying}
       duration={duration}
       colors="#008782"
       size={250}
       strokeWidth={19}
-      onComplete={() => {
-        return { shouldRepeat: false };
-      }}
+      onComplete={() => ({ shouldRepeat: false })}
     >
-      {({ remainingTime }) => {
-        return (
-          <Container>
-            {isPlaying ? (
-              <>
-                <div className={styles.timer}>
-                  {formatRemainingTime(remainingTime)}
-                </div>
-                <div className={styles.timerText}>{timerText}</div>
-              </>
-            ) : (
-              <div className={styles.rentStartText}>
-                Alkaa {rentStartTime} päästä
-              </div>
-            )}
-          </Container>
-        );
-      }}
+      {renderTime}
     </CountdownCircleTimer>
   );
 };
 
 CircularCountdownTimer.propTypes = {
   isPlaying: PropTypes.bool,
-  rentStartTime: PropTypes.instanceOf(Date),
+  timerInfoText: PropTypes.string,
   duration: PropTypes.number,
   timerText: PropTypes.string,
 };

src/components/UserForm.jsx

@@ -191,11 +191,11 @@ const UserForm = ({ onSubmit, confirmedRent, setConfirmRent, onPrevStep }) => {
     <>
       <PopUpInfoModal
         show={modalShow}
+        onHide={() => setModalShow(false)}
         title={isTos ? 'Yleiset sopimusehdot' : 'Vuokrasopimus'}
         body={modalBodyContent}
         size="xl"
         buttonTxt="Sulje"
-        onHide={() => setModalShow(false)}
       />
 
       <PopUpWarningModal
@@ -208,7 +208,7 @@ const UserForm = ({ onSubmit, confirmedRent, setConfirmRent, onPrevStep }) => {
         acceptButtonVariant="danger"
         onPrimaryButtonClick={frontPage}
       />
-      {/* TODO: Maybe this should show after filling user info */}
+      {/* TODO: Change this to a bootstrap modal and show it after the user filled their info */}
       {confirmedRent && (
         <>
           <RentalConfirmation

src/css/CircularCountdownTimer.module.css

@@ -12,6 +12,11 @@
   font-size: 20px;
 }
 
+.timerInfoText {
+  font-size: 23px;
+  color: #008782;
+}
+
 /* Mobile rules */
 
 @media screen and (max-width: 700px) {

src/pages/RentInfo.jsx

@@ -8,29 +8,82 @@ import GoogleMap from '../components/GoogleMaps';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import styles from '../css/RentInfoCard.module.css';
+import PropTypes from 'prop-types';
+import { PopUpInfoModal } from '../components/PopUpInfoModal';
 
-// TODO: Change the info inside the circle when the time is up
+// TODO: Timer circle restarting from the beginning if page refreshed
 const RentInfoPage = ({ handleItemReturned }) => {
   const rentInfo = {
-    rentDate: '17.09.2023',
-    rentStartTime: '13:00',
-    rentEndTime: '14:00',
+    rentDate: '2023-09-17',
+    //rentStartTime: new Date(),
+    rentStartTime: '2023-11-19T23:26:00',
+    rentEndTime: '2023-11-19T23:28:00',
     itemType: 'Peräkärry',
     stationLocation: 'Kivikon Sortti-asema',
   };
 
-  const [timeStarted, setTimeStarted] = useState(true);
+  const [timeStarted, setTimeStarted] = useState(false);
+  const [canCancelRent, setCanCancelRent] = useState(true);
   const [showModal, setShowModal] = useState(false);
+  const [showInfoModal, setShowInfoModal] = useState(false);
+  const [timerInfoText, setTimerInfoText] = useState('');
 
   const navigate = useNavigate();
 
-  // TODO: Write a logic to calculate time until rent starts using the date/time from api extracted from current date/time.
-  const timeUntilRentStart = () => {
-    return '3h';
-  };
+  const currentTime = new Date();
+  const rentEndTime = new Date(rentInfo.rentEndTime);
+
+  const differenceInMillisecondsUntilRentEnd = rentEndTime - currentTime;
+
+  // Rent start and end time in hours and minutes
+  const startTimeHours = new Date(rentInfo.rentStartTime).getHours();
+  const startTimeMins = new Date(rentInfo.rentStartTime).getMinutes();
+  const endTimeHours = new Date(rentInfo.rentEndTime).getHours();
+  const endTimeMins = new Date(rentInfo.rentEndTime).getMinutes();
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const currentTime = new Date();
+      const rentStartTime = new Date(rentInfo.rentStartTime);
+
+      const differenceInMillisecondsUntilRentStart =
+        rentStartTime - currentTime;
+      const remainingHoursUntilRentStart =
+        differenceInMillisecondsUntilRentStart / (1000 * 60 * 60);
+      const differenceInDaysUntilRentStart =
+        differenceInMillisecondsUntilRentStart / (1000 * 60 * 60 * 24);
 
-  // Event handlers for opening and closing the modal
-  const handleOpenModal = () => setShowModal(true);
+      const hoursUntil = Math.round(remainingHoursUntilRentStart).toString();
+      const dayUntil = Math.round(differenceInDaysUntilRentStart).toString();
+
+      let timerInfoText;
+      if (differenceInDaysUntilRentStart >= 1) {
+        timerInfoText = `Alkaa ${dayUntil} päivän päästä!`;
+      } else {
+        timerInfoText =
+          hoursUntil == 0
+            ? 'Varauksesi alkaa pian!'
+            : `Alkaa ${hoursUntil} tunnin päästä!`;
+      }
+
+      setCanCancelRent(!(remainingHoursUntilRentStart <= 24));
+      setTimeStarted(currentTime.getTime() >= rentStartTime.getTime());
+      setTimerInfoText(timerInfoText);
+    }, 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  // Handles opening and closing modals
+  const handleOpenModal = () => {
+    if (!timeStarted && !canCancelRent) {
+      setShowInfoModal(true);
+    } else {
+      setShowModal(true);
+    }
+  };
 
   // Use the "useEffect" hook to apply and remove body version class
   useEffect(() => {
@@ -47,8 +100,8 @@ const RentInfoPage = ({ handleItemReturned }) => {
   };
 
   const frontPage = () => {
-    navigate('/', { replace: true });
     toast.success('Varaus peruutettu!');
+    navigate('/', { replace: true });
   };
 
   // Warning popup modal
@@ -62,6 +115,14 @@ const RentInfoPage = ({ handleItemReturned }) => {
     <p>Oletko varma, että haluat peruuttaa varauksen?</p>
   );
 
+  // TODO: Change the text to be more informative
+  const infoModalBodyContent = (
+    <p>
+      Varauksen peruutus ei onnistu, jos vuokran alkamiseen on 24 tuntia tai
+      vähemmän.
+    </p>
+  );
+
   return (
     <>
       <PopUpWarningModal
@@ -70,10 +131,17 @@ const RentInfoPage = ({ handleItemReturned }) => {
         title={timeStarted ? 'Ennen palautusta' : 'Peruuta varaus'}
         body={modalBodyContent}
         backButton="Takaisin"
-        acceptButton={timeStarted ? 'Ymmärän' : 'Kyllä'}
+        acceptButton={timeStarted ? 'Ymmärrän' : 'Kyllä, poista varaus'}
         acceptButtonVariant={timeStarted ? 'success' : 'danger'}
         onPrimaryButtonClick={timeStarted ? rateItemPage : frontPage}
       />
+      <PopUpInfoModal
+        show={showInfoModal}
+        onHide={() => setShowInfoModal(false)}
+        title="Varauksen peruutus"
+        body={infoModalBodyContent}
+        buttonTxt="Sulje"
+      />
       <Container className={styles.rentInfoContainer}>
         <h1 className={styles.headerInfo}>Varauksesi</h1>
         <Stack gap={5}>
@@ -85,14 +153,15 @@ const RentInfoPage = ({ handleItemReturned }) => {
             <div>
               <CircularCountdownTimer
                 isPlaying={timeStarted}
-                rentStartTime={timeUntilRentStart()}
+                timerInfoText={timerInfoText}
+                duration={differenceInMillisecondsUntilRentEnd / 1000}
               />
             </div>
             <div>
               <RentInfoCard
                 rentDate={rentInfo.rentDate}
-                rentStartTime={rentInfo.rentStartTime}
-                rentEndTime={rentInfo.rentEndTime}
+                rentStartTime={`${startTimeHours}:${startTimeMins}`}
+                rentEndTime={`${endTimeHours}:${endTimeMins}`}
                 itemType={rentInfo.itemType}
                 stationLocation={rentInfo.stationLocation}
               />
@@ -112,7 +181,7 @@ const RentInfoPage = ({ handleItemReturned }) => {
               className={styles.btn}
               onClick={handleOpenModal}
             >
-              Peruuta varaus
+              Peru peräkärryn varaus
             </Button>
           )}
         </Stack>
@@ -122,4 +191,8 @@ const RentInfoPage = ({ handleItemReturned }) => {
   );
 };
 
+RentInfoPage.propTypes = {
+  handleItemReturned: PropTypes.func,
+};
+
 export default RentInfoPage;

src/pages/RentProcess.jsx

@@ -1,4 +1,3 @@
-// RentProcessPage.jsx
 import { useEffect, useState } from 'react';
 import { CustomStepper } from '../components/CustomStepper';
 import ProductAndTime from '../components/TimeForm';
@@ -110,6 +109,18 @@ const RentProcessPage = () => {
   ];
   const irlPayments = [{ logo: HSY, bankName: 'HSY' }];
 
+  useEffect(() => {
+    window.addEventListener('beforeunload', alertUser);
+    return () => {
+      window.removeEventListener('beforeunload', alertUser);
+    };
+  }, []);
+
+  const alertUser = (e) => {
+    e.preventDefault();
+    e.returnValue = '';
+  };
+
   const renderPaymentComponents = () => {
     return (
       <div className={styles.bankContainer}>