@quillsql/admin 1.6.1 → 1.6.2

package/dist/esm/components/DateRangePicker/dateRangePickerUtils.js

@@ -0,0 +1,883 @@
+import { addDays, differenceInDays, endOfDay, endOfToday, format, isEqual, isToday, max, min, set, startOfDay, startOfToday, startOfWeek, sub, } from 'date-fns';
+export const getWeekdays = (locale) => {
+    const firstDayOfWeek = startOfWeek(new Date());
+    return Array.from(Array(7)).map((e, i) => format(addDays(firstDayOfWeek, i), 'EEEEEE', { locale }));
+};
+export const capitalize = (s, locale) => {
+    return s.charAt(0).toLocaleUpperCase(locale.code) + s.substring(1);
+};
+export const getStartDateByDropdownValue = (dropdownValue, dropdownOptions) => {
+    if (!dropdownOptions) {
+        return null;
+    }
+    const startDate = dropdownOptions.find((option) => option.value === dropdownValue)?.startDate ?? null;
+    return startDate ? startOfDay(startDate) : null;
+};
+export const getEndDateByDropdownValue = (dropdownValue, dropdownOptions) => {
+    if (!dropdownOptions) {
+        return startOfToday();
+    }
+    return startOfDay(dropdownOptions.find((option) => option.value === dropdownValue)?.endDate ?? startOfToday());
+};
+export const parseStartDate = (startDate, minDate, selectedDropdownValue, dropdownOptions) => {
+    if (selectedDropdownValue) {
+        startDate = getStartDateByDropdownValue(selectedDropdownValue, dropdownOptions);
+    }
+    if (!startDate)
+        return null;
+    if (startDate && !minDate)
+        return startOfDay(startDate);
+    return startOfDay(max([startDate, minDate]));
+};
+export const parseEndDate = (endDate, maxDate, selectedDropdownValue, dropdownOptions) => {
+    if (selectedDropdownValue) {
+        endDate = getEndDateByDropdownValue(selectedDropdownValue, dropdownOptions);
+    }
+    if (!endDate)
+        return null;
+    if (endDate && !maxDate)
+        return startOfDay(endDate);
+    return startOfDay(min([endDate, maxDate]));
+};
+export const primaryRangeCustomIntervals = [
+    {
+        type: 'week',
+    },
+    {
+        type: 'repeating',
+        label: 'Month',
+        loopDate: { day: 1, month: 1 },
+        subIntervals: [
+            {
+                type: 'static',
+                label: 'January',
+                startDate: { day: 1, month: 1 },
+                endDate: { day: 31, month: 1 },
+            },
+            {
+                type: 'static',
+                label: 'February',
+                startDate: { day: 1, month: 2 },
+                endDate: { day: 29, month: 2 },
+            },
+            {
+                type: 'static',
+                label: 'March',
+                startDate: { day: 1, month: 3 },
+                endDate: { day: 31, month: 3 },
+            },
+            {
+                type: 'static',
+                label: 'April',
+                startDate: { day: 1, month: 4 },
+                endDate: { day: 30, month: 4 },
+            },
+            {
+                type: 'static',
+                label: 'May',
+                startDate: { day: 1, month: 5 },
+                endDate: { day: 31, month: 5 },
+            },
+            {
+                type: 'static',
+                label: 'June',
+                startDate: { day: 1, month: 6 },
+                endDate: { day: 30, month: 6 },
+            },
+            {
+                type: 'static',
+                label: 'July',
+                startDate: { day: 1, month: 7 },
+                endDate: { day: 31, month: 7 },
+            },
+            {
+                type: 'static',
+                label: 'August',
+                startDate: { day: 1, month: 8 },
+                endDate: { day: 31, month: 8 },
+            },
+            {
+                type: 'static',
+                label: 'September',
+                startDate: { day: 1, month: 9 },
+                endDate: { day: 30, month: 9 },
+            },
+            {
+                type: 'static',
+                label: 'October',
+                startDate: { day: 1, month: 10 },
+                endDate: { day: 31, month: 10 },
+            },
+            {
+                type: 'static',
+                label: 'November',
+                startDate: { day: 1, month: 11 },
+                endDate: { day: 30, month: 11 },
+            },
+            {
+                type: 'static',
+                label: 'December',
+                startDate: { day: 1, month: 12 },
+                endDate: { day: 31, month: 12 },
+            },
+        ],
+    },
+    {
+        type: 'repeating',
+        label: 'Year',
+        loopDate: { day: 1, month: 1 },
+        subIntervals: [
+            {
+                type: 'static',
+                label: 'year',
+                startDate: { day: 1, month: 1 },
+                endDate: { day: 31, month: 12 },
+            },
+        ],
+    },
+    {
+        type: 'relative',
+        value: 7,
+        unit: 'days',
+    },
+    {
+        type: 'relative',
+        value: 30,
+        unit: 'days',
+    },
+    {
+        type: 'relative',
+        value: 90,
+        unit: 'days',
+    },
+    {
+        type: 'relative',
+        value: 6,
+        unit: 'months',
+    },
+    {
+        type: 'relative',
+        value: 1,
+        unit: 'years',
+    },
+];
+const adjustForLeapYear = (date) => {
+    if (date.month === 2 && date.day === 29) {
+        const year = new Date().getFullYear();
+        if (!((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0)) {
+            date.day = 28;
+        }
+    }
+    return date;
+};
+const getLabelForCustomInterval = (interval) => {
+    switch (interval.type) {
+        case 'week':
+            return 'This week';
+        case 'static':
+            return interval.label ?? 'Custom';
+        case 'relative':
+            return (interval.label ??
+                `Last ${interval.value === 1 ? '' : interval.value + ' '}${interval.value === 1 ? interval.unit.slice(0, -1) : interval.unit}`);
+        case 'repeating':
+            return 'This ' + interval.label.toLowerCase();
+    }
+};
+const convertCustomIntervalToDateRange = (interval) => {
+    switch (interval.type) {
+        case 'week':
+            return { startDate: startOfWeek(startOfToday()), endDate: endOfToday() };
+        case 'static': {
+            const startDate = adjustForLeapYear(interval.startDate);
+            const endDate = adjustForLeapYear(interval.endDate);
+            return {
+                startDate: set(new Date(), {
+                    month: (startDate.month ?? 1) - 1,
+                    date: startDate.day,
+                    minutes: 0,
+                    hours: 0,
+                    seconds: 0,
+                }),
+                endDate: set(new Date(), {
+                    month: (endDate.month ?? 1) - 1,
+                    date: endDate.day,
+                    minutes: 59,
+                    hours: 23,
+                    seconds: 59,
+                }),
+            };
+        }
+        case 'relative':
+            return {
+                startDate: sub(startOfToday(), { [interval.unit]: interval.value }),
+                endDate: endOfToday(),
+            };
+        case 'repeating': {
+            // Find the subInterval the current date falls within
+            const currentMonth = new Date().getMonth() + 1;
+            const currentDay = new Date().getDate();
+            const currentSubInterval = interval.subIntervals.find((subInterval) => subInterval.startDate.month <= currentMonth &&
+                subInterval.endDate.month >= currentMonth &&
+                subInterval.startDate.day <= currentDay &&
+                subInterval.endDate.day >= currentDay);
+            if (!currentSubInterval) {
+                throw new Error('Date is not valid in this interval');
+            }
+            const startDate = adjustForLeapYear(currentSubInterval.startDate);
+            // const endDate = adjustForLeapYear(currentSubInterval.endDate);
+            return {
+                startDate: set(new Date(), {
+                    month: (startDate.month ?? 1) - 1,
+                    date: startDate.day,
+                    minutes: 0,
+                    hours: 0,
+                    seconds: 0,
+                }),
+                endDate: new Date(),
+            };
+        }
+    }
+};
+export const convertPresetOptionsToSelectableList = (customIntervals, defaultIntervals) => {
+    const defaultCustomIntervals = defaultIntervals.map((interval) => {
+        if (interval.label === 'This week') {
+            return {
+                type: 'week',
+            };
+        }
+        else if (interval.label === 'This month' ||
+            interval.label === 'Monthly') {
+            return {
+                type: 'repeating',
+                label: 'Month',
+                loopDate: { day: 1, month: 1 },
+                loopStart: interval.loopStart,
+                loopEnd: interval.loopEnd,
+                subIntervals: [
+                    {
+                        type: 'static',
+                        label: 'January',
+                        startDate: { day: 1, month: 1 },
+                        endDate: { day: 31, month: 1 },
+                    },
+                    {
+                        type: 'static',
+                        label: 'February',
+                        startDate: { day: 1, month: 2 },
+                        endDate: { day: 29, month: 2 },
+                    },
+                    {
+                        type: 'static',
+                        label: 'March',
+                        startDate: { day: 1, month: 3 },
+                        endDate: { day: 31, month: 3 },
+                    },
+                    {
+                        type: 'static',
+                        label: 'April',
+                        startDate: { day: 1, month: 4 },
+                        endDate: { day: 30, month: 4 },
+                    },
+                    {
+                        type: 'static',
+                        label: 'May',
+                        startDate: { day: 1, month: 5 },
+                        endDate: { day: 31, month: 5 },
+                    },
+                    {
+                        type: 'static',
+                        label: 'June',
+                        startDate: { day: 1, month: 6 },
+                        endDate: { day: 30, month: 6 },
+                    },
+                    {
+                        type: 'static',
+                        label: 'July',
+                        startDate: { day: 1, month: 7 },
+                        endDate: { day: 31, month: 7 },
+                    },
+                    {
+                        type: 'static',
+                        label: 'August',
+                        startDate: { day: 1, month: 8 },
+                        endDate: { day: 31, month: 8 },
+                    },
+                    {
+                        type: 'static',
+                        label: 'September',
+                        startDate: { day: 1, month: 9 },
+                        endDate: { day: 30, month: 9 },
+                    },
+                    {
+                        type: 'static',
+                        label: 'October',
+                        startDate: { day: 1, month: 10 },
+                        endDate: { day: 31, month: 10 },
+                    },
+                    {
+                        type: 'static',
+                        label: 'November',
+                        startDate: { day: 1, month: 11 },
+                        endDate: { day: 30, month: 11 },
+                    },
+                    {
+                        type: 'static',
+                        label: 'December',
+                        startDate: { day: 1, month: 12 },
+                        endDate: { day: 31, month: 12 },
+                    },
+                ],
+            };
+        }
+        else if (interval.label === 'This year' ||
+            interval.label === 'Yearly') {
+            return {
+                type: 'repeating',
+                label: 'Year',
+                loopDate: { day: 1, month: 1 },
+                loopStart: interval.loopStart,
+                loopEnd: interval.loopEnd,
+                subIntervals: [
+                    {
+                        type: 'static',
+                        label: 'year',
+                        startDate: { day: 1, month: 1 },
+                        endDate: { day: 31, month: 12 },
+                    },
+                ],
+            };
+        }
+        else if (interval.label === 'Last 7 days') {
+            return {
+                type: 'relative',
+                value: 7,
+                unit: 'days',
+            };
+        }
+        else if (interval.label === 'Last 30 days') {
+            return {
+                type: 'relative',
+                value: 30,
+                unit: 'days',
+            };
+        }
+        else if (interval.label === 'Last 90 days') {
+            return {
+                type: 'relative',
+                value: 90,
+                unit: 'days',
+            };
+        }
+        else if (interval.label === 'Last 6 months') {
+            return {
+                type: 'relative',
+                value: 6,
+                unit: 'months',
+            };
+        }
+        else {
+            throw new Error('Invalid interval');
+        }
+    });
+    return customIntervals?.length || defaultCustomIntervals?.length
+        ? (defaultCustomIntervals ?? [])
+            .concat(customIntervals ?? [])
+            .flatMap((option) => {
+            if (option.type === 'repeating' && option.loopStart) {
+                // Generate presets for each subinterval moving backward from the loopEnd ?? new Date() until the cutoff date
+                const presets = [];
+                let currentDate = endOfDay(option.loopEnd ?? new Date());
+                const cutoffDate = option.loopStart;
+                while (currentDate > cutoffDate) {
+                    const currentMonth = currentDate.getMonth() + 1;
+                    const currentDay = currentDate.getDate();
+                    const currentSubInterval = option.subIntervals.find((subInterval) => subInterval.startDate.month <= currentMonth &&
+                        subInterval.endDate.month >= currentMonth &&
+                        subInterval.startDate.day <= currentDay &&
+                        subInterval.endDate.day >= currentDay);
+                    if (!currentSubInterval) {
+                        return [];
+                    }
+                    // Make the label the name of the month + year or just year depending on the length of the interval
+                    const getLabelForSubInterval = (subInterval) => {
+                        if (subInterval.startDate.month === subInterval.endDate.month) {
+                            return `${currentDate.toLocaleString('default', { month: 'long' })} ${currentDate.getFullYear()}`;
+                        }
+                        else {
+                            return `${currentDate.getFullYear()}`;
+                        }
+                    };
+                    const currentYear = currentDate.getFullYear();
+                    presets.push({
+                        label: getLabelForSubInterval(currentSubInterval),
+                        value: getLabelForSubInterval(currentSubInterval)
+                            .toUpperCase()
+                            .replace(/ /g, '_') ?? '',
+                        startDate: set(new Date(), {
+                            year: currentYear,
+                            month: currentSubInterval.startDate.month - 1,
+                            date: currentSubInterval.startDate.day,
+                            minutes: 0,
+                            hours: 0,
+                            seconds: 0,
+                        }),
+                        endDate: set(new Date(), {
+                            year: currentYear,
+                            month: currentSubInterval.endDate.month - 1,
+                            date: currentSubInterval.endDate.day,
+                            minutes: 59,
+                            hours: 23,
+                            seconds: 59,
+                        }),
+                    });
+                    // Create a temporary date representing the start of the current interval
+                    const intervalStart = set(new Date(), {
+                        year: currentYear,
+                        month: currentSubInterval.startDate.month - 1,
+                        date: currentSubInterval.startDate.day,
+                    });
+                    // Subtract one day to get to the previous day
+                    currentDate = sub(intervalStart, { days: 1 });
+                }
+                return presets;
+            }
+            const dateRange = convertCustomIntervalToDateRange(option);
+            return [
+                {
+                    label: getLabelForCustomInterval(option),
+                    // Value is option label in uppercase with spaces replaced by underscores
+                    value: getLabelForCustomInterval(option)
+                        .toUpperCase()
+                        .replace(/ /g, '_') ?? '',
+                    startDate: dateRange.startDate,
+                    endDate: dateRange.endDate,
+                },
+            ];
+        })
+            .concat([
+            {
+                label: 'All time',
+                value: 'ALL_TIME',
+                startDate: undefined,
+                endDate: undefined,
+            },
+        ])
+        : defaultOptionsV2;
+};
+/**
+ * A simple map between the primary range key and the QuillDateRange for that
+ * key ending on today.
+ */
+export const PRIMARY_RANGE = {
+    // THIS_WEEK: { startDate: startOfWeek(startOfToday()), endDate: endOfToday() },
+    // THIS_MONTH: {
+    //   startDate: startOfMonth(startOfToday()),
+    //   endDate: endOfToday(),
+    // },
+    // THIS_YEAR: { startDate: startOfYear(startOfToday()), endDate: endOfToday() },
+    // LAST_7_DAYS: {
+    //   startDate: sub(startOfToday(), { days: 7 }),
+    //   endDate: endOfToday(),
+    // },
+    // LAST_30_DAYS: {
+    //   startDate: sub(startOfToday(), { days: 30 }),
+    //   endDate: endOfToday(),
+    // },
+    // LAST_90_DAYS: {
+    //   startDate: sub(startOfToday(), { days: 90 }),
+    //   endDate: endOfToday(),
+    // },
+    // LAST_6_MONTHS: {
+    //   startDate: sub(startOfToday(), { months: 6 }),
+    //   endDate: endOfToday(),
+    // },
+    THIS_WEEK: convertCustomIntervalToDateRange(primaryRangeCustomIntervals[0]),
+    THIS_MONTH: convertCustomIntervalToDateRange(primaryRangeCustomIntervals[1]),
+    THIS_YEAR: convertCustomIntervalToDateRange(primaryRangeCustomIntervals[2]),
+    LAST_7_DAYS: convertCustomIntervalToDateRange(primaryRangeCustomIntervals[3]),
+    LAST_30_DAYS: convertCustomIntervalToDateRange(primaryRangeCustomIntervals[4]),
+    LAST_90_DAYS: convertCustomIntervalToDateRange(primaryRangeCustomIntervals[5]),
+    LAST_6_MONTHS: convertCustomIntervalToDateRange(primaryRangeCustomIntervals[6]),
+    ALL_TIME: { startDate: undefined, endDate: undefined },
+};
+export const COMPARISON_OPTIONS = [
+    {
+        value: 'PREV_PERIOD',
+        text: 'Previous Period',
+    },
+    {
+        value: 'PREV_7_DAYS',
+        text: 'Previous 7 days',
+    },
+    {
+        value: 'PREV_30_DAYS',
+        text: 'Previous 30 days',
+    },
+    {
+        value: 'PREV_90_DAYS',
+        text: 'Previous 90 days',
+    },
+    {
+        value: 'NO_COMPARISON',
+        text: 'No comparison',
+    },
+];
+/**
+ * A helpful map between comparison range keys and a function that takes the
+ * start date of the primary range (which is also the end date for our
+ * comparison range) and returns a QuillDateRange based on that key and date.
+ */
+export const COMPARISON_RANGE = {
+    PREV_PERIOD: ({ startDate, endDate }) => ({
+        startDate: sub(startDate, { days: differenceInDays(endDate, startDate) }),
+        endDate: startDate,
+    }),
+    PREV_7_DAYS: ({ startDate }) => ({
+        startDate: sub(startDate, { days: 7 }),
+        endDate: startDate,
+    }),
+    PREV_30_DAYS: ({ startDate }) => ({
+        startDate: sub(startDate, { days: 30 }),
+        endDate: startDate,
+    }),
+    PREV_90_DAYS: ({ startDate }) => ({
+        startDate: sub(startDate, { days: 90 }),
+        endDate: startDate,
+    }),
+    NO_COMPARISON: () => null,
+};
+export const defaultOptionsV2 = [
+    {
+        value: 'THIS_WEEK',
+        label: 'This week',
+        startDate: PRIMARY_RANGE['THIS_WEEK']?.startDate,
+        endDate: PRIMARY_RANGE['THIS_WEEK']?.endDate,
+    },
+    {
+        value: 'THIS_MONTH',
+        label: 'This month',
+        startDate: PRIMARY_RANGE['THIS_MONTH']?.startDate,
+        endDate: PRIMARY_RANGE['THIS_MONTH']?.endDate,
+    },
+    {
+        value: 'THIS_YEAR',
+        label: 'This year',
+        startDate: PRIMARY_RANGE['THIS_YEAR']?.startDate,
+        endDate: PRIMARY_RANGE['THIS_YEAR']?.endDate,
+    },
+    {
+        value: 'LAST_7_DAYS',
+        label: 'Last 7 days',
+        startDate: PRIMARY_RANGE['LAST_7_DAYS']?.startDate,
+        endDate: PRIMARY_RANGE['LAST_7_DAYS']?.endDate,
+    },
+    {
+        value: 'LAST_30_DAYS',
+        label: 'Last 30 days',
+        startDate: PRIMARY_RANGE['LAST_30_DAYS']?.startDate,
+        endDate: PRIMARY_RANGE['LAST_30_DAYS']?.endDate,
+    },
+    {
+        value: 'LAST_90_DAYS',
+        label: 'Last 90 days',
+        startDate: PRIMARY_RANGE['LAST_90_DAYS']?.startDate,
+        endDate: PRIMARY_RANGE['LAST_90_DAYS']?.endDate,
+    },
+    {
+        value: 'LAST_6_MONTHS',
+        label: 'Last 6 months',
+        startDate: PRIMARY_RANGE['LAST_6_MONTHS']?.startDate,
+        endDate: PRIMARY_RANGE['LAST_6_MONTHS']?.endDate,
+    },
+    {
+        value: 'ALL_TIME',
+        label: 'All time',
+        startDate: PRIMARY_RANGE['ALL_TIME']?.startDate,
+        endDate: PRIMARY_RANGE['ALL_TIME']?.endDate,
+    },
+];
+export const reportBuilderOptions = [
+    {
+        value: 'w',
+        text: 'Last 7 days',
+        startDate: PRIMARY_RANGE['LAST_7_DAYS']?.startDate,
+        dayInterval: 7,
+    },
+    {
+        value: 't',
+        text: 'Last 30 days',
+        startDate: PRIMARY_RANGE['LAST_30_DAYS']?.startDate,
+        dayInterval: 30,
+    },
+    {
+        value: '90d',
+        text: 'Last 90 days',
+        startDate: PRIMARY_RANGE['LAST_90_DAYS']?.startDate,
+        dayInterval: 90,
+    },
+    {
+        value: '6m',
+        text: 'Last 6 months',
+        startDate: PRIMARY_RANGE['LAST_6_MONTHS']?.startDate,
+        dayInterval: 180,
+    },
+    {
+        value: 'at',
+        text: 'All time',
+        startDate: PRIMARY_RANGE['ALL_TIME']?.startDate,
+        dayInterval: 36500,
+    },
+];
+export const getRangeFromPresetOptions = (preset, presetOptions) => {
+    const foundPreset = presetOptions.find((elem) => elem.value === preset);
+    if (foundPreset) {
+        return { startDate: foundPreset?.startDate, endDate: foundPreset?.endDate };
+    }
+    else {
+        return { startDate: null, endDate: null };
+    }
+};
+export const getDateStyles = (theme, date, finalStartDate, finalEndDate, hoveredDate, isDateDisabled) => {
+    return {
+        ...getDayTextClassNames(theme, date, finalStartDate, finalEndDate, hoveredDate, isDateDisabled),
+        ...getDayRoundedClassName(date, finalStartDate, finalEndDate, hoveredDate),
+        ...getDayBgColorClassName(theme, date, finalStartDate, finalEndDate, hoveredDate, isDateDisabled),
+    };
+};
+const getDayRoundedClassName = (day, selectedStartDay, selectedEndDay, hoveredDay) => {
+    if (!selectedStartDay && !selectedEndDay) {
+        return { borderRadius: '0.375rem' };
+    }
+    if (selectedStartDay &&
+        selectedEndDay &&
+        isEqual(day, selectedStartDay) &&
+        isEqual(day, selectedEndDay)) {
+        return { borderRadius: '0.375rem' };
+    }
+    if (selectedStartDay && selectedEndDay && isEqual(day, selectedStartDay)) {
+        return {
+            borderBottomLeftRadius: '0.375rem',
+            borderTopLeftRadius: '0.375rem',
+        };
+    }
+    if (selectedStartDay &&
+        !selectedEndDay &&
+        !hoveredDay &&
+        isEqual(day, selectedStartDay)) {
+        return { borderRadius: '0.375rem' };
+    }
+    if (selectedStartDay &&
+        !selectedEndDay &&
+        hoveredDay &&
+        day < selectedStartDay) {
+        return { borderRadius: '0.375rem' };
+    }
+    if (selectedStartDay &&
+        !selectedEndDay &&
+        hoveredDay &&
+        isEqual(day, selectedStartDay) &&
+        hoveredDay > selectedStartDay) {
+        return {
+            borderBottomLeftRadius: '0.375rem',
+            borderTopLeftRadius: '0.375rem',
+        };
+    }
+    if (selectedStartDay &&
+        !selectedEndDay &&
+        hoveredDay &&
+        day > selectedStartDay &&
+        day < hoveredDay) {
+        return { borderRadius: 0 };
+    }
+    if (selectedStartDay &&
+        selectedEndDay &&
+        day > selectedStartDay &&
+        day < selectedEndDay) {
+        return { borderRadius: 0 };
+    }
+    if (selectedStartDay &&
+        !selectedEndDay &&
+        hoveredDay &&
+        isEqual(day, hoveredDay) &&
+        !isEqual(day, selectedStartDay)) {
+        return {
+            borderBottomRightRadius: '0.375rem',
+            borderTopRightRadius: '0.375rem',
+        };
+    }
+    if (selectedStartDay && selectedEndDay && isEqual(day, selectedEndDay)) {
+        return {
+            borderBottomRightRadius: '0.375rem',
+            borderTopRightRadius: '0.375rem',
+        };
+    }
+    if (selectedStartDay &&
+        selectedEndDay &&
+        (day < selectedStartDay || day > selectedEndDay)) {
+        return { borderRadius: '0.375rem' };
+    }
+    return { borderRadius: '0.375rem' };
+};
+export const displaySelected = (selectedStartDay, selectedEndDay) => {
+    if (!selectedStartDay && !selectedEndDay) {
+        return '';
+    }
+    else if (selectedStartDay && !selectedEndDay) {
+        const options = {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        };
+        return selectedStartDay.toLocaleDateString('en-US', options);
+    }
+    else if (selectedStartDay && selectedEndDay) {
+        if (isEqual(selectedStartDay, selectedEndDay)) {
+            const options = {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+            };
+            return selectedStartDay.toLocaleDateString('en-US', options);
+        }
+        else if (selectedStartDay.getMonth() === selectedEndDay.getMonth() &&
+            selectedStartDay.getFullYear() === selectedEndDay.getFullYear()) {
+            const optionsStartDate = {
+                month: 'short',
+                day: 'numeric',
+            };
+            return `${selectedStartDay.toLocaleDateString('en-US', optionsStartDate)} - 
+                    ${selectedEndDay.getDate()}, ${selectedEndDay.getFullYear()}`;
+        }
+        else {
+            const options = {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+            };
+            return `${selectedStartDay.toLocaleDateString('en-US', options)} - 
+                    ${selectedEndDay.toLocaleDateString('en-US', options)}`;
+        }
+    }
+};
+const getDayBgColorClassName = (theme, day, selectedStartDay, selectedEndDay, hoveredDay, isDayDisabled = false) => {
+    const styles = {
+        background: 'transparent',
+    };
+    if (!isDayDisabled) {
+        if (selectedStartDay && isEqual(day, selectedStartDay)) {
+            styles.background = theme?.primaryTextColor || '#6269E9';
+        }
+        if (selectedStartDay &&
+            !selectedEndDay &&
+            hoveredDay &&
+            day > selectedStartDay &&
+            day < hoveredDay) {
+            styles.background =
+                hexToRgbaWith10PercentAlpha(theme?.primaryTextColor) ||
+                    hexToRgbaWith10PercentAlpha('#6269E9');
+        }
+        if (selectedEndDay && isEqual(day, selectedEndDay)) {
+            styles.background = theme?.primaryTextColor || '#6269E9';
+        }
+        if (selectedStartDay &&
+            selectedEndDay &&
+            day > selectedStartDay &&
+            day < selectedEndDay) {
+            styles.background =
+                hexToRgbaWith10PercentAlpha(theme?.primaryTextColor) ||
+                    hexToRgbaWith10PercentAlpha('#6269E9');
+        }
+    }
+    return styles;
+};
+const getDayTextClassNames = (theme, day, selectedStartDay, selectedEndDay, hoveredDay, isDayDisabled = false) => {
+    const styles = {
+        color: theme?.primaryTextColor || '#364153',
+    };
+    if (!isDayDisabled) {
+        if (isToday(day)) {
+            if ((selectedStartDay && isEqual(day, selectedStartDay)) ||
+                (selectedEndDay && isEqual(day, selectedEndDay))) {
+                styles.color = 'white';
+            }
+            else {
+                styles.color = theme?.primaryTextColor || '#364153';
+            }
+        }
+        else {
+            if (selectedStartDay && isEqual(day, selectedStartDay)) {
+                styles.color = 'white';
+            }
+            if (selectedStartDay &&
+                !selectedEndDay &&
+                hoveredDay &&
+                day > selectedStartDay &&
+                day < hoveredDay) {
+                styles.color = theme?.primaryTextColor || '#364153';
+            }
+            if (selectedEndDay && isEqual(day, selectedEndDay)) {
+                styles.color = 'white';
+            }
+            if (selectedStartDay &&
+                selectedEndDay &&
+                day > selectedStartDay &&
+                day < selectedEndDay) {
+                styles.color = theme?.primaryTextColor || '#364153';
+            }
+        }
+    }
+    return styles;
+};
+export const formatSelectedDates = (startDate, endDate, locale) => {
+    const localeCode = locale?.code || 'en-US';
+    if (!startDate && !endDate) {
+        return '';
+    }
+    else if (startDate && !endDate) {
+        const options = {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        };
+        return startDate.toLocaleDateString(localeCode, options);
+    }
+    else if (startDate && endDate) {
+        if (isEqual(startDate, endDate)) {
+            const options = {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+            };
+            return startDate.toLocaleDateString(localeCode, options);
+        }
+        else if (startDate.getMonth() === endDate.getMonth() &&
+            startDate.getFullYear() === endDate.getFullYear()) {
+            const optionsStartDate = {
+                month: 'short',
+                day: 'numeric',
+            };
+            return `${startDate.toLocaleDateString(localeCode, optionsStartDate)} - 
+                    ${endDate.getDate()}, ${endDate.getFullYear()}`;
+        }
+        else {
+            const options = {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+            };
+            return `${startDate.toLocaleDateString(localeCode, options)} - 
+                    ${endDate.toLocaleDateString(localeCode, options)}`;
+        }
+    }
+    return '';
+};
+export function hexToRgbaWith10PercentAlpha(hex) {
+    // Convert the hex color to RGB
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    // Set the alpha value to 10%
+    const alpha = 0.1;
+    // Return the color as an rgba string
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}