@tfehotels/tfe-gatsby-library 1.0.0

package/lib/index.browser.d.ts

@@ -0,0 +1,640 @@
+/// <reference types="react" />
+/// <reference types="googlemaps" />
+import { Stage } from 'transition-hook';
+import { IGatsbyImageData } from 'gatsby-plugin-image';
+import React$1, { ReactNode, MouseEventHandler, ChangeEventHandler, FC } from 'react';
+import OptionTypeBase, { Props } from 'react-select';
+import { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
+import { ToastPosition } from 'react-hot-toast';
+
+declare const animateJSX: (transition: {
+    stage: Stage;
+    shouldMount: boolean;
+}, animation?: string) => string;
+
+interface DataAttributeType {
+    [key: string]: any;
+}
+interface IconType$1 {
+    icon: string;
+    group: string;
+}
+interface ElementType {
+    name?: string;
+    data: DataAttributeType;
+    icon?: IconType$1;
+}
+interface TitleType extends ElementType {
+    type: "title";
+    title: string;
+}
+interface UserType {
+    loyaltyprofileId: string;
+    profile_id: string;
+    title: string;
+    first_name: string;
+    last_name: string;
+    email: string;
+    zip: string;
+    country_code: string;
+    MobilePhoneCountryCode: string;
+    mobile: string;
+    date_of_birth: string;
+    language: string;
+}
+interface ImageType {
+    type: "image";
+    url: string;
+    optimized: boolean;
+    name: string;
+    alt: string | null;
+    caption: string | null;
+    width: number;
+    height: number;
+    extension: string;
+}
+interface FileType {
+    url: string;
+    size: number;
+    label: string;
+    extension: string;
+}
+interface MediaType extends ElementType {
+    type: "file" | "instagram" | "image" | "video";
+    title: string;
+    loading: "eager" | "lazy";
+    image?: ImageType;
+    mobile_image?: ImageType;
+    file?: FileType;
+    mobile_file?: FileType;
+    alt?: string;
+    external_link?: string;
+    page_slug?: string;
+    page?: string;
+}
+interface ImageMediaType extends MediaType {
+    type: "image";
+    imageData?: IGatsbyImageData;
+}
+interface FileMediaType extends MediaType {
+    type: "file";
+    file: FileType;
+}
+interface VideoMediaType extends MediaType {
+    type: "video";
+}
+interface TextType extends ElementType {
+    type: "text";
+    text: string;
+}
+interface LinkType extends ElementType {
+    type: "link";
+    tag: "a";
+    target?: "_blank" | "_parent" | "_top";
+    text?: string;
+    group?: string;
+    page?: string;
+    page_slug?: string;
+    external_link?: string;
+}
+interface LinkListType extends ElementType {
+    pk: number;
+    type: "linklist";
+    links: LinkType[];
+}
+interface InputType extends ElementType {
+    type: "input";
+    input_name: string;
+    input_type: "text" | "textarea" | "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "recaptcha2" | "search" | "submit" | "tel" | "time" | "url" | "week" | "google-places";
+    label?: string;
+    min?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    value?: string;
+    iconOnClick?: Function;
+    description?: string;
+}
+interface SelectType extends Omit<InputType, "type" | "input_type"> {
+    type: "select";
+    input_type: "select";
+    input_name: string;
+    options: {
+        [value: string]: string;
+    };
+}
+interface CheckboxType extends Omit<InputType, "type" | "input_type"> {
+    type: "checkbox";
+    input_type: "checkbox";
+}
+interface RecaptchaType extends Omit<InputType, "type" | "input_type"> {
+    type: "recaptcha2";
+    input_type: "recaptcha2";
+}
+interface GoogleSitesType extends Omit<InputType, "type" | "input_type"> {
+    type: "google-places";
+    input_type: "google-places";
+}
+interface ButtonType extends Omit<InputType, "type"> {
+    type: "button";
+    input_type: "button";
+}
+interface SectionType extends ElementType {
+    type: "section";
+    tag?: "section" | "form" | "header" | "footer" | "div" | "nav";
+    pk: number;
+    children?: (TitleType | TextType | LinkType | LinkListType | InputType | ButtonType | SectionType | SelectType | MediaType)[];
+}
+interface ElementDataType extends ElementType {
+    type: "data";
+    children: any[];
+}
+type AnyElementType = LinkType | LinkListType | InputType | ButtonType | SectionType | MediaType;
+interface PageParamsType {
+    data: any;
+    hotel: null | string;
+    tags: {
+        [k: string]: string;
+    };
+}
+interface LocationType {
+    hash: string;
+    host: string;
+    hostname: string;
+    href: string;
+    key: string;
+    origin: string;
+    pathname: string;
+    port: string;
+    protocol: string;
+    search: string;
+}
+interface DefaultPropsType extends Omit<SectionType, "children"> {
+    className: string;
+    children: AnyElementType[];
+    pageParams: PageParamsType;
+    location: LocationType;
+    user: null | UserType;
+}
+
+interface SearchParamsType {
+    check_in: Date;
+    check_out: Date;
+    adult_count: number;
+    child_count: number;
+    promo_codes: string[];
+    rate_codes: string[];
+    hotel_codes: string[];
+    selected_hotel: string | null;
+}
+interface HotelPagesType {
+    [hotel_code: string]: {
+        name: string;
+        city: string;
+        sort: number;
+        link: string;
+    };
+}
+interface CachedSearchParamsType {
+    check_in: Date;
+    check_out: Date;
+    adult_count: number;
+    child_count: number;
+    rate_codes: string[];
+    promo_codes: string[];
+}
+interface HotelOptionsByCityType {
+    label: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+}
+interface FormFieldsType {
+    [field: string]: InputType | TitleType | TextType | LinkType | ImageType | SelectType | RecaptchaType | CheckboxType | GoogleSitesType;
+}
+interface FormSettingsType {
+    pk: number;
+    name: string;
+    form_method: "get" | "post";
+    form_recipient?: number;
+    form_submit: string;
+    form_redirection?: string | null;
+    form_success_msg?: string | null;
+    form_ajax_request?: boolean | null;
+    recaptcha_v3: boolean;
+    recaptcha_action: string;
+}
+type FormItemType = string | FormSectionFieldType;
+interface FormSectionFieldType {
+    name: string;
+    children: FormItemType[];
+}
+interface FormType {
+    settings: FormSettingsType;
+    fields: FormFieldsType;
+    items: FormItemType[];
+}
+interface BookingURLType {
+    date_format: string;
+    locale: string;
+    mobile_url: string;
+    mobile_url_no_availability: string;
+    url: string;
+    url_no_availability: string;
+    variables: string;
+}
+interface BookingURLsType {
+    name: string;
+    booking_urls: BookingURLType;
+}
+
+declare const BookingUrl: (hotel_code: string, urls: BookingURLsType["booking_urls"], searchParams: SearchParamsType, hasAvailability: boolean, rate_code?: string | null, room_code?: string | null) => void;
+/**
+ *
+ * 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" },
+ *      ]
+ *    },
+ *  ]
+ */
+declare const hotelOptionsByCity: (hotelPages: HotelPagesType) => HotelOptionsByCityType[];
+declare const SearchAvailability: (check_in: Date, check_out: Date, adult_count: number, child_count: number, promo_codes: string[], rate_codes: string[], hotel_codes: string[]) => Promise<any>;
+declare const pricePerNight: (total: string, nights: number) => string;
+
+declare const saveUserSession: (data: any) => void;
+declare const loadUserSession: () => UserType | null;
+declare const deleteUserSession: () => void;
+
+interface RequestParamsType {
+    [param: string]: string | number | null;
+}
+interface HeadersType {
+    [param: string]: string;
+}
+interface APIResponseType {
+    success?: boolean;
+    errors?: {
+        [input: string]: string[];
+    };
+    error?: string;
+    msg?: string;
+    status: number;
+    [k: string]: any;
+}
+declare const json_request: (url: string, params: RequestParamsType, method?: "get" | "post", headers?: HeadersType) => Promise<APIResponseType>;
+declare const getInputEventValue: (inputType: string, event: any) => any;
+declare const getInputHumanValue: (inputType: string, value: any) => any;
+
+declare const joinAddress: (addressParams: (string | null)[]) => string;
+interface PageTagsType {
+    [k: string]: string;
+}
+declare const tagExists: (pageTags: PageTagsType, ...tags: string[]) => boolean;
+
+declare const preloadImages: (images: string[]) => Promise<void>;
+declare const optimizedThumb: (img: ImageType) => string;
+declare const getThumb: (img: {
+    image?: ImageType;
+    mobile_image?: ImageType;
+}) => string;
+declare const toImageElement: (obj: any, keyMap?: any) => ImageMediaType;
+declare const minimumSlides: (slidesToShow: number, slides: any[]) => any[];
+declare const tripadvisorRatingURL: (score: string) => string;
+
+declare const countryPrefixes: string[][];
+
+declare const toastMsg: (msg: string | ReactNode, variant?: "error" | "info" | "success", duration?: number) => void;
+
+declare function human_number(n: number, decimals?: number): string;
+
+declare const ssoURL: (path: string) => string;
+
+declare const cachedSearchParams: () => CachedSearchParamsType | null;
+declare const cacheSearchParams: (searchParams: CachedSearchParamsType) => void;
+
+declare function randomString(length?: number): string;
+
+interface QueryParamsType {
+    [key: string]: string;
+}
+declare const siteUrl: (path?: string) => string;
+/**
+ * Extracts query params from an URL
+ *
+ * @param queryString String with query params
+ * @param rename Object for renaming params, e.g: {"oldParam": "newParam"}
+ * @returns Object with the parsed params
+ */
+declare function parseQueryParams(queryString: string, rename?: {
+    [k: string]: string;
+}): QueryParamsType;
+declare const join_paths: (path1: string, path2: string) => string;
+declare const api_link: (apiPath?: string, queryParams?: QueryParamsType | null) => string;
+declare const hotel_page_link: (city: string, hotelName: string) => string;
+/**
+ *
+ * Transforms Search params into a query string
+ */
+declare const sp_to_qs: (check_in: Date, check_out: Date, adult_count: number, child_count: number, rate_codes: string[], promo_codes: string[]) => string;
+declare const opentableLink: (id: number) => string;
+
+declare const IsMobile: () => boolean;
+declare const scrollToElement: (elementId: string) => Promise<void>;
+declare const scrollToChild: (parent: HTMLElement, child: HTMLElement) => void;
+declare const isIOS: () => boolean;
+declare const deviceId: (width: number) => "d" | "t" | "m";
+declare const classNames: (classes: {
+    [k: string]: boolean;
+}, displayOn?: Array<string> | null) => any;
+
+interface CheckboxPropsType {
+    onClick?: MouseEventHandler<HTMLLabelElement>;
+    onChange?: ChangeEventHandler<HTMLLabelElement>;
+    className?: string;
+    value: boolean;
+    width?: number;
+    height?: number;
+    id?: string;
+    name?: string;
+    input_name?: string;
+    color?: string;
+    accept?: string;
+    label?: string;
+    description?: string;
+}
+
+declare function Checkbox({ className, label, description, ...props }: CheckboxPropsType): React$1.JSX.Element;
+
+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;
+}
+
+declare function CountryPrefix({ className, label, description, input_name, onClick, onChange, value, ...props }: PhonePropsType): React$1.JSX.Element;
+
+interface ErrorsType {
+    [field: string]: string | ReactNode;
+}
+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;
+}
+
+declare function Form({ className, form, setForm, errors, setErrors, beforeSubmit, formatParams, validate, validateResponse, onSuccess, onFocus, onBlur, onClick, onChange, onError, afterSubmit, loading, }: FormPropsType): React$1.JSX.Element;
+
+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;
+    };
+}
+
+declare const GooglePlaces: ({ label, name, input_name, value, defaultCountryCode, onChange, onClick, onFocus, onBlur, data, ...props }: GooglePlacesPropsType) => React$1.JSX.Element;
+
+interface IconType {
+    icon: any;
+    group: string;
+}
+interface IconPropsType {
+    icon: IconType;
+    className?: string;
+    width?: number;
+    height?: number;
+    color?: string;
+    bg?: string;
+    title?: string;
+    style?: {
+        [key: string]: any;
+    };
+    direction?: string;
+    onClick?: any;
+}
+
+declare const Icon: ({ icon, className, onClick, color }: IconPropsType) => React$1.JSX.Element;
+
+interface ImagePropsType extends MediaType {
+    type: "image";
+    className?: string;
+    style?: React$1.CSSProperties;
+    onLoad?: any;
+    imageData?: IGatsbyImageData;
+}
+
+declare const Image: ({ imageData, ...props }: ImagePropsType) => React$1.JSX.Element;
+
+interface InputPropsType extends Omit<InputType, "type" | "data"> {
+    type?: "input";
+    data?: DataAttributeType;
+    className?: string;
+    read_only?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+
+declare const Input: ({ label, type, input_type, description, name, input_name, icon, iconOnClick, read_only, ...props }: InputPropsType) => React$1.JSX.Element;
+
+interface LinkPropsType extends Omit<LinkType, "type" | "tag" | "data"> {
+    type?: "link";
+    tag?: "a";
+    className?: string;
+    title?: string;
+    anchor?: string;
+    data?: DataAttributeType;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    children?: React.ReactNode;
+    animate?: boolean;
+}
+
+declare const Link: (props: LinkPropsType) => React$1.JSX.Element;
+
+interface LinkListPropsType extends LinkListType {
+    className?: string;
+    children?: React.ReactNode;
+}
+
+declare const LinkList: ({ pk, ...props }: LinkListPropsType) => React$1.JSX.Element;
+
+interface OptionType {
+    label: string;
+    value: string;
+}
+interface GroupedOptionsType {
+    label: string;
+    options: OptionType[];
+}
+type OptionsType = {
+    [key: string]: string | {
+        [key: string]: string;
+    };
+} | OptionType[] | GroupedOptionsType[];
+interface SelectPropsType extends Omit<Props<OptionTypeBase>, "value" | "options"> {
+    className?: string;
+    name?: string;
+    value?: OptionType | string | null;
+    options: OptionsType;
+    styles?: any;
+    label?: string;
+}
+
+declare const Select: React$1.FC<SelectPropsType>;
+
+interface FilePropsType extends FileMediaType {
+    className?: string;
+    style?: React$1.CSSProperties;
+    onLoad?: any;
+}
+
+declare const SVG: (props: FilePropsType) => React$1.JSX.Element;
+
+interface TagAttributesType {
+    [tag: string]: {
+        [attr: string]: string;
+    };
+}
+interface MarkdownPropsType {
+    className?: string;
+    children: string;
+    tagAttrs?: TagAttributesType;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+}
+
+interface TextPropsType {
+    className?: string;
+    text: string;
+    type?: "text";
+    data?: DataAttributeType;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    tagAttrs?: TagAttributesType;
+}
+
+declare const Text: (props: TextPropsType) => React$1.JSX.Element;
+
+declare const TextArea: ({ label, ...props }: any) => React$1.JSX.Element;
+
+interface TitlePropsType {
+    className?: string;
+    title: string;
+    type?: "title";
+    data?: DataAttributeType;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+}
+
+declare const Title: (props: TitlePropsType) => React$1.JSX.Element;
+
+interface ButtonPropsType extends ButtonType {
+    className?: string;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+declare const Button: React$1.FC<ButtonPropsType>;
+
+interface viewPortType {
+    slides: number;
+    media?: "max-width" | "min-width";
+    gap?: number;
+}
+interface CarouselPropsType {
+    id: string;
+    emblaRef: any;
+    emblaApi?: EmblaCarouselType;
+    slidesPerView: number;
+    slidesPerViewport?: {
+        [screenSize: number]: number | viewPortType;
+    };
+    slides: React.ReactNode[];
+    options?: EmblaOptionsType;
+    showButtons?: boolean;
+    showDots?: boolean;
+    gap?: number;
+    showProgress?: boolean;
+}
+
+declare const Carousel: React$1.FC<CarouselPropsType>;
+
+declare function Markdown({ children, className, tagAttrs, onClick, }: MarkdownPropsType): React$1.JSX.Element;
+
+interface ModalPropsType {
+    modalId: string;
+    className?: string;
+    show: boolean;
+    setShowModal: Function;
+    children: ReactNode;
+}
+
+declare const Modal: ({ modalId, show, className, setShowModal, children, }: ModalPropsType) => React$1.JSX.Element;
+
+interface SpinnerPropsType {
+    className?: string;
+    color?: string;
+    size?: number | string;
+}
+
+declare function Spinner({ color, size, className }: SpinnerPropsType): React$1.JSX.Element;
+
+interface ViewportType {
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+}
+
+declare function UseViewport(): ViewportType;
+
+interface ToastProps {
+    id: string;
+    visible: boolean;
+    message: string | ReactNode;
+    height?: number;
+    position?: ToastPosition;
+    variant: "error" | "info" | "success";
+}
+declare const Toast: FC<ToastProps>;
+
+export { type AnyElementType, type BookingURLType, BookingUrl, Button, type ButtonType, type CachedSearchParamsType, Carousel, Checkbox, CountryPrefix, type DefaultPropsType, type ElementDataType, type ErrorsType, type FileMediaType, type FileType, Form, type FormType, GooglePlaces, type HotelOptionsByCityType, Icon, Image, type ImageMediaType, type ImageType, Input, type InputType, IsMobile, Link, LinkList, type LinkListType, type LinkType, type LocationType, Markdown, type MediaType, Modal, type PageParamsType, SVG, SearchAvailability, type SectionType, Select, type SelectType, Spinner, Text, type TextType, TextArea as Textarea, Title, type TitleType, Toast, type UserType, type VideoMediaType, animateJSX, api_link, cacheSearchParams, cachedSearchParams, classNames, countryPrefixes, deleteUserSession, deviceId, getInputEventValue, getInputHumanValue, getThumb, hotelOptionsByCity, hotel_page_link, human_number, isIOS, joinAddress, join_paths, json_request, loadUserSession, minimumSlides, opentableLink, optimizedThumb, parseQueryParams, preloadImages, pricePerNight, randomString, saveUserSession, scrollToChild, scrollToElement, siteUrl, sp_to_qs, ssoURL, tagExists, toImageElement, toastMsg, tripadvisorRatingURL, UseViewport as useViewport };