From 049b6e7d1d553de477cca1de7bf53069b33ea9c6 Mon Sep 17 00:00:00 2001
From: Manoj Vaibhav <manoj.r@xola.com>
Date: Fri, 10 Nov 2023 17:36:40 +0530
Subject: [PATCH] Revert "X2-7602 reworked range datepicker" (#284)

Revert "X2-7602 reworked range datepicker (#280)"

This reverts commit 3a8448da0b7612aa6ab9349eb0d8d42e6cfb3884.
---
 src/components/DatePicker/DatePicker.jsx      | 148 ++++++-------
 src/components/DatePicker/RangeDatePicker.jsx | 196 ------------------
 .../DatePicker/UpcomingDatePicker.jsx         |  47 -----
 3 files changed, 67 insertions(+), 324 deletions(-)
 delete mode 100644 src/components/DatePicker/RangeDatePicker.jsx
 delete mode 100644 src/components/DatePicker/UpcomingDatePicker.jsx

diff --git a/src/components/DatePicker/DatePicker.jsx b/src/components/DatePicker/DatePicker.jsx
index be4a5497d..dc8af42cf 100644
--- a/src/components/DatePicker/DatePicker.jsx
+++ b/src/components/DatePicker/DatePicker.jsx
@@ -9,10 +9,8 @@ import { isArray, isFunction } from "lodash";
 import { Tooltip } from "../..";
 import { Day } from "./Day";
 import { MonthYearSelector } from "./MonthYearSelector";
-import { RelativeDateRange } from "./RelativeDateRange";
-import RangeDatePicker from "./RangeDatePicker";
-import { UpcomingDatePicker } from "./UpcomingDatePicker";
 import { NavbarElement } from "./NavbarElement";
+import { RelativeDateRange } from "./RelativeDateRange";
 
 const variants = {
     single: "single",
@@ -42,8 +40,6 @@ export const DatePicker = ({
 }) => {
     const initialValue = variant === variants.single ? value : value.from;
     const [currentMonth, setCurrentMonth] = useState(initialValue);
-    const [startMonth, setStartMonth] = useState(value?.from);
-    const [endMonth, setEndMonth] = useState(value?.to);
     const [rangeName, setRangeName] = useState("");
     const isRangeVariant = variant === variants.range;
 
@@ -91,21 +87,8 @@ export const DatePicker = ({
         }
     };
 
-    const isDisabled = (date) => {
-        if (isArray(disabledDays)) {
-            return disabledDays.some((_date) => dayjs(_date).isSame(date, "day"));
-        }
-
-        if (isFunction(disabledDays)) {
-            return disabledDays(date);
-        }
-
-        return disabledDays(date);
-    };
-
     const handleRelativeRangeChanged = (rangeName, range) => {
         setCurrentMonth(range.from);
-        setStartMonth(range.from);
         onChange(range, modifiers, null);
     };
 
@@ -114,27 +97,25 @@ export const DatePicker = ({
         onMonthChange?.(m);
     };
 
-    const handleStartMonthChange = (m) => {
-        setStartMonth(m);
-        onMonthChange?.(m);
-    };
-
-    const handleEndMonthChange = (m) => {
-        setEndMonth(m);
-        onMonthChange?.(m);
-    };
-
-    const CaptionElement = shouldShowYearPicker
+    const captionElement = shouldShowYearPicker
         ? ({ date }) => <MonthYearSelector date={date} currentMonth={currentMonth} onChange={handleMonthChange} />
         : undefined;
 
-    // Comparing `from` and `to` dates hides a weird CSS style when you select the same date twice in a date range.
-    const isDateRangeStyle = isRangeVariant && value.from?.getTime() !== value.to?.getTime();
+    const isDisabled = (date) => {
+        if (isArray(disabledDays)) {
+            return disabledDays.some((_date) => dayjs(_date).isSame(date, "day"));
+        }
+
+        if (isFunction(disabledDays)) {
+            return disabledDays(date);
+        }
+
+        return disabledDays(date);
+    };
 
     const renderDay = (date) => {
         const tooltipContent = getTooltip?.(date);
         const disabled = isDisabled(date);
-
         return tooltipContent ? (
             <Tooltip placement="top" content={tooltipContent}>
                 <Day
@@ -167,59 +148,66 @@ export const DatePicker = ({
         <>
             <div className="flex">
                 {upcomingDates ? (
-                    <UpcomingDatePicker
-                        upcomingDates={upcomingDates}
-                        value={value}
-                        onChange={handleDayClick}
-                        onMonthChange={handleMonthChange}
-                    />
+                    <div className="rounded-l-lg border-r border-gray pt-8">
+                        <p className="mb-2 px-6 text-lg font-bold">Upcoming</p>
+                        {upcomingDates?.length > 0 ? (
+                            <div className="mt-5">
+                                {upcomingDates?.map((date) => {
+                                    const isSameDay = dayjs(date).isSame(dayjs(value), "day");
+                                    const key = dayjs(date).format();
+                                    return (
+                                        <div
+                                            key={key}
+                                            value
+                                            className={clsx(
+                                                "mx-6 mt-3 flex min-w-40 cursor-pointer items-center justify-center",
+                                                "rounded border border-gray py-3 hover:border-blue hover:bg-blue hover:text-white",
+                                                { "border-blue bg-blue text-white": isSameDay },
+                                            )}
+                                            onClick={(event) => {
+                                                handleDayClick(date, {}, event);
+                                                handleMonthChange(date);
+                                            }}
+                                        >
+                                            {dayjs(date).format("ddd DD MMMM")}
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        ) : (
+                            <div className="mx-6 mt-7 max-w-40 items-center justify-center rounded bg-yellow-lighter p-3">
+                                There is no future availability for this product.
+                            </div>
+                        )}
+                    </div>
                 ) : null}
 
-                {isRangeVariant ? (
-                    <RangeDatePicker
-                        isDateRangeStyle={useDateRangeStyle}
-                        shouldShowYearPicker={shouldShowYearPicker}
-                        startMonth={startMonth}
-                        endMonth={endMonth}
-                        modifiers={{ ...modifiers, ...rangeModifier }}
-                        getTooltip={getTooltip}
-                        disabledDays={disabledDays}
-                        getDayContent={getDayContent}
-                        value={value}
-                        handleDayClick={handleDayClick}
-                        handleStartMonthChange={handleStartMonthChange}
-                        handleEndMonthChange={handleEndMonthChange}
-                        handleTodayClick={handleTodayClick}
-                        selectedDays={selectedDays}
-                        {...rest}
-                    />
-                ) : (
-                    <DayPicker
-                        className={clsx(
-                            "ui-date-picker rounded-lg pt-3",
-                            useDateRangeStyle ? "date-range-picker" : null,
-                            getDayContent ? "has-custom-content" : null,
-                            modifiers.waitlist ? "has-custom-content" : null,
-                        )}
-                        todayButton="Today"
-                        selectedDays={selectedDays}
-                        month={currentMonth}
-                        modifiers={{ ...modifiers, ...rangeModifier }}
-                        disabledDays={disabledDays}
-                        captionElement={CaptionElement}
-                        renderDay={renderDay}
-                        navbarElement={NavbarElement}
-                        onDayClick={handleDayClick}
-                        onMonthChange={handleMonthChange}
-                        onTodayButtonClick={handleTodayClick}
-                        {...rest}
-                    />
-                )}
+                <DayPicker
+                    className={clsx(
+                        "ui-date-picker rounded-lg pt-3",
+                        useDateRangeStyle ? "date-range-picker" : null,
+                        getDayContent ? "has-custom-content" : null,
+                        modifiers.waitlist ? "has-custom-content" : null,
+                    )}
+                    todayButton={variant === "single" ? "Today" : undefined}
+                    selectedDays={selectedDays}
+                    month={currentMonth}
+                    modifiers={{ ...modifiers, ...rangeModifier }}
+                    numberOfMonths={isRangeVariant ? 2 : 1}
+                    disabledDays={disabledDays}
+                    captionElement={captionElement}
+                    renderDay={renderDay}
+                    navbarElement={NavbarElement}
+                    onDayClick={handleDayClick}
+                    onMonthChange={handleMonthChange}
+                    onTodayButtonClick={handleTodayClick}
+                    {...rest}
+                />
             </div>
 
             {components.Footer ? <components.Footer /> : null}
 
-            {isDateRangeStyle && shouldShowRelativeRanges && (
+            {useDateRangeStyle && shouldShowRelativeRanges && (
                 <div className="ml-auto w-6/12 pl-5 pr-10 pb-5">
                     <RelativeDateRange
                         value={rangeName}
@@ -241,8 +229,6 @@ DatePicker.propTypes = {
     onMonthChange: PropTypes.func,
     disabledDays: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func]),
     shouldShowYearPicker: PropTypes.bool,
-    isDateRangeStyle: PropTypes.bool,
-    isRangeVariant: PropTypes.bool,
     getDayContent: PropTypes.func,
     modifiers: PropTypes.object,
     ranges: PropTypes.arrayOf(PropTypes.oneOf(["day", "week", "month", "quarter", "year"])),
diff --git a/src/components/DatePicker/RangeDatePicker.jsx b/src/components/DatePicker/RangeDatePicker.jsx
deleted file mode 100644
index b163593a0..000000000
--- a/src/components/DatePicker/RangeDatePicker.jsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import DayPicker from "react-day-picker";
-import clsx from "clsx";
-import dayjs from "dayjs";
-import { isArray, isFunction } from "lodash";
-import { Tooltip } from "../Tooltip";
-import { NavbarElement } from "./NavbarElement";
-import { MonthYearSelector } from "./MonthYearSelector";
-import { Day } from "./Day";
-
-const RangeDatePicker = ({
-    getTooltip,
-    value,
-    getDayContent,
-    isDateRangeStyle,
-    shouldShowYearPicker,
-    startMonth,
-    disabledDays,
-    endMonth,
-    modifiers,
-    selectedDays,
-    handleDayClick,
-    handleStartMonthChange,
-    handleEndMonthChange,
-    handleTodayClick,
-    ...rest
-}) => {
-    const [initialEndDate] = useState(endMonth);
-    const isTheSameMonth =
-        dayjs(startMonth).isSame(dayjs(initialEndDate), "month") &&
-        dayjs(endMonth).isSame(dayjs(initialEndDate), "month");
-
-    const isStartDateIsTheSameMonth = dayjs(value?.from).isSame(dayjs(value?.to), "month");
-
-    const CaptionStartElement = shouldShowYearPicker
-        ? ({ date }) => <MonthYearSelector date={date} currentMonth={startMonth} onChange={handleStartMonthChange} />
-        : undefined;
-
-    const CaptionEndElement = shouldShowYearPicker
-        ? ({ date }) => <MonthYearSelector date={date} currentMonth={endMonth} onChange={handleEndMonthChange} />
-        : undefined;
-
-    const isDisabledStartDays = (date) => {
-        if (isFunction(disabledDays)) {
-            return disabledDays(date) || dayjs(date).isAfter(value.to, "day");
-        }
-
-        if (isArray(disabledDays)) {
-            return (
-                disabledDays.some((_date) => dayjs(_date).isSame(date, "day")) || dayjs(date).isAfter(value.to, "day")
-            );
-        }
-
-        return dayjs(date).isAfter(value.to, "day");
-    };
-
-    const isDisabledEndDays = (date) => {
-        if (isStartDateIsTheSameMonth) {
-            return true;
-        }
-
-        if (isFunction(disabledDays)) {
-            return disabledDays(date) || dayjs(date).isBefore(value.from, "day");
-        }
-
-        if (isArray(disabledDays)) {
-            return (
-                disabledDays.some((_date) => dayjs(_date).isSame(date, "day")) ||
-                dayjs(date).isBefore(value.from, "day")
-            );
-        }
-
-        return dayjs(date).isBefore(value.from, "day");
-    };
-
-    const renderStartDay = (date) => {
-        const tooltipContent = getTooltip?.(date);
-        const disabled = isDisabledStartDays(date);
-
-        return tooltipContent ? (
-            <Tooltip placement="top" content={tooltipContent}>
-                <Day
-                    disabled={disabled}
-                    selectedDate={value}
-                    date={date}
-                    getContent={getDayContent}
-                    currentMonth={startMonth}
-                />
-            </Tooltip>
-        ) : (
-            <Day
-                disabled={disabled}
-                selectedDate={value}
-                date={date}
-                getContent={getDayContent}
-                currentMonth={startMonth}
-            />
-        );
-    };
-
-    const renderEndDay = (date) => {
-        const tooltipContent = getTooltip?.(date);
-        const disabled = isDisabledEndDays(date);
-
-        return tooltipContent ? (
-            <Tooltip placement="top" content={tooltipContent}>
-                <Day
-                    disabled={disabled}
-                    selectedDate={value}
-                    date={date}
-                    getContent={getDayContent}
-                    currentMonth={endMonth}
-                />
-            </Tooltip>
-        ) : (
-            <Day
-                disabled={disabled}
-                selectedDate={value}
-                date={date}
-                getContent={getDayContent}
-                currentMonth={endMonth}
-            />
-        );
-    };
-
-    useEffect(() => {
-        if (dayjs(value?.from).isSame(dayjs(value?.to), "month")) {
-            handleStartMonthChange(dayjs(value.from).toDate());
-        }
-    }, [value, handleStartMonthChange]);
-
-    return (
-        <div className="flex gap-4">
-            <DayPicker
-                className={clsx(
-                    "ui-date-picker max-w-[400px] rounded-lg pt-3",
-                    isDateRangeStyle ? "date-range-picker" : null,
-                    getDayContent ? "has-custom-content" : null,
-                    modifiers.waitlist ? "has-custom-content" : null,
-                )}
-                month={startMonth}
-                modifiers={{ ...modifiers, start: value.from }}
-                disabledDays={isDisabledStartDays}
-                navbarElement={NavbarElement}
-                captionElement={CaptionStartElement}
-                selectedDays={selectedDays}
-                renderDay={renderStartDay}
-                getTooltip={getTooltip}
-                onDayClick={(day, options, event) => handleDayClick(day, options, event, true)}
-                onMonthChange={handleStartMonthChange}
-                onTodayButtonClick={handleTodayClick}
-                {...rest}
-            />
-            <DayPicker
-                className={clsx(
-                    "ui-date-picker max-w-[400px] rounded-lg pt-3",
-                    isDateRangeStyle ? "date-range-picker" : null,
-                    getDayContent ? "has-custom-content" : null,
-                    modifiers.waitlist ? "has-custom-content" : null,
-                )}
-                month={isTheSameMonth ? dayjs(startMonth).add(1, "month").toDate() : endMonth}
-                modifiers={isStartDateIsTheSameMonth ? {} : { ...modifiers, end: value.to }}
-                disabledDays={isDisabledEndDays}
-                navbarElement={NavbarElement}
-                captionElement={CaptionEndElement}
-                selectedDays={isStartDateIsTheSameMonth ? [] : selectedDays}
-                renderDay={renderEndDay}
-                getTooltip={getTooltip}
-                onDayClick={(day, options, event) => handleDayClick(day, options, event, false)}
-                onMonthChange={handleEndMonthChange}
-                onTodayButtonClick={handleTodayClick}
-                {...rest}
-            />
-        </div>
-    );
-};
-
-RangeDatePicker.propTypes = {
-    getTooltip: PropTypes.func,
-    value: PropTypes.object,
-    getDayContent: PropTypes.func,
-    isDisabled: PropTypes.func,
-    isDateRangeStyle: PropTypes.bool,
-    startMonth: PropTypes.instanceOf(Date),
-    endMonth: PropTypes.instanceOf(Date),
-    modifiers: PropTypes.object,
-    disabledStartDays: PropTypes.func,
-    disabledEndDays: PropTypes.func,
-    handleDayClick: PropTypes.func,
-    handleStartMonthChange: PropTypes.func,
-    handleEndMonthChange: PropTypes.func,
-    handleTodayClick: PropTypes.func,
-};
-
-export default RangeDatePicker;
diff --git a/src/components/DatePicker/UpcomingDatePicker.jsx b/src/components/DatePicker/UpcomingDatePicker.jsx
deleted file mode 100644
index a6b509731..000000000
--- a/src/components/DatePicker/UpcomingDatePicker.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from "react";
-import dayjs from "dayjs";
-import clsx from "clsx";
-import PropTypes from "prop-types";
-
-export const UpcomingDatePicker = ({ value, upcomingDates, onChange, onMonthChange }) => {
-    return (
-        <div className="rounded-l-lg border-r border-gray pt-8">
-            <p className="mb-2 px-6 text-lg font-bold">Upcoming</p>
-            {upcomingDates?.length > 0 ? (
-                <div className="mt-5">
-                    {upcomingDates?.map((date) => {
-                        const isSameDay = dayjs(date).isSame(dayjs(value), "day");
-                        const key = dayjs(date).format();
-                        return (
-                            <div
-                                key={key}
-                                className={clsx(
-                                    "mx-6 mt-3 flex min-w-40 cursor-pointer items-center justify-center",
-                                    "rounded border border-gray py-3 hover:border-blue hover:bg-blue hover:text-white",
-                                    { "border-blue bg-blue text-white": isSameDay },
-                                )}
-                                onClick={(event) => {
-                                    onChange(date, {}, event);
-                                    onMonthChange(date);
-                                }}
-                            >
-                                {dayjs(date).format("ddd DD MMMM")}
-                            </div>
-                        );
-                    })}
-                </div>
-            ) : (
-                <div className="mx-6 mt-7 max-w-40 items-center justify-center rounded bg-yellow-lighter p-3">
-                    There is no future availability for this product.
-                </div>
-            )}
-        </div>
-    );
-};
-
-UpcomingDatePicker.propTypes = {
-    value: PropTypes.objectOf(Date),
-    upcomingDates: PropTypes.arrayOf(Date).isRequired,
-    onChange: PropTypes.func.isRequired,
-    onMonthChange: PropTypes.func.isRequired,
-};