bukazu-portal-react 3.3.3 → 3.3.4

package/src/_lib/countries.ts

@@ -1,15 +0,0 @@
-import nl from './countries/nl.json'
-import en from './countries/en.json'
-import de from './countries/de.json'
-import fr from './countries/fr.json'
-import es from './countries/es.json'
-import it from './countries/it.json'
-
-export const Countries = {
-  en,
-  nl,
-  de,
-  fr,
-  es,
-  it
-};

package/src/_lib/date_helper.ts

@@ -1,27 +0,0 @@
-
-import { format, parse } from 'date-fns';
-import { es, nl, de, fr, it, enGB } from 'date-fns/locale';
-
-const locales: any = {
-    en: enGB,
-    nl,
-    de,
-    fr,
-    it,
-    es,
-};
-
-function FormatIntl(date: number, formatStr: string) : String {    
-    return format(date, formatStr, {
-        locale: locales[window.__localeId__], // or global.__localeId__
-    });
-};
-
-function Parse_EN_US(date_string: string) {
-    return parse(date_string, 'yyyy-MM-dd', new Date());
-}
-
-const MONTH_FORMAT:string = 'MMMM yyyy';
-const LONG_DATE_FORMAT:string = 'EEEE dd MMMM yyyy'
-
-export { FormatIntl, Parse_EN_US, MONTH_FORMAT, LONG_DATE_FORMAT };

package/src/_lib/queries.ts

@@ -1,244 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const PORTAL_QUERY = gql`
-  query PortalSiteQuery($id: ID!) {
-    PortalSite(id: $id) {
-      id
-      portal_code
-      options
-      countries {
-        id
-        name
-      }
-      regions {
-        id
-        name
-        country_id
-      }
-      cities {
-        id
-        name
-        region
-        country_id
-      }
-      extra_search
-      max_bathrooms
-      max_bedrooms
-      max_nights
-      max_persons
-      max_weekprice
-      country_placeholder
-      categories
-      countries_label
-      country_placeholder
-      regions_label
-      cities_label
-      arrival_date_label
-      departure_date_label
-      max_weekprice_label
-      persons_min_label
-      persons_max_label
-      bedrooms_min_label
-      bathrooms_min_label
-      weekprice_max_label
-      no_nights_label
-      extra_search_label
-      properties_label
-    }
-  }
-`;
-
-export const CALENDAR_QUERY = gql`
-  query PortalSiteHousesQuery(
-    $id: ID!
-    $house_id: String!
-    $starts_at: Date!
-    $ends_at: Date!
-  ) {
-    PortalSite(id: $id) {
-      id
-      houses(house_code: $house_id) {
-        id
-        name
-        last_minute_days
-        availabilities(starts_at: $starts_at, ends_at: $ends_at) {
-          arrival
-          arrival_time_from
-          arrival_time_to
-          date
-          departure
-          departure_time
-          max_nights
-          min_nights
-          special_offer
-        }
-      }
-    }
-    Discounts(
-      house_code: $house_id
-      discount_starts_at: $ends_at
-      discount_ends_at: $starts_at
-      active_today: true
-    ) {
-      name
-      discount_starts_at
-      discount_ends_at
-    }
-  }
-`;
-
-export const BOOKING_PRICE_QUERY = gql`
-  query BookingFormQuery(
-    $portalCode: ID!
-    $objectCode: String!
-    $starts_at: Date!
-    $ends_at: Date!
-  ) {
-    PortalSite(id: $portalCode) {
-      id
-      options
-      first_name_label
-      preposition_label
-      last_name_label
-      email_label
-      zipcode_label
-      city_label
-      address_label
-      house_number_label
-      phone_label
-      phone_mobile_label
-      country_label
-      iban_label
-      holder_label
-      bic_label
-      comment_label
-      company_name_label
-      extra_fields_drivers_license_label
-      extra_fields_destination_label
-      form_submit_text
-      form_submit_button_text
-      booking_fields {
-        id
-        label
-        field_type
-        options
-        placeholder
-      }
-      houses(house_code: $objectCode) {
-        id
-        name
-        code
-        allow_option
-        persons
-        image_url
-        discounts
-        discounts_info
-        house_type
-        rental_terms
-        cancel_insurance
-        damage_insurance
-        damage_insurance_required
-        travel_insurance
-        babies_extra
-        booking_price(starts_at: $starts_at, ends_at: $ends_at)
-      }
-    }
-  }
-`;
-
-export const CREATE_BOOKING_MUTATION = gql`
-  mutation CreateBooking(
-    $first_name: String!
-    $preposition: String
-    $last_name: String!
-    $company_name: String
-    $is_option: Boolean!
-    $address: String
-    $house_number: String
-    $zipcode: String
-    $city: String
-    $phone: String
-    $phone_mobile: String
-    $iban: String
-    $bic: String
-    $holder: String
-    $email: String!
-    $house_code: String!
-    $portal_code: String
-    $language: String
-    $country: String!
-    $adults: Int!
-    $children: Int
-    $babies: Int
-    $discount: Int
-    $damage_insurance: Int
-    $cancel_insurance: Int
-    $travel_insurance: Int
-    $discount_reason: String
-    $discount_code: String
-    $comment: String
-    $arrival_date: String!
-    $departure_date: String!
-    $costs: Json
-    $extra_fields: String
-    $sessionIdentifier: String
-  ) {
-    createBooking(
-      first_name: $first_name
-      preposition: $preposition
-      company_name: $company_name
-      last_name: $last_name
-      is_option: $is_option
-      address: $address
-      house_number: $house_number
-      zipcode: $zipcode
-      city: $city
-      phone: $phone
-      phone_mobile: $phone_mobile
-      iban: $iban
-      bic: $bic
-      holder: $holder
-      email: $email
-      house_code: $house_code
-      portal_code: $portal_code
-      language: $language
-      country: $country
-      adults: $adults
-      children: $children
-      babies: $babies
-      discount: $discount
-      discount_code: $discount_code
-      damage_insurance: $damage_insurance
-      cancel_insurance: $cancel_insurance
-      travel_insurance: $travel_insurance
-      discount_reason: $discount_reason
-      arrival_date: $arrival_date
-      departure_date: $departure_date
-      comment: $comment
-      costs: $costs
-      extra_fields: $extra_fields
-      sessionIdentifier: $sessionIdentifier
-    ) {
-      booking_nr
-    }
-  }
-`;
-
-export const SINGLE_HOUSE_QUERY = gql`
-  query PortalSiteSingleHouseQuery($portalCode: ID!, $objectCode: String!) {
-    PortalSite(id: $portalCode) {
-      id
-      houses(house_code: $objectCode) {
-        id
-        code
-        name
-        max_nights
-        last_minute_days
-        discounts
-        discounts_info
-        house_type
-        persons
-      }
-    }
-  }
-`;

