bukazu-portal-react 2.1.21 → 3.0.3

package/jest.config.js

@@ -0,0 +1,195 @@
+/*
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+module.exports = {
+  // All imported modules in your tests should be mocked automatically
+  // automock: false,
+
+  // Stop running tests after `n` failures
+  // bail: 0,
+
+  // The directory where Jest should store its cached dependency information
+  // cacheDirectory: "/tmp/jest_rs",
+
+  // Automatically clear mock calls, instances, contexts and results before every test
+  clearMocks: true,
+
+  // Indicates whether the coverage information should be collected while executing the test
+  collectCoverage: true,
+
+  // An array of glob patterns indicating a set of files for which coverage information should be collected
+  // collectCoverageFrom: undefined,
+
+  // The directory where Jest should output its coverage files
+  coverageDirectory: "coverage",
+
+  // An array of regexp pattern strings used to skip coverage collection
+  // coveragePathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],
+
+  // Indicates which provider should be used to instrument code for coverage
+  coverageProvider: "v8",
+
+  // A list of reporter names that Jest uses when writing coverage reports
+  // coverageReporters: [
+  //   "json",
+  //   "text",
+  //   "lcov",
+  //   "clover"
+  // ],
+
+  // An object that configures minimum threshold enforcement for coverage results
+  // coverageThreshold: undefined,
+
+  // A path to a custom dependency extractor
+  // dependencyExtractor: undefined,
+
+  // Make calling deprecated APIs throw helpful error messages
+  // errorOnDeprecated: false,
+
+  // The default configuration for fake timers
+  // fakeTimers: {
+  //   "enableGlobally": false
+  // },
+
+  // Force coverage collection from ignored files using an array of glob patterns
+  // forceCoverageMatch: [],
+
+  // A path to a module which exports an async function that is triggered once before all test suites
+  // globalSetup: undefined,
+
+  // A path to a module which exports an async function that is triggered once after all test suites
+  // globalTeardown: undefined,
+
+  // A set of global variables that need to be available in all test environments
+  // globals: {},
+
+  // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
+  // maxWorkers: "50%",
+
+  // An array of directory names to be searched recursively up from the requiring module's location
+  // moduleDirectories: [
+  //   "node_modules"
+  // ],
+
+  // An array of file extensions your modules use
+  // moduleFileExtensions: [
+  //   "js",
+  //   "mjs",
+  //   "cjs",
+  //   "jsx",
+  //   "ts",
+  //   "tsx",
+  //   "json",
+  //   "node"
+  // ],
+
+  // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+  // moduleNameMapper: {},
+
+  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+  // modulePathIgnorePatterns: [],
+
+  // Activates notifications for test results
+  // notify: false,
+
+  // An enum that specifies notification mode. Requires { notify: true }
+  // notifyMode: "failure-change",
+
+  // A preset that is used as a base for Jest's configuration
+  // preset: undefined,
+
+  // Run tests from one or more projects
+  // projects: undefined,
+
+  // Use this configuration option to add custom reporters to Jest
+  // reporters: undefined,
+
+  // Automatically reset mock state before every test
+  // resetMocks: false,
+
+  // Reset the module registry before running each individual test
+  // resetModules: false,
+
+  // A path to a custom resolver
+  // resolver: undefined,
+
+  // Automatically restore mock state and implementation before every test
+  // restoreMocks: false,
+
+  // The root directory that Jest should scan for tests and modules within
+  // rootDir: undefined,
+
+  // A list of paths to directories that Jest should use to search for files in
+  roots: [
+    "src"
+  ],
+
+  // Allows you to use a custom runner instead of Jest's default test runner
+  // runner: "jest-runner",
+
+  // The paths to modules that run some code to configure or set up the testing environment before each test
+  // setupFiles: [],
+
+  // A list of paths to modules that run some code to configure or set up the testing framework before each test
+  // setupFilesAfterEnv: [],
+
+  // The number of seconds after which a test is considered as slow and reported as such in the results.
+  // slowTestThreshold: 5,
+
+  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+  // snapshotSerializers: [],
+
+  // The test environment that will be used for testing
+  // testEnvironment: "jest-environment-node",
+
+  // Options that will be passed to the testEnvironment
+  // testEnvironmentOptions: {},
+
+  // Adds a location field to test results
+  // testLocationInResults: false,
+
+  // The glob patterns Jest uses to detect test files
+  // testMatch: [
+  //   "**/__tests__/**/*.[jt]s?(x)",
+  //   "**/?(*.)+(spec|test).[tj]s?(x)"
+  // ],
+
+  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+  // testPathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],
+
+  // The regexp pattern or array of patterns that Jest uses to detect test files
+  // testRegex: [],
+
+  // This option allows the use of a custom results processor
+  // testResultsProcessor: undefined,
+
+  // This option allows use of a custom test runner
+  // testRunner: "jest-circus/runner",
+
+  // A map from regular expressions to paths to transformers
+  // transform: undefined,
+
+  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+  // transformIgnorePatterns: [
+  //   "/node_modules/",
+  //   "\\.pnp\\.[^\\/]+$"
+  // ],
+
+  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+  // unmockedModulePathPatterns: undefined,
+
+  // Indicates whether each individual test should be reported during the run
+  // verbose: undefined,
+
+  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+  // watchPathIgnorePatterns: [],
+
+  // Whether to use watchman for file crawling
+  // watchman: true,
+};

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "bukazu-portal-react",
-  "version": "2.1.21",
+  "version": "3.0.3",
   "description": "A package for loading the calendar and search module from bukazu loading into a react app.",
