ublo-lib 1.10.29 → 1.11.1

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

@@ -87,13 +87,18 @@ const CustomContactForm = ({
   React.useEffect(() => {
     if (!ready && !settings) {
       const init = async () => {
+        if (typeof customSend === "function") {
+          setReady(true);
+          setSettings({});
+          return;
+        }
         const formSettings = await getSettings(site);
         setSettings(formSettings);
         setReady(true);
       };
       init();
     }
-  }, [ready, settings, site]);
+  }, [customSend, ready, settings, site]);
   React.useEffect(() => {
     setData(getInitialFormState(fields, presets?.values));
   }, [fields, presets?.values]);

package/es/common/hooks/use-tunnel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-tunnel.d.ts","sourceRoot":"","sources":["../../../src/common/hooks/use-tunnel.ts"],"names":[],"mappings":"AAKA,aAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,OAAe,EACf,gBAAgB,EAChB,WAAW,GACZ,GAAE,KAAU,QA0BZ"}
+{"version":3,"file":"use-tunnel.d.ts","sourceRoot":"","sources":["../../../src/common/hooks/use-tunnel.ts"],"names":[],"mappings":"AAMA,aAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAMF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,OAAe,EACf,gBAAgB,EAChB,WAAW,GACZ,GAAE,KAAU,QA0BZ"}

package/es/common/hooks/use-tunnel.js

@@ -1,29 +1,32 @@
-import { useEffect } from "react";
+import * as React from "react";
+import getConfig from "next/config";
 import { useUbloContext } from "ublo/with-ublo";
 import * as Plausible from "../components/plausible";
 import { loadJS } from "../utils/load-js";