package/src/components/App.tsx

@@ -1,108 +0,0 @@
-import React, { useContext } from 'react';
-import Loading from './icons/loading.svg';
-
-import 'react-date-picker/dist/DatePicker.css';
-import 'react-calendar/dist/Calendar.css';
-
-import { PORTAL_QUERY } from '../_lib/queries';
-
-import SearchPage from './SearchPage/SearchPage';
-import CalendarPage from './CalendarPage/CalendarPage';
-import ReviewsPage from './ReviewsPage/ReviewsPage';
-import SafeBooking from './SafeBooking';
-import { ApiError } from './Error';
-import ErrorBoundary from './ErrorBoundary';
-import { useQuery } from '@apollo/client';
-import { AppContext } from './AppContext';
-import { FiltersType } from './SearchPage/filters/filter_types';
-
-interface Props {
-  pageType?: string;
-  filters?: FiltersType;
-  locale: string;
-}
-
-function App({ pageType, locale, filters }: Props): JSX.Element {
-  const { portalCode, objectCode } = useContext(AppContext);
-
-  const { loading, error, data } = useQuery(PORTAL_QUERY, {
-    variables: { id: portalCode }
-  });
-
-  if (loading) {
-    return <Loading />;
-  }
-
-  if (error) {
-    return <ApiError errors={{ ...error }} />;
-  }
-
-  const PortalSite = data.PortalSite;
-  let options = data.PortalSite.options;
-
-  let root = document.documentElement;
-
-  root.style.setProperty(
-    '--bukazu-discount',
-    `${options.colors ? options.colors.discount : 'orange'}`
-  );
-  root.style.setProperty(
-    '--bukazu-cell',
-    `${options.colors ? options.colors.cell : '#fff'}`
-  );
-  root.style.setProperty(
-    '--bukazu-arrival',
-    `${options.colors ? options.colors.arrival : '#6eeb83'}`
-  );
-  root.style.setProperty(
-    '--bukazu-booked',
-    `${options.colors ? options.colors.booked : '#ea2b1f'}`
-  );
-  root.style.setProperty(
-    '--bukazu-departure',
-    `${options.colors ? options.colors.departure : 'yellow'}`
-  );
-
-  root.style.setProperty(
-    '--bukazu-button',
-    `${options.colors ? options.colors.button : 'rgba(23, 190, 187, 0.75)'}`
-  );
-  root.style.setProperty(
-    '--bukazu-button_cta',
-    `${options.colors ? options.colors.buttonCta : '#e28413'}`
-  );
-  root.style.setProperty(
-    '--bukazu-background_month',
-    `${options.colors ? options.colors.month_background : '#e28413'}`
-  );
-
-  let page;
-
-  if (objectCode && objectCode !== null && pageType !== 'reviews') {
-    page = (
-      <ErrorBoundary>
-        <CalendarPage PortalSite={PortalSite} />
-        <SafeBooking />
-      </ErrorBoundary>
-    );
-  } else if (objectCode && objectCode !== null && pageType === 'reviews') {
-    page = <ReviewsPage />;
-  } else {
-    page = (
-      <SearchPage
-        PortalSite={PortalSite}
-        locale={locale}
-        options={options}
-        filters={filters}
-      />
-    );
-  }
-
-  return <>{page}</>;
-}
-
-App.defaultProps = {
-  filters: {}
-};
-
-export default App;

