@qite/tide-booking-component 1.4.93 → 1.4.94

package/src/shared/utils/query-string-util.ts

@@ -1,91 +1,91 @@
-import JsonURL from '@jsonurl/jsonurl';
-import { isArray, isNil } from 'lodash';
-import { FlightInfo, Room } from '../../booking-wizard/types';
-
-export const getDateFromParams = (params: URLSearchParams, name: string): string | null => {
-  const dateString = params.get(name);
-  if (dateString === null) {
-    return null;
-  }
-
-  const year = parseInt(dateString.slice(0, 5));
-  const month = parseInt(dateString.slice(5, 7));
-  const date = parseInt(dateString.slice(8, 10));
-
-  return new Date(Date.UTC(year, month - 1, date)).toISOString();
-};
-
-export const getDateAsDateFromParams = (params: URLSearchParams, name: string): Date | null => {
-  const dateString = params.get(name);
-
-  if (dateString === null) {
-    return null;
-  }
-
-  const year = parseInt(dateString.slice(0, 5));
-  const month = parseInt(dateString.slice(5, 7));
-  const date = parseInt(dateString.slice(8, 10));
-
-  return new Date(Date.UTC(year, month - 1, date));
-};
-
-export const getNumberFromParams = (params: URLSearchParams, name: string): number | null => {
-  const numberString = params.get(name);
-  if (numberString === null) {
-    return null;
-  }
-
-  return parseInt(numberString);
-};
-
-export const getRoomsFromParams = (params: URLSearchParams, name: string): Room[] | null => {
-  const roomString = params.get(name);
-  if (roomString === null) {
-    return null;
-  }
-
-  // Encode the accommodation code in the room string because (external) acco codes can contain special characters like '='. eg: 'ACNYNEgUzMDc4NBoKMTAzODcwMjk4NQ=='
-  const safeRoomsString = roomString.replace(/accommodationCode:([^,]*)/, (match, code) => {
-    return `accommodationCode:${encodeURIComponent(code)}`;
-  });
-
-  const rooms = JsonURL.parse(safeRoomsString) as Room[] | undefined;
-  if (isNil(rooms)) {
-    return null;
-  }
-
-  return rooms.map((room) => {
-    if (!isArray(room.childAges)) {
-      room.childAges = [];
-    }
-
-    room.children = room.childAges.length ?? 0;
-    return room;
-  });
-};
-
-export const getFlightsFromParams = (params: URLSearchParams, name: string): FlightInfo | null => {
-  let flightString = params.get(name);
-  if (flightString === null) {
-    return null;
-  }
-
-  flightString = flightString.replace(/ /g, '%20');
-
-  const flightInfo = JsonURL.parse(flightString, { AQF: true }) as FlightInfo | undefined;
-
-  if (isNil(flightInfo)) {
-    return null;
-  }
-
-  return flightInfo;
-};
-
-export const getStringFromParams = (params: URLSearchParams, name: string): string | null => {
-  return params.get(name);
-};
-
-export const getNumbersFromParams = (params: URLSearchParams, name: string): number[] => {
-  const numberStrings = params.getAll(name);
-  return numberStrings.map((x) => parseInt(x));
-};
+import JsonURL from '@jsonurl/jsonurl';
+import { isArray, isNil } from 'lodash';
+import { FlightInfo, Room } from '../../booking-wizard/types';
+
+export const getDateFromParams = (params: URLSearchParams, name: string): string | null => {
+  const dateString = params.get(name);
+  if (dateString === null) {
+    return null;
+  }
+
+  const year = parseInt(dateString.slice(0, 5));
+  const month = parseInt(dateString.slice(5, 7));
+  const date = parseInt(dateString.slice(8, 10));
+
+  return new Date(Date.UTC(year, month - 1, date)).toISOString();
+};
+
+export const getDateAsDateFromParams = (params: URLSearchParams, name: string): Date | null => {
+  const dateString = params.get(name);
+
+  if (dateString === null) {
+    return null;
+  }
+
+  const year = parseInt(dateString.slice(0, 5));
+  const month = parseInt(dateString.slice(5, 7));
+  const date = parseInt(dateString.slice(8, 10));
+
+  return new Date(Date.UTC(year, month - 1, date));
+};
+
+export const getNumberFromParams = (params: URLSearchParams, name: string): number | null => {
+  const numberString = params.get(name);
+  if (numberString === null) {
+    return null;
+  }
+
+  return parseInt(numberString);
+};
+
+export const getRoomsFromParams = (params: URLSearchParams, name: string): Room[] | null => {
+  const roomString = params.get(name);
+  if (roomString === null) {
+    return null;
+  }
+
+  // Encode the accommodation code in the room string because (external) acco codes can contain special characters like '='. eg: 'ACNYNEgUzMDc4NBoKMTAzODcwMjk4NQ=='
+  const safeRoomsString = roomString.replace(/accommodationCode:([^,]*)/, (match, code) => {
+    return `accommodationCode:${encodeURIComponent(code)}`;
+  });
+
+  const rooms = JsonURL.parse(safeRoomsString) as Room[] | undefined;
+  if (isNil(rooms)) {
+    return null;
+  }
+
+  return rooms.map((room) => {
+    if (!isArray(room.childAges)) {
+      room.childAges = [];
+    }
+
+    room.children = room.childAges.length ?? 0;
+    return room;
+  });
+};
+
+export const getFlightsFromParams = (params: URLSearchParams, name: string): FlightInfo | null => {
+  let flightString = params.get(name);
+  if (flightString === null) {
+    return null;
+  }
+
+  flightString = flightString.replace(/ /g, '%20');
+
+  const flightInfo = JsonURL.parse(flightString, { AQF: true }) as FlightInfo | undefined;
+
+  if (isNil(flightInfo)) {
+    return null;
+  }
+
+  return flightInfo;
+};
+
+export const getStringFromParams = (params: URLSearchParams, name: string): string | null => {
+  return params.get(name);
+};
+
+export const getNumbersFromParams = (params: URLSearchParams, name: string): number[] => {
+  const numberStrings = params.getAll(name);
+  return numberStrings.map((x) => parseInt(x));
+};

