ublo-lib 1.0.0

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

@@ -0,0 +1,184 @@
+import * as React from "react";
+import { useEffect, useState } from "react";
+import Container from "./container";
+import Loader from "./loader";
+import { flags, PersonIcon, OverlayIcon } from "./icons";
+import getMessage from "./messages";
+import { formatNames } from "./utils";
+import { filter } from "./list-utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
+const List = ({
+  instructors,
+  activities,
+  languages,
+  trombi,
+  lang,
+  activity,
+  language,
+  selectInstructor,
+  selectFilter
+}) => {
+  const [search, setSearch] = useState("");
+  const [displayedInstructors, setDisplayedInstructors] = useState(filter(instructors));
+  const texts = getMessage(lang);
+  useEffect(() => {
+    const displayedInstructors = filter(instructors, search);
+    setDisplayedInstructors(displayedInstructors);
+  }, [instructors, search]);
+
+  const changeFilter = filter => e => {
+    if (selectFilter !== undefined) {
+      selectFilter(filter, e.target.value);
+    }
+  };
+
+  const renderHeader = () => {
+    return _jsxs("div", {
+      className: "instructors-book-list__top",
+      children: [_jsxs("div", {
+        className: "instructors-book-list__top-left",
+        children: [_jsx("h2", {
+          className: "instructors-book-list__title",
+          children: texts["instructors-book-title-1"]
+        }), _jsx("div", {
+          className: "instructors-book-list__tagline",
+          children: texts["instructors-book-title-2"]
+        }), _jsx("div", {
+          className: "instructors-book-list__helper",
+          children: texts["instructors-book-intro"]
+        })]
+      }), _jsxs("div", {
+        className: "instructors-book-list__filters",
+        children: [_jsxs("div", {
+          className: "instructors-book-list__filters-title",
+          children: [texts["instructors-book-search-1"], " ", _jsx("span", {
+            className: "instructors-book-list__filters-title-span",
+            children: texts["instructors-book-search-2"]
+          })]
+        }), _jsx("div", {
+          className: "instructors-book-list__input-filler",
+          children: _jsx("input", {
+            value: search,
+            className: "instructors-book-list__input",
+            placeholder: texts["instructors-book-placeholder-search"],
+            onChange: e => setSearch(e.target.value.toLowerCase())
+          })
+        }), _jsx("label", {
+          htmlFor: "instructors-book-practice-filter",
+          className: "instructors-book-list__label",
+          children: texts["instructors-book-filter-activity"]
+        }), _jsx("div", {
+          className: "instructors-book-list__input-filler instructors-book-list__input-filler--select",
+          children: _jsxs("select", {
+            value: activity,
+            id: "instructors-book-practice-filter",
+            className: "instructors-book-list__input instructors-book-list__input--select",
+            onChange: changeFilter("activity"),
+            children: [_jsx("option", {
+              value: "",
+              children: texts["instructors-book-placeholder-activity"]
+            }), activities && activities.map(({
+              code,
+              label
+            }) => _jsx("option", {
+              value: code,
+              children: label
+            }, code))]
+          })
+        }), _jsx("label", {
+          htmlFor: "instructors-book-language-filter",
+          className: "instructors-book-list__label",
+          children: texts["instructors-book-filter-language"]
+        }), _jsx("div", {
+          className: "instructors-book-list__input-filler instructors-book-list__input-filler--select",
+          children: _jsxs("select", {
+            value: language,
+            id: "instructors-book-language-filter",
+            className: "instructors-book-list__input instructors-book-list__input--select",
+            onChange: changeFilter("language"),
+            children: [_jsx("option", {
+              value: "",
+              children: texts["instructors-book-placeholder-language"]
+            }), languages && languages.map(({
+              code,
+              label
+            }) => _jsx("option", {
+              value: code,
+              children: label
+            }, code))]
+          })
+        })]
+      })]
+    });
+  };
+
+  const renderInstructor = (instructor, index) => {
+    const {
+      firstname,
+      lastname,
+      photo,
+      activities,
+      languages,
+      uri
+    } = instructor;
+    return _jsxs(Container, {
+      trombi: trombi,
+      className: "instructors-book-list__instructor",
+      ...selectInstructor(uri),
+      children: [_jsxs("div", {
+        className: "instructors-book-list__instructor-image-container",
+        children: [!trombi && _jsx("div", {
+          className: "instructors-book-list__instructor-overlay",
+          children: _jsx(OverlayIcon, {
+            className: "instructors-book-list__instructor-overlay-icon"
+          })
+        }), photo ? _jsx("img", {
+          loading: "lazy",
+          src: photo,
+          className: "instructors-book-list__instructor-image",
+          alt: `${firstname} ${lastname}`
+        }) : _jsx(PersonIcon, {
+          className: "instructors-book-list__instructor-imageplaceholder"
+        })]
+      }), _jsxs("div", {
+        className: "instructors-book-list__instructor-name",
+        children: [formatNames(firstname), " ", _jsx("span", {
+          className: "instructors-book-list__instructor-lastname",
+          children: formatNames(lastname)
+        })]
+      }), trombi && _jsxs(_Fragment, {
+        children: [_jsx("div", {
+          className: "instructors-book-list__instructor-practices",
+          children: activities && activities.map(({
+            label
+          }) => label).join(" - ")
+        }), _jsx("div", {
+          className: "instructors-book-list__instructor-langs",
+          children: languages && languages.map(({
+            code,
+            label
+          }) => {
+            const Flag = flags[code];
+            return _jsx(Flag, {
+              className: "instructors-book-list__instructor-lang",
+              title: label
+            }, code);
+          })
+        })]
+      })]
+    }, uri ? uri : `instructor-${index}`);
+  };
+
+  return _jsxs("div", {
+    className: "instructors-book-list",
+    children: [renderHeader(), _jsx("div", {
+      className: "instructors-book-list__inner",
+      children: displayedInstructors ? displayedInstructors.map((instructor, index) => renderInstructor(instructor, index)) : _jsx(Loader, {})
+    })]
+  });
+};
+
+export default List;

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Loader = () => {
+  return _jsx("div", {
+    className: "instructors-book-loader"
+  });
+};
+
+export default Loader;

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

