ublo-lib 1.0.0

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

@@ -0,0 +1,55 @@
+import css from "dt-design-system/es/input/input.module.css";
+export const getElements = (product, selectors) => {
+  const title = Array.from(product.querySelectorAll(selectors.title));
+  const price = product.querySelector(selectors.price);
+  const details = product.querySelector(selectors.details);
+  const options = product.querySelector(selectors.options);
+  const button = product.querySelector(selectors.button);
+  const select = product.querySelector("select");
+  return {
+    title,
+    price,
+    details,
+    options,
+    button,
+    select
+  };
+};
+export const getData = (product, selectors, levels, handleVariants, convertTableToSelect) => {
+  const {
+    title,
+    price,
+    details,
+    options
+  } = getElements(product, selectors);
+  const classList = Array.from(product.classList);
+  const productCategory = handleVariants ? classList.reduce((acc, className) => Object.keys(levels).includes(className) ? className : acc, null) : undefined;
+  const selectedOption = getSelectedOption(product, options, convertTableToSelect);
+  const formatedTitle = title?.map(element => element.textContent).join(" - ");
+  const formatedPrice = price ? parseInt(price.textContent.replace(/€/g, "").trim()) : 0;
+  return {
+    title: formatedTitle || "",
+    price: formatedPrice,
+    details: details?.textContent || "",
+    selectedOption,
+    productCategory
+  };
+};
+export const createSelect = options => {
+  if (!options) return;
+  const rows = Array.from(options.querySelectorAll("td"));
+
+  if (rows.length > 1) {
+    const selectOptions = rows.map(row => `<option value="${row.textContent}">${row.textContent}</option>`).join("");
+    options.insertAdjacentHTML("beforebegin", `<div class="${css.fieldWrapper}"><select class="${css.field}">${selectOptions}</select></div>`);
+    options.style.display = "none";
+  }
+};
+export const getSelectedOption = (product, options, convertTableToSelect) => {
+  if (convertTableToSelect) {
+    const select = product.querySelector("select");
+    return select?.value || options.querySelector("td")?.textContent;
+  }
+
+  return options?.textContent;
+};

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

@@ -0,0 +1,131 @@
+export const HOSTS = {
+  PROD: "https://admin.mon-sejour-en-montagne.com",
+  TEST: "https://admin-integration.mon-sejour-en-montagne.com"
+};
+export const TESTS = {
+  text: /^[^%]{2,}$/,
+  date: /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/,
+  email: /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i,
+  phone: /^\+?[0-9]{3}-?[0-9]{6,12}$/,
+  textarea: /^(?!\s*$).+/,
+  select: /^(?!\s*$).+/
+};
+export const studentFormFields = levels => ({
+  studentName: {
+    type: "text",
+    label: {
+      fr: "Nom & prénom",
+      en: "Lastname & firstname"
+    },
+    required: true
+  },
+  birthDate: {
+    type: "date",
+    placeholder: {
+      fr: "AAAA-MM-JJ",
+      en: "YYYY-MM-DD"
+    },
+    label: {
+      fr: "Date de naissance",
+      en: "Birthdate"
+    },
+    required: true
+  },
+  level: {
+    type: "select",
+    label: {
+      fr: "Niveau",
+      en: "Level"
+    },
+    options: levels,
+    required: true
+  }
+});
+export const stayFields = {
+  stayFrom: {
+    type: "date",
+    placeholder: {
+      fr: "AAAA-MM-JJ",
+      en: "YYYY-MM-DD"
+    },
+    label: {
+      fr: "Date de début de séjour",
+      en: "Start date of stay"
+    },
+    required: true
+  },
+  stayTo: {
+    type: "date",
+    placeholder: {
+      fr: "AAAA-MM-JJ",
+      en: "YYYY-MM-DD"
+    },
+    label: {
+      fr: "Date de fin de séjour",
+      en: "End date of stay"
+    },
+    required: true
+  }
+};
+export const customerFormFields = {
+  email: {
+    type: "email",
+    label: {
+      fr: "Email",
+      en: "Email"
+    },
+    required: true
+  },
+  title: {
+    type: "select",
+    label: {
+      fr: "Civilité",
+      en: "Title"
+    },
+    options: [{
+      label: {
+        fr: "M.",
+        en: "Mr."
+      },
+      value: 0
+    }, {
+      label: {
+        fr: "Mme.",
+        en: "Mrs."
+      },
+      value: 1
+    }],
+    required: true
+  },
+  firstname: {
+    type: "text",
+    label: {
+      fr: "Prénom",
+      en: "Firstname"
+    },
+    required: true
+  },
+  lastname: {
+    type: "text",
+    label: {
+      fr: "Nom",
+      en: "Lastname"
+    },
+    required: true
+  },
+  phone: {
+    type: "phone",
+    label: {
+      fr: "Téléphone",
+      en: "Phone"
+    },
+    required: true
+  },
+  comment: {
+    type: "textarea",
+    label: {
+      fr: "Commentaire",
+      en: "Comment"
+    }
+  }
+};

