@tfehotels/tfe-gatsby-library 1.0.0

package/src/node/api/index.ts

@@ -0,0 +1,174 @@
+import { join_paths } from "../url";
+import { ImageType, PageTagsType, QueryParamsType } from "./types";
+const { getImage, withArtDirection } = module.require("gatsby-plugin-image");
+
+export const tagExists = (
+  pageTags: PageTagsType,
+  ...tags: string[]
+): boolean => {
+  for (const tag of Object.keys(pageTags)) {
+    if (tags.includes(tag)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+export const api_link = (
+  apiPath: string = "",
+  queryParams: QueryParamsType | null = null
+): string =>
+  `${join_paths(
+    `${process.env.API_PROTOCOL}://${process.env.API_HOST}`,
+    apiPath
+  )}${queryParams ? `?${new URLSearchParams(queryParams).toString()}` : ""}`;
+
+export const buildImage = (img: ImageType) => {
+  if (!img) {
+    return undefined;
+  }
+
+  let fallback = {
+    src: img.url,
+    sizes: "100vw",
+    srcSet: "",
+  };
+  let sources = [];
+  let placeholder = { fallback: img.url };
+  const sizes = [img.width, 360, 769, 1024, 1216, 1408].sort((a, b) => a - b);
+
+  if (img.optimized) {
+    fallback.src = img.url + img.name + "-" + img.width + "w.jpg";
+    placeholder.fallback = img.url + img.name + "-20w.jpg";
+    sources.push({ sizes: "100vw", srcSet: "", type: "image/avif" });
+    sources.push({ sizes: "100vw", srcSet: "", type: "image/webp" });
+    for (let index in sizes) {
+      if (sizes[index] > img.width) {
+        break;
+      }
+      let image_url =
+        (index === "0" ? "" : ",") + img.url + img.name + "-" + sizes[index];
+      fallback.srcSet += image_url + "w.jpg " + sizes[index] + "w";
+      sources[0].srcSet += image_url + "w.avif " + sizes[index] + "w";
+      sources[1].srcSet += image_url + "w.webp " + sizes[index] + "w";
+    }
+  }
+
+  return getImage({
+    childImageSharp: {
+      gatsbyImageData: {
+        backgroundColor: "transparent",
+        height: img.height / img.width,
+        width: 1,
+        layout: "fullWidth",
+        placeholder: placeholder,
+        images: {
+          fallback: fallback,
+          sources: sources,
+        },
+      },
+    },
+  });
+};
+
+export const getImageData = (image: ImageType, mobileImage: ImageType) => {
+  const image_data = buildImage(image);
+  const mobile_image_data = buildImage(mobileImage);
+  return image_data && mobile_image_data // If mobile image exists, it must be added using Art Direction.
+    ? withArtDirection(image_data, [
+        {
+          media: "(max-width: 768px)",
+          image: mobile_image_data,
+        },
+      ])
+    : image_data;
+};
+
+export const extractForm = (formSection: any) => {
+  let form: any = {
+    settings: {
+      pk: 0,
+      name: "",
+      form_method: "post",
+      form_submit: api_link("/v1/project/request/contact"),
+      form_redirection: null,
+      form_ajax_request: null,
+      recaptcha_action: "",
+      recaptcha_v3: false,
+    },
+    items: [],
+    fields: {},
+  };
+
+  form.settings.recaptcha_v3 = !!formSection.recaptcha_v3;
+  form.settings.recaptcha_action =
+    formSection.data.recaptcha_action ?? formSection.name;
+  form.settings.pk = formSection.pk;
+  form.settings.name = formSection.name;
+  [
+    "form_submit",
+    "form_recipient",
+    "form_method",
+    "form_redirection",
+    "form_ajax_request",
+    "form_success_msg",
+  ].map((cfg) => {
+    if (formSection.hasOwnProperty(cfg)) {
+      // @ts-ignore
+      form.settings[cfg] = formSection[cfg];
+    }
+  });
+  const validTypes = new Set([
+    "checkbox",
+    "input",
+    "select",
+    "button",
+    "google-places",
+    "country-prefix",
+    "textarea",
+    "recaptcha2",
+    "title",
+    "text",
+    "link",
+    "image",
+  ]);
+  let uniqueId = 0;
+  const addItem = (parents: any, newItem: any): any => {
+    let item = form.items;
+    for (let key of parents) {
+      item = item[key];
+      if (!Array.isArray(item)) {
+        item = item.children;
+      }
+    }
+    item.push(newItem);
+  };
+  // Set Form fields:
+  const setFormFields = (field: any, parents: any, k: number) => {
+    let fieldName =
+      field.input_name && !form.fields[field.input_name]
+        ? field.input_name
+        : field.name ?? `${field.type}${uniqueId++}`;
+
+    if ("section" === field.type) {
+      const sectionName = field.name ?? `sec_${parents.length}-${k}`;
+      addItem(parents, { name: sectionName, children: [] });
+      field.children.map((field: any, k2: any) =>
+        setFormFields(field, [...parents, k], k2)
+      );
+    } else if (validTypes.has(field.type)) {
+      addItem(parents, fieldName);
+      form.fields[fieldName] = field;
+      // Pre-process images (fixes flickering issue)
+      if (field.type === "image") {
+        form.fields[fieldName].imageData = getImageData(
+          field.image,
+          field.mobile_image
+        );
+      }
+    }
+  };
+
+  formSection.children.map((field: any, k: any) => setFormFields(field, [], k));
+  return form;
+};

package/src/node/api/types.ts

@@ -0,0 +1,19 @@
+export interface PageTagsType {
+  [k: string]: string;
+}
+
+export interface QueryParamsType {
+  [key: string]: string;
+}
+
+export interface ImageType {
+  type: "image";
+  url: string;
+  optimized: boolean;
+  name: string;
+  alt: string | null;
+  caption: string | null;
+  width: number;
+  height: number;
+  extension: string;
+}

package/src/node/build/index.ts

@@ -0,0 +1,142 @@
+import { Actions } from "gatsby";
+import { RedirectionType } from "./types";
+const fs = module.require("fs");
+
+// Build page elements (only for the ones having a build.js)
+export const build = async (page: any) => {
+  let body = [];
+  for (const element of page.body) {
+    body.push(
+      await buildElement(element, {
+        slug: page.slug,
+        tags: page.tags,
+        data: page.data,
+      })
+    );
+  }
+  page.body = body;
+  return page;
+};
+
+/**
+ * Generate API pages
+ *
+ * @param actions Gatsby actions: https://www.gatsbyjs.com/docs/reference/config-files/actions/
+ */
+export const createAPIPages = async (actions: Actions) => {
+  if (!process.env.GATSBY_PROJECT_ROOT) {
+    throw new Error(
+      'Please define "process.env.GATSBY_PROJECT_ROOT = __dirname" within the ./gatsby-config.js file.'
+    );
+  }
+  const { createPage, createRedirect } = actions;
+  // Generate Pages
+  const jsonDoc = JSON.parse(
+    fs.readFileSync(
+      `${process.env.GATSBY_PROJECT_ROOT}/src/data/pages/full-content.json`,
+      `utf-8`
+    )
+  );
+  let excluded = []; // List of excluded pages
+  for (const page of jsonDoc) {
+    if (page.is_hidden) {
+      excluded.push(page.slug);
+    }
+    // Skip disabled pages
+    if (!page.is_active) {
+      continue;
+    }
+    // Skip when "DEV_PAGE" is defined on "./.env.development" and doesn't match current page:
+    if (
+      process.env.DEV_PAGE &&
+      page.id !== parseInt(`${process.env.DEV_PAGE}`)
+    ) {
+      continue;
+    }
+
+    createPage({
+      path: page.slug,
+      component: require.resolve(
+        `${process.env.GATSBY_PROJECT_ROOT}/src/components/page/index.tsx`
+      ),
+      context: await build(page),
+    });
+  }
+
+  createAPIRedirections(createRedirect);
+  // Generate the file "./src/data/excluded.json" containing the pages which should be excluded on the sitemap and disallowed within robots.txt.
+  fs.writeFileSync(
+    `${process.env.GATSBY_PROJECT_ROOT}/src/data/pages/excluded.json`,
+    JSON.stringify(excluded)
+  );
+};
+
+/**
+ * Generate API redirections
+ */
+export const createAPIRedirections = (
+  createRedirect: Actions["createRedirect"]
+) => {
+  const redirections = JSON.parse(
+    fs.readFileSync(
+      `${process.env.GATSBY_PROJECT_ROOT}/src/data/pages/redirections.json`,
+      `utf-8`
+    )
+  );
+  redirections.forEach((redirect: RedirectionType) => {
+    createRedirect({
+      fromPath: redirect.page,
+      toPath: redirect.redirection,
+      isPermanent: redirect.type === "301",
+      force: true,
+    });
+  });
+};
+
+/**
+ * Function executed after creating pages to perform following tasks:
+ *  - Creation of "robots.txt"
+ */
+export const postBuild = () => {
+  const excludedPages = JSON.parse(
+    fs.readFileSync(
+      `${process.env.GATSBY_PROJECT_ROOT}/src/data/pages/excluded.json`,
+      `utf-8`
+    )
+  );
+
+  const robotsTxt = [
+    "User-agent: *",
+    `${excludedPages.length ? excludedPages.map((slug: string) => `Disallow: ${slug}`).join("\n") : "Allow: /"}`,
+    `Sitemap: ${process.env.PROTOCOL}://${process.env.HOST}/sitemap/sitemap-index.xml`,
+    `Host: ${process.env.PROTOCOL}://${process.env.HOST}`,
+  ];
+
+  fs.writeFileSync(
+    `${process.env.GATSBY_PROJECT_ROOT}/public/robots.txt`,
+    robotsTxt.join("\n")
+  );
+};
+
+/**
+ * Builds API Element (usually for "section" and "data" elements)
+ * This generates a initial data structure for the section/data to avoid processing the React component
+ * initial state on every single render.
+ *
+ * @param element API element
+ * @param context
+ * @returns
+ */
+export const buildElement = async (element: any, context: any) => {
+  const path = `${process.env.GATSBY_PROJECT_ROOT}/src/components/element/${element.type}/${element.name}/build.js`;
+  if (fs.existsSync(path)) {
+    const module = await import(path);
+    if (module?.build) {
+      return await module.build(element, context);
+    }
+    // Show warning on development:
+  } else if (process.env.ENV === "development") {
+    console.warn(`build.js file not found: ${path}`);
+  }
+  return element;
+};

