ublo-lib 1.0.0

package/es/esf/components/booking-form/index.js

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { useState, useEffect, useRef } from "react";
+import ProgressBar from "./progress-bar";
+import Steps from "./steps";
+import Response from "./response";
+import useCustomFields from "./hooks/use-custom-fields";
+import { FIELDS, STEPS } from "./data";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const BookingForm = ({
+  lang,
+  resort,
+  channel = "ESF",
+  merchant,
+  integration = false,
+  uat = false,
+  noInitialScroll
+}) => {
+  const ref = useRef();
+  const [fields, setFields] = useState(FIELDS);
+  const [step, setStep] = useState(STEPS.LESSONS);
+  const [lessons, setLessons] = useState([]);
+  const [personalData, setPersonalData] = useState({});
+  const [response, setResponse] = useState();
+
+  const _lang = lang === "fr" ? "fr" : "en";
+
+  const clearForm = () => {
+    setStep(STEPS.LESSONS);
+    setLessons([]);
+    setPersonalData({});
+  };
+
+  useEffect(() => {
+    const bookinForm = ref.current;
+    if (noInitialScroll || !bookinForm) return;
+    bookinForm.scrollIntoView(true);
+  }, [noInitialScroll, step]);
+  useCustomFields(FIELDS, setFields);
+  return _jsxs("div", {
+    className: "booking-form",
+    children: [_jsx("div", {
+      ref: ref,
+      className: "booking-form__anchor"
+    }), _jsxs("div", {
+      className: "booking-form__inner",
+      children: [_jsx(ProgressBar, {
+        lang: _lang,
+        step: step
+      }), _jsx(Steps, {
+        lang: lang,
+        step: step,
+        setStep: setStep,
+        fields: fields,
+        lessons: lessons,
+        setLessons: setLessons,
+        personalData: personalData,
+        setPersonalData: setPersonalData,
+        setResponse: setResponse,
+        config: {
+          channel,
+          resort,
+          merchant,
+          integration,
+          uat
+        }
+      })]
+    }), _jsx(Response, {
+      lang: lang,
+      response: response,
+      setResponse: setResponse,
+      clearForm: clearForm
+    })]
+  });
+};
+
+export default BookingForm;

package/es/esf/components/booking-form/lesson.js

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { useState, Fragment } from "react";
+import classnames from "classnames";
+import Field from "./field";
+import { message } from "./messages";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Lesson = ({
+  lang,
+  index,
+  fields,
+  lesson,
+  lessons,
+  setLessons
+}) => {
+  const [removing, setRemoving] = useState(false);
+  const {
+    groupLessons
+  } = fields;
+
+  const removeLesson = () => {
+    const newLessons = [...lessons];
+    newLessons.splice(index, 1);
+    setRemoving(true);
+    setTimeout(() => {
+      setRemoving(false);
+      setLessons(newLessons);
+    }, 160);
+  };
+
+  const classes = classnames("lesson", {
+    "lesson--removing": removing
+  });
+  return _jsxs("div", {
+    className: classes,
+    children: [_jsxs("div", {
+      className: "lesson__title",
+      children: [message(lang, "lesson"), " n\xB0", index + 1, " ", _jsx("button", {
+        onClick: removeLesson,
+        children: message(lang, "remove")
+      })]
+    }), _jsx("div", {
+      className: "lesson__inner",
+      children: Object.keys(groupLessons).map((key, i) => _jsxs(Fragment, {
+        children: [_jsx(Field, {
+          lang: lang,
+          index: index,
+          name: key,
+          field: groupLessons[key],
+          data: lessons,
+          setData: setLessons
+        }, `${key}-${index}`), key === "birthDate" && _jsx("hr", {})]
+      }, i))
+    })]
+  });
+};
+
+export default Lesson;

package/es/esf/components/booking-form/lessons.js