@@ -0,0 +1,44 @@
+const messages = {
+  fr: {
+    "instructors-book-title-1": "le book",
+    "instructors-book-title-2": "des moniteurs",
+    "instructors-book-intro": "Cliquez sur un moniteur pour afficher ses informations",
+    "instructors-book-search-1": "recherchez",
+    "instructors-book-search-2": "votre moniteur",
+    "instructors-book-filter-activity": "Filtrer par pratique",
+    "instructors-book-filter-language": "Filtrer par langue",
+    "instructors-book-placeholder-search": "Nom, prénom...",
+    "instructors-book-placeholder-activity": "Sélectionnez une pratique",
+    "instructors-book-placeholder-language": "Sélectionnez une langue",
+    "instructors-book-activities": "Mes spécialités sont : ",
+    "instructors-book-about": "À propos",
+    "instructors-book-and": " et ",
+    "instructors-book-back-to-list": "Retour"
+  },
+  en: {
+    "instructors-book-title-1": "ski instructors'",
+    "instructors-book-title-2": "book",
+    "instructors-book-intro": "Click an instructor bellow to display his informations",
+    "instructors-book-search-1": "search",
+    "instructors-book-search-2": "your instructor",
+    "instructors-book-filter-activity": "Filter by discipline",
+    "instructors-book-filter-language": "Filter by spoken language",
+    "instructors-book-placeholder-search": "Lastname, firstname...",
+    "instructors-book-placeholder-activity": "Select a discipline",
+    "instructors-book-placeholder-language": "Select a language",
+    "instructors-book-activities": "My disciplines are : ",
+    "instructors-book-about": "About",
+    "instructors-book-and": " and ",
+    "instructors-book-back-to-list": "Go back"
+  }
+};
+
+const getMessage = lang => {
+  if (messages[lang] !== undefined) {
+    return messages[lang];
+  } else {
+    return messages["en"];
+  }
+};
+
+export default getMessage;

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

@@ -0,0 +1,5 @@
+export const formatNames = name => {
+  const lowercasedName = name && name.toLowerCase();
+  return lowercasedName.charAt(0).toUpperCase() + lowercasedName.slice(1);
+};
+export const includesString = (source, included) => source.toLowerCase().includes(included.toLowerCase());

package/es/esf/components/levels.js