package/es/esf/components/loyal-customers/hooks/use-stored-rows.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+const ROWS_STORAGE_KEY = "loyal-customer-rows";
+
+const useStoredRows = (defaultValue = []) => {
+  const [rows, setRows] = React.useState(defaultValue);
+  React.useEffect(() => {
+    const storedRows = window.sessionStorage.getItem(ROWS_STORAGE_KEY);
+    if (storedRows) setRows(JSON.parse(storedRows));
+  }, []);
+  React.useEffect(() => window.sessionStorage.setItem(ROWS_STORAGE_KEY, JSON.stringify(rows)), [rows]);
+  return [rows, setRows];
+};
+
+export default useStoredRows;

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

@@ -0,0 +1,2 @@
+import LoyalCustomers from "./loyal-customers";
+export default LoyalCustomers;

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

@@ -0,0 +1,141 @@
+import * as React from "react";
+import classnames from "classnames";
+import Rows from "./components/rows";
+import Voucher from "./components/voucher";
+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 = ({
+  lang,
+  cmsMode,
+  selectors,
+  levels,
+  className,
+  convertTableToSelect,
+  handleVariants,
+  manualStay,
+  channel = "ESF",
+  merchant,
+  resort,
+  disableVoucher,
+  integration
+}) => {
+  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);
+
+  const openCustomerForm = () => setCustomerFormOpen(true);
+
+  const openStudentForm = React.useCallback(product => e => {
+    e.preventDefault();
+    e.stopPropagation();
+    const productData = Content.getData(product, selectors, levels, handleVariants, convertTableToSelect);
+    setStudentData(productData);
+  }, [convertTableToSelect, handleVariants, levels, selectors]);
+  const init = React.useCallback(product => {
+    const {
+      options,
+      button
+    } = Content.getElements(product, selectors);
+    if (!options || !button) return;
+    if (convertTableToSelect) Content.createSelect(options);
+    button.callback = openStudentForm(product);
+    button.addEventListener("click", button.callback);
+  }, [openStudentForm, selectors, convertTableToSelect]);
+  const cleanup = React.useCallback(product => {
+    const {
+      options,
+      button,
+      select
+    } = Content.getElements(product, selectors);
+    if (!options || !button) return;
+
+    if (convertTableToSelect) {
+      select?.remove();
+      options.style.removeProperty("display");
+    }
+
+    button.removeEventListener("click", button.callback);
+  }, [selectors, convertTableToSelect]);
+  React.useEffect(() => {
+    const products = Array.from(document.querySelectorAll(selectors.block));
+
+    if (cmsMode !== "editing" && products.length) {
+      products.forEach(init);
+      return () => products.forEach(cleanup);
+    }
+  }, [cleanup, cmsMode, init, selectors]);
+  const classes = classnames(styles.index, {
+    [className]: className
+  });
+  return _jsxs("div", {
+    className: classes,
+    children: [_jsx("div", {
+      className: styles.title,
+      children: Messages.get(lang, "title")
+    }), _jsx(Rows, {
+      lang: lang,
+      rows: rows,
+      setRows: setRows,
+      openedRow: openedRow,
+      setOpenedRow: setOpenedRow
+    }), !disableVoucher && _jsx(Voucher, {
+      lang: lang,
+      voucher: voucher,
+      setVoucher: setVoucher
+    }), _jsxs("div", {
+      className: styles.overview,
+      children: [_jsx("div", {
+        className: styles.overviewTitle,
+        children: Messages.get(lang, "total")
+      }), _jsxs("div", {
+        className: styles.overviewTotal,
+        children: [total, " \u20AC"]
+      })]
+    }), _jsxs(Button, {
+      className: styles.orderButton,
+      disabled: !rows.length,
+      onClick: openCustomerForm,
+      children: [Messages.get(lang, "order"), _jsx(DTIcons.Check, {})]
+    }), _jsx(StudentForm, {
+      lang: lang,
+      close: closeStudentForm,
+      studentData: studentData,
+      levels: levels,
+      setRows: setRows
+    }), _jsx(CustomerForm, {
+      lang: lang,
+      close: closeCustomerForm,
+      open: customerFormOpen,
+      rows: rows,
+      setRows: setRows,
+      voucher: voucher,
+      setVoucher: setVoucher,
+      disableVoucher: disableVoucher,
+      manualStay: manualStay,
+      channel: channel,
+      merchant: merchant,
+      resort: resort,
+      integration: integration
+    })]
+  });
+};
+
+export default LoyalCustomers;

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