+const { publicRuntimeConfig } = getConfig();
+const { langPrefix, resort } = publicRuntimeConfig;
+const hasLangPrefix = langPrefix.links;
 export default function useTunnel({ channel = "ESF", multipleVillages, integration, } = {}) {
-    const { lang, breadcrumb, config } = useUbloContext();
+    const { lang, breadcrumb } = useUbloContext();
     const { path: esfPath } = multipleVillages ? breadcrumb?.next : breadcrumb;
-    const { langPrefix } = config;
-    const hasLangPrefix = langPrefix.links;
-    const esfUrl = hasLangPrefix ? `/${lang.concat(esfPath)}` : esfPath;
-    const widgetLang = lang === "fr" ? "fr" : "en";
-    useEffect(() => {
-        const run = async () => {
+    const widgetLang = React.useMemo(() => (lang === "fr" ? "fr" : "en"), [lang]);
+    const esfUrl = React.useMemo(() => (hasLangPrefix ? `/${lang.concat(esfPath)}` : esfPath), [esfPath, lang]);
+    React.useEffect(() => {
+        const startTunnel = async () => {
             await loadWigetMseM(integration);
-            const open = () => window.MseM.tunnel({
-                channel,
-                resort: config.resort,
-                groundedTo: "#esfplus_container",
-                lang: widgetLang,
-                esfUrl,
-                analytics: Plausible.callback,
+            window.MseM.onLoad(() => {
+                window.MseM.tunnel({
+                    channel,
+                    resort,
+                    groundedTo: "#esfplus_container",
+                    lang: widgetLang,
+                    esfUrl,
+                    analytics: Plausible.callback,
+                });
             });
-            window.MseM.onLoad(open);
         };
-        run();
-    }, [channel, config.resort, esfUrl, lang, widgetLang]);
+        startTunnel();
+    }, [channel, esfUrl, integration, widgetLang]);
 }
 async function loadWigetMseM(integration) {
     const source = integration

package/es/esf/components/instructors-book-v2/api.js

@@ -0,0 +1,36 @@
+import getConfig from "next/config";
+const {
+  publicRuntimeConfig
+} = getConfig();
+const {
+  resort
+} = publicRuntimeConfig;
+const host = "https://instructors-book-server.carnet-rouge-esf.com";
+const authorization = "00q2qa545018261l252gg3414t3qa2";
+const fetcher = async (url, body) => {
+  const res = await fetch(url, {
+    method: "POST",
+    headers: {
+      "content-type": "application/json;charset=utf-8",
+      Authorization: authorization,
+      schoolcode: resort
+    },
+    body: body ? JSON.stringify(body) : undefined
+  });
+  return res.json();
+};
+export async function fetchInstructors(lang, body = {}) {
+  return fetcher(`${host}/api/instructors-book/${resort}/${lang}`, {
+    ...body,
+    project: true
+  });
+}
+export async function fetchInstructor(lang, uri) {
+  return fetcher(`${host}/api/instructors-book/${resort}/${lang}/${uri}`);
+}
+export const fetchRandomInstructors = async (lang, tags, nbInstructor) => {
+  return fetcher(`${host}/api/instructors-book/${resort}/${lang}/byTags`, {
+    tags,
+    size: nbInstructor
+  });
+};

package/es/esf/components/instructors-book-v2/book.js

@@ -0,0 +1,81 @@
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import Filters from "./filters";
+import List from "./list";
+import * as API from "./api";
+import * as Utils from "./utils";
+import css from "./book.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Book({
+  instructors,
+  trombi
+}) {
+  const {
+    lang
+  } = useUbloContext();
+  const [context, setContext] = React.useState(instructors);
+  const [activity, setActivity] = React.useState("");
+  const [language, setLanguage] = React.useState("");
+  const [search, setSearch] = React.useState("");
+  const [loading, setLoading] = React.useState(false);
+  const refreshContext = React.useCallback(async () => {
+    try {
+      setLoading(true);
+      const newContext = await API.fetchInstructors(lang, {
+        activity,
+        language
+      });
+      setContext(newContext);
+    } catch (e) {
+      console.info("error while refreshing instructor context", e);
+    } finally {
+      setLoading(false);
+    }
+  }, [activity, lang, language]);
+  const updateFilter = React.useCallback(name => async value => {
+    if (name === "search") {
+      return setSearch(value);
+    }
+    if (name === "activity") {
+      setActivity(value);
+      window.sessionStorage.setItem("activity", value);
+    }
+    if (name === "language") {
+      setLanguage(value);
+      window.sessionStorage.setItem("language", value);
+    }
+  }, []);
+  React.useEffect(() => {
+    const {
+      activity,
+      language
+    } = Utils.propsFromQueryString();
+    const storedActivity = window.sessionStorage.getItem("activity") || activity;
+    if (storedActivity) {
+      updateFilter("activity")(storedActivity);
+    }
+    const storedLanguage = window.sessionStorage.getItem("language") || language;
+    if (storedLanguage) {
+      updateFilter("language")(storedLanguage);
+    }
+  }, [updateFilter]);
+  React.useEffect(() => {
+    refreshContext();
+  }, [activity, language, refreshContext]);
+  return _jsxs("div", {
+    className: css.book,
+    children: [_jsx(Filters, {
+      context: context,
+      search: search,
+      activity: activity,
+      language: language,
+      updateFilter: updateFilter,
+      loading: loading
+    }), _jsx(List, {
+      search: search,
+      instructors: context.instructors,
+      trombi: trombi
+    })]
+  });
+}

package/es/esf/components/instructors-book-v2/book.module.css

@@ -0,0 +1,4 @@
+.book {
+  display: flex;
+  flex-direction: column;
+}

package/es/esf/components/instructors-book-v2/filters.js

@@ -0,0 +1,62 @@
+import * as React from "react";
+import css from "./filters.module.css";
+import Input from "dt-design-system/es/input";
+import Select from "dt-design-system/es/select";
+import { useUbloContext } from "ublo/with-ublo";
+import { message } from "./messages";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Filters({
+  context,
+  search,
+  activity,
+  language,
+  updateFilter,
+  loading
+}) {
+  const {
+    lang
+  } = useUbloContext();
+  const {
+    activities,
+    languages
+  } = context;
+  const formatedActivities = ["", ...activities.map(({
+    code,
+    label
+  }) => ({
+    label,
+    value: code
+  }))];
+  const formatedLanguages = ["", ...languages.map(({
+    code,
+    label
+  }) => ({
+    label,
+    value: code
+  }))];
+  return _jsxs("div", {
+    className: css.container,
+    children: [_jsx(Input, {
+      icon: "Search",
+      label: message(lang, "search-label"),
+      placeholder: message(lang, "search-placeholder"),
+      value: search,
+      onValueChange: updateFilter("search")
+    }), _jsx(Select, {
+      icon: "Filter",
+      label: message(lang, "activity-label"),
+      value: activity,
+      options: formatedActivities,
+      onValueChange: updateFilter("activity"),
+      loading: loading
+    }), _jsx(Select, {
+      icon: "Globe",
+      label: message(lang, "language-label"),
+      value: language,
+      options: formatedLanguages,
+      onValueChange: updateFilter("language"),
+      loading: loading
+    })]
+  });
+}

package/es/esf/components/instructors-book-v2/filters.module.css

@@ -0,0 +1,17 @@
+.container {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin: 10px 0;
+}
+
+.container > * {
+  flex: 1 1 auto;
+}
+
+@media (min-width: 690px) {
+  .container > * {
+    flex: 0 0 auto;
+  }
+}

package/es/esf/components/instructors-book-v2/flags.js

@@ -0,0 +1,248 @@
+import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SVG = ({
+  title,
+  ...props
+}) => _jsxs("svg", {
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [title && _jsx("title", {
+    children: title
+  }), props.children]
+});
+const ArFlag = props => _jsxs(SVG, {
+  ...props,
+  children: [_jsx("path", {
+    d: "M0 3h24v6H0V3z",
+    fill: "#000"
+  }), _jsx("path", {
+    d: "M0 9h24v6H0V9z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M0 15h24v6H0v-6z",
+    fill: "#00732F"
+  })]
+});
+const CnFlag = props => _jsxs(SVG, {
+  ...props,
+  children: [_jsx("path", {
+    d: "M0 3h24v18H0V3z",
+    fill: "#DE2910"
+  }), _jsx("path", {
+    d: "M2.91 9.69L4.5 4.8l1.59 4.89-4.16-3.03h5.14L2.91 9.7zM9.9 4.88l-1.66.38 1.12-1.29-.15 1.7-.88-1.46 1.58.67zM11.6 7.01l-1.7-.3 1.55-.74-.8 1.51-.25-1.7 1.2 1.23zM11.35 10.01l-1.42-.96L11.64 9l-1.35 1.06.48-1.65.58 1.61zM9.24 11.97l-.95-1.43 1.6.6-1.65.46 1.08-1.34-.08 1.71z",
+    fill: "#FFDE00"
+  })]
+});
+const DeFlag = props => _jsxs(SVG, {
+  ...props,
+  children: [_jsx("path", {
+    d: "M0 15h24v6H0v-6z",
+    fill: "#FFCE00"
+  }), _jsx("path", {
+    d: "M0 3h24v6H0V3z",
+    fill: "#000"
+  }), _jsx("path", {
+    d: "M0 9h24v6H0V9z",
+    fill: "#D00"
+  })]
+});
+const DkFlag = props => _jsxs(SVG, {
+  ...props,
+  children: [_jsx("path", {
+    d: "M0 3h24v18H0V3z",
+    fill: "#C60C30"
+  }), _jsx("path", {
+    d: "M7.7 3h2.6v18H7.7V3z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M0 10.7h24v2.6H0v-2.6z",
+    fill: "#fff"
+  })]
+});
+const EsFlag = props => _jsxs(SVG, {
+  ...props,
+  children: [_jsx("path", {
+    d: "M0 3h24v18H0V3z",
+    fill: "#C60B1E"
+  }), _jsx("path", {
+    d: "M0 7.5h24v9H0v-9z",
+    fill: "#FFC400"
+  })]
+});
+const FrFlag = props => _jsxs(SVG, {
+  ...props,
+  children: [_jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 3h24v18H0V3z",
+    fill: "#fff"
+  }), _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 3h8v18H0V3z",
+    fill: "#00267F"
+  }), _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 3h8v18h-8V3z",
+    fill: "#F31830"
+  })]
+});
+const EnFlag = props => _jsxs(SVG, {
+  ...props,
+  children: [_jsx("path", {
+    d: "M-6 3h36v18H-6V3z",
+    fill: "#006"
+  }), _jsx("path", {
+    d: "M-6 3v2l32 16h4v-2L-2 3h-4zm36 0v2L-2 21h-4v-2L26 3h4z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M9 3v18h6V3H9zM-6 9v6h36V9H-6z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M-6 10.2v3.6h36v-3.6H-6zM10.2 3v18h3.6V3h-3.6zM-7 21l11-6h3l-11 6h-3zm1-18.5L7 9H4.5L-6 4V2.5zM16.5 9l12-6H31L19 9h-2.5zM30 21.5L17 15h3l10 5v1.5z",
+    fill: "#C00"
+  })]
+});
+const IlFlag = props => _jsxs(SVG, {
+  ...props,
+  children: [_jsx("path", {
+    d: "M25 21H-1V3H25v18z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M25 7H-1V4.8H25V7zm0 12.4H-1V17H25v2.4zM7.8 9.7l3.9 6.8 4-6.7h-8z",
+    fill: "#00C"
+  }), _jsx("path", {
+    d: "M11 14.2l.8 1.3.7-1.3H11z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M7.9 14.3l3.9-6.8 4 6.8h-8z",
+    fill: "#00C"
+  }), _jsx("path", {
+    d: "M11 9.8l.8-1.3.7 1.2H11zm-1.5 2.8l-.8 1.2h1.5l-.7-1.2zm-.8-2.4h1.5l-.7 1.3-.8-1.3zm5.4 2.4l.7 1.2h-1.5l.8-1.2zm.7-2.4h-1.5l.7 1.3.8-1.3zm-4 0l-1 1.8 1 1.8h1.8l1.2-1.8-1-1.8h-2z",
+    fill: "#fff"
+  })]
+});
+const ItFlag = props => _jsxs(SVG, {
+  ...props,
+  children: [_jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 3h24v18H0V3z",
+    fill: "#fff"
+  }), _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 3h8v18H0V3z",
+    fill: "#009246"
+  }), _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 3h8v18h-8V3z",
+    fill: "#CE2B37"
+  })]
+});
+const JpFlag = props => _jsxs(SVG, {
+  ...props,
+  children: [_jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M-1.5 3h27v18h-27V3z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M12 17.6a5.6 5.6 0 100-11.2 5.6 5.6 0 000 11.2z",
+    fill: "#D30000"
+  })]
+});
+const NlFlag = props => _jsxs(SVG, {
+  ...props,
+  children: [_jsx("path", {
+    d: "M24 3H0v18h24V3z",
+    fill: "#fff"
+  }), _jsx("path", {
+    d: "M24 15H0v6h24v-6z",
+    fill: "#21468B"
+  }), _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 3h24v6H0V3z",
+    fill: "#AE1C28"
+  })]
+});
+const PlFlag = props => _jsxs(SVG, {
+  ...props,
+  children: [_jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 21H0V3h24v18z",
+    fill: "#fff"
+  }), _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M24 21H0v-9h24v9z",
+    fill: "#DC143C"
+  })]
+});
+const PtFlag = props => _jsxs(SVG, {
+  ...props,
+  children: [_jsx("path", {
+    d: "M9.6 3H24v18H9.6V3z",
+    fill: "red"
+  }), _jsx("path", {
+    d: "M0 3h9.6v18H0V3z",
+    fill: "#060"
+  })]
+});
+const RuFlag = props => _jsxs(SVG, {
+  ...props,
+  children: [_jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 3h24v18H0V3z",
+    fill: "#fff"
+  }), _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 9h24v12H0V9z",
+    fill: "#0039A6"
+  }), _jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 15h24v6H0v-6z",
+    fill: "#D52B1E"
+  })]
+});
+const SeFlag = props => _jsxs(SVG, {
+  ...props,
+  children: [_jsx("path", {
+    d: "M-2.4 3h9v7.2h-9V3zm0 10.8h9V21h-9v-7.2z",
+    fill: "#006AA7"
+  }), _jsx("path", {
+    d: "M-2.4 10.2h9v3.6h-9v-3.6zM6.6 3h3.6v18H6.6V3z",
+    fill: "#FECC00"
+  }), _jsx("path", {
+    d: "M10 10.2h16.3v3.6H10v-3.6z",
+    fill: "#FECC00"
+  }), _jsx("path", {
+    d: "M10.2 13.8h16.2V21H10.2v-7.2zm0-10.8h16.2v7.2H10.2V3z",
+    fill: "#006AA7"
+  })]
+});
+export const flags = {
+  ar: ArFlag,
+  cn: CnFlag,
+  de: DeFlag,
+  dk: DkFlag,
+  en: EnFlag,
+  es: EsFlag,
+  fr: FrFlag,
+  il: IlFlag,
+  it: ItFlag,
+  jp: JpFlag,
+  nl: NlFlag,
+  pl: PlFlag,
+  pt: PtFlag,
+  ru: RuFlag,
+  se: SeFlag
+};

