Merge pull request #67 from Lor3wp/dev

Dev

public/locales/en/translation.json

@@ -41,7 +41,7 @@
   "Vuokraamaan": "To rent",
 
   "Peräkärryn vuokraus": "Trailer rental",
-  "Varauksen tiedot": "rent details",
+  "Varauksen tiedot": "Rent details",
   "Palaute": "Feedback",
 
   "Valitse asemat": "Select stations",
@@ -51,6 +51,8 @@
 
   "Peruuta varaus": "Cancel your rent",
   "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.",
   "Takaisin": "Back",
   "Kyllä": "Yes",
   "Peruuta": "Cancel",
@@ -59,10 +61,13 @@
   "Täytä henkilötiedot": "Fill your info",
   "Siirry maksamaan": "Go to payment",
   "Valitse vähintään yksi asema ennen kuin jatkat.": "Select at least one station before proceeding.",
-  "Valitse tuote, ajankohta ja asema ennen kuin jatkat.": "Choose your product, time and position before proceeding.",
+  "Valitse tuote, päivämäärä ja ajankohta ennen kuin jatkat.": "Choose a product, date, and time before proceeding.",
   "Valitse tuote": "Select a product",
   "Tarvitsen adapterin": "I need an adapter",
   "Valitse päivä": "Choose a day",
+  "*harmaalla merkattuina päivinä ei ole vuokrattavia aikoja": "*there are no available times to rent on the days marked in gray",
+  "Valitse sinulle sopiva 3 tunnin vuokraus ajankohta tästä:": "Choose a 3-hour time slot that suits you:",
+
   "Vahvista": "Confirm",
   "Sulje": "Close",
   "Ymmärrän": "I understand",
@@ -110,7 +115,7 @@
   "Vuokraesine": "Rental property",
   "Vuokralleantaja vuokraa vuokralleottajalle seuraavan vuokraesineen seuraavassa säädetyin ehdoin.": "The Lessor shall lease to the Lessee the next hire item on the following terms and conditions.",
   "Perävaunu": "Trailer",
-  "Vuokra-aika": "Rental period",
+  "Vuokra-aika: 3 tuntia": "Rental period: 3 hours",
   "Nouto": "Pick up",
   "Palautus": "Return",
   "Vuokrauksen hinta 5 €": "Rental price €5",

public/locales/fi/translation.json

@@ -51,6 +51,8 @@
 
   "Peruuta varaus": "Peruuta varaus",
   "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.",
   "Takaisin": "Takaisin",
   "Kyllä": "Kyllä",
   "Peruuta": "Peruuta",
@@ -59,10 +61,12 @@
   "Täytä henkilötiedot": "Täytä henkilötiedot",
   "Siirry maksamaan": "Siirry maksamaan",
   "Valitse vähintään yksi asema ennen kuin jatkat.": "Valitse vähintään yksi asema ennen kuin jatkat.",
-  "Valitse tuote, ajankohta ja asema ennen kuin jatkat.": "Valitse tuote, ajankohta ja asema ennen kuin jatkat.",
+  "Valitse tuote, päivämäärä ja ajankohta ennen kuin jatkat.": "Valitse tuote, päivämäärä ja ajankohta ennen kuin jatkat.",
   "Valitse tuote": "Valitse tuote",
   "Tarvitsen adapterin": "Tarvitsen adapterin",
   "Valitse päivä": "Valitse päivä",
+  "*harmaalla merkittyinä päivinä ei ole vuokrattavia aikoja": "*harmaalla merkittyinä päivinä ei ole vuokrattavia aikoja",
+  "Valitse sinulle sopiva 3 tunnin vuokraus ajankohta tästä:": "Valitse sinulle sopiva 3 tunnin vuokraus ajankohta tästä:",
   "Vahvista": "Vahvista",
   "Sulje": "Sulje",
   "Ymmärrän": "Ymmärrän",
