Merge pull request #108 from joffreyBerrier/feat/add-new-condition-to…

…-no-period-to-period

feat(periods): add new condition if no-period next to period

README.md

@@ -1,8 +1,8 @@
-# Release 1.1.8
+# Release 1.2.0
 
 ### Breacking change on latest version
 
-https://github.com/joffreyBerrier/vue-hotel-datepicker/releases/tag/1.1.8
+https://github.com/joffreyBerrier/vue-hotel-datepicker/releases/tag/1.2.0
 
 # vue-hotel-datepicker@2
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-hotel-datepicker2",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "author": "Joffrey Berrier - Origin created by krystalcampioni",
   "description": "Vue date range picker component fork of vue-hotel-datepicker create by krystalcampioni",
   "main": "dist/vueHotelDatepicker2.common.js",

src/components/DatePicker/index.vue

@@ -1490,6 +1490,10 @@ export default {
           }
 
           // Calculate dynamic minimum nights with nextPeriod
+          const nextDisableDates = this.getDisableDaysOfTheNextedPeriod(
+            currentPeriod
+          );
+
           if (
             !this.isDateBeforeOrEqual(
               this.checkIn,
@@ -1507,13 +1511,21 @@ export default {
             this.checkInPeriod = { ...currentPeriod };
             this.dynamicNightCounts = currentPeriod.minimumDurationNights;
             setDisabledDays();
+
+            if (nextDisableDates) {
+              let copyNextPeriodDisableDates = this.nextPeriodDisableDates;
+
+              copyNextPeriodDisableDates.push(nextDisableDates);
+              copyNextPeriodDisableDates = copyNextPeriodDisableDates.flat();
+              this.nextPeriodDisableDates = copyNextPeriodDisableDates;
+            }
           }
 
           // Else !currentPeriod
         } else {
           const checkInWithMinimumDuration = this.addDays(
             this.checkIn,
-            this.minNightCount - 1
+            this.minNightCount > 1 ? this.minNightCount - 1 : this.minNightCount
           );
 
           this.nextPeriod = getPeriod(checkInWithMinimumDuration);
@@ -1524,11 +1536,70 @@ export default {
 
             setDisabledDays();
           } else {
+            // nextPeriod.startAt - (checkIn + nextPeriod.minimumDuration) == nextEnablePeriodDate
+            // Blocked the days between nextPeriod.startAt + 1 to nextEnablePeriodDate
+            this.checkNextPeriod();
             this.dynamicNightCounts = 0;
           }
         }
       }
     },
