@cleartrip/ct-design-calendar 4.0.0 → 5.0.0

package/src/DayPicker.tsx

@@ -0,0 +1,324 @@
+import { CSSProperties, useEffect, useMemo } from 'react';
+import dayjs from 'dayjs';
+import {
+  DayPicker,
+  DayContent,
+  DayContentProps,
+  DateFormatter,
+  DayClickEventHandler,
+  DayPickerDefaultProps,
+  DayPickerMultipleProps,
+  DayPickerRangeProps,
+  DayPickerSingleProps,
+  Matcher,
+  ModifiersClassNames,
+  ModifiersStyles,
+  SelectMultipleModifiers,
+  SelectRangeEventHandler,
+  SelectRangeModifiers,
+  WeekNumberFormatter,
+  FooterProps,
+} from 'react-day-picker';
+import { WEEK_DAY_LABEL } from '@cleartrip/ct-design-common-constants';
+import { getNestedField } from '@cleartrip/ct-design-common-utils';
+import { Container } from '@cleartrip/ct-design-container';
+import { useTheme } from '@cleartrip/ct-design-theme';
+import { Typography } from '@cleartrip/ct-design-typography';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+
+import { Caption } from './Caption';
+import './globalStyle';
+
+type DayPickerType = DayPickerDefaultProps | DayPickerSingleProps | DayPickerMultipleProps | DayPickerRangeProps;
+
+type DayPickerProps = Pick<DayPickerType, 'mode'>;
+
+export interface IDate {
+  from: Date;
+  to: Date;
+}
+
+type CustomDay = {
+  dots?: {
+    showDots?: boolean;
+    dotsData?: string[];
+    styleProps?: CSSProperties;
+  };
+  dayFooter?: {
+    showDayFooter?: boolean;
+    dayFooterData?: { date?: string; text?: string }[]; // TODO(@Om @Kanishk): fix type for this later
+    styleProps?: CSSProperties;
+  };
+};
+
+export interface DateRangeProps extends DayPickerProps {
+  /**
+   * props to format the dates.
+   */
+  labelFormat?: string;
+  /**
+   *
+   * @param day
+   * @returns dateclick callback and below is for the range date click.
+   */
+  onDayClick?: DayClickEventHandler;
+  onDateSelect: SelectRangeEventHandler;
+
+  selectedDays?: { from: Date; to: Date };
+  /**
+   * total number of months need to render
+   */
+  noOfMonths: number;
+  /**
+   * Incase any required changes come to modify header to show icons along with month name.
+   */
+  customHeader?: React.FC;
+  min?: number;
+  max?: number;
+  disabledDays?: Matcher | Matcher[];
+  /**
+   * modifiersStyles specifies styles to those dates.
+   */
+  modifierStyles?: ModifiersStyles;
+  modifiersClassName?: ModifiersClassNames;
+  fromMonth?: Date;
+  toDate?: Date;
+  defaultMonth?: Date;
+  /**
+   *
+   * @returns this props is for scrolling to selected month.
+   */
+  setScrollToIndex?: () => void;
+  formatters?: DateFormatter | WeekNumberFormatter;
+  scrollToIndex?: React.RefObject<HTMLElement>;
+  /**
+   * props which provide the container width to calculate the table cell size.
+   */
+  containerWidth?: number;
+  /**
+   * modifiers are for modifiying the relevant dates
+   */
+  modifiers?: SelectRangeModifiers | SelectMultipleModifiers;
+
+  /**
+   * cellwidth is calculated based on the container width.
+   */
+  cellWidth?: number;
+  cellHeight?: number;
+  daySize?: number;
+  footer?: (props: FooterProps) => React.JSX.Element | null;
+
+  customDay?: CustomDay;
+
+  customSelectedDayProps?: {
+    dayHeight?: number;
+    dayWidth?: number;
+    borderRadius?: number;
+  };
+  /**
+   * If passed true, initial date scroll will happen using setTimeout.
+   */
+  asyncInitialScroll?: boolean;
+}
+
+const CALENDAR_ROOT_ID = 'react_day_picker_pwa';
+
+const staticStyles = makeStyles((theme) => ({
+  mainContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    paddingTop: theme.spacing[3],
+    overflowY: 'hidden',
+  },
+  customDayContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dotsContainer: {
+    position: 'absolute',
+    marginTop: -36,
+    marginRight: -18,
+    width: 6,
+    height: 6,
+  },
+  dayFooterContainer: {
+    position: 'absolute',
+    marginBottom: -32,
+  },
+}));
+
+const Calendar = ({
+  onDateSelect,
+  selectedDays,
+  noOfMonths,
+  footer,
+  customHeader,
+  disabledDays,
+  fromMonth,
+  cellWidth,
+  cellHeight,
+  onDayClick,
+  customDay,
+  customSelectedDayProps,
+  containerWidth,
+  modifiers,
+  modifierStyles,
+}: DateRangeProps) => {
+  const theme = useTheme();
+  const { dots = {}, dayFooter = {} } = customDay || { dots: {}, dayFooter: {} };
+  const { showDots = false, dotsData = [] } = dots || {};
+  const { showDayFooter = false, dayFooterData = [] } = dayFooter || {};
+  const { dayHeight, dayWidth, borderRadius } = customSelectedDayProps || {};
+
+  const formatWeekdayName = (date: Date) => {
+    const day = date.getDay();
+    return (
+      <Typography variant='B3' color={day < 5 ? 'neutral' : 'warning'}>
+        {WEEK_DAY_LABEL[day as keyof typeof WEEK_DAY_LABEL]}
+      </Typography>
+    );
+  };
+
+  /**
+   *
+   * @param props
+   * @returns Here we are doing a customiesed day component which has red dot also available.
+   */
+  function CustomDayComponent(props: DayContentProps) {
+    const dateTime = dayjs(props.date).format('YYYY/MM/DD');
+
+    const dynamicDayStyles = useStyles(
+      (theme) => ({
+        customDay: {
+          width: dayWidth ? dayWidth : theme.size[10],
+          height: dayHeight ? dayHeight : theme.size[10],
+        },
+        dotsStyle: {
+          backgroundColor: theme.color.text.warning,
+        },
+      }),
+      [dayWidth, dayHeight],
+    );
+
+    return (
+      <Container
+        styleConfig={{
+          root: [staticStyles.customDayContainer, dynamicDayStyles.customDay],
+        }}
+        id={`Calendar${props.date.getMonth()}`}
+      >
+        {showDots && dotsData.includes(dateTime) && (
+          <Container
+            styleConfig={{
+              root: [staticStyles.dotsContainer, dynamicDayStyles.dotsStyle],
+            }}
+          ></Container>
+        )}
+        <time dateTime={dateTime}>
+          <DayContent {...props} />
+        </time>
+        {showDayFooter &&
+          dayFooterData.map((ele) => {
+            return ele?.date === dateTime;
+          }) && (
+            <Container
+              styleConfig={{
+                root: [staticStyles.dayFooterContainer],
+              }}
+            >
+              <Typography variant='B3' colorCode={theme.color.text.success}>
+                {dayFooterData.find((ele) => ele.date === dateTime)?.text}
+              </Typography>
+            </Container>
+          )}
+      </Container>
+    );
+  }
+
+  const formatWeekNumber = (weekNumber: number) => {
+    // Subtract 1 to make Monday as 0
+    return weekNumber - 1;
+  };
+
+  /**
+   * below one is to customise the calendar css as per need.
+   */
+
+  const styleConfigurableVariables = useMemo(
+    () => ({
+      '--rdp-cell-width': cellWidth ? `${cellWidth}px` : getNestedField(['size', '10'], theme) /* Cell width */,
+      '--rdp-cell-height': cellHeight ? `${cellHeight}px` : getNestedField(['size', '10'], theme) /* Cell height */,
+      '--rdp-day-size': cellWidth ? `${cellWidth}px` : getNestedField(['size', '10'], theme) /* Cell width */,
+      '--rdp-day-height-custom': dayHeight ? `${dayHeight}px` : getNestedField(['size', '10'], theme) /* Cell width */,
+      '--rdp-day-width-custom': dayWidth ? `${dayWidth}px` : getNestedField(['size', '10'], theme) /* Cell width */,
+      '--rdp-day-borderRadius-custom': borderRadius
+        ? `${borderRadius}%`
+        : getNestedField(['size', '10'], theme) /* Cell width */,
+      '--rdp-accent-color': getNestedField(['color', 'calendar', 'accent'], theme),
+      '--rdp-outline': `1.5px solid ${getNestedField(
+        ['color', 'calendar', 'borderColor'],
+        theme,
+      )}` /* Outline border for focused elements */,
+      '--rdp-selected-range-color': getNestedField(['color', 'calendar', 'background'], theme),
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [theme, getNestedField],
+  );
+
+  useEffect(() => {
+    const calendarElement = document.getElementById(CALENDAR_ROOT_ID);
+    if (calendarElement) {
+      Object.keys(styleConfigurableVariables).forEach((styleVar) => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        calendarElement?.style?.setProperty(styleVar, styleConfigurableVariables[styleVar]);
+      });
+    }
+  }, [styleConfigurableVariables]);
+
+  const dynamicMainStyles = useStyles(
+    () => ({
+      mainContainerWidth: {
+        width: containerWidth,
+      },
+    }),
+    [containerWidth],
+  );
+
+  return (
+    <Container
+      styleConfig={{
+        root: [staticStyles.mainContainer, dynamicMainStyles.mainContainerWidth],
+      }}
+    >
+      <DayPicker
+        ISOWeek
+        id={CALENDAR_ROOT_ID}
+        numberOfMonths={noOfMonths}
+        mode='range'
+        onDayClick={onDayClick}
+        selected={selectedDays}
+        onSelect={onDateSelect}
+        components={{
+          Footer: (...args) => {
+            return footer ? footer(...args) : null;
+          },
+          Caption: (...args) => {
+            return Caption(...args) || customHeader;
+          },
+          HeadRow: () => null,
+          Head: () => null,
+          DayContent: CustomDayComponent,
+        }}
+        fromMonth={dayjs().startOf('month').toDate() || fromMonth}
+        formatters={{ formatWeekdayName, formatWeekNumber }}
+        disabled={disabledDays}
+        modifiers={modifiers}
+        modifiersStyles={modifierStyles}
+      />
+    </Container>
+  );
+};
+
+export default Calendar;

package/src/Footer/CheckinCheckout.tsx

@@ -0,0 +1,196 @@
+import { Container } from '@cleartrip/ct-design-container';
+import { Typography } from '@cleartrip/ct-design-typography';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { Badge } from '@cleartrip/ct-design-badge';
+import dayjs from 'dayjs';
+
+import { DATE_TYPE, MONTHS } from './constants';
+
+const pluralize = (value: number, text: string, suffix = 's') => (+value === 1 ? text : `${text}${suffix}`);
+const pad = (s: number) => {
+  return s < 10 ? `0${s}` : s;
+};
+
+const formatDateCalendar = (date: Date) =>
+  `${pad(date.getDate())} ${MONTHS[date.getMonth()]} ‘${date.getFullYear().toString().substr(-2)}`;
+
+interface CheckInCheckOutProps {
+  checkInDate?: Date | '';
+  checkOutDate?: Date | '';
+  stateDateType?: `${DATE_TYPE}`;
+  onCheckInTap?: () => void;
+  onCheckOutTap?: () => void;
+}
+
+// Static styles using makeStyles
+const staticStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: theme.spacing[3],
+    position: 'relative',
+  },
+  checkInContainer: {
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[2],
+    backgroundColor: theme.color.background.neutral,
+    borderRadius: theme.border.radius[12],
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  checkOutContainer: {
+    border: `1px solid ${theme.color.border.default}`,
+    borderRadius: theme.border.radius[12],
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  checkOutContainerLayout: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    backgroundColor: '#f5f5f5',
+    borderRadius: 12,
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  dateLabelBase: {
+    color: '#B3B3B3',
+    transition: 'all 0.2s ease-in-out',
+  },
+  uncheckedCheckInContainer: {
+    fontSize: 16,
+    lineHeight: 22,
+    transform: 'translateY(8px)',
+  },
+  nightsTextContainer: {
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+  },
+  nightsBadgeLayout: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+    zIndex: 100,
+  },
+  containerBase: {
+    height: 56,
+  },
+  checkedCheckInContainer: {},
+  checkedInDateText: {
+    color: theme.color.text.neutral,
+    lineHeight: 22,
+  },
+  checkedOutDateText: {
+    color: '#171717',
+    lineHeight: 22,
+  },
+}));
+
+const CheckInCheckOut = ({
+  checkInDate,
+  checkOutDate,
+  onCheckInTap,
+  onCheckOutTap,
+  stateDateType,
+}: CheckInCheckOutProps) => {
+  const dateDiff = dayjs(checkOutDate).diff(dayjs(checkInDate), 'day');
+
+  const checkInStyles = useStyles(
+    (theme) => ({
+      container: {
+        borderColor: stateDateType === DATE_TYPE.CHECK_IN ? theme.color.background.primary : theme.color.border.default,
+        borderWidth: stateDateType === DATE_TYPE.CHECK_IN ? 1.5 : 1,
+      },
+    }),
+    [stateDateType],
+  );
+
+  const checkOutStyles = useStyles(
+    (theme) => ({
+      checkoutContainer: {
+        borderColor:
+          stateDateType === DATE_TYPE.CHECK_OUT ? theme.color.background.primary : theme.color.border.default,
+        borderWidth: stateDateType === DATE_TYPE.CHECK_OUT ? 1.5 : 1,
+      },
+      dateLabel: {
+        color: '#B3B3B3',
+        transition: 'all 0.2s ease-in-out',
+      },
+    }),
+    [stateDateType],
+  );
+
+  return (
+    <Container styleConfig={{ root: [staticStyles.root] }}>
+      <Container
+        styleConfig={{ root: [checkInStyles.container, staticStyles.checkInContainer] }}
+        onClick={onCheckInTap}
+      >
+        <Typography
+          variant='B3'
+          styleConfig={{
+            root: [
+              staticStyles.dateLabelBase,
+              checkInDate ? staticStyles.checkedCheckInContainer : staticStyles.uncheckedCheckInContainer,
+            ],
+          }}
+        >
+          Check-in
+        </Typography>
+
+        {checkInDate && (
+          <Typography variant='B1' styleConfig={{ root: [staticStyles.checkedInDateText] }}>
+            {formatDateCalendar(checkInDate)}
+          </Typography>
+        )}
+      </Container>
+
+      {!!dateDiff && !isNaN(dateDiff) && dateDiff > 0 && (
+        <Container
+          styleConfig={{
+            root: [staticStyles.nightsTextContainer, staticStyles.nightsBadgeLayout],
+          }}
+        >
+          <Badge
+            variant='subtle'
+            colorScheme='default'
+            text={<Typography variant='TAG'>{`${dateDiff} ${pluralize(dateDiff, 'NIGHT', 'S')}`}</Typography>}
+            size='micro'
+          />
+        </Container>
+      )}
+
+      <Container
+        styleConfig={{
+          root: [
+            staticStyles.checkOutContainer,
+            staticStyles.containerBase,
+            staticStyles.checkOutContainerLayout,
+            checkOutStyles.checkoutContainer,
+          ],
+        }}
+        onClick={onCheckOutTap}
+      >
+        <Typography variant='B3' styleConfig={{ root: [checkOutStyles.dateLabel] }}>
+          Check-out
+        </Typography>
+
+        {checkOutDate && (
+          <Typography
+            variant='B1'
+            styleConfig={{
+              root: [staticStyles.checkedOutDateText],
+            }}
+          >
+            {formatDateCalendar(checkOutDate)}
+          </Typography>
+        )}
+      </Container>
+    </Container>
+  );
+};
+
+export default CheckInCheckOut;