package/src/shared/utils/tide-api-utils.ts

@@ -1,34 +1,34 @@
-import { TideClientConfig } from '@qite/tide-client';
-import { isNil } from 'lodash';
-import { ApiSettingsState } from '../types';
-
-export function buildTideClientConfig(settings?: ApiSettingsState): TideClientConfig {
-  const HOST = settings?.apiUrl || process.env.REACT_APP_BOOKING_HOST;
-  const API_KEY = settings?.apiKey || process.env.REACT_APP_BOOKING_API_KEY;
-  const token = selectAgentToken();
-
-  if (isNil(HOST)) {
-    throw Error(`Environment variable "HOST" was not set.`);
-  }
-
-  if (isNil(API_KEY)) {
-    throw Error(`Environment variable "API_KEY" was not set.`);
-  }
-
-  return {
-    host: HOST,
-    apiKey: API_KEY,
-    token: token
-  };
-}
-
-export const selectAgentToken = (): string | undefined => {
-  let token: string | null = null;
-  if (typeof sessionStorage !== 'undefined') {
-    token = sessionStorage.getItem('token');
-  }
-  if (token === null && typeof localStorage !== 'undefined') {
-    token = localStorage.getItem('token');
-  }
-  return token ?? undefined;
-};
+import { TideClientConfig } from '@qite/tide-client';
+import { isNil } from 'lodash';
+import { ApiSettingsState } from '../types';
+
+export function buildTideClientConfig(settings?: ApiSettingsState): TideClientConfig {
+  const HOST = settings?.apiUrl || process.env.REACT_APP_BOOKING_HOST;
+  const API_KEY = settings?.apiKey || process.env.REACT_APP_BOOKING_API_KEY;
+  const token = selectAgentToken();
+
+  if (isNil(HOST)) {
+    throw Error(`Environment variable "HOST" was not set.`);
+  }
+
+  if (isNil(API_KEY)) {
+    throw Error(`Environment variable "API_KEY" was not set.`);
+  }
+
+  return {
+    host: HOST,
+    apiKey: API_KEY,
+    token: token
+  };
+}
+
+export const selectAgentToken = (): string | undefined => {
+  let token: string | null = null;
+  if (typeof sessionStorage !== 'undefined') {
+    token = sessionStorage.getItem('token');
+  }
+  if (token === null && typeof localStorage !== 'undefined') {
+    token = localStorage.getItem('token');
+  }
+  return token ?? undefined;
+};

