@tfehotels/tfe-gatsby-library 1.0.0

package/src/browser/toast/index.tsx

@@ -0,0 +1,84 @@
+import React, { FC, ReactNode } from "react"
+import { toast, ToastPosition } from "react-hot-toast"
+import { keyframes } from "goober"
+
+
+const enterAnimation = (factor: number) => `
+0% {transform: translate3d(0,${factor * -200}%,0) scale(.6); opacity:.5;}
+100% {transform: translate3d(0,0,0) scale(1); opacity:1;}
+`
+
+const exitAnimation = (factor: number) => `
+0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}
+100% {transform: translate3d(0,${factor * -150}%,-1px) scale(.6); opacity:0;}
+`
+
+const fadeInAnimation = `0%{opacity:0;} 100%{opacity:1;}`
+const fadeOutAnimation = `0%{opacity:1;} 100%{opacity:0;}`
+
+const prefersReducedMotion = (() => {
+  // Cache result
+  let shouldReduceMotion: boolean | undefined = undefined
+
+  return () => {
+    if (shouldReduceMotion === undefined && typeof window !== "undefined") {
+      const mediaQuery = matchMedia("(prefers-reduced-motion: reduce)")
+      shouldReduceMotion = !mediaQuery || mediaQuery.matches
+    }
+    return shouldReduceMotion
+  }
+})()
+
+const getAnimationStyle = (
+  position: ToastPosition,
+  visible: boolean
+): React.CSSProperties => {
+  const top = position.includes("top")
+  const factor = top ? 1 : -1
+
+  const [enter, exit] = prefersReducedMotion()
+    ? [fadeInAnimation, fadeOutAnimation]
+    : [enterAnimation(factor), exitAnimation(factor)]
+
+  return {
+    animation: visible
+      ? `${keyframes(enter)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`
+      : `${keyframes(exit)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`,
+  }
+}
+
+export interface ToastProps {
+  id: string
+  visible: boolean
+  message: string | ReactNode
+  height?: number
+  position?: ToastPosition
+  variant: "error" | "info" | "success"
+}
+
+export const Toast: FC<ToastProps> = ({
+  id,
+  visible,
+  message,
+  height,
+  position,
+  variant,
+}) => {
+  const animationStyle: React.CSSProperties = height
+    ? getAnimationStyle(position || "top-center", visible)
+    : { opacity: 0 }
+
+  return (
+    <div
+      className={`toast ${visible ? "animate-enter" : "animate-leave"} ${variant}`}
+      style={{
+        ...animationStyle,
+      }}
+    >
+      <button className={"close"} onClick={() => toast.dismiss(id)}>X</button>
+      {message}
+    </div>
+  )
+}
+
+export default Toast

package/src/browser/use_viewport/index.tsx

@@ -0,0 +1,34 @@
+import { useState, useEffect, startTransition } from "react"
+import { ViewportType } from "./types"
+
+function UseViewport() {
+  const [viewport, setViewport] = useState<ViewportType>( {
+    isMobile: false,
+    isTablet: false,
+    isDesktop: true,
+  }
+)
+
+  useEffect(() => {
+    const handleResize = () => {
+      startTransition(() => setViewport(
+        {
+          isMobile: window.innerWidth < 769,
+          isTablet: window.innerWidth >= 769 && window.innerWidth < 1024,
+          isDesktop: window.innerWidth >= 1024,
+        }
+      ))
+    }
+
+    handleResize()
+
+    window.addEventListener("resize", handleResize)
+    return () => {
+      window.removeEventListener("resize", handleResize)
+    }
+  }, [])
+
+  return viewport
+}
+
+export default UseViewport

package/src/browser/use_viewport/types.ts

@@ -0,0 +1,5 @@
+export interface ViewportType {
+  isMobile: boolean;
+  isTablet: boolean;
+  isDesktop: boolean;
+}

package/src/browser/utils/animation.ts

