bukazu-portal-react 2.1.21 → 3.0.3

package/src/components/CalendarPage/CalendarParts/WeekDays.tsx

@@ -0,0 +1,27 @@
+import { startOfWeek, addDays } from "date-fns";
+import React from "react";
+import { FormatIntl } from "../../../_lib/date_helper";
+
+interface Props {
+    month: Date
+}
+
+function WeekDays({ month }: Props):JSX.Element {
+const dateFormat = 'E';
+    let days: JSX.Element[] = [];
+
+    let startDate: Date = startOfWeek(month);
+
+    for (let i = 0; i < 7; i++) {
+      days.push(
+        <div className="col col-center" key={i}>
+          {FormatIntl(addDays(startDate, i), dateFormat)}
+        </div>
+      );
+    }
+
+    return <div className="days row">{days}</div>;
+    
+}
+
+export default WeekDays

package/src/components/CalendarPage/FormCreator.tsx

@@ -0,0 +1,213 @@
+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';
+
+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 }] = useMutation(
+    CREATE_BOOKING_MUTATION
+  );
+
+  if (data) {
+    return (
+      <Modal show={true}>
+        <SuccessMessage />
+      </Modal>
+    );
+  }
+
+  const optBookingFieldsInitialized = initializeBookingFields(bookingFields);
+
+  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)
+        };
+
+        createBooking({ variables })
+          .then(() => {
+            if (
+              options.bookingForm &&
+              options.bookingForm.redirectUrl &&
+              options.bookingForm.redirectUrl !== ''
+            ) {
+              window.location = options.bookingForm.redirectUrl;
+            } else {
+              setTimeout(() => {
+                dispatch({
+                  type: 'return'
+                });
+              }, 15000);
+            }
+          })
+          .catch((err) => {});
+      }}
+    >
+      {({ 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>
+          )}
+
+          <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 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">
+              <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"
+                      />
+                    </div>
+                  </Modal>
+                )}
+              </FormattedMessage>
+            </div>
+            {[1, 2].includes(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>
+      )}
+    </Formik>
+  );
+}
+
+export default FormCreator;

package/src/components/CalendarPage/FormItems/{Date.js → Date.tsx}

@@ -4,7 +4,15 @@ import { FormattedMessage } from 'react-intl';
 import DatePicker from 'react-date-picker';
 import { format } from 'date-fns';
 
-function DateField({ label, description, options, name, inline }) {
+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 }) => {
@@ -47,7 +55,7 @@ function DateField({ label, description, options, name, inline }) {
 }
 
 DateField.defaultValues = {
-  inline: true,
+  inline: true
 };
 
 export default DateField;

package/src/components/CalendarPage/FormItems/{NumberSelect.js → NumberSelect.tsx}

@@ -8,7 +8,7 @@ export default function NumberSelect({ label, description, count, ...props }) {
 
   return (
     <Field name={props.name}>
-      {({ field, meta, form }) => {
+      {({ field, meta }) => {
         return (
           <div className="form-row inline" id={`bukazu_form_${props.name}`}>
             <label htmlFor={props.name}>

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

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

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

@@ -0,0 +1,127 @@
+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 [persons, setPersons] = useState(2);
+
+  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.js → CostRow.tsx}

@@ -2,7 +2,23 @@ import React from 'react';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
 import Description from './Description';
 
-function CostRow({ name, amount, description, method_name, formatName, forceMethod }) {
+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>
@@ -24,7 +40,7 @@ function CostRow({ name, amount, description, method_name, formatName, forceMeth
               minimumFractionDigits={2}
               maximumFractionDigits={2}
             />
-            {forceMethod && (<>{' '}{method_name}</>)}
+            {forceMethod && <> {method_name}</>}
           </>
         ) : (
           <>{method_name}</>
@@ -36,7 +52,7 @@ function CostRow({ name, amount, description, method_name, formatName, forceMeth
 
 CostRow.defaultValues = {
   formatName: false,
-  forceMethod: false,
+  forceMethod: false
 };
 
 export default CostRow;

package/src/components/CalendarPage/Summary/{CostSection.js → CostSection.tsx}

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

package/src/components/CalendarPage/Summary/{CostSummary.js → CostSummary.tsx}

@@ -1,32 +1,41 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useQuery } from '@apollo/client';
-import InsurancesAndRequired from './InsurancesAndRequired';
+import InsurancesAndRequired from './InsurancesAndRequired.tsx';
 import { BOOKING_PRICE_TOTAL_QUERY } from './Queries';
 import RentAndDiscount from './RentAndDiscount';
 import OptionalNotOnSite from './OptionalNotOnSite';
 import OnSite from './OnSite';
 import Totals from './Totals';
+import { AppContext } from '../../AppContext';
+import { HouseType } from '../../../types';
+import { PossibleValues } from '../formParts/form_types';
 
-function CostSummary({ values, house }) {
+interface Props {
+  values: PossibleValues;
+  house: HouseType;
+}
+
+function CostSummary({ values, house }: Props): React.ReactNode {
   let babies = Number(values.babies) - Number(house.babies_extra);
-    if (babies < 0) {
-      babies = 0;
-    }
+  if (babies < 0) {
+    babies = 0;
+  }
   const persons = Number(values.children) + Number(values.adults) + babies;
+  const { portalCode, objectCode } = useContext(AppContext);
 
   const { loading, error, data } = useQuery(BOOKING_PRICE_TOTAL_QUERY, {
     variables: {
-      id: values.portalCode,
+      id: portalCode,
       persons: persons,
-      house_id: values.objectCode,
+      house_id: objectCode,
       starts_at: JSON.stringify(values.arrivalDate.date),
       ends_at: JSON.stringify(values.departureDate.date),
       costs: JSON.stringify(values.costs),
       discount: Number(values.discount),
       discount_code: values.discount_code,
-      cancel_insurance: Number(values.cancel_insurance),
+      cancel_insurance: Number(values.cancel_insurance)
     },
-    fetchPolicy: 'network-only',
+    fetchPolicy: 'network-only'
   });
 
   if (loading) {

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import Icon from '../../icons/info.svg';
+import Modal from '../../Modal';
+
+interface Props {
+  description: string | React.ReactNode;
+}
+
+function Description({ description }: Props): JSX.Element {
+  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;

package/src/components/CalendarPage/Summary/{InsurancesAndRequired.js → InsurancesAndRequired.tsx}

@@ -1,7 +1,24 @@
 import React from 'react';
 import CostRow from './CostRow';
+import { CostType } from './cost_types';
 
-export default function InsurancesAndRequired({ prices }) {
+interface Props {
+  prices: {
+    total_costs: {
+      insurances: {
+        cancel_insurance: number;
+      };
+      required_costs: {
+        not_on_site: CostType[];
+      };
+    };
+    required_house_costs: CostType[];
+  };
+}
+
+export default function InsurancesAndRequired({
+  prices
+}: Props): React.ReactNode {
   const { insurances, required_costs } = prices.total_costs;
   const { not_on_site } = required_costs;
   return (
@@ -25,7 +42,9 @@ export default function InsurancesAndRequired({ prices }) {
               if (cost.method === 'none') {
                 return <CostRow key={cost.id} {...cost} />;
               } else {
-                if (cost.amount === 0) { return null; }
+                if (cost.amount === 0) {
+                  return null;
+                }
                 return (
                   <CostRow
                     key={cost.id}