bukazu-portal-react 2.1.21 → 3.0.2

package/cypress.json

@@ -1,9 +0,0 @@
-{
-  "baseUrl": "http://localhost:8080/",
-  "experimentalStudio": true,
-  "component": {
-    "testFiles": "**/*.test.{js,ts,jsx,tsx}",
-    "componentFolder": "src"
-  },
-  "projectId": "rpsk7v"
-}

package/rollup.config.js

@@ -1,30 +0,0 @@
-import resolve from 'rollup-plugin-node-resolve';
-import babel from 'rollup-plugin-babel';
-import json from '@rollup/plugin-json';
-import commonjs from '@rollup/plugin-commonjs';
-import postcss from 'rollup-plugin-postcss';
-
-export default {
-  input: 'src/index.js',
-  output: [
-    {
-      file: 'build/index.js',
-      format: 'cjs',
-      exports: 'auto',
-    },
-  ],
-  plugins: [
-    babel({
-      exclude: 'node_modules/**',
-    }),
-    postcss({
-      extract: true,
-    }),
-    commonjs(),
-    resolve(),
-    json({
-      namedExports: false,
-    }),
-  ],
-  external: ['react', 'react-dom'],
-};

package/src/_lib/format.js

@@ -1,16 +0,0 @@
-var format = require('date-fns/format');
-
-var locales = {
-  en: require('date-fns/locale/en'),
-  nl: require('date-fns/locale/nl'),
-  de: require('date-fns/locale/de'),
-  fr: require('date-fns/locale/fr'),
-  it: require('date-fns/locale/it'),
-  es: require('date-fns/locale/es'),
-};
-
-module.exports = function(date, formatStr) {
-  return format(date, formatStr, {
-    locale: locales[window.__localeId__], // or global.__localeId__
-  });
-};

package/src/components/App.js

