bukazu-portal-react 3.3.3 → 3.3.4

package/src/components/CalendarPage/formParts/BookingOrOption.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { RadioButtonGroup, RadioButton } from './radioButtons';
-import { Field } from 'formik';
-import { FormattedMessage } from 'react-intl';
-import { HouseType } from '../../../types';
-
-interface Props {
-  house: HouseType;
-}
-
-export default function BookingOrOption({ house }: Props): JSX.Element {
-  return (
-    <>
-      {house.allow_option && (
-        <div>
-          <RadioButtonGroup id="is_option" className="booking_option">
-            <Field
-              component={RadioButton}
-              name="is_option"
-              id="true"
-              disabled={!house.allow_option}
-              label={<FormattedMessage id="option" />}
-            />
-            <Field
-              component={RadioButton}
-              name="is_option"
-              id="false"
-              label={<FormattedMessage id="booking" />}
-            />
-          </RadioButtonGroup>
-        </div>
-      )}
-    </>
-  );
-}

package/src/components/CalendarPage/formParts/CancelInsuranceText.tsx

@@ -1,69 +0,0 @@
-import React, { useContext } from 'react';
-import { FormattedMessage as FM } from 'react-intl';
-import { AppContext } from '../../AppContext';
-
-const CancelInsuranceText = () => {
-  const { locale } = useContext(AppContext);
-
-  const links = {
-    nl: 'https://recreatieverzekeringen.nl/veelgestelde-vragen',
-    de: 'https://recreatieverzekeringen.nl/de/haufig-gestellte-fragen',
-    en: 'https://recreatieverzekeringen.nl/en/frequently-asked-questions',
-    fr: 'https://recreatieverzekeringen.nl/en/frequently-asked-questions',
-    es: 'https://recreatieverzekeringen.nl/en/frequently-asked-questions',
-    it: 'https://recreatieverzekeringen.nl/en/frequently-asked-questions'
-  };
-
-  return (
-    <>
-      <h2>
-        <FM id="cancel_insurance_normal_long" />
-      </h2>
-      <p>
-        <FM id="cancel_insurance_normal_desc" />
-      </p>
-      <h3>
-        <FM id="cancel_insurance_more_insured" />
-      </h3>
-      <p>
-        <FM id="cancel_insurance_more_insured_desc" />
-      </p>
-
-      <h3>
-        <FM id="cancel_insurance_important" />
-      </h3>
-      <p>
-        <FM id="cancel_insurance_important_message" />
-      </p>
-
-      <h3>
-        <FM id="cancel_insurance_for_whom" />
-      </h3>
-      <p>
-        <FM id="cancel_insurance_for_whom_explain" />
-      </p>
-      <h3>
-        <FM id="cancel_insurance_questions" />
-      </h3>
-      <p>
-        <FM id="cancel_insurance_questions_explain_1" />
-        <a href={links[locale]} target="_blank">
-          <FM id="cancel_insurance_questions_explain_link" />
-        </a>
-        <FM id="cancel_insurance_questions_explain_2" />
-      </p>
-      <h3>
-        <FM id="terms" />
-      </h3>
-      <a
-        href={`https://api.bukazu.com/files/${locale}/insurance.pdf`}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <FM id="show_terms" />
-      </a>
-    </>
-  );
-};
-
-export default CancelInsuranceText;

package/src/components/CalendarPage/formParts/DefaultBookingFields.ts

@@ -1,105 +0,0 @@
-import { BookingFieldsType } from "./form_types";
-
-const DefaultBookingFields: BookingFieldsType = [
-  {
-    id: 'first_name',
-    label: 'Voornaam',
-    type: 'text',
-    options: ['text'],
-    required: true,
-    placeholder: '',
-  },
-  {
-    id: 'preposition',
-    label: 'Tussenvoegsel',
-    type: 'text',
-    options: ['text'],
-    required: false,
-    placeholder: '',
-  },
-  {
-    id: 'last_name',
-    label: 'Achternaam',
-    type: 'text',
-    options: ['text'],
-    required: true,
-    mandatory: true,
-    placeholder: '',
-  },
-  {
-    id: 'address',
-    label: 'Adres',
-    type: 'text',
-    options: ['text'],
-    required: true,
-    placeholder: '',
-  },
-  {
-    id: 'house_number',
-    label: 'Huisnummer',
-    type: 'text',
-    options: ['text'],
-    required: true,
-    placeholder: '',
-  },
-  {
-    id: 'zipcode',
-    label: 'Postcode',
-    type: 'text',
-    options: ['text'],
-    required: true,
-    placeholder: '',
-  },
-  {
-    id: 'city',
-    label: 'Plaats',
-    type: 'text',
-    options: ['text'],
-    required: true,
-    placeholder: '',
-  },
-  {
-    id: 'country',
-    label: 'Land',
-    type: 'select',
-    options: ['select'],
-    required: true,
-    mandatory: true,
-    placeholder: '',
-  },
-  {
-    id: 'email',
-    label: 'E-mail',
-    type: 'email',
-    options: ['email'],
-    required: true,
-    mandatory: true,
-    placeholder: '',
-  },
-  {
-    id: 'phone_mobile',
-    label: 'Mobiel telefoonnummer',
-    type: 'text',
-    options: ['text'],
-    required: false,
-    placeholder: '',
-  },
-  {
-    id: 'phone',
-    label: 'Telefoonnummer',
-    type: 'text',
-    options: ['text'],
-    required: true,
-    placeholder: '',
-  },
-  {
-    id: 'comment',
-    label: 'Opmerking',
-    type: 'textarea',
-    options: ['textarea'],
-    required: false,
-    rows: 10,
-  },
-];
-
-export default DefaultBookingFields;

