From 2a6d7531d09fe4bb702ede3cae34f6536c9c9eed Mon Sep 17 00:00:00 2001 From: R Date: Tue, 28 Nov 2023 00:06:55 +0200 Subject: [PATCH 1/2] render the correct time slots in the rent process, fix and improve UI, improve code quality --- public/locales/en/translation.json | 6 +-- public/locales/fi/translation.json | 4 +- public/locales/sv/translation.json | 6 +-- src/components/Calendar.jsx | 3 ++ src/components/PopUpInfoModal.jsx | 6 +-- src/components/PopUpWarningModal.jsx | 2 +- src/components/SelectTime.jsx | 30 ++++++++----- src/components/StationList.jsx | 64 ++++++++-------------------- src/components/TimeForm.jsx | 60 ++++++++------------------ src/components/TimePeriodButton.jsx | 11 ++--- src/components/UserForm.jsx | 40 +++++------------ src/context/StepperContext.jsx | 60 ++++++++++++++++++++------ src/css/RentForm.module.css | 10 ++--- src/css/StationList.module.css | 4 +- src/css/UserForm.module.css | 4 +- src/pages/RentProcess.jsx | 5 +-- 16 files changed, 142 insertions(+), 173 deletions(-) diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 076bc9a..9e47793 100644 --- a/public/locales/en/translation.json +++ b/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", @@ -59,7 +59,7 @@ "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", @@ -110,7 +110,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", diff --git a/public/locales/fi/translation.json b/public/locales/fi/translation.json index 395bfba..3afcb84 100644 --- a/public/locales/fi/translation.json +++ b/public/locales/fi/translation.json @@ -59,7 +59,7 @@ "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ä", @@ -110,7 +110,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 €", diff --git a/public/locales/sv/translation.json b/public/locales/sv/translation.json index d08bd66..99fdb8b 100644 --- a/public/locales/sv/translation.json +++ b/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", @@ -59,7 +59,7 @@ "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 +110,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 €", diff --git a/src/components/Calendar.jsx b/src/components/Calendar.jsx index bfe75dc..4ff5054 100644 --- a/src/components/Calendar.jsx +++ b/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} /> ); }; diff --git a/src/components/PopUpInfoModal.jsx b/src/components/PopUpInfoModal.jsx index 8632aaf..b0c865b 100644 --- a/src/components/PopUpInfoModal.jsx +++ b/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, diff --git a/src/components/PopUpWarningModal.jsx b/src/components/PopUpWarningModal.jsx index 9736a51..134d025 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.string, + body: PropTypes.obj, backButton: PropTypes.string, acceptButton: PropTypes.string, acceptButtonVariant: PropTypes.string, diff --git a/src/components/SelectTime.jsx b/src/components/SelectTime.jsx index d5ffbca..b3b8148 100644 --- a/src/components/SelectTime.jsx +++ b/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) => ( + /> )); 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; diff --git a/src/components/StationList.jsx b/src/components/StationList.jsx index b55e262..ca32649 100644 --- a/src/components/StationList.jsx +++ b/src/components/StationList.jsx @@ -13,48 +13,18 @@ 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 { 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(); @@ -71,9 +41,9 @@ const StationList = ({ onStationSelected, handleWarningModal }) => { // handling the checkbox changes for a specific station const handleCheckbox = (index) => { - const updatedChecked = [...selectedStations]; - updatedChecked[index] = !updatedChecked[index]; - setSelectedStations(updatedChecked); + const updatedStations = [...stationsData]; + updatedStations[index].selected = !updatedStations[index].selected; + setStationsData(updatedStations); }; return ( @@ -90,7 +60,7 @@ const StationList = ({ onStationSelected, handleWarningModal }) => { />
- {stations.map((station, index) => ( + {stationsData.map((station, index) => ( {

10 km

- {station.cargoBike && ( - cargo bike icon - )} {station.trailer && ( { draggable={false} /> )} + {station.cargoBike && ( + cargo bike icon + )} handleCheckbox(index)} value="station" - checked={selectedStations[index]} + checked={stationsData[index].selected} isRequired={false} id={styles.stationCheckbox} className={styles.stationCheckboxContainer} diff --git a/src/components/TimeForm.jsx b/src/components/TimeForm.jsx index b6537fe..d48ed27 100644 --- a/src/components/TimeForm.jsx +++ b/src/components/TimeForm.jsx @@ -23,10 +23,11 @@ const ProductAndTime = ({ const { t } = useTranslation(); const { + stationsData, selectedDate, setSelectedDate, - selectedTime, - setSelectedTime, + selectedStationAndTime, + setSelectedStationAndTime, selectedProduct, } = useStepper(); @@ -48,7 +49,7 @@ const ProductAndTime = ({ // handling the button click for selecting a time and date const handleSubmit = () => { if ( - selectedTime === '' || + Object.keys(selectedStationAndTime).length === 0 || selectedDate === null || selectedProduct === '' ) { @@ -92,46 +93,19 @@ const ProductAndTime = ({
- - {/* - - - - */} + {stationsData.map((station) => { + if (station.selected) { + return ( + + ); + } + })}
diff --git a/src/components/TimePeriodButton.jsx b/src/components/TimePeriodButton.jsx index db4adb4..ca8676d 100644 --- a/src/components/TimePeriodButton.jsx +++ b/src/components/TimePeriodButton.jsx @@ -9,11 +9,9 @@ function TimePeriodButton({ stationName, }) { const handleClick = () => { - setSelectedTime(buttonText); - console.log(buttonText); - console.log(selectedTime); - console.log(stationName); + setSelectedTime(stationName, buttonText); }; + return ( <>
+

{t('Valitse sinulle sopiva 3 tunnin vuokraus ajankohta tästä:')}

{stationsData.map((station) => { if (station.selected) { diff --git a/src/components/UserForm.jsx b/src/components/UserForm.jsx index 6ab532a..c73aba1 100644 --- a/src/components/UserForm.jsx +++ b/src/components/UserForm.jsx @@ -235,8 +235,8 @@ const UserForm = ({ onSubmit, onPrevStep }) => { 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" @@ -339,7 +339,7 @@ const UserForm = ({ onSubmit, onPrevStep }) => { {t('Edellinen')}