playbook_ui 12.39.0.pre.alpha.salesbookmismatchingdate1114 → 12.39.0.pre.alpha.salesbookmismatchingdate1117

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 53e1efed14125432de973864540db434bd15d7ca728af5bfd7facb459c42f3a5
-  data.tar.gz: 8ea21f9bdf376162e82ab98a9d14b3f186e8438d81a979faa663ffad1f3b57f7
+  metadata.gz: 6650ac3fb53a1c1a6d57ea4d4c08d61741e60c7aedd7149994b5f6a239a669e5
+  data.tar.gz: 0b0a15f6fe4e1d400bc78b5b74638c3ac6be8c9ef0804773edde1a3711fef286
 SHA512:
-  metadata.gz: 5b78591f4053df9f189134735a3689c5e010f823220d0217c65f222240a1aed961f8cdb79df3f91e771f7336717031dfd2594064388e3f9478549d0281f78724
-  data.tar.gz: 93d06173adcc6db7672b2580de009a31d530c0135802524b0d5514d09939737230c38dd845f47c862a9be503eb6c42916372498afc5481d54f7c2afe495f6644
+  metadata.gz: 5eb5a4c90549d5f7f4dafb4455ff212573749b54c9734b09daa79a6a2d924587b820a8883fc6e340e31571515b935476e872344207b6e88b7be4f98ac1f25815
+  data.tar.gz: 8986120162f91c579c0574dd70ef13fb0bc190b687548edd456b33e2d9ff4447c9b122bf431719376390a2dc49e21d6c8714c4b53da362204b908b01ccd2b3d0

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -1,16 +1,26 @@
 /* eslint-disable no-console */
 import React from 'react'
-import moment from 'moment'
 import { fireEvent, render, screen, waitFor, within } from '../utilities/test-utils'
 
 import DatePicker from './_date_picker'
+import DateTime from "../pb_kit/dateTime.ts"
 import { getTimezoneText } from './plugins/timeSelect'
 
-
-
 jest.setSystemTime(new Date('01/01/2020'));
 const DEFAULT_DATE = new Date()
 