@@ -0,0 +1,265 @@
+import * as React from "react";
+import { useState, useEffect } from "react";
+import classnames from "classnames";
+import { useUbloContext } from "ublo/with-ublo";
+import { fetchMenus, fetchZones } from "ublo/fetcher";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const LevelDetail = ({
+  selectedLevel,
+  contents
+}) => {
+  const zoneId = `detail-${selectedLevel}`;
+  const content = contents[zoneId];
+  return _jsx("div", {
+    className: "evaluate-level__detail",
+    dangerouslySetInnerHTML: {
+      __html: content
+    }
+  });
+};
+
+const Level = ({
+  level,
+  contents,
+  setSelectedLevel,
+  selectedLevel
+}) => {
+  const {
+    name,
+    title
+  } = level;
+  const zoneId = `photo-${name}`;
+  const content = contents[zoneId];
+
+  const clicked = name => e => setSelectedLevel(name);
+
+  const selected = name === selectedLevel;
+  const levelClasses = classnames("evaluate-level__level", {
+    "evaluate-level__level--selected": selected
+  });
+  return _jsxs("div", {
+    className: levelClasses,
+    onClick: clicked(name),
+    children: [_jsx("h3", {
+      className: "evaluate-level__level-title",
+      children: title
+    }), _jsx("div", {
+      className: "evaluate-level__level-medal",
+      dangerouslySetInnerHTML: {
+        __html: content
+      }
+    })]
+  });
+};
+
+const Levels = ({
+  levels,
+  contents,
+  selectedActivity,
+  selectedAge,
+  setSelectedLevel,
+  selectedLevel
+}) => {
+  return _jsxs("div", {
+    className: "evaluate-level__levels",
+    children: [_jsxs("div", {
+      className: "evaluate-level__levels-title",
+      children: [selectedActivity.title, " ", _jsx("span", {
+        children: selectedAge.title
+      })]
+    }), _jsx("div", {
+      className: "evaluate-level__levels-outer",
+      children: levels.map(level => {
+        return _jsx(Level, {
+          level: level,
+          contents: contents,
+          setSelectedLevel: setSelectedLevel,
+          selectedLevel: selectedLevel
+        }, level.name);
+      })
+    })]
+  });
+};
+
+const AgeClasses = ({
+  ages,
+  selectedAge,
+  ageChanged
+}) => {
+  const clicked = age => e => ageChanged(age);
+
+  return _jsx("div", {
+    className: "evaluate-level__ages",
+    children: ages.map(age => {
+      const {
+        name,
+        title,
+        path
+      } = age;
+      const selected = selectedAge.path === path;
+      const ageClasses = classnames("evaluate-level__age", {
+        "evaluate-level__age--selected": selected
+      });
+      return _jsxs("div", {
+        className: ageClasses,
+        onClick: clicked(age),
+        children: [_jsx("div", {
+          className: "evaluate-level__radio-button"
+        }), title]
+      }, name);
+    })
+  });
+};
+
+const Activities = ({
+  activities,
+  activityChanged,
+  selectedActivity,
+  selectedAge,
+  ageChanged
+}) => {
+  const clicked = activity => e => activityChanged(activity);
+
+  return _jsx("div", {
+    className: "evaluate-level__activities",
+    children: activities.map(activity => {
+      const {
+        name,
+        path,
+        title,
+        subs
+      } = activity;
+      const hasSubs = subs !== undefined;
+      const selected = path === selectedActivity.path && hasSubs;
+      const isFreestyle = name === "levels-freestyle";
+      const activityClasses = classnames("evaluate-level__item", {
+        "evaluate-level__item--selected": selected
+      });
+      return _jsxs("div", {
+        className: activityClasses,
+        children: [_jsxs("div", {
+          className: "evaluate-level__activity",
+          onClick: clicked(activity),
+          children: [_jsx("div", {
+            className: "evaluate-level__radio-button"
+          }), title]
+        }), selected && !isFreestyle && _jsx(AgeClasses, {
+          ages: subs,
+          selectedAge: selectedAge,
+          ageChanged: ageChanged
+        })]
+      }, name);
+    })
+  });
+};
+
+const EvaluateLevel = ({
+  menu
+}) => {
+  const {
+    config,
+    lang
+  } = useUbloContext();
+  const {
+    ubloApi,
+    site
+  } = config;
+  const [activities, setActivities] = useState([]);
+  const [levels, setLevels] = useState([]);
+  const [contents, setContents] = useState({});
+  const [selectedActivity, setSelectedActivity] = useState({});
+  const [selectedAge, setSelectedAge] = useState({});
+  const [selectedLevel, setSelectedLevel] = useState();
+
+  const activityChanged = activity => {
+    const {
+      name
+    } = activity;
+    const isFreestyle = name === "levels-freestyle";
+    setSelectedActivity(activity);
+    setSelectedAge(isFreestyle ? activity : {});
+    setLevels([]);
+    setSelectedLevel();
+  };
+
+  const ageChanged = age => {
+    setSelectedAge(age);
+    setLevels([]);
+    setSelectedLevel();
+  };
+
+  useEffect(() => {
+    const activitiesLoaded = activities.length > 0;
+
+    if (menu !== undefined && activitiesLoaded) {
+      const isFreestyle = menu.split("/").length - 1 === 2;
+
+      if (isFreestyle) {
+        const [activity] = activities.filter(a => a.menu === menu);
+
+        if (activity !== undefined) {
+          setSelectedActivity(activity);
+          setSelectedAge(activity);
+        }
+      } else {
+        const activityPath = menu.substring(0, menu.lastIndexOf("/"));
+        const [activity] = activities.filter(a => a.menu === activityPath);
+
+        if (activity !== undefined) {
+          const [age] = activity.subs.filter(a => a.menu === menu);
+
+          if (age !== undefined) {
+            setSelectedActivity(activity);
+            setSelectedAge(age);
+          }
+        }
+      }
+    }
+  }, [activities, menu]);
+  useEffect(() => {
+    const getActivities = async () => {
+      setActivities(await fetchMenus(ubloApi, site, lang, "/levels", 2));
+    };
+
+    getActivities();
+  }, [lang, site, ubloApi]);
+  useEffect(() => {
+    const {
+      menu
+    } = selectedAge;
+
+    if (menu !== undefined) {
+      const getLevels = async () => {
+        const [levels, contents] = await Promise.all([fetchMenus(ubloApi, site, lang, menu), fetchZones(ubloApi, site, lang, menu)]);
+        setLevels(levels);
+        setContents(contents);
+      };
+
+      getLevels();
+    }
+  }, [lang, selectedAge, site, ubloApi]);
+  return _jsxs("div", {
+    className: "evaluate-level",
+    children: [!menu && _jsx(Activities, {
+      activities: activities,
+      selectedActivity: selectedActivity,
+      activityChanged: activityChanged,
+      selectedAge: selectedAge,
+      ageChanged: ageChanged
+    }), selectedAge.path && _jsx(Levels, {
+      levels: levels,
+      contents: contents,
+      selectedActivity: selectedActivity,
+      selectedAge: selectedAge,
+      setSelectedLevel: setSelectedLevel,
+      selectedLevel: selectedLevel
+    }), selectedLevel && _jsx(LevelDetail, {
+      selectedLevel: selectedLevel,
+      contents: contents
+    })]
+  });
+};
+
+export default EvaluateLevel;

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