@@ -0,0 +1,12 @@
+import { Stage } from "transition-hook";
+
+export const animateJSX = (
+  transition: {
+    stage: Stage;
+    shouldMount: boolean;
+  },
+  animation: string = "presence"
+): string =>
+  `jsx__${animation} jsx__${animation}__${
+    ["from", "leave"].includes(transition.stage) ? "loading" : "loaded"
+  }`;

package/src/browser/utils/booking_engine.ts

@@ -0,0 +1,180 @@
+import format from "date-fns/format";
+import { IsMobile } from "./viewport";
+import {
+  BookingURLsType,
+  HotelOptionsByCityType,
+  HotelPagesType,
+  SearchParamsType,
+} from "./types";
+
+function RenderTemplate(str: string, obj: any) {
+  let parts = str.split(/\$\{(?!\d)[\wæøåÆØÅ]*\}/);
+  let args = str.match(/[^{}]+(?=})/g) || [];
+  let parameters = args.map(
+    (argument) =>
+      obj[argument] || (obj[argument] === undefined ? "" : obj[argument])
+  );
+  return String.raw({ raw: parts }, ...parameters);
+}
+
+export const BookingUrl = (
+  hotel_code: string,
+  urls: BookingURLsType["booking_urls"],
+  searchParams: SearchParamsType,
+  hasAvailability: boolean,
+  rate_code: string | null = null,
+  room_code: string | null = null
+) => {
+  let params = RenderTemplate(urls.variables, {
+    hotel_code: hotel_code,
+    check_in: format(
+      searchParams.check_in,
+      urls.date_format.replace(/m/g, "M")
+    ),
+    check_out: format(
+      searchParams.check_out,
+      urls.date_format.replace(/m/g, "M")
+    ),
+    adult_count: searchParams.adult_count,
+    child_count: searchParams.child_count,
+    total_rooms: 1,
+    rate_code: !searchParams.promo_codes.length && rate_code ? rate_code : "",
+    promo_code: searchParams.promo_codes.length
+      ? searchParams.promo_codes[0]
+      : "",
+  });
+  if (room_code) {
+    params += "&room=" + room_code;
+  }
+
+  let url = IsMobile()
+    ? (hasAvailability ? urls.mobile_url : urls.mobile_url_no_availability) +
+      "&" +
+      params
+    : (hasAvailability ? urls.url : urls.url_no_availability) + "&" + params;
+
+  // console.log(searchParams)
+  // console.log(url)
+  window.open(url, "_blank");
+  // window.location.href = url
+};
+
+const ParseAvailability = (data: any) => {
+  if (!data.success) {
+    return {};
+  }
+  data.data.forEach((hotel: any) => {
+    hotel.room_rates = {};
+    hotel.rates.forEach((room: any) =>
+      room.forEach((room_rate: any) => {
+        if (!hotel.room_rates.hasOwnProperty(room_rate.room_type_code)) {
+          hotel.room_rates[room_rate.room_type_code] = [];
+        }
+        hotel.room_rates[room_rate.room_type_code].push(room_rate);
+      })
+    );
+  });
+  return data.data;
+};
+
+/**
+ *
+ * Returns Select options sorting by the cities with more hotels, otherwise alphabetically.
+ *
+ * For instance:
+ *
+ *  [
+ *    {
+ *      label: 'Sydney',
+ *      options: [
+ *        { label: 'Vibe Hotel Sydney', value: "58443" },
+ *        { label: 'Vibe Hotel Sydney Darling Harbour', value: "8565" }
+ *      ]
+ *    },
+ *    {
+ *     label: 'Mebourne',
+ *     options: [
+ *        { label: 'Vibe Hotel Melbourne', value: "9969" },
+ *      ]
+ *    },
+ *  ]
+ */
+export const hotelOptionsByCity = (
+  hotelPages: HotelPagesType
+): HotelOptionsByCityType[] => {
+  let hotelsByCity: { [k: string]: { label: string; value: string }[] } = {
+    Sydney: [],
+    Melbourne: [],
+    Perth: [],
+    Hobart: [],
+    Canberra: [],
+    Adelaide: [],
+    "Gold Coast": [],
+    Darwin: [],
+    Singapore: [],
+  };
+  const propertyOrder = Object.entries(hotelPages).reduce(
+    (acc, [id, hotel]) => {
+      if (hotelsByCity[hotel.city]) {
+        hotelsByCity[hotel.city].push({ label: hotel.name, value: id });
+        acc[id] = hotel.sort;
+      }
+      return acc;
+    },
+    {} as { [k: string]: number }
+  );
+  return Object.entries(hotelsByCity).map(([city, options]) => {
+    return {
+      label: city,
+      options: options.sort(
+        (a, b) => propertyOrder[a.value] - propertyOrder[b.value]
+      ),
+    };
+  });
+};
+
+export const SearchAvailability = async (
+  check_in: Date,
+  check_out: Date,
+  adult_count: number,
+  child_count: number,
+  promo_codes: string[],
+  rate_codes: string[],
+  hotel_codes: string[]
+) => {
+  if (!hotel_codes) {
+    throw new Error(
+      '"hotel_codes" must be defined within the page attributes!'
+    );
+  }
+  return fetch(
+    `${process.env.SABRE_PROTOCOL}://${process.env.SABRE_HOST}/availability`,
+    {
+      headers: { "Content-Type": "application/json" },
+      method: "POST",
+      body: JSON.stringify({
+        check_in: format(check_in, "yyyy-MM-dd"),
+        check_out: format(check_out, "yyyy-MM-dd"),
+        hotel_codes: hotel_codes,
+        adult_count: adult_count,
+        child_count: child_count,
+        area_codes: [],
+        promo_codes: promo_codes,
+        rate_codes: rate_codes,
+        price_range: { min: 0, max: 0 },
+        is_mobile: IsMobile(),
+        language: "en",
+      }),
+    }
+  )
+    .then((response) => response.json())
+    .then(
+      (data) => ParseAvailability(data),
+      (error) => {
+        console.log(error);
+      }
+    );
+};
+
+export const pricePerNight = (total: string, nights: number): string =>
+  (parseFloat(total) / nights).toFixed(2);

