ublo-lib 1.31.42 → 1.31.44

package/es/esf/components/loyal-customers/utils.js

@@ -1,77 +1,52 @@
 import * as Data from "./data";
 export const validateField = (type, value) => {
-  const regex = Data.TESTS[type];
-  return regex && regex.test(value);
+    const regex = Data.TESTS[type];
+    return regex && regex.test(value);
 };
 export const formatDate = (lang, date) => {
-  const locale = lang === "fr" ? "fr-FR" : "en-UK";
-  const d = new Date(date);
-  return d.toLocaleString(locale, {
-    month: "long",
-    day: "numeric",
-    year: "numeric"
-  });
+    const locale = lang === "fr" ? "fr-FR" : "en-UK";
+    const d = new Date(date);
+    return d.toLocaleString(locale, {
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+    });
 };
 export const buildPayload = (lang, channel, resort, merchant, voucher, customerData, rows, disableVoucher, categoryCode) => {
-  const {
-    comment,
-    email,
-    title,
-    firstname,
-    lastname,
-    phone,
-    stayFrom,
-    stayTo
-  } = customerData;
-  const storedStay = window.sessionStorage.getItem("stay");
-  if ((!stayFrom || !stayTo) && !storedStay) return;
-  const {
-    from,
-    to
-  } = storedStay ? JSON.parse(storedStay) : {};
-  const genericLines = rows.map(row => {
-    const {
-      details,
-      price,
-      selectedOption,
-      formData,
-      title
-    } = row;
-    const {
-      birthDate,
-      level,
-      studentName
-    } = formData;
-    const label = `${title} ${selectedOption} ${details}`;
-    const description = `Nom de l'élève : ${studentName.value}
+    const { comment, email, title, firstname, lastname, phone, stayFrom, stayTo, } = customerData;
+    const storedStay = window.sessionStorage.getItem("stay");
+    if ((!stayFrom || !stayTo) && !storedStay)
+        return;
+    const { from, to } = storedStay ? JSON.parse(storedStay) : {};
+    const genericLines = rows.map((row) => {
+        const { details, price, selectedOption, formData, title } = row;
+        const { birthDate, level, studentName } = formData;
+        const label = `${title} ${selectedOption} ${details}`;
+        const description = `Nom de l'élève : ${studentName.value}
 Niveau : ${level.value}
 Date de naissance : ${formatDate(lang, birthDate.value)}`;
-    return {
-      label,
-      description,
-      price
-    };
-  }, []);
-  const voucherMessage = disableVoucher ? "" : `Code promo : ${voucher}`;
-  const message = `Envoyé depuis le formulaire "Clients fidèles".
+        return { label, description, price };
+    }, []);
+    const voucherMessage = disableVoucher ? "" : `Code promo : ${voucher}`;
+    const message = `Envoyé depuis le formulaire "Clients fidèles".
 ${voucherMessage}
 Commentaire : ${comment.value}`;
-  return {
-    channel,
-    resort,
-    merchant,
-    lang,
-    from: stayFrom?.value || from,
-    to: stayTo?.value || to,
-    message,
-    category: categoryCode,
-    customer: {
-      email: email.value,
-      title: title.value,
-      firstname: firstname.value,
-      lastname: lastname.value,
-      phone: phone.value
-    },
-    genericLines
-  };
-};
+    return {
+        channel,
+        resort,
+        merchant,
+        lang,
+        from: (stayFrom === null || stayFrom === void 0 ? void 0 : stayFrom.value) || from,
+        to: (stayTo === null || stayTo === void 0 ? void 0 : stayTo.value) || to,
+        message,
+        category: categoryCode,
+        customer: {
+            email: email.value,
+            title: title.value,
+            firstname: firstname.value,
+            lastname: lastname.value,
+            phone: phone.value,
+        },
+        genericLines,
+    };
+};

package/es/esf/components/magic-box/booking.d.ts

@@ -0,0 +1,11 @@
+export default Booking;
+declare function Booking({ stay, cartUrl, channel, values, maxCPDuration, setCurrentStep, msemWidgetHost, }: {
+    stay: any;
+    cartUrl: any;
+    channel: any;
+    values: any;
+    maxCPDuration: any;
+    setCurrentStep: any;
+    msemWidgetHost: any;
+}): React.JSX.Element;
+import * as React from "react";