+const formatDate = (date) => {
+  const month = (date.getMonth() + 1).toString().padStart(2, "0")
+  const day = (date.getDate()).toString().padStart(2, "0")
+  const year = date.getFullYear()
+
+  return `${month}/${day}/${year}`
+}
+
+Date.prototype.formatDate = function () {
+  return formatDate(this)
+}
+
 describe('DatePicker Kit', () => {
   beforeEach(() => {
     jest.spyOn(console, 'error').mockImplementation(() => { });
@@ -158,6 +168,7 @@ describe('DatePicker Kit', () => {
       expect(input).toHaveValue('01/01/2020 at 12:00 PM')
     })
   })
+
   test('shows DatePicker QuickPick dropdown and adds correct date to input', async () => {
     const testId = 'datepicker-quick-pick'
     render(
@@ -197,10 +208,10 @@ describe('DatePicker Kit', () => {
     )
 
     await waitFor(() => {
-      expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " to " + moment().endOf('year').format('MM/DD/YYYY'))
+      expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + DateTime.getYearEndDate(new Date()).formatDate())
     })
-
   })
+
   test('shows DatePicker QuickPick ranges ending today', async () => {
     const testId = 'datepicker-quick-pick-ends-today'
     render(
@@ -225,7 +236,7 @@ describe('DatePicker Kit', () => {
         cancelable: true,
       }),
     )
-    
+
     const thisYear = within(kit).getByText('This year')
 
     fireEvent(
@@ -237,8 +248,7 @@ describe('DatePicker Kit', () => {
     )
 
     await waitFor(() => {
-      expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " to " + moment().format('MM/DD/YYYY'))
+      expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + new Date().formatDate())
     })
-
   })
 })

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -1,4 +1,4 @@
-import moment from 'moment'
+import DateTime from '../../pb_kit/dateTime';
 
 type FpTypes = {
   setDate: (arg0: any, arg1: boolean) => void,
@@ -23,37 +23,44 @@ let activeLabel = ""
 
 const quickPickPlugin = (thisRangesEndToday: boolean) => {
   return function (fp: FpTypes & any): any {
-    const thisWeekEndDate = thisRangesEndToday ? new Date() : moment().endOf('isoWeek').toDate()
-    const thisMonthEndDate = thisRangesEndToday ? new Date() : moment().endOf('month').toDate()
-    const thisQuarterEndDate = thisRangesEndToday ? new Date() : moment().endOf('quarter').toDate()
-    const thisYearEndDate = thisRangesEndToday ? new Date() : moment().endOf('year').toDate()
+    const today = new Date()
+    const yesterday = DateTime.getYesterdayDate(new Date())
+
+    const thisWeekStartDate = DateTime.getFirstDayOfWeek(new Date())
+    const thisWeekEndDate = thisRangesEndToday ? new Date() : DateTime.getLastDayOfWeek(new Date())
+    const lastWeekStartDate = DateTime.getPreviousWeekStartDate(new Date())
+    const lastWeekEndDate = DateTime.getPreviousWeekEndDate(new Date())
+
+    const thisMonthStartDate = DateTime.getMonthStartDate(new Date())
+    const thisMonthEndDate = thisRangesEndToday ? new Date() : DateTime.getMonthEndDate(new Date())
+    const lastMonthStartDate = DateTime.getPreviousMonthStartDate(new Date())
+    const lastMonthEndDate = DateTime.getPreviousMonthEndDate(new Date())
+
+    const thisQuarterStartDate = DateTime.getQuarterStartDate(new Date())
+    const thisQuarterEndDate = thisRangesEndToday ? new Date() : DateTime.getQuarterEndDate(new Date())
+    const lastQuarterStartDate = DateTime.getPreviousQuarterStartDate(new Date())
+    const lastQuarterEndDate = DateTime.getPreviousQuarterEndDate(new Date())
+
+    const thisYearStartDate = DateTime.getYearStartDate(new Date())
+    const thisYearEndDate = thisRangesEndToday ? new Date() : DateTime.getYearEndDate(new Date())
+    const lastYearStartDate = DateTime.getPreviousYearStartDate(new Date())
+    const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date())
 
     // variable that holds the ranges available
     const ranges = {
-      'Today': [new Date(), new Date()],
-      'Yesterday': [moment().subtract(1, 'days').toDate(), moment().subtract(1, 'days').toDate()],
-      'This week': [moment().startOf('isoWeek').toDate(), thisWeekEndDate],
-      'This month': [moment().startOf('month').toDate(), thisMonthEndDate],
-      'This quarter': [moment().startOf('quarter').toDate(), thisQuarterEndDate],
-      'This year': [moment().startOf('year').toDate(), thisYearEndDate],
-      'Last week': [
-        moment().subtract(1, 'week').startOf('isoWeek').toDate(),
-        moment().subtract(1, 'week').endOf('isoWeek').toDate()
-      ],
-      'Last month': [
-        moment().subtract(1, 'month').startOf('month').toDate(),
-        moment().subtract(1, 'month').endOf('month').toDate()
-      ],
-      'Last quarter': [
-        moment().subtract(1, 'quarter').startOf('quarter').toDate(),
-        moment().subtract(1, 'quarter').endOf('quarter').toDate()
-      ],
-      'Last year': [
-        moment().subtract(1, 'year').startOf('year').toDate(),
-        moment().subtract(1, 'year').endOf('year').toDate()
-      ]
+      'Today': [today, today],
+      'Yesterday': [yesterday, yesterday],
+      'This week': [thisWeekStartDate, thisWeekEndDate],
+      'This month': [thisMonthStartDate, thisMonthEndDate],
+      'This quarter': [thisQuarterStartDate, thisQuarterEndDate],
+      'This year': [thisYearStartDate, thisYearEndDate],
+      'Last week': [lastWeekStartDate, lastWeekEndDate],
+      'Last month': [lastMonthStartDate, lastMonthEndDate],
+      'Last quarter': [lastQuarterStartDate, lastQuarterEndDate],
+      'Last year': [lastYearStartDate, lastYearEndDate]
     }
-    //creating the ul element for the nav dropdown and giving it classnames
+
+    // creating the ul element for the nav dropdown and giving it classnames
     const rangesNav = document.createElement('ul');
 
     // creating the pluginData object that will hold the properties of this plugin
@@ -64,11 +71,11 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
     };
 
     /**
-   *    @param {string} label
-   *    @returns HTML Element
-   */
+      * @param {string} label
+      * @returns HTML Element
+      */
 
-    //function for creating the range buttons in the nav
+    // function for creating the range buttons in the nav
     const addRangeButton = (label: string) => {
 
       // creating new elements to mimick selectable card component
@@ -88,7 +95,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
       // append the li item to the ul rangeNav prop
       pluginData.rangesNav.appendChild(item);
 
-      // return the ranges buton prop
+      // return the ranges button prop
       return pluginData.rangesButtons[label];
     };
 
@@ -98,7 +105,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
       if (current) {
         current.classList.remove('active');
       }
-     
+
       if (selectedDates.length > 0 && activeLabel) {
         pluginData.rangesButtons[activeLabel].classList.add('active');
       }
@@ -109,16 +116,15 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
         selectedDates[1].toDateString() === pluginData.ranges[activeLabel][1].toDateString()
     }
 