+    getDisableDaysOfTheNextedPeriod(currentPeriod) {
+      if (currentPeriod.periodType === "nightly") {
+        let nextPeriodIndex;
+
+        this.sortedPeriodDates.forEach((x, i) => {
+          if (currentPeriod.startAt === x.startAt) nextPeriodIndex = i + 1;
+        });
+
+        if (this.sortedPeriodDates[nextPeriodIndex]) {
+          const nextPeriod = {
+            ...this.sortedPeriodDates[nextPeriodIndex]
+          };
+          const nextDate = this.addDays(
+            this.checkIn,
+            nextPeriod.minimumDurationNights
+          );
+          const nextStartNextPeriod = this.addDays(nextPeriod.startAt, 1);
+
+          if (nextStartNextPeriod) {
+            return this.getDaysArray(nextStartNextPeriod, nextDate);
+          }
+
+          return null;
+        }
+      }
+
+      return null;
+    },
+    checkNextPeriod() {
+      let nextPeriodIndex;
+
+      this.sortedPeriodDates.forEach((x, i) => {
+        const nextPeriod = this.isDateAfter(x.startAt, this.checkIn);
+
+        if (nextPeriod) nextPeriodIndex = i + 1;
+      });
+
+      if (
+        this.sortedPeriodDates[nextPeriodIndex] &&
+        this.sortedPeriodDates[nextPeriodIndex].periodType === "nightly"
+      ) {
+        const nextPeriod = {
+          ...this.sortedPeriodDates[nextPeriodIndex]
+        };
+        const nextDate = this.addDays(
+          this.checkIn,
+          nextPeriod.minimumDurationNights
+        );
+        const nextStartNextPeriod = this.addDays(nextPeriod.startAt, 1);
+
+        this.nextPeriodDisableDates = this.getDaysArray(
+          nextStartNextPeriod,
+          nextDate
+        );
+      }
+    },
     renderPreviousMonth() {
       if (this.activeMonthIndex >= 1) {
         this.activeMonthIndex--;

src/components/helpers.js

@@ -189,15 +189,24 @@ export default {
 
     return countOfDays !== 1 ? this.i18n.nights : this.i18n.night;
   },
+  isDateAfter(time1, time2) {
+    return new Date(time1) < new Date(time2);
+  },
   isDateBefore(time1, time2) {
     return new Date(time1) < new Date(time2);
   },
   isDateBeforeOrEqual(time1, time2) {
     return new Date(time1) <= new Date(time2);
   },
+  test(day1, day2) {
+    const date1 = fecha.format(new Date(day1), "YYYY-MM-DD");
+    const date2 = fecha.format(new Date(day2), "YYYY-MM-DD");
+
+    return date1 === date2;
+  },
   compareDay(day1, day2) {
-    const date1 = fecha.format(new Date(day1), "YYYYMMDD");
-    const date2 = fecha.format(new Date(day2), "YYYYMMDD");
+    const date1 = fecha.format(new Date(day1), "YYYY-MM-DD");
+    const date2 = fecha.format(new Date(day2), "YYYY-MM-DD");
 
     if (date1 > date2) {
       return 1;

tests/unit/datepicker.spec.js

@@ -804,8 +804,8 @@ describe("Datepicker Component", () => {
         expect(wrapper.vm.nextPeriod.minimumDurationNights).toBe(14);
       });
 
-      it("Should define nextPeriodDisableDates length equal to 6", () => {
-        expect(wrapper.vm.nextPeriodDisableDates.length).toBe(16);
+      it("Should define nextPeriodDisableDates length equal to 25", () => {
+        expect(wrapper.vm.nextPeriodDisableDates.length).toBe(25);
       });
 
       it("Should define last nextPeriodDisableDates equal to Thursday", () => {
@@ -1142,6 +1142,11 @@ describe("Datepicker Component", () => {
       });
 
       it("Should define nextPeriodDisableDates to []", () => {
+        console.log(
+          "nextPeriodDisableDates",
+          wrapper.vm.nextPeriodDisableDates
+        );
+
         expect(wrapper.vm.nextPeriodDisableDates).toEqual([]);
       });
 
@@ -1240,5 +1245,95 @@ describe("Datepicker Component", () => {
         testingHoveringDate(6, 7, "2023-12", "2023-12-10");
       });
     });
+
+    describe("case 8 (no perdiod then period of 8 minimym nights): No period and 8 night minumum > I can't select from 11/09 to 16,17,18/09", () => {
+      beforeEach(async () => {
+        wrapper = await mount(Datepicker, {
+          propsData: {
+            alwaysVisible: true,
+            countOfDesktopMonth: 2,
+            firstDayOfWeek: 1,
+            minNights: 1,
+            periodDates: [
+              {
+                startAt: "2022-09-01",
+                endAt: "2022-09-10",
+                minimumDuration: 4,
+                periodType: "nightly"
+              },
+              {
+                startAt: "2022-09-15",
+                endAt: "2022-09-31",
+                minimumDuration: 8,
+                periodType: "nightly"
+              }
+            ],
+            startDate: new Date("2022-08-01")
+          }
+        });
+
+        const checkInDay = wrapper.get('[data-testid="day-2022-09-11"]');
+
+        await checkInDay.trigger("click");
+      });
+
+      it("Should define checkInPeriod equal to nextPeriod.minimumDurationNights", () => {
+        expect(wrapper.vm.checkInPeriod.minimumDurationNights).toBe(1);
+      });
+
+      it("Should render correct text for tooltip", () => {
+        expect(wrapper.vm.customTooltip).toBe("1 Night minimum.");
+      });
+
+      it("Should define dynamicNightCounts to 0", () => {
+        expect(wrapper.vm.dynamicNightCounts).toBe(0);
+      });
+
+      it("Should define nextPeriod.minimumDuration equal to 0", () => {
+        expect(wrapper.vm.dynamicNightCounts).toBe(0);
+      });
+
+      it("Should define nextPeriodDisableDates length equal to 4", () => {
+        expect(wrapper.vm.nextPeriodDisableDates.length).toBe(4);
+      });
+
+      it("Should define disabled and not-allowed class on day before possible checkout", () => {
+        const beforeDay = wrapper.get('[data-testid="day-2022-09-16"]');
+        const beforeDay2 = wrapper.get('[data-testid="day-2022-09-17"]');
+        const beforeDay3 = wrapper.get('[data-testid="day-2022-09-18"]');
+
+        expect(beforeDay.classes()).toContain(
+          "datepicker__month-day--disabled"
+        );
+        expect(beforeDay.classes()).toContain(
+          "datepicker__month-day--not-allowed"
+        );
+        expect(beforeDay2.classes()).toContain(
+          "datepicker__month-day--disabled"
+        );
+        expect(beforeDay2.classes()).toContain(
+          "datepicker__month-day--not-allowed"
+        );
+        expect(beforeDay3.classes()).toContain(
+          "datepicker__month-day--disabled"
+        );
+        expect(beforeDay3.classes()).toContain(
+          "datepicker__month-day--not-allowed"
+        );
+      });
+
+      it("Should define valid class on possible checkout day", () => {
+        const possibleCheckout = wrapper.get('[data-testid="day-2022-09-19"]');
+
+        expect(possibleCheckout.classes()).toContain("datepicker__month-day");
+        expect(possibleCheckout.classes()).toContain(
+          "datepicker__month-day--valid"
+        );
+      });
+
+      it("Should add afterMinimumDurationValidDay class on days that are between checkIn and possible checkOut day", () => {
+        testingHoveringDate(10, 15, "2022-09", "2022-09-10");
+      });
+    });
   });
 });