-  "main": "build/index.js",
   "repository": "https://github.com/BUKAZU/React-portal",
   "scripts": {
-    "start": "webpack serve --open --config webpack.config.dev",
-    "test": "cypress open",
-    "build": "rollup -c",
-    "watch": "rollup -c -w"
+    "test": "jest",
+    "test-cypress": "cypress open",
+    "build": "vite build",
+    "dev": "vite"
   },
   "author": "Bob van Oorschot",
   "license": "MIT",
@@ -21,17 +20,15 @@
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
-    "@cypress/react": "^5.3.3",
-    "@cypress/webpack-dev-server": "^1.1.3",
-    "@rollup/plugin-commonjs": "^21.0.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "autoprefixer": "^10.2.5",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^8.2.2",
-    "babel-runtime": "^6.26.0",
+    "@babel/preset-typescript": "^7.18.6",
+    "@jest/globals": "^29.4.1",
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.0.1",
+    "autoprefixer": "^10.4.13",
     "chalk": "1.1.3",
-    "css-loader": "0.28.7",
-    "cypress": "^7.1.0",
+    "cypress": "^12.4.1",
     "dotenv": "4.0.0",
     "dotenv-expand": "4.2.0",
     "eslint": "^7.28.0",
@@ -39,40 +36,38 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "fs-extra": "3.0.1",
-    "jest": "24.5.0",
-    "mini-css-extract-plugin": "^1.5.0",
-    "npm-run-all": "^4.1.5",
-    "postcss": "^8.2.12",
-    "postcss-import": "^14.0.1",
-    "postcss-loader": "^5.2.0",
-    "postcss-modules": "^4.2.2",
-    "postcss-nested": "^5.0.5",
-    "postcss-preset-env": "^7.4.3",
+    "jest": "^29.4.1",
+    "path": "^0.12.7",
+    "path-browserify": "^1.0.0",
+    "postcss-import": "^15.1.0",
+    "postcss-nested": "^6.0.0",
+    "postcss-preset-env": "^8.0.1",
     "prettier": "^2.3.1",
+    "process": "^0.11.10",
     "react": "^16.4.1",
-    "react-dev-utils": "^5.0.1",
     "react-dom": "^16.14.0",
     "resolve": "1.6.0",
