bukazu-portal-react 3.3.3 → 3.3.4

package/src/components/CalendarPage/FormCreator.tsx

@@ -1,230 +0,0 @@
-import React, { useContext } from 'react';
-import { Formik, Form } from 'formik';
-import { FormattedMessage } from 'react-intl';
-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 from './formParts/OptionalBookingFields';
-import { ApiError } from '../Error';
-import { initializeBookingFields } from './formParts/BookingHelpers';
-import OptionalCosts from './formParts/OptionalCosts';
-import Guests from './formParts/Guests';
-import { validateForm } from './formParts/Validations';
-import { AppContext } from '../AppContext';
-import { HouseType, PortalSiteType } from '../../types';
-import { BookingType } from './calender_types';
-import { useMutation } from '@apollo/client';
-import {
-  CalendarContext,
-  CalendarContextDispatch
-} from './CalendarParts/CalendarContext';
-import { getSessionIdentifier } from '../../_lib/Tracking';
-
-interface Props {
-  house: HouseType;
-  PortalSite: PortalSiteType;
-  booking: BookingType;
-}
-
-function FormCreator({ house, PortalSite }: Props): JSX.Element {
-  const { persons, arrivalDate, departureDate } = useContext(CalendarContext);
-  const { locale, portalCode, objectCode } = useContext(AppContext);
-  const dispatch = useContext(CalendarContextDispatch);
-
-  const { options } = PortalSite;
-
-  const bookingFields = options.bookingFields || DefaultBookingFields;
-
-  const bookingPrice = house.booking_price;
-
-  let costs: any = {};
-
-  for (const val of bookingPrice.optional_house_costs) {
-    costs[val.id] = '0';
-  }
-
-  const [createBooking, { loading, error, data, reset }] = useMutation(
-    CREATE_BOOKING_MUTATION
-  );
-
-  const optBookingFieldsInitialized = initializeBookingFields(bookingFields);
-
-  const sessionIdentifier = getSessionIdentifier();
-
-  console.log({ sessionIdentifier });
-
-  return (
-    <Formik
-      validate={(values) => validateForm(values, house, bookingFields)}
-      initialValues={{
-        ...optBookingFieldsInitialized,
-        arrivalDate,
-        departureDate,
-        is_option: 'false',
-        costs,
-        adults: persons,
-        children: 0,
-        babies: 0,
-        persons,
-        discount: 0,
-        country: 'nl'
-      }}
-      onSubmit={(values, { setSubmitting }) => {
-        let variables = {
-          ...values,
-          is_option: JSON.parse(values.is_option),
-          house_code: objectCode,
-          portal_code: portalCode,
-          comment: values.comment || '',
-          language: locale,
-          country: values.country.toUpperCase(),
-          adults: Number(values.adults),
-          children: Number(values.children) || 0,
-          babies: Number(values.babies) || 0,
-          discount: Number(values.discount) || 0,
-          cancel_insurance: Number(values.cancel_insurance) || 0,
-          arrival_date: values.arrivalDate.date,
-          departure_date: values.departureDate.date,
-          costs: JSON.stringify(values.costs),
-          extra_fields: JSON.stringify(values.extra_fields),
-          sessionIdentifier: sessionIdentifier
-        };
-
-        createBooking({ variables }).then(() => {
-          if (
-            options.bookingForm &&
-            options.bookingForm[`redirectUrl_${locale}`] &&
-            options.bookingForm[`redirectUrl_${locale}`] !== ''
-          ) {
-            window.location = options.bookingForm[`redirectUrl_${locale}`];
-          } else if (
-            options.bookingForm &&
-            options.bookingForm.redirectUrl &&
-            options.bookingForm.redirectUrl !== ''
-          ) {
-            window.location = options.bookingForm.redirectUrl;
-          } else {
-            setTimeout(() => {
-              dispatch({
-                type: 'return'
-              });
-            }, 15000);
-          }
-        });
-      }}
-    >
-      {({ errors, touched, values, status, isSubmitting }) => (
-        <Form className="form">
-          {loading && <div className="return-message">Creating booking...</div>}
-          {error && (
-            <Modal show={true} onClose={reset}>
-              <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}
-                onClick={() => {
-                  dispatch({
-                    type: 'return'
-                  });
-                }}
-              >
-                <FormattedMessage id="return_to_calendar" />
-              </a>
-              <h2>
-                <FormattedMessage id="stay_details" />
-              </h2>
-              <Guests options={options} house={house} />
-
-              {errors.max_persons && (
-                <div className="error-message bu-error-message persons">
-                  {errors.max_persons}
-                </div>
-              )}
-            </div>
-            <Discount
-              errors={errors}
-              house={house}
-              options={options}
-              values={values}
-              render={bookingPrice.optional_house_costs}
-            />
-
-            <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">
-              {PortalSite.form_submit_text}{' '}
-              <FormattedMessage id="terms">
-                {(fm) => (
-                  <Modal buttonText={fm}>
-                    <div
-                      style={{
-                        width: '90vh',
-                        height: '90vh'
-                      }}
-                    >
-                      <iframe
-                        src={house.rental_terms}
-                        width="100%"
-                        height="100%"
-                        title="Terms"
-                      />
-                    </div>
-                  </Modal>
-                )}
-              </FormattedMessage>
-              {house.allow_option && (
-                <span>
-                  {', '}
-                  <FormattedMessage id="option_is_free" />
-                </span>
-              )}
-            </div>
-            {[1, 2].includes(Number(values.cancel_insurance)) ? (
-              <div className="terms">
-                <FormattedMessage id="comply_insurance_card" />
-              </div>
-            ) : null}
-            <button
-              className="bu-calendar-button"
-              type="submit"
-              disabled={isSubmitting}
-            >
-              {PortalSite.form_submit_button_text}
-            </button>
-          </div>
-        </Form>
-      )}
-    </Formik>
-  );
-}
-
-export default FormCreator;

package/src/components/CalendarPage/FormItems/Date.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Field } from 'formik';
-import { FormattedMessage } from 'react-intl';
-import DatePicker from 'react-date-picker';
-import { format } from 'date-fns';
-
-interface Props {
-  label: string;
-  description: string | React.ReactNode;
-  name: string;
-  inline: boolean;
-  required: boolean;
-}
-
-function DateField({ label, description, name, inline }: Props) {
-  return (
-    <Field name={name}>
-      {({ field, meta, form }) => {
-        const { value, name } = field;
-
-        let tempval;
-        if (value === '' || !value) {
-          tempval = null;
-        } else {
-          tempval = new Date(value);
-        }
-
-        return (
-          <div
-            className={`form-row ${inline && 'inline'}`}
-            id={`bukazu_form_${name}`}
-          >
-            <label htmlFor={name}>
-              <FormattedMessage id={label} />
-            </label>
-            <DatePicker
-              className="bukazu-date-picker"
-              name={name}
-              format="dd-MM-y"
-              value={tempval}
-              onChange={(e) => {
-                field.onChange(format(e, 'yyyy-MM-dd'));
-                form.setFieldValue(name, format(e, 'yyyy-MM-dd'));
-              }}
-            />
-            <span className="bu-input-description">{description}</span>
-            {meta.touched && meta.error && (
-              <div className="error-message bu-error-message">{meta.error}</div>
-            )}
-          </div>
-        );
-      }}
-    </Field>
-  );
-}
-
-DateField.defaultValues = {
-  inline: true
-};
-
-export default DateField;