@@ -110,7 +114,7 @@
   "Vuokraesine": "Vuokraesine",
   "Vuokralleantaja vuokraa vuokralleottajalle seuraavan vuokraesineen seuraavassa säädetyin ehdoin.": "Vuokralleantaja vuokraa vuokralleottajalle seuraavan vuokraesineen seuraavassa säädetyin ehdoin.",
   "Perävaunu": "Perävaunu",
-  "Vuokra-aika": "Vuokra-aika",
+  "Vuokra-aika: 3 tuntia": "Vuokra-aika: 3 tuntia",
   "Nouto": "Nouto",
   "Palautus": "Palautus",
   "Vuokrauksen hinta 5 €": "Vuokrauksen hinta 5 €",

public/locales/sv/translation.json

@@ -41,7 +41,7 @@
   "Vuokraamaan": "Att hyra",
 
   "Peräkärryn vuokraus": "Uthyrning av släpvagnar",
-  "Varauksen tiedot": "hyresuppgifter",
+  "Varauksen tiedot": "Hyresuppgifter",
   "Palaute": "Återkoppling",
 
   "Valitse asemat": "Välj stationer",
@@ -51,15 +51,19 @@
 
   "Peruuta varaus": "Säga upp din hyra",
   "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.",
   "Takaisin": "Tillbaka",
   "Kyllä": "Ja",
   "Peruuta": "Avbryt",
   "Edellinen": "Tidigare",
   "Valitse päivämäärä": "Välj ett datum",
+  "*harmaalla merkattuina päivinä ei ole vuokrattavia aikoja": "*det finns inga lediga tider att hyra de dagar markerade med grått",
+  "Valitse sinulle sopiva 3 tunnin vuokraus ajankohta tästä:": "Välj en 3-timmars tid som passar dig:",
   "Täytä henkilötiedot": "Fyll i din information",
   "Siirry maksamaan": "Gå till betalning",
   "Valitse vähintään yksi asema ennen kuin jatkat.": "Välj minst en station innan du fortsätter.",
-  "Valitse tuote, ajankohta ja asema ennen kuin jatkat.": "Välj produkt, tid och position innan du fortsätter.",
+  "Valitse tuote, päivämäärä ja ajankohta ennen kuin jatkat.": "Välj produkt, datum och tid innan du fortsätter.",
   "Valitse tuote": "Välj en produkt",
   "Tarvitsen adapterin": "Jag behöver en adapter",
   "Valitse päivä": "Välj en dag",
@@ -110,7 +114,7 @@
   "Vuokraesine": "Hyresfastigheter",
   "Vuokralleantaja vuokraa vuokralleottajalle seuraavan vuokraesineen seuraavassa säädetyin ehdoin.": "Hyresvärden skall hyra ut nästa hyresobjekt till hyresgästen på följande villkor.",
   "Perävaunu": "Trailer",
-  "Vuokra-aika": "Hyresperiod",
+  "Vuokra-aika: 3 tuntia": "Uthyrningsperiod: 3 timmar",
   "Nouto": "Plocka upp",
   "Palautus": "Återgång",
   "Vuokrauksen hinta 5 €": "Hyrespris 5 €",

src/components/Calendar.jsx

@@ -4,9 +4,11 @@ import 'react-calendar/dist/Calendar.css';
 import '../css/CustomCalendar.css';
 import PropTypes from 'prop-types';
 import { useStepper } from '../hooks/useStepper';
