ublo-lib 1.24.4 → 1.25.0

package/es/common/components/gesco-contact-form/gesco-contact-form.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import Select, { formatOptions } from "dt-design-system/es/select";
 import Input from "dt-design-system/es/input";
@@ -14,93 +13,246 @@ import * as Form from "./services/form";
 import * as API from "./services/api";
 import * as Plausible from "./services/plausible";
 import styles from "./gesco-contact-form.module.css";
-export default function GescoContactForm({ lang = "fr", channel = "ESF", resort, merchant, categories, facet = "WINTER", host = "https://admin.mon-sejour-en-montagne.com", onSubmit, messagesOverrides = {}, }) {
-    const { params, error } = useParams({
-        lang,
-        channel,
-        resort,
-        merchant,
-        categories,
-        host,
-    });
-    const [submiting, setSubmiting] = React.useState(false);
-    const [stayNeeded, setStayNeeded] = React.useState(false);
-    const [stayMin, setStayMin] = React.useState();
-    const [stayToMin, setStayToMin] = React.useState();
-    const [stayFromMax, setStayFromMax] = React.useState();
-    const [sendSuccess, setSendSuccess] = React.useState(false);
-    const [sendError, setSendError] = React.useState(false);
-    const [formKey, setFormKey] = React.useState(0);
-    React.useEffect(() => {
-        const now = new Date();
-        setStayMin(now.toISOString().split("T")[0]);
-    }, []);
-    const _lang = lang === "fr" ? "fr" : "en";
-    const needCategory = stayNeeded &&
-        params?.categories?.length !== undefined &&
-        params?.categories?.length > 1;
-    const loading = !error && params === undefined;
-    const defaultCategoryValue = stayNeeded && params?.categories?.[0]?.code;
-    const messages = Messages.get(_lang, messagesOverrides);
-    const subjectOptions = formatOptions("label", "id", params?.subjects);
-    const categoryOptions = formatOptions("label", "code", params?.categories);
-    const countryOptions = formatOptions("name", "code", params?.countries);
-    const submitForm = async (e) => {
-        e.preventDefault();
-        setSubmiting(true);
-        setSendSuccess(false);
-        setSendError(false);
-        const form = e.currentTarget;
-        let values = Form.extractValues(form.elements);
-        if (!values.category && defaultCategoryValue) {
-            values = { ...values, category: defaultCategoryValue };
-        }
-        const payload = Form.buildPayload({ lang: _lang, merchant, channel, resort, facet }, values);
-        try {
-            const result = await API.send(host, payload);
-            if (result.error) {
-                throw new Error(result.error);
-            }
-            onSubmit?.(payload);
-            Plausible.sendEvent(values, params);
-            setSendSuccess(true);
-            form.reset();
-            setFormKey(formKey + 1);
-        }
-        catch (e) {
-            // eslint-disable-next-line no-console
-            console.error(e);
-            setSendError(true);
-        }
-        finally {
-            setSubmiting(false);
-        }
-    };
-    const checkIfStayIsNeeded = (value) => {
-        const subject = params?.subjects?.find((s) => String(s.id) === value);
-        setStayNeeded(Boolean(subject?.stay));
-    };
-    const hideSuccess = () => {
-        setSendSuccess(false);
-    };
-    const hideError = () => {
-        setSendError(false);
-    };
-    const updateStayToMin = (value) => {
-        setStayToMin(value);
-    };
-    const updateStayFromMax = (value) => {
-        setStayFromMax(value);
-    };
-    return (_jsxs("form", { className: styles.form, onSubmit: submitForm, children: [_jsx(Select, { name: "subject", label: messages.subject, className: styles.fullWidthField, placeholder: messages.defaultSubject, options: subjectOptions, disabled: Boolean(error) || loading, onValueChange: checkIfStayIsNeeded, required: true }), _jsx(Input, { name: "firstname", type: "text", icon: "User", label: messages.firstname, pattern: ".{2,}", patternError: Messages.format(messages.lengthError, {
-                    label: messages.firstname,
-                    length: "1",
-                }), disabled: Boolean(error) || loading, required: true }), _jsx(Input, { name: "lastname", type: "text", icon: "User", label: messages.lastname, pattern: ".{2,}", patternError: Messages.format(messages.lengthError, {
-                    label: messages.lastname,
-                    length: "1",
-                }), disabled: Boolean(error) || loading, required: true }), _jsx(Input, { name: "email", type: "email", icon: "Mail", label: messages.email, pattern: "[^@\\s]+@[^@\\s]+\\.[^@\\s]+", patternError: messages.emailError, disabled: Boolean(error) || loading, required: true }), _jsxs("div", { className: styles.phoneGroup, children: [_jsx(PhoneCodeSelect, { messages: messages, disabled: Boolean(error) || loading }), _jsx(Input, { name: "phone", type: "phone", className: styles.phoneField, label: messages.phone, inputMode: "numeric", pattern: "[0-9 ]{9,15}$", patternError: messages.phoneError, disabled: Boolean(error) || loading, required: true })] }), _jsx(Select, { name: "country", icon: "Globe", label: messages.country, className: styles.fullWidthField, placeholder: messages.defaultCountry, options: countryOptions, disabled: Boolean(error) || loading, required: true }), needCategory && (_jsx(Select, { name: "category", icon: "Plane", label: messages.category, className: styles.fullWidthField, placeholder: messages.defaultCategory, options: categoryOptions, disabled: Boolean(error) || loading, required: true })), stayNeeded && (_jsxs(_Fragment, { children: [_jsx(Input, { name: "stayFrom", className: styles.stayField, type: "date", label: messages.stayFromDate, placeholder: messages.dateFormat, onValueChange: updateStayToMin, hint: stayFromMax, min: stayMin, max: stayFromMax, disabled: Boolean(error) || loading, patternError: Messages.format(messages.mandatoryError, {
-                            label: messages.stayFrom,
-                        }), extended: true, required: true }), _jsx(Input, { name: "stayTo", className: styles.stayField, type: "date", label: messages.stayToDate, placeholder: messages.dateFormat, onValueChange: updateStayFromMax, hint: stayToMin, min: stayToMin || stayMin, disabled: Boolean(error) || loading, patternError: Messages.format(messages.mandatoryError, {
-                            label: messages.stayTo,
-                        }), extended: true, required: true })] })), _jsx(Textarea, { name: "message", className: styles.fullWidthField, label: messages.message, disabled: Boolean(error) || loading, required: true, autoSizing: true }), _jsx("div", { className: styles.send, children: _jsxs(Button, { type: "submit", disabled: Boolean(error) || loading || submiting, children: [submiting ? _jsx(Loader, { className: styles.loader }) : _jsx(Icons.Plane, {}), messages.submit] }) }), sendSuccess && (_jsx(Information, { className: styles.response, type: "success", close: hideSuccess, children: messages.sendSucesss })), sendError && (_jsx(Information, { className: styles.response, type: "error", close: hideError, children: messages.sendError })), error && (_jsx(Information, { className: styles.error, type: "warning", children: messages.parametersError }))] }, formKey));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function GescoContactForm({
+  lang = "fr",
+  channel = "ESF",
+  resort,
+  merchant,
+  categories,
+  facet = "WINTER",
+  host = "https://admin.mon-sejour-en-montagne.com",
+  onSubmit,
+  messagesOverrides = {}
+}) {
+  const {
+    params,
+    error
+  } = useParams({
+    lang,
+    channel,
+    resort,
+    merchant,
+    categories,
+    host
+  });
+  const [submiting, setSubmiting] = React.useState(false);
+  const [stayNeeded, setStayNeeded] = React.useState(false);
+  const [stayMin, setStayMin] = React.useState();
+  const [stayToMin, setStayToMin] = React.useState();
+  const [stayFromMax, setStayFromMax] = React.useState();
+  const [sendSuccess, setSendSuccess] = React.useState(false);
+  const [sendError, setSendError] = React.useState(false);
+  const [formKey, setFormKey] = React.useState(0);
+  React.useEffect(() => {
+    const now = new Date();
+    setStayMin(now.toISOString().split("T")[0]);
+  }, []);
+  const _lang = lang === "fr" ? "fr" : "en";
+  const needCategory = stayNeeded && params?.categories?.length !== undefined && params?.categories?.length > 1;
+  const loading = !error && params === undefined;
+  const defaultCategoryValue = stayNeeded && params?.categories?.[0]?.code;
+  const messages = Messages.get(_lang, messagesOverrides);
+  const subjectOptions = formatOptions("label", "id", params?.subjects);
+  const categoryOptions = formatOptions("label", "code", params?.categories);
+  const countryOptions = formatOptions("name", "code", params?.countries);
+  const submitForm = async e => {
+    e.preventDefault();
+    setSubmiting(true);
+    setSendSuccess(false);
+    setSendError(false);
+    const form = e.currentTarget;
+    let values = Form.extractValues(form.elements);
+    if (!values.category && defaultCategoryValue) {
+      values = {
+        ...values,
+        category: defaultCategoryValue
+      };
+    }
+    const payload = Form.buildPayload({
+      lang: _lang,
+      merchant,
+      channel,
+      resort,
+      facet
+    }, values);
+    try {
+      const result = await API.send(host, payload);
+      if (result.error) {
+        throw new Error(result.error);
+      }
+      onSubmit?.(payload);
+      Plausible.sendEvent(values, params);
+      setSendSuccess(true);
+      form.reset();
+      setFormKey(formKey + 1);
+    } catch (e) {
+      console.error(e);
+      setSendError(true);
+    } finally {
+      setSubmiting(false);
+    }
+  };
+  const checkIfStayIsNeeded = value => {
+    const subject = params?.subjects?.find(s => String(s.id) === value);
+    setStayNeeded(Boolean(subject?.stay));
+  };
+  const hideSuccess = () => {
+    setSendSuccess(false);
+  };
+  const hideError = () => {
+    setSendError(false);
+  };
+  const updateStayToMin = value => {
+    setStayToMin(value);
+  };
+  const updateStayFromMax = value => {
+    setStayFromMax(value);
+  };
+  return _jsxs("form", {
+    className: styles.form,
+    onSubmit: submitForm,
+    children: [_jsx(Select, {
+      name: "subject",
+      label: messages.subject,
+      className: styles.fullWidthField,
+      placeholder: messages.defaultSubject,
+      options: subjectOptions,
+      disabled: Boolean(error) || loading,
+      onValueChange: checkIfStayIsNeeded,
+      required: true
+    }), _jsx(Input, {
+      name: "firstname",
+      type: "text",
+      icon: "User",
+      label: messages.firstname,
+      pattern: ".{2,}",
+      patternError: Messages.format(messages.lengthError, {
+        label: messages.firstname,
+        length: "1"
+      }),
+      disabled: Boolean(error) || loading,
+      required: true
+    }), _jsx(Input, {
+      name: "lastname",
+      type: "text",
+      icon: "User",
+      label: messages.lastname,
+      pattern: ".{2,}",
+      patternError: Messages.format(messages.lengthError, {
+        label: messages.lastname,
+        length: "1"
+      }),
+      disabled: Boolean(error) || loading,
+      required: true
+    }), _jsx(Input, {
+      name: "email",
+      type: "email",
+      icon: "Mail",
+      label: messages.email,
+      pattern: "[^@\\s]+@[^@\\s]+\\.[^@\\s]+",
+      patternError: messages.emailError,
+      disabled: Boolean(error) || loading,
+      required: true
+    }), _jsxs("div", {
+      className: styles.phoneGroup,
+      children: [_jsx(PhoneCodeSelect, {
+        messages: messages,
+        disabled: Boolean(error) || loading
+      }), _jsx(Input, {
+        name: "phone",
+        type: "phone",
+        className: styles.phoneField,
+        label: messages.phone,
+        inputMode: "numeric",
+        pattern: "[0-9 ]{9,15}$",
+        patternError: messages.phoneError,
+        disabled: Boolean(error) || loading,
+        required: true
+      })]
+    }), _jsx(Select, {
+      name: "country",
+      icon: "Globe",
+      label: messages.country,
+      className: styles.fullWidthField,
+      placeholder: messages.defaultCountry,
+      options: countryOptions,
+      disabled: Boolean(error) || loading,
+      required: true
+    }), needCategory && _jsx(Select, {
+      name: "category",
+      icon: "Plane",
+      label: messages.category,
+      className: styles.fullWidthField,
+      placeholder: messages.defaultCategory,
+      options: categoryOptions,
+      disabled: Boolean(error) || loading,
+      required: true
+    }), stayNeeded && _jsxs(_Fragment, {
+      children: [_jsx(Input, {
+        name: "stayFrom",
+        className: styles.stayField,
+        type: "date",
+        label: messages.stayFromDate,
+        placeholder: messages.dateFormat,
+        onValueChange: updateStayToMin,
+        hint: stayFromMax,
+        min: stayMin,
+        max: stayFromMax,
+        disabled: Boolean(error) || loading,
+        patternError: Messages.format(messages.mandatoryError, {
+          label: messages.stayFrom
+        }),
+        extended: true,
+        required: true
+      }), _jsx(Input, {
+        name: "stayTo",
+        className: styles.stayField,
+        type: "date",
+        label: messages.stayToDate,
+        placeholder: messages.dateFormat,
+        onValueChange: updateStayFromMax,
+        hint: stayToMin,
+        min: stayToMin || stayMin,
+        disabled: Boolean(error) || loading,
+        patternError: Messages.format(messages.mandatoryError, {
+          label: messages.stayTo
+        }),
+        extended: true,
+        required: true
+      })]
+    }), _jsx(Textarea, {
+      name: "message",
+      className: styles.fullWidthField,
+      label: messages.message,
+      disabled: Boolean(error) || loading,
+      required: true,
+      autoSizing: true
+    }), _jsx("div", {
+      className: styles.send,
+      children: _jsxs(Button, {
+        type: "submit",
+        disabled: Boolean(error) || loading || submiting,
+        children: [submiting ? _jsx(Loader, {
+          className: styles.loader
+        }) : _jsx(Icons.Plane, {}), messages.submit]
+      })
+    }), sendSuccess && _jsx(Information, {
+      className: styles.response,
+      type: "success",
+      close: hideSuccess,
+      children: messages.sendSucesss
+    }), sendError && _jsx(Information, {
+      className: styles.response,
+      type: "error",
+      close: hideError,
+      children: messages.sendError
+    }), error && _jsx(Information, {
+      className: styles.error,
+      type: "warning",
+      children: messages.parametersError
+    })]
+  }, formKey);
+}

package/es/common/components/gesco-contact-form/hooks/use-params.js

@@ -1,24 +1,39 @@
 import * as React from "react";
 import * as API from "../services/api";
 export default function useParams(args) {
-    const [params, setParams] = React.useState();
-    const [error, setError] = React.useState();
-    const { lang, resort, merchant, channel, categories, host } = args;
-    React.useEffect(() => {
-        const runEffect = async () => {
-            try {
-                const payload = { lang, channel, resort, merchant, categories };
-                const result = await API.getParams(host, payload);
-                if (!result || result.error) {
-                    throw new Error(result.error);
-                }
-                setParams(result);
-            }
-            catch (error) {
-                setError(error);
-            }
+  const [params, setParams] = React.useState();
+  const [error, setError] = React.useState();
+  const {
+    lang,
+    resort,
+    merchant,
+    channel,
+    categories,
+    host
+  } = args;
+  React.useEffect(() => {
+    const runEffect = async () => {
+      try {
+        const payload = {
+          lang,
+          channel,
+          resort,
+          merchant,
+          categories
         };
-        runEffect();
-    }, [categories, channel, host, lang, merchant, resort]);
-    return { params, error };
-}
+        const result = await API.getParams(host, payload);
+        if (!result || result.error) {
+          throw new Error(result.error);
+        }
+        setParams(result);
+      } catch (error) {
+        setError(error);
+      }
+    };
+    runEffect();
+  }, [categories, channel, host, lang, merchant, resort]);
+  return {
+    params,
+    error
+  };
+}

package/es/common/components/gesco-contact-form/index.js

@@ -1,2 +1,2 @@
 import GescoContactForm from "./gesco-contact-form";
-export default GescoContactForm;
+export default GescoContactForm;

package/es/common/components/gesco-contact-form/phone-code-select.js

@@ -1,61 +1,81 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import Select from "dt-design-system/es/custom-select";
 import * as Flags from "dt-design-system/es/flags";
 import prefixes from "./data/phone-prefixes.json";
 import styles from "./phone-code-select.module.css";
-const HIGHLIGHTED_COUNTRIES = [
-    "France",
-    "United Kingdom",
-    "Belgium",
-    "Netherlands",
-    "Switzerland",
-    "United States",
-    "Luxembourg",
-    "Ireland",
-    "Spain",
-    "Brazil",
-    "Germany",
-    "Italy",
-    "Portugal",
-    "Australia",
-];
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const HIGHLIGHTED_COUNTRIES = ["France", "United Kingdom", "Belgium", "Netherlands", "Switzerland", "United States", "Luxembourg", "Ireland", "Spain", "Brazil", "Germany", "Italy", "Portugal", "Australia"];
 const FIRST_PREFIX = prefixes[0];
-export default function PhoneCodeSelect({ messages, disabled }) {
-    const defaultValue = `${FIRST_PREFIX.country}|${FIRST_PREFIX.code}`;
-    const deduppedPrefixes = prefixes
-        .reduce((acc, prefix) => {
-        const { code } = prefix;
-        const splitted = code
-            .split(", ")
-            .map((splitted) => ({ ...prefix, code: splitted }));
-        return [...acc, ...splitted];
-    }, [])
-        .sort((a, b) => {
-        if (HIGHLIGHTED_COUNTRIES.includes(a.country) ||
-            HIGHLIGHTED_COUNTRIES.includes(b.country)) {
-            return 0;
-        }
-        return a.code.localeCompare(b.code);
-    });
-    const bareOptions = deduppedPrefixes.map(({ country, code, iso }) => {
-        const Icon = Flags[iso.toLowerCase()] || "svg";
-        return {
-            label: (_jsxs("span", { className: styles.option, children: [_jsx(Icon, { className: styles.icon }), _jsxs("span", { className: styles.code, children: ["+", code] })] })),
-            value: `${country}|${code}`,
-            kind: "item",
-        };
-    });
-    const separator = { kind: "separator" };
-    const { highlighted, others } = bareOptions.reduce((acc, option) => {
-        const { value } = option;
-        const [country] = value.split("|");
-        const isHighlighted = HIGHLIGHTED_COUNTRIES.includes(country);
-        const key = isHighlighted ? "highlighted" : "others";
-        return {
-            ...acc,
-            [key]: [...acc[key], option],
-        };
-    }, { highlighted: [], others: [] });
-    const options = [...highlighted, separator, ...others];
-    return (_jsx(Select, { name: "phoneCode", className: styles.select, label: messages.phoneCode, options: options, defaultValue: defaultValue, disabled: disabled, required: true }));
-}
+export default function PhoneCodeSelect({
+  messages,
+  disabled
+}) {
+  const defaultValue = `${FIRST_PREFIX.country}|${FIRST_PREFIX.code}`;
+  const deduppedPrefixes = prefixes.reduce((acc, prefix) => {
+    const {
+      code
+    } = prefix;
+    const splitted = code.split(", ").map(splitted => ({
+      ...prefix,
+      code: splitted
+    }));
+    return [...acc, ...splitted];
+  }, []).sort((a, b) => {
+    if (HIGHLIGHTED_COUNTRIES.includes(a.country) || HIGHLIGHTED_COUNTRIES.includes(b.country)) {
+      return 0;
+    }
+    return a.code.localeCompare(b.code);
+  });
+  const bareOptions = deduppedPrefixes.map(({
+    country,
+    code,
+    iso
+  }) => {
+    const Icon = Flags[iso.toLowerCase()] || "svg";
+    return {
+      label: _jsxs("span", {
+        className: styles.option,
+        children: [_jsx(Icon, {
+          className: styles.icon
+        }), _jsxs("span", {
+          className: styles.code,
+          children: ["+", code]
+        })]
+      }),
+      value: `${country}|${code}`,
+      kind: "item"
+    };
+  });
+  const separator = {
+    kind: "separator"
+  };
+  const {
+    highlighted,
+    others
+  } = bareOptions.reduce((acc, option) => {
+    const {
+      value
+    } = option;
+    const [country] = value.split("|");
+    const isHighlighted = HIGHLIGHTED_COUNTRIES.includes(country);
+    const key = isHighlighted ? "highlighted" : "others";
+    return {
+      ...acc,
+      [key]: [...acc[key], option]
+    };
+  }, {
+    highlighted: [],
+    others: []
+  });
+  const options = [...highlighted, separator, ...others];
+  return _jsx(Select, {
+    name: "phoneCode",
+    className: styles.select,
+    label: messages.phoneCode,
+    options: options,
+    defaultValue: defaultValue,
+    disabled: disabled,
+    required: true
+  });
+}

package/es/common/components/gesco-contact-form/services/api.js

@@ -1,12 +1,11 @@
-// import * as Fetcher from "ublo-lib/es/common/utils/fetcher";
 import * as Fetcher from "../../../utils/fetcher";
 export async function getParams(host, payload) {
-    const endpoint = `${host}/api/gesco/contact/parameters`;
-    const result = await Fetcher.post(endpoint, payload);
-    return result;
+  const endpoint = `${host}/api/gesco/contact/parameters`;
+  const result = await Fetcher.post(endpoint, payload);
+  return result;
 }
 export async function send(host, payload) {
-    const endpoint = `${host}/api/gesco/contact/send`;
-    const result = await Fetcher.post(endpoint, payload);
-    return result;
-}
+  const endpoint = `${host}/api/gesco/contact/send`;
+  const result = await Fetcher.post(endpoint, payload);
+  return result;
+}

