ublo-lib 1.0.0

package/es/common/components/custom-contact-form/field.js

@@ -0,0 +1,294 @@
+import * as React from "react";
+import classnames from "classnames";
+import { useUbloContext } from "ublo/with-ublo";
+import Attachment from "./attachment";
+import Input from "dt-design-system/es/input";
+import Textarea from "dt-design-system/es/textarea";
+import Select from "dt-design-system/es/select";
+import Checkbox from "dt-design-system/es/checkbox";
+import NumberPicker from "dt-design-system/es/number-picker";
+import * as Fetcher from "../../utils/fetcher";
+import { FIELD_TESTS_ERROR_CODES, validate } from "./utils";
+import * as Messages from "./messages";
+import styles from "./field.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const getTag = type => {
+  switch (true) {
+    case type === "textarea":
+      return Textarea;
+
+    case type === "select":
+      return Select;
+
+    case type === "checkbox":
+      return Checkbox;
+
+    case type === "number":
+      return NumberPicker;
+
+    default:
+      return Input;
+  }
+};
+
+const getProps = (type, name, className, data, required, placeholder, autoSizing, onChange) => {
+  const commonProps = {
+    className,
+    value: data[name].value,
+    placeholder,
+    required,
+    autoSizing
+  };
+
+  if (type === "textarea" || type === "select") {
+    return {
+      onValueChange: onChange,
+      ...commonProps
+    };
+  }
+
+  if (type === "number") {
+    return {
+      withInput: true,
+      onChange,
+      ...commonProps
+    };
+  }
+
+  return {
+    type,
+    onValueChange: onChange,
+    ...commonProps
+  };
+};
+
+const Checkboxes = ({
+  checkboxes,
+  data,
+  name,
+  onChange,
+  disabled
+}) => {
+  if (!checkboxes.length) return null;
+  return checkboxes.map((checkbox, i) => {
+    const {
+      value = checkbox,
+      label = checkbox
+    } = checkbox;
+    const checked = data[name].value.includes(value);
+    return _jsx(Checkbox, {
+      label: label,
+      onValueChange: onChange,
+      value: checked,
+      disabled: disabled
+    }, i);
+  });
+};
+
+const getLabel = (lang, label, required) => {
+  if (!required) return `${label} (${Messages.get(lang, "optionnal")})`;
+  return label;
+};
+
+const Inner = ({
+  site,
+  lang,
+  label,
+  kind,
+  name,
+  classes,
+  field,
+  data,
+  setData,
+  disabled,
+  activated,
+  setActivated,
+  valid,
+  setValid
+}) => {
+  const {
+    type,
+    className,
+    options: fieldOptions = [],
+    placeholder,
+    required,
+    autoSizing
+  } = field;
+  const [options, setOptions] = React.useState(fieldOptions);
+  const fieldClasses = classnames({
+    [className]: className,
+    [classes]: classes
+  });
+  const fieldsetRef = React.useRef();
+  const Tag = getTag(type);
+  const onChange = React.useCallback((value, event) => {
+    const isAutoFilled = document.activeElement !== event?.target;
+
+    if (fieldsetRef.current) {
+      const values = Array.from(fieldsetRef.current.querySelectorAll("input")).reduce((acc, checkbox) => {
+        const parent = checkbox.closest("label");
+        const value = parent.textContent.trim();
+        const {
+          checked
+        } = checkbox;
+        return checked ? [...acc, value] : acc;
+      }, []);
+      setData(data => ({ ...data,
+        [name]: {
+          value: values,
+          valid: true
+        }
+      }));
+      setValid(true);
+      return;
+    }
+
+    if (type === "number" || isAutoFilled) {
+      const isValid = validate(type, value, required);
+      setData(data => ({ ...data,
+        [name]: { ...data[name],
+          value,
+          valid: isValid
+        }
+      }));
+      setValid(isValid);
+      setActivated(true);
+      return;
+    }
+
+    setData(data => ({ ...data,
+      [name]: { ...data[name],
+        value
+      }
+    }));
+  }, [name, required, setActivated, setData, setValid, type]);
+  const props = getProps(type, name, fieldClasses, data, required, placeholder, autoSizing, onChange);
+
+  const onBlur = e => {
+    const {
+      value
+    } = e.target;
+    const isValid = validate(type, value, required);
+    setData(data => ({ ...data,
+      [name]: { ...data[name],
+        valid: isValid
+      }
+    }));
+    setValid(isValid);
+    setActivated(true);
+  };
+
+  React.useEffect(() => {
+    if (name === "subject") {
+      const getSubjects = async () => {
+        const body = kind ? {
+          kind
+        } : {};
+        const subjects = await Fetcher.post(`https://contacts.valraiso.net/api/subjects/${site}`, body);
+
+        if (subjects?.length === 1) {
+          const value = subjects?.[0]?.value || "";
+          onChange(value);
+        }
+
+        setOptions(subjects);
+      };
+
+      getSubjects();
+    }
+  }, [kind, name, onChange, site]);
+
+  if (type === "checkbox-group") {
+    return _jsxs("fieldset", {
+      ref: fieldsetRef,
+      children: [label && _jsx("legend", {
+        children: label
+      }), _jsx(Checkboxes, {
+        checkboxes: options,
+        data: data,
+        name: name,
+        onChange: onChange,
+        disabled: disabled
+      })]
+    });
+  }
+
+  const fieldLabel = getLabel(lang, label, required);
+  const isInputValid = required && activated && valid;
+  const errorMessage = required && activated && !valid && Messages.get(lang, FIELD_TESTS_ERROR_CODES[type]);
+  return _jsx(Tag, {
+    label: fieldLabel,
+    options: options,
+    disabled: disabled,
+    valid: isInputValid,
+    error: errorMessage,
+    onBlur: onBlur,
+    ...props
+  });
+};
+
+const Field = ({
+  kind,
+  name,
+  field,
+  data,
+  setData,
+  settings,
+  presets
+}) => {
+  const {
+    lang,
+    config
+  } = useUbloContext();
+  const {
+    type,
+    label,
+    hidden,
+    fullWidth,
+    required
+  } = field;
+  const [activated, setActivated] = React.useState(false);
+  const [valid, setValid] = React.useState(!required || false);
+  const disabled = presets && Object.keys(presets).includes(name);
+  const isTitle = type === "title";
+  const classes = classnames({
+    [styles.fieldFullWidth]: isTitle || fullWidth,
+    [styles.fieldHidden]: hidden
+  });
+  if (isTitle) return _jsx("div", {
+    className: styles.title,
+    children: label
+  });
+
+  if (type === "attachment") {
+    return _jsx(Attachment, {
+      lang: lang,
+      name: name,
+      label: label,
+      data: data,
+      setData: setData,
+      settings: settings
+    });
+  }
+
+  return _jsx(Inner, {
+    site: config.site,
+    kind: kind,
+    label: label,
+    lang: lang,
+    name: name,
+    classes: classes,
+    field: field,
+    data: data,
+    setData: setData,
+    disabled: disabled,
+    activated: activated,
+    setActivated: setActivated,
+    valid: valid,
+    setValid: setValid
+  });
+};
+
+export default Field;

