bukazu-portal-react 2.1.21 → 3.0.3

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import {
+  FormatIntl,
+  LONG_DATE_FORMAT,
+  Parse_EN_US
+} from '../../../_lib/date_helper';
+import { HouseType } from '../../../types';
+import { PossibleValues } from '../formParts/form_types';
+
+interface Props {
+  house: HouseType;
+  values: PossibleValues;
+}
+
+export const Object = ({ house, values }: Props): React.ReactNode => {
+  const { arrivalDate, departureDate } = values;
+  return (
+    <React.Fragment>
+      <h2>
+        <FormattedMessage id="booking_details" />
+      </h2>
+      <div className="house-details">
+        <div>{house.name}</div>
+        <img src={house.image_url} alt="" />
+        <table>
+          <tbody>
+            <tr>
+              <th>
+                <FormattedMessage id={`${house.house_type}.arrival`} />
+              </th>
+              <td className="price">
+                {FormatIntl(Parse_EN_US(arrivalDate.date), LONG_DATE_FORMAT)}
+              </td>
+              <td>
+                {arrivalDate.arrival_time_from} - {arrivalDate.arrival_time_to}
+              </td>
+            </tr>
+            <tr>
+              <th>
+                <FormattedMessage id={`${house.house_type}.departure`} />
+              </th>
+              <td className="price">
+                {FormatIntl(Parse_EN_US(departureDate.date), LONG_DATE_FORMAT)}
+              </td>
+              <td>{departureDate.departure_time}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </React.Fragment>
+  );
+};
+
+Object.propTypes = {
+  house: PropTypes.object.isRequired,
+  values: PropTypes.object.isRequired
+};

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

@@ -2,8 +2,13 @@ import React from 'react';
 import CostRow from './CostRow';
 import OptionalOnSite from './OptionalOnSite';
 import { FormattedMessage } from 'react-intl';
+import { PricesType } from './cost_types';
 