+import { useTranslation } from 'react-i18next';
 
 const RentCalendar = ({ futureDates, setSelectedDate }) => {
   const { selectedDate } = useStepper();
+  const { i18n } = useTranslation();
 
   useEffect(() => {
     const calendar = document.querySelector('.react-calendar');
@@ -46,6 +48,7 @@ const RentCalendar = ({ futureDates, setSelectedDate }) => {
       minDate={new Date()}
       tileDisabled={tileDisabled}
       tileClassName={tileClassName}
+      locale={i18n.language}
     />
   );
 };

src/components/PopUpInfoModal.jsx

@@ -43,9 +43,9 @@ export const PopUpInfoModal = (props) => {
 
 PopUpInfoModal.propTypes = {
   show: PropTypes.bool.isRequired,
-  title: PropTypes.string.isRequired,
-  body: PropTypes.element.isRequired,
-  backButtonTxt: PropTypes.string,
+  title: PropTypes.string,
+  body: PropTypes.element,
+  backButtonTxt: PropTypes.bool,
   buttonTxt: PropTypes.string.isRequired,
   onHide: PropTypes.func.isRequired,
   onPrimaryButtonClick: PropTypes.func,

src/components/PopUpWarningModal.jsx

@@ -40,7 +40,7 @@ PopUpWarningModal.propTypes = {
   show: PropTypes.bool,
   onHide: PropTypes.func,
   title: PropTypes.string,
-  body: PropTypes.string,
+  body: PropTypes.obj,
   backButton: PropTypes.string,
   acceptButton: PropTypes.string,
   acceptButtonVariant: PropTypes.string,

src/components/SelectTime.jsx

@@ -2,17 +2,26 @@ import TimePeriodButton from './TimePeriodButton';
 import style from '../css/SelectTime.module.css';
 import PropTypes from 'prop-types';
 
-function SelectTime({ selectedTime, setSelectedTime, stationName }) {
-  const timeOptions = ['10-13', '11-14', '12-15', '13-16', '14-17', '15-18'];
+function SelectTime({
+  selectedStationAndTime,
+  setSelectedStationAndTime,
+  stationName,
+  timeSlots,
+}) {
+  const handleClick = (stationName, timeSlot) => {
+    setSelectedStationAndTime({
+      [stationName]: timeSlot,
+    });
+  };
 
-  const itemElements = timeOptions.map((item, index) => (
+  const itemElements = timeSlots.map((item, index) => (
     <TimePeriodButton
       buttonText={item}
-      setSelectedTime={setSelectedTime}
+      setSelectedTime={handleClick}
       key={index}
-      selectedTime={selectedTime}
+      selectedTime={selectedStationAndTime[stationName]}
       stationName={stationName}
-    ></TimePeriodButton>
+    />
   ));
 
   return (
@@ -26,11 +35,12 @@ function SelectTime({ selectedTime, setSelectedTime, stationName }) {
 }
 
 SelectTime.propTypes = {
-  setSelectedTime: PropTypes.func.isRequired, // Expect a string prop, and it's required
-  setSelectedStation: PropTypes.func.isRequired, // Expect a string prop, and it's required
+  selectedStationAndTime: PropTypes.obj,
+  setSelectedStationAndTime: PropTypes.func,
+  setSelectedStation: PropTypes.func,
   stationName: PropTypes.string.isRequired, // Expect a string prop, and it's required
-  selectedStation: PropTypes.string.isRequired, // Expect a string prop, and it's required
-  selectedTime: PropTypes.string.isRequired, // Expect a string prop, and it's required
+  selectedTime: PropTypes.string,
+  timeSlots: PropTypes.array.isRequired,
 };
 
 export default SelectTime;

src/components/StationList.jsx

@@ -13,48 +13,19 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const StationList = ({ onStationSelected, handleWarningModal }) => {
-  const stations = [
-    {
-      stationName: 'Ruskeasanta',
-      cargoBike: true,
-      trailer: true,
-    },
-    {
-      stationName: 'Konala',
-      cargoBike: false,
-      trailer: true,
-    },
-    {
-      stationName: 'Kivikko',
-      cargoBike: true,
-      trailer: false,
-    },
-    {
-      stationName: 'Jorvas',
-      cargoBike: false,
-      trailer: true,
-    },
-    {
-      stationName: 'Ämmässuo',
-      cargoBike: true,
-      trailer: true,
-    },
-    {
-      stationName: 'Koivusuo',
-      cargoBike: true,
-      trailer: false,
-    },
-  ];
   const [showWarningModal, setShowWarningModal] = useState(false);
+  const [allSelected, setAllSelected] = useState(false);
 
-  const { selectedStations, setSelectedStations } = useStepper();
+  const { stationsData, setStationsData } = useStepper();
   const { t } = useTranslation();
 
   const navigate = useNavigate();
 
   // handle the button click for selecting a station
   const handleSubmit = () => {
-    if (selectedStations.some((checked) => checked)) {
+    if (
+      stationsData.map((station) => station.selected).some((checked) => checked)
+    ) {
       onStationSelected();
     } else {
       handleWarningModal();
@@ -69,28 +40,42 @@ const StationList = ({ onStationSelected, handleWarningModal }) => {
     setShowWarningModal(true);
   };
 
+  const handleSelectAll = () => {
+    setAllSelected(!allSelected);
+    const updatedStations = stationsData.map((station) => ({
+      ...station,
+      selected: !allSelected,
+    }));
+    setStationsData(updatedStations);
+  };
+
   // handling the checkbox changes for a specific station
   const handleCheckbox = (index) => {
-    const updatedChecked = [...selectedStations];
-    updatedChecked[index] = !updatedChecked[index];
-    setSelectedStations(updatedChecked);
+    if (allSelected) {
+      return;
+    }
+
+    const updatedStations = [...stationsData];
+    updatedStations[index].selected = !updatedStations[index].selected;
+    setStationsData(updatedStations);
   };
 
   return (
     <>
       <PopUpWarningModal
         show={showWarningModal}
         onHide={() => setShowWarningModal(false)}
-        title={t('Peruuta varaus')}
-        body={t('Oletko varma, että haluat peruuttaa varauksen?')}
+        title={t('Haluatko varmasti poistua sivustolta?')}
+        body={t('Tekemiäsi muutoksia ei tallenneta.')}
         backButton={t('Takaisin')}
         acceptButton={t('Kyllä')}
         acceptButtonVariant="danger"
         onPrimaryButtonClick={frontPage}
       />
+
       <div className={styles.listContainer}>
         <ListGroup variant="flush" className={styles.listElement}>
-          {stations.map((station, index) => (
+          {stationsData.map((station, index) => (
             <ListGroup.Item
               key={station.stationName}
               className={styles.customBorder}
@@ -112,14 +97,6 @@ const StationList = ({ onStationSelected, handleWarningModal }) => {
                     <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" />
                   </svg>
                   <p id={styles.kilometers}>10 km</p>
-                  {station.cargoBike && (
-                    <img
-                      src={Bike}
-                      alt="cargo bike icon"
-                      id={styles.cargobike}
-                      draggable={false}
-                    />
-                  )}
                   {station.trailer && (
                     <img
                       src={Trailer}
@@ -128,10 +105,18 @@ const StationList = ({ onStationSelected, handleWarningModal }) => {
                       draggable={false}
                     />
                   )}
+                  {station.cargoBike && (
+                    <img
+                      src={Bike}
+                      alt="cargo bike icon"
+                      id={styles.cargobike}
+                      draggable={false}
+                    />
+                  )}
                   <Checkbox
                     onChange={() => handleCheckbox(index)}
                     value="station"
-                    checked={selectedStations[index]}
+                    checked={stationsData[index].selected}
                     isRequired={false}
                     id={styles.stationCheckbox}
                     className={styles.stationCheckboxContainer}
@@ -141,6 +126,17 @@ const StationList = ({ onStationSelected, handleWarningModal }) => {
             </ListGroup.Item>
           ))}
         </ListGroup>
+        <dev className={styles.allCheckboxContainer}>
+          <p>Valitse kaikki asemat</p>
+          <Checkbox
+            onChange={handleSelectAll}
+            value="all"
+            checked={allSelected}
+            isRequired={false}
+            id={styles.allCheckbox}
+            className={styles.allCheckbox}
+          />
+        </dev>
         <div className={styles.buttonsContainer}>
           <Button variant="outline-danger" onClick={handleOpenWarningModal}>
             {t('Peruuta')}