bukazu-portal-react 2.1.21 → 3.0.2

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { HouseType } from '../../../types';
+import { byString, validateAge } from './BookingHelpers';
+import { isInt } from './OptionalBookingFields';
+
+interface Props {
+  values: object;
+  house: HouseType;
+  bookingFields: [];
+}
+
+export function validateForm(values, house, 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) {
+    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 &&
+    !['nl', 'de', 'be'].includes(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;
+}

package/src/components/CalendarPage/formParts/{discount.js → discount.tsx}

@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { Field } from 'formik';
 import DiscountCode from './DiscountCode';
+import { HouseType, PortalOptions } from '../../../types';
+import { PossibleValues } from './form_types';
 
-const Discount = ({ errors, house, options, values }) => {
+interface Props {
+  errors: object;
+  house: HouseType;
+  options: PortalOptions;
+  values: PossibleValues;
+}
+
+const Discount = ({ errors, house, options, values }: Props) => {
   if (
     (house.discounts && house.discounts !== '0') ||
     options.bookingForm?.showDiscountCode
@@ -52,7 +61,7 @@ const Discount = ({ errors, house, options, values }) => {
 
 Discount.propTypes = {
   house: PropTypes.object.isRequired,
-  errors: PropTypes.object.isRequired,
+  errors: PropTypes.object.isRequired
 };
 
 export default Discount;

package/src/components/CalendarPage/formParts/form_types.d.ts

@@ -0,0 +1,38 @@
+import { BuDate } from '../../../types';
+
+export type PossibleValues = {
+  arrivalDate: BuDate;
+  departureDate: BuDate;
+  is_option: 'false' | 'true';
+  costs: any;
+  adults: number;
+  children: number;
+  babies: number;
+  persons: number;
+  discount: number;
+  country: number;
+  cancel_insurance: '0' | '1' | '2';
+  discount_code: string;
+};
+
+export type BookingFieldsType = SingleBookingFieldType[];
+
+export type SingleBookingFieldType = {
+  id: string;
+  label: string;
+  type: InputTypes;
+  options?: string[];
+  required?: boolean;
+  mandatory?: boolean;
+  rows?: number;
+  placeholder?: string;
+};
+
+type InputTypes =
+  | 'textarea'
+  | 'text'
+  | 'email'
+  | 'date'
+  | 'country'
+  | 'select'
+  | 'booking_field';

package/src/components/CalendarPage/formParts/{insurances.js → insurances.tsx}

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { Field } from 'formik';
 import Modal from '../../Modal';
@@ -7,8 +6,15 @@ import Icon from '../../icons/info.svg';
 import CancelInsuranceText from './CancelInsuranceText';
 import { DateField } from '../FormItems';
 import { translatedOption } from './BookingHelpers'
+import { HouseType } from '../../../types';
+import { PossibleValues } from './form_types';
 
-function cancelInsurance(house) {
+type Props = {
+  house: HouseType
+  values: PossibleValues
+}
+
+function cancelInsurance(house: HouseType) {
   if (house.cancel_insurance) {
     return (
       <div className="form-row inline">
@@ -17,9 +23,9 @@ function cancelInsurance(house) {
         </label>
         <Field component="select" name="cancel_insurance" required={true}>
           {translatedOption('choose', '')}
-          {translatedOption('cancel_insurance_all_risk', 2)}
-          {translatedOption('cancel_insurance_normal', 1)}
-          {translatedOption('none', 0)}
+          {translatedOption('cancel_insurance_all_risk', '2')}
+          {translatedOption('cancel_insurance_normal', '1')}
+          {translatedOption('none', '0')}
         </Field>
         <Modal buttonText={<Icon />}>
           <CancelInsuranceText />
@@ -29,7 +35,7 @@ function cancelInsurance(house) {
   }
 }
 
-export const Insurances = ({ house, values }) => {
+export const Insurances = ({ house, values }: Props) => {
   if (house.cancel_insurance) {
     return (
       <div className="form-section" id="insurances">
@@ -41,7 +47,8 @@ export const Insurances = ({ house, values }) => {
           <DateField
             label="extra_fields.date_of_birth"
             name="extra_fields.date_of_birth"
-            required="true"
+            required
+            inline={false}
             description={
               <FormattedMessage id="insurance_company_needs_date_of_birth" />
             }
@@ -54,6 +61,3 @@ export const Insurances = ({ house, values }) => {
   }
 };
 
-Insurances.propTypes = {
-  house: PropTypes.object.isRequired,
-};

package/src/components/Error/{ApiError.js → ApiError.tsx}

@@ -1,10 +1,12 @@
 import React from 'react';
 import Modal from '../Modal';
-
 import { FormattedMessage } from 'react-intl';
+import { ApolloError } from '@apollo/client';
 
-function ApiError(errors, modal) {
-  console.error({ errors });
+function ApiError(
+  errors: { errors: ApolloError },
+  modal: boolean
+): JSX.Element {
   const errorMessage = (
     <div className="bukazu-error-message">
       <h2>
@@ -25,7 +27,7 @@ function ApiError(errors, modal) {
 }
 
 ApiError.defaultProps = {
-  modal: false,
+  modal: false
 };
 
 export default ApiError;

package/src/components/Error/{IntegrationError.js → IntegrationError.tsx}

@@ -1,25 +1,33 @@
 import React from 'react';
+import { FiltersType } from '../SearchPage/filters/filter_types';
+
+interface Props {
+  portalCode: string;
+  pageType?: string;
+  locale?: string;
+  filters?: FiltersType;
+}
 
 export default function IntegrationError({
   portalCode,
   pageType,
   locale,
-  filters,
-}) {
-  let errors = [];
+  filters
+}: Props): JSX.Element | false {
+  let errors: string[] = [];
 
   if (!portalCode) {
     let message = 'No portal code is specified, so portal is not working';
     console.error(message);
     errors.push(message);
   }
-  
+
   if (pageType && pageType !== 'reviews') {
     let message = `'${pageType}' is not a valid page`;
     console.error(message);
     errors.push(message);
   }
-  
+
   if (!locale) {
     console.warn('No locale is set default to English');
   } else {
@@ -27,7 +35,7 @@ export default function IntegrationError({
       errors.push('Invalid locale');
     }
   }
-  
+
   if (filters && !isObject(filters)) {
     let message = 'Filters variable is not an object';
     console.error(message, filters);
@@ -39,8 +47,7 @@ export default function IntegrationError({
 
   return (
     <div>
-      <h2>
-       Something went wrong please try again      </h2>
+      <h2>Something went wrong please try again </h2>
       <ul>
         {errors.map((err) => (
           <li>{err}</li>
@@ -50,7 +57,6 @@ export default function IntegrationError({
   );
 }
 
-
-const isObject = (obj) => {
+const isObject = (obj: any) => {
   return Object.prototype.toString.call(obj) === '[object Object]';
-};
+};

package/src/components/{ErrorBoundary.js → ErrorBoundary.tsx}

@@ -1,16 +1,24 @@
-import React from 'react';
+import React, { ErrorInfo } from 'react';
 
-class ErrorBoundary extends React.Component {
-  constructor(props) {
+interface Props {
+  children: JSX.Element[];
+}
+
+type State = {
+  hasError: boolean;
+};
+
+class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
     super(props);
     this.state = { hasError: false };
   }
 
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError() {
     // Update state so the next render will show the fallback UI.
     return { hasError: true };
   }
-  componentDidCatch(error, errorInfo) {
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     // You can also log the error to an error reporting service
     console.log(error, errorInfo);
   }

package/src/components/Modal/index.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+interface Props {
+  children: React.ReactNode
+  show?: boolean
+  buttonText?: string | React.ReactNode;
+}
+
+function Modal({ children, buttonText }: Props) {
+  const [visible, setVisible] = useState(false);
+
+  if (!visible) {
+    return (
+      <a className="info-button" onClick={() => setVisible(true)}>
+        {buttonText}
+      </a>
+    );
+  }
+
+  return (
+    <div className="bukazu-modal-container">
+      <div className="bukazu-modal-container-inner">
+        <div
+          className="bukazu-modal-escape"
+          onClick={() => setVisible(false)}
+        ></div>
+        <div className="bukazu-modal">
+          <div className="bukazu-modal-content">{children}</div>
+
+          <div className="bukazu-modal-footer">
+            <a onClick={() => setVisible(false)}>
+              <FormattedMessage id="close" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Modal.defaultProps = {
+  show: false
+};
+
+export default Modal;

package/src/components/ReviewsPage/Queries.ts

@@ -0,0 +1,26 @@
+import { gql } from '@apollo/client';
+
+export const REVIEWS_QUERY = gql`
+  query ReviewPortalSiteQuery($id: ID!, $house_id: String!) {
+    PortalSite(id: $id) {
+      houses(house_code: $house_id) {
+        id
+        name
+        rating
+        scoreAmount
+        reviews {
+          id
+          name
+          review
+          score
+          createdAt
+          reviewCriteria {
+            id
+            name
+            score
+          }
+        }
+      }
+    }
+  }
+`;

package/src/components/ReviewsPage/ReviewsPage.tsx

@@ -0,0 +1,43 @@
+import { useQuery } from '@apollo/client';
+import React, { useContext } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { AppContext } from '../AppContext';
+import { ApiError } from '../Error';
+import Loading from '../icons/loading.svg';
+import { REVIEWS_QUERY } from './Queries';
+import Score from './Score';
+import SingleReview from './SingleReview';
+
+function ReviewsPage(): JSX.Element {
+  const { objectCode, portalCode } = useContext(AppContext);
+  const { data, error, loading } = useQuery(REVIEWS_QUERY, {
+    variables: { id: portalCode, house_id: objectCode }
+  });
+
+  if (loading)
+    return (
+      <div>
+        <Loading />
+      </div>
+    );
+  if (error) return <ApiError errors={error} />;
+
+  const house = data.PortalSite.houses[0];
+  const reviews = house.reviews;
+
+  return (
+    <div className="bu_reviews">
+      <div className="bu_reviews__overview">
+        <Score rating={house.rating} />
+        <div className="bu_reviews__overview__number">
+          {house.scoreAmount} <FormattedMessage id="reviews" />
+        </div>
+      </div>
+      {reviews.map((review) => {
+        return <SingleReview review={review} key={review.id} />;
+      })}
+    </div>
+  );
+}
+
+export default ReviewsPage;

package/src/components/ReviewsPage/Score.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+interface Props {
+  rating: number;
+  name?: string;
+}
+
+function Score({ rating, name }: Props) {
+  let color = 'low';
+  if (rating > 7) {
+    color = 'best';
+  } else if (rating > 6) {
+    color = 'good';
+  } else if (rating > 4) {
+    color = 'medium';
+  }
+  return (
+    <div className="bu_score">
+      <div className={`bu_score__rating ${color}`}>{rating.toFixed(1)} /10</div>
+      <div>{name}</div>
+    </div>
+  );
+}
+
+export default Score;

package/src/components/ReviewsPage/SingleReview.tsx

@@ -0,0 +1,38 @@
+import React, { memo } from 'react';
+import Score from './Score';
+
+interface Props {
+  review: {
+    score: number;
+    name: string;
+    createdAt: string;
+    review: string;
+    reviewCriteria: {
+      score: number;
+      name: string;
+      id: number;
+    }[];
+  };
+}
+
+function SingleReview({ review }: Props): JSX.Element {
+  return (
+    <div className="bu_single_review">
+      <div className="bu_review_summary">
+        <Score rating={review.score} />
+        <div className="bu_review_summary__date_name">
+          <div>{review.createdAt},&nbsp;</div>
+          <div className="bu_review_summary__name">{review.name}</div>
+        </div>
+      </div>
+      <blockquote className="bu_review">{review.review}</blockquote>
+      <div className="bu_criteria">
+        {review.reviewCriteria.map((crit) => (
+          <Score rating={crit.score} name={crit.name} key={crit.id} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default memo(SingleReview);

package/src/components/SafeBooking.tsx

@@ -0,0 +1,97 @@
+import React, { CSSProperties, useContext } from 'react';
+import pjson from '../../package.json';
+import { AppContext } from './AppContext';
+
+const style: CSSProperties = {
+  width: '100%',
+  padding: '16px',
+  display: 'flex',
+  justifyContent: 'center',
+  position: 'relative'
+};
+const styleLink = {
+  color: '#808080',
+  fontSize: 14,
+  textDecoration: 'none'
+};
+
+const trans: Trans = {
+  nl: {
+    url: 'http://bukazu.com/veiligheid',
+    label: 'Beveiligd en mogelijk gemaakt door BUKAZU'
+  },
+  en: {
+    url: 'http://bukazu.com/en/security',
+    label: 'Secured and made possible by BUKAZU'
+  },
+  de: {
+    url: 'http://bukazu.com/de/sicherheit',
+    label: 'Gesichert und ermöglicht durch BUKAZU'
+  },
+  fr: {
+    url: 'http://bukazu.com/fr/securite',
+    label: 'Sécurisé et rendu possible par BUKAZU'
+  },
+  es: {
+    url: 'http://bukazu.com/es/seguridad',
+    label: 'Asegurado y hecho posible por BUKAZU'
+  },
+  it: {
+    url: 'http://bukazu.com/it/sicurezza',
+    label: 'Protetto e reso possibile da BUKAZU'
+  }
+};
+
+function SafeBooking(): JSX.Element {
+  const { locale } = useContext(AppContext);
+
+  return (
+    <div style={style}>
+      <a href={trans[locale].url} style={styleLink}>
+        <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 100"
+          enableBackground="new 0 0 100 100"
+          xmlSpace="preserve"
+          width="16px"
+          height="16px"
+          style={{ marginRight: '4px', fill: '#808080' }}
+        >
+          <path d="M75.98,41.62h-2.47L73.5,29.31C73.49,15.9,62.58,4.99,49.17,5C35.76,5.01,24.85,15.92,24.86,29.33l0.02,12.31H24  c-4.61,0.01-8.35,3.75-8.34,8.36v36.65c0,4.61,3.75,8.35,8.36,8.35L76,94.97c4.61,0,8.35-3.74,8.34-8.35V49.96  C84.34,45.35,80.59,41.62,75.98,41.62z M33.84,41.64l-0.02-12.31c0-8.47,6.88-15.36,15.35-15.37c8.47,0,15.36,6.89,15.36,15.35  l0.02,12.31L33.84,41.64z" />
+        </svg>
+        {trans[locale].label}{' '}
+        <span
+          style={{
+            opacity: 0.5,
+            fontSize: 9,
+            position: 'absolute',
+            right: 10,
+            bottom: 0
+          }}
+        >
+          {/* v{pjson.version} */}
+        </span>
+      </a>
+    </div>
+  );
+}
+
+type Trans = {
+  nl: LocaleType;
+  en: LocaleType;
+  de: LocaleType;
+  es: LocaleType;
+  fr: LocaleType;
+  it: LocaleType;
+};
+
+type LocaleType = {
+  label: string;
+  url: string;
+};
+
+export default SafeBooking;

package/src/components/SearchPage/Field.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import List from './filters/List';
+import { createNumberArray, createPriceArray } from './filters/helper';
+import Select from './filters/Select';
+import Categories from './filters/Categories';
+import Radio from './filters/Radio';
+import DateFilter from './filters/DateFilter';
+import NumberFilter from './filters/NumberFilter';
+import { PortalSiteType } from '../../types';
+import { Field as FieldType, FiltersType } from './filters/filter_types';
+
+interface Props {
+  PortalSite: PortalSiteType;
+  field: FieldType;
+  filters: FiltersType;
+  value: string;
+  onFilterChange: Function;
+}
+
+function Field({ PortalSite, field, filters, value, onFilterChange }:Props):JSX.Element {
+  let options = [];
+  if (['countries', 'cities', 'regions'].includes(field.id)) {
+    options = PortalSite[field.id];
+  } else if (field.id === 'persons_min' || field.id === 'persons_max') {
+    options = createNumberArray(PortalSite.max_persons);
+  } else if (field.id === 'bedrooms_min') {
+    options = createNumberArray(PortalSite.max_bedrooms);
+  } else if (field.id === 'bathrooms_min') {
+    options = createNumberArray(PortalSite.max_bathrooms);
+  } else if (field.id === 'weekprice_max') {
+    options = createPriceArray(PortalSite.max_weekprice);
+  } else {
+    options = createNumberArray(PortalSite[field.id]);
+  }
+
+  let default_settings = {
+    options,
+    field,
+    filters,
+    value
+  };
+
+  if (field.id === 'properties') {
+    return (
+      <Categories
+        PortalSite={PortalSite}
+        filters={filters}
+        onChange={onFilterChange}
+      />
+    );
+  } else if (field.type === 'select') {
+    return <Select {...default_settings} onChange={onFilterChange} />;
+  } else if (field.type === 'list') {
+    return <List {...default_settings} onChange={onFilterChange} />;
+  } else if (field.type === 'radio') {
+    return <Radio {...default_settings} onChange={onFilterChange} />;
+  } else if (field.type === 'number') {
+    return (
+      <NumberFilter PortalSite={PortalSite} field={field} value={value} onChange={onFilterChange} />
+    );
+  } else if (field.type === 'date') {
+    return <DateFilter field={field} value={value} onChange={onFilterChange} />;
+  } else {
+    return (
+      <input
+        value={value}
+        onBlur={(event) => {
+          onFilterChange(field.id, event.target.value);
+        }}
+      />
+    );
+  }
+}
+
+export default Field;