bukazu-portal-react 3.3.3 → 3.3.4

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

@@ -1,61 +0,0 @@
-import React, { useContext } from 'react';
-import { useQuery } from '@apollo/client';
-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';
-
-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;
-  }
-  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: portalCode,
-      persons: persons,
-      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)
-    },
-    fetchPolicy: 'network-only'
-  });
-
-  if (loading) {
-    return 'Loading...';
-  }
-  if (error) {
-    return <div>{JSON.stringify(error)}</div>;
-  }
-
-  const prices = data.PortalSite.houses[0].booking_price;
-
-  return (
-    <>
-      <RentAndDiscount prices={prices} />
-      <InsurancesAndRequired prices={prices} />
-      <OptionalNotOnSite prices={prices} />
-      <OnSite prices={prices} />
-      <Totals prices={prices} />
-    </>
-  );
-}
-
-export default CostSummary;

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

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

@@ -1,68 +0,0 @@
-import React from 'react';
-import CostRow from './CostRow';
-import { CostType } from './cost_types';
-
-interface Props {
-  prices: {
-    total_costs: {
-      insurances: {
-        cancel_insurance: number;
-        insurance_costs: 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 (
-    <div className="costs-section">
-      <table>
-        <tbody>
-          {insurances && (
-            <>
-              {Object.keys(insurances).map((key: string) => {
-                if (insurances[key] > 0) {
-                  return (
-                    <CostRow
-                      name={key}
-                      key={key}
-                      formatName={true}
-                      amount={insurances[key]}
-                    />
-                  );
-                }
-              })}
-            </>
-          )}
-          {prices.required_house_costs.map((cost) => {
-            if (!cost.on_site && cost.gl !== '0120') {
-              if (cost.method === 'none') {
-                return <CostRow key={cost.id} {...cost} />;
-              } else {
-                if (cost.amount === 0) {
-                  return null;
-                }
-                return (
-                  <CostRow
-                    key={cost.id}
-                    {...cost}
-                    amount={not_on_site?.find((x) => x.id == cost.id).amount}
-                  />
-                );
-              }
-            }
-          })}
-        </tbody>
-      </table>
-    </div>
-  );
-}

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

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

@@ -1,36 +0,0 @@
-import React from 'react';
-import CostRow from './CostRow';
-import OptionalOnSite from './OptionalOnSite';
-import { FormattedMessage } from 'react-intl';
-import { PricesType } from './cost_types';
-
-interface Props {
-  prices: PricesType;
-}
-
-export default function OnSite({ prices }: Props): React.ReactNode {
-  const { required_costs } = prices.total_costs;
-  const { on_site } = required_costs;
-  return (
-    <div className="costs-section">
-      <strong>
-        <FormattedMessage id="costs_on_site" />
-      </strong>
-      <table>
-        <tbody>
-          {prices.required_house_costs.map((cost) => {
-            if (cost.on_site && cost.gl !== '0120') {
-              if (cost.method === 'none') {
-                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} />;
-              }
-            }
-          })}
-          <OptionalOnSite prices={prices} />
-        </tbody>
-      </table>
-    </div>
-  );
-}

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

@@ -1,43 +0,0 @@
-import React from 'react';
-import CostRow from './CostRow';
-import { PricesType } from './cost_types';
-
-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>
-          {prices.optional_house_costs.map((cost) => {
-            if (!cost.on_site && cost.gl !== '0120') {
-              if (cost.method === 'none') {
-                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} />;
-                }
-              }
-            }
-          })}
-        </tbody>
-      </table>
-    </div>
-  );
-}

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

