bukazu-portal-react 2.1.21 → 3.0.2

package/src/components/CalendarPage/Calendar.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { addMonths, subMonths } from 'date-fns';
+import CalendarHeader from './CalendarParts/CalendarHeader';
+import AssistanceMessage from './formParts/AssistanceMessage';
+import Legend from './CalendarParts/Legend';
+import Months from './CalendarParts/Months';
+import StartBooking from './CalendarParts/StartBooking';
+import { HouseType } from '../../types';
+
+interface Props {
+  numberOfMonths: number;
+  numberOfMonthsInARow: number;
+  house: HouseType;
+}
+
+function Calendar({
+  numberOfMonths,
+  house,
+  numberOfMonthsInARow
+}: Props): JSX.Element {
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+
+  return (
+    <div className="calendar-container ">
+      <StartBooking house={house} />
+      <div className="calendar-section">
+        <CalendarHeader
+          changeMonth={setCurrentMonth}
+          currentMonth={currentMonth}
+          numberOfMonths={numberOfMonths}
+        />
+        <Months
+          house={house}
+          numberOfMonths={numberOfMonths}
+          numberOfMonthsInARow={numberOfMonthsInARow}
+          currentMonth={currentMonth}
+        />
+        <Legend house={house} />
+        <AssistanceMessage house={house} />
+      </div>
+    </div>
+  );
+}
+
+Calendar.defaultProps = {
+  numberOfMonths: 4,
+  numberOfMonthsInARow: 2
+};
+
+export default Calendar;

package/src/components/CalendarPage/CalendarPage.tsx

@@ -0,0 +1,43 @@
+import React, { useContext } from 'react';
+import BookingForm from './BookingForm';
+import GenerateCalendar from './CalendarParts/GenerateCalendar';
+import { PortalSiteType } from '../../types';
+import {
+  CalendarContext,
+  CalendarProvider
+} from './CalendarParts/CalendarContext';
+
+interface Props {
+  PortalSite: PortalSiteType;
+}
+
+function CalendarPage({ PortalSite }: Props): JSX.Element {
+  const { bookingStarted } = useContext(CalendarContext);
+
+  if (bookingStarted) {
+    return <BookingForm />;
+  } else {
+    return <GenerateCalendar PortalSite={PortalSite} />;
+  }
+}
+
+CalendarPage.DefaultProps = {
+  PortalSite: {
+    options: {
+      bookingForm: {
+        numberOfMonths: 4,
+        numberOfMonthsInARow: 2
+      }
+    }
+  }
+};
+
+function CalendarWrapper({ PortalSite }: Props): JSX.Element {
+  return (
+    <CalendarProvider>
+      <CalendarPage PortalSite={PortalSite} />
+    </CalendarProvider>
+  );
+}
+
+export default CalendarWrapper;

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