-export default function OnSite({ prices }) {
+interface Props {
+  prices: PricesType;
+}
+
+export default function OnSite({ prices }: Props): React.ReactNode {
   const { required_costs } = prices.total_costs;
   const { on_site } = required_costs;
   return (
@@ -16,15 +21,10 @@ export default function OnSite({ prices }) {
           {prices.required_house_costs.map((cost) => {
             if (cost.on_site && cost.gl !== '0120') {
               if (cost.method === 'none') {
-                return (
-                  <CostRow key={cost.id} {...cost} />
-                );
+                return <CostRow key={cost.id} {...cost} />;
               } else {
-                let amount = on_site.find((x) => x.id == cost.id).amount
-                return (
-                  <CostRow key={cost.id} {...cost} amount={amount} />
-                  
-                );
+                let amount = on_site.find((x) => x.id == cost.id)?.amount;
+                return <CostRow key={cost.id} {...cost} amount={amount} />;
               }
             }
           })}

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

@@ -1,37 +1,38 @@
 import React from 'react';
 import CostRow from './CostRow';
+import { PricesType } from './cost_types';
 
-export default function OptionalNotOnSite({ prices }) {
+interface Props {
+  prices: PricesType;
+}
+
+export default function OptionalNotOnSite({ prices }: Props): JSX.Element {
   const { optional_costs } = prices.total_costs;
   const { not_on_site } = optional_costs;
   return (
     <div className="costs-section">
       <table>
-        <tbody>          
+        <tbody>
           {prices.optional_house_costs.map((cost) => {
             if (!cost.on_site && cost.gl !== '0120') {
               if (cost.method === 'none') {
-                return (
-                  <CostRow key={cost.id} {...cost} />                 
-                );
+                return <CostRow key={cost.id} {...cost} />;
               } else if (cost.method === 'on_site') {
                 if (not_on_site.find((x) => x.id == cost.id).nr_of_items > 0) {
-                  return (
-                    <CostRow key={cost.id} {...cost} amount={cost.amount} forceMethod={true} />
-                    );
-                  }
-              } else {
-                let amount = not_on_site.find((x) => x.id == cost.id).amount
-                if (amount >  0) { 
-
                   return (
                     <CostRow
-                    key={cost.id}
-                    {...cost}
-                    amount={amount}
+                      key={cost.id}
+                      {...cost}
+                      amount={cost.amount}
+                      forceMethod={true}
                     />
-                    )
-                  }
+                  );
+                }
+              } else {
+                let amount = not_on_site.find((x) => x.id == cost.id).amount;
+                if (amount > 0) {
+                  return <CostRow key={cost.id} {...cost} amount={amount} />;
+                }
               }
             }
           })}

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

@@ -1,7 +1,12 @@
 import React from 'react';
 import CostRow from './CostRow';
+import { PricesType } from './cost_types';
 
-export default function OptionalOnSite({ prices }) {
+interface Props {
+  prices: PricesType;
+}
+
+export default function OptionalOnSite({ prices }: Props): JSX.Element {
   const { optional_costs } = prices.total_costs;
   const { on_site } = optional_costs;
   return (

package/src/components/CalendarPage/Summary/{Queries.js → Queries.ts}

@@ -1,6 +1,6 @@
-import { gql}  from "@apollo/client";
+import { gql } from '@apollo/client';
 
-export const BOOKING_PRICE_TOTAL_QUERY= gql`
+export const BOOKING_PRICE_TOTAL_QUERY = gql`
   query BookingPriceTotalQuery(
     $id: ID!
     $house_id: String!
@@ -28,4 +28,4 @@ export const BOOKING_PRICE_TOTAL_QUERY= gql`
       }
     }
   }
-`
+`;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import CostRow from './CostRow';
+import { PricesType } from './cost_types';
+
+interface Props {
+  prices: PricesType;
+}
+
+export default function RentAndDiscount({ prices }: Props): JSX.Element {
+  const { rent_price, discount, discounted_price } = prices;
+  return (
+    <div className="costs-section">
+      <table>
+        <tbody>
+          <CostRow name="rent_price" formatName={true} amount={rent_price} />
+          {discount > 0 ? (
+            <>
+              <CostRow name="discount" formatName={true} amount={discount} />
+              <CostRow
+                name="price_after_discount"
+                formatName={true}
+                amount={discounted_price}
+              />
+            </>
+          ) : null}
+        </tbody>
+      </table>
+    </div>
+  );
+}

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

@@ -2,8 +2,13 @@ import React from 'react';
 import CostRow from './CostRow';
 import CostSection from './CostSection';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
+import { PricesType } from './cost_types';
 
-function Totals({ prices }) {
+interface Props {
+  prices: PricesType;
+}
+
+function Totals({ prices }: Props): JSX.Element {
   return (
     <>
       <CostSection>
@@ -11,7 +16,7 @@ function Totals({ prices }) {
           <th
             style={{
               textAlign: 'left',
-              testTransform: 'capitalize',
+              testTransform: 'capitalize'
             }}
           >
             <FormattedMessage id="total" />
@@ -49,7 +54,7 @@ function Totals({ prices }) {
           <th
             style={{
               textAlign: 'left',
-              testTransform: 'capitalize',
+              testTransform: 'capitalize'
             }}
           >
             <FormattedMessage id="total" />

package/src/components/CalendarPage/Summary/cost_types.d.ts

@@ -0,0 +1,31 @@
+export type CostType = {
+  on_site: boolean;
+  gl: string;
+  method: string;
+  id: number;
+  amount: number;
+  name: string;
+};
+
+export type PricesType = {
+  total_costs: {
+    sub_total: number;
+    total_price: number;
+    insurances: {
+      cancel_insurance: number;
+    };
+    required_costs: {
+      not_on_site: CostType[];
+      on_site: CostType[];
+    };
+    optional_costs: {
+      not_on_site: CostType[];
+      on_site: CostType[];
+    };
+  };
+  optional_house_costs: CostType[];
+  required_house_costs: CostType[];
+  rent_price: number;
+  discount: number;
+  discounted_price: number;
+};

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { HouseType } from '../../../types';
+
+import BookingOrOption from '../formParts/BookingOrOption';
+import { PossibleValues } from '../formParts/form_types';
+import CostSummary from './CostSummary';
+import { Object } from './Object';
+
+interface Props {
+  values: PossibleValues;
+  house: HouseType;
+}
+
+function Summary({ values, house }: Props): React.ReactNode {
+  return (
+    <div>
+      <Object house={house} values={values} />
+      <BookingOrOption house={house} />
+      <CostSummary values={values} house={house} />
+    </div>
+  );
+}
+
+export default Summary;

package/src/components/CalendarPage/calender_types.d.ts

@@ -0,0 +1,16 @@
+import { BuDate } from '../../types';
+
+export type DatesType = {
+  arrivalDate: BuDate;
+  selectedDate: Date;
+  departureDate: BuDate;
+  startBooking: Boolean;
+};
+
+export type BookingType = {
+  arrivalDate: BuDate | null;
+  departureDate: BuDate | null;
+  selectedDate: Date | null;
+  bookingStarted: boolean;
+  persons: number;
+};

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

@@ -0,0 +1,60 @@
+import React, { useContext } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { HouseType } from '../../../types';
+import {
+  FormatIntl,
+  LONG_DATE_FORMAT,
+  Parse_EN_US
+} from '../../../_lib/date_helper';
+import { CalendarContext } from '../CalendarParts/CalendarContext';
+
+interface Props {
+  house: HouseType;
+}
+
+function AssistanceMessage({ house }: Props): JSX.Element {
+  const { departureDate, arrivalDate } = useContext(CalendarContext);
+
+  if (departureDate?.date) {
+    return (
+      <div className="assistance">
+        <FormattedMessage id={`${house.house_type}.you_picked_arrival_date`} />:{' '}
+        {FormatIntl(Parse_EN_US(arrivalDate.date), LONG_DATE_FORMAT)}
+        <br />
+        <FormattedMessage
+          id={`${house.house_type}.you_picked_departure_date`}
+        />
+        : {FormatIntl(Parse_EN_US(departureDate.date), LONG_DATE_FORMAT)}
+      </div>
+    );
+  }
+
+  if (arrivalDate?.date) {
+    return (
+      <div className="assistance">
+        <FormattedMessage id={`${house.house_type}.you_picked_arrival_date`} />:{' '}
+        {FormatIntl(Parse_EN_US(arrivalDate.date), LONG_DATE_FORMAT)}
+        <br />
+        <FormattedMessage
+          id={`${house.house_type}.pick_your_departure_in_the_calendar`}
+        />
+        <br />
+        <FormattedMessage
+          id="minimum_nights"
+          values={{ minimum: arrivalDate.min_nights }}
+          defaultMessage="Minimum {minimum} nights"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="assistance">
+      <FormattedMessage
+        id={`${house.house_type}.pick_your_arrivaldate_in_the_calendar`}
+      />
+    </div>
+  );
+}
+
+export default AssistanceMessage;

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

@@ -2,11 +2,11 @@ import { subYears, isAfter } from 'date-fns'
 import React from 'react'
 import { FormattedMessage } from 'react-intl';
 
-export function createPeronsArray(persons) {
+export function createPeronsArray(persons: number): number[] {
   return Array.apply(null, { length: persons + 1 }).map(Number.call, Number);
 }
 
-export function initializeBookingFields(bookingFields) {
+export function initializeBookingFields(bookingFields: any[]) {
   let obj = {};
   bookingFields.map((field) => {
     obj[field.id] = '';
@@ -29,7 +29,7 @@ export function byString(o, s) {
   return o;
 }
 
-export function translatedOption(id, value) {
+export function translatedOption(id:string, value: string):JSX.Element {
   return (
     <FormattedMessage id={id}>
       {(formattedMessage) => <option value={value}>{formattedMessage}</option>}

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

@@ -2,8 +2,13 @@ import React from 'react';
 import { RadioButtonGroup, RadioButton } from './radioButtons';
 import { Field } from 'formik';
 import { FormattedMessage } from 'react-intl';
+import { HouseType } from '../../../types';
 
-export default function BookingOrOption({ house, ...props }) {
+interface Props {
+  house: HouseType;
+}
+
+export default function BookingOrOption({ house }: Props): JSX.Element {
   return (
     <>
       {house.allow_option && (

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

@@ -0,0 +1,105 @@
+import React, { useContext } from 'react';
+import { FormattedMessage as FM } from 'react-intl';
+import { AppContext } from '../../AppContext';
+
+type localeObject = {
+  nl: string;
+  de: string;
+  en: string;
+  es: string;
+  it: string;
+  fr: string;
+};
+
+const LocalizedAttachment: localeObject = {
+  nl: 'https://insurances.bukazu.com/nl/Voorwaarden%20Annuleringsverzekering.pdf',
+  de: 'https://insurances.bukazu.com/de/Bedingungen%20Reiseruecktrittsversicherung.pdf',
+  en: 'https://insurances.bukazu.com/en/Terms%20to%20Cancellation%20Insurance.pdf',
+  es: 'https://insurances.bukazu.com/en/Terms%20to%20Cancellation%20Insurance.pdf',
+  it: 'https://insurances.bukazu.com/en/Terms%20to%20Cancellation%20Insurance.pdf',
+  fr: 'https://insurances.bukazu.com/en/Terms%20to%20Cancellation%20Insurance.pdf'
+};
+
+const CancelInsuranceText = () => {
+  const { locale } = useContext(AppContext);
+
+  return (
+    <>
+      <h2>
+        <FM id="cancel_insurance" />
+      </h2>
+      <hr />
+      <p>
+        <FM id="cancel_insurance_desc" />
+      </p>
+      <h3>
+        <FM id="cancel_insurance_normal_long" />
+      </h3>
+      <p>
+        <FM id="cancel_insurance_normal_desc" />
+      </p>
+      <h3>
+        <FM id="cancel_insurance_all_risk_long" />
+      </h3>
+      <p>
+        <FM id="cancel_insurance_all_risk_desc" />
+      </p>
+
+      <h3>
+        <FM id="terms_and_costs" />
+      </h3>
+      <h4>
+        <FM id="costs_normal_cancel_insurance" />
+      </h4>
+      <p>
+        <FM id="666_costs" />
+      </p>
+      <h4>
+        <FM id="costs_allrisk_cancel_insurance" />
+      </h4>
+      <p>
+        <FM id="847_costs" />
+      </p>
+      <p>
+        <FM id="more_information" />
+      </p>
+      <a
+        href={LocalizedAttachment[locale]}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <FM id="show_terms" />
+      </a>
+      <h3>
+        <FM id="terms" />
+      </h3>
+      <ul>
+        <li>
+          <FM id="9persons_9addresses" />
+        </li>
+        <li>
+          <strong>
+            <FM id="or" />
+          </strong>
+        </li>
+        <li>
+          <FM id="9persons_4addresses" />
+        </li>
+      </ul>
+
+      <hr />
+      <h2>
+        <FM id="poliscosts" />
+      </h2>
+      <p>
+        <FM id="poliscosts_are" />
+      </p>
+
+      <p>
+        <FM id="youwillrecieve" />
+      </p>
+    </>
+  );
+};
+
+export default CancelInsuranceText;

package/src/components/CalendarPage/formParts/{DefaultBookingFields.js → DefaultBookingFields.ts}

@@ -1,4 +1,6 @@
-const DefaultBookingFields = [
+import { BookingFieldsType } from "./form_types";
+
+const DefaultBookingFields: BookingFieldsType = [
   {
     id: 'first_name',
     label: 'Voornaam',

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

@@ -0,0 +1,62 @@
+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.js → Guests.tsx}

@@ -1,8 +1,14 @@
 import React from 'react';
 import { NumberSelect } from '../FormItems';
 import { FormattedMessage } from 'react-intl';
+import { HouseType, PortalOptions } from '../../../types';
 
-export default function Guests({ options, house }) {
+interface Props {
+  options: PortalOptions;
+  house: HouseType;
+}
+
+export default function Guests({ options, house }: Props): React.ReactNode {
   return (
     <>
       <NumberSelect
@@ -17,7 +23,7 @@ export default function Guests({ options, house }) {
               values={{
                 age: options.bookingForm
                   ? options.bookingForm.adults_from || '18'
-                  : '18',
+                  : '18'
               }}
             />
           </div>
@@ -39,7 +45,7 @@ export default function Guests({ options, house }) {
                     : '3',
                   til: options.bookingForm
                     ? options.bookingForm.children_til || '17'
-                    : '17',
+                    : '17'
                 }}
               />
             </div>
@@ -59,7 +65,7 @@ export default function Guests({ options, house }) {
                 values={{
                   babies: options.bookingForm
                     ? options.bookingForm.babies_til || '2'
-                    : '2',
+                    : '2'
                 }}
               />
             </div>

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { Field } from 'formik';
 import {FormattedMessage, FormattedNumber } from 'react-intl'
 import Modal from '../../Modal'
-import includes from "array-includes";
 import Icon from "../../icons/info.svg";
 import { createPeronsArray } from './BookingHelpers'
 
@@ -18,7 +17,7 @@ function OptionalCosts({ costs }) {
       <div>
         {costs.map((cost) => {
           if (
-            !includes(['none', 'total'], cost.method) &&
+            !['none', 'total'].includes(cost.method) &&
             cost.max_available > 0
           ) {
             if (cost.max_available === 1) {