package/es/common/components/gesco-contact-form/services/form.js

@@ -1,28 +1,42 @@
 export function extractValues(elements) {
-    return Array.from(elements).reduce((acc, element) => {
-        // exclude submit button
-        if (element instanceof HTMLButtonElement) {
-            return acc;
-        }
-        const { name, value } = element;
-        // ignore hidden inputs
-        if (!name) {
-            return acc;
-        }
-        // merge phone code and phone number + cleanup
-        if (name === "phone") {
-            const phoneWithoutZero = value.replace(/\b0+/g, "");
-            const phoneWithoutSpacesAndDots = phoneWithoutZero.replace(/[\s.]+/g, "");
-            const phoneCode = acc.phoneCode || "";
-            const [, code] = phoneCode.split("|");
-            const phoneWithCode = `+${code}${phoneWithoutSpacesAndDots}`;
-            delete acc.phoneCode;
-            return { ...acc, phone: phoneWithCode };
-        }
-        return { ...acc, [name]: value };
-    }, {});
+  return Array.from(elements).reduce((acc, element) => {
+    if (element instanceof HTMLButtonElement) {
+      return acc;
+    }
+    const {
+      name,
+      value
+    } = element;
+    if (!name) {
+      return acc;
+    }
+    if (name === "phone") {
+      const phoneWithoutZero = value.replace(/\b0+/g, "");
+      const phoneWithoutSpacesAndDots = phoneWithoutZero.replace(/[\s.]+/g, "");
+      const phoneCode = acc.phoneCode || "";
+      const [, code] = phoneCode.split("|");
+      const phoneWithCode = `+${code}${phoneWithoutSpacesAndDots}`;
+      delete acc.phoneCode;
+      return {
+        ...acc,
+        phone: phoneWithCode
+      };
+    }
+    return {
+      ...acc,
+      [name]: value
+    };
+  }, {});
 }
 export function buildPayload(params, values) {
-    const { userAgent, language: browserLang } = navigator || {};
-    return { ...params, ...values, userAgent, browserLang };
-}
+  const {
+    userAgent,
+    language: browserLang
+  } = navigator || {};
+  return {
+    ...params,
+    ...values,
+    userAgent,
+    browserLang
+  };
+}