package/es/common/components/custom-contact-form/field.module.css

@@ -0,0 +1,17 @@
+.fieldHidden {
+  display: none !important;
+}
+
+@media (min-width: 780px) {
+  .fieldFullWidth,
+  .title {
+    grid-column: 1 / -1;
+  }
+}
+
+.title {
+  color: var(--ds-grey-700, #171e30);
+  font-size: 14px;
+  text-transform: uppercase;
+  font-weight: 700;
+}

package/es/common/components/custom-contact-form/icons.js

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Icon = ({
+  children,
+  ...props
+}) => _jsx("svg", {
+  viewBox: "0 0 24 24",
+  ...props,
+  children: children
+});
+
+export const Upload = props => {
+  return _jsxs(Icon, { ...props,
+    children: [_jsx("path", {
+      d: "M11.3 11.3a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L12 13.42l-3.3 3.3a1 1 0 0 1-1.4-1.42l4-4Z"
+    }), _jsx("path", {
+      d: "M12 11a1 1 0 0 1 1 1v9a1 1 0 1 1-2 0v-9a1 1 0 0 1 1-1Z"
+    }), _jsx("path", {
+      d: "M8.66 2a9 9 0 0 1 8.82 6H18a6 6 0 0 1 2.87 11.27 1 1 0 0 1-.96-1.76A4 4 0 0 0 18 10h-1.26a1 1 0 0 1-.97-.75 7 7 0 1 0-12.02 6.39 1 1 0 1 1-1.5 1.32A9 9 0 0 1 8.66 2.01Z"
+    }), _jsx("path", {
+      d: "M11.3 11.3a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L12 13.42l-3.3 3.3a1 1 0 0 1-1.4-1.42l4-4Z"
+    })]
+  });
+};
+export const File = props => {
+  return _jsxs(Icon, { ...props,
+    children: [_jsx("path", {
+      d: "M3.88 1.88A3 3 0 0 1 6 1h7a1 1 0 0 1 .7.3l7 7a1 1 0 0 1 .3.7v11a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V4a3 3 0 0 1 .88-2.12ZM6 3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.41L12.59 3H6Z"
+    }), _jsx("path", {
+      d: "M13 1a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1Z"
+    })]
+  });
+};
+export const Bin = props => {
+  return _jsxs(Icon, { ...props,
+    children: [_jsx("path", {
+      d: "M2 6a1 1 0 011-1h18a1 1 0 110 2H3a1 1 0 01-1-1z"
+    }), _jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M10 3a1 1 0 00-1 1v1h6V4a1 1 0 00-1-1h-4zm7 2V4a3 3 0 00-3-3h-4a3 3 0 00-3 3v1H5a1 1 0 00-1 1v14a3 3 0 003 3h10a3 3 0 003-3V6a1 1 0 00-1-1h-2zM6 7v13a1 1 0 001 1h10a1 1 0 001-1V7H6z"
+    }), _jsx("path", {
+      d: "M10 10a1 1 0 011 1v6a1 1 0 11-2 0v-6a1 1 0 011-1zM14 10a1 1 0 011 1v6a1 1 0 11-2 0v-6a1 1 0 011-1z"
+    })]
+  });
+};
+export const Spinner = props => {
+  return _jsx(Icon, { ...props,
+    children: _jsx("path", {
+      d: "M10.7 3V1.4a1.3 1.3 0 012.6 0V3c0 .7-.6 1.3-1.3 1.3-.7 0-1.3-.6-1.3-1.3zM10.7 22.7V21a1.3 1.3 0 012.6 0v1.8c0 .7-.6 1.3-1.3 1.3-.7 0-1.3-.6-1.3-1.3zM17.4 6.6c-.5-.5-.5-1.3 0-1.8l1.3-1.3a1.3 1.3 0 111.8 1.8l-1.3 1.3a1.3 1.3 0 01-1.8 0zM3.5 20.5c-.5-.5-.5-1.3 0-1.8l1.3-1.3a1.3 1.3 0 011.8 1.8l-1.3 1.3a1.3 1.3 0 01-1.8 0zM21 13.3a1.3 1.3 0 110-2.6h1.7c.7 0 1.3.6 1.3 1.3 0 .7-.6 1.3-1.3 1.3H21zM1.3 13.3a1.3 1.3 0 110-2.6H3a1.3 1.3 0 010 2.6H1.3zM18.7 20.5l-1.3-1.3a1.3 1.3 0 011.8-1.8l1.3 1.3a1.3 1.3 0 01-1 2.2l-.8-.4zM4.8 6.6L3.5 5.3a1.3 1.3 0 011.8-1.8l1.3 1.3a1.3 1.3 0 01-1.8 1.8z"
+    })
+  });
+};

