bukazu-portal-react 2.1.21 → 3.0.2

package/src/components/CalendarPage/CalendarPage.js

@@ -1,158 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Query } from '@apollo/client/react/components';
-import { gql}  from "@apollo/client";
-import Calendar from './Calendar';
-import BookingForm from './BookingForm';
-import Loading from '../icons/loading.svg';
-import { ApiError } from '../Error';
-
-export const HOUSE_QUERY = gql`
-  query PortalSiteHousesQuery($id: ID!, $house_id: String!) {
-    PortalSite(id: $id) {
-      id
-      houses(house_code: $house_id) {
-        id
-        name
-        max_nights
-        last_minute_days
-        discounts
-        discounts_info
-        house_type
-        persons
-      }
-    }
-  }
-`;
-
-class CalendarPage extends Component {
-  constructor(props) {
-    super(props);
-
-    this.onBooking = this.onBooking.bind(this);
-    this.onReturn = this.onReturn.bind(this);
-
-    this.state = {
-      bookingStarted: false,
-      booking: {
-        objectCode: '',
-        portalCode: '',
-        arrivalDate: {},
-        departureDate: {},
-        in_option: false,
-      },
-    };
-  }
-
-  onBooking(booking) {
-    this.setState({
-      bookingStarted: true,
-      booking,
-    });
-  }
-
-  onReturn(booking) {
-    this.setState({
-      bookingStarted: false,
-      booking,
-    });
-  }
-
-  calendar() {
-    const { objectCode, PortalSite, locale } = this.props;
-    const variables = {
-      id: PortalSite.portal_code,
-      house_id: objectCode,
-      locale,
-    };
-    return (
-      <Query query={HOUSE_QUERY} variables={variables}>
-        {({ loading, error, data }) => {
-          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) => (
-                <div key={result.id}>
-                  <div className="house-name">{result.name}</div>
-                  <Calendar
-                    portalCode={variables.id}
-                    objectCode={variables.house_id}
-                    numberOfMonths={numberOfMonths}
-                    numberOfMonthsInARow={numberOfMonthsInARow}
-                    house={result}
-                    locale={locale}
-                    onBooking={this.onBooking}
-                  />
-                </div>
-              ))}
-            </div>
-          );
-        }}
-      </Query>
-    );
-  }
-
-  bookingForm() {
-    return (
-      <BookingForm
-        booking={this.state.booking}
-        locale={this.props.locale}
-        onReturn={this.onReturn}
-      />
-    );
-  }
-
-  render() {
-    if (this.state.bookingStarted) {
-      return this.bookingForm();
-    } else {
-      return this.calendar();
-    }
-  }
-}
-
-CalendarPage.DefaultProps = {
-  PortalSite: {
-    options: {
-      bookingForm: {
-        numberOfMonths: 4,
-        numberOfMonthsInARow: 2,
-      },
-    },
-  },
-};
-
-CalendarPage.propTypes = {
-  objectCode: PropTypes.string.isRequired,
-  // portalCode: PropTypes.string.isRequired,
-  PortalSite: PropTypes.object.isRequired,
-  locale: PropTypes.string.isRequired,
-};
-
-export default CalendarPage;

package/src/components/CalendarPage/FormCreator.js

