bukazu-portal-react 3.3.3 → 3.3.4

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

@@ -1,80 +0,0 @@
-import React from 'react';
-import { Field, FiltersType, OptionsType } from './filter_types';
-
-interface Props {
-  field: Field;
-  options: OptionsType[];
-  filters: FiltersType;
-  value: string;
-  onChange: Function;
-}
-
-export default function List({
-  filters,
-  field,
-  options,
-  onChange,
-  value
-}: Props): JSX.Element {
-  const countries = filters.countries;
-
-  const updateList = (e: { target: { value: string } }) => {
-    if (value === e.target.value) {
-      handleChange(null);
-    } else {
-      handleChange(e.target.value);
-    }
-  };
-
-  const handleChange = ( value: string ) => {
-    onChange(field.id, value)
-  }
-
-  if (['cities', 'regions'].includes(field.id)) {
-    return (
-      <ul className="radioList">
-        {options.map((opt) => (
-          <li
-            key={opt.id}
-            className={`bu-list-item ${
-              countries && !countries.includes(opt.country_id)
-                ? 'bu-disabled'
-                : 'bu-open'
-            }`}
-          >
-            <input
-              name={field.id}
-              type="checkbox"
-              id={opt.id}
-              value={opt.id}
-              disabled={countries ? !countries.includes(opt.country_id) : false}
-              checked={value === opt.id}
-              onBlur={handleChange}
-              onChange={handleChange}
-            />
-            <label htmlFor={opt.id}>{opt.name}</label>
-          </li>
-        ))}
-      </ul>
-    );
-  } else {
-    return (
-      <ul className="radioList">
-        {options.map((opt) => (
-          <li key={opt.id} className={`bu-list-item bu-open`}>
-            <input
-              name={field.id}
-              type="checkbox"
-              id={opt.id}
-              value={opt.id}
-              checked={value === opt.id}
-              onBlur={handleChange}
-              onChange={updateList}
-            />
-            <label htmlFor={opt.id}>{opt.name}</label>
-          </li>
-        ))}
-      </ul>
-    );
-  }
-}

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

@@ -1,37 +0,0 @@
-import React, { SyntheticEvent } from 'react';
-import { PortalSiteType } from '../../../types';
-import { Field } from './filter_types';
-
-interface Props {
-  PortalSite: PortalSiteType;
-  field: Field;
-  value: string;
-  onChange: Function;
-}
-
-function NumberFilter({
-  PortalSite,
-  field,
-  value,
-  onChange
-}: Props): JSX.Element {
-  const handleChange = (event: SyntheticEvent<any>) => {
-    onChange(field.id, event.currentTarget.value);
-  };
-
-  return (
-    <input
-      value={value}
-      type="number"
-      min="0"
-      max={
-        field.id === 'persons_min'
-          ? PortalSite.max_persons
-          : PortalSite[field.id]
-      }
-      onBlur={handleChange}
-    />
-  );
-}
-
-export default NumberFilter

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

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

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

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

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

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

@@ -1,20 +0,0 @@
-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/ArrowRight.svg.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-const ArrowRight = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    data-name="Layer 1"
-    viewBox="0 0 100 100"
-    x="0px"
-    y="0px"
-  >
-    <title>Forward</title>
-    <path d="M97.64,44.1,64.72,11.18a8.06,8.06,0,1,0-11.4,11.39L72.78,42H8.06a8.06,8.06,0,0,0,0,16.12H72.6L53.32,77.43a8.06,8.06,0,0,0,11.4,11.39L97.64,55.9A8,8,0,0,0,100,50.2a1.27,1.27,0,0,0,0-.2,1.41,1.41,0,0,0,0-.2A8.07,8.07,0,0,0,97.64,44.1Z" />
-  </svg>
-);
-
-export default ArrowRight;

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

@@ -1,23 +0,0 @@
-import React from 'react';
-
-const Reload = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    version="1.1"
-    x="0px"
-    y="0px"
-    viewBox="0 0 100 100"
-    enableBackground="new 0 0 100 100"
-    xmlSpace="preserve"
-    height="16px"
-  >
-    <path
-      fill="#000000"
-      stroke="2"
-      d="M77,53.752c0,0.012,0,0.022,0,0.034c0,14.92-12.019,27.058-26.938,27.058  c-14.92,0-26.948-12.138-26.948-27.058C23.114,38.961,35,26.889,50,26.738v4.942c0,2.84,2.54,2.913,3.947,1.647l10.354-7.714  c0,0,1.128-0.942,1.128-1.979c0-1.089-1.147-1.979-1.147-1.979L53.95,13.941C52.543,12.675,50,12.749,50,15.588v5.149  c-18,0.151-32.826,14.915-32.826,33.048c0,18.229,14.686,33.058,32.914,33.058C68.314,86.844,83,72.015,83,53.786  c0-0.012,0-0.022,0-0.034c0,0,0-3.375-3.037-3.375C77.109,50.376,77,53.752,77,53.752z"
-    />
-  </svg>
-);
-
-export default Reload;

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

