bukazu-portal-react 2.1.21 → 3.0.3

package/src/components/SearchPage/filters/Radio.tsx

@@ -0,0 +1,46 @@
+import React, { SyntheticEvent } from 'react';
+import { Field, FiltersType, OptionsType } from './filter_types';
+
+interface Props {
+  options: OptionsType[];
+  filters: FiltersType;
+  onChange: Function;
+  field: Field;
+}
+
+function Radio({ options, filters, onChange, field }: Props): JSX.Element {
+  const countries = filters.countries;
+
+  const handleChange = (event: SyntheticEvent<any>) => {
+    onChange(field.id, event.currentTarget.value);
+  };
+
+  return (
+    <ul className="radioList">
+      {options.map((opt) => (
+        <li
+          key={opt.id || opt}
+          className={`bu-list-item ${
+            countries && !countries.includes(opt.country_id)
+              ? 'bu-disabled'
+              : ''
+          }`}
+        >
+          <input
+            name={field.id}
+            type="radio"
+            id={opt.id || opt}
+            value={opt.id || opt}
+            disabled={countries ? !countries.includes(opt.country_id) : false}
+            // checked={value === opt.id || opt}
+            onBlur={handleChange}
+            onChange={handleChange}
+          />
+          <label htmlFor={opt.id || opt}>{opt.name || opt}</label>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default Radio;

package/src/components/SearchPage/filters/Select.tsx

@@ -0,0 +1,85 @@
+import React, { SyntheticEvent } from 'react';
+import { Field, FiltersType, OptionsType } from './filter_types';
+
+interface Props {
+  options: OptionsType[] | string[];
+  field: Field;
+  filters: FiltersType;
+  value: string;
+  onChange: Function;
+}
+
+function Select({
+  options,
+  field,
+  filters,
+  value,
+  onChange
+}: Props): JSX.Element {
+  const handleChange = (event: SyntheticEvent<any>) => {
+    onChange(field.id, event.currentTarget.value);
+  };
+  const countries = filters.countries;
+  const regions = Array.isArray(filters.regions)
+    ? filters.regions
+    : [filters.regions].filter((e) => String(e).trim());
+  if (options && ['countries', 'cities', 'regions'].includes(field.id)) {
+    return (
+      <select
+        name={field.id}
+        onBlur={handleChange}
+        onChange={handleChange}
+        value={value}
+      >
+        <option value="" />
+        {options.map((opt) => {
+          let hidden = false;
+          if (['cities', 'regions'].includes(field.id)) {
+            if (countries && !countries.includes(opt.country_id)) {
+              hidden = true;
+            }
+            if (field.id === 'cities') {
+              if (!regions.length === false && !regions.includes(opt.region)) {
+                hidden = true;
+              }
+            }
+          }
+
+          return (
+            <option
+              key={opt.id}
+              value={opt.id}
+              id={opt.region}
+              disabled={hidden}
+              hidden={hidden}
+            >
+              {opt.name}
+            </option>
+          );
+        })}
+      </select>
+    );
+  } else {
+    return (
+      <select
+        name={field.id}
+        onBlur={handleChange}
+        onChange={handleChange}
+        value={value}
+      >
+        <option value="" />
+        {options.map((opt) => {
+          let hidden = false;
+
+          return (
+            <option key={opt} value={opt} disabled={hidden} hidden={hidden}>
+              {opt}
+            </option>
+          );
+        })}
+      </select>
+    );
+  }
+}
+
+export default Select;

package/src/components/SearchPage/filters/__tests__/helper.spec.js

@@ -0,0 +1,15 @@
+import { createNumberArray, createPriceArray } from '../helper';
+
+describe('export numbered array', () => {
+  test('Small array', () => {
+    expect(createNumberArray(2)).toStrictEqual([0, 1, 2]);
+  });
+});
+
+describe('export price array', () => {
+  test('Small array', () => {        
+    expect(createPriceArray(400)).toStrictEqual([0, 100, 200, 300, 400]);
+  });
+
+  
+});

package/src/components/SearchPage/filters/filter_types.d.ts

@@ -0,0 +1,25 @@
+export type Field = {
+  id: string;
+  type: string
+};
+
+export type FiltersType = {
+  countries?: any;
+  regions?: any;
+  properties?: any[];
+  departure_date?: string;
+  arrival_date?: string;
+  cities?: string;
+  persons_min?: string;
+  persons_max?: string;
+  bedrooms_min?: string;
+  bathrooms_min?: string;
+  weekprice_max?: string;
+  extra_search?: string;
+};
+
+export type OptionsType = {
+  id: string;
+  name: string;
+  country_id: string
+};

package/src/components/SearchPage/filters/helper.ts

@@ -0,0 +1,19 @@
+export function createNumberArray(max_number: number): number[] {
+  return Array.from({ length: max_number + 1 }, (v, k) => k);
+}
+
+export function createPriceArray(max_price: number): number[] {
+  let rounded = Math.ceil(max_price / 100);
+  return Array.from({ length: rounded + 1 }, (v, k) => k * 100);
+}
+
+export const defaultFilter = [
+  {
+    label: 'Land',
+    id: 'countries',
+    type: 'select',
+    required: false,
+    mandatory: true,
+    options: ['select', 'list', 'radio', 'text']
+  }
+];

package/src/components/icons/ArrowLeft.svg.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const ArrowRight = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      version="1.1"
+      x="0px"
+      y="0px"
+      enableBackground="new 0 0 100 100"
+      viewBox="0 0 100 125"
+      xmlSpace="preserve"
+    >
+      <path d="M2.4,44.1l32.9-32.9c3.1-3.1,8.2-3.1,11.4,0c1.6,1.6,2.4,3.6,2.4,5.7c0,2.1-0.8,4.1-2.4,5.7L27.2,42h64.7  c2.2,0,4.2,0.9,5.7,2.4c1.5,1.5,2.4,3.5,2.4,5.7c0,4.4-3.6,8.1-8.1,8.1H27.4l19.3,19.3c1.6,1.6,2.4,3.6,2.4,5.7s-0.8,4.1-2.4,5.7  c-3.1,3.1-8.3,3.1-11.4,0L2.4,55.9C0.8,54.3,0,52.3,0,50.2c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2C0,47.7,0.8,45.7,2.4,44.1z" />
+    </svg>
+  );
+};
+
+export default ArrowRight;

package/src/components/icons/{loading.svg.js → loading.svg.tsx}

@@ -11,7 +11,7 @@ const Loading = () => (
     width="24px"
     height="30px"
     viewBox="0 0 24 30"
-    style={{ enableBackground: 'new 0 0 50 50' }}
+    enableBackground="new 0 0 50 50"
     xmlSpace="preserve"
   >
     <rect x="0" y="10" width="4" height="10" fill="#333" opacity="0.2">

package/src/custom.d.ts

@@ -0,0 +1,10 @@
+declare module '*.svg' {
+ import React = require('react');
+ export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+ const src: string;
+ export default src;
+}
+declare module '*.json' {
+ const content: object;
+ export default content;
+}

package/src/index.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import App from './components/App';
+import { IntlProvider } from 'react-intl';
+// import registerServiceWorker from './registerServiceWorker';
+
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
+
+import en from './locales/en.json';
+import nl from './locales/nl.json';
+import de from './locales/de.json';
+import fr from './locales/fr.json';
+import es from './locales/es.json';
+import it from './locales/it.json';
+
+import './styles/main.css';
+import { IntegrationError } from './components/Error';
+import { AppContext } from './components/AppContext';
+import { LocaleType } from './types';
+import { FiltersType } from './components/SearchPage/filters/filter_types';
+
+interface Props {
+  portalCode: string;
+  objectCode: string;
+  pageType?: string;
+  locale?: LocaleType;
+  filters?: FiltersType;
+  api_url?: string;
+}
+
+function Portal({
+  portalCode,
+  objectCode,
+  pageType,
+  locale,
+  filters,
+  api_url
+}: Props): JSX.Element {
+  const errors = IntegrationError({ portalCode, pageType, locale, filters });
+  if (errors) {
+    return errors;
+  }
+
+  if (!locale) {
+    locale = 'en';
+  }
+
+  const client = new ApolloClient({
+    uri: api_url,
+    cache: new InMemoryCache(),
+    headers: {
+      locale
+    },
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: 'cache-and-network'
+      }
+    }
+  });
+
+  const messages: MessagesType = { en, nl, de, fr, es, it };
+
+  window.__localeId__ = locale;
+
+  return (
+    <ApolloProvider client={client}>
+      <IntlProvider locale={locale} messages={messages[locale]}>
+        <AppContext.Provider value={{ portalCode, objectCode, locale }}>
+          <App pageType={pageType} locale={locale} filters={filters} />
+        </AppContext.Provider>
+      </IntlProvider>
+    </ApolloProvider>
+  );
+}
+
+Portal.defaultProps = {
+  pageType: null,
+  api_url: 'https://api.bukazu.com/graphql'
+};
+
+export default Portal;
+
+type MessagesType = {
+  en: JSONType;
+  nl: JSONType;
+  de: JSONType;
+  fr: JSONType;
+  es: JSONType;
+  it: JSONType;
+};
+
+type JSONType = {
+  [key: string]: string;
+};

package/src/locales/de.json

@@ -1,6 +1,6 @@
 {
-    "next": "pijltje",
-    "previous": "pijltje",
+    "next": "Nächste",
+    "previous": "Vorherige",
     "price": "Preis",
     "calculate": "Nächst",
     "book": "Buchen",
@@ -111,5 +111,6 @@
     "discount_code": "Rabatt-Code",
     "minimum_nights": "Mindestens {minimum} Nächte",
     "can_only_take_insurance_in_de_be_nl": "Sie können sich nur versichern, wenn Sie in den Niederlanden, Deutschland oder Belgien wohnen.",
-    "price_from": "Preis von"
+    "price_from": "Preis von",
+    "reviews": "Bewertungen"
   }

package/src/locales/en.json

@@ -1,6 +1,6 @@
 {
-    "next": "pijltje",
-    "previous": "pijltje",
+    "next": "Next",
+    "previous": "Previous",
     "price": "Price",
     "calculate": "Next",
     "book": "Book",
@@ -112,5 +112,6 @@
     "discount_code": "Discount code",
     "minimum_nights": "At least {minimum} nights",
     "can_only_take_insurance_in_de_be_nl": "You can only take out insurance if you live in the Netherlands, Germany or Belgium.",
-    "price_from": "Price from"
+    "price_from": "Price from",
+    "reviews": "Reviews"
   }

package/src/locales/es.json

@@ -1,6 +1,6 @@
 {
-    "next": "pijltje",
-    "previous": "pijltje",
+    "next": "Siguiente",
+    "previous": "Anterior",
     "price": "Precio",
     "calculate": "Próximo",
     "book": "Reservar",
@@ -107,5 +107,6 @@
     "no": "No",
     "minimum_nights": "Al menos {minimum} noches",
     "can_only_take_insurance_in_de_be_nl": "Solo puede contratar un seguro si vive en los Países Bajos, Alemania o Bélgica.",
-    "price_from": "Precio de"
+    "price_from": "Precio de",
+    "reviews": "Comentarios"
   }

package/src/locales/fr.json

@@ -1,6 +1,6 @@
 {
-    "next": "pijltje",
-    "previous": "pijltje",
+    "next": "Suivant",
+    "previous": "Précédent",
     "price": "Prix",
     "calculate": "Suivante",
     "book": "Réserver",
@@ -107,5 +107,6 @@
     "no": "Non",
     "minimum_nights": "Au moins {minimum} nuits",
     "can_only_take_insurance_in_de_be_nl": "Vous ne pouvez souscrire une assurance que si vous résidez aux Pays-Bas, en Allemagne ou en Belgique.",
-    "price_from": "Le prix de"
+    "price_from": "Le prix de",
+    "reviews": "Critiques"
   }

package/src/locales/it.json

@@ -1,6 +1,6 @@
 {
-  "next": "pijltje",
-  "previous": "pijltje",
+  "next": "Prossimo",
+  "previous": "Precedente",
   "price": "Prezzo",
   "calculate": "Prossimo",
   "book": "Prenotare",
@@ -107,5 +107,6 @@
   "no": "No",
   "minimum_nights": "Almeno {minimum} notti",
   "can_only_take_insurance_in_de_be_nl": "Puoi stipulare un'assicurazione solo se vivi nei Paesi Bassi, in Germania o in Belgio.",
-  "price_from": "Prezzo da"
+  "price_from": "Prezzo da",
+  "reviews": "Recensioni"
 }

package/src/locales/nl.json

@@ -1,6 +1,6 @@
 {
-    "next": "pijltje",
-    "previous": "pijltje",
+    "next": "Volgende",
+    "previous": "Vorige",
     "price": "Prijs",
     "calculate": "Volgende",
     "book": "Boeken",
@@ -112,5 +112,6 @@
     "discount_code": "Kortingscode",
     "minimum_nights": "Minstens {minimum} nachten",
     "can_only_take_insurance_in_de_be_nl": "U kunt alleen een verzekering afsluiten, wanneer u woont in Nederland, Duitsland of België.",
-    "price_from": "Prijs vanaf"
+    "price_from": "Prijs vanaf",
+    "reviews": "Reviews"
   }

package/src/styles/main.css

@@ -9,6 +9,7 @@
 @import "results.css";
 @import "filters.css";
 @import "pagination.css";
+@import "reviews.css";
 
 #bukazu-app {
   #search-page {
@@ -55,7 +56,7 @@
     background-size: 5px 5px, 5px 5px, 1px 1.5em;
     background-repeat: no-repeat;
   }
-  .info-button {    
+  .info-button {
     border: none;
     background: rgba(0, 0, 0, 0);
     cursor: pointer;

package/src/styles/modal.css

@@ -34,7 +34,7 @@
   width: 500px;
   min-height: 200px;
   max-height: 90%;
-  top: calc(50% -150px);
+  top: calc(50% - 150px);
   left: calc(50% - 250px);
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.25);
   z-index: 3;

package/src/styles/pagination.css

@@ -5,29 +5,31 @@
   list-style: none;
   border-radius: 0.25rem;
   li {
-    position: relative;
-    display: block;
-    padding: 0.5rem 0.75rem;
-    margin-left: -1px;
-    line-height: 1.25;
-    color: #007bff;
-    background-color: #fff;
-    border: 1px solid #dee2e6;
-    &:hover {
-      z-index: 2;
-      color: #0056b3;
-      text-decoration: none;
-      background-color: #e9ecef;
-      border-color: #dee2e6;
-    }
-    &:focus {
-      z-index: 2;
-      outline: 0;
-      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-    }
-    &:not(:disabled):not(.disabled) {
-      cursor: pointer;
+    a {
+      display: block;
+      padding: 0.5rem 0.75rem;
+      line-height: 1.25;
+      color: var(--bukazu-button);
+      background-color: #fff;
+      border: 1px solid #dee2e6;
+      &:hover {
+        z-index: 2;
+        color: #0056b3;
+        text-decoration: none;
+        background-color: #e9ecef;
+        border-color: #dee2e6;
+      }
+      &:focus {
+        z-index: 2;
+        outline: 0;
+        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+      }
+      &:not(:disabled):not(.disabled) {
+        cursor: pointer;
+      }
+
     }
+    /* margin-left: -1px; */
   }
 }
 
@@ -40,7 +42,7 @@
   border-top-right-radius: 0.25rem;
   border-bottom-right-radius: 0.25rem;
 }
-.bu-pagination li.active {
+.bu-pagination li.selected a {
   z-index: 1;
   color: #fff;
   background-color: var(--bukazu-button);

package/src/styles/result.css

@@ -34,14 +34,15 @@
         min-height: 100%;
       }
     }
-    
+
     .result {
+      position: relative;
       flex: 1 1 auto;
       display: flex;
       flex-direction: column;
       font-size: 14px;
       background: #fff;
-      text-decoration: none;      
+      text-decoration: none;
       &-title {
         padding: 8px;
         font-weight: bold;
@@ -59,6 +60,36 @@
         justify-content: space-evenly;
         border-bottom: 1px solid rgba(69, 74, 83, 0.2);
       }
+      &-rating {
+        position: absolute;
+        right: 4px;
+        top: 4px;
+        &-inner {
+          background: var(--bukazu-button);
+          position: relative;
+          color: #fff;
+          font-weight: bold;
+          padding: 6px 10px;
+          border-radius: 0.4em;
+          font-size: 14px;
+          line-height: 14px;
+          box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
+          &:after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border: 10px solid transparent;
+            border-top-color: var(--bukazu-button);
+            border-bottom: 0;
+            border-left: 0;
+            margin-left: -5px;
+            margin-bottom: -10px;
+          }
+        }
+      }
       &-price {
         display: flex;
         flex-direction: column;

package/src/styles/reviews.css

@@ -0,0 +1,76 @@
+.bu_single_review {
+  border-bottom: 1px solid #cecece;
+  padding: 16px;
+  margin: 0 0 16px;
+  & .bu_review_summary {
+    display: flex;
+    align-items: center;
+    &__date_name {
+      display: flex;
+      align-items: center;
+      color: #212121;
+    }
+    &__name {
+      font-weight: bold;
+    }
+  }
+  & .bu_review {
+    padding: 16px 0;
+    font-style: italic;
+    margin: 0;
+  }
+  & .bu_criteria {
+    columns: 2;
+    & .bu-smaller {
+      columns: 1
+    }
+  }
+
+}
+.bu_score {
+  display: flex;
+  align-items: center;
+  padding: 0 0 4px;
+  &__rating {
+    display: inline-block;
+    padding: 4px 8px;
+    border: 1px solid #cecece;
+    border-radius: 4px;
+    color: #fff;
+    font-weight: bold;
+    margin: 0 8px 0 0;
+    letter-spacing: 2px;
+  }
+  &__rating.low {
+    background-color: #006B3D;
+  }
+  &__rating.best {
+    background-color: #006B3D;
+  }
+  &__rating.medium {
+    background-color: #069c56;
+  }
+  &__rating.good {
+    background-color: #069c56;
+  }
+}
+.bu_reviews {
+  &__overview {
+  background: #fefefe;
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+    &__number {
+      font-size: 22px;
+      padding: 0 16px;
+    }
+  }
+}
+
+.bu-smaller {
+  & .bu_single_review {
+    & .bu_criteria {
+      columns: 1;
+    }
+  }
+}