@@ -0,0 +1,93 @@
+import * as React from "react";
+import classnames from "classnames";
+import Lesson from "./lesson";
+import { AddIcon, ArrowIcon } from "./icons";
+import { message } from "./messages";
+import { validate } from "./utils";
+import { STEPS } from "./data";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Lessons = ({
+  lang,
+  fields,
+  lessons,
+  setLessons,
+  setStep,
+  personalData,
+  setPersonalData,
+  step1Valid
+}) => {
+  const addLesson = () => {
+    const {
+      groupLessons
+    } = fields;
+    const lesson = Object.keys(groupLessons).reduce((acc, key) => {
+      return { ...acc,
+        [key]: {
+          value: "",
+          validator: validate(groupLessons[key].type, "")
+        }
+      };
+    }, {});
+    setLessons([...lessons, lesson]);
+  };
+
+  const generatePersonalData = () => {
+    if (Object.keys(personalData).length > 0) return;
+    const {
+      data
+    } = fields;
+    const newData = Object.keys(data).reduce((acc, key) => {
+      return { ...acc,
+        [key]: {
+          value: "",
+          validator: validate(data[key].type, "")
+        }
+      };
+    }, {});
+    setPersonalData(newData);
+  };
+
+  const nextStep = () => {
+    if (!step1Valid) return;
+    generatePersonalData();
+    setStep(STEPS.PERSONAL_DATA);
+  };
+
+  const nextStepButtonClasses = classnames("lessons__next-step", {
+    "lessons__next-step--disabled": !step1Valid
+  });
+  const title = `${lessons.length} ${lessons.length === 1 ? message(lang, "your-lesson") : message(lang, "your-lessons")}`;
+  return _jsxs("div", {
+    className: "lessons",
+    children: [lessons.length === 0 && _jsx("div", {
+      className: "lessons__placeholder",
+      children: message(lang, "lessons-placeholder")
+    }), lessons.length !== 0 && _jsx("div", {
+      className: "lessons__title",
+      children: title
+    }), lessons.map((lesson, i) => _jsx(Lesson, {
+      index: i,
+      lang: lang,
+      fields: fields,
+      lesson: lesson,
+      lessons: lessons,
+      setLessons: setLessons
+    }, i)), _jsxs("div", {
+      className: "lessons__buttons",
+      children: [_jsxs("button", {
+        className: "lessons__add",
+        onClick: addLesson,
+        children: [_jsx(AddIcon, {}), message(lang, "add-lesson")]
+      }), _jsxs("button", {
+        className: nextStepButtonClasses,
+        disabled: step1Valid ? undefined : true,
+        onClick: nextStep,
+        children: [message(lang, "next-step"), _jsx(ArrowIcon, {})]
+      })]
+    })]
+  });
+};
+
+export default Lessons;

package/es/esf/components/booking-form/messages.js

@@ -0,0 +1,52 @@
+const locales = {
+  fr: {
+    "step-1": "Choix des prestations",
+    "step-2": "Séjour & coordonnées",
+    "step-3": "Récapitulatif",
+    "lessons-placeholder": 'Cliquez sur "Ajouter un cours" pour commencer. Vous pouvez ajouter plusieurs cours dans une même demande.',
+    "your-lesson": "prestation",
+    "your-lessons": "prestations",
+    "add-lesson": "Ajouter un cours",
+    "previous-step": "Etape précédente",
+    "next-step": "Etape suivante",
+    "i-forgot-something": "J'ai oublié quelque chose",
+    lesson: "Prestation",
+    select: "Sélectionner",
+    remove: "Supprimer",
+    "personal-data": "Séjour et coordonnées",
+    summary: "Récapitulatif",
+    send: "Envoyer ma demande",
+    "response-error": "Une erreur est survenue, veuillez réessayer.",
+    "response-success": "Votre demande a bien été envoyée, nous vous recontacterons dans les plus brefs délais.",
+    "year-old": "ans",
+    optional: "optionnel"
+  },
+  en: {
+    "step-1": "Choice of lessons",
+    "step-2": "Stay & contact details",
+    "step-3": "Summary",
+    "lessons-placeholder": 'Click on "Add a lesson" to start. You can add several lessons in each request.',
+    "your-lesson": "lesson",
+    "your-lessons": "lessons",
+    "add-lesson": "Add a lesson",
+    "previous-step": "Previous step",
+    "next-step": "Next step",
+    "i-forgot-something": "I forgot something",
+    lesson: "Lesson",
+    select: "Select",
+    remove: "Remove",
+    "personal-data": "Stay & contact details",
+    summary: "summary",
+    send: "Send",
+    "response-error": "An error occured, please try again.",
+    "response-success": "Your request has been sent, we will get back to you as soon as possible.",
+    "year-old": "years old",
+    optional: "optional"
+  }
+};
+export const message = (lang, id) => {
+  const _lang = lang === "fr" ? "fr" : "en";
+
+  if (!locales || !locales[_lang]) return id;
+  return locales[_lang][id] || `??${id}??`;
+};