package/src/components/AppContext.ts

@@ -1,14 +0,0 @@
-import { createContext } from 'react';
-import { LocaleType } from '../types';
-
-export const AppContext = createContext<AppContextType>({
-  locale: 'nl',
-  portalCode: '',
-  objectCode: ''
-});
-
-type AppContextType = {
-  locale: LocaleType;
-  portalCode: string;
-  objectCode: string;
-};

package/src/components/CalendarPage/BookingForm.tsx

@@ -1,49 +0,0 @@
-import React, { useContext } from 'react';
-import Loading from '../icons/loading.svg';
-import FormCreator from './FormCreator';
-import { BOOKING_PRICE_QUERY } from '../../_lib/queries';
-import { useQuery } from '@apollo/client';
-import { AppContext } from '../AppContext';
-import { CalendarContext } from './CalendarParts/CalendarContext';
-import { TrackEvent } from '../../_lib/Tracking';
-
-function BookingForm(): JSX.Element {
-  const { portalCode, objectCode, locale } = useContext(AppContext);
-  const { arrivalDate, departureDate } = useContext(CalendarContext);
-
-  const { data, loading, error } = useQuery(BOOKING_PRICE_QUERY, {
-    variables: {
-      portalCode,
-      objectCode,
-      starts_at: arrivalDate.date,
-      ends_at: departureDate.date
-    }
-  });
-
-  if (loading)
-    return (
-      <div>
-        <Loading />
-      </div>
-    );
-  if (error) {
-    return <div>Error</div>;
-  }
-
-  const result = data.PortalSite.houses[0];
-
-  TrackEvent({
-    house_code: objectCode,
-    portal_code: portalCode,
-    locale: locale,
-    interaction_type: 'booking_started',
-    interaction_data: {
-      arrival_date: arrivalDate.date,
-      departure_date: departureDate.date
-    }
-  });
-
-  return <FormCreator house={result} PortalSite={data.PortalSite} />;
-}
-
-export default BookingForm;

package/src/components/CalendarPage/Calendar.tsx

@@ -1,49 +0,0 @@
-import React, { useState } from 'react';
-import CalendarHeader from './CalendarParts/CalendarHeader';
-import AssistanceMessage from './formParts/AssistanceMessage';
-import Legend from './CalendarParts/Legend';
-import Months from './CalendarParts/Months';
-import StartBooking from './CalendarParts/StartBooking';
-import { HouseType } from '../../types';
-
-interface Props {
-  numberOfMonths: number;
-  numberOfMonthsInARow: number;
-  house: HouseType;
-}
-
-function Calendar({
-  numberOfMonths,
-  house,
-  numberOfMonthsInARow
-}: Props): JSX.Element {
-  const [currentMonth, setCurrentMonth] = useState(new Date());
-
-  return (
-    <div className="calendar-container ">
-      <StartBooking house={house} />
-      <div className="calendar-section">
-        <CalendarHeader
-          changeMonth={setCurrentMonth}
-          currentMonth={currentMonth}
-          numberOfMonths={numberOfMonths}
-        />
-        <Months
-          house={house}
-          numberOfMonths={numberOfMonths}
-          numberOfMonthsInARow={numberOfMonthsInARow}
-          currentMonth={currentMonth}
-        />
-        <Legend house={house} />
-        <AssistanceMessage house={house} />
-      </div>
-    </div>
-  );
-}
-
-Calendar.defaultProps = {
-  numberOfMonths: 4,
-  numberOfMonthsInARow: 2
-};
-
-export default Calendar;

