bukazu-portal-react 3.3.3 → 3.3.4

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

@@ -1,69 +0,0 @@
-import React from 'react';
-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';
-
-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
-  ) {
-    let discounts = house.discounts ? house.discounts.split(',') : [];
-    return (
-      <div className="form-section">
-        {house.discounts && house.discounts !== '0' && (
-          <>
-            <div className="form-row inline">
-              <label htmlFor="discount">
-                <FormattedMessage id="discount" />
-              </label>
-              <Field component="select" name="discount">
-                {discounts.map((discount) => (
-                  <option value={discount} key={discount}>
-                    {discount}%
-                  </option>
-                ))}
-              </Field>
-            </div>
-            <div className="form-row inline">
-              <label htmlFor="discount_reason">
-                <FormattedMessage id="discount_reason" />
-              </label>
-              <Field name="discount_reason" />
-              {errors.discount_reason && (
-                <div className="error-message bu-error-message">
-                  {errors.discount_reason}
-                </div>
-              )}
-            </div>
-            <div>
-              <i style={{ fontSize: 14 }}>{house.discounts_info}</i>
-            </div>
-          </>
-        )}
-        {options.bookingForm?.showDiscountCode && (
-          <DiscountCode errors={errors} house={house} values={values} />
-        )}
-      </div>
-    );
-  } else {
-    return null;
-  }
-};
-
-Discount.propTypes = {
-  house: PropTypes.object.isRequired,
-  errors: PropTypes.object.isRequired
-};
-
-export default Discount;

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

@@ -1,38 +0,0 @@
-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.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { Field } from 'formik';
-import Modal from '../../Modal';
-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';
-
-type Props = {
-  house: HouseType;
-  values: PossibleValues;
-};
-
-function cancelInsurance(house: HouseType) {
-  if (house.cancel_insurance) {
-    return (
-      <div className="form-row inline">
-        <label htmlFor="cancel_insurance">
-          <FormattedMessage id="cancel_insurance" />
-        </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')}
-        </Field>
-        <Modal buttonText={<Icon />}>
-          <CancelInsuranceText />
-        </Modal>
-      </div>
-    );
-  }
-}
-
-export const Insurances = ({ house, values }: Props) => {
-  if (house.cancel_insurance) {
-    return (
-      <div className="form-section" id="insurances">
-        <h2>
-          <FormattedMessage id="insurances" />
-        </h2>
-        {cancelInsurance(house)}
-        {values.cancel_insurance && values.cancel_insurance !== '0' && (
-          <DateField
-            label="extra_fields.date_of_birth"
-            name="extra_fields.date_of_birth"
-            required
-            inline={false}
-            description={
-              <FormattedMessage id="insurance_company_needs_date_of_birth" />
-            }
-          />
-        )}
-      </div>
-    );
-  } else {
-    return <div />;
-  }
-};

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

@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// Input feedback
-const InputFeedback = ({ error }) =>
-  error ? <div className="input-feedback">{error}</div> : null;
-
-InputFeedback.propTypes = {
-  error: PropTypes.object,
-};
-
-// Radio input
-export const RadioButton = ({
-  field: { name, value, onChange, onBlur },
-  id,
-  label,
-  ...props
-}) => {
-  return (
-    <div>
-      <input
-        name={name}
-        id={id}
-        type="radio"
-        value={id} // could be something else for output?
-        checked={id === value}
-        onChange={onChange}
-        onBlur={onBlur}
-        className="radio-button"
-        {...props}
-      />
-      <label htmlFor={id}>{label}</label>
-    </div>
-  );
-};
-
-RadioButton.propTypes = {
-  field: PropTypes.object,
-  id: PropTypes.string,
-  label: PropTypes.object,
-};
-
-// Radio group
-export const RadioButtonGroup = ({
-  error,
-  touched,
-  label,
-  className,
-  children,
-}) => {
-  return (
-    <div className={className}>
-      <div className="legend">{label}</div>
-      {children}
-      {touched && <InputFeedback error={error} />}
-    </div>
-  );
-};
-
-RadioButtonGroup.propTypes = {
-  error: PropTypes.object,
-  touched: PropTypes.object,
-  className: PropTypes.string,
-  label: PropTypes.string,
-  children: PropTypes.node.isRequired,
-};