package/es/esf/components/booking-form/personal-data.js

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { useEffect } from "react";
+import classnames from "classnames";
+import Field from "./field";
+import { ArrowIcon } from "./icons";
+import { message } from "./messages";
+import useStay from "./hooks/use-stay";
+import { STEPS } from "./data";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const PersonalData = ({
+  lang,
+  fields,
+  personalData,
+  setPersonalData,
+  setStep,
+  step2Valid
+}) => {
+  const {
+    data
+  } = fields;
+
+  const previousStep = () => setStep(STEPS.LESSONS);
+
+  const nextStep = () => {
+    if (!step2Valid) return;
+    setStep(STEPS.SUMMARY);
+  };
+
+  const [stay] = useStay();
+  useEffect(() => {
+    if (!stay || personalData.stayFrom !== "" || personalData.stayTo !== "") return;
+    setPersonalData({ ...personalData,
+      stayFrom: stay.from,
+      stayTo: stay.to
+    });
+  }, [personalData, setPersonalData, stay]);
+  const nextStepButtonClasses = classnames("personal-data__next-step", {
+    "personal-data__next-step--disabled": !step2Valid
+  });
+  return _jsxs("div", {
+    className: "personal-data",
+    children: [_jsx("div", {
+      className: "personal-data__title",
+      children: message(lang, "personal-data")
+    }), _jsx("div", {
+      className: "personal-data__inner",
+      children: Object.keys(data).map(key => _jsx(Field, {
+        lang: lang,
+        index: "step-2",
+        name: key,
+        field: data[key],
+        data: personalData,
+        setData: setPersonalData
+      }, `${key}`))
+    }), _jsxs("div", {
+      className: "personal-data__buttons",
+      children: [_jsx("button", {
+        className: "personal-data__previous-step",
+        onClick: previousStep,
+        children: message(lang, "previous-step")
+      }), _jsxs("button", {
+        className: nextStepButtonClasses,
+        disabled: step2Valid ? undefined : true,
+        onClick: nextStep,
+        children: [message(lang, "next-step"), _jsx(ArrowIcon, {})]
+      })]
+    })]
+  });
+};
+
+export default PersonalData;

package/es/esf/components/booking-form/progress-bar.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import classnames from "classnames";
+import { message } from "./messages";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const ProgressBar = ({
+  lang,
+  step
+}) => {
+  const transform = `scaleX(${step === 1 ? 0 : step === 2 ? "0.5" : 1})`;
+  return _jsxs("div", {
+    className: "progress-bar",
+    children: [_jsx("div", {
+      className: "progress-bar__filler",
+      style: {
+        transform
+      }
+    }), [...new Array(3)].map((_, i) => {
+      const index = i + 1;
+      const classes = classnames("progress-bar__dot", {
+        "progress-bar__dot--past": step > index,
+        "progress-bar__dot--current": step === index
+      });
+      return _jsx("div", {
+        className: classes,
+        children: _jsx("span", {
+          children: message(lang, `step-${index}`)
+        })
+      }, index);
+    })]
+  });
+};
+
+export default ProgressBar;