package/es/common/components/custom-contact-form/index.js

@@ -0,0 +1,2 @@
+import CustomContactForm from "./custom-contact-form";
+export default CustomContactForm;

package/es/common/components/custom-contact-form/index.module.css

@@ -0,0 +1,119 @@
+.root {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  padding-bottom: 100px;
+}
+
+.title {
+  color: var(--ds-grey-700, #171e30);
+  font-size: 18px;
+  line-height: 1.2em;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+@media (min-width: 480px) {
+  .title {
+    font-size: 25px;
+  }
+}
+
+@media (min-width: 1001px) {
+  .title {
+    font-size: 34px;
+  }
+}
+
+.inner {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 34px;
+}
+
+@media (min-width: 780px) {
+  .inner {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.bottom {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+.message {
+  font-size: 14px;
+  color: var(--ds-grey-700, #171e30);
+}
+
+@media (min-width: 480px) {
+  .message {
+    font-size: 17px;
+  }
+}
+
+@media (min-width: 1001px) {
+  .message {
+    font-size: 20px;
+  }
+}
+
+.resetButton {
+  margin-right: 10px;
+}
+
+.submitButton {
+  margin-left: auto;
+}
+
+.sendingOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(6px);
+}
+
+.sendingIcon {
+  width: 30px;
+  height: 30px;
+  margin-bottom: 20px;
+  fill: var(--ds-grey-700, #171e30);
+  animation: icon-loading-spin 1280ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1)) infinite;
+}
+
+@keyframes icon-loading-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.sendingMessage {
+  max-width: 420px;
+  color: var(--ds-grey-700, #171e30);
+  font-size: 12px;
+  text-align: center;
+}
+
+@media (min-width: 480px) {
+  .sendingMessage {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 1001px) {
+  .sendingMessage {
+    font-size: 17px;
+  }
+}

package/es/common/components/custom-contact-form/messages.js

@@ -0,0 +1,79 @@
+const locales = {
+  fr: {
+    send: "Envoyer",
+    reset: "Réinitialiser le formulaire",
+    choose: "Selectionner",
+    sentTitle: "Message envoyé !",
+    sent: "Votre message a bien été pris en compte.",
+    errorTitle: "Erreur",
+    error: "Une erreur est survenue, veuillez réessayer.",
+    "Internal Server Error": "Une erreur est survenue, veuillez réessayer.",
+    settingsError: "Erreur lors du chargement de la configuration du formulaire",
+    sending: "Envoi en cours, cette opération peut prendre du temps en fonctionne de la qualité du réseau et de la taille de vos pièces jointes",
+    attachmentPlaceholder: "Cliquez sur cet encart ou bien glissez/déposez vos fichiers dedans pour les mettre en ligne.",
+    attachmentHelper1: "fichiers maximum",
+    attachmentHelper2: "MO par fichier maximum",
+    attachmentHelper3: "Formats autorisés :",
+    attachmentOverlay: "Déposez vos fichiers ici",
+    attachmentFormatError: "Ce format de fichier n'est pas autorisé",
+    attachmentNumberError: "Vous avez choisi un trop grand nombre de fichiers",
+    attachmentSizeError: "Vous avez choisi un fichier trop lourd",
+    MISSING_RECIPIENT: "Aucun sujet selectionné, veuillez réessayer en choisissant un sujet.",
+    MISSING_EMAIL: "Aucun email renseigné, veuillez réessayer en renseignant votre adresse email.",
+    NO_RECIPIENT_FOUND: "Erreur lors de la récupération du destinataire final.",
+    NO_SETTINGS_FOUND: "Erreur lors de la récupération du paramétrage du formulaire.",
+    ATTACHMENT_NOT_ALLOWED: "Les pièces jointes ne sont pas autorisées dans ce formulaire.",
+    ATTACHMENT_NUMBER_TO_HIGH: "Nombre de pièces jointes trop important.",
+    ATTACHMENT_TRUNCATED: "Pièce(s) jointe(s) corrompue(s), veuillez réessayer.",
+    ATTACHMENT_TO_BIG: "Pièce(s) jointe(s) trop lourdes, veuillez réessayer avec d'autres fichiers.",
+    WRONG_ATTACHMENT_FORMAT: "Pièce(s) jointe(s) au format incompatible.",
+    TESTS_TEXT_ERROR: "Ce champ doit faire au moins 2 caractères",
+    TESTS_EMAIL_ERROR: 'L\'email doit être au format "john.doe@domaine.com"',
+    TESTS_DATE_ERROR: 'La date doit être format "AAAA-MM-JJ"',
+    TESTS_PHONE_ERROR: 'Le téléphone doit être au format "0612345678" ou "+33612345678"',
+    TESTS_TEXTAREA_ERROR: "Ce champ ne doit pas être vide",
+    TESTS_SELECT_ERROR: "Ce champ ne doit pas être vide",
+    optionnal: "optionnel"
+  },
+  en: {
+    send: "Send",
+    choose: "Choose an option",
+    sentTitle: "Message sent!",
+    sent: "Your message has been sent.",
+    errorTitle: "Error",
+    error: "An error occured, please try again.",
+    "Internal Server Error": "An error occured, please try again.",
+    settingsError: "An error occured while loading the form configuration",
+    sending: "Sending... This operation can take a while depending on your network quality and the size of the attachment",
+    attachmentPlaceholder: "Clic on this area or drag'n'drop your files inside in order to upload them.",
+    attachmentHelper1: "files maximum",
+    attachmentHelper2: "MB maximum for each file",
+    attachmentHelper3: "Authorized formats:",
+    attachmentOverlay: "Drop your files here",
+    attachmentFormatError: "This file format is not authorized",
+    attachmentNumberError: "You have chosen to much files",
+    attachmentSizeError: "You have chosen a file to big",
+    MISSING_RECIPIENT: "No subject selected, please try again after selecting a subject.",
+    MISSING_EMAIL: "No email provied, please try again after filling the email field.",
+    NO_RECIPIENT_FOUND: "Error while retrieving the final recipient.",
+    NO_SETTINGS_FOUND: "Error while getting the form settings.",
+    ATTACHMENT_NOT_ALLOWED: "Attachments are not allowed in this form.",
+    ATTACHMENT_NUMBER_TO_HIGH: "Attachment number to high.",
+    ATTACHMENT_TRUNCATED: "Corrupted attachment(s), please try again with other files.",
+    ATTACHMENT_TO_BIG: "Attachment(s) to big, please try again with other files.",
+    WRONG_ATTACHMENT_FORMAT: "Attachment(s) in the wrong format, please try again with other files.",
+    TESTS_TEXT_ERROR: "This field must be at least 2 characters long",
+    TESTS_EMAIL_ERROR: 'The email must be in the format "john.doe@domain.com"',
+    TESTS_DATE_ERROR: 'The date must be in the following format: "YYYY-MM-DD"',
+    TESTS_PHONE_ERROR: 'The date must be in the following formats: "0612345678" or "+33612345678"',
+    TESTS_TEXTAREA_ERROR: "this field cannot be empty",
+    TESTS_SELECT_ERROR: "this field cannot be empty",
+    optionnal: "optionnal"
+  }
+};
+export const get = (lang, id) => {
+  const _lang = lang === "fr" ? "fr" : "en";
+
+  if (!locales || !locales[_lang]) return id;
+  return locales[_lang][id] || locales.fr[id] || `??${id}??`;
+};

package/es/common/components/custom-contact-form/utils.js

@@ -0,0 +1,132 @@
+import * as Fetcher from "../../utils/fetcher";
+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 FIELD_TESTS_ERROR_CODES = {
+  text: "TESTS_TEXT_ERROR",
+  date: "TESTS_DATE_ERROR",
+  email: "TESTS_EMAIL_ERROR",
+  phone: "TESTS_PHONE_ERROR",
+  textarea: "TESTS_TEXTAREA_ERROR",
+  select: "TESTS_SELECT_ERROR"
+};
+const IGNORED_FIELDS = ["title", "subject", "attachment", "checkbox", "checkbox-group"];
+export const getInitialFormState = (fields, presets) => Object.keys(fields).reduce((acc, key) => {
+  const field = fields[key];
+  const {
+    required,
+    type
+  } = field;
+  if (type === "title") return acc;
+  if (key === "subject") return { ...acc,
+    [key]: {
+      value: "",
+      valid: true
+    }
+  };
+
+  if (type === "checkbox") {
+    const value = presets?.[key] ?? false;
+    return { ...acc,
+      [key]: {
+        value,
+        valid: validate(type, value, required)
+      }
+    };
+  }
+
+  if (type === "number") {
+    const value = presets?.[key] ?? 0;
+    return { ...acc,
+      [key]: {
+        value,
+        valid: validate(type, value, required)
+      }
+    };
+  }
+
+  if (type === "checkbox-group") {
+    const value = presets?.[key].length || [];
+    return { ...acc,
+      [key]: {
+        value,
+        valid: validate(type, value, required)
+      }
+    };
+  }
+
+  const value = presets?.[key] ?? "";
+  return { ...acc,
+    [key]: {
+      value,
+      valid: validate(type, value, required)
+    }
+  };
+}, {});
+export const validate = (type, value, required) => {
+  if (IGNORED_FIELDS.includes(type) || !required) return true;
+  if (type === "number") return value >= 0;
+  if (!value) return false;
+  const regex = TESTS[type];
+  if (!regex) return false;
+  return regex.test(value);
+};
+export const convertToFileList = list => {
+  const dataTransfer = new DataTransfer();
+  list.forEach(item => dataTransfer.items.add(item));
+  return dataTransfer.files;
+};
+export const send = async ({
+  site,
+  data,
+  fields,
+  subjectPrefix,
+  subjectSuffix
+}) => {
+  const endpoint = `https://contacts.valraiso.net/api/contact/${site}`;
+  const dataKeys = Object.keys(data);
+  const formData = new FormData();
+  dataKeys.forEach(key => {
+    if (key === "attachment") {
+      return Array.from(data[key].value).forEach(file => {
+        formData.append(key, file);
+      });
+    } else {
+      const {
+        formatter
+      } = fields[key];
+      const formatedValue = typeof formatter === "function" ? formatter(data[key].value) : data[key].value;
+      formData.append(key, formatedValue);
+    }
+  });
+
+  if (subjectPrefix) {
+    formData.append("subjectPrefix", subjectPrefix);
+  }
+
+  if (subjectSuffix) {
+    formData.append("subjectSuffix", subjectSuffix);
+  }
+
+  const response = await fetch(endpoint, {
+    method: "POST",
+    body: formData
+  });
+  const json = response.json();
+  return json;
+};
+export const getSettings = async site => {
+  const endpoint = `https://contacts.valraiso.net/api/settings/${site}`;
+
+  try {
+    const response = await Fetcher.get(endpoint);
+    return response;
+  } catch (e) {
+    return undefined;
+  }
+};