Make reservationCard responsive

ReDI-School · Dec 5, 2024 · a642bd7 · a642bd7
1 parent e401dc8
commit a642bd7
Show file tree

Hide file tree

Showing 10 changed files with 170 additions and 7 deletions.
diff --git a/server/src/data/bookings.json b/server/src/data/bookings.json
@@ -66,7 +66,24 @@
         "petsNumber": 0
       }
     },
-    "alreadyBookedDates": []
+    "alreadyBookedDates": [
+      {
+        "startDate": "12/05/2024",
+        "endDate": "12/07/2024"
+      },
+      {
+        "startDate": "12/19/2024",
+        "endDate": "12/21/2024"
+      },
+      {
+        "startDate": "12/08/2024",
+        "endDate": "12/10/2024"
+      },
+      {
+        "startDate": "12/12/2025",
+        "endDate": "12/16/2025"
+      }
+    ]
   },
   {
     "id": 4,

diff --git a/server/src/data/reservations.json b/server/src/data/reservations.json
@@ -1 +1,86 @@
-[]
+[
+  {
+    "reservationId": 1,
+    "productId": 3,
+    "checkInDate": "12/05/2024",
+    "checkOutDate": "12/07/2024",
+    "guestCounts": {
+      "adults": 1,
+      "children": 1,
+      "infants": 0,
+      "pets": 0
+    },
+    "totalPrice": 250,
+    "breakdown": {
+      "nights": 2,
+      "pricePerNight": 115,
+      "basePrice": 230,
+      "airbnbServiceFee": 10,
+      "cleaningFee": 10,
+      "longStayDiscount": 0
+    }
+  },
+  {
+    "reservationId": 2,
+    "productId": 3,
+    "checkInDate": "12/19/2024",
+    "checkOutDate": "12/21/2024",
+    "guestCounts": {
+      "adults": 3,
+      "children": 2,
+      "infants": 0,
+      "pets": 0
+    },
+    "totalPrice": 250,
+    "breakdown": {
+      "nights": 2,
+      "pricePerNight": 115,
+      "basePrice": 230,
+      "airbnbServiceFee": 10,
+      "cleaningFee": 10,
+      "longStayDiscount": 0
+    }
+  },
+  {
+    "reservationId": 3,
+    "productId": 3,
+    "checkInDate": "12/08/2024",
+    "checkOutDate": "12/10/2024",
+    "guestCounts": {
+      "adults": 1,
+      "children": 2,
+      "infants": 0,
+      "pets": 0
+    },
+    "totalPrice": 250,
+    "breakdown": {
+      "nights": 2,
+      "pricePerNight": 115,
+      "basePrice": 230,
+      "airbnbServiceFee": 10,
+      "cleaningFee": 10,
+      "longStayDiscount": 0
+    }
+  },
+  {
+    "reservationId": 4,
+    "productId": 3,
+    "checkInDate": "12/12/2025",
+    "checkOutDate": "12/16/2025",
+    "guestCounts": {
+      "adults": 1,
+      "children": 1,
+      "infants": 1,
+      "pets": 0
+    },
+    "totalPrice": 480,
+    "breakdown": {
+      "nights": 4,
+      "pricePerNight": 115,
+      "basePrice": 460,
+      "airbnbServiceFee": 10,
+      "cleaningFee": 10,
+      "longStayDiscount": 0
+    }
+  }
+]
diff --git a/src/components/CalendarBlock/CalendarBlock.module.css b/src/components/CalendarBlock/CalendarBlock.module.css
@@ -77,3 +77,17 @@
 .clearDatesButton {
   text-decoration: underline;
 }
+
+
+@media (max-width: 1140px) {
+  .buttonsContainer {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin-top: 10px;
+  }
+  .selectorTitle {
+    margin-left: 4px;  
+    text-align: left;
+  }
+}
diff --git a/src/components/ProductGalleryPopup/ProductGalleryPopup.module.css b/src/components/ProductGalleryPopup/ProductGalleryPopup.module.css
@@ -3,7 +3,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%;
+  height: 100vh;
   max-height: 100%;
   background: white;
   z-index: 1000;

diff --git a/src/components/ReservationCard/DatePicker/DatePicker.module.css b/src/components/ReservationCard/DatePicker/DatePicker.module.css
@@ -129,4 +129,12 @@
 .clearInputDateBtn:focus,
 .clearInputDateBtn:focus-visible {
   outline: none;
+}
+
+
+@media (max-width: 420px) {
+  div.datesPickerSection {
+    display: flex;
+    flex-direction: column;
+  }  
 }
diff --git a/src/components/ReservationCard/ReservationCard.module.css b/src/components/ReservationCard/ReservationCard.module.css
@@ -119,4 +119,16 @@
   .reservationCard {
     width: 18rem;
   }
+}
+
+@media (max-width: 768px) {
+  .reservationCard {
+    width: 23rem;
+  }
+}
+
+@media (max-width: 420px) {
+  .reservationCard {
+    width: 18rem;
+  }
 }
