feature/20929 refactor and move date picker and moment

cypress/integration/messages/datePicker.spec.ts

@@ -1,6 +1,7 @@
 /// <reference path="../../support/index.d.ts" />
 
-import * as moment from "moment"
+import * as moment from "moment";
+import { formatDate, transformNamedDate } from "../../../src/plugins/date-picker/utils";
 
 describe("Date Picker", () => {
     beforeEach(() => {
@@ -44,10 +45,70 @@ describe("Date Picker", () => {
             cy
                 .contains("foobar012b3").click();
 
-						// Our default locale for english is "en-US"
-						const formattedDate = moment().format("MM/DD/YYYY");
+            // Our default locale for english is "en-US"
+            const formattedDate = moment().format("MM/DD/YYYY");
             cy.get(".regular-message.user").contains(formattedDate);
         })
     })
 
+    it("should format all dates with Intl the way Moment did", () => {
+
+        const date = new Date();
+
+        const newFormatedDateAu = formatDate(date, false, 'en-AU');
+        const newFormatedDateGb = formatDate(date, false, 'en-GB');
+        const newFormatedDateCa = formatDate(date, false, 'en-CA');
+        const newFormatedDateUs = formatDate(date, false, 'en');
+
+        const oldFormatedDateAu = moment(date).locale('en-AU').format('L');
+        const oldFormatedDateGb = moment(date).locale('en-GB').format('L');
+        const oldFormatedDateCa = moment(date).locale('en-CA').format('L');
+        const oldFormatedDateUs = moment(date).locale('en').format('L');
+
+        const newFormatedDateTimeAu = formatDate(date, true, 'en-AU');
+        const newFormatedDateTimeGb = formatDate(date, true, 'en-GB');
+        const newFormatedDateTimeCa = formatDate(date, true, 'en-CA');
+        const newFormatedDateTimeUs = formatDate(date, true, 'en');
+
+        const oldFormatedDateTimeAu = moment(date).locale('en-AU').format('L LT');
+        const oldFormatedDateTimeGb = moment(date).locale('en-GB').format('L LT');
+        const oldFormatedDateTimeCa = moment(date).locale('en-CA').format('L LT');
+        const oldFormatedDateTimeUs = moment(date).locale('en').format('L LT');
+
+        expect(newFormatedDateAu, "Date format shouldn't change for en-AU").to.be.equal(oldFormatedDateAu);
+        expect(newFormatedDateGb, "Date format shouldn't change for en-GB").to.be.equal(oldFormatedDateGb);
+        expect(newFormatedDateCa, "Date format shouldn't change for en-CA").to.be.equal(oldFormatedDateCa);
+        expect(newFormatedDateUs, "Date format shouldn't change for en").to.be.equal(oldFormatedDateUs);
+
+        expect(newFormatedDateTimeAu, "Date and time format shouldn't change for en-AU").to.be.equal(oldFormatedDateTimeAu);
+        expect(newFormatedDateTimeGb, "Date and time format shouldn't change for en-GB").to.be.equal(oldFormatedDateTimeGb);
+        expect(newFormatedDateTimeCa, "Date and time format shouldn't change for en-CA").to.be.equal(oldFormatedDateTimeCa);
+        expect(newFormatedDateTimeUs, "Date and time format shouldn't change for en").to.be.equal(oldFormatedDateTimeUs);
+    })
+
+    it("should display all formatted dates with Intl the way Moment did", () => {
+
+        const date = new Date();
+
+        const transformNamedDateOld = (namedDate: string) => {
+            switch (namedDate) {
+                case "today":
+                    return moment().format('YYYY-MM-DD');
+
+                case "tomorrow":
+                    return moment().add(1, 'days').format('YYYY-MM-DD');
+
+                case "yesterday":
+                    return moment().add(-1, 'days').format('YYYY-MM-DD');
+            }
+
+            return namedDate;
+        };
+
+        expect(transformNamedDate(date.toString()), "Current time format shouldn't have changed").to.be.equal(transformNamedDateOld(date.toString()));
+        expect(transformNamedDate('today'), "Time format for 'today' shouldn't have changed").to.be.equal(transformNamedDateOld('today'));
+        expect(transformNamedDate('tomorrow'), "Time format for 'tomorrow' shouldn't have changed").to.be.equal(transformNamedDateOld('tomorrow'));
+        expect(transformNamedDate('yesterday'), "Time format for 'yesterday' shouldn't have changed").to.be.equal(transformNamedDateOld('yesterday'));
+    })
+
 })

package.json

@@ -43,11 +43,11 @@
     "flatpickr": "4.6.3",
     "immutable": "^4.0.0-rc.12",
     "lodash": "^4.17.21",
-    "moment": "^2.24.0",
     "path-parse": "^1.0.7",
     "react": "^17.0.2",
     "react-animate-height": "^2.0.23",
     "react-dom": "^17.0.2",
+    "react-flatpickr": "^3.10.7",
     "react-player": "^2.9.0",
     "react-redux": "^7.2.6",
     "react-responsive-carousel": "^3.2.22",
@@ -87,6 +87,7 @@
     "es-check": "^6.1.1",
     "http-server": "^0.13.0",
     "idempotent-babel-polyfill": "^7.4.4",
+    "moment": "^2.29.1",
     "npm-run-all": "^4.1.5",
     "react-svg-loader": "^3.0.3",
     "redux-devtools-extension": "^2.13.8",
@@ -105,4 +106,4 @@
     "whatwg-fetch": "^3.6.2",
     "zlib": "^1.0.5"
   }
-}
+}