package/src/components/CalendarPage/FormItems/NumberSelect.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Field } from 'formik';
-import { createPeronsArray } from '../formParts/BookingHelpers';
-import { FormattedMessage } from 'react-intl';
-
-export default function NumberSelect({ label, description, count, ...props }) {
-  const numbers = createPeronsArray(count);
-
-  return (
-    <Field name={props.name}>
-      {({ field, meta }) => {
-        return (
-          <div className="form-row inline" id={`bukazu_form_${props.name}`}>
-            <label htmlFor={props.name}>
-              <FormattedMessage id={label} />
-            </label>
-            <select {...field} {...props}>
-              {numbers.map((opt) => {
-                return (
-                  <option key={opt} value={opt}>
-                    {opt}
-                  </option>
-                );
-              })}
-            </select>
-            {description}
-            {meta.touched && meta.error && (
-              <div className="error-message bu-error-message">{meta.error}</div>
-            )}
-          </div>
-        );
-      }}
-    </Field>
-  );
-}
-
-NumberSelect.defaultProps = {
-  count: 0
-};

package/src/components/CalendarPage/FormItems/Select.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { Field } from 'formik';
-import { FormattedMessage } from 'react-intl';
-
-export default function Select({
-  label,
-  description,
-  options,
-  name,
-  ...props
-}) {
-  return (
-    <Field name={name}>
-      {({ field, meta }) => {
-        return (
-          <div className="form-row inline" id={`bukazu_form_${props.name}`}>
-            <label htmlFor={props.name}>
-              <FormattedMessage id={label} />
-            </label>
-            <select {...field} {...props}>
-              {options.map((opt) => {
-                return (
-                  <option key={opt} value={opt}>
-                    {opt}
-                  </option>
-                );
-              })}
-            </select>
-            {description}
-            {meta.touched && meta.error && (
-              <div className="error-message bu-error-message">{meta.error}</div>
-            )}
-          </div>
-        );
-      }}
-    </Field>
-  );
-}

