ublo-lib 1.19.31 → 1.19.33

package/es/esf/components/loyal-customers/components/customer-form.js

@@ -1,6 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
-import Popup from "../../../../common/components/popup";
+import Dialog from "dt-design-system/es/dialog";
 import Button from "dt-design-system/es/button";
 import * as DTIcons from "dt-design-system/es/icons";
 import Field from "./field";
@@ -37,7 +36,8 @@ const CustomerForm = ({
   channel,
   merchant,
   resort,
-  integration
+  integration,
+  categoryCode
 }) => {
   const fields = manualStay ? {
     ...Data.stayFields,
@@ -48,7 +48,7 @@ const CustomerForm = ({
   const isFormValid = Object.keys(customerData).every(key => customerData[key].validator);
   const onSubmit = async () => {
     setResponse(RESPONSE.LOADING);
-    const payload = Utils.buildPayload(lang, channel, resort, merchant, voucher, customerData, rows, disableVoucher);
+    const payload = Utils.buildPayload(lang, channel, resort, merchant, voucher, customerData, rows, disableVoucher, categoryCode);
     const {
       error
     } = await Api.sendFile(payload, integration);
@@ -61,14 +61,17 @@ const CustomerForm = ({
     setVoucher("");
     setResponse(RESPONSE.OK);
   };
-  if (!open) return null;
-  return ReactDOM.createPortal(_jsx(Popup, {
+  return _jsx(Dialog, {
     className: styles.popup,
     close: close,
+    isOpened: open,
     title: Messages.get(lang, "customer-information"),
     children: _jsxs("div", {
       className: styles.inner,
-      children: [_jsx(Stay, {
+      children: [_jsx("div", {
+        className: styles.title,
+        children: Messages.get(lang, "customer-information")
+      }), _jsx(Stay, {
         lang: lang
       }), _jsx("div", {
         className: styles.form,
@@ -95,6 +98,6 @@ const CustomerForm = ({
         })]
       })]
     })
-  }), document.body);
+  });
 };
 export default CustomerForm;

package/es/esf/components/loyal-customers/components/customer-form.module.css

@@ -1,13 +1,26 @@
-.popup > div {
-  width: max-content;
+.popup {
+  --ds-secondary: #cc0900;
+  --ds-primary: #bb0b02;
+
+  padding: 10px 16px;
+}
+
+.inner {
+  padding: 10px 0;
 }
 
 @media (min-width: 992px) {
   .inner {
-    padding: 0 30px 10px 30px;
+    padding: 10px 30px 10px 30px;
   }
 }
 
+.title {
+  margin-bottom: 20px;
+  font-size: 18px;
+  font-weight: 700;
+}
+
 .form {
   display: flex;
   flex-direction: column;

package/es/esf/components/loyal-customers/components/student-form.js

@@ -1,6 +1,5 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
-import Popup from "../../../../common/components/popup";
+import Dialog from "dt-design-system/es/dialog";
 import Field from "./field";
 import Button from "dt-design-system/es/button";
 import * as DTIcons from "dt-design-system/es/icons";
@@ -21,7 +20,8 @@ const StudentForm = ({
   close,
   studentData,
   levels,
-  setRows
+  setRows,
+  recapFormRef
 }) => {
   const fields = Data.studentFormFields(studentData.productCategory ? levels[studentData.productCategory] : levels);
   const [formData, setFormData] = React.useState(getInitialState(fields));
@@ -37,21 +37,35 @@ const StudentForm = ({
       formData
     }]);
     onClose();
+    const recapForm = recapFormRef.current;
+    if (recapForm) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          recapForm.scrollIntoView({
+            behavior: "smooth"
+          });
+        });
+      });
+    }
   };
-  if (!dataKeys.length) return null;
   const {
     details,
     price,
     selectedOption,
     title
   } = studentData;
-  return ReactDOM.createPortal(_jsx(Popup, {
+  return _jsx(Dialog, {
     className: styles.popup,
     close: onClose,
+    isOpened: Boolean(dataKeys.length),
     title: Messages.get(lang, "student-information"),
+    showCloseButton: true,
     children: _jsxs("div", {
       className: styles.inner,
-      children: [_jsxs("div", {
+      children: [_jsx("div", {
+        className: styles.title,
+        children: Messages.get(lang, "student-information")
+      }), _jsxs("div", {
         className: styles.header,
         children: [_jsx("div", {
           className: styles.title,
@@ -96,6 +110,6 @@ const StudentForm = ({
         })
       })]
     })
-  }), document.body);
+  });
 };
 export default StudentForm;

package/es/esf/components/loyal-customers/components/student-form.module.css

@@ -1,13 +1,20 @@
-.popup > div {
+.popup {
   --ds-secondary: #cc0900;
   --ds-primary: #bb0b02;
 
-  width: max-content;
+  padding: 10px 16px;
 }
 
 .inner {
   width: 420px;
   max-width: 100%;
+  padding: 10px 0;
+}
+
+.title {
+  margin-bottom: 20px;
+  font-size: 18px;
+  font-weight: 700;
 }
 
 .header {

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

@@ -6,14 +6,13 @@ import StudentForm from "./components/student-form";
 import CustomerForm from "./components/customer-form";
 import * as Messages from "./messages";
 import * as Content from "./content";
-import * as Utils from "./utils";
 import Button from "dt-design-system/es/button";
 import * as DTIcons from "dt-design-system/es/icons";
 import useStoredRows from "./hooks/use-stored-rows";
 import styles from "./loyal-customers.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const LoyalCustomers = ({
+export default function LoyalCustomers({
   lang,
   cmsMode,
   selectors,
@@ -26,14 +25,15 @@ const LoyalCustomers = ({
   merchant,
   resort,
   disableVoucher,
-  integration
-}) => {
+  integration,
+  categoryCode
+}) {
+  const ref = React.useRef(null);
   const [rows, setRows] = useStoredRows([]);
   const [openedRow, setOpenedRow] = React.useState();
   const [voucher, setVoucher] = React.useState("");
   const [studentData, setStudentData] = React.useState({});
   const [customerFormOpen, setCustomerFormOpen] = React.useState(false);
-  Utils.showHelper();
   const total = rows.reduce((acc, row) => acc + row.price, 0);
   const closeStudentForm = () => setStudentData({});
   const closeCustomerForm = () => setCustomerFormOpen(false);
@@ -76,6 +76,7 @@ const LoyalCustomers = ({
   }, [cleanup, cmsMode, init, selectors]);
   const classes = classNames(styles.index, className);
   return _jsxs("div", {
+    ref: ref,
     className: classes,
     children: [_jsx("div", {
       className: styles.title,
@@ -109,7 +110,8 @@ const LoyalCustomers = ({
       close: closeStudentForm,
       studentData: studentData,
       levels: levels,
-      setRows: setRows
+      setRows: setRows,
+      recapFormRef: ref
     }), _jsx(CustomerForm, {
       lang: lang,
       close: closeCustomerForm,
@@ -123,8 +125,8 @@ const LoyalCustomers = ({
       channel: channel,
       merchant: merchant,
       resort: resort,
-      integration: integration
+      integration: integration,
+      categoryCode: categoryCode
     })]
   });
-};
-export default LoyalCustomers;
+}

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

@@ -12,12 +12,7 @@ export const formatDate = (lang, date) => {
     year: "numeric"
   });
 };
-export const showHelper = () => {
-  if (process.env.NODE_ENV !== "production") {
-    console.info("LoyalCustomers: See https://github.com/valraiso-esf/documentation-sites-marchands/tree/master/loyal-customers for more information.");
-  }
-};
-export const buildPayload = (lang, channel, resort, merchant, voucher, customerData, rows, disableVoucher) => {
+export const buildPayload = (lang, channel, resort, merchant, voucher, customerData, rows, disableVoucher, categoryCode) => {
   const {
     comment,
     email,
@@ -69,6 +64,7 @@ Commentaire : ${comment.value}`;
     from: stayFrom?.value || from,
     to: stayTo?.value || to,
     message,
+    category: categoryCode,
     customer: {
       email: email.value,
       title: title.value,

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

@@ -4,7 +4,7 @@ import Button from "dt-design-system/es/button";
 import * as Icons from "dt-design-system/es/icons";
 import { message } from "./messages";
 import { loadWigetMseM, preview } 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";
@@ -61,7 +61,8 @@ const Booking = ({
           fullWidth: true,
           groundedTo: "#msem-magic-box",
           analytics: Plausible.callback,
-          show: ["vel"]
+          show: ["vel"],
+          categoryCode: values.categories
         };
         const presets = {
           kind: "CP",
@@ -76,7 +77,7 @@ const Booking = ({
       });
     };
     init();
-  }, [cartUrl, channel, cmsMode, engagement, engagementPresets, lang, resort, stay?.from, stay?.to]);
+  }, [cartUrl, channel, cmsMode, engagement, engagementPresets, lang, resort, stay.from, stay.to, values.categories]);
   return _jsxs("div", {
     className: css.root,
     children: [_jsxs(Button, {

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

@@ -13,9 +13,10 @@ type Props = {
     minDays?: number;
     maxDays?: number;
     allowedActivities?: string[];
+    categories?: string[];
     children?: React.ReactNode;
 };
 declare const _default: React.MemoExoticComponent<typeof MagicBox>;
 export default _default;
-declare function MagicBox({ stay, cartUrl, channel, className, alignContent, maxCPDuration, minDays, maxDays, allowedActivities, children, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function MagicBox({ stay, cartUrl, channel, className, alignContent, maxCPDuration, minDays, maxDays, allowedActivities, categories, children, }: Props): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=magic-box.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"magic-box.d.ts","sourceRoot":"","sources":["../../../../src/esf/components/magic-box/magic-box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,KAAK,IAAI,GAAG;IACV,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;;AAIF,wBAAoC;AAEpC,iBAAS,QAAQ,CAAC,EAChB,IAAI,EACJ,OAAO,EACP,OAAe,EACf,SAAS,EACT,YAAY,EACZ,aAAa,EACb,OAAW,EACX,OAAkB,EAClB,iBAAiB,EACjB,QAAQ,GACT,EAAE,KAAK,2CA8HP"}
+{"version":3,"file":"magic-box.d.ts","sourceRoot":"","sources":["../../../../src/esf/components/magic-box/magic-box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,KAAK,IAAI,GAAG;IACV,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;;AAIF,wBAAoC;AAEpC,iBAAS,QAAQ,CAAC,EAChB,IAAI,EACJ,OAAO,EACP,OAAe,EACf,SAAS,EACT,YAAY,EACZ,aAAa,EACb,OAAW,EACX,OAAkB,EAClB,iBAAiB,EACjB,UAAU,EACV,QAAQ,GACT,EAAE,KAAK,2CAkJP"}

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

@@ -10,12 +10,12 @@ 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, children, }) {
+function MagicBox({ stay, cartUrl, channel = "ESF", className, alignContent, maxCPDuration, minDays = 0, maxDays = Infinity, allowedActivities, categories, children, }) {
     const [filters, setFilters] = React.useState();
     const [values, setValues] = React.useState();
     const [currentStep, setCurrentStep] = React.useState(0);
     const { lang, config } = useUbloContext();
-    const { resort } = config;
+    const { resort, merchant } = config;
     const validate = React.useCallback(() => {
         let valid = true;
         if (stay && filters && values) {
@@ -33,13 +33,17 @@ function MagicBox({ stay, cartUrl, channel = "ESF", className, alignContent, max
     const refreshFilters = React.useCallback(async () => {
         if (stay) {
             const { from: stayFrom, to: stayTo } = stay;
-            const welcomeResult = await API.fetchWelcome({
-                lang,
-                resort,
-                stayFrom,
-                stayTo,
-            });
+            const [welcomeResult, paramsResult] = await Promise.all([
+                API.fetchWelcome({
+                    lang,
+                    resort,
+                    stayFrom,
+                    stayTo,
+                }),
+                API.fetchParams(lang, resort, merchant, channel, categories),
+            ]);
             const { season: currentSeason, availableSeasons } = welcomeResult;
+            const { categories: categoryList } = paramsResult;
             const season = currentSeason || availableSeasons[0] || "2022";
             const filtersResult = await API.fetchFilters({
                 lang,
@@ -71,11 +75,27 @@ function MagicBox({ stay, cartUrl, channel = "ESF", className, alignContent, max
                 const filterWithoutRestricted = filter.filter((item) => !item.restricted);
                 return { ...acc, [key]: filterWithoutRestricted };
             }, {});
-            setFilters(newFilters);
-            const defaultValues = getDefaultValues(newFilters);
+            const formatedCategories = categoryList?.map(({ code, label }) => {
+                return { value: code, libelle: label };
+            });
+            const allFilters = categories
+                ? { ...newFilters, categories: formatedCategories }
+                : newFilters;
+            setFilters(allFilters);
+            const defaultValues = getDefaultValues(allFilters);
             setValues(defaultValues);
         }
-    }, [lang, maxDays, minDays, resort, stay]);
+    }, [
+        allowedActivities,
+        categories,
+        channel,
+        lang,
+        maxDays,
+        merchant,
+        minDays,
+        resort,
+        stay,
+    ]);
     React.useEffect(() => {
         refreshFilters();
         setCurrentStep(0);

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

@@ -7,7 +7,8 @@ const locales = {
     languages: " en ",
     startDates: " J'aimerais commencer à partir du ",
     days: " pendant ",
-    durations: " sur des cours de "
+    durations: " sur des cours de ",
+    categories: " à "
   },
   en: {
     confirm: "Find an instructor",
@@ -17,7 +18,8 @@ const locales = {
     languages: " in ",
     startDates: " I'd like to start from ",
     days: " for ",
-    durations: " with lessons of "
+    durations: " with lessons of ",
+    categories: " at "
   }
 };
 export const message = (lang, id) => {

package/es/esf/components/magic-box/services/api.js

@@ -1,17 +1,20 @@
 import * as Fetcher from "../../../../common/utils/fetcher";
 const velApi = "https://services.msem.tech/api/esf";
-export const fetchWelcome = ({
+const msemAdminApi = "https://admin.mon-sejour-en-montagne.com/api/gesco";
+export function fetchWelcome({
   lang,
   resort,
   stayFrom,
   stayTo
-}) => Fetcher.post(`${velApi}/welcome`, {
-  resort,
-  lang,
-  stayFrom,
-  stayTo
-});
-export const fetchFilters = async ({
+}) {
+  return Fetcher.post(`${velApi}/welcome`, {
+    resort,
+    lang,
+    stayFrom,
+    stayTo
+  });
+}
+export async function fetchFilters({
   lang,
   resort,
   season,
@@ -19,7 +22,7 @@ export const fetchFilters = async ({
   stayTo,
   kinds = ["CP"],
   engagement = true
-}) => {
+}) {
   return Fetcher.post(`${velApi}/filters`, {
     lang,
     resort,
@@ -29,4 +32,20 @@ export const fetchFilters = async ({
     kinds,
     engagement
   });
-};
+}
+export async function fetchParams(lang, resort, merchant, channel, categories) {
+  const res = await fetch(`${msemAdminApi}/contact/parameters`, {
+    method: "POST",
+    headers: {
+      "content-type": "application/json;charset=utf-8"
+    },
+    body: JSON.stringify({
+      lang,
+      resort,
+      merchant,
+      channel,
+      categories
+    })
+  });
+  return res.json();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.19.31",
+  "version": "1.19.33",
   "peerDependencies": {
     "dt-design-system": "^3.1.5",
     "leaflet": "^1.9.1",