package/src/shared/utils/use-media-query-util.ts

@@ -1,19 +1,19 @@
-import { useEffect, useState } from 'react';
-
-const useMediaQuery = (query: string): boolean => {
-  const [matches, setMatches] = useState(false);
-
-  useEffect(() => {
-    const media = window.matchMedia(query);
-    const handler = () => setMatches(media.matches);
-
-    handler();
-    media.addEventListener('change', handler);
-
-    return () => media.removeEventListener('change', handler);
-  }, [query]);
-
-  return matches;
-};
-
-export default useMediaQuery;
+import { useEffect, useState } from 'react';
+
+const useMediaQuery = (query: string): boolean => {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    const handler = () => setMatches(media.matches);
+
+    handler();
+    media.addEventListener('change', handler);
+
+    return () => media.removeEventListener('change', handler);
+  }, [query]);
+
+  return matches;
+};
+
+export default useMediaQuery;

package/styles/abstracts/_mixins.scss

@@ -1,74 +1,74 @@
-@use '../abstracts/variables' as variables;
-// MEDIA QUERIES
-@mixin media-xs {
-  @media only screen and (max-width: variables.$screen-xs) {
-    @content;
-  }
-}
-
-@mixin media-sm {
-  @media only screen and (max-width: variables.$screen-sm) {
-    @content;
-  }
-}
-
-@mixin media-md {
-  @media only screen and (max-width: variables.$screen-md) {
-    @content;
-  }
-}
-
-@mixin media-lg {
-  @media only screen and (max-width: variables.$screen-lg) {
-    @content;
-  }
-}
-
-@mixin media-xgl {
-  @media only screen and (max-width: variables.$screen-xgl) {
-    @content;
-  }
-}
-
-@mixin media-xl {
-  @media only screen and (max-width: variables.$screen-xl) {
-    @content;
-  }
-}
-
-@mixin media-xxl {
-  @media only screen and (max-width: variables.$screen-xxl) {
-    @content;
-  }
-}
-
-@mixin media-xxxl {
-  @media only screen and (max-width: variables.$screen-xxl) {
-    @content;
-  }
-}
-
-@mixin make-container($padding-x: $container-padding-x) {
-  width: 100%;
-  max-width: 1496px;
-  margin-right: auto;
-  margin-left: auto;
-
-  @include media-xl {
-    padding: 0 $padding-x;
-  }
-}
-
-@mixin container() {
-  width: 100%;
-  padding: 0 15px;
-  margin: 0 auto;
-
-  @include media-sm {
-    padding: 0 30px;
-  }
-
-  @include media-lg {
-    padding: 0 45px;
-  }
-}
+@use '../abstracts/variables' as variables;
+// MEDIA QUERIES
+@mixin media-xs {
+  @media only screen and (max-width: variables.$screen-xs) {
+    @content;
+  }
+}
+
+@mixin media-sm {
+  @media only screen and (max-width: variables.$screen-sm) {
+    @content;
+  }
+}
+
+@mixin media-md {
+  @media only screen and (max-width: variables.$screen-md) {
+    @content;
+  }
+}
+
+@mixin media-lg {
+  @media only screen and (max-width: variables.$screen-lg) {
+    @content;
+  }
+}
+
+@mixin media-xgl {
+  @media only screen and (max-width: variables.$screen-xgl) {
+    @content;
+  }
+}
+
+@mixin media-xl {
+  @media only screen and (max-width: variables.$screen-xl) {
+    @content;
+  }
+}
+
+@mixin media-xxl {
+  @media only screen and (max-width: variables.$screen-xxl) {
+    @content;
+  }
+}
+
+@mixin media-xxxl {
+  @media only screen and (max-width: variables.$screen-xxl) {
+    @content;
+  }
+}
+
+@mixin make-container($padding-x: $container-padding-x) {
+  width: 100%;
+  max-width: 1496px;
+  margin-right: auto;
+  margin-left: auto;
+
+  @include media-xl {
+    padding: 0 $padding-x;
+  }
+}
+
+@mixin container() {
+  width: 100%;
+  padding: 0 15px;
+  margin: 0 auto;
+
+  @include media-sm {
+    padding: 0 30px;
+  }
+
+  @include media-lg {
+    padding: 0 45px;
+  }
+}