package/src/components/Error/ApiError.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import Modal from '../Modal';
-import { FormattedMessage } from 'react-intl';
-import { ApolloError } from '@apollo/client';
-
-function ApiError(
-  errors: { errors: ApolloError },
-  modal: boolean
-): JSX.Element {
-  const errorMessage = (
-    <div className="bukazu-error-message">
-      <h2>
-        <FormattedMessage id="something_went_wrong_please_try_again" />
-      </h2>
-      <ul>
-        {errors.errors.graphQLErrors.map((err) => (
-          <li key={err.message}>{err.message}</li>
-        ))}
-      </ul>
-    </div>
-  );
-  if (modal == true) {
-    return <Modal show={true}>{errorMessage}</Modal>;
-  }
-
-  return errorMessage;
-}
-
-ApiError.defaultProps = {
-  modal: false
-};
-
-export default ApiError;

package/src/components/Error/IntegrationError.tsx

@@ -1,62 +0,0 @@
-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
-}: 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 {
-    if (!['nl', 'de', 'en', 'fr', 'it', 'es'].includes(locale)) {
-      errors.push('Invalid locale');
-    }
-  }
-
-  if (filters && !isObject(filters)) {
-    let message = 'Filters variable is not an object';
-    console.error(message, filters);
-  }
-
-  if (errors.length == 0) {
-    return false;
-  }
-
-  return (
-    <div>
-      <h2>Something went wrong please try again </h2>
-      <ul>
-        {errors.map((err) => (
-          <li>{err}</li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-const isObject = (obj: any) => {
-  return Object.prototype.toString.call(obj) === '[object Object]';
-};

package/src/components/Error/index.ts

@@ -1,4 +0,0 @@
-import ApiError from './ApiError';
-import IntegrationError from './IntegrationError';
-
-export { ApiError, IntegrationError };

package/src/components/ErrorBoundary.tsx

@@ -1,34 +0,0 @@
-import React, { ErrorInfo } from 'react';
-
-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() {
-    // Update state so the next render will show the fallback UI.
-    return { hasError: true };
-  }
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    // You can also log the error to an error reporting service
-    console.error(error, errorInfo);
-  }
-  render() {
-    if (this.state.hasError) {
-      // You can render any custom fallback UI
-      return <h1>Something went wrong.</h1>;
-    }
-    return this.props.children;
-  }
-}
-
-export default ErrorBoundary;

package/src/components/Modal/index.tsx

@@ -1,46 +0,0 @@
-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, show }: Props) {
-  const [visible, setVisible] = useState(show);
-
-  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

@@ -1,26 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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';
-import Note from './note';
-
-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 bu_card">
-        <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} />;
-      })}
-        <Note />
-    </div>
-  );
-}
-
-export default ReviewsPage;

package/src/components/ReviewsPage/Score.tsx

@@ -1,29 +0,0 @@
-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">
-      {rating && (
-        <div className={`bu_score__rating bu_card ${color}`}>
-          {rating.toFixed(1)}
-        </div>
-      )}
-      <div>{name}</div>
-    </div>
-  );
-}
-
-export default Score;

package/src/components/ReviewsPage/SingleReview.tsx

@@ -1,38 +0,0 @@
-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 bu_card">
-      <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/ReviewsPage/note.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { FormattedMessage } from "react-intl";
-
-function Note() {
-    return (
-        <div className="bu_reviews__note">
-            {/* <FormattedMessage id="reviews_note" />
-            <br /> */}
-            <a href="https://www.bukazu.com" target="_blank" rel="noopener noreferrer">
-                <FormattedMessage id="reviews_note_link" />
-            </a>
-        </div>
-    )
-
-}
-
-export default Note;

package/src/components/SafeBooking.tsx

@@ -1,96 +0,0 @@
-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
-          }}
-        >
-        </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;