-    "rollup": "^2.56.2",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-postcss": "^4.0.1",
-    "rollup-plugin-replace": "^2.2.0",
-    "webpack": "^5",
-    "webpack-cli": "^4.6.0",
-    "webpack-dev-server": "^3.0.0",
+    "ts-jest": "^29.0.5",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4",
     "whatwg-fetch": "2.0.3"
   },
   "dependencies": {
-    "@apollo/client": "^3.4.15",
-    "array-includes": "^3.0.3",
-    "array-sort": "^1.0.0",
-    "date-fns": "^1.29.0",
+    "@apollo/client": "^3.7.5",
+    "date-fns": "^2.29.3",
     "formik": "^2.2.9",
     "graphql": "^15.6.0",
     "react-date-picker": "^8.1.1",
-    "react-intl": "5",
-    "react-js-pagination": "^3.0.2"
+    "react-intl": "^6.2.5",
+    "react-paginate": "^8.1.4"
+  },
+  "main": "./build/portal.umd.js",
+  "module": "./build/portal.es.js",
+  "exports": {
+    ".": {
+      "import": "./build/portal.es.js",
+      "require": "./build/portal.umd.js"
+    }
   },
   "eslintConfig": {
     "extends": [

package/reviews.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Bukazu Portal</title>
+  </head>
+  <body>
+    <h1>Bukazu Test Reviews</h1>
+
+    <!-- <div class="bukazu-app" id="bukazu-app" portal-code="050497a0" object-code="DE0002" language='nl' filters='123'></div> -->
+    <!-- <div class="bukazu-app" id="bukazu-app" portal-code="72902823" object-code="NL1443" language='nl' filters='123'></div>     -->
+    <div id='bukazu-app' class='bukazu-app' portal-code="674de20e" object-code="NL0099" language="nl" page="reviews"></div>
+
+    <script src="./dev.tsx" type="module"></script>
+  </body>
+</html>

package/src/_lib/{SearchQueries.js → SearchQueries.ts}

@@ -1,4 +1,4 @@
-import { gql}  from "@apollo/client";
+import { gql } from '@apollo/client';
 
 export const HOUSES_QUERY = gql`
   query PortalSiteHousesQuery(
@@ -18,6 +18,7 @@ export const HOUSES_QUERY = gql`
     $skip: Int
   ) {
     PortalSite(id: $id) {
+      id
       houses(
         country_id: $country_id
         region_id: $region_id
@@ -45,6 +46,8 @@ export const HOUSES_QUERY = gql`
         city
         country_name
         minimum_week_price
+        rating
+        scoreAmount
       }
     }
   }
@@ -97,6 +100,8 @@ export const HOUSES_PRICE_QUERY = gql`
         city
         country_name
         minimum_week_price
+        rating
+        score_amount
         booking_price(starts_at: $starts_at, ends_at: $ends_at)
       }
     }
@@ -104,7 +109,7 @@ export const HOUSES_PRICE_QUERY = gql`
 `;
 
 export const HOUSE_COUNT_QUERY = gql`
-  query PortalSiteHousesQuery(
+  query PortalSiteHouseCountQuery(
     $id: ID!
     $country_id: ID
     $region_id: String
@@ -119,6 +124,7 @@ export const HOUSE_COUNT_QUERY = gql`
     $weekprice_max: Int
   ) {
     PortalSite(id: $id) {
+      id
       houses(
         country_id: $country_id
         region_id: $region_id

package/src/_lib/date_helper.ts

@@ -0,0 +1,27 @@
+
+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.js → queries.ts}

@@ -88,13 +88,13 @@ export const CALENDAR_QUERY = gql`
 `;
 
 export const BOOKING_PRICE_QUERY = gql`
-  query BookingPriceQuery(
-    $id: ID!
-    $house_id: String!
+  query BookingFormQuery(
+    $portalCode: ID!
+    $objectCode: String!
     $starts_at: Date!
     $ends_at: Date!
   ) {
-    PortalSite(id: $id) {
+    PortalSite(id: $portalCode) {
       id
       options
       first_name_label
@@ -122,7 +122,7 @@ export const BOOKING_PRICE_QUERY = gql`
         options
         placeholder
       }
-      houses(house_code: $house_id) {
+      houses(house_code: $objectCode) {
         id
         name
         code
@@ -219,3 +219,22 @@ export const CREATE_BOOKING_MUTATION = gql`
     }
   }
 `;
+
+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

@@ -0,0 +1,132 @@
+import React, { useContext, useEffect, useState } 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';
+
+const getWidth = () =>
+  window.innerWidth ||
+  document.documentElement.clientWidth ||
+  document.body.clientWidth;
+
+interface Props {
+  pageType?: string;
+  filters?: FiltersType;
+  locale: string;
+}
+
+function App({ pageType, locale, filters }: Props): JSX.Element {
+  const { portalCode, objectCode } = useContext(AppContext);
+
+  let [width, setWidth] = useState(getWidth());
+
+  // in this case useEffect will execute only once because
+  // it does not have any dependencies.
+  useEffect(() => {
+    const resizeListener = () => {
+      // change width from the state object
+      setWidth(getWidth());
+    };
+    // set resize listener
+    window.addEventListener('resize', resizeListener);
+
+    // clean up function
+    return () => {
+      // remove resize listener
+      window.removeEventListener('resize', resizeListener);
+    };
+  }, []);
+
+  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 <div className={width < 875 ? 'bu-smaller' : ''}>{page}</div>;
+}
+
+App.defaultProps = {
+  filters: {}
+};
+
+export default App;

package/src/components/AppContext.ts

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

@@ -0,0 +1,42 @@
+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';
+
+
+function BookingForm(): JSX.Element {
+  const { portalCode, objectCode } = 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];
+
+  return (
+    <FormCreator
+      house={result}
+      PortalSite={data.PortalSite}     
+    />
+  );
+}
+
+export default BookingForm;