package/src/browser/utils/eclub.ts

@@ -0,0 +1,30 @@
+import { UserType } from "../api/types";
+
+export const saveUserSession = (data: any) => {
+  sessionStorage.setItem(
+    "user",
+    JSON.stringify({
+      loyaltyprofileId: data.loyaltyprofileId,
+      profile_id: data.profile_id,
+      title: data.title,
+      first_name: data.first_name,
+      last_name: data.last_name,
+      email: data.email,
+      zip: data.zip,
+      country_code: data.country_code,
+      MobilePhoneCountryCode: data.MobilePhoneCountryCode,
+      mobile: data.mobile,
+      date_of_birth: data.date_of_birth,
+      language: data.language,
+    } as UserType)
+  );
+};
+
+export const loadUserSession = (): UserType | null => {
+  const user = sessionStorage.getItem("user");
+  return user ? JSON.parse(user) : null;
+};
+
+export const deleteUserSession = () => {
+  sessionStorage.removeItem("user");
+};

package/src/browser/utils/forms.ts

@@ -0,0 +1,76 @@
+export interface RequestParamsType {
+  [param: string]: string | number | null;
+}
+export interface HeadersType {
+  [param: string]: string;
+}
+
+export interface APIResponseType {
+  success?: boolean;
+  errors?: { [input: string]: string[] };
+  error?: string;
+  msg?: string;
+  status: number;
+  [k: string]: any;
+}
+export const json_request = async (
+  url: string,
+  params: RequestParamsType,
+  method: "get" | "post" = "post",
+  headers: HeadersType = {}
+): Promise<APIResponseType> => {
+  if (url.includes(process.env.API_HOST as string)) {
+    headers["project-id"] = process.env.PROJECT as string;
+  }
+  let config: any = {
+    headers: {
+      "Content-Type": "application/json",
+      ...headers,
+    },
+    method: method.toUpperCase(),
+  };
+  if (method === "post") {
+    config.body = JSON.stringify(params);
+  } else {
+    url = `${url}?${new URLSearchParams(
+      Object.entries(params).map(([k, v]) => [k, v === null ? "" : `${v}`])
+    )}`;
+  }
+  try {
+    let response = await fetch(url, config);
+    return { ...(await response.json()), status: response.status };
+  } catch (error) {
+    console.error(error);
+    return { success: false, error: "Request failed", status: 400 };
+  }
+};
+
+const INPUT_EVENT_VALUES: any = {
+  select: (e: any) => e.value,
+  input: (e: any) => e.target.value,
+  textarea: (e: any) => e.target.value,
+  "google-places": (e: any) => e.target.value,
+};
+
+export const getInputEventValue = (inputType: string, event: any) =>
+  INPUT_EVENT_VALUES.hasOwnProperty(inputType)
+    ? INPUT_EVENT_VALUES[inputType](event)
+    : event;
+
+const INPUT_HUMAN_VALUES: any = {};
+
+export const getInputHumanValue = (inputType: string, value: any) =>
+  INPUT_HUMAN_VALUES.hasOwnProperty(inputType)
+    ? INPUT_HUMAN_VALUES[inputType](value)
+    : value;
+
+export const INPUT_FIELDS = new Set([
+  "input",
+  "select",
+  "textarea",
+  "checkbox",
+  "button",
+  "recaptcha2",
+  "google-places",
+  "country-prefix",
+]);