-
     return {
-      // onReady is a hook from flatpickr that runs when calender is in a ready state
+      // onReady is a hook from flatpickr that runs when calendar is in a ready state
       onReady(selectedDates: Array<Date>) {
         // loop through the ranges and create an anchor tag for each range and add an event listener to set the date when user clicks on a date range
         for (const [label, range] of Object.entries(pluginData.ranges)) {
           addRangeButton(label).addEventListener('click', function () {
 
-            const start = moment(range[0]).toDate();
-            const end = moment(range[1]).toDate();
+            const start = new Date(range[0]);
+            const end = new Date(range[1]);
 
             if (!start) {
               fp.clear();
@@ -170,4 +176,4 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
   };
 }
 
-export default quickPickPlugin;
+export default quickPickPlugin;

data/app/pb_kits/playbook/pb_kit/dateTime.ts

@@ -71,13 +71,13 @@ export const toMonthNum = (newDate: Date | string): number => {
 }
 
 export const toYear = (newDate: Date | string, timeZone?: string): number => {
-    if (timeZone) {
-      const date = new Date(formatDate(newDate).toLocaleString(undefined, { timeZone }));
-      return date.getFullYear()
-    } else {
-      const date = formatDate(newDate)
-      return date.getFullYear()
-    }
+  if (timeZone) {
+    const date = new Date(formatDate(newDate).toLocaleString(undefined, { timeZone }));
+    return date.getFullYear()
+  } else {
+    const date = formatDate(newDate)
+    return date.getFullYear()
+  }
 }
 
 export const toTime = (newDate: Date | string, timeZone?: string): string => {
@@ -121,11 +121,12 @@ export const toIso = (newDate: Date | string): string => {
 }
 
 export const fromNow = (newDate: Date | string): string => {
-
   const startDate = formatDate(newDate).getTime()
   const endDate = new Date().getTime()
   const elapsedTime = endDate - startDate
-  let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago.`; // 730+ days
+  let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago`; // 730+ days
+
+  const MILLISECONDS_IN_A_MONTH = 30.44 * 24 * 60 * 60 * 1000
 
   const elapsedTimeData = [
     { min: 0, max: 44999, value: "a few seconds ago" }, // 0-44 seconds
@@ -136,7 +137,7 @@ export const fromNow = (newDate: Date | string): string => {
     { min: 75700000, max: 172899999, value: "a day ago" }, // 22-48 hours
     { min: 172900000, max: 2169999999, value: `${Math.round(elapsedTime / 86400000)} days ago`}, // 2-25 days
     { min: 2170000000, max: 5184999999, value: "a month ago"}, // 26-60 days
-    { min: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / 30.44 * 24 * 60 * 60 * 1000)} months ago`}, // 60-319 days
+    { min: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_MONTH)} months ago`}, // 60-319 days
     { min: 27561700000, max: 63072999999, value: "a year ago"}, // 320-730 days
   ];
 
@@ -159,6 +160,193 @@ export const toCustomFormat = (newDate: Date | string, format = 'month_day'): st
   }
 }
 
+// For quickPick.tsx
+// Yesterday
+export const getYesterdayDate = (newDate: Date | string): Date => {
+  const today = formatDate(newDate)
+  const yesterday = new Date()
+  yesterday.setDate(today.getDate() - 1)
+
+  return yesterday
+}
+
+// Weeks
+export const getFirstDayOfWeek = (newDate: Date | string): Date => {
+  const today = formatDate(newDate)
+  const dayOfWeek = today.getDay()
+  // Replicate Moment.js: Start of week (Monday) has a time of 00:00:00
+  const firstDayOfWeek = new Date(today.setHours(0, 0, 0))
+  const isSunday = dayOfWeek === 0
+
+  const daysToSubtract = isSunday ? 6 : (dayOfWeek - 1)
+  firstDayOfWeek.setDate(today.getDate() - daysToSubtract)
+
+  return firstDayOfWeek
+}
+
+export const getLastDayOfWeek = (newDate: Date | string): Date => {
+  const today = formatDate(newDate)
+  const dayOfWeek = today.getDay()
+  // Replicate Moment.js: End of week (Sunday) has a time of 23:59:59
+  const lastDayOfWeek = new Date(today.setHours(23, 59, 59, 0))
+  const isSunday = dayOfWeek === 0
+
+  const daysToAdd = isSunday ? 0 : (7 - dayOfWeek)
+  lastDayOfWeek.setDate(today.getDate() + daysToAdd)
+
+  return lastDayOfWeek
+}
+
+export const getPreviousWeekStartDate = (newDate: Date | string): Date => {
+  const firstDayOfWeek = getFirstDayOfWeek(newDate)
+  const firstDayOfPreviousWeek = new Date(
+    firstDayOfWeek.getFullYear(),
+    firstDayOfWeek.getMonth(),
+    firstDayOfWeek.getDate() - 7
+  )
+
+  return firstDayOfPreviousWeek
+}
+
+export const getPreviousWeekEndDate = (newDate: Date | string): Date => {
+  const lastDayOfWeek = getLastDayOfWeek(newDate)
+  const lastDayOfPreviousWeek = new Date(
+    lastDayOfWeek.getFullYear(),
+    lastDayOfWeek.getMonth(),
+    lastDayOfWeek.getDate() - 7,
+    lastDayOfWeek.getHours(),
+    lastDayOfWeek.getMinutes(),
+    lastDayOfWeek.getSeconds()
+  )
+
+  return lastDayOfPreviousWeek
+}
+
+// Months
+export const getMonthStartDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1)
+
+  return firstDayOfMonth
+}
+
+export const getMonthEndDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  // Replicate Moment.js: End of month has a time of 23:59:59
+  const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0, 23, 59, 59)
+
+  return lastDayOfMonth
+}
+
+export const getPreviousMonthStartDate = (newDate: Date | string): Date => {
+  const firstDayOfMonth = getMonthStartDate(newDate)
+  const firstDayOfPreviousMonth = new Date(
+    firstDayOfMonth.getFullYear(),
+    firstDayOfMonth.getMonth() - 1,
+    firstDayOfMonth.getDate()
+  )
+
+  return firstDayOfPreviousMonth
+}
+
+export const getPreviousMonthEndDate = (newDate: Date | string): Date => {
+  const lastDayOfMonth = getMonthEndDate(newDate)
+  const lastDayOfPreviousMonth = new Date(
+    lastDayOfMonth.getFullYear(),
+    lastDayOfMonth.getMonth() - 1,
+    lastDayOfMonth.getDate(),
+    lastDayOfMonth.getHours(),
+    lastDayOfMonth.getMinutes(),
+    lastDayOfMonth.getSeconds()
+  )
+
+  return lastDayOfPreviousMonth
+}
+
+// Quarters
+export const getQuarterStartDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const quarter = Math.floor(date.getMonth() / 3)
+  const startOfQuarter = new Date(date.getFullYear(), quarter * 3, 1)
+
+  return startOfQuarter
+}
+
+export const getQuarterEndDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const quarter = Math.floor(date.getMonth() / 3)
+  const startOfNextQuarter = new Date(date.getFullYear(), (quarter + 1) * 3, 1)
+  // Replicate Moment.js: End of quarter has a time of 23:59:59
+  const endOfQuarter = new Date(startOfNextQuarter.getTime() - 1)
+
+  return endOfQuarter
+}
+
+export const getPreviousQuarterStartDate = (newDate: Date | string): Date => {
+  const startOfQuarter = getQuarterStartDate(newDate)
+  const firstDayOfPreviousQuarter = new Date(
+    startOfQuarter.getFullYear(),
+    startOfQuarter.getMonth() - 3,
+    startOfQuarter.getDate()
+  )
+
+  return firstDayOfPreviousQuarter
+}
+
+export const getPreviousQuarterEndDate = (newDate: Date | string): Date => {
+  const endOfQuarter = getQuarterEndDate(newDate)
+  const lastDayOfPreviousQuarter = new Date(
+    endOfQuarter.getFullYear(),
+    endOfQuarter.getMonth() - 3,
+    endOfQuarter.getDate(),
+    endOfQuarter.getHours(),
+    endOfQuarter.getMinutes(),
+    endOfQuarter.getSeconds()
+  )
+
+  return lastDayOfPreviousQuarter
+}
+
+// Years
+export const getYearStartDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const startOfYear = new Date(date.getFullYear(), 0, 1)
+
+  return startOfYear
+}
+
+export const getYearEndDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const endOfYear = new Date(date.getFullYear(), 11, 31, 23, 59, 59)
+
+  return endOfYear
+}
+
+export const getPreviousYearStartDate = (newDate: Date | string): Date => {
+  const startOfYear = getYearStartDate(newDate)
+  const firstDayOfPreviousYear = new Date(
+    startOfYear.getFullYear() - 1,
+    startOfYear.getMonth(),
+    startOfYear.getDate()
+  )
+
+  return firstDayOfPreviousYear
+}
+
+export const getPreviousYearEndDate = (newDate: Date | string): Date => {
+  const endOfYear = getYearEndDate(newDate)
+  const lastDayOfPreviousYear = new Date(
+    endOfYear.getFullYear() - 1,
+    endOfYear.getMonth(),
+    endOfYear.getDate(),
+    endOfYear.getHours(),
+    endOfYear.getMinutes(),
+    endOfYear.getSeconds()
+  )
+
+  return lastDayOfPreviousYear
+}
+
 export default {
   toMinute,
   toHour,
@@ -175,4 +363,21 @@ export default {
   toIso,
   fromNow,
   toCustomFormat,
+  getYesterdayDate,
+  getFirstDayOfWeek,
+  getLastDayOfWeek,
+  getPreviousWeekStartDate,
+  getPreviousWeekEndDate,
+  getMonthStartDate,
+  getMonthEndDate,
+  getPreviousMonthStartDate,
+  getPreviousMonthEndDate,
+  getQuarterStartDate,
+  getQuarterEndDate,
+  getPreviousQuarterStartDate,
+  getPreviousQuarterEndDate,
+  getYearStartDate,
+  getYearEndDate,
+  getPreviousYearStartDate,
+  getPreviousYearEndDate
 }