package/es/esf/components/booking-form/response.js

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { SuccessIcon, ErrorIcon, CloseIcon } from "./icons";
+import { message } from "./messages";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Response = ({
+  lang,
+  response,
+  setResponse,
+  clearForm
+}) => {
+  if (response === undefined) return null;
+
+  const close = () => {
+    if (response) {
+      clearForm();
+    }
+
+    setResponse(undefined);
+  };
+
+  const code = response ? "success" : "error";
+  const Icon = response ? SuccessIcon : ErrorIcon;
+  return _jsxs("div", {
+    className: `response response--${code}`,
+    children: [_jsx("div", {
+      className: "response__overlay",
+      onClick: close
+    }), _jsxs("div", {
+      className: "response__message",
+      children: [_jsx(CloseIcon, {
+        className: "response__close",
+        onClick: close
+      }), _jsx(Icon, {
+        className: "response__icon"
+      }), message(lang, `response-${code}`)]
+    })]
+  });
+};
+
+export default Response;

package/es/esf/components/booking-form/steps.js

@@ -0,0 +1,81 @@
+import * as React from "react";
+import { useState, useEffect } from "react";
+import Lessons from "./lessons";
+import PersonalData from "./personal-data";
+import Summary from "./summary";
+import { STEPS } from "./data";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Steps = ({
+  lang,
+  step,
+  setStep,
+  fields,
+  lessons,
+  setLessons,
+  personalData,
+  setPersonalData,
+  setResponse,
+  config
+}) => {
+  const [step1Valid, setStep1Valid] = useState(false);
+  const [step2Valid, setStep2Valid] = useState(false);
+  useEffect(() => {
+    if (lessons.length > 0) {
+      setStep1Valid(true);
+      lessons.forEach(lesson => {
+        Object.keys(lesson).forEach(key => {
+          if (!fields.groupLessons[key].hidden && fields.groupLessons[key].required && !lesson[key].validator) {
+            setStep1Valid(false);
+          }
+        });
+      });
+    } else {
+      setStep1Valid(false);
+    }
+  }, [fields.groupLessons, lessons, step1Valid]);
+  useEffect(() => {
+    if (Object.keys(personalData).length > 0) {
+      setStep2Valid(true);
+      Object.keys(personalData).forEach(key => {
+        if (!fields.data[key].hidden && fields.data[key].required && !personalData[key].validator) {
+          setStep2Valid(false);
+        }
+      });
+    }
+  }, [fields.data, personalData, step2Valid]);
+  return _jsx("div", {
+    className: "steps",
+    children: _jsxs("div", {
+      className: "steps__inner",
+      children: [step === STEPS.LESSONS && _jsx(Lessons, {
+        lang: lang,
+        fields: fields,
+        lessons: lessons,
+        setLessons: setLessons,
+        setStep: setStep,
+        personalData: personalData,
+        setPersonalData: setPersonalData,
+        step1Valid: step1Valid
+      }), step === STEPS.PERSONAL_DATA && _jsx(PersonalData, {
+        lang: lang,
+        fields: fields,
+        personalData: personalData,
+        setPersonalData: setPersonalData,
+        setStep: setStep,
+        step2Valid: step2Valid
+      }), step === STEPS.SUMMARY && _jsx(Summary, {
+        lang: lang,
+        fields: fields,
+        lessons: lessons,
+        personalData: personalData,
+        setStep: setStep,
+        setResponse: setResponse,
+        config: config
+      })]
+    })
+  });
+};
+
+export default Steps;

package/es/esf/components/booking-form/summary.js