@@ -1,278 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Formik, Form } from 'formik';
-import { FormattedMessage } from 'react-intl';
-import { Mutation } from '@apollo/client/react/components';
-import { CREATE_BOOKING_MUTATION } from '../../_lib/queries';
-import { Insurances } from './formParts/insurances';
-import Discount from './formParts/discount';
-import Summary from './Summary';
-import Modal from '../Modal';
-import DefaultBookingFields from './formParts/DefaultBookingFields';
-import SuccessMessage from './formParts/SuccessMessage';
-import OptionalBookingFields, { isInt } from './formParts/OptionalBookingFields';
-import includes from 'array-includes';
-import { ApiError } from '../Error';
-import {
-  initializeBookingFields,
-  byString,
-  validateAge,
-} from './formParts/BookingHelpers';
-import OptionalCosts from './formParts/OptionalCosts';
-import Guests from './formParts/Guests';
-class FormCreator extends React.Component {
-  state = {
-    formSubmit: false,
-    bookingFields: this.props.options.bookingFields || DefaultBookingFields,
-  };
-
-  validate = (values) => {
-    const { babies_extra, persons } = this.props.house;
-
-    let errors = {};
-
-    let babies = Number(values.babies) - Number(babies_extra);
-    if (babies < 0) {
-      babies = 0;
-    }
-    values.persons = Number(values.children) + Number(values.adults) + babies;
-
-    for (let field of this.state.bookingFields) {
-      if (field.required) {
-        if (isInt(field.id)) {
-          const validateValue = byString(values, `extra_fields.booking_field_${field.id}`);
-
-          if (!validateValue || validateValue === '') {
-            errors[field.id] = <FormattedMessage id="required" />;
-          }
-        } else {
-          const validateValue = byString(values, field.id);
-
-          if (!validateValue || validateValue === '') {
-            errors[field.id] = <FormattedMessage id="required" />;
-          }
-        }
-      }
-    }
-
-    if (values.adults < 1) {
-      errors.adults = <FormattedMessage id="at_least_1_adult" />;
-    }
-    if (Number(values.discount) > 0 && !values.discount_reason) {
-      errors.discount_reason = (
-        <FormattedMessage id="you_need_to_give_reason" />
-      );
-    }
-    if (values.persons > persons) {
-      errors.max_persons = <FormattedMessage id="max_persons_reached" />;
-    }
-
-    if (
-      values.cancel_insurance !== 0 &&
-      validateAge(values.extra_fields?.date_of_birth)
-    ) {
-      errors['extra_fields.date_of_birth'] = (
-        <FormattedMessage id="at_least_18y_old" />
-      );
-      errors['insurances'] = (
-        <FormattedMessage id="at_least_18y_old" />
-      );
-    }
-
-    if (
-      values.cancel_insurance !== 0 &&
-      !includes(['nl', 'de', 'be'], values.country)
-    ) {
-      errors['insurances'] = (
-        <FormattedMessage id="can_only_take_insurance_in_de_be_nl" />
-      );
-      errors['country'] = (
-        <FormattedMessage id="can_only_take_insurance_in_de_be_nl" />
-      );
-    }
-
-    return errors;
-  };
-
-  render() {
-    const { bookingFields } = this.state;
-
-    const { house, locale, PortalSite, options, booking } = this.props;
-    const bookingPrice = house.booking_price;
-
-    let costs = {};
-
-    for (const val of bookingPrice.optional_house_costs) {
-      costs[val.id] = '0';
-    }
-
-    const optBookingFieldsInitialized = initializeBookingFields(bookingFields);
-
-    return (
-      <Mutation mutation={CREATE_BOOKING_MUTATION}>
-        {(createBooking, { loading, error, data }) => (
-          <Formik
-            validate={this.validate}
-            initialValues={{
-              ...booking,
-              ...optBookingFieldsInitialized,
-              costs,
-              adults: booking.persons,
-              children: 0,
-              babies: 0,
-              persons: 2,
-              discount: 0,
-              country: 'nl',
-            }}
-            onSubmit={(values, { setSubmitting }) => {
-              let variables = {
-                ...values,
-                is_option: JSON.parse(values.is_option),
-                house_code: values.objectCode,
-                portal_code: values.portalCode,
-                comment: values.comment || '',
-                language: locale,
-                locale: locale,
-                country: values.country.toUpperCase(),
-                adults: Number(values.adults),
-                children: Number(values.children) || 0,
-                babies: Number(values.babies) || 0,
-                discount: Number(values.discount) || 0,
-                damage_insurance: Number(values.damage_insurance) || 0,
-                cancel_insurance: Number(values.cancel_insurance) || 0,
-                travel_insurance: Number(values.travel_insurance) || 0,
-                arrival_date: values.arrivalDate.date,
-                departure_date: values.departureDate.date,
-                costs: JSON.stringify(values.costs),
-                extra_fields: JSON.stringify(values.extra_fields),
-              };
-
-              createBooking({ variables })
-                .then(() => {
-                  if (
-                    options.bookingForm &&
-                    options.bookingForm.redirectUrl &&
-                    options.bookingForm.redirectUrl !== ''
-                  ) {
-                    window.location = options.bookingForm.redirectUrl;
-                  } else {
-                    setTimeout(() => {
-                      this.props.onReturn();
-                    }, 15000);
-                  }
-                })
-                .catch((err) => {});
-            }}
-            render={({ errors, touched, values, status, isSubmitting }) => (
-              <Form className="form">
-                {loading && <div className="return-message">Loading...</div>}
-                {error && (
-                  <Modal show={true}>
-                    <ApiError errors={error} modal={true} />
-                  </Modal>
-                )}
-                {data && (
-                  <Modal show={true}>
-                    <SuccessMessage />
-                  </Modal>
-                )}
-
-                <div className="form-content">
-                  <div className="form-section">
-                    <a
-                      className="return-link"
-                      role="link"
-                      tabIndex={0}
-                      onKeyPress={() => {
-                        this.props.onReturn();
-                      }}
-                      onClick={() => {
-                        this.props.onReturn();
-                      }}
-                    >
-                      <FormattedMessage id="return_to_calendar" />
-                    </a>
-                    <h2>
-                      <FormattedMessage id="stay_details" />
-                    </h2>
-                    <Guests options={options} house={house} />
-
-                    {errors.max_persons && (
-                      <div className="error-message persons">
-                        {errors.max_persons}
-                      </div>
-                    )}
-                  </div>
-                  <Discount errors={errors} house={house} options={options} values={values} />
-
-                  <Insurances house={house} values={values} />
-
-                  <OptionalCosts costs={bookingPrice.optional_house_costs} />
-
-                  <OptionalBookingFields
-                    bookingFields={bookingFields}
-                    errors={errors}
-                    touched={touched}
-                    PortalSite={PortalSite}
-                    values={values}
-                  />
-                </div>
-
-                <div className="form-sum">
-                  <Summary house={house} values={values} />
-                  {status && status.msg && <div>{status.msg}</div>}
-                  <div className="terms">
-                    <FormattedMessage id="agree_with" />{' '}
-                    <FormattedMessage id="terms">
-                      {(fm) => (
-                        <Modal buttonText={fm}>
-                          <div
-                            style={{
-                              width: '90vh',
-                              height: '90vh',
-                            }}
-                          >
-                            <iframe
-                              src={house.rental_terms}
-                              width="100%"
-                              height="100%"
-                              title="Terms"
-                              frameBorder="0"
-                            />
-                          </div>
-                        </Modal>
-                      )}
-                    </FormattedMessage>
-                  </div>
-                  {includes([1, 2], Number(values.cancel_insurance)) ? (
-                    <div className="terms">
-                      <FormattedMessage id="comply_insurance_card" />
-                    </div>
-                  ) : null}
-                  <button
-                    className="button"
-                    type="submit"
-                    disabled={isSubmitting}
-                  >
-                    <FormattedMessage id="book" />
-                  </button>
-                </div>
-              </Form>
-            )}
-          />
-        )}
-      </Mutation>
-    );
-  }
-}
-
-FormCreator.propTypes = {
-  house: PropTypes.object.isRequired,
-  options: PropTypes.object.isRequired,
-  locale: PropTypes.string.isRequired,
-  booking: PropTypes.object.isRequired,
-  PortalSite: PropTypes.object.isRequired,
-  onReturn: PropTypes.func.isRequired,
-};
-
-export default FormCreator;