package/src/components/CalendarPage/CalendarPage.tsx

@@ -1,43 +0,0 @@
-import React, { useContext } from 'react';
-import BookingForm from './BookingForm';
-import GenerateCalendar from './CalendarParts/GenerateCalendar';
-import { PortalSiteType } from '../../types';
-import {
-  CalendarContext,
-  CalendarProvider
-} from './CalendarParts/CalendarContext';
-
-interface Props {
-  PortalSite: PortalSiteType;
-}
-
-function CalendarPage({ PortalSite }: Props): JSX.Element {
-  const { bookingStarted } = useContext(CalendarContext);
-
-  if (bookingStarted) {
-    return <BookingForm />;
-  } else {
-    return <GenerateCalendar PortalSite={PortalSite} />;
-  }
-}
-
-CalendarPage.DefaultProps = {
-  PortalSite: {
-    options: {
-      bookingForm: {
-        numberOfMonths: 4,
-        numberOfMonthsInARow: 2
-      }
-    }
-  }
-};
-
-function CalendarWrapper({ PortalSite }: Props): JSX.Element {
-  return (
-    <CalendarProvider>
-      <CalendarPage PortalSite={PortalSite} />
-    </CalendarProvider>
-  );
-}
-
-export default CalendarWrapper;

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

@@ -1,89 +0,0 @@
-import { differenceInCalendarDays, isAfter } from 'date-fns';
-import React, { createContext, useReducer } from 'react';
-import { BuDate, HouseType } from '../../../types';
-import { Parse_EN_US } from '../../../_lib/date_helper';
-import { BookingType } from '../calender_types';
-
-const initialBooking: BookingType = {
-  selectedDate: null,
-  arrivalDate: null,
-  departureDate: null,
-  bookingStarted: false,
-  persons: 0
-};
-
-export const CalendarContext = createContext<BookingType>(initialBooking);
-export const CalendarContextDispatch = createContext<Function>(calendarReducer);
-
-export function CalendarProvider({
-  children
-}: {
-  children: React.ReactNode;
-}): React.ReactNode {
-  const [booking_state, dispatch] = useReducer(calendarReducer, initialBooking);
-  return (
-    <CalendarContext.Provider value={booking_state}>
-      <CalendarContextDispatch.Provider value={dispatch}>
-        {children}
-      </CalendarContextDispatch.Provider>
-    </CalendarContext.Provider>
-  );
-}
-
-function calendarReducer(
-  bookingState: BookingType,
-  action: { type: string; house: HouseType; day: BuDate; persons: number }
-): BookingType {
-  switch (action.type) {
-    case 'clicked': {
-      const { day, house } = action;
-      const { selectedDate, arrivalDate } = bookingState;
-      const date = Parse_EN_US(day.date);
-      const defaultMaxPersons = house.persons > 2 ? 2 : house.persons;
-
-      if (
-        day.departure &&
-        selectedDate &&
-        arrivalDate &&
-        isAfter(date, selectedDate) &&
-        differenceInCalendarDays(date, selectedDate) <= house.max_nights &&
-        differenceInCalendarDays(date, selectedDate) >=
-          arrivalDate.min_nights &&
-        differenceInCalendarDays(date, selectedDate) <= arrivalDate.max_nights
-      ) {
-        return {
-          ...bookingState,
-          departureDate: day
-        };
-      } else if (day.arrival) {
-        return {
-          bookingStarted: false,
-          selectedDate: date,
-          arrivalDate: day,
-          departureDate: null,
-          persons: defaultMaxPersons
-        };
-      }
-      return bookingState;
-    }
-    case 'reset': {
-      return initialBooking;
-    }
-    case 'start': {
-      return {
-        ...bookingState,
-        bookingStarted: true,
-        persons: action.persons
-      };
-    }
-    case 'return': {
-      return {
-        ...bookingState,
-        bookingStarted: false
-      };
-    }
-    default: {
-      throw Error('Unknown action: ' + action.type);
-    }
-  }
-}