@@ -0,0 +1,138 @@
+import * as React from "react";
+import { Fragment, useRef } from "react";
+import { CheckIcon } from "./icons";
+import { message } from "./messages";
+import { send, calculateAge, formatDate } from "./utils";
+import { gescoFields, STEPS } from "./data";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const getChildren = (lang, key, type, label, value, isName, age) => {
+  if (key === "birthDate") return _jsxs(_Fragment, {
+    children: [_jsxs("span", {
+      children: [label, " :"]
+    }), " ", formatDate(lang, value), " ", age]
+  });
+  if (type === "date") return _jsxs(_Fragment, {
+    children: [_jsxs("span", {
+      children: [label, " :"]
+    }), " ", formatDate(lang, value)]
+  });
+  if (isName) return value + " ";
+  return _jsxs(_Fragment, {
+    children: [_jsxs("span", {
+      children: [label, " :"]
+    }), " ", value]
+  });
+};
+
+const Summary = ({
+  lang,
+  fields,
+  lessons,
+  personalData,
+  setStep,
+  setResponse,
+  config
+}) => {
+  const ref = useRef();
+  const {
+    groupLessons,
+    data
+  } = fields;
+  const {
+    channel,
+    resort,
+    merchant,
+    integration,
+    uat
+  } = config;
+
+  const previousStep = () => setStep(STEPS.PERSONAL_DATA);
+
+  const goToStep1 = () => setStep(STEPS.LESSONS);
+
+  const submit = async () => {
+    const fields = gescoFields(personalData, ref);
+    const result = await send(lang, channel, resort, merchant, integration, uat, fields);
+    setResponse(result);
+  };
+
+  return _jsxs("div", {
+    className: "summary",
+    children: [_jsx("div", {
+      className: "summary__title",
+      children: message(lang, "summary")
+    }), _jsxs("div", {
+      ref: ref,
+      className: "summary__inner",
+      children: [_jsx("div", {
+        className: "summary__sub-title",
+        children: message(lang, "personal-data")
+      }), Object.keys(personalData).map(key => {
+        const {
+          type,
+          label,
+          hidden
+        } = data[key];
+        if (hidden) return null;
+        const {
+          value
+        } = personalData[key];
+        const props = {
+          key,
+          className: "summary__row",
+          children: getChildren(lang, key, type, label[lang], value)
+        };
+        return _jsx("div", { ...props
+        });
+      }), _jsx("hr", {}), lessons.map((lesson, i) => {
+        return _jsxs(Fragment, {
+          children: [_jsx("br", {}), _jsxs("div", {
+            className: "summary__sub-title",
+            children: [message(lang, "lesson"), " n\xB0", i + 1]
+          }), Object.keys(lesson).map(key => {
+            const {
+              type,
+              label,
+              hidden
+            } = groupLessons[key];
+            if (hidden) return null;
+            const {
+              value
+            } = lesson[key];
+            const [birthDate, stayFrom] = [lesson.birthDate.value, personalData.stayFrom.value];
+            const age = key === "birthDate" && `(${calculateAge(birthDate, stayFrom)} ${message(lang, "year-old")})`;
+            const isName = key === "firstName" || key === "lastName";
+            const Tag = isName ? "span" : "div";
+            const props = {
+              key,
+              className: `summary__row summary__row--${key}`,
+              children: getChildren(lang, key, type, label[lang], value, isName, age)
+            };
+            return _jsx(Tag, { ...props
+            });
+          })]
+        }, i);
+      })]
+    }), _jsxs("div", {
+      className: "summary__buttons",
+      children: [_jsx("button", {
+        className: "summary__previous-step",
+        onClick: previousStep,
+        children: message(lang, "previous-step")
+      }), _jsx("button", {
+        className: "summary__go-to-step",
+        onClick: goToStep1,
+        children: message(lang, "add-lesson")
+      }), _jsxs("button", {
+        className: "summary__send",
+        onClick: submit,
+        children: [_jsx(CheckIcon, {}), message(lang, "send")]
+      })]
+    })]
+  });
+};
+
+export default Summary;