package/es/esf/components/instructors-book-v2/index.js

@@ -0,0 +1,6 @@
+import * as API from "./api";
+import Book from "./book";
+import Sheet from "./sheet";
+import Suggestions from "./suggestions";
+import config from "./config";
+export { Book, Sheet, Suggestions, API, config };

package/es/esf/components/instructors-book-v2/instructor.js

@@ -0,0 +1,112 @@
+import * as React from "react";
+import Image from "next/image";
+import Link from "ublo/link";
+import { useUbloContext } from "ublo/with-ublo";
+import Dialog from "dt-design-system/es/dialog";
+import * as Icons from "dt-design-system/es/icons";
+import Sheet from "./sheet";
+import * as Utils from "./utils";
+import prefixes from "./prefixes";
+import css from "./instructor.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Instructor({
+  instructor,
+  formFields,
+  formSendFunction,
+  trombi,
+  popup
+}) {
+  const {
+    lang
+  } = useUbloContext();
+  const {
+    firstname,
+    lastname,
+    photo,
+    uri
+  } = instructor;
+  const [loading, setLoading] = React.useState(true);
+  const [picture, setPicture] = React.useState(photo);
+  const [popupOpened, setPopupOpened] = React.useState(false);
+  const prefixLang = lang === "fr" ? "fr" : "en";
+  const openPopup = async e => {
+    if (!popup) return;
+    e.preventDefault();
+    setPopupOpened(true);
+  };
+  const closePopup = () => {
+    setPopupOpened(false);
+  };
+  const Tag = trombi ? "div" : Link;
+  const divProps = {};
+  const linkProps = {
+    href: `${prefixes[prefixLang]}/${uri}`,
+    onClick: openPopup
+  };
+  const props = trombi ? divProps : linkProps;
+  const stopLoading = () => {
+    setLoading(false);
+  };
+  const setFallbackPicture = ({
+    currentTarget
+  }) => {
+    setPicture(null);
+    stopLoading();
+    currentTarget.onerror = null;
+  };
+  return _jsxs(_Fragment, {
+    children: [_jsxs(Tag, {
+      className: css.card,
+      ...props,
+      children: [_jsx("div", {
+        className: css.imageContainer,
+        children: picture ? _jsxs(_Fragment, {
+          children: [loading && _jsx(Icons.Loader2, {
+            className: css.imageLoader
+          }), _jsx(Image, {
+            loading: "lazy",
+            src: picture,
+            className: css.image,
+            alt: `${firstname} ${lastname}`,
+            onLoad: stopLoading,
+            onError: setFallbackPicture,
+            width: "190",
+            height: "190"
+          })]
+        }) : _jsx("div", {
+          className: css.imagePlaceholder,
+          children: _jsx(Icons.User, {
+            className: css.imagePlaceholderIcon
+          })
+        })
+      }), _jsx("div", {
+        className: css.information,
+        children: _jsxs("div", {
+          className: css.name,
+          children: [_jsxs("span", {
+            className: css.firstName,
+            children: [Utils.formatNames(firstname), " "]
+          }), _jsx("span", {
+            className: css.lastName,
+            children: Utils.formatNames(lastname)
+          })]
+        })
+      })]
+    }), _jsx(Dialog, {
+      isOpened: popupOpened,
+      close: closePopup,
+      onClose: closePopup,
+      children: _jsx("div", {
+        className: css.dialogContent,
+        children: _jsx(Sheet, {
+          instructor: instructor,
+          formFields: formFields,
+          formSendFunction: formSendFunction,
+          popup: true
+        })
+      })
+    })]
+  });
+}