@@ -0,0 +1,24 @@
+import * as Data from "./data";
+
+const createGescoFile = async (payload, integration) => {
+  const host = integration ? Data.HOSTS.TEST : Data.HOSTS.PROD;
+  const res = await fetch(`${host}/api/gesco/files/new-with-generic-lines`, {
+    method: "POST",
+    headers: {
+      "content-type": "application/json;charset=utf-8"
+    },
+    body: JSON.stringify(payload)
+  });
+  return res.json();
+};
+
+export const sendFile = async (payload, integration) => {
+  const {
+    action,
+    error
+  } = await createGescoFile(payload, integration);
+  return {
+    action,
+    error
+  };
+};

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+import styles from "./bin-icon.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const BinIcon = () => {
+  return _jsxs("svg", {
+    className: styles.bin,
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24",
+    children: [_jsx("path", {
+      d: "M4.87868 22.1213C4.31607 21.5587 4 20.7956 4 20V7H6V20C6 20.2652 6.10536 20.5196 6.29289 20.7071C6.48043 20.8946 6.73478 21 7 21H17C17.2652 21 17.5196 20.8946 17.7071 20.7071C17.8946 20.5196 18 20.2652 18 20V7H20V20C20 20.7956 19.6839 21.5587 19.1213 22.1213C18.5587 22.6839 17.7956 23 17 23H7C6.20435 23 5.44129 22.6839 4.87868 22.1213Z"
+    }), _jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M10 10C10.2652 10 10.5196 10.1054 10.7071 10.2929C10.8946 10.4804 11 10.7348 11 11V17C11 17.2652 10.8946 17.5196 10.7071 17.7071C10.5196 17.8946 10.2652 18 10 18C9.73478 18 9.48043 17.8946 9.29289 17.7071C9.10536 17.5196 9 17.2652 9 17V11C9 10.7348 9.10536 10.4804 9.29289 10.2929C9.48043 10.1054 9.73478 10 10 10ZM14 10C14.2652 10 14.5196 10.1054 14.7071 10.2929C14.8946 10.4804 15 10.7348 15 11V17C15 17.2652 14.8946 17.5196 14.7071 17.7071C14.5196 17.8946 14.2652 18 14 18C13.7348 18 13.4804 17.8946 13.2929 17.7071C13.1054 17.5196 13 17.2652 13 17V11C13 10.7348 13.1054 10.4804 13.2929 10.2929C13.4804 10.1054 13.7348 10 14 10Z"
+    }), _jsxs("g", {
+      className: styles.handle,
+      children: [_jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M2 6C2 5.73478 2.10536 5.48043 2.29289 5.29289C2.48043 5.10536 2.73478 5 3 5H21C21.2652 5 21.5196 5.10536 21.7071 5.29289C21.8946 5.48043 22 5.73478 22 6C22 6.26522 21.8946 6.51957 21.7071 6.70711C21.5196 6.89464 21.2652 7 21 7H3C2.73478 7 2.48043 6.89464 2.29289 6.70711C2.10536 6.51957 2 6.26522 2 6Z"
+      }), _jsx("path", {
+        d: "M9.29289 3.29289C9.48043 3.10536 9.73478 3 10 3H14C14.2652 3 14.5196 3.10536 14.7071 3.29289C14.8946 3.48043 15 3.73478 15 4V5H17V4C17 3.20435 16.6839 2.44129 16.1213 1.87868C15.5587 1.31607 14.7956 1 14 1H10C9.20435 1 8.44129 1.31607 7.87868 1.87868C7.31607 2.44129 7 3.20435 7 4V5H9V4C9 3.73478 9.10536 3.48043 9.29289 3.29289Z"
+      })]
+    })]
+  });
+};
+
+export default BinIcon;

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