package/src/components/CalendarPage/FormItems/index.ts

@@ -1,4 +0,0 @@
-import NumberSelect from "./NumberSelect";
-import DateField from "./Date";
-
-export { NumberSelect, DateField }

package/src/components/CalendarPage/PriceField/Price.tsx

@@ -1,58 +0,0 @@
-import { useQuery } from '@apollo/client';
-import React, { useContext } from 'react';
-import { FormattedMessage, FormattedNumber } from 'react-intl';
-import { AppContext } from '../../AppContext';
-import { ApiError } from '../../Error';
-import Loading from '../../icons/loading.svg';
-import { BOOKING_PRICE_QUERY } from './Queries';
-
-interface Props {
-  persons: number;
-  variables: {
-    starts_at: string;
-    ends_at: string;
-  };
-}
-
-function Price({ persons, variables }: Props) {
-  const { portalCode, objectCode } = useContext(AppContext);
-  const { loading, error, data } = useQuery(BOOKING_PRICE_QUERY, {
-    variables: { ...variables, persons, portalCode, objectCode }
-  });
-
-  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>
-    </>
-  );
-}
-
-export default Price;

package/src/components/CalendarPage/PriceField/Queries.ts

@@ -1,23 +0,0 @@
-import { gql } from "@apollo/client";
-
-export const BOOKING_PRICE_QUERY = gql`
-  query BookingPriceQuery(
-    $portalCode: ID!
-    $objectCode: String!
-    $starts_at: Date!
-    $ends_at: Date!
-    $persons: Int
-  ) {
-    PortalSite(id: $portalCode) {
-      houses(house_code: $objectCode) {
-        id
-        name
-        booking_price(
-          starts_at: $starts_at
-          ends_at: $ends_at
-          persons: $persons
-        )
-      }
-    }
-  }
-`;

package/src/components/CalendarPage/PriceField/index.tsx