package/es/esf/components/magic-box/booking.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import * as React from "react";
 import { useUbloContext } from "ublo/with-ublo";
 import Button from "dt-design-system/es/button";
@@ -5,96 +14,94 @@ import * as Icons from "dt-design-system/es/icons";
 import { message } from "./messages";
 import { loadWidgetMseM } from "./services/widgets";
 import * as Plausible from "../../../common/components/plausible";
+// import * as Plausible from "ublo-lib/es/common/components/plausible";
 import css from "./booking.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const Booking = ({
-  stay,
-  cartUrl,
-  channel,
-  values,
-  maxCPDuration,
-  setCurrentStep,
-  msemWidgetHost
-}) => {
-  const {
-    lang,
-    cmsMode,
-    config
-  } = useUbloContext();
-  const {
-    resort
-  } = config;
-  const langPrefix = config.langPrefix.links ? `/${lang}` : "";
-  const cartPage = langPrefix.concat(cartUrl || "/panier");
-  const categoryCode = values?.categories;
-  const goBack = () => {
-    setCurrentStep(0);
-  };
-  const engagement = !maxCPDuration || parseInt(values.durations) > maxCPDuration;
-  const engagementPresets = React.useMemo(() => {
-    if (engagement) {
-      return {
-        activity: values.activities,
-        day: parseInt(values.days),
-        duration: parseInt(values.durations),
-        language: values.languages,
-        person: parseInt(values.nbPersons),
-        startDate: values.startDates
-      };
-    } else {
-      return {
-        activity: [values.activities],
-        day: parseInt(values.days),
-        person: parseInt(values.nbPersons),
-        duration: parseInt(values.durations),
-        startDate: values.startDates
-      };
-    }
-  }, [engagement, values?.activities, values?.days, values?.durations, values?.languages, values?.nbPersons, values?.startDates]);
-  const goToCart = React.useCallback(() => {
-    if (categoryCode) {
-      window.sessionStorage.setItem("categoryCode", categoryCode);
-    }
-    window.location.href = cartPage;
-  }, [cartPage, categoryCode]);
-  React.useEffect(() => {
-    const init = async () => {
-      await loadWidgetMseM(msemWidgetHost);
-      window.MseM?.onLoad(() => {
-        const options = {
-          resort,
-          lang,
-          channel,
-          preview: !!cmsMode,
-          cartChanged: goToCart,
-          fullWidth: true,
-          groundedTo: "#msem-magic-box",
-          analytics: Plausible.callback,
-          categoryCode
-        };
-        const presets = {
-          kind: "CP",
-          engagement,
-          stay: {
-            from: stay.from,
-            to: stay.to
-          },
-          ...engagementPresets
-        };
-        window.MseM.esf(options, presets);
-      });
+const Booking = ({ stay, cartUrl, channel, values, maxCPDuration, setCurrentStep, msemWidgetHost, }) => {
+    const { lang, cmsMode, config } = useUbloContext();
+    const { resort } = config;
+    const langPrefix = config.langPrefix.links ? `/${lang}` : "";
+    const cartPage = langPrefix.concat(cartUrl || "/panier");
+    const categoryCode = values === null || values === void 0 ? void 0 : values.categories;
+    const goBack = () => {
+        setCurrentStep(0);
     };
-    init();
-  }, [cartUrl, categoryCode, channel, cmsMode, engagement, engagementPresets, goToCart, lang, msemWidgetHost, resort, stay.from, stay.to]);
-  return _jsxs("div", {
-    className: css.root,
-    children: [_jsxs(Button, {
-      onClick: goBack,
-      children: [_jsx(Icons.ArrowLeft, {}), message(lang, "go-back")]
-    }), _jsx("div", {
-      id: "msem-magic-box"
-    })]
-  });
+    const engagement = !maxCPDuration || parseInt(values.durations) > maxCPDuration;
+    const engagementPresets = React.useMemo(() => {
+        if (engagement) {
+            return {
+                activity: values.activities,
+                day: parseInt(values.days),
+                duration: parseInt(values.durations),
+                language: values.languages,
+                person: parseInt(values.nbPersons),
+                startDate: values.startDates,
+            };
+        }
+        else {
+            return {
+                activity: [values.activities],
+                day: parseInt(values.days),
+                person: parseInt(values.nbPersons),
+                duration: parseInt(values.durations),
+                startDate: values.startDates,
+            };
+        }
+    }, [
+        engagement,
+        values === null || values === void 0 ? void 0 : values.activities,
+        values === null || values === void 0 ? void 0 : values.days,
+        values === null || values === void 0 ? void 0 : values.durations,
+        values === null || values === void 0 ? void 0 : values.languages,
+        values === null || values === void 0 ? void 0 : values.nbPersons,
+        values === null || values === void 0 ? void 0 : values.startDates,
+    ]);
+    const goToCart = React.useCallback(() => {
+        if (categoryCode) {
+            window.sessionStorage.setItem("categoryCode", categoryCode);
+        }
+        window.location.href = cartPage;
+    }, [cartPage, categoryCode]);
+    React.useEffect(() => {
+        const init = () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            yield loadWidgetMseM(msemWidgetHost);
+            (_a = window.MseM) === null || _a === void 0 ? void 0 : _a.onLoad(() => {
+                const options = {
+                    resort,
+                    lang,
+                    channel,
+                    preview: !!cmsMode,
+                    cartChanged: goToCart,
+                    fullWidth: true,
+                    groundedTo: "#msem-magic-box",
+                    analytics: Plausible.callback,
+                    categoryCode,
+                };
+                const presets = Object.assign({ kind: "CP", engagement, stay: { from: stay.from, to: stay.to } }, engagementPresets);
+                window.MseM.esf(options, presets);
+            });
+        });
+        init();
+    }, [
+        cartUrl,
+        categoryCode,
+        channel,
+        cmsMode,
+        engagement,
+        engagementPresets,
+        goToCart,
+        lang,
+        msemWidgetHost,
+        resort,
+        stay.from,
+        stay.to,
+    ]);
+    return (<div className={css.root}>
+      <Button onClick={goBack}>
+        <Icons.ArrowLeft />
+        {message(lang, "go-back")}
+      </Button>
+      <div id="msem-magic-box"/>
+    </div>);
 };