@@ -0,0 +1,9 @@
+.bin {
+  width: 18px;
+  fill: var(--lc-fg-dark-color, #fff);
+}
+
+.handle {
+  transition: transform 160ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}

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

@@ -0,0 +1,105 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import Popup from "../../popup";
+import Button from "dt-design-system/es/button";
+import * as DTIcons from "dt-design-system/es/icons";
+import Field from "./field";
+import * as Messages from "../messages";
+import * as Utils from "../utils";
+import * as Data from "../data";
+import * as Api from "../api";
+import styles from "./customer-form.module.css";
+import Stay from "./stay";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const RESPONSE = {
+  ERROR: 0,
+  LOADING: 1,
+  OK: 2
+};
+
+const getInitialState = fields => Object.keys(fields).reduce((acc, key) => ({ ...acc,
+  [key]: {
+    value: "",
+    validator: !fields[key].required || false
+  }
+}), {});
+
+const CustomerForm = ({
+  lang,
+  close,
+  open,
+  rows,
+  setRows,
+  voucher,
+  setVoucher,
+  disableVoucher,
+  manualStay,
+  channel,
+  merchant,
+  resort,
+  integration
+}) => {
+  const fields = manualStay ? { ...Data.stayFields,
+    ...Data.customerFormFields
+  } : Data.customerFormFields;
+  const [customerData, setCustomerData] = React.useState(getInitialState(fields));
+  const [response, setResponse] = React.useState();
+  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 {
+      error
+    } = await Api.sendFile(payload, integration);
+
+    if (error) {
+      setResponse(RESPONSE.ERROR);
+      return;
+    }
+
+    setCustomerData(getInitialState(fields));
+    setRows([]);
+    setVoucher("");
+    setResponse(RESPONSE.OK);
+  };
+
+  if (!open) return null;
+  return ReactDOM.createPortal(_jsx(Popup, {
+    className: styles.popup,
+    close: close,
+    title: Messages.get(lang, "customer-information"),
+    children: _jsxs("div", {
+      className: styles.inner,
+      children: [_jsx(Stay, {
+        lang: lang
+      }), _jsx("div", {
+        className: styles.form,
+        children: Object.keys(fields).map(key => _jsx(Field, {
+          lang: lang,
+          name: key,
+          field: fields[key],
+          data: customerData,
+          setData: setCustomerData
+        }, key))
+      }), _jsxs("div", {
+        className: styles.footer,
+        children: [_jsxs(Button, {
+          className: styles.confirm,
+          disabled: !isFormValid || response === RESPONSE.LOADING,
+          onClick: onSubmit,
+          children: [Messages.get(lang, "send-request"), _jsx(DTIcons.Check, {})]
+        }), response === RESPONSE.ERROR && _jsx("div", {
+          className: styles.error,
+          children: Messages.get(lang, "form-error")
+        }), response === RESPONSE.OK && _jsx("div", {
+          className: styles.sent,
+          children: Messages.get(lang, "form-sent")
+        })]
+      })]
+    })
+  }), document.body);
+};
+
+export default CustomerForm;