@@ -0,0 +1,89 @@
+import { differenceInCalendarDays, isAfter } from 'date-fns';
+import React, { createContext, useReducer } from 'react';
+import { BuDate, HouseType } from '../../../types';
+import { Parse_EN_US } from '../../../_lib/date_helper';
+import { BookingType } from '../calender_types';
+
+const initialBooking: BookingType = {
+  selectedDate: null,
+  arrivalDate: null,
+  departureDate: null,
+  bookingStarted: false,
+  persons: 2
+};
+
+export const CalendarContext = createContext<BookingType>(initialBooking);
+export const CalendarContextDispatch = createContext<Function>(calendarReducer);
+
+export function CalendarProvider({
+  children
+}: {
+  children: React.ReactNode;
+}): React.ReactNode {
+  const [booking_state, dispatch] = useReducer(calendarReducer, initialBooking);
+  return (
+    <CalendarContext.Provider value={booking_state}>
+      <CalendarContextDispatch.Provider value={dispatch}>
+        {children}
+      </CalendarContextDispatch.Provider>
+    </CalendarContext.Provider>
+  );
+}
+
+function calendarReducer(
+  bookingState: BookingType,
+  action: { type: string; house: HouseType; day: BuDate; persons: number }
+): BookingType {
+  console.log({ action });
+  switch (action.type) {
+    case 'clicked': {
+      const { day, house } = action;
+      const { selectedDate, arrivalDate } = bookingState;
+      const date = Parse_EN_US(day.date);
+
+      if (
+        day.departure &&
+        selectedDate &&
+        arrivalDate &&
+        isAfter(date, selectedDate) &&
+        differenceInCalendarDays(date, selectedDate) <= house.max_nights &&
+        differenceInCalendarDays(date, selectedDate) >=
+          arrivalDate.min_nights &&
+        differenceInCalendarDays(date, selectedDate) <= arrivalDate.max_nights
+      ) {
+        return {
+          ...bookingState,
+          departureDate: day
+        };
+      } else if (day.arrival) {
+        return {
+          bookingStarted: false,
+          selectedDate: date,
+          arrivalDate: day,
+          departureDate: null,
+          persons: 2
+        };
+      }
+      return bookingState;
+    }
+    case 'reset': {
+      return initialBooking;
+    }
+    case 'start': {
+      return {
+        ...bookingState,
+        bookingStarted: true,
+        persons: action.persons
+      };
+    }
+    case 'return': {
+      return {
+        ...bookingState,
+        bookingStarted: false
+      };
+    }
+    default: {
+      throw Error('Unknown action: ' + action.type);
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+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="col bu-prev"
+        style={{ textAlign: 'center' }}
+        onClick={prev}
+        tabIndex={0}
+        role="button"
+      >
+        <div className="icon">
+          {' '}
+          <ArrowLeft />
+        </div>
+      </div>
+      <div
+        className="col bu-reset"
+        onClick={() => {
+          dispatch({
+            type: 'reset'
+          });
+        }}
+        style={{ textAlign: 'center' }}
+        tabIndex={0}
+        role="button"
+      >
+        <div className="icon">
+          <Reload />
+        </div>
+      </div>
+      <div
+        className="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

@@ -0,0 +1,111 @@
+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 = ['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');
+      }
+    }
+  }
+
+  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

@@ -0,0 +1,64 @@
+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';
+
+interface Props {
+  PortalSite: PortalSiteType;
+}
+
+function GenerateCalendar({ PortalSite }: Props): JSX.Element {
+  const { portalCode, objectCode } = useContext(AppContext);
+  const { loading, error, data } = useQuery(SINGLE_HOUSE_QUERY, {
+    variables: { portalCode, objectCode }
+  });
+
+  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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,15 @@
+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 row flex-middle">
+        <div className="col col-center" style={{ textAlign: 'center' }}>
+          <span>{FormatIntl(month, MONTH_FORMAT)}</span>
+        </div>
+      </div>
+    );
+
+
+export default MonthHeader

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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,94 @@
+import React, { useContext } from 'react';
+import {
+  addDays,
+  endOfMonth,
+  endOfWeek,
+  startOfMonth,
+  startOfWeek,
+  subDays,
+  isBefore,
+  isAfter,
+  differenceInCalendarDays,
+  addMonths,
+  isSameMonth,
+  parse,
+  isSameDay
+} from 'date-fns';
+import { FormatIntl, Parse_EN_US } 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={() => {
+            dispatch({
+              type: 'clicked',
+              day: cloneDay,
+              house
+            });
+          }}
+        >
+          <span>{FormatIntl(day, 'd')}</span>
+        </div>
+      );
+      day = addDays(day, 1);
+    }
+    rows.push(
+      <div className="row" key={day}>
+        {days}
+      </div>
+    );
+    days = [];
+  }
+  return <div className="body">{rows}</div>;
+}
+
+export default RenderCells;

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

@@ -0,0 +1,72 @@
+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={`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

@@ -0,0 +1,17 @@
+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;