@tfehotels/tfe-gatsby-library 1.0.0

package/src/browser/api/country-prefix/index.tsx

@@ -0,0 +1,150 @@
+import React, {
+  startTransition,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react"
+import { PhonePropsType } from "./types"
+import { countryPrefixes } from "../../utils/location"
+import { scrollToChild } from "../../utils/viewport"
+import Markdown from "../../markdown"
+
+export default function CountryPrefix({
+  className,
+  label,
+  description,
+  input_name,
+  onClick,
+  onChange,
+  value,
+  ...props
+}: PhonePropsType) {
+  const [showOptions, setShowOptions] = useState<boolean>(false)
+  const [focused, setFocused] = useState<number>(0)
+  const [input, setInput] = useState("")
+  const listRef = useRef<HTMLUListElement>(null)
+
+  const handleSelection = useCallback(
+    (focused: number) => {
+      onChange?.(countryPrefixes[focused][1] as any)
+      startTransition(() => {
+        setShowOptions(false)
+        setFocused(focused)
+      })
+    },
+    [onChange, countryPrefixes]
+  )
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {
+    e.stopPropagation()
+    e.preventDefault()
+    const { key } = e
+    if (key === "ArrowDown" || key === "ArrowUp") {
+      // Logic to navigate through the list items
+      startTransition(() => {
+        setFocused(
+          key === "ArrowDown"
+            ? Math.min(focused + 1, countryPrefixes.length - 1)
+            : Math.max(focused - 1, 0)
+        )
+        setInput("")
+      })
+    } else if (key === "Escape") {
+      startTransition(() => setShowOptions(false))
+    } else if (key === "Enter") {
+      handleSelection(focused)
+    } else if (key === "Backspace") {
+      startTransition(() => setInput(input.slice(0, -1)))
+    } else if (/^[ \p{L}]+$/u.test(key)) {
+      startTransition(() => setInput(input + key))
+    }
+  }
+
+  const scrollToFocusedCountry = useCallback(() => {
+    if (!listRef.current) return
+    const element = listRef.current.querySelector(
+      `#${props.name ?? "country-prefix"}__${countryPrefixes[focused][0]}`
+    )
+    if (!element) return
+    scrollToChild(listRef.current, element as HTMLElement)
+  }, [focused, countryPrefixes])
+
+  // Focus selected option based on input
+  useEffect(() => {
+    if (!input) return
+    let foundIndex = countryPrefixes.findIndex(row =>
+      row[2].toLowerCase().startsWith(input.toLowerCase())
+    )
+    if (foundIndex >= 0) {
+      startTransition(() => setFocused(foundIndex))
+    } else {
+      startTransition(() => setInput(""))
+    }
+  }, [input])
+
+  useEffect(() => {
+    scrollToFocusedCountry()
+  }, [focused])
+
+  useEffect(() => {
+    if (!listRef.current) return
+    if (showOptions) {
+      // Autofocus on open dropdown
+      listRef.current.focus()
+      return
+    }
+
+    startTransition(() => setInput(""))
+  }, [showOptions])
+
+  return (
+    <label
+      className={`country-prefix ${className ? ` ${className}` : ""}`}
+    >
+      {!!label && <span>{label}</span>}
+      <div
+        className="selected-prefix"
+        onClick={() => {
+          startTransition(() => setShowOptions(true))
+          listRef?.current?.focus()
+        }}
+      >
+        +{value ?? countryPrefixes[0][1]}
+        &gt;
+      </div>
+      <ul
+        className={showOptions ? "show" : ""}
+        ref={listRef}
+        role="listbox"
+        tabIndex={-1}
+        onKeyDown={handleKeyDown}
+        aria-activedescendant={`${props.name ?? "country-prefix"}__${
+          countryPrefixes[focused][0]
+        }`}
+      >
+        {countryPrefixes.map(([countryCode, prefix, name], k) => {
+          return (
+            <li
+              className={k === focused ? "selected" : ""}
+              role="option"
+              onClick={() => handleSelection(k)}
+              aria-selected={k === focused}
+              aria-label={`${name} +${prefix}`}
+              id={`${props.name ?? "country-prefix"}__${countryCode}`}
+              key={`${props.name ?? "country-prefix"}__${countryCode}`}
+            >
+              {name} +{prefix}
+            </li>
+          )
+        })}
+      </ul>
+      <input type="hidden" name={input_name} />
+      {!!description && (
+        <div>
+          <Markdown>{description}</Markdown>
+        </div>
+      )}
+    </label>
+  )
+}

package/src/browser/api/country-prefix/types.tsx

@@ -0,0 +1,17 @@
+import { MouseEventHandler, ChangeEventHandler } from "react"
+
+export interface PhonePropsType {
+  onClick?: MouseEventHandler<HTMLLabelElement>
+  onChange?: ChangeEventHandler<HTMLLabelElement>
+  className?: string
+  value: string
+  width?: number
+  height?: number
+  id?: string
+  name?: string
+  input_name?: string
+  color?: string
+  accept?: string
+  label?: string
+  description?: string
+}

package/src/browser/api/form/index.tsx

@@ -0,0 +1,330 @@
+import { useGoogleReCaptcha } from "react-google-recaptcha-v3"
+import React, { startTransition, useCallback, useEffect } from "react"
+import { ErrorsType, FormPropsType } from "./types"
+import { toastMsg } from "../../utils/notifications"
+import {
+  INPUT_FIELDS,
+  getInputEventValue,
+  getInputHumanValue,
+  json_request,
+} from "../../utils/forms"
+import type {  
+  FormFieldsType,
+  FormItemType,
+} from "../../utils/types"
+import classNames from "classnames"
+import Markdown from "../../markdown"
+import Spinner from "../../spinner"
+
+const Element: any = <div/> //React.lazy(() => import(<div/>))
+
+
+export default function Form({
+  className,
+  form,
+  setForm,
+  errors,
+  setErrors,
+  beforeSubmit,
+  formatParams,
+  validate,
+  validateResponse,
+  onSuccess,
+  onFocus,
+  onBlur,
+  onClick,
+  onChange,
+  onError,
+  afterSubmit,
+  loading,
+}: FormPropsType) {
+  const { executeRecaptcha } = useGoogleReCaptcha()
+
+  const showErrors = (errors: ErrorsType, showInputName: boolean = true) => (
+    <div>
+      <ul className={"error"}>
+        {Object.entries(errors).map(([input, error], k: number) => (
+          <li key={`error-form${k}`}>
+            X
+            <span>
+              {showInputName ? <strong>{input}:</strong> : ""} {error}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    let errors: any = {}
+    let params = Object.values(form.fields).reduce((acc, field) => {
+      if (INPUT_FIELDS.has(field.type)) {
+        // @ts-ignore
+        if (field.required && !field.value) {
+          //@ts-ignore
+          errors[field.input_name] = `${
+            //@ts-ignore
+            field.label ? field.label : field.placeholder
+          } is required`
+          return acc
+        }
+        // @ts-ignore
+        // Skip non-checked radio buttons
+        if (field.input_type === "radio" && !field.checked) {
+          return acc
+        }
+        // @ts-ignore
+        acc[field.input_name] = getInputHumanValue(field.type, field.value)
+      }
+      return acc
+    }, {} as any)
+
+    // Get reCAPTCHA v3 token
+    if (form.settings.recaptcha_v3) {
+      params.recaptcha_token = await verifyRecaptcha()
+      if (!params.recaptcha_token) {
+        errors.recaptcha = "reCAPTCHA failed!"
+      }
+    }
+
+    // Check recaptcha v2 if it's within the fields
+    if (form.fields.recaptcha && !params.recaptcha) {
+      errors.recaptcha = "Recaptcha is mandatory"
+    }
+
+    if (validate) {
+      errors = { ...errors, ...validate(form.fields, params) }
+    }
+    if (Object.keys(errors).length) {
+      startTransition(() => {
+        setErrors(errors)
+        toastMsg(showErrors(errors, false))
+      })
+      return
+    }
+
+    if (beforeSubmit) {
+      beforeSubmit(form)
+    }
+
+    if (formatParams) {
+      params = formatParams(params)
+    }
+
+    // If is not an AJAX request, the page will be redirected into the form submit URL
+    if (!form.settings.form_ajax_request) {
+      // @ts-ignore
+      return e.target.submit()
+    }
+    const response = await json_request(
+      form.settings.form_submit,
+      params,
+      form.settings.form_method,
+      form.settings.form_recipient
+        ? {
+            "recipient-id": `${form.settings.form_recipient}`,
+          }
+        : {}
+    )
+    startTransition(() => {
+      // ON SUCCESS:
+      if (
+        response.status === 200 &&
+        (!validateResponse || validateResponse(response))
+      ) {
+        if (onSuccess) {
+          // Execute onSuccess action when defined:
+          onSuccess(response, form.settings.form_success_msg)
+        } else {
+          // Otherwise just show success message:
+          toastMsg(
+            form.settings.form_success_msg ? (
+              <Markdown>{form.settings.form_success_msg}</Markdown>
+            ) : (
+              "Success! Your form has been successfully sent. Thank you for reaching out, we will get back to you as soon as possible."
+            ),
+            "success"
+          )
+        }
+
+        if (form.settings.form_redirection) {
+          setTimeout(() => {
+            window.location.href = form.settings.form_redirection as string
+          }, 3000)
+        }
+
+        // Reset all form values:
+        setForm({
+          ...form,
+          fields: Object.entries(form.fields).reduce((acc, [name, field]) => {
+            acc[name] = INPUT_FIELDS.has(field.type) // @ts-ignore
+              ? { ...field, value: "" }
+              : field
+            return acc
+          }, {} as FormFieldsType),
+        })
+        // ON ERROR:
+      } else if (onError) {
+        onError(response)
+        // ELSE ON ERROR:
+      } else if (response.errors) {
+        let newErrors: ErrorsType = Object.entries(response.errors).reduce(
+          (acc, [inputName, errorList]) => {
+            acc[inputName] = errorList.join(", ")
+            return acc
+          },
+          {} as ErrorsType
+        )
+        toastMsg(showErrors(newErrors))
+        setErrors(newErrors)
+        // ELSE ON ERROR:
+      } else if (response.error) {
+        toastMsg(
+          showErrors(
+            {
+              failed: response.error ? (
+                <Markdown>{response.error}</Markdown>
+              ) : (
+                "Oops. Something went wrong. Please try again later, or contact us at members@tfehotels.com"
+              ),
+            },
+            false
+          )
+        )
+      }
+    })
+
+    if (afterSubmit) {
+      afterSubmit(response)
+    }
+  }
+
+  const verifyRecaptcha = useCallback(async () => {
+    if (!executeRecaptcha) {
+      console.log("Execute recaptcha not yet available")
+      return
+    }
+    return await executeRecaptcha(form.settings.recaptcha_action)
+  }, [executeRecaptcha])
+
+  useEffect(() => {
+    if (form.settings.recaptcha_v3) {
+      verifyRecaptcha()
+    }
+  }, [form.settings.recaptcha_v3, verifyRecaptcha])
+
+  const buildFormElement = (item: FormItemType) => {
+    if (typeof item === "string") {
+      const field: any = form.fields[item]
+      return (
+        <div
+          className={`${field.type} ${field.type}-${field.name}`}
+          key={`ff-${form.settings.pk}-${item}`}
+        >
+          {INPUT_FIELDS.has(field.type) ? (
+            <Element
+              className={classNames({
+                [field.data.class]: Boolean(field.data.class),
+                error: Boolean(errors[item]),
+              })}
+              onFocus={(e: React.FocusEvent) => {
+                if (onFocus) onFocus(e)
+              }}
+              onBlur={(e: React.FocusEvent) => {
+                if (onBlur) onBlur(e)
+              }}
+              onClick={(e: React.MouseEvent) => {
+                // Only for checkboxes/Radios
+                if (["checkbox", "radio"].includes(field.input_type)) {
+                  let newForm = { ...form }
+                  if (field.input_type === "checkbox") {
+                    newForm.fields = {
+                      ...form.fields,
+                      [item]: { ...field, value: !field.value },
+                    }
+                  } else {
+                    // Radio buttons (sets the "checked" flag on all radio buttons with same name)
+                    newForm.fields = Object.entries(form.fields).reduce(
+                      (acc, [fieldName, attrs]) => {
+                        acc[fieldName] = attrs //@ts-ignore
+                        if (attrs.input_name === field.input_name) {
+                          //@ts-ignore
+                          acc[fieldName].checked = //@ts-ignore
+                            field.value === acc[fieldName].value
+                        }
+                        return acc
+                      },
+                      {} as FormFieldsType
+                    )
+                  }
+                  startTransition(() => {
+                    setForm(newForm)
+                    if (errors[item]) {
+                      setErrors({}) // reset errors
+                    }
+                  })
+                }
+                if (onClick) onClick(e)
+              }}
+              checked={
+                field.input_type === "radio" ? !!field.checked : undefined
+              }
+              onChange={(e: any) => {
+                if (!["checkbox", "radio"].includes(field.input_type)) {
+                  startTransition(() => {
+                    setForm({
+                      ...form,
+                      fields: {
+                        ...form.fields,
+                        [item]: {
+                          ...field,
+                          value: getInputEventValue(field.type, e),
+                          data: e.target?.data
+                            ? { ...field.data, ...e.target.data }
+                            : field.data,
+                        },
+                      },
+                    })
+
+                    if (errors[item]) {
+                      setErrors({}) // reset errors
+                    }
+                  })
+                }
+                if (onChange) onChange(e)
+              }}
+              {...{
+                ...field,
+                value: field.value ? field.value : "",
+              }}
+            />
+          ) : (
+            // Display Titles, Texts, Links, etc..
+            <Element {...field} />
+          )}
+        </div>
+      )
+    }
+    // Otherwise is a section
+    return (
+      <div
+        className={`form-section ${item.name}`}
+        key={`ff-${form.settings.pk}-${item.name}`}
+      >
+        {item.children.map(buildFormElement)}
+      </div>
+    )
+  }
+  return (
+    <form
+      className={className}
+      action={form.settings.form_submit}
+      method={form.settings.form_method}
+      onSubmit={e => handleSubmit(e)}
+      noValidate
+    >
+      {loading ? <Spinner color="#00b5ee" /> : form.items.map(buildFormElement)}
+    </form>
+  )
+}

package/src/browser/api/form/types.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+import { InputType } from "../types";
+import { FormType } from "../../utils/types";
+
+export interface InputsType {
+  [field: string]: InputType;
+}
+
+export interface ErrorsType {
+  [field: string]: string | ReactNode;
+}
+
+export interface FormPropsType {
+  className?: string;
+  form: FormType;
+  setForm: Function;
+  errors: ErrorsType;
+  loading?: boolean;
+  setErrors: Function;
+  beforeSubmit?: Function;
+  formatParams?: Function;
+  validate?: Function;
+  validateResponse?: Function;
+  onSuccess?: Function;
+  onFocus?: Function;
+  onBlur?: Function;
+  onClick?: Function;
+  onChange?: Function;
+  onError?: Function;
+  afterSubmit?: Function;
+}

package/src/browser/api/google-places/index.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from "react"
+import { usePlacesWidget } from "react-google-autocomplete"
+import { GooglePlacesPropsType, PlaceType } from "./types"
+import { countryPrefixes } from "../../utils/location"
+
+const getCountryCode = (place: google.maps.places.PlaceResult) => {
+  if (place.address_components) {
+    for (const component of place.address_components) {
+      if (component.types[0] == "country") {
+        return component.short_name
+      }
+    }
+  }
+  return null
+}
+
+const GooglePlaces = ({
+  label,
+  name,
+  input_name,
+  value, 
+  defaultCountryCode,
+  onChange,
+  onClick,
+  onFocus,
+  onBlur,
+  data,
+  ...props
+}: GooglePlacesPropsType) => {
+  const [place, setPlace] = useState<PlaceType | undefined>()
+
+  if (!process.env.GOOGLEMAPS_KEY) {
+    throw new Error("The environment variable GOOGLEMAPS_KEY is not defined!")
+  }
+
+  const { ref }: any = usePlacesWidget({
+    apiKey: process.env.GOOGLEMAPS_KEY,
+    onPlaceSelected: place =>
+      setPlace({
+        target: {
+          value: place.formatted_address,
+          data: { countryCode: getCountryCode(place) },
+        },
+      }),
+    ...data,
+  })
+
+  useEffect(() => {
+    if (onChange && place) {
+      onChange(place as any)
+    }
+  }, [place])
+
+  // Init country when countryCode is provided
+  useEffect(() => {
+    if (!defaultCountryCode || value || place) return
+    const found = countryPrefixes.find(
+      x => x[0] === defaultCountryCode.toLowerCase()
+    )
+    if (found) {
+      setPlace({
+        target: {
+          value: found[2],
+          data: { countryCode: defaultCountryCode },
+        },
+      })
+    }
+  }, [defaultCountryCode])
+
+  return (
+    <label className={`google-places label-${name}`}>
+      {!!label && <span>{label}</span>}
+
+      <input
+        ref={ref}
+        name={input_name}
+        autoComplete="off"
+        onChange={onChange}
+        onClick={onClick}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        value={value}
+        placeholder={props.placeholder ?? undefined}
+        {...props}
+      />
+    </label>
+  )
+}
+
+export default GooglePlaces

package/src/browser/api/google-places/types.ts

@@ -0,0 +1,24 @@
+import { InputType } from "../types";
+
+export interface GooglePlacesPropsType
+  extends Omit<InputType, "type" | "data"> {
+  label?: string;
+  name?: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  onClick: React.MouseEventHandler<HTMLInputElement>;
+  onFocus: React.FocusEventHandler<HTMLInputElement>;
+  onBlur: React.FocusEventHandler<HTMLInputElement>;
+  value: any;
+  defaultCountryCode?: string;
+  data: {
+    options?: google.maps.places.AutocompleteOptions;
+    language?: string;
+  };
+}
+
+export interface PlaceType {
+  target: {
+    value: string | undefined;
+    data: { countryCode: string | null };
+  };
+}

package/src/browser/api/icon/index.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { IconPropsType, FontAwesomeGroupsType } from "./types"
+// import { StaticImage } from "gatsby-plugin-image"
+
+ 
+const FontAwesomeGroups: FontAwesomeGroupsType = {
+  FAB: "fab",
+  FAS: "fas",
+}
+
+
+const Icon = ({ icon, className, onClick, color }: IconPropsType) => {
+  return FontAwesomeGroups.hasOwnProperty(icon.group) ? (
+    <FontAwesomeIcon
+      className={className}
+      color={color}
+      onClick={onClick}
+      icon={[FontAwesomeGroups[icon.group], icon.icon]}
+    />
+  ) : (
+    <img className={className}  alt={icon.icon} onClick={onClick} src={`/icons/${icon.icon}.svg`} />
+  )  
+}
+
+export default Icon

package/src/browser/api/icon/types.tsx

@@ -0,0 +1,24 @@
+import type { IconPrefix } from "@fortawesome/fontawesome-svg-core"
+import { MouseEventHandler } from "react"
+
+export interface IconType {
+  icon: any
+  group: string
+}
+
+export interface IconPropsType {
+  icon: IconType
+  className?: string
+  width?: number
+  height?: number
+  color?: string
+  bg?: string
+  title?: string
+  style?: { [key: string]: any }
+  direction?: string
+  onClick?: any
+}
+
+export interface FontAwesomeGroupsType {
+  [k: string]: IconPrefix
+}