package/es/esf/components/instructors-book-v2/instructor.module.css

@@ -0,0 +1,68 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--ds-radius-200, 10px);
+  background-color: var(--ds-grey-000, #ffffff);
+  box-shadow: var(--ds-shadow-200, 0 5px 10px rgba(0, 0, 0, 0.12));
+}
+
+.imageContainer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 190px;
+  border-bottom: 1px solid var(--ds-grey-100, #f5f5f5);
+  border-radius: var(--ds-radius-200, 10px) var(--ds-radius-200, 10px) 0 0;
+}
+
+.image {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.imageLoader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  fill: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+  animation: image-loader-spinning 1280ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)) infinite;
+}
+
+@keyframes image-loader-spinning {
+  100% {
+    transform: translate(-50%, -50%) rotate(1turn);
+  }
+}
+
+.imagePlaceholder {
+  padding: 16px 22px;
+  background-color: var(--ds-grey-100, #f5f5f5);
+  border-radius: var(--ds-radius-100, 6px);
+}
+
+.imagePlaceholderIcon {
+  width: 34px;
+  height: 34px;
+  fill: var(--ds-grey-300, #d4d4d4);
+}
+
+.information {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+}
+
+.name {
+  text-align: center;
+}
+
+.lastName {
+  font-weight: 700;
+}

package/es/esf/components/instructors-book-v2/list.js

@@ -0,0 +1,47 @@
+import * as React from "react";
+import classNames from "classnames";
+import { useUbloContext } from "ublo/with-ublo";
+import * as Utils from "./utils";
+import Instructor from "./instructor";
+import { message } from "./messages";
+import css from "./list.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function List({
+  search = "",
+  instructors,
+  fromSuggestions,
+  formSendFunction,
+  formFields,
+  trombi,
+  popup
+}) {
+  const {
+    lang
+  } = useUbloContext();
+  const displayedInstructors = fromSuggestions ? instructors : Utils.filter(instructors, search);
+  const listCountMessageCode = displayedInstructors?.length > 1 ? "instructors" : "instructor";
+  const classes = classNames(css.container, {
+    [css.containerSuggestions]: fromSuggestions
+  });
+  return _jsxs("div", {
+    className: classes,
+    children: [!fromSuggestions && _jsxs("div", {
+      className: css.listCount,
+      children: [_jsx("b", {
+        children: displayedInstructors.length
+      }), " ", message(lang, listCountMessageCode)]
+    }), _jsx("div", {
+      className: css.inner,
+      children: displayedInstructors?.map(instructor => {
+        return _jsx(Instructor, {
+          instructor: instructor,
+          trombi: trombi,
+          formFields: formFields,
+          formSendFunction: formSendFunction,
+          popup: popup
+        }, instructor.uri);
+      })
+    })]
+  });
+}

