bukazu-portal-react 3.3.3 → 3.3.4

package/src/components/CalendarPage/CalendarParts/CalendarHeader.tsx

@@ -1,72 +0,0 @@
-import React, { useContext } from 'react';
-import ArrowRight from '../../icons/ArrowRight.svg';
-import ArrowLeft from '../../icons/ArrowLeft.svg';
-import Reload from '../../icons/Reload.svg';
-import { CalendarContextDispatch } from './CalendarContext';
-import { addMonths, subMonths } from 'date-fns';
-
-interface Props {
-  changeMonth: Function;
-  currentMonth: Date;
-  numberOfMonths: number;
-}
-
-function CalendarHeader({
-  changeMonth,
-  currentMonth,
-  numberOfMonths
-}: Props): JSX.Element {
-  const dispatch = useContext(CalendarContextDispatch);  
-  
-  function next() {
-    changeMonth(addMonths(currentMonth, numberOfMonths));
-  }
-  function prev() {
-    changeMonth(subMonths(currentMonth, numberOfMonths));
-  }
-
-  return (
-    <div className="calendars-header">
-      <div
-        className="bu-calendar-col bu-prev"
-        style={{ textAlign: 'center' }}
-        onClick={prev}
-        tabIndex={0}
-        role="button"
-      >
-        <div className="icon">
-          {' '}
-          <ArrowLeft />
-        </div>
-      </div>
-      <div
-        className="bu-calendar-col bu-reset"
-        onClick={() => {
-          dispatch({
-            type: 'reset'
-          });
-        }}
-        style={{ textAlign: 'center' }}
-        tabIndex={0}
-        role="button"
-      >
-        <div className="icon">
-          <Reload />
-        </div>
-      </div>
-      <div
-        className="bu-calendar-col bu-next"
-        onClick={next}
-        style={{ textAlign: 'center' }}
-        tabIndex={0}
-        role="button"
-      >
-        <div className="icon">
-          <ArrowRight />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default CalendarHeader;

package/src/components/CalendarPage/CalendarParts/DayClasses.ts

@@ -1,113 +0,0 @@
-import {
-  addDays,
-  differenceInCalendarDays,
-  isAfter,
-  isBefore,
-  isSameDay,
-  isSameMonth,
-  subDays
-} from 'date-fns';
-import { BuDate } from '../../../types';
-import { Parse_EN_US } from '../../../_lib/date_helper';
-
-interface Props {
-  day: Date;
-  monthStart: Date;
-  prevBooked: BuDate;
-  buDate: BuDate;
-  dates: {
-    selectedDate: Date;
-    departureDate: BuDate;
-    arrivalDate: BuDate;
-  };
-  house: {
-    max_nights: Number;
-  };
-  discounts: [];
-}
-
-function DayClasses({
-  day,
-  monthStart,
-  buDate,
-  prevBooked,
-  dates,
-  house,
-  discounts
-}: Props): string {
-  const { selectedDate, departureDate, arrivalDate } = dates;
-  let classes = ['bu-calendar-col', 'cell'];
-
-  if (!isSameMonth(day, monthStart)) {
-    classes.push('disabled');
-    return classes.join(' ');
-  }
-  if (buDate) {    
-    if (buDate.arrival && isAfter(day, new Date()) && buDate.max_nights !== 0) {
-      if (prevBooked.max_nights === 0) {
-        classes.push('departure-arrival');
-      } else {
-        classes.push('arrival');
-        classes.push('arrival');
-      }
-    } else if (buDate.max_nights === 0) {
-      if (prevBooked.max_nights !== 0) {
-        classes.push('booked-departure');
-      } else {
-        classes.push('booked');
-      }
-    } else if (buDate.max_nights > 0 && prevBooked.max_nights === 0 && !buDate.arrival) {
-      classes.push('booked');
-    }
-  }
-
-  if (selectedDate) {
-    if (isSameDay(day, selectedDate)) {
-      classes.push('selected');
-    }
-    const minimum =
-      differenceInCalendarDays(day, selectedDate) >= arrivalDate.min_nights;
-    const maximum =
-      differenceInCalendarDays(day, selectedDate) <= house.max_nights &&
-      differenceInCalendarDays(day, selectedDate) <= arrivalDate.max_nights;
-
-    if (
-      buDate.departure &&
-      isAfter(day, selectedDate) &&
-      minimum &&
-      maximum &&
-      prevBooked.max_nights !== 0
-    ) {
-      classes.push('departure');
-    }
-  }
-
-  if (departureDate) {
-    if (
-      isAfter(day, selectedDate) &&
-      isBefore(day, Parse_EN_US(departureDate.date))
-    ) {
-      classes.push('selected');
-    }
-    if (isSameDay(day, Parse_EN_US(departureDate.date))) {
-      classes.push('selected');
-    }
-  }
-
-  const daysFromToday = differenceInCalendarDays(day, new Date());
-  const last_minute =
-    daysFromToday <= house.last_minute_days && daysFromToday > 0;
-
-  const discount = discounts.find(
-    (x) =>
-      isBefore(subDays(Parse_EN_US(x.discount_starts_at), 1), day) &&
-      isAfter(addDays(Parse_EN_US(x.discount_ends_at), 1), day)
-  );
-  if (last_minute || discount || buDate.special_offer > 0) {
-    classes.push('discount');
-  }
-
-  return classes.join(' ');
-}
-
-export default DayClasses;

package/src/components/CalendarPage/CalendarParts/GenerateCalendar.tsx

@@ -1,72 +0,0 @@
-import { useQuery } from '@apollo/client';
-import React, { useContext } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { HouseType, PortalSiteType } from '../../../types';
-import { SINGLE_HOUSE_QUERY } from '../../../_lib/queries';
-import { AppContext } from '../../AppContext';
-import { ApiError } from '../../Error';
-import Loading from '../../icons/loading.svg';
-import Calendar from '../Calendar';
-import { TrackEvent } from '../../../_lib/Tracking';
-
-interface Props {
-  PortalSite: PortalSiteType;
-}
-
-function GenerateCalendar({ PortalSite }: Props): JSX.Element {
-  const { portalCode, objectCode, locale } = useContext(AppContext);
-  const { loading, error, data } = useQuery(SINGLE_HOUSE_QUERY, {
-    variables: { portalCode, objectCode }
-  });
-
-  TrackEvent({
-    house_code: objectCode,
-    portal_code: portalCode,
-    interaction_type: 'calendar_view',
-    locale: locale
-  });
-
-  if (loading)
-    return (
-      <div>
-        <Loading />
-      </div>
-    );
-  if (error) {
-    return (
-      <div>
-        <ApiError errors={error} />
-      </div>
-    );
-  }
-
-  const Results = data.PortalSite.houses;
-  const numberOfMonths = PortalSite.options.bookingForm
-    ? PortalSite.options.bookingForm.numberOfMonths
-    : 4;
-  const numberOfMonthsInARow = PortalSite.options.bookingForm
-    ? PortalSite.options.bookingForm.numberOfMonthsInARow
-    : 4;
-
-  return (
-    <div id="calendar-container">
-      {Results.length === 0 && (
-        <div>
-          <FormattedMessage id="no_house_found" />
-        </div>
-      )}
-      {Results.map((result: HouseType) => (
-        <div key={result.id}>
-          <div className="house-name">{result.name}</div>
-          <Calendar
-            numberOfMonths={numberOfMonths}
-            numberOfMonthsInARow={numberOfMonthsInARow}
-            house={result}
-          />
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export default GenerateCalendar;

package/src/components/CalendarPage/CalendarParts/Legend.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-interface Props {
-  house: {
-    house_type: string;
-  };
-}
-
-function Legend({ house }: Props): JSX.Element {
-  return (
-    <div className="legend">
-      <div>
-        <span className="legend-field arrival" />
-        <FormattedMessage id={`${house.house_type}.arrival_date`} />
-      </div>
-      <div>
-        <span className="legend-field booked" />
-        <FormattedMessage id="booked" />
-      </div>
-      <div>
-        <span className="legend-field departure" />
-        <FormattedMessage id={`${house.house_type}.departure_date`} />
-      </div>
-      <div>
-        <span className="legend-field last_minute_discount" />
-        <FormattedMessage id="discount" />
-      </div>
-    </div>
-  );
-}
-
-export default Legend;

package/src/components/CalendarPage/CalendarParts/MonthHeader.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { MONTH_FORMAT, FormatIntl } from '../../../_lib/date_helper';
-
-interface Props { month: Date; }
-
-const MonthHeader = ({ month }:Props): JSX.Element => (    
-      <div className="header bu-calendar-row flex-middle">
-        <div className="bu-calendar-col col-center" style={{ textAlign: 'center' }}>
-          <span>{FormatIntl(month, MONTH_FORMAT)}</span>
-        </div>
-      </div>
-    );
-
-
-export default MonthHeader

package/src/components/CalendarPage/CalendarParts/Months.tsx

@@ -1,37 +0,0 @@
-import { addMonths, format } from 'date-fns';
-import React from 'react';
-import { HouseType } from '../../../types';
-import SingleMonth from './SingleMonth';
-
-interface Props {
-  house: HouseType;
-  numberOfMonths: number;
-  numberOfMonthsInARow: number;
-  currentMonth: Date;
-}
-
-function Months({
-  numberOfMonthsInARow,
-  currentMonth,
-  numberOfMonths,
-
-  house
-}: Props): JSX.Element {
-  let template: JSX.Element[] = [];
-
-  for (let i = 0; i < numberOfMonths; i++) {
-    template.push(
-      <SingleMonth
-        key={format(addMonths(currentMonth, i), 'MM-yyyy')}
-        house={house}
-        numberOfMonthsInARow={numberOfMonthsInARow}
-        currentMonth={currentMonth}
-        count={i}
-      />
-    );
-  }
-
-  return <div className="calendars-row">{template}</div>;
-}
-
-export default Months;

package/src/components/CalendarPage/CalendarParts/RenderCells.tsx

@@ -1,97 +0,0 @@
-import React, { useContext } from 'react';
-import {
-  addDays,
-  endOfMonth,
-  endOfWeek,
-  startOfMonth,
-  startOfWeek,
-  subDays,
-  isBefore,
-  parse
-} from 'date-fns';
-import { FormatIntl } from '../../../_lib/date_helper';
-import DayClasses from './DayClasses';
-import { HouseType } from '../../../types';
-import { CalendarContext, CalendarContextDispatch } from './CalendarContext';
-
-interface CellProps {
-  availabilities: [];
-  month: Date;
-  discounts: [];
-  house: HouseType;
-}
-
-function RenderCells({
-  availabilities,
-  month,
-  discounts,
-  house
-}: CellProps): JSX.Element {
-  const dispatch = useContext(CalendarContextDispatch);
-  const dates = useContext(CalendarContext);
-
-  const monthStart = startOfMonth(month);
-  const monthEnd = endOfMonth(monthStart);
-  const startDate = startOfWeek(monthStart);
-  const endDate = endOfWeek(monthEnd);
-  const rows: JSX.Element[] = [];
-
-  let days: JSX.Element[] = [];
-  let day: Date = startDate;
-
-  while (day <= endDate) {
-    // for (let daz of dayz) {
-    for (let i = 0; i < 7; i++) {
-      let date = FormatIntl(day, 'yyyy-MM-dd');
-      let yesterday = FormatIntl(subDays(day, 1), 'yyyy-MM-dd');
-      let daz = availabilities.find((x) => x.date === date);
-
-      const prevBooked = availabilities.find((x) => x.date === yesterday);
-      const cloneDay = daz;
-
-      days.push(
-        <div
-          className={DayClasses({
-            day,
-            monthStart,
-            discounts,
-            buDate: daz,
-            prevBooked,
-            house,
-            dates
-          })}
-          key={daz.date}
-          role="button"
-          tabIndex={0}
-          onClick={() => {
-            if (
-              isBefore(
-                parse(cloneDay.date, 'yyyy-MM-dd', new Date()),
-                new Date()
-              )
-            ) {
-              return;
-            }
-            dispatch({
-              type: 'clicked',
-              day: cloneDay,
-              house
-            });
-          }}
-        >
-          <span>{FormatIntl(day, 'd')}</span>
-        </div>
-      );
-      day = addDays(day, 1);
-    }
-    rows.push(
-      <div className="bu-calendar-row" key={day}>
-        {days}
-      </div>
-    );
-    days = [];
-  }
-  return <div className="body">{rows}</div>;
-}
-
-export default RenderCells;

package/src/components/CalendarPage/CalendarParts/SingleMonth.tsx

@@ -1,72 +0,0 @@
-import { useQuery } from '@apollo/client';
-import {
-  addMonths,
-  endOfMonth,
-  endOfWeek,
-  startOfMonth,
-  startOfWeek
-} from 'date-fns';
-import React, { useContext } from 'react';
-import { HouseType } from '../../../types';
-import { CALENDAR_QUERY } from '../../../_lib/queries';
-import { AppContext } from '../../AppContext';
-import Loading from '../../icons/loading.svg';
-import MonthHeader from './MonthHeader';
-import RenderCells from './RenderCells';
-import WeekDays from './WeekDays';
-
-interface Props {
-  count: number;
-  currentMonth: Date;
-  house: HouseType;
-  numberOfMonthsInARow: Number;
-}
-
-function SingleMonth({
-  count,
-  currentMonth,
-  house,
-  numberOfMonthsInARow
-}: Props): JSX.Element {
-  const { portalCode, objectCode } = useContext(AppContext);
-
-  let month = addMonths(currentMonth, count);
-  let monthStart = startOfMonth(month);
-  let monthEnd = endOfMonth(month);
-  const variables = {
-    id: portalCode,
-    house_id: objectCode,
-    starts_at: startOfWeek(monthStart),
-    ends_at: endOfWeek(monthEnd)
-  };
-
-  const { loading, error, data } = useQuery(CALENDAR_QUERY, { variables });
-
-  if (loading)
-    return (
-      <div>
-        <Loading />
-      </div>
-    );
-  if (error) {
-    return <div>Error</div>;
-  }
-
-  const results = data.PortalSite.houses[0].availabilities;
-  const discounts = data.Discounts;
-
-  return (
-    <div className={`bu-calendar calendar calendar-${numberOfMonthsInARow}`} key={month}>
-      <MonthHeader month={month} />
-      <WeekDays month={month} />
-      <RenderCells
-        availabilities={results}
-        discounts={discounts}
-        month={month}
-        house={house}
-      />
-    </div>
-  );
-}
-
-export default SingleMonth;

package/src/components/CalendarPage/CalendarParts/StartBooking.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { HouseType } from '../../../types';
-import PriceField from '../PriceField';
-
-interface Props {
-  house: HouseType;
-}
-
-function StartBooking({ house }: Props): JSX.Element {
-  return (
-    <div className="price-overview">
-      <PriceField house={house} />
-    </div>
-  );
-}
-
-export default StartBooking;

package/src/components/CalendarPage/CalendarParts/WeekDays.tsx

@@ -1,27 +0,0 @@
-import { startOfWeek, addDays } from "date-fns";
-import React from "react";
-import { FormatIntl } from "../../../_lib/date_helper";
-
-interface Props {
-    month: Date
-}
-
-function WeekDays({ month }: Props):JSX.Element {
-const dateFormat = 'E';
-    let days: JSX.Element[] = [];
-
-    let startDate: Date = startOfWeek(month);
-
-    for (let i = 0; i < 7; i++) {
-      days.push(
-        <div className="bu-calendar-col col-center" key={i}>
-          {FormatIntl(addDays(startDate, i), dateFormat)}
-        </div>
-      );
-    }
-
-    return <div className="days bu-calendar-row">{days}</div>;
-    
-}
-
-export default WeekDays