package/src/browser/utils/hotel.ts

@@ -0,0 +1,25 @@
+export const joinAddress = (addressParams: (string | null)[]) =>
+  addressParams
+    .reduce((acc: string[], param: string | null) => {
+      if (param) {
+        acc.push(param)
+      }
+      return acc
+    }, [])
+    .join(", ")
+
+export interface PageTagsType {
+  [k: string]: string
+}
+
+export const tagExists = (
+  pageTags: PageTagsType,
+  ...tags: string[]
+): boolean => {
+  for (const tag of Object.keys(pageTags)) {
+    if (tags.includes(tag)) {
+      return true
+    }
+  }
+  return false
+}

package/src/browser/utils/image.ts

@@ -0,0 +1,63 @@
+import { ImageMediaType, ImageType } from "../api/types";
+import { IsMobile } from "./viewport";
+
+export const preloadImages = async (images: string[]) => {
+  images.forEach((url: string) => {
+    if (url) {
+      const img = new Image();
+      img.src = url;
+    }
+  });
+};
+
+export const optimizedThumb = (img: ImageType): string =>
+  img.optimized ? `${img.url}${img.name}-20w.webp` : img.url;
+
+// Extract the Thumb image from the provided Image (if any)
+export const getThumb = (img: {
+  image?: ImageType;
+  mobile_image?: ImageType;
+}): string => {
+  if (img.image || img.mobile_image) {
+    return IsMobile()
+      ? img.mobile_image
+        ? optimizedThumb(img.mobile_image) // @ts-ignore
+        : optimizedThumb(img.image)
+      : img.image
+        ? optimizedThumb(img.image) // @ts-ignore
+        : optimizedThumb(img.mobile_image);
+  }
+  return "";
+};
+
+// Creates a valid image element
+export const toImageElement = (obj: any, keyMap: any = {}): ImageMediaType => {
+  return Object.entries(obj).reduce(
+    (acc: any, [key, value]: any) => {
+      acc[keyMap[key] || key] = value;
+      return acc;
+    },
+    {
+      type: "image",
+      title: "",
+      loading: "eager",
+      image: undefined,
+      mobile_image: undefined,
+      mobile_file: undefined,
+    }
+  );
+};
+
+// Slick breaks when his number or slides is equal or less than the param "slidesToShow"
+// Therefore we duplicate the slides in case of not having enough of them:
+export const minimumSlides = (slidesToShow: number, slides: any[]) =>
+  slides.length >= slidesToShow
+    ? slides
+    : [].concat(
+        ...new Array(Math.ceil(slidesToShow / slides.length)).fill(slides)
+      );
+
+export const tripadvisorRatingURL = (score: string) =>
+  `https://www.tripadvisor.com/img/cdsi/img2/ratings/traveler/${parseFloat(
+    score
+  ).toFixed(1)}-41022-5.svg`;