package/es/esf/components/instructors-book-v2/list.module.css

@@ -0,0 +1,18 @@
+.container {
+  margin: 16px 0;
+}
+
+.listCount {
+  font-size: 14px;
+}
+
+.inner {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 26px;
+  padding: 10px 0;
+}
+
+.containerSuggestions .inner {
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+}

package/es/esf/components/instructors-book-v2/messages.js

@@ -0,0 +1,41 @@
+const locales = {
+  fr: {
+    "search-label": "Chercher un moniteur",
+    "search-placeholder": "Nom, prénom...",
+    "activity-label": "Quelle pratique ?",
+    "language-label": "Quelle langue ?",
+    instructors: "moniteurs trouvés",
+    instructor: "moniteur trouvé",
+    activities: "Activités pratiquées",
+    and: "et",
+    languages: "Langues parlées",
+    about: "À propos",
+    contact: "Quand souhaitez-vous skier avec moi ?",
+    "suggestions-title": "Les moniteurs qui vous proposent ce cours",
+    "suggestions-button": "Voir tous les moniteurs",
+    "see-more": "Voir plus",
+    "go-back": "Retour"
+  },
+  en: {
+    "search-label": "Search an instructor",
+    "search-placeholder": "Lastname, firstname...",
+    "activity-label": "Which activity?",
+    "language-label": "Which language?",
+    instructors: "instructors found",
+    instructor: "instructor found",
+    activities: "Activities",
+    and: "and",
+    languages: "Spoken languages",
+    about: "About",
+    contact: "When would you like to ski with me?",
+    "suggestions-title": "The instructors who offer you this course",
+    "suggestions-button": "See all instructors",
+    "see-more": "See more",
+    "go-back": "Go back"
+  }
+};
+export const message = (lang, id) => {
+  const locale = lang === "fr" ? "fr" : "en";
+  const messages = locales[locale];
+  return messages[id] || `??${id}??`;
+};

