ublo-lib 1.19.31 → 1.19.32

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";
@@ -61,14 +60,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 +97,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,
@@ -27,13 +26,13 @@ const LoyalCustomers = ({
   resort,
   disableVoucher,
   integration
-}) => {
+}) {
+  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 +75,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 +109,8 @@ const LoyalCustomers = ({
       close: closeStudentForm,
       studentData: studentData,
       levels: levels,
-      setRows: setRows
+      setRows: setRows,
+      recapFormRef: ref
     }), _jsx(CustomerForm, {
       lang: lang,
       close: closeCustomerForm,
@@ -126,5 +127,4 @@ const LoyalCustomers = ({
       integration: integration
     })]
   });
-};
-export default LoyalCustomers;
+}

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

@@ -12,11 +12,6 @@ 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) => {
   const {
     comment,

package/package.json

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