package/styles/abstracts/_variables.scss

@@ -1,57 +1,57 @@
-// COLORS
-$primary-color: #25575c;
-$primary-color--light: #32686d;
-$secondary-color: #57abb2;
-$secondary-color--light: #abd5d9;
-$secondary-color--extralight: #e3f1f2;
-
-$bg-light: #f4f9fa;
-$text-color: #707070;
-$text-color-black: #202124;
-
-$white: #ffffff;
-$gray: #c6c6c6;
-$black: #000000;
-$transparent: transparent;
-
-// BUTTON COLORS XD
-$purple-color--light: #dfcce8;
-$purple-color--dark: #794e8c;
-
-$yellow-color--light: #fff9de;
-$yellow-color--dark: #b7990c;
-
-$pink-color: #d81259;
-
-$blue-color: #0e3e8d;
-
-$yellow-color: #ffde40;
-
-// MEDIA QUERIES
-$screen-xs: 576px;
-$screen-sm: 768px;
-$screen-md: 992px;
-$screen-lg: 1200px;
-$screen-xl: 1440px;
-$screen-xxl: 1700px;
-$screen-xxxl: 1920px;
-
-// Typography
-$font-family-base: 'Public Sans', Arial, sans-serif;
-$font-family-heading: 'Alfa Slab One', Arial, sans-serif;
-$font-size-base: 16px;
-$font-size-h1: 3.0625rem;
-$font-size-h2: 2.5625rem;
-$font-size-h3: 2.125rem;
-$font-size-h4: 1.75rem;
-$font-size-h5: 1.4375rem;
-$font-size-h6: 1.1875rem;
-$font-size-body: 1rem;
-$font-size-body--small: 0.875rem;
-$font-size-label: 0.75rem;
-
-$line-height-base: 1.5;
-$line-height-heading: 1.2;
-
-$font-weight-normal: 400;
-$font-weight-bold: 700;
+// COLORS
+$primary-color: #25575c;
+$primary-color--light: #32686d;
+$secondary-color: #57abb2;
+$secondary-color--light: #abd5d9;
+$secondary-color--extralight: #e3f1f2;
+
+$bg-light: #f4f9fa;
+$text-color: #707070;
+$text-color-black: #202124;
+
+$white: #ffffff;
+$gray: #c6c6c6;
+$black: #000000;
+$transparent: transparent;
+
+// BUTTON COLORS XD
+$purple-color--light: #dfcce8;
+$purple-color--dark: #794e8c;
+
+$yellow-color--light: #fff9de;
+$yellow-color--dark: #b7990c;
+
+$pink-color: #d81259;
+
+$blue-color: #0e3e8d;
+
+$yellow-color: #ffde40;
+
+// MEDIA QUERIES
+$screen-xs: 576px;
+$screen-sm: 768px;
+$screen-md: 992px;
+$screen-lg: 1200px;
+$screen-xl: 1440px;
+$screen-xxl: 1700px;
+$screen-xxxl: 1920px;
+
+// Typography
+$font-family-base: 'Public Sans', Arial, sans-serif;
+$font-family-heading: 'Alfa Slab One', Arial, sans-serif;
+$font-size-base: 16px;
+$font-size-h1: 3.0625rem;
+$font-size-h2: 2.5625rem;
+$font-size-h3: 2.125rem;
+$font-size-h4: 1.75rem;
+$font-size-h5: 1.4375rem;
+$font-size-h6: 1.1875rem;
+$font-size-body: 1rem;
+$font-size-body--small: 0.875rem;
+$font-size-label: 0.75rem;
+
+$line-height-base: 1.5;
+$line-height-heading: 1.2;
+
+$font-weight-normal: 400;
+$font-weight-bold: 700;

package/styles/base/_fonts.scss

@@ -1,2 +1,2 @@
-// @import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
-// @import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+// @import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+// @import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');