package/es/esf/components/instructors-book-v2/prefixes.js

@@ -0,0 +1,5 @@
+const prefixes = {
+  fr: "/moniteur",
+  en: "/instructor"
+};
+export default prefixes;

package/es/esf/components/instructors-book-v2/sheet.js

@@ -0,0 +1,172 @@
+import * as React from "react";
+import Image from "next/image";
+import classNames from "classnames";
+import { useUbloContext } from "ublo/with-ublo";
+import CustomContactForm from "../../../common/components/custom-contact-form";
+import Button from "dt-design-system/es/button";
+import * as Icons from "dt-design-system/es/icons";
+import * as Utils from "./utils";
+import prefixes from "./prefixes";
+import { message } from "./messages";
+import css from "./sheet.module.css";
+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 Sheet({
+  instructor,
+  popup,
+  formFields,
+  formSendFunction,
+  bookUrl
+}) {
+  const {
+    firstname,
+    lastname,
+    photo,
+    languages,
+    activities,
+    introduction,
+    description,
+    uri
+  } = instructor;
+  const {
+    lang
+  } = useUbloContext();
+  const [loading, setLoading] = React.useState(true);
+  const [picture, setPicture] = React.useState(photo);
+  const prefixLang = lang === "fr" ? "fr" : "en";
+  const stopLoading = () => {
+    setLoading(false);
+  };
+  const setFallbackPicture = ({
+    currentTarget
+  }) => {
+    setPicture(null);
+    stopLoading();
+    currentTarget.onerror = null;
+  };
+  const classes = classNames(css.container, {
+    [css.containerPopup]: popup
+  });
+  return _jsxs("div", {
+    className: classes,
+    children: [_jsxs("div", {
+      className: css.content,
+      children: [!popup && bookUrl && _jsxs(Button, {
+        tag: "a",
+        href: bookUrl,
+        variant: "link",
+        children: [_jsx(Icons.ChevronLeft, {}), message(lang, "go-back")]
+      }), _jsxs("div", {
+        className: css.header,
+        children: [_jsx("div", {
+          className: css.imageContainer,
+          children: picture ? _jsxs(_Fragment, {
+            children: [loading && _jsx(Icons.Loader2, {
+              className: css.imageLoader
+            }), _jsx(Image, {
+              loading: "lazy",
+              src: picture,
+              className: css.image,
+              alt: `${firstname} ${lastname}`,
+              onLoad: stopLoading,
+              onError: setFallbackPicture,
+              width: "190",
+              height: "250"
+            }, uri)]
+          }) : _jsx("div", {
+            className: css.imagePlaceholder,
+            children: _jsx(Icons.User, {
+              className: css.imagePlaceholderIcon
+            })
+          })
+        }), _jsxs("div", {
+          className: css.information,
+          children: [_jsxs("div", {
+            className: css.name,
+            children: [_jsxs("span", {
+              className: css.firstName,
+              children: [Utils.formatNames(firstname), " "]
+            }), _jsx("span", {
+              className: css.lastName,
+              children: Utils.formatNames(lastname)
+            })]
+          }), activities && _jsxs("div", {
+            className: css.activities,
+            children: [_jsx("div", {
+              className: css.activitiesTitle,
+              children: message(lang, "activities")
+            }), _jsx("div", {
+              className: css.activitiesList,
+              children: activities.map((activity, i) => {
+                const {
+                  code,
+                  label
+                } = activity;
+                const length = activities.length;
+                return _jsxs("span", {
+                  className: css.activity,
+                  children: [_jsx("span", {
+                    children: label
+                  }), i < length - 2 ? ", " : i < length - 1 ? ` ${message(lang, "and")} ` : ""]
+                }, code);
+              })
+            })]
+          }), languages && _jsxs("div", {
+            className: css.languages,
+            children: [_jsx("div", {
+              className: css.languagesTitle,
+              children: message(lang, "languages")
+            }), _jsx("div", {
+              className: css.languagesList,
+              children: languages.map((language, i) => {
+                const {
+                  code,
+                  label
+                } = language;
+                const length = languages.length;
+                return _jsxs("span", {
+                  className: css.language,
+                  children: [label, " ", i < length - 1 ? " - " : ""]
+                }, code);
+              })
+            })]
+          })]
+        })]
+      }), !popup && introduction && _jsx("div", {
+        className: css.introduction,
+        dangerouslySetInnerHTML: {
+          __html: introduction
+        }
+      }), description && _jsxs("div", {
+        className: css.description,
+        children: [_jsx("div", {
+          className: css.descriptionTitle,
+          children: message(lang, "about")
+        }), _jsx("div", {
+          className: css.descriptionInner,
+          dangerouslySetInnerHTML: {
+            __html: popup ? Utils.truncate(Utils.sanitizeHTML(description)) : description
+          }
+        }), popup && _jsxs(Button, {
+          tag: "a",
+          href: `${prefixes[prefixLang]}/${uri}`,
+          variant: "secondary",
+          target: "_blank",
+          children: [message(lang, "see-more"), _jsx(Icons.ChevronRight, {})]
+        })]
+      })]
+    }), formFields && formSendFunction && _jsxs("div", {
+      className: css.aside,
+      children: [_jsx("div", {
+        className: css.formTitle,
+        children: message(lang, "contact")
+      }), _jsx(CustomContactForm, {
+        fields: formFields,
+        className: css.form,
+        innerClassName: css.formInner,
+        customSend: formSendFunction(firstname, lastname)
+      })]
+    })]
+  });
+}

