Merge pull request #109 from joffreyBerrier/feat/review-management-of…

…-period

feat(management-period): review management of periods takes always ma…

README.md

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-hotel-datepicker2",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "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",
@@ -32,6 +32,7 @@
     "@vue/eslint-config-airbnb": "^5.0.2",
     "babel-jest": "^27.5.1",
     "core-js": "^3.6.4",
+    "dayjs": "^1.11.4",
     "fecha": "^4.2.0",
     "flush-promises": "^1.0.2",
     "jest": "^27.5.1",

src/components/DatePicker/index.vue

@@ -1446,9 +1446,6 @@ export default {
           this.nextPeriodDisableDates = [
             ...new Set(this.nextPeriodDisableDates)
           ];
-          this.nextPeriodDisableDates = this.nextPeriodDisableDates.map(
-            x => new Date(x)
-          );
         };
 
         const getPeriod = currentDate => {
@@ -1514,10 +1511,19 @@ export default {
 
             if (nextDisableDates) {
               let copyNextPeriodDisableDates = this.nextPeriodDisableDates;
+              let nextDisableDatesFormat = nextDisableDates.map(d =>
+                this.dateFormater(d, "YYYY-MM-DD")
+              );
+
+              nextDisableDatesFormat = nextDisableDatesFormat.filter(
+                d => !copyNextPeriodDisableDates.includes(d)
+              );
 
-              copyNextPeriodDisableDates.push(nextDisableDates);
-              copyNextPeriodDisableDates = copyNextPeriodDisableDates.flat();
-              this.nextPeriodDisableDates = copyNextPeriodDisableDates;
+              if (nextDisableDatesFormat.length > 0) {
+                copyNextPeriodDisableDates.push(nextDisableDatesFormat);
+                copyNextPeriodDisableDates = copyNextPeriodDisableDates.flat();
+                this.nextPeriodDisableDates = copyNextPeriodDisableDates;
+              }
             }
           }
 
@@ -1545,29 +1551,36 @@ export default {
       }
     },
     getDisableDaysOfTheNextedPeriod(currentPeriod) {
-      if (currentPeriod.periodType === "nightly") {
-        let nextPeriodIndex;
-
-        this.sortedPeriodDates.forEach((x, i) => {
-          if (currentPeriod.startAt === x.startAt) nextPeriodIndex = i + 1;
-        });
+      let nextPeriodIndex;
 
-        if (this.sortedPeriodDates[nextPeriodIndex]) {
-          const nextPeriod = {
-            ...this.sortedPeriodDates[nextPeriodIndex]
-          };
-          const nextDate = this.addDays(
-            this.checkIn,
-            nextPeriod.minimumDurationNights
-          );
-          const nextStartNextPeriod = this.addDays(nextPeriod.startAt, 1);
+      this.sortedPeriodDates.forEach((x, i) => {
+        if (currentPeriod.startAt === x.startAt) nextPeriodIndex = i + 1;
+      });
 
-          if (nextStartNextPeriod) {
-            return this.getDaysArray(nextStartNextPeriod, nextDate);
-          }
+      if (this.sortedPeriodDates[nextPeriodIndex]) {
+        const nextPeriod = {
+          ...this.sortedPeriodDates[nextPeriodIndex]
+        };
+        const isNightlyNextPeriod = nextPeriod.periodType === "nightly";
 
+        if (
+          currentPeriod.periodType.includes("weekly") &&
+          isNightlyNextPeriod
+        ) {
           return null;
         }
+
+        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;
@@ -1597,7 +1610,7 @@ export default {
         this.nextPeriodDisableDates = this.getDaysArray(
           nextStartNextPeriod,
           nextDate
-        );
+        ).map(d => this.dateFormater(d, "YYYY-MM-DD"));
       }
     },
     renderPreviousMonth() {

src/components/helpers.js

@@ -1,5 +1,18 @@
 /* eslint-disable vars-on-top */
 import fecha from "fecha";
+// eslint-disable-next-line import/no-named-default
+import { default as dayjs } from "dayjs";
+// eslint-disable-next-line import/no-named-default
+import { default as utc } from "dayjs/plugin/utc";
+
+dayjs.extend(utc);
+
+const getDateDiff = (time1, time2, type) => {
+  const d1 = dayjs(time1).utc(true);
+  const d2 = dayjs(time2).utc(true);
+
+  return Math.abs(d1.diff(d2, type));
+};
 
 export default {
   getNextDate(datesArray, referenceDate) {
@@ -161,16 +174,17 @@ export default {
     return newArr;
   },
   getDaysArray(start, end) {
-    for (
-      // eslint-disable-next-line no-var
-      var arr = [], dt = new Date(start);
-      dt <= end;
-      dt.setDate(dt.getDate() + 1)
-    ) {
-      arr.push(new Date(dt));
+    const d1 = dayjs(start).utc(true);
+    const d2 = dayjs(end).utc(true);
+    const lenghDifference = getDateDiff(d1.toDate(), d2.toDate(), "day");
+    const arr = [];
+
+    for (let index = 0; index < lenghDifference + 1; index++) {
+      const day = d1.add(index, "day").toDate();
+
+      arr.push(day);
     }
 
-    // eslint-disable-next-line block-scoped-var
     return arr;
   },
   dateFormater(date, format) {

tests/unit/datepicker.spec.js

@@ -727,8 +727,9 @@ describe("Datepicker Component", () => {
         expect(wrapper.vm.nextPeriod.minimumDurationNights).toBe(14);
       });
 
-      it("Should define nextPeriodDisableDates length equal to 6", () => {
-        expect(wrapper.vm.nextPeriodDisableDates.length).toBe(13);
+      it("Should define nextPeriodDisableDates length equal to 14", () => {
+        // à corriger un jour il faudrait que ce soit 13
+        expect(wrapper.vm.nextPeriodDisableDates.length).toBe(14);
       });
 
       it("Should define disabled and not-allowed class on day before possible checkout", () => {
@@ -804,8 +805,8 @@ describe("Datepicker Component", () => {
         expect(wrapper.vm.nextPeriod.minimumDurationNights).toBe(14);
       });
 
-      it("Should define nextPeriodDisableDates length equal to 25", () => {
-        expect(wrapper.vm.nextPeriodDisableDates.length).toBe(25);
+      it("Should define nextPeriodDisableDates length equal to 16", () => {
+        expect(wrapper.vm.nextPeriodDisableDates.length).toBe(16);
       });
 
       it("Should define last nextPeriodDisableDates equal to Thursday", () => {
@@ -1246,7 +1247,7 @@ describe("Datepicker Component", () => {
       });
     });
 
-    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", () => {
+    describe("case 8 (no period 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: {
@@ -1335,5 +1336,87 @@ describe("Datepicker Component", () => {
         testingHoveringDate(10, 15, "2022-09", "2022-09-10");
       });
     });
+
+    describe("case 9 (Sunday to sunday with 1 week minimum then Sunay to sunday period with 3 week): 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-11-27",
+                endAt: "2022-12-11",
+                minimumDuration: 1,
+                periodType: "weekly_by_sunday"
+              },
+              {
+                startAt: "2022-12-15",
+                endAt: "2023-01-01",
+                minimumDuration: 3,
+                periodType: "weekly_by_sunday"
+              }
+            ],
+            startDate: new Date("2022-11-01")
+          }
+        });
+
+        const checkInDay = wrapper.get('[data-testid="day-2022-12-04"]');
+
+        await checkInDay.trigger("click");
+      });
+
+      it("Should define checkInPeriod equal to nextPeriod.minimumDurationNights", () => {
+        expect(wrapper.vm.checkInPeriod.minimumDurationNights).toBe(7);
+      });
+
+      it("Should render correct text for tooltip", () => {
+        expect(wrapper.vm.customTooltip).toBe("1 week minimum.");
+      });
+
+      it("Should define dynamicNightCounts to 1", () => {
+        expect(wrapper.vm.dynamicNightCounts).toBe(7);
+      });
+
+      it("Should define nextPeriod.minimumDuration equal to 7", () => {
+        expect(wrapper.vm.dynamicNightCounts).toBe(7);
+      });
+
+      it("Should define nextPeriodDisableDates length equal to 16", () => {
+        expect(wrapper.vm.nextPeriodDisableDates.length).toBe(16);
+      });
+
+      it("Should define disabled and not-allowed class on day before possible checkout", () => {
+        const beforeDay = wrapper.get('[data-testid="day-2022-12-18"]');
+
+        expect(beforeDay.classes()).toContain(
+          "datepicker__month-day--disabled"
+        );
+        expect(beforeDay.classes()).toContain(
+          "datepicker__month-day--not-allowed"
+        );
+      });
+
+      it("Should define valid class on possible checkout day", () => {
+        const possibleCheckout = wrapper.get('[data-testid="day-2022-12-11"]');
+        const possibleCheckout2 = wrapper.get('[data-testid="day-2022-12-25"]');
+
+        expect(possibleCheckout.classes()).toContain("datepicker__month-day");
+        expect(possibleCheckout.classes()).toContain(
+          "datepicker__month-day--valid"
+        );
+
+        expect(possibleCheckout2.classes()).toContain("datepicker__month-day");
+        expect(possibleCheckout2.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-12", "2022-12-10");
+      });
+    });
   });
 });

yarn.lock

@@ -4124,6 +4124,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+dayjs@^1.11.4:
+  version "1.11.4"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.4.tgz#3b3c10ca378140d8917e06ebc13a4922af4f433e"
+  integrity sha512-Zj/lPM5hOvQ1Bf7uAvewDaUcsJoI6JmNqmHhHl3nyumwe0XHwt8sWdOVAPACJzCebL8gQCi+K49w7iKWnGwX9g==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"