@@ -1,129 +0,0 @@
-import React, { useContext, useState } from 'react';
-import {
-  FormatIntl,
-  LONG_DATE_FORMAT,
-  Parse_EN_US
-} from '../../../_lib/date_helper';
-import { FormattedMessage } from 'react-intl';
-import { createPeronsArray } from '../formParts/BookingHelpers';
-import Price from './Price';
-import { HouseType } from '../../../types';
-import {
-  CalendarContext,
-  CalendarContextDispatch
-} from '../CalendarParts/CalendarContext';
-
-const dateFormat = LONG_DATE_FORMAT;
-
-interface Props {
-  house: HouseType;
-}
-
-function PriceField({ house }: Props) {
-  const defaultMaxPersons = house.persons > 2 ? 2 : house.persons;
-  const [persons, setPersons] = useState(defaultMaxPersons);
-
-  const { arrivalDate, departureDate } = useContext(CalendarContext);
-  const dispatch = useContext(CalendarContextDispatch);
-
-  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">
-          {arrivalDate?.date ? (
-            <span>
-              {FormatIntl(Parse_EN_US(arrivalDate?.date), 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">
-          {departureDate?.date ? (
-            <span>
-              {FormatIntl(Parse_EN_US(departureDate?.date), dateFormat)}
-            </span>
-          ) : (
-            <div>
-              <div>
-                <FormattedMessage
-                  id={`${house.house_type}.pick_your_departure_in_the_calendar`}
-                />
-              </div>
-              {arrivalDate && (
-                <FormattedMessage
-                  id="minimum_nights"
-                  defaultMessage="Minimum {minimum} nights"
-                  values={{ minimum: arrivalDate?.min_nights }}
-                />
-              )}
-            </div>
-          )}
-        </span>
-      </div>
-      <div className="calendar--picker--date">
-        <span className="detail">
-          <select
-            className="calendar--picker--persons"
-            value={persons}
-            onChange={(e) => {
-              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">
-        {arrivalDate && departureDate && (
-          <Price
-            persons={parseInt(persons)}
-            variables={{
-              starts_at: arrivalDate?.date,
-              ends_at: departureDate?.date
-            }}
-          />
-        )}
-      </div>
-      <button
-        className="button"
-        disabled={!arrivalDate || !departureDate}
-        onClick={() => {
-          if (arrivalDate && departureDate) {
-            dispatch({
-              type: 'start',
-              persons
-            });
-          }
-        }}
-      >
-        <FormattedMessage id="calculate" />
-      </button>
-    </div>
-  );
-}
-
-export default PriceField;

package/src/components/CalendarPage/Summary/CostRow.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import { FormattedMessage, FormattedNumber } from 'react-intl';
-import Description from './Description';
-
-interface Props {
-  name: string;
-  amount: number;
-  description?: string | React.ReactNode;
-  method_name?: string;
-  formatName?: boolean;
-  forceMethod?: boolean;
-}
-
-function CostRow({
-  name,
-  amount,
-  description,
-  method_name,
-  formatName,
-  forceMethod
-}: Props): JSX.Element {
-  return (
-    <tr>
-      <td>
-        {formatName ? <FormattedMessage id={name} /> : name}
-        {description && (
-          <>
-            {' '}
-            <Description description={description} />
-          </>
-        )}
-      </td>
-
-      <td className="price">
-        {amount && amount > 0 ? (
-          <>
-            €{' '}
-            <FormattedNumber
-              value={amount}
-              minimumFractionDigits={2}
-              maximumFractionDigits={2}
-            />
-            {forceMethod && <> {method_name}</>}
-          </>
-        ) : (
-          <>{method_name}</>
-        )}
-      </td>
-    </tr>
-  );
-}
-
-CostRow.defaultValues = {
-  formatName: false,
-  forceMethod: false
-};
-
-export default CostRow;

package/src/components/CalendarPage/Summary/CostSection.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-interface Props {
-  children: React.ReactNode;
-}
-
-export default function CostSection({ children }: Props): JSX.Element {
-  return (
-    <div className="costs-section">
-      <table>
-        <tbody>{children}</tbody>
-      </table>
-    </div>
-  );
-}