package/src/components/CalendarPage/formParts/DiscountCode.tsx

@@ -1,62 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Field } from 'formik';
-import { FormattedMessage } from 'react-intl';
-import { gql, useMutation } from '@apollo/client';
-import { HouseType } from '../../../types';
-
-function DiscountCode({ house }: { house: HouseType }): ReactNode {
-  const [checkCode, { loading, error, data }] =
-    useMutation(CHECK_DISCOUNT_CODE);
-
-  return (
-    <div className="form-row inline">
-      <label htmlFor="discount_code">
-        <FormattedMessage id="discount_code" />
-      </label>
-      <Field name="discount_code">
-        {({ field, form }) => {
-          return (
-            <input
-              {...field}
-              onChange={(e) => {
-                checkCode({
-                  variables: { code: e.target.value, house_code: house.code }
-                });
-                form.setFieldValue(field.name, e.target.value);
-              }}
-            ></input>
-          );
-        }}
-      </Field>
-      {loading && <div className="bu_discount_code">Loading...</div>}
-      {error && (
-        <div className="bu_discount_code">
-          <FormattedMessage id="no_discount_code_found" />
-        </div>
-      )}
-      {data && (
-        <div className="bu_discount_code">
-          <div>{data.checkDiscountCode.name}</div>
-          {data.checkDiscountCode.use_price ? (
-            <div>€ {data.checkDiscountCode.price}</div>
-          ) : (
-            <div>{data.checkDiscountCode.percentage}%</div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-const CHECK_DISCOUNT_CODE = gql`
-  mutation CheckDiscountCode($code: String!, $house_code: String!) {
-    checkDiscountCode(code: $code, house_code: $house_code) {
-      name
-      use_price
-      percentage
-      price
-    }
-  }
-`;
-
-export default DiscountCode;

package/src/components/CalendarPage/formParts/Guests.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import { NumberSelect } from '../FormItems';
-import { FormattedMessage } from 'react-intl';
-import { HouseType, PortalOptions } from '../../../types';
-
-interface Props {
-  options: PortalOptions;
-  house: HouseType;
-}
-
-export default function Guests({ options, house }: Props): React.ReactNode {
-  return (
-    <>
-      <NumberSelect
-        name="adults"
-        label="adults"
-        count={house.persons}
-        description={
-          <div className="age-description">
-            <FormattedMessage
-              id="adults_from"
-              defaultMessage="> {age}"
-              values={{
-                age: options.bookingForm
-                  ? options.bookingForm.adults_from || '18'
-                  : '18'
-              }}
-            />
-          </div>
-        }
-      />
-      {options.bookingForm && !options.bookingForm.children ? null : (
-        <NumberSelect
-          name="children"
-          label="children"
-          count={house.persons - 1}
-          description={
-            <div className="age-description">
-              <FormattedMessage
-                id="children_from"
-                defaultMessage="{from} - {til}"
-                values={{
-                  from: options.bookingForm
-                    ? options.bookingForm.children_from || '3'
-                    : '3',
-                  til: options.bookingForm
-                    ? options.bookingForm.children_til || '17'
-                    : '17'
-                }}
-              />
-            </div>
-          }
-        />
-      )}
-      {options.bookingForm && !options.bookingForm.babies ? null : (
-        <NumberSelect
-          name="babies"
-          label="babies"
-          count={house.persons - 1}
-          description={
-            <div className="age-description">
-              <FormattedMessage
-                id="babies_from"
-                defaultMessage="til {babies_til}"
-                values={{
-                  babies: options.bookingForm
-                    ? options.bookingForm.babies_til || '2'
-                    : '2'
-                }}
-              />
-            </div>
-          }
-        />
-      )}
-    </>
-  );
-}

package/src/components/CalendarPage/formParts/OptionalBookingFields.tsx

@@ -1,148 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Field } from 'formik';
-import { FormattedMessage } from 'react-intl';
-import { Countries } from '../../../_lib/countries';
-import { DateField } from '../FormItems';
-import DefaultBookingFields from './DefaultBookingFields';
-
-export function isInt(value) {
-  return (
-    !isNaN(value) &&
-    (function (x) {
-      return (x | 0) === x;
-    })(parseFloat(value))
-  );
-}
-
-export default function OptionalBookingFields({
-  bookingFields,
-  errors,
-  touched,
-  PortalSite,
-  values
-}) {
-  let fields = [].concat(bookingFields);
-
-  const requiredFields = ['address', 'house_number', 'zipcode', 'city'];
-  if (values.cancel_insurance === '1' || values.cancel_insurance === '2') {
-    requiredFields.forEach((key) => {
-      let index = bookingFields.findIndex((x) => x.id === key);
-      if (index !== -1) {
-        fields[index] = DefaultBookingFields.find((x) => x.id === key);
-      } else {
-        fields.push(DefaultBookingFields.find((x) => x.id === key));
-      }
-    });
-  }
-  return (
-    <div className="form-section">
-      <h2>
-        <FormattedMessage id="personal_details" />
-      </h2>
-      {fields.map((input) => {
-        if (input.id === 'telephone') {
-          input.id = 'phonenumber';
-        }
-
-        if (input.type === 'booking_field' || isInt(input.id)) {
-          const bookingField = PortalSite.booking_fields.find(
-            (x) => x.id === input.id
-          );
-
-          return (
-            <div className="form-row" key={bookingField.id}>
-              <label htmlFor={`extra_fields.booking_field_${bookingField.id}`}>
-                {bookingField.label} {input.required && <span>*</span>}
-              </label>
-              <Field
-                onKeyPress={(e) => {
-                  e.which === 13 && e.preventDefault();
-                }}
-                id={`extra_fields.booking_field_${bookingField.id}`}
-                type={
-                  bookingField.field_type === 'text'
-                    ? 'input'
-                    : bookingField.field_type
-                }
-                component={
-                  bookingField.field_type === 'text'
-                    ? 'input'
-                    : bookingField.field_type
-                }
-                name={`extra_fields.booking_field_${bookingField.id}`}
-              />
-              {errors[input.id] &&
-                ((touched.extra_fields &&
-                  touched.extra_fields[`booking_field_${bookingField.id}`]) ||
-                  touched[input.id]) && (
-                  <div className="error-message bu-error-message">
-                    {errors[input.id]}
-                  </div>
-                )}
-            </div>
-          );
-        } else if (input.id === 'country') {
-          return (
-            <div className="form-row" key={input.id}>
-              <label htmlFor={input.id}>
-                {PortalSite[`${input.id}_label`]}{' '}
-                {input.required && <span>*</span>}
-              </label>
-              <Field component="select" name={input.id}>
-                {Countries[window.__localeId__].map((country) => {
-                  return (
-                    <option value={country.alpha2} key={country.alpha2}>
-                      {country.name}
-                    </option>
-                  );
-                })}
-              </Field>
-              {errors[input.id] && (
-                <div className="error-message bu-error-message">
-                  {errors[input.id]}
-                </div>
-              )}
-            </div>
-          );
-        } else if (input.type === 'date') {
-          return (
-            <div className="form-row" key={input.id}>
-              <DateField name={input.id} label={input.id} inline={false} />
-            </div>
-          );
-        } else {
-          return (
-            <div className="form-row" key={input.id}>
-              <label
-                htmlFor={input.id}
-                name={`${input.id.replace(/\./g, '_')}_label`}
-              >
-                {PortalSite[`${input.id.replace(/\./g, '_')}_label`]}{' '}
-                {input.required && <span>*</span>}
-              </label>
-              <Field
-                type={input.type}
-                name={input.id}
-                onKeyPress={(e) => {
-                  e.which === 13 && e.preventDefault();
-                }}
-              />
-              {errors[input.id] && touched[input.id] && (
-                <div className="error-message bu-error-message">
-                  {errors[input.id]}
-                </div>
-              )}
-            </div>
-          );
-        }
-      })}
-    </div>
-  );
-}
-
-OptionalBookingFields.propTypes = {
-  bookingFields: PropTypes.array.isRequired,
-  errors: PropTypes.object.isRequired,
-  PortalSite: PropTypes.object.isRequired
-};

package/src/components/CalendarPage/formParts/OptionalCosts.tsx

@@ -1,103 +0,0 @@
-import React from 'react';
-import { Field } from 'formik';
-import {FormattedMessage, FormattedNumber } from 'react-intl'
-import Modal from '../../Modal'
-import Icon from "../../icons/info.svg";
-import { createPeronsArray } from './BookingHelpers'
-
-function OptionalCosts({ costs }) {
-  if (costs.length === 0) {
-    return null;
-  }
-  return (
-    <div className="form-section optional_house_costs">
-      <h2>
-        <FormattedMessage id="extra_costs_bookable" />
-      </h2>
-      <div>
-        {costs.map((cost) => {
-          if (
-            !['none', 'total'].includes(cost.method) &&
-            cost.max_available > 0
-          ) {
-            if (cost.max_available === 1) {
-              return (
-                <div className="form-row inline" key={cost.id}>
-                  <label htmlFor={cost.id}>{cost.name}</label>
-                  <Field component="select" name={`costs[${cost.id}]`}>
-                    <FormattedMessage id="no">
-                      {(formattedMessage) => (
-                        <option value={0}>{formattedMessage}</option>
-                      )}
-                    </FormattedMessage>
-                    <FormattedMessage id="yes">
-                      {(formattedMessage) => (
-                        <option value={1}>{formattedMessage}</option>
-                      )}
-                    </FormattedMessage>
-                  </Field>
-
-                  <div className="price_per">
-                    €{' '}
-                    <FormattedNumber
-                      value={cost.amount}
-                      minimumFractionDigits={2}
-                      maximumFractionDigits={2}
-                    />{' '}
-                    {cost.method_name}
-                  </div>
-                  <div>
-                    {cost.description ? (
-                      <div>
-                        <Modal buttonText={<Icon />}>
-                          <p>{cost.description}</p>
-                        </Modal>
-                      </div>
-                    ) : null}
-                  </div>
-                </div>
-              );
-            }
-            return (
-              <div className="form-row inline" key={cost.id}>
-                <label htmlFor={cost.id}>{cost.name}</label>
-                <Field component="select" name={`costs[${cost.id}]`}>
-                  {createPeronsArray(cost.max_available).map((opt) => {
-                    return (
-                      <option key={opt} value={opt}>
-                        {opt}
-                      </option>
-                    );
-                  })}
-                </Field>
-
-                <div className="price_per">
-                  €{' '}
-                  <FormattedNumber
-                    value={cost.amount}
-                    minimumFractionDigits={2}
-                    maximumFractionDigits={2}
-                  />{' '}
-                  {cost.method_name}
-                </div>
-                <div>
-                  {cost.description ? (
-                    <div>
-                      <Modal buttonText={<Icon />}>
-                        <p>{cost.description}</p>
-                      </Modal>
-                    </div>
-                  ) : null}
-                </div>
-              </div>
-            );
-          } else {
-            return '';
-          }
-        })}
-      </div>
-    </div>
-  );
-}
-
-export default OptionalCosts;

package/src/components/CalendarPage/formParts/SuccessMessage.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-const SuccessMessage = () => (
-  <div className="success-message">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      version="1.1"
-      x="0px"
-      y="0px"
-      viewBox="0 0 100 125"
-      style={{
-        enableBackground: 'new 0 0 100 100;',
-        fill: 'green',
-        height: '150px',
-      }}
-      xmlSpace="preserve"
-    >
-      <path d="M50,5C25.2,5,5,25.1,5,50c0,24.8,20.2,45,45,45s45-20.2,45-45C95,25.1,74.8,5,50,5z M72.7,38.2L44.2,66.7  c-0.4,0.4-0.9,0.6-1.4,0.6s-1-0.2-1.4-0.6l-14-14c-0.8-0.8-0.8-2,0-2.8c0.8-0.8,2-0.8,2.8,0l12.6,12.6l27.1-27.1  c0.8-0.8,2-0.8,2.8,0C73.5,36.1,73.5,37.4,72.7,38.2z" />
-    </svg>
-    <h3>
-      <FormattedMessage id="thank_you_for_your_request" />
-    </h3>
-    <p>
-      <FormattedMessage id="we_sent_confirmation_check_email" />
-    </p>
-  </div>
-);
-
-export default SuccessMessage;

package/src/components/CalendarPage/formParts/Validations.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { HouseType } from '../../../types';
-import { byString, validateAge } from './BookingHelpers';
-import { isInt } from './OptionalBookingFields';
-
-export function validateForm(
-  values: object,
-  house: HouseType,
-  bookingFields: []
-): [] {
-  const { babies_extra, persons } = 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 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 && persons > 0) {
-    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" />;
-  }
-
-  return errors;
-}