diff --git a/src/components/ReservationCard/ReservationDatesSelector/ReservationDatesSelector.jsx b/src/components/ReservationCard/ReservationDatesSelector/ReservationDatesSelector.jsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react'
 import WarningMessage from '../WarningMessage/WarningMessage'
 import { calculateNights, getStayPeriod } from '../../../utils/dateUtils'
 import Calendar from '../../Calendar/Calendar'
+import { useWindowSize } from '../../../hooks/useWindowSize'
 
 const ReservationDatesSelector = ({
   setCheckInDate,
@@ -20,6 +21,8 @@ const ReservationDatesSelector = ({
 }) => {
   const calendarRef = useOutsideClick(() => toggleShowCalendar(false))
 
+  const windowWidth = useWindowSize();
+
   const [userSelectedCheckIn, setUserSelectedCheckIn] = useState(false)
   const [userSelectedCheckOut, setUserSelectedCheckOut] = useState(false)
   const [inputCheckInDate, setInputCheckInDate] = useState(
@@ -114,6 +117,7 @@ const ReservationDatesSelector = ({
           <WarningMessage message={checkInError || checkOutError} />
         </div>
       </div>
+      {windowWidth > 768 && (
         <div className={styles.calendarWrapper}>
           <Calendar 
             dayItemWidth="42px" 
@@ -133,6 +137,7 @@ const ReservationDatesSelector = ({
             isInitializedRef={isInitializedRef}
           />
         </div>
+      )}
       <div className={styles.buttonsContainer}>
         <button
           className={styles.shortcutsPopupButton}

diff --git a/src/components/ReservationCard/ReservationDatesSelector/ReservationDatesSelector.module.css b/src/components/ReservationCard/ReservationDatesSelector/ReservationDatesSelector.module.css
@@ -104,4 +104,29 @@
 }
 .datePickerWrapper .datePickerContainer > * {
   border-radius: 6px;
+}
+
+@media (max-width: 768px) {
+  .selectorTitle {
+    margin-bottom: 24px;
+  }
+  .selectorContainer {
+    top: -24px;
+    right: -25px;
+    width: 23rem;
+    min-height: fit-content;
+  }
+  .datePickerWrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+}
+
+@media (max-width: 420px) {
+  .selectorContainer {
+    width: 18rem;
+  }
 }
diff --git a/src/pages/ProductPage.module.css b/src/pages/ProductPage.module.css
@@ -61,9 +61,6 @@
   .ProductDescription {
     flex-basis: 90%;
   }
-  .ReservationCard {
-    display: none;
-  }
   .titlePage {
     margin-top: -80px;
   }

diff --git a/src/utils/displayHelpers.js b/src/utils/displayHelpers.js
@@ -31,7 +31,7 @@ export const getSuccessHtml = (data) => {
       <p style="margin-top: 1rem; font-size: 1.2rem; color: green; font-weight: bold;">
         Total price: €${data?.totalPrice}
       </p>
-      <p style="text-align: center; font-weight: 500;">Thank you for using our service😊</p>
+      <p style="text-align: center; margin-top: 1.6rem; font-weight: 500;">Thank you for using our service😊</p>
     </div>
   `;
 };