@@ -1,164 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Query } from '@apollo/client/react/components';
-import Loading from './icons/loading.svg';
-
-import 'react-date-picker/dist/DatePicker.css';
-import 'react-calendar/dist/Calendar.css';
-
-import { PORTAL_QUERY } from '../_lib/queries';
-
-import SearchPage from './SearchPage/SearchPage';
-import CalendarPage from './CalendarPage/CalendarPage';
-import ReviewsPage from './ReviewsPage/ReviewsPage';
-import SafeBooking from './SafeBooking';
-import { ApiError } from './Error';
-import ErrorBoundary from './ErrorBoundary';
-
-// import 'react-dates/lib/css/_datepicker.css';
-
-class App extends Component {
-  constructor(props) {
-    super(props);
-
-    this.pageWidth = React.createRef();
-  }
-
-  /**
-   * Calculate & Update state of new dimensions
-   */
-  updateDimensions() {
-    if (this.pageWidth.current.offsetWidth < 875) {
-      this.pageWidth.current.classList.add('bu-smaller');
-    } else {
-    }
-  }
-
-  /**
-   * Add event listener
-   */
-  componentDidMount() {
-    this.updateDimensions();
-    // window.addEventListener("resize", this.updateDimensions.bind(this));
-  }
-
-  render() {
-    const { portalCode, objectCode, pageType, locale, filters, id, className } =
-      this.props;
-
-    return (
-      <div ref={this.pageWidth} id={id} className={className}>
-        <Query query={PORTAL_QUERY} variables={{ id: portalCode, locale }}>
-          {({ loading, error, data }) => {
-            if (loading)
-              return (
-                <div>
-                  <Loading />
-                </div>
-              );
-            if (error) {
-              return (
-                <div>
-                  <ApiError errors={{ ...error }} />
-                </div>
-              );
-            }
-
-            const PortalSite = data.PortalSite;
-            let options = data.PortalSite.options;
-
-            let root = document.documentElement;
-
-            root.style.setProperty(
-              '--bukazu-discount',
-              `${options.colors ? options.colors.discount : 'orange'}`
-            );
-            root.style.setProperty(
-              '--bukazu-cell',
-              `${options.colors ? options.colors.cell : '#fff'}`
-            );
-            root.style.setProperty(
-              '--bukazu-arrival',
-              `${options.colors ? options.colors.arrival : '#6eeb83'}`
-            );
-            root.style.setProperty(
-              '--bukazu-booked',
-              `${options.colors ? options.colors.booked : '#ea2b1f'}`
-            );
-            root.style.setProperty(
-              '--bukazu-departure',
-              `${options.colors ? options.colors.departure : 'yellow'}`
-            );
-
-            root.style.setProperty(
-              '--bukazu-button',
-              `${
-                options.colors
-                  ? options.colors.button
-                  : 'rgba(23, 190, 187, 0.75)'
-              }`
-            );
-            root.style.setProperty(
-              '--bukazu-button_cta',
-              `${options.colors ? options.colors.buttonCta : '#e28413'}`
-            );
-            root.style.setProperty(
-              '--bukazu-background_month',
-              `${options.colors ? options.colors.month_background : '#e28413'}`
-            );
-
-            if (objectCode && objectCode !== null && pageType !== 'reviews') {
-              return (
-                <section>
-                  <ErrorBoundary>
-                    <CalendarPage
-                      PortalSite={PortalSite}
-                      objectCode={objectCode}
-                      locale={locale}
-                    />
-                    <SafeBooking locale={locale} />
-                  </ErrorBoundary>
-                </section>
-              );
-            } else if (
-              objectCode &&
-              objectCode !== null &&
-              pageType === 'reviews'
-            ) {
-              return (
-                <ReviewsPage
-                  PortalSite={PortalSite}
-                  locale={locale}
-                  options={options}
-                  filters={filters}
-                />
-              );
-            } else {
-              return (
-                <SearchPage
-                  PortalSite={PortalSite}
-                  locale={locale}
-                  options={options}
-                  filters={filters}
-                />
-              );
-            }
-          }}
-        </Query>
-      </div>
-    );
-  }
-}
-
-App.defaultProps = {
-  filters: {},
-};
-
-App.propTypes = {
-  portalCode: PropTypes.string.isRequired,
-  objectCode: PropTypes.string,
-  locale: PropTypes.string.isRequired,
-  filters: PropTypes.object.isRequired,
-};
-
-export default App;

package/src/components/CalendarPage/BookingForm.js

@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Query } from '@apollo/client/react/components';
-import Loading from '../icons/loading.svg';
-import FormCreator from './FormCreator';
-import { BOOKING_PRICE_QUERY } from '../../_lib/queries';
-
-function BookingForm({ booking, locale, onReturn })  {
-  return (
-    <Query
-      query={BOOKING_PRICE_QUERY}
-      variables={{
-        id: booking.portalCode,
-        house_id: booking.objectCode,
-        starts_at: booking.arrivalDate.date,
-        ends_at: booking.departureDate.date,
-        locale,
-      }}
-    >
-      {({ loading, error, data }) => {
-        if (loading)
-          return (
-            <div>
-              <Loading />
-            </div>
-          );
-        if (error) {
-          return <div>Error</div>;
-        }
-
-        const result = data.PortalSite.houses[0];
-        const options = data.PortalSite.options;
-
-        return (
-          <FormCreator
-            house={result}
-            options={options}
-            booking={booking}
-            PortalSite={data.PortalSite}
-            locale={locale}
-            onReturn={() => {
-              onReturn(booking);
-            }}
-          />
-        );
-      }}
-    </Query>
-  );   
-}
-
-BookingForm.propTypes = {
-  booking: PropTypes.object.isRequired,
-  locale: PropTypes.string.isRequired,
-  onReturn: PropTypes.func.isRequired,
-};
-
-export default BookingForm;

package/src/components/CalendarPage/Calendar.js