package/src/node/build/types.ts

@@ -0,0 +1,5 @@
+export interface RedirectionType {
+  type: string;
+  page: string;
+  redirection: string;
+}

package/src/node/config/index.ts

@@ -0,0 +1,149 @@
+export const defaultGatsbyConfig = (config: any = {}, plugins: any[] = []) => {
+  if (!process.env.GATSBY_PROJECT_ROOT) {
+    throw new Error(
+      'Please define "process.env.GATSBY_PROJECT_ROOT = __dirname" within the ./gatsby-config.js file.'
+    );
+  }
+
+  return {
+    siteMetadata: {
+      title: process.env.SITE_TITLE,
+      description: process.env.SITE_DESCRIPTION,
+      siteUrl: `${process.env.PROTOCOL}://${process.env.HOST}`,
+      image: process.env.SITE_IMAGE,
+      protocol: process.env.PROTOCOL,
+      domain: process.env.HOST,
+    },
+    plugins: [
+      `gatsby-plugin-image`,
+      "gatsby-plugin-use-query-params",
+      "gatsby-plugin-svgr",
+      `gatsby-transformer-sharp`,
+      "gatsby-plugin-sass",
+      {
+        resolve: `gatsby-plugin-manifest`,
+        options: {
+          name: process.env.PROJECT_NAME,
+          short_name: process.env.PROJECT,
+          lang: process.env.PROJECT_DEFAULT_LANGUAGE,
+          start_url: `/`,
+          display: `standalone`,
+          icon: `static/icons/favicon.png`,
+        },
+      },
+      {
+        resolve: `gatsby-plugin-sharp`,
+        options: {
+          defaults: {
+            formats: [`auto`, `webp`, "avif"],
+            placeholder: `blurred`,
+            quality: 80,
+            breakpoints: [360, 769, 1024, 1216, 1408],
+            backgroundColor: `transparent`,
+            tracedSVGOptions: {},
+            blurredOptions: {},
+            jpgOptions: {},
+            pngOptions: {},
+            webpOptions: {},
+            avifOptions: {},
+          },
+        },
+      },
+      {
+        resolve: "gatsby-source-apiserver",
+        options: {
+          typePrefix: "API__",
+          method: "get",
+          allowCache: false,
+          headers: {
+            "Content-Type": "application/json",
+          },
+          data: {}, // Request body
+          params: {},
+          verboseOutput: false,
+          // enableDevRefresh: true,
+          entitiesArray: [
+            {
+              url: `${process.env.API_PROTOCOL}://${process.env.API_HOST}/v1/${process.env.PROJECT}/full-content/`,
+              headers: {
+                "Content-Type": "application/json",
+              },
+              name: "full-content",
+              skipCreateNode: true,
+              localSave: true,
+              path: `${process.env.GATSBY_PROJECT_ROOT}/src/data/pages/`,
+            },
+            {
+              url: `${process.env.API_PROTOCOL}://${process.env.API_HOST}/v1/${process.env.PROJECT}/redirection/`,
+              headers: {
+                "Content-Type": "application/json",
+              },
+              name: "redirections",
+              skipCreateNode: true,
+              localSave: true,
+              path: `${process.env.GATSBY_PROJECT_ROOT}/src/data/pages/`,
+            },
+          ],
+        },
+      },
+      {
+        resolve: `gatsby-plugin-s3`,
+        options: {
+          bucketName: process.env.S3_BUCKET,
+          protocol: process.env.PROTOCOL,
+          hostname: process.env.HOST,
+          generateRoutingRules: true,
+          generateRedirectObjectsForPermanentRedirects: true,
+          acl: "private",
+        },
+      },
+      {
+        resolve: `gatsby-plugin-sitemap`,
+        options: {
+          excludes: ["/404/"],
+          query: `
+          {
+            allSitePage {
+              nodes {
+                path
+                pageContext
+              }
+            }
+          }
+          `,
+          resolveSiteUrl: () => `${process.env.PROTOCOL}://${process.env.HOST}`,
+          filterPages: (page: any) => page.is_hidden,
+          serialize: (page: any, { resolvePagePath }: any) => {
+            return {
+              url: `${resolvePagePath(page)}`,
+              lastmod: page.pageContext.published_at,
+            };
+          },
+        },
+      },
+      {
+        resolve: "gatsby-plugin-google-tagmanager",
+        options: {
+          id: process.env.GTM_ID,
+        },
+      },
+      {
+        resolve: "gatsby-plugin-newrelic",
+        options: {
+          config: {
+            instrumentationType: "proAndSPA",
+            accountId: process.env.NEWRELIC_ACCOUNT_ID,
+            trustKey: process.env.NEWRELIC_TRUST_KEY,
+            agentID: process.env.NEWRELIC_AGENT_ID,
+            licenseKey: process.env.NEWRELIC_LICENSE_KEY,
+            applicationID: process.env.NEWRELIC_APP_ID,
+            beacon: "bam.nr-data.net",
+            errorBeacon: "bam.nr-data.net",
+          },
+        },
+      },
+      ...plugins,
+    ],
+    ...config,
+  };
+};