-export default Booking;
+export default Booking;

package/es/esf/components/magic-box/filter.d.ts

@@ -0,0 +1,8 @@
+export default Filter;
+declare function Filter({ code, filter, values, setValues }: {
+    code: any;
+    filter: any;
+    values: any;
+    setValues: any;
+}): React.JSX.Element;
+import * as React from "react";

package/es/esf/components/magic-box/filter.js

@@ -4,43 +4,21 @@ import { useUbloContext } from "ublo/with-ublo";
 import Select from "dt-design-system/es/select";
 import { message } from "./messages";
 import css from "./filter.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const Filter = ({
-  code,
-  filter,
-  values,
-  setValues
-}) => {
-  const {
-    lang
-  } = useUbloContext();
-  const updateFilter = value => {
-    const newValues = {
-      ...values,
-      [code]: value
+const Filter = ({ code, filter, values, setValues }) => {
+    const { lang } = useUbloContext();
+    const updateFilter = (value) => {
+        const newValues = Object.assign(Object.assign({}, values), { [code]: value });
+        setValues(newValues);
     };
-    setValues(newValues);
-  };
-  const formatedValues = filter.map(({
-    libelle,
-    value
-  }) => ({
-    label: libelle,
-    value
-  }));
-  const options = values.length === 1 ? formatedValues : [""].concat(formatedValues);
-  const classes = classNames(css.filter, css[code]);
-  return _jsxs("div", {
-    className: classes,
-    children: [_jsx("div", {
-      className: css.filterLabel,
-      children: message(lang, code)
-    }), _jsx(Select, {
-      options: options,
-      value: values[code],
-      onValueChange: updateFilter
-    })]
-  });
+    const formatedValues = filter.map(({ libelle, value }) => ({
+        label: libelle,
+        value,
+    }));
+    const options = values.length === 1 ? formatedValues : [""].concat(formatedValues);
+    const classes = classNames(css.filter, css[code]);
+    return (<div className={classes}>
+      <div className={css.filterLabel}>{message(lang, code)}</div>
+      <Select options={options} value={values[code]} onValueChange={updateFilter}/>
+    </div>);
 };
-export default Filter;
+export default Filter;

package/es/esf/components/magic-box/filters.d.ts

@@ -0,0 +1,7 @@
+export default Filters;
+declare function Filters({ filters, values, setValues }: {
+    filters: any;
+    values: any;
+    setValues: any;
+}): React.JSX.Element;
+import * as React from "react";

package/es/esf/components/magic-box/filters.js

@@ -1,21 +1,10 @@
 import * as React from "react";
 import Filter from "./filter";
 import css from "./filters.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-const Filters = ({
-  filters,
-  values,
-  setValues
-}) => _jsx("div", {
-  className: css.filters,
-  children: Object.keys(filters).map(key => {
-    const filter = filters[key];
-    return _jsx(Filter, {
-      code: key,
-      filter: filter,
-      values: values,
-      setValues: setValues
-    }, key);
-  })
-});
-export default Filters;
+const Filters = ({ filters, values, setValues }) => (<div className={css.filters}>
+    {Object.keys(filters).map((key) => {
+        const filter = filters[key];
+        return (<Filter key={key} code={key} filter={filter} values={values} setValues={setValues}/>);
+    })}
+  </div>);
+export default Filters;