@@ -1,373 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import dateFns from "date-fns";
-import { Query } from "@apollo/client/react/components";
-import Loading from "../icons/loading.svg";
-import format from "../../_lib/format";
-import isAfter from "date-fns/is_after";
-import CalendarHeader from "./CalendarHeader";
-import PriceField from "./PriceField";
-import differenceInCalendarDays from "date-fns/difference_in_calendar_days";
-
-import { CALENDAR_QUERY } from "../../_lib/queries";
-import { FormattedMessage } from "react-intl";
-import AssistanceMessage from "./formParts/AssistanceMessage";
-
-class Calendar extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.bookingStart = this.bookingStart.bind(this);
-  }
-
-  state = {
-    currentMonth: new Date(),
-    selectedDate: "",
-    numberOfMonths: this.props.numberOfMonths,
-    numberOfMonthsInARow: this.props.numberOfMonthsInARow,
-    house: this.props.house,
-    arrivalDate: "",
-    departureDate: "",
-    minNights: null,
-    startBooking: false,
-  };
-
-  renderHeader(month) {
-    const dateFormat = "MMMM YYYY";
-
-    return (
-      <div className="header row flex-middle">
-        <div className="col col-center" style={{ textAlign: "center" }}>
-          <span>{format(month, dateFormat)}</span>
-        </div>
-      </div>
-    );
-  }
-
-  renderDays() {
-    const dateFormat = "dd";
-    const days = [];
-
-    let startDate = dateFns.startOfWeek(this.state.currentMonth);
-
-    for (let i = 0; i < 7; i++) {
-      days.push(
-        <div className="col col-center" key={i}>
-          {format(dateFns.addDays(startDate, i), dateFormat)}
-        </div>
-      );
-    }
-
-    return <div className="days row">{days}</div>;
-  }
-
-  renderCells(availabilities, month, discounts) {
-    const { selectedDate, departureDate, house, arrivalDate } = this.state;
-    const monthStart = dateFns.startOfMonth(month);
-    const monthEnd = dateFns.endOfMonth(monthStart);
-    const startDate = dateFns.startOfWeek(monthStart);
-    const endDate = dateFns.endOfWeek(monthEnd);
-    const today = new Date();
-
-    const dateFormat = "D";
-    const rows = [];
-
-    let days = [];
-    let day = startDate;
-    let formattedDate = "";
-    let dayz = availabilities;
-
-    while (day <= endDate) {
-      // for (let daz of dayz) {
-      for (let i = 0; i < 7; i++) {
-        formattedDate = dateFns.format(day, dateFormat);
-        let date = dateFns.format(day, "YYYY-MM-DD");
-        let yesterday = dateFns.format(dateFns.subDays(date, 1), "YYYY-MM-DD");
-        let daz = dayz.find((x) => x.date === date);
-
-        const prevBooked = dayz.find((x) => x.date === yesterday);
-        const cloneDay = daz;
-        const discount = discounts.find(
-          (x) =>
-            dateFns.isBefore(dateFns.subDays(x.discount_starts_at, 1), date) &&
-            isAfter(dateFns.addDays(x.discount_ends_at, 1), date)
-        );
-        const minimum =
-          differenceInCalendarDays(daz.date, selectedDate) >=
-          arrivalDate.min_nights;
-        const maximum =
-          differenceInCalendarDays(daz.date, selectedDate) <=
-            house.max_nights &&
-          differenceInCalendarDays(daz.date, selectedDate) <=
-            arrivalDate.max_nights;
-
-        const daysFromToday = differenceInCalendarDays(daz.date, today);
-        const last_minute =
-          daysFromToday <= house.last_minute_days && daysFromToday > 0;
-
-        const highlight =
-          daz.departure && isAfter(daz.date, selectedDate)
-            ? minimum
-              ? maximum
-                ? prevBooked.max_nights !== 0
-                  ? "departure"
-                  : null
-                : ""
-              : ""
-            : "";
-
-        days.push(
-          <div
-            className={`col cell
-        ${
-          !dateFns.isSameMonth(day, monthStart)
-            ? "disabled"
-            : dateFns.isSameDay(day, selectedDate) ||
-              dateFns.isSameDay(day, departureDate.date)
-            ? "selected"
-            : ""
-        }
-              ${
-                dateFns.isAfter(day, selectedDate) &&
-                dateFns.isBefore(day, departureDate.date)
-                  ? "selected"
-                  : ""
-              }
-              ${
-                (last_minute || daz.special_offer > 0) 
-                  ? "discount"
-                  : ""
-              }
-              ${discount ? "discount" : ""}
-              ${
-                daz.arrival
-                  ? dateFns.isAfter(daz.date, new Date())
-                    ? daz.max_nights !== 0
-                      ? prevBooked.max_nights === 0
-                        ? "departure-arrival"
-                        : "arrival"
-                      : ""
-                    : ""
-                  : ""
-              }
-              ${highlight}
-              ${
-                daz.max_nights === 0
-                  ? prevBooked.max_nights !== 0
-                    ? "booked-departure"
-                    : "booked"
-                  : prevBooked.max_nights === 0
-                  ? "booked"
-                  : ""
-              }`}
-            key={day}
-            date={daz.date}
-            role="button"
-            tabIndex={0}
-            onClick={() => this.onDateClick(cloneDay)}
-            onKeyPress={() => this.onDateClick(cloneDay)}
-          >
-            <span>
-              {!dateFns.isSameMonth(day, monthStart) ? "" : formattedDate}
-            </span>
-          </div>
-        );
-        day = dateFns.addDays(day, 1);
-      }
-      rows.push(
-        <div className="row" key={day}>
-          {days}
-        </div>
-      );
-      days = [];
-    }
-    return <div className="body">{rows}</div>;
-  }
-
-  renderMonths() {
-    let template = [];
-    for (let i = 0; i < this.state.numberOfMonths; i++) {
-      template.push(this.renderSingleMonth(i));
-    }
-    return template;
-  }
-
-  renderSingleMonth(count) {
-    const { numberOfMonthsInARow } = this.state;
-    let month = dateFns.addMonths(this.state.currentMonth, count);
-    let monthStart = dateFns.startOfMonth(month);
-    let monthEnd = dateFns.endOfMonth(month);
-    const variables = {
-      id: this.props.portalCode,
-      house_id: this.props.objectCode,
-      starts_at: dateFns.startOfWeek(monthStart),
-      ends_at: dateFns.endOfWeek(monthEnd),
-      locale: this.props.locale,
-    };
-
-    return (
-      <div className={`calendar calendar-${numberOfMonthsInARow}`} key={month}>
-        {this.renderHeader(month)}
-        {this.renderDays()}
-        <Query query={CALENDAR_QUERY} variables={variables}>
-          {({ loading, error, data }) => {
-            if (loading)
-              return (
-                <div>
-                  <Loading />
-                </div>
-              );
-            if (error) {
-              return <div>Error</div>;
-            }
-
-            const results = data.PortalSite.houses[0].availabilities;
-            const discounts = data.Discounts;
-
-            return this.renderCells(results, month, discounts);
-          }}
-        </Query>
-      </div>
-    );
-  }
-
-  onDateClick = (day) => {
-    const { arrivalDate, selectedDate, house } = this.state;
-    if (
-      day.departure &&
-      isAfter(day.date, selectedDate) &&
-      differenceInCalendarDays(day.date, selectedDate) <= house.max_nights &&
-      differenceInCalendarDays(day.date, selectedDate) >=
-        arrivalDate.min_nights &&
-      differenceInCalendarDays(day.date, selectedDate) <= arrivalDate.max_nights
-    ) {
-      this.setState({
-        departureDate: day,
-        startBooking: true,
-      });
-    } else if (day.arrival) {
-      this.setState({
-        startBooking: false,
-        selectedDate: dateFns.parse(day.date),
-        arrivalDate: day,
-        minNights: day.min_nights,
-        departureDate: "",
-      });
-    }
-  };
-
-  nextMonth = () => {
-    const { numberOfMonths, currentMonth } = this.state;
-    this.setState({
-      currentMonth: dateFns.addMonths(currentMonth, numberOfMonths),
-    });
-  };
-
-  prevMonth = () => {
-    const { numberOfMonths, currentMonth } = this.state;
-    this.setState({
-      currentMonth: dateFns.subMonths(currentMonth, numberOfMonths),
-    });
-  };
-
-  reset = () => {
-    this.setState({
-      selectedDate: "",
-      arrivalDate: "",
-      departureDate: "",
-      startBooking: false,
-    });
-  };
-
-  showBooking() {
-    const { startBooking, arrivalDate, departureDate, house, minNights } = this.state;
-    const { portalCode, objectCode, locale } = this.props;
-
-    return (
-      <PriceField
-        portalCode={portalCode}
-        objectCode={objectCode}
-        locale={locale}
-        startsAt={arrivalDate.date || null}
-        endsAt={departureDate.date || null}
-        minNights={minNights}
-        disabled={startBooking}
-        onStartBooking={this.bookingStart}
-        house={house}
-      />
-    );
-  }
-
-  bookingStart(status, persons) {
-    const { arrivalDate, departureDate } = this.state;
-    const { portalCode, objectCode, locale } = this.props;
-    const booking = {
-      portalCode,
-      objectCode,
-      arrivalDate,
-      departureDate,
-      is_option: status,
-      locale,
-      persons,
-    };
-    this.props.onBooking(booking);
-  }
-
-  render() {
-    const { house, arrivalDate, departureDate, minNights } = this.state;
-
-    return (
-      <div className="calendar-container ">
-        <div className="price-overview">{this.showBooking()}</div>
-        <div className="calendar-section">
-          <CalendarHeader
-            onGoNext={this.nextMonth}
-            onGoPrev={this.prevMonth}
-            onReset={this.reset}
-          />
-          <div className="calendars-row">{this.renderMonths()}</div>
-          <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>
-          <AssistanceMessage
-            house={house}
-            arrivalDate={arrivalDate}
-            departureDate={departureDate}
-            minNights={minNights}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-Calendar.defaultProps = {
-  numberOfMonths: 4,
-  numberOfMonthsInARow: 2,
-};
-
-Calendar.propTypes = {
-  numberOfMonths: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  house: PropTypes.object.isRequired,
-  onBooking: PropTypes.func.isRequired,
-  objectCode: PropTypes.string.isRequired,
-  portalCode: PropTypes.string.isRequired,
-  locale: PropTypes.string.isRequired,
-};
-
-export default Calendar;

package/src/components/CalendarPage/CalendarHeader.js

@@ -1,58 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ArrowRight from '../icons/ArrowRight.svg';
-import ArrowLeft from '../icons/ArrowLeft.svg';
-import Reload from '../icons/Reload.svg';
-
-function CalendarHeader({ onGoPrev, onReset, onGoNext }) { 
-    return (
-      <div className="calendars-header">
-        <div
-          className="col bu-prev"
-          style={{ textAlign: 'center' }}
-          onClick={onGoPrev}
-          onKeyPress={onGoPrev}
-          tabIndex={0}
-          role="button"
-        >
-          <div className="icon">
-            {' '}
-            <ArrowLeft />
-          </div>
-        </div>
-        <div
-          className="col bu-reset"
-          onClick={onReset}
-          onKeyPress={onReset}
-          style={{ textAlign: 'center' }}
-          tabIndex={0}
-          role="button"
-        >
-          <div className="icon">
-            <Reload />
-          </div>
-        </div>
-        <div
-          className="col bu-next"
-          onClick={onGoNext}
-          onKeyPress={onGoNext}
-          style={{ textAlign: 'center' }}
-          tabIndex={0}
-          role="button"
-        >
-          <div className="icon">
-            <ArrowRight />
-          </div>
-        </div>
-      </div>
-    );
-  
-}
-
-CalendarHeader.propTypes = {
-  onGoNext: PropTypes.func.isRequired,
-  onGoPrev: PropTypes.func.isRequired,
-  onReset: PropTypes.func.isRequired,
-};
-
-export default CalendarHeader;