package/src/node/form/index.ts

@@ -0,0 +1,23 @@
+import { NOptionsType } from "./types";
+
+/**
+ *
+ * Creates a Object with numeric options for a Select input.
+ *
+ * @param n Number of options to create
+ * @param start The number from which the options start
+ * @param defaultOpt Default options to be added into the resulting object
+ * @returns Object with the created options, for instance: { "0": "0", "1": "1", ... }
+ *
+ */
+export const nOptions = (
+  n: number,
+  start = 0,
+  defaultOpt = {}
+): NOptionsType => {
+  const obj: NOptionsType = { ...defaultOpt };
+  for (let i = start; i < start + n; i++) {
+    obj[i.toString()] = i.toString();
+  }
+  return obj;
+};

package/src/node/form/types.ts

@@ -0,0 +1,3 @@
+export interface NOptionsType {
+  [key: string]: string;
+}

package/src/node/property/index.ts

@@ -0,0 +1,78 @@
+const slugify = module.require("slugify");
+import { HotelOptionsByCityType, HotelPagesType, CityKeyType } from "./types";
+
+/**
+ *
+ * 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: Record<CityKeyType, { value: string; label: 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]
+      ),
+    };
+  });
+};
+
+/**
+ * Joins the Property address
+ */
+export const joinAddress = (addressParams: (string | null)[]) =>
+  addressParams
+    .reduce((acc: string[], param: string | null) => {
+      if (param) {
+        acc.push(param);
+      }
+      return acc;
+    }, [])
+    .join(", ");
+
+export const hotel_page_link = (city: string, hotelName: string) =>
+  `/book-accommodation/${slugify(city, {
+    lower: true,
+  })}/${slugify(hotelName, {
+    lower: true,
+  }).slice(5)}`;

package/src/node/property/types.ts

@@ -0,0 +1,25 @@
+// Define a type for the city keys in `hotelsByCity`
+export type CityKeyType =
+  | "Sydney"
+  | "Melbourne"
+  | "Perth"
+  | "Hobart"
+  | "Canberra"
+  | "Adelaide"
+  | "Gold Coast"
+  | "Darwin"
+  | "Singapore";
+
+export interface HotelPagesType {
+  [hotel_code: string]: {
+    name: string;
+    city: CityKeyType;
+    sort: number;
+    link: string;
+  };
+}
+
+export interface HotelOptionsByCityType {
+  label: string;
+  options: { value: string; label: string }[];
+}

package/src/node/url/index.ts

@@ -0,0 +1,8 @@
+export const join_paths = (path1: string, path2: string): string =>
+  `${path1.replace(new RegExp(`/$`), "")}/${path2.replace(
+    new RegExp(`^/`),
+    ""
+  )}`;
+
+export const ssoURL = (path: string) =>
+  `${process.env.SABRE_SSO_PROTOCOL}://${process.env.SABRE_SSO_HOST}${path}`;