package/src/Footer/LongWeekend.tsx

@@ -0,0 +1,98 @@
+import { Container } from '@cleartrip/ct-design-container';
+import { Typography } from '@cleartrip/ct-design-typography';
+import { Accordion } from '@cleartrip/ct-design-accordion';
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+
+import { ChevronDown } from '@cleartrip/ct-design-icons';
+
+const isIndexType = (argument: unknown): argument is string | number => {
+  return (typeof argument === 'number' || typeof argument === 'string') && typeof argument !== 'undefined';
+};
+
+const staticStyles = makeStyles((theme) => ({
+  accordionRoot: {
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: theme.spacing[2],
+    paddingBottom: theme.spacing[2],
+  },
+  accordionLabel: {
+    display: 'flex',
+    justifyContent: 'flex-start',
+  },
+  accordionChildrenContainer: {
+    paddingTop: theme.spacing[2],
+  },
+  accordionIcon: {
+    marginLeft: theme.spacing[1],
+  },
+  labelContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    marginLeft: theme.spacing[4],
+  },
+  holidayIndicator: {
+    marginRight: theme.spacing[2],
+    height: theme.spacing[1.5],
+    width: theme.spacing[1.5],
+    backgroundColor: '#C83232', // TODO: Replace with theme.color when available
+    borderRadius: theme.border.radius[16],
+  },
+  holidaysContainer: {
+    width: 'calc(100% - 32px)' as unknown as number,
+    marginHorizontal: theme.spacing[4],
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing[1],
+  },
+}));
+
+const accordianStyleConfig = {
+  root: [staticStyles.accordionRoot],
+  label: [staticStyles.accordionLabel],
+  childrenContainer: [staticStyles.accordionChildrenContainer],
+  icon: [staticStyles.accordionIcon],
+};
+
+export function LongWeekendFooter(props: {
+  displayMonth?: Date;
+  holidayList: Record<string, Record<string, string[]>>;
+}) {
+  const month = props.displayMonth?.getMonth();
+  const year = props.displayMonth?.getFullYear();
+
+  const holidays = isIndexType(month) && isIndexType(year) ? props.holidayList?.[year]?.[month] || [] : [];
+
+  if (holidays.length) {
+    return (
+      <tfoot>
+        {holidays.length ? (
+          <tr>
+            <td colSpan={8}>
+              <Accordion
+                expandIcon={<ChevronDown height={16} width={16} />}
+                styleConfig={accordianStyleConfig}
+                label={
+                  <Container styleConfig={{ root: [staticStyles.labelContainer] }}>
+                    <Container styleConfig={{ root: [staticStyles.holidayIndicator] }} />
+                    <Typography variant='B3'>{holidays.length} Holidays</Typography>
+                  </Container>
+                }
+              >
+                <Container styleConfig={{ root: [staticStyles.holidaysContainer] }}>
+                  {holidays.map((holiday) => (
+                    <Typography key={holiday} variant='P3'>
+                      {holiday}
+                    </Typography>
+                  ))}
+                </Container>
+              </Accordion>
+            </td>
+          </tr>
+        ) : null}
+      </tfoot>
+    );
+  }
+
+  return null;
+}