package/es/esf/components/magic-box/index.d.ts

@@ -0,0 +1,2 @@
+import MagicBox from "./magic-box";
+export default MagicBox;

package/es/esf/components/magic-box/index.js

@@ -1,2 +1,2 @@
 import MagicBox from "./magic-box";
-export default MagicBox;
+export default MagicBox;

package/es/esf/components/magic-box/magic-box.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+type Stay = {
+    from: string;
+    to: string;
+};
+type MseMWidgetHost = "https://widget.msem.tech" | "https://widget-integration.msem.tech";
+type MseMApiHost = "https://services.msem.tech/api/esf" | "https://services-integration.msem.tech/api/esf";
+type MseMAdminHost = "https://admin.mon-sejour-en-montagne.com/api/gesco" | "https://admin-integration.mon-sejour-en-montagne.com/api/gesco";
+type Props = {
+    stay?: Stay;
+    cartUrl: string;
+    channel: "ESF" | "MSEM";
+    className?: string;
+    alignContent?: "left" | "center" | "right";
+    maxCPDuration?: number;
+    minDays?: number;
+    maxDays?: number;
+    allowedActivities?: string[];
+    categories?: string[];
+    children?: React.ReactNode;
+    msemWidgetHost?: MseMWidgetHost;
+    msemApiHost?: MseMApiHost;
+    msemAdminHost?: MseMAdminHost;
+};
+declare const _default: React.MemoExoticComponent<typeof MagicBox>;
+export default _default;
+declare function MagicBox({ stay, cartUrl, channel, className, alignContent, maxCPDuration, minDays, maxDays, allowedActivities, categories, msemWidgetHost, msemApiHost, msemAdminHost, children, }: Props): React.JSX.Element;

package/es/esf/components/magic-box/magic-box.jsx