@@ -1,39 +0,0 @@
-import React from 'react';
-import CostRow from './CostRow';
-import { PricesType } from './cost_types';
-
-interface Props {
-  prices: PricesType;
-}
-
-export default function OptionalOnSite({ prices }: Props): JSX.Element {
-  const { optional_costs } = prices.total_costs;
-  const { on_site } = optional_costs;
-  return (
-    <>
-      {prices.optional_house_costs.map((cost) => {
-        if (cost.on_site && cost.gl !== '0120') {
-          if (cost.method === 'none') {
-            return <CostRow key={cost.id} {...cost} />;
-          } else if (cost.method === 'on_site') {
-            if (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 = 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/Queries.ts

@@ -1,31 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const BOOKING_PRICE_TOTAL_QUERY = gql`
-  query BookingPriceTotalQuery(
-    $id: ID!
-    $house_id: String!
-    $starts_at: Date!
-    $ends_at: Date!
-    $persons: Int
-    $costs: Json
-    $cancel_insurance: Int
-    $discount: Int
-    $discount_code: String
-  ) {
-    PortalSite(id: $id) {
-      houses(house_code: $house_id) {
-        id
-        name
-        booking_price(
-          starts_at: $starts_at
-          ends_at: $ends_at
-          persons: $persons
-          costs: $costs
-          cancel_insurance: $cancel_insurance
-          discount: $discount
-          discount_code: $discount_code
-        )
-      }
-    }
-  }
-`;

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

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

@@ -1,89 +0,0 @@
-import React from 'react';
-import CostRow from './CostRow';
-import CostSection from './CostSection';
-import { FormattedMessage, FormattedNumber } from 'react-intl';
-import { PricesType } from './cost_types';
-
-interface Props {
-  prices: PricesType;
-}
-
-function Totals({ prices }: Props): JSX.Element {
-  return (
-    <>
-      <CostSection>
-        <tr>
-          <th
-            style={{
-              textAlign: 'left',
-              testTransform: 'capitalize'
-            }}
-          >
-            <FormattedMessage id="total" />
-          </th>
-          <th className="price" style={{ fontSize: 18 }}>
-            €{' '}
-            <FormattedNumber
-              value={prices.total_costs.sub_total}
-              minimumFractionDigits={2}
-              maximumFractionDigits={2}
-            />
-          </th>
-        </tr>
-      </CostSection>
-      <CostSection>
-        <Deposit
-          cost_array={prices.required_house_costs}
-          price_array={prices.total_costs.required_costs.on_site}
-        />
-        <Deposit
-          cost_array={prices.required_house_costs}
-          price_array={prices.total_costs.required_costs.not_on_site}
-        />
-        <Deposit
-          cost_array={prices.optional_house_costs}
-          price_array={prices.total_costs.optional_costs.on_site}
-        />
-        <Deposit
-          cost_array={prices.optional_house_costs}
-          price_array={prices.total_costs.optional_costs.not_on_site}
-        />
-      </CostSection>
-      <CostSection>
-        <tr>
-          <th
-            style={{
-              textAlign: 'left',
-              testTransform: 'capitalize'
-            }}
-          >
-            <FormattedMessage id="total" />
-          </th>
-          <td className="price">
-            €{' '}
-            <FormattedNumber
-              value={prices.total_costs.total_price}
-              minimumFractionDigits={2}
-              maximumFractionDigits={2}
-            />
-          </td>
-        </tr>
-      </CostSection>
-    </>
-  );
-}
-
-export default Totals;
-
-function Deposit({ cost_array, price_array }) {
-  return (
-    <>
-      {cost_array.map((cost) => {
-        let price = price_array.find((x) => x.id == cost.id);
-        if (cost.gl === '0120' && price?.amount > 0) {
-          return <CostRow key={cost.id} {...cost} amount={price.amount} />;
-        }
-      })}
-    </>
-  );
-}

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

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

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

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

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

@@ -1,47 +0,0 @@
-import { subYears, isAfter } from 'date-fns'
-import React from 'react'
-import { FormattedMessage } from 'react-intl';
-
-export function createPeronsArray(persons: number): number[] {
-  return Array.apply(null, { length: persons + 1 }).map(Number.call, Number);
-}
-
-export function initializeBookingFields(bookingFields: any[]) {
-  let obj = {};
-  bookingFields.map((field) => {
-    obj[field.id] = '';
-  });
-  return obj;
-}
-
-export function byString(o, s) {
-  s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
-  s = s.replace(/^\./, ''); // strip a leading dot
-  var a = s.split('.');
-  for (var i = 0, n = a.length; i < n; ++i) {
-    var k = a[i];
-    if (k in o) {
-      o = o[k];
-    } else {
-      return;
-    }
-  }
-  return o;
-}
-
-export function translatedOption(id:string, value: string):JSX.Element {
-  return (
-    <FormattedMessage id={id}>
-      {(formattedMessage) => <option value={value}>{formattedMessage}</option>}
-    </FormattedMessage>
-  );
-}
-
-export function validateAge(string) {
-  const dob = new Date(string)
-  const minAge = subYears(new Date(), 18)
-
-  if (isAfter(dob, minAge)) {
-    return true;
-  } else return false;
-}