package/es/esf/components/instructors-book-v2/sheet.module.css

@@ -0,0 +1,194 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 26px;
+  padding: 26px 0;
+  color: var(--ds-grey-600, #323338);
+}
+
+.containerPopup {
+  max-width: 780px;
+  padding: 16px;
+}
+
+@media (min-width: 910px) {
+  .container:not(.containerPopup) {
+    flex-direction: row;
+  }
+}
+
+.content {
+  flex: 0 1 60%;
+  display: flex;
+  flex-direction: column;
+  gap: 26px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 44px;
+}
+
+.imageContainer {
+  position: relative;
+  width: 190px;
+  height: 250px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid var(--ds-grey-100, #f5f5f5);
+  border-radius: var(--ds-radius-200, 10px);
+}
+
+.image {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.imageLoader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  fill: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+  animation: image-loader-spinning 1280ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)) infinite;
+}
+
+@keyframes image-loader-spinning {
+  100% {
+    transform: translate(-50%, -50%) rotate(1turn);
+  }
+}
+
+.imagePlaceholder {
+  padding: 16px 22px;
+  background-color: var(--ds-grey-100, #f5f5f5);
+  border-radius: var(--ds-radius-100, 6px);
+}
+
+.imagePlaceholderIcon {
+  width: 34px;
+  height: 34px;
+  fill: var(--ds-grey-300, #d4d4d4);
+}
+
+.information {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.name {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 28px;
+  line-height: 1.1;
+}
+
+@media (min-width: 480px) {
+  .name {
+    font-size: 34px;
+  }
+}
+
+@media (min-width: 992px) {
+  .name {
+    font-size: 40px;
+  }
+}
+
+.lastName {
+  font-weight: 700;
+}
+
+.activities,
+.languages {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.activitiesTitle,
+.languagesTitle {
+  font-size: 14px;
+}
+
+.activitiesList,
+.languagesList {
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.introduction {
+  color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+  line-height: 1.45;
+  font-size: 22px;
+  padding: 16px;
+  background-color: var(--ds-grey-100, #f5f5f5);
+  border-radius: var(--ds-radius-100, 6px);
+}
+
+.description {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.descriptionTitle {
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.description hr {
+  opacity: 0;
+}
+
+.descriptionInner {
+  font-size: 15px;
+  text-align: justify;
+  font-weight: 400;
+  line-height: 1.65;
+}
+
+.aside {
+  flex: 1 0 420px;
+  align-self: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin: 0 auto;
+  padding: 16px;
+  border-radius: var(--ds-radius-100, 6px);
+  box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
+}
+
+.containerPopup .aside {
+  flex: auto;
+  align-self: normal;
+  margin: 0;
+  padding: 0;
+  box-shadow: none;
+}
+
+.formTitle {
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.form {
+  padding-bottom: 0;
+}
+
+.formInner {
+  gap: 8px;
+}
+
+.containerPopup .formInner {
+  gap: 16px;
+}

package/es/esf/components/instructors-book-v2/suggestions.js

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import Button from "dt-design-system/es/button";
+import * as Icons from "dt-design-system/es/icons";
+import List from "./list";
+import * as API from "./api";
+import css from "./suggestions.module.css";
+import { message } from "./messages";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Suggestions({
+  bookUrl,
+  popup,
+  formFields,
+  formSendFunction
+}) {
+  const [instructors, setInstructors] = React.useState([]);
+  const {
+    seo,
+    lang
+  } = useUbloContext();
+  const tags = React.useMemo(() => seo && seo.keywords && seo.keywords.trim() !== "" ? seo.keywords.split(",") : undefined, [seo]);
+  React.useEffect(() => {
+    const fetchInstructors = async () => {
+      if (tags) {
+        try {
+          const instructors = await API.fetchRandomInstructors(lang, tags, 6);
+          if (instructors) {
+            setInstructors(instructors);
+          }
+        } catch (e) {
+          setInstructors([]);
+        }
+      }
+    };
+    fetchInstructors();
+  }, [lang, tags]);
+  return _jsxs("div", {
+    className: css.suggestions,
+    children: [_jsxs("div", {
+      className: css.header,
+      children: [_jsx("div", {
+        className: css.headerTitle,
+        children: message(lang, "suggestions-title")
+      }), bookUrl && _jsxs(Button, {
+        tag: "a",
+        href: bookUrl,
+        className: css.headerButton,
+        children: [message(lang, "suggestions-button"), " ", _jsx(Icons.ArrowRight, {})]
+      })]
+    }), _jsx(List, {
+      instructors: instructors,
+      popup: popup,
+      formFields: formFields,
+      formSendFunction: formSendFunction,
+      fromSuggestions: true
+    })]
+  });
+}

package/es/esf/components/instructors-book-v2/suggestions.module.css

@@ -0,0 +1,17 @@
+.suggestions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 22px;
+}
+
+.headerTitle {
+  font-size: 22px;
+  font-weight: 700;
+}

package/es/esf/components/instructors-book-v2/utils.js

@@ -0,0 +1,51 @@
+const SLASH = "/";
+export function truncate(input, lenght = 140) {
+  return input.length > lenght ? `${input.substring(0, lenght)}...` : input;
+}
+export function sanitizeHTML(text) {
+  const element = document.createElement("div");
+  element.innerHTML = text;
+  return element.textContent;
+}
+export function propsFromQueryString() {
+  if (typeof window === "undefined") return {};
+  const params = new URLSearchParams(document.location.search);
+  const activity = params.get("activity") || undefined;
+  const language = params.get("language") || undefined;
+  return {
+    activity,
+    language
+  };
+}
+export function hasTrailingSlash(path) {
+  return path.length > 1 && path.endsWith(SLASH);
+}
+export const formatNames = name => {
+  const lowercasedName = name && name.toLowerCase();
+  return lowercasedName ? lowercasedName.charAt(0).toUpperCase() + lowercasedName.slice(1) : "";
+};
+export function includesString(source, included) {
+  source.toLowerCase().includes(included.toLowerCase());
+}
+function strStartWith(str1, str2) {
+  return str1.toLowerCase().trim().startsWith(str2.toLowerCase().trim());
+}
+function strEquals(str1, str2) {
+  return str1.toLowerCase().trim() === str2.toLowerCase().trim();
+}
+function match(searchingArray, entries) {
+  return searchingArray.reduce((acc, str, index) => {
+    const matched = index === searchingArray.length - 1 ? strStartWith : strEquals;
+    return acc && entries.some(entry => matched(entry, str));
+  }, true);
+}
+export function filter(array, search = "") {
+  const searchingArray = search.split(" ");
+  const filtered = array.all.filter(uri => {
+    const instructor = array.byUri[uri];
+    const firstnameWords = instructor.firstname.split(" ");
+    const lastnameWords = instructor.lastname.split(" ");
+    return match(searchingArray, [...firstnameWords, ...lastnameWords]);
+  });
+  return filtered.reduce((acc, uri) => [...acc, array.byUri[uri]], []);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.10.29",
+  "version": "1.11.1",
   "peerDependencies": {
     "dt-design-system": "^2.1.0",
     "leaflet": "^1.9.1",