package/src/Footer/constants.ts

@@ -0,0 +1,7 @@
+export const enum DATE_TYPE {
+  INIT = 'init',
+  CHECK_IN = 'checkIn',
+  CHECK_OUT = 'checkOut',
+}
+
+export const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

package/src/Footer/index.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useRef } from 'react';
+
+import { Container } from '@cleartrip/ct-design-container';
+import { Spacer } from '@cleartrip/ct-design-spacer';
+import { Button } from '@cleartrip/ct-design-button';
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+
+import CheckInCheckOut from './CheckinCheckout';
+import { DATE_TYPE } from './constants';
+
+// Static styles using makeStyles
+const staticStyles = makeStyles((theme) => ({
+  footerContainer: {
+    position: 'absolute',
+    bottom: 0,
+    padding: theme.spacing[4],
+    paddingBottom: theme.spacing[4],
+    paddingTop: theme.spacing[3],
+    zIndex: 100,
+    width: '100%',
+    backgroundColor: theme.color.background.neutral,
+    boxShadow: 'rgba(26, 26, 26, 0.08) 0px -4px 16px',
+  },
+  spacerMargin: {
+    marginBottom: theme.spacing[4],
+  },
+}));
+
+interface ICalendarFixedFooter {
+  checkInDate?: Date | '';
+  checkOutDate?: Date | '';
+  stateDateType?: `${DATE_TYPE}`;
+  onClick: () => void;
+  onCheckInTap: () => void;
+  onCheckOutTap: () => void;
+  primaryCtaTestId?: string;
+}
+
+const CalendarFixedFooter: React.FC<ICalendarFixedFooter> = ({
+  checkInDate,
+  checkOutDate,
+  stateDateType,
+  onClick,
+  onCheckInTap,
+  onCheckOutTap,
+}) => {
+  const checkInRef = useRef<HTMLInputElement>(null);
+  const checkOutRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!checkInDate) checkInRef.current?.focus();
+    else if (!checkOutDate) checkOutRef.current?.focus();
+    else if (stateDateType === DATE_TYPE.CHECK_IN || stateDateType === DATE_TYPE.INIT) checkInRef.current?.focus();
+    else if (stateDateType === DATE_TYPE.CHECK_OUT) checkOutRef.current?.focus();
+  }, [checkInDate, checkOutDate, stateDateType]);
+
+  const isPrimaryCtaDisabled = stateDateType === 'checkOut' || checkInDate?.toString() === checkOutDate?.toString();
+
+  return (
+    <Container
+      styleConfig={{
+        root: [staticStyles.footerContainer],
+      }}
+    >
+      <CheckInCheckOut
+        checkInDate={checkInDate}
+        checkOutDate={checkOutDate}
+        onCheckInTap={onCheckInTap}
+        onCheckOutTap={onCheckOutTap}
+        stateDateType={stateDateType}
+      />
+      <Spacer
+        styleConfig={{
+          root: [staticStyles.spacerMargin],
+        }}
+      />
+      <Button disabled={isPrimaryCtaDisabled} variant='contained' onClick={onClick} isFullWidth={true}>
+        Confirm
+      </Button>
+    </Container>
+  );
+};
+
+export default CalendarFixedFooter;