@@ -0,0 +1,62 @@
+.index {
+  --ds-secondary: #cc0900;
+  --ds-primary: #bb0b02;
+
+  background-color: var(--ds-grey-100, #f5f5f5);
+  border-radius: var(--ds-radius-100, 3px);
+  overflow: hidden;
+}
+
+.index * {
+  outline: none;
+}
+
+.index *:focus-visible {
+  outline: var(--ds-focus-ring-width, 2px) solid
+    var(--ds-focus-ring-color, var(--ds-blue-400, #4177f6));
+  outline-offset: var(--ds-focus-ring-offset, 2px);
+}
+
+.title {
+  padding: 5px;
+  font-size: 14px;
+  font-weight: 700;
+  text-transform: uppercase;
+  text-align: center;
+  color: var(--ds-grey-000, #ffffff);
+  background-color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
+}
+
+.overview {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+}
+
+.overviewTitle {
+  flex: 1 1 100%;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.overviewTotal {
+  flex: 0 0 auto;
+  padding-left: 10px;
+  font-size: 17px;
+  font-weight: 700;
+}
+
+.orderButton {
+  width: 100%;
+  margin-top: 10px;
+}
+
+.orderButton:focus-visible {
+  outline: none;
+  box-shadow: inset var(--lc-focus-ring, 0 0 0 3px #00aff480);
+}
+
+.orderButton:disabled {
+  background-color: var(--ds-grey-300, #d4d4d4);
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,59 @@
+const locales = {
+  fr: {
+    title: "Récapitulatif de commande",
+    "no-product": "Pas de produit selectionné",
+    "student-information": "Informations de l'élève",
+    "student-name": "Nom & prénom",
+    birthdate: "Date de naissance",
+    level: "Niveau",
+    total: "Total de la commande",
+    voucher: "Code promo",
+    order: "Commander",
+    confirm: "Confirmer",
+    "send-request": "Envoyer votre demande",
+    "student-form-product": "Produit selectionné",
+    "student-form-price": "Prix",
+    "student-form-details": "Détails",
+    "student-form-option": "Option",
+    "student-form-popup-instructions": "Veuillez renseigner les informations de l'élève",
+    "customer-information": "Vos informations",
+    optional: "optionnel",
+    "form-error": "Une erreur est survenue, veuillez réessayer",
+    "form-sent": "Demande envoyée avec succès",
+    stay: "Séjour",
+    from: "du",
+    to: "au",
+    select: "Selectionnez"
+  },
+  en: {
+    title: "Order summary",
+    "no-product": "No selected product",
+    "student-information": "Student information",
+    "student-name": "Fullname:",
+    birthdate: "Birthdate:",
+    level: "Niveau:",
+    total: "Total amount",
+    voucher: "Discount code",
+    order: "Order",
+    confirm: "Confirm",
+    "send-request": "Send your request",
+    "student-form-product": "Selected product:",
+    "student-form-price": "Price:",
+    "student-form-details": "Details:",
+    "student-form-option": "Selected option:",
+    "student-form-popup-instructions": "Please fill in the student information",
+    "customer-information": "Your information",
+    optional: "optional",
+    "form-error": "An error occured, please try again",
+    "form-sent": "Message sent successfully",
+    stay: "Stay",
+    from: "from",
+    to: "to",
+    select: "Choose an option"
+  }
+};
+export const get = (lang, id) => {
+  if (!locales[lang]) return id;
+  const messages = locales[lang];
+  return messages[id] || messages.en;
+};

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

@@ -0,0 +1,81 @@
+import * as Data from "./data";
+export const validateField = (type, 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"
+  });
+};
+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,
+    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".
+${voucherMessage}
+Commentaire : ${comment.value}`;
+  return {
+    channel,
+    resort,
+    merchant,
+    lang,
+    from: stayFrom?.value || from,
+    to: stayTo?.value || to,
+    message,
+    customer: {
+      email: email.value,
+      title: title.value,
+      firstname: firstname.value,
+      lastname: lastname.value,
+      phone: phone.value
+    },
+    genericLines
+  };
+};

package/es/esf/components/village-maps/icons.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const SvgIcon = ({ ...props
+}) => _jsx("svg", {
+  viewBox: "0 0 32 32",
+  ...props,
+  children: props.children
+});
+
+export const LocationIcon = props => _jsx(SvgIcon, { ...props,
+  children: _jsx("path", {
+    d: "M16 3c-5 0-9 4-9 9 0 7 9 17 9 17s9-10 9-17c0-5-4-9-9-9zm0 12a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"
+  })
+});
+export const MeetingIcon = props => _jsx(SvgIcon, { ...props,
+  children: _jsx("path", {
+    d: "M31 32H0l1.5-2.6 4.8-8.2c.9-1.4 2.3-1.4 3.1 0l1.2 2.1 4-6.8c1-1.5 2.3-1.5 3.2 0L24.5 28l1-1.7c.6-1 1.6-1 2.2 0l2.2 3.8L31 32zM18.3 4.5c0 .7-.2 1.4-.5 2l-4 7.9-4.2-8c-.3-.6-.5-1.2-.5-2 0-2.4 2-4.4 4.6-4.4 2.5 0 4.6 2 4.6 4.5zm-1.9 0c0-1.5-1.2-2.7-2.7-2.7A2.7 2.7 0 0 0 11 4.5c0 1.5 1.2 2.7 2.7 2.7 1.5 0 2.7-1.2 2.7-2.7z"
+  })
+});
+export const MountainIcon = props => _jsx(SvgIcon, { ...props,
+  children: _jsx("path", {
+    d: "M31.3 30.9l-9.8-14.5a.9.9 0 0 0-1.4 0l-1.9 2.7-.7 1-3.8-5.6a1 1 0 0 0-1.8 0L.8 30.9 0 32h32l-.7-1.1zm-14-8.2l3-4.5a.7.7 0 0 1 1.1 0l2.7 4 2.8 4.2-4.3-4-.2.5-.1.2-1.1-1.2-.8.6-.2.3-.4-.8V22l-2 1.6 1 1.5.9 1.4-4.7-4.6-.3-.3-.7.9-.3.4-.7-1.2-.3-.6-.7 1.3-.4.8-.5-1.2-.8.4-2.2 2-2.2 2 6.3-9.4a.7.7 0 0 1 1.2 0L16 21l1.1 1.7z"
+  })
+});
+export const ExternalLinkIcon = props => _jsx(SvgIcon, { ...props,
+  children: _jsx("path", {
+    d: "M25 25H7V7h9V4H4v24h24V16h-3v9zM19 4v3h4L10 20l2 2L25 9v4h3V4h-9z"
+  })
+});
+export const CloseIcon = props => _jsx(SvgIcon, { ...props,
+  children: _jsx("path", {
+    d: "M25.3 8.5l-1.8-1.8L16 14 8.5 6.7 6.7 8.5 14 16l-7.4 7.5 1.8 1.8L16 18l7.5 7.4 1.8-1.8L18 16l7.4-7.5z"
+  })
+});