package/src/components/CalendarPage/PriceField.js

@@ -1,203 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Query } from '@apollo/client/react/components';
-import { gql}  from "@apollo/client";
-import Loading from '../icons/loading.svg';
-import format from '../../_lib/format';
-import { FormattedMessage, FormattedNumber } from 'react-intl';
-import { createPeronsArray } from './formParts/BookingHelpers';
-import { ApiError } from '../Error';
-
-const dateFormat = 'dddd DD MMMM YYYY';
-
-export const CALENDAR_QUERY = gql`
-  query BookingPriceQuery(
-    $id: ID!
-    $house_id: String!
-    $starts_at: Date!
-    $ends_at: Date!
-    $persons: Int
-  ) {
-    PortalSite(id: $id) {
-      houses(house_code: $house_id) {
-        id
-        name
-        booking_price(
-          starts_at: $starts_at
-          ends_at: $ends_at
-          persons: $persons
-        )
-      }
-    }
-  }
-`;
-class PriceField extends Component {
-  state = {
-    persons: 2,
-  };
-
-  setPersons(persons) {
-    this.setState({ persons: persons });
-  }
-
-  render() {
-    const {
-      portalCode,
-      objectCode,
-      startsAt,
-      endsAt,
-      locale,
-      house,
-      disabled,
-      onStartBooking,
-      minNights,
-    } = this.props;
-    const { persons } = this.state;
-
-    let adults = createPeronsArray(house.persons);
-
-    return (
-      <div className="calendar--picker">
-        <div className="calendar--picker--date">
-          <span className="name">
-            <FormattedMessage id={`${house.house_type}.arrival`} />
-          </span>
-          <span className="detail">
-            {startsAt ? (
-              <span>{format(startsAt, dateFormat)}</span>
-            ) : (
-              <FormattedMessage
-                id={`${house.house_type}.pick_your_arrivaldate_in_the_calendar`}
-              />
-            )}
-          </span>
-        </div>
-        <div className="calendar--picker--date">
-          <span className="name">
-            <FormattedMessage id={`${house.house_type}.departure`} />
-          </span>
-          <span className="detail">
-            {endsAt ? (
-              <span>{format(endsAt, dateFormat)}</span>
-            ) : (
-              <div>
-                <div>
-                  <FormattedMessage
-                    id={`${house.house_type}.pick_your_departure_in_the_calendar`}
-                  />
-                </div>
-                {minNights && (
-                  <FormattedMessage
-                    id="minimum_nights"
-                    defaultMessage="Minimum {minimum} nights"
-                    values={{ minimum: minNights }}
-                  />
-                )}
-              </div>
-            )}
-          </span>
-        </div>
-        <div className="calendar--picker--date">
-          <span className="detail">
-            <select
-              className="calendar--picker--persons"
-              value={persons}
-              onChange={(e) => {
-                this.setPersons(e.target.value);
-              }}
-            >
-              {adults.map((person) => (
-                <FormattedMessage
-                  id="persons"
-                  key={person}
-                  children={(text) => (
-                    <option value={person} key={person}>
-                      {person} {text}
-                    </option>
-                  )}
-                />
-              ))}
-            </select>
-          </span>
-        </div>
-        <div className="calendar--picker--date">
-          {startsAt && endsAt && (
-            <Query
-              query={CALENDAR_QUERY}
-              variables={{
-                id: portalCode,
-                house_id: objectCode,
-                starts_at: startsAt,
-                ends_at: endsAt,
-                persons: parseInt(persons),
-                locale: locale,
-              }}
-            >
-              {({ loading, data, error }) => {
-                if (loading)
-                  return (
-                    <div className="price-overview--build">
-                      <Loading />
-                    </div>
-                  );
-                if (error) {
-                  return (
-                    <div className="price-overview--build">
-                      <ApiError errors={error}></ApiError>
-                    </div>
-                  );
-                }
-                const result = data.PortalSite.houses[0].booking_price;
-                return (
-                  <>
-                    <div className="price-overview--book">
-                      <div className="price">
-                        €{' '}
-                        <FormattedNumber
-                          value={Math.round(result.total_price)}
-                          minimumFractionDigits={2}
-                          maximumFractionDigits={2}
-                        />
-                      </div>
-                      <div>
-                        <i>
-                          <FormattedMessage
-                            id="based_on_one_person"
-                            values={{ persons }}
-                          />
-                        </i>
-                      </div>
-                    </div>
-                  </>
-                );
-              }}
-            </Query>
-          )}
-        </div>
-        <button
-          className="button"
-          disabled={!disabled}
-          onClick={() => {
-            if (startsAt && endsAt) {
-              onStartBooking('false', persons);
-            }
-          }}
-        >
-          <FormattedMessage id="calculate" />
-        </button>
-      </div>
-    );
-  }
-}
-
-PriceField.propTypes = {
-  portalCode: PropTypes.string.isRequired,
-  objectCode: PropTypes.string.isRequired,
-  startsAt: PropTypes.string,
-  endsAt: PropTypes.string,
-  onStartBooking: PropTypes.func.isRequired,
-  locale: PropTypes.string.isRequired,
-  minNights: PropTypes.number,
-};
-
-export default PriceField;

package/src/components/CalendarPage/Summary/Description.js

@@ -1,22 +0,0 @@
-import React from "react";
-import Icon from "../../icons/info.svg";
-import Modal from "../../Modal";
-
-function Description({description}) {
-  let val = <span />;
-  if (description) {
-    val = (
-      <span style={{
-          padding: "0 0 0 8px"
-      }}>
-        <Modal buttonText={<Icon />}>
-          <p>{description}</p>
-        </Modal>
-      </span>
-    );
-  }
-  return val;
-}
-
-
-export default Description;