@@ -1,24 +0,0 @@
-import React from 'react';
-
-const Icon = ({ height = '16px', width = '16px' }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    version="1.1"
-    x="0px"
-    y="0px"
-    viewBox="0 0 100 100"
-    enableBackground="new 0 0 100 100"
-    xmlSpace="preserve"
-    style={{
-      height,
-      width,
-    }}
-  >
-    <path d="M50,5c24.813,0,45,20.187,45,45c0,24.813-20.187,45-45,45C25.187,95,5,74.813,5,50C5,25.187,25.187,5,50,5   M50,0C22.386,0,0,22.386,0,50c0,27.614,22.386,50,50,50c27.614,0,50-22.386,50-50C100,22.386,77.614,0,50,0L50,0z" />
-    <circle cx="50" cy="29.546" r="4.934" />
-    <rect x="46.5" y="41.21" width="7" height="34.179" />
-  </svg>
-);
-
-export default Icon;

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

@@ -1,98 +0,0 @@
-import React from 'react';
-
-const Loading = () => (
-  <svg
-    version="1.1"
-    id="Layer_1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    x="0px"
-    y="0px"
-    width="24px"
-    height="30px"
-    viewBox="0 0 24 30"
-    enableBackground="new 0 0 50 50"
-    xmlSpace="preserve"
-  >
-    <rect x="0" y="10" width="4" height="10" fill="#333" opacity="0.2">
-      <animate
-        attributeName="opacity"
-        attributeType="XML"
-        values="0.2; 1; .2"
-        begin="0s"
-        dur="0.6s"
-        repeatCount="indefinite"
-      />
-      <animate
-        attributeName="height"
-        attributeType="XML"
-        values="10; 20; 10"
-        begin="0s"
-        dur="0.6s"
-        repeatCount="indefinite"
-      />
-      <animate
-        attributeName="y"
-        attributeType="XML"
-        values="10; 5; 10"
-        begin="0s"
-        dur="0.6s"
-        repeatCount="indefinite"
-      />
-    </rect>
-    <rect x="8" y="10" width="4" height="10" fill="#333" opacity="0.2">
-      <animate
-        attributeName="opacity"
-        attributeType="XML"
-        values="0.2; 1; .2"
-        begin="0.15s"
-        dur="0.6s"
-        repeatCount="indefinite"
-      />
-      <animate
-        attributeName="height"
-        attributeType="XML"
-        values="10; 20; 10"
-        begin="0.15s"
-        dur="0.6s"
-        repeatCount="indefinite"
-      />
-      <animate
-        attributeName="y"
-        attributeType="XML"
-        values="10; 5; 10"
-        begin="0.15s"
-        dur="0.6s"
-        repeatCount="indefinite"
-      />
-    </rect>
-    <rect x="16" y="10" width="4" height="10" fill="#333" opacity="0.2">
-      <animate
-        attributeName="opacity"
-        attributeType="XML"
-        values="0.2; 1; .2"
-        begin="0.3s"
-        dur="0.6s"
-        repeatCount="indefinite"
-      />
-      <animate
-        attributeName="height"
-        attributeType="XML"
-        values="10; 20; 10"
-        begin="0.3s"
-        dur="0.6s"
-        repeatCount="indefinite"
-      />
-      <animate
-        attributeName="y"
-        attributeType="XML"
-        values="10; 5; 10"
-        begin="0.3s"
-        dur="0.6s"
-        repeatCount="indefinite"
-      />
-    </rect>
-  </svg>
-);
-
-export default Loading;

package/src/custom.d.ts

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

@@ -1,104 +0,0 @@
-import React, { useEffect, useRef, useState } 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 [width, setWidth] = useState(0);
-  const ref = useRef();
-
-  useEffect(() => {
-    if (ref.current) {
-      setWidth(ref.current.getBoundingClientRect().width);
-    }
-  }, [ref.current]);
-
-  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 }}>
-          <div ref={ref} className={width < 875 ? 'bu-smaller' : 'bu-large'}>
-            <App pageType={pageType} locale={locale} filters={filters}  />
-          </div>
-        </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;
-};