@@ -0,0 +1,142 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import * as React from "react";
+import classNames from "classnames";
+import { useUbloContext } from "ublo/with-ublo";
+import Button from "dt-design-system/es/button";
+import * as Icons from "dt-design-system/es/icons";
+import Filters from "./filters";
+import Booking from "./booking";
+import { message } from "./messages";
+import * as API from "./services/api";
+import css from "./magic-box.module.css";
+export default React.memo(MagicBox);
+function MagicBox({ stay, cartUrl, channel = "ESF", className, alignContent, maxCPDuration, minDays = 0, maxDays = Infinity, allowedActivities, categories, msemWidgetHost = "https://widget.msem.tech", msemApiHost = "https://services.msem.tech/api/esf", msemAdminHost = "https://admin.mon-sejour-en-montagne.com/api/gesco", children, }) {
+    const [filters, setFilters] = React.useState();
+    const [values, setValues] = React.useState();
+    const [currentStep, setCurrentStep] = React.useState(0);
+    const { lang, config } = useUbloContext();
+    const { resort, merchant } = config;
+    const valuesKeys = React.useMemo(() => (values ? Object.keys(values) : []), [values]);
+    const filtersKeys = React.useMemo(() => (filters ? Object.keys(filters) : []), [filters]);
+    const validate = React.useCallback(() => {
+        if (filtersKeys.length !== valuesKeys.length) {
+            return false;
+        }
+        return valuesKeys.every((key) => {
+            const value = values ? values[key] : "";
+            return value !== "";
+        });
+    }, [filtersKeys.length, values, valuesKeys]);
+    const isValid = validate();
+    const refreshFilters = React.useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        if (stay) {
+            const { from: stayFrom, to: stayTo } = stay;
+            const [welcomeResult, paramsResult] = yield Promise.all([
+                API.fetchWelcome({
+                    msemApiHost,
+                    lang,
+                    resort,
+                    stayFrom,
+                    stayTo,
+                }),
+                API.fetchParams(msemAdminHost, lang, resort, merchant, channel, categories),
+            ]);
+            const { season: currentSeason, availableSeasons } = welcomeResult;
+            const { categories: categoryList } = paramsResult;
+            const season = currentSeason || availableSeasons[0] || "2022";
+            const filtersResult = yield API.fetchFilters({
+                msemApiHost,
+                lang,
+                resort,
+                season,
+                stayFrom,
+                stayTo,
+            });
+            const newFilters = Object.keys(filtersResult.filters).reduce((acc, key) => {
+                const filter = filtersResult.filters[key];
+                if (key === "days") {
+                    const days = filter.filter((item) => {
+                        return (!item.restricted &&
+                            item.value >= minDays &&
+                            item.value <= maxDays);
+                    });
+                    return Object.assign(Object.assign({}, acc), { [key]: days });
+                }
+                if (key === "activities") {
+                    const mustFilterActivites = allowedActivities && allowedActivities.length > 0;
+                    const activities = filter.filter((item) => {
+                        if (mustFilterActivites) {
+                            return (!item.restricted && allowedActivities.includes(item.value));
+                        }
+                        return !item.restricted;
+                    });
+                    return Object.assign(Object.assign({}, acc), { activities });
+                }
+                const filterWithoutRestricted = filter.filter((item) => !item.restricted);
+                return Object.assign(Object.assign({}, acc), { [key]: filterWithoutRestricted });
+            }, {});
+            const formatedCategories = categoryList === null || categoryList === void 0 ? void 0 : categoryList.map(({ code, label }) => {
+                return { value: code, libelle: label };
+            });
+            const allFilters = categories
+                ? Object.assign(Object.assign({}, newFilters), { categories: formatedCategories }) : newFilters;
+            setFilters(allFilters);
+        }
+    }), [
+        allowedActivities,
+        categories,
+        channel,
+        lang,
+        maxDays,
+        merchant,
+        minDays,
+        msemAdminHost,
+        msemApiHost,
+        resort,
+        stay,
+    ]);
+    const initValues = React.useCallback(() => {
+        if (!values) {
+            const defaultValues = getDefaultValues(filters);
+            setValues(defaultValues);
+        }
+    }, [filters, values]);
+    React.useEffect(() => {
+        initValues();
+    }, [initValues]);
+    React.useEffect(() => {
+        refreshFilters();
+    }, [refreshFilters, stay]);
+    const showFilter = stay && filters && values;
+    const classes = classNames(css.root, className);
+    return (<div className={classes} data-align={alignContent}>
+      <div className={css.top}>
+        {children}
+        {currentStep === 0 && (<>
+            {!filters && <div className={css.loader}/>}
+            {showFilter && (<Filters filters={filters} values={values} setValues={setValues}/>)}
+            <Button className={css.confirm} onClick={() => setCurrentStep(1)} disabled={!isValid}>
+              {message(lang, "confirm")}
+              <Icons.Search />
+            </Button>
+          </>)}
+        {currentStep === 1 && (<Booking stay={stay} cartUrl={cartUrl} channel={channel} values={values} maxCPDuration={maxCPDuration} setCurrentStep={setCurrentStep} msemWidgetHost={msemWidgetHost}/>)}
+      </div>
+    </div>);
+}
+function getDefaultValues(filters) {
+    return Object.keys(filters || {}).reduce((acc, key) => {
+        if (key === "activities" && filters && filters.activities.length === 1) {
+            return Object.assign(Object.assign({}, acc), { [key]: filters.activities[0].value });
+        }
+        return Object.assign(Object.assign({}, acc), { [key]: "" });
+    }, {});
+}

package/es/esf/components/magic-box/messages.d.ts

@@ -0,0 +1 @@
+export function message(lang: any, id: any): any;