ublo-lib 1.12.24 → 1.12.26

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

@@ -2,51 +2,18 @@ import * as React from "react";
 import classNames from "classnames";
 import * as Messages from "./messages";
 import * as Icons from "./icons";
-import styles from "./attachment.module.css";
 import { convertToFileList } from "./utils";
+import css from "./attachment.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const getFormatName = format => {
-  const splittedName = format.split("/");
-  return splittedName[splittedName.length - 1];
-};
-const Item = ({
-  item,
-  removeItem
-}) => {
-  const {
-    name
-  } = item;
-  const onRemoveClick = e => {
-    e.stopPropagation();
-    e.preventDefault();
-    removeItem(name);
-  };
-  return _jsxs("div", {
-    className: styles.item,
-    onClick: undefined,
-    children: [_jsx("button", {
-      className: styles.itemRemove,
-      onClick: onRemoveClick,
-      children: _jsx(Icons.Bin, {
-        className: styles.itemRemoveIcon
-      })
-    }), _jsx(Icons.File, {
-      className: styles.itemIcon
-    }), _jsx("span", {
-      className: styles.itemName,
-      children: name
-    })]
-  });
-};
-const Attachment = ({
+export default function Attachment({
   lang,
   name,
   label,
   settings,
   data,
   setData
-}) => {
+}) {
   const ref = React.useRef();
   const [dragging, setDragging] = React.useState(false);
   const [error, setError] = React.useState(false);
@@ -156,41 +123,41 @@ const Attachment = ({
     }
   }, [onDragIn, onDragOut, onDrop]);
   const overlayMessage = error || dragging && Messages.get(lang, "attachmentOverlay");
-  const attachmentStyles = classNames(styles.attachment, {
-    [styles.attachmentDragging]: dragging
+  const attachmentcss = classNames(css.attachment, {
+    [css.attachmentDragging]: dragging
   });
-  const overlayStyles = classNames(styles.inputOverlay, {
-    [styles.inputOverlayError]: error
+  const overlaycss = classNames(css.inputOverlay, {
+    [css.inputOverlayError]: error
   });
   if (!attachmentAllowed) return null;
   return _jsxs("div", {
-    className: attachmentStyles,
+    className: attachmentcss,
     children: [_jsxs("label", {
-      className: styles.label,
+      className: css.label,
       htmlFor: name,
       children: [label && _jsx("span", {
         children: label
       }), _jsxs("div", {
         ref: ref,
-        className: styles.input,
+        className: css.input,
         children: [items.length ? _jsx("div", {
-          className: styles.items,
+          className: css.items,
           children: Array.from(items).map((item, i) => _jsx(Item, {
             item: item,
             removeItem: removeItem
           }, i))
         }) : _jsxs("div", {
-          className: styles.placeholder,
+          className: css.placeholder,
           children: [_jsx(Icons.Upload, {
-            className: styles.placeholderIcon
+            className: css.placeholderIcon
           }), Messages.get(lang, "attachmentPlaceholder")]
         }), (error || dragging) && _jsx("div", {
-          className: overlayStyles,
+          className: overlaycss,
           children: overlayMessage
         })]
       }), _jsx("input", {
         id: name,
-        className: styles.uploadInput,
+        className: css.uploadInput,
         type: "file",
         accept: attachmentAuthorizedFormats,
         disabled: !attachmentAllowed,
@@ -198,7 +165,7 @@ const Attachment = ({
         multiple: attachmentMaxFiles > 1
       })]
     }), _jsxs("div", {
-      className: styles.helper,
+      className: css.helper,
       children: [_jsx("b", {
         children: attachmentMaxFiles
       }), " ", Messages.get(lang, "attachmentHelper1"), ".", " ", _jsx("b", {
@@ -208,5 +175,37 @@ const Attachment = ({
       }), "."]
     })]
   });
-};
-export default Attachment;
+}
+function Item({
+  item,
+  removeItem
+}) {
+  const {
+    name
+  } = item;
+  const onRemoveClick = e => {
+    e.stopPropagation();
+    e.preventDefault();
+    removeItem(name);
+  };
+  return _jsxs("div", {
+    className: css.item,
+    onClick: undefined,
+    children: [_jsx("button", {
+      className: css.itemRemove,
+      onClick: onRemoveClick,
+      children: _jsx(Icons.Bin, {
+        className: css.itemRemoveIcon
+      })
+    }), _jsx(Icons.File, {
+      className: css.itemIcon
+    }), _jsx("span", {
+      className: css.itemName,
+      children: name
+    })]
+  });
+}
+function getFormatName(format) {
+  const splittedName = format.split("/");
+  return splittedName[splittedName.length - 1];
+}

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

@@ -8,18 +8,19 @@ import * as Messages from "./messages";
 import * as Icons from "./icons";
 import * as DTIcons from "dt-design-system/es/icons";
 import * as Plausible from "../plausible";
-import styles from "./custom-contact-form.module.css";
 import { getInitialFormState, getSettings, send } from "./utils";
+import css from "./custom-contact-form.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const CustomContactFormWithSnackbar = props => {
+export default React.memo(CustomContactFormWithSnackbar);
+function CustomContactFormWithSnackbar(props) {
   return _jsx(SnackbarProvider, {
     children: _jsx(CustomContactForm, {
       ...props
     })
   });
-};
-const CustomContactForm = ({
+}
+function CustomContactForm({
   kind,
   title,
   fields,
@@ -29,7 +30,7 @@ const CustomContactForm = ({
   subject,
   onSubmit,
   customSend
-}) => {
+}) {
   const [data, setData] = React.useState(getInitialFormState(fields, presets?.values));
   const [sending, setSending] = React.useState(false);
   const [ready, setReady] = React.useState(false);
@@ -103,15 +104,15 @@ const CustomContactForm = ({
   React.useEffect(() => {
     setData(currentData => getInitialFormState(fields, presets?.values, currentData.subject?.value));
   }, [fields, presets?.values]);
-  const classes = classNames(styles.root, className);
-  const innerClasses = classNames(styles.inner, {
+  const classes = classNames(css.root, className);
+  const innerClasses = classNames(css.inner, {
     [innerClassName]: innerClassName
   });
   const showSendingOverlay = !!settings?.attachmentAllowed && sending;
   if (!ready) return null;
   if (ready && !settings) {
     return _jsx("div", {
-      className: styles.root,
+      className: css.root,
       children: Messages.get(lang, "NO_SETTINGS_FOUND")
     });
   }
@@ -119,7 +120,7 @@ const CustomContactForm = ({
   return _jsxs("div", {
     className: classes,
     children: [title && _jsx("div", {
-      className: styles.title,
+      className: css.title,
       children: title
     }), _jsx("div", {
       className: innerClasses,
@@ -133,28 +134,27 @@ const CustomContactForm = ({
         presets: presets?.values
       }, key))
     }), _jsxs("div", {
-      className: styles.bottom,
+      className: css.bottom,
       children: [presets?.allowReset && _jsx(Button, {
-        className: styles.resetButton,
+        className: css.resetButton,
         disabled: sending,
         onClick: resetForm,
         children: Messages.get(lang, "reset")
       }), _jsxs(Button, {
-        className: styles.submitButton,
+        className: css.submitButton,
         disabled: !isFormValid || sending,
         onClick: sendForm,
         onPointerEnter: blurForm,
         children: [Messages.get(lang, "send"), _jsx(DTIcons.Mail, {})]
       })]
     }), showSendingOverlay && _jsxs("div", {
-      className: styles.sendingOverlay,
+      className: css.sendingOverlay,
       children: [_jsx(Icons.Spinner, {
-        className: styles.sendingIcon
+        className: css.sendingIcon
       }), _jsx("span", {
-        className: styles.sendingMessage,
+        className: css.sendingMessage,
         children: Messages.get(lang, "sending")
       })]
     })]
   }, formKey);
-};
-export default React.memo(CustomContactFormWithSnackbar);
+}

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

@@ -11,70 +11,68 @@ 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 css from "./field.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
-const getTag = type => {
-  switch (type) {
-    case "textarea":
-      return Textarea;
-    case "multiple-select":
-      return MultipleSelect;
-    case "select":
-      return Select;
-    case "checkbox":
-      return Checkbox;
-    case "number":
-      return NumberPicker;
-    default:
-      return Input;
-  }
-};
-const getProps = (type, name, className, data, required, placeholder, autoSizing, onChange) => {
-  const commonProps = {
-    className,
-    value: data[name].value,
-    placeholder,
+export default function Field({
+  kind,
+  name,
+  field,
+  data,
+  setData,
+  settings,
+  presets
+}) {
+  const {
+    lang,
+    config
+  } = useUbloContext();
+  const {
+    type,
+    label,
+    hidden,
+    fullWidth,
     required
-  };
-  if (type === "textarea") {
-    return {
-      onValueChange: onChange,
-      autoSizing,
-      ...commonProps
-    };
-  }
-  if (type === "multiple-select") {
-    return {
-      onChange,
-      ...commonProps,
-      values: commonProps.value,
-      onBlur: undefined
-    };
-  }
-  if (type === "select") {
-    return {
-      onValueChange: onChange,
-      ...commonProps
-    };
-  }
-  if (type === "number") {
-    return {
-      withInput: true,
-      onChange,
-      ...commonProps
-    };
+  } = 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({
+    [css.fieldFullWidth]: isTitle || fullWidth,
+    [css.fieldHidden]: hidden
+  });
+  if (isTitle) return _jsx("div", {
+    className: css.title,
+    children: label
+  });
+  if (type === "attachment") {
+    return _jsx(Attachment, {
+      lang: lang,
+      name: name,
+      label: label,
+      data: data,
+      setData: setData,
+      settings: settings
+    });
   }
-  return {
-    type,
-    onValueChange: onChange,
-    ...commonProps
-  };
-};
-const getLabel = (lang, label, required) => {
-  if (!required) return `${label} (${Messages.get(lang, "optionnal")})`;
-  return label;
-};
-const Inner = ({
+  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
+  });
+}
+function Inner({
   site,
   lang,
   label,
@@ -89,8 +87,9 @@ const Inner = ({
   setActivated,
   valid,
   setValid
-}) => {
+}) {
   const {
+    icon,
     type,
     className,
     options: fieldOptions = [],
@@ -166,6 +165,7 @@ const Inner = ({
   const isInputValid = required && activated && valid;
   const errorMessage = required && activated && !valid && Messages.get(lang, FIELD_TESTS_ERROR_CODES[type]);
   return _jsx(Tag, {
+    icon: icon,
     label: fieldLabel,
     options: options,
     disabled: disabled,
@@ -174,64 +174,65 @@ const Inner = ({
     onBlur: onBlur,
     ...props
   });
-};
-const Field = ({
-  kind,
-  name,
-  field,
-  data,
-  setData,
-  settings,
-  presets
-}) => {
-  const {
-    lang,
-    config
-  } = useUbloContext();
-  const {
-    type,
-    label,
-    hidden,
-    fullWidth,
+}
+function getTag(type) {
+  switch (type) {
+    case "textarea":
+      return Textarea;
+    case "multiple-select":
+      return MultipleSelect;
+    case "select":
+      return Select;
+    case "checkbox":
+      return Checkbox;
+    case "number":
+      return NumberPicker;
+    default:
+      return Input;
+  }
+}
+function getProps(type, name, className, data, required, placeholder, autoSizing, onChange) {
+  const commonProps = {
+    className,
+    value: data[name].value,
+    placeholder,
     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
-    });
+  };
+  if (type === "textarea") {
+    return {
+      onValueChange: onChange,
+      autoSizing,
+      ...commonProps
+    };
   }
-  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;
+  if (type === "multiple-select") {
+    return {
+      onChange,
+      ...commonProps,
+      values: commonProps.value,
+      onBlur: undefined
+    };
+  }
+  if (type === "select") {
+    return {
+      onValueChange: onChange,
+      ...commonProps
+    };
+  }
+  if (type === "number") {
+    return {
+      withInput: true,
+      onChange,
+      ...commonProps
+    };
+  }
+  return {
+    type,
+    onValueChange: onChange,
+    ...commonProps
+  };
+}
+function getLabel(lang, label, required) {
+  if (!required) return `${label} (${Messages.get(lang, "optionnal")})`;
+  return label;
+}

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

@@ -1,15 +1,7 @@
 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 => {
+export function Upload(props) {
   return _jsxs(Icon, {
     ...props,
     children: [_jsx("path", {
@@ -22,8 +14,8 @@ export const Upload = props => {
       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 => {
+}
+export function File(props) {
   return _jsxs(Icon, {
     ...props,
     children: [_jsx("path", {
@@ -32,8 +24,8 @@ export const File = props => {
       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 => {
+}
+export function Bin(props) {
   return _jsxs(Icon, {
     ...props,
     children: [_jsx("path", {
@@ -46,12 +38,22 @@ export const Bin = props => {
       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 => {
+}
+export function 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"
     })
   });
-};
+}
+function Icon({
+  children,
+  ...props
+}) {
+  return _jsx("svg", {
+    viewBox: "0 0 24 24",
+    ...props,
+    children: children
+  });
+}

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

@@ -73,8 +73,8 @@ const locales = {
     optionnal: "optionnal"
   }
 };
-export const get = (lang, id) => {
+export function 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

@@ -17,45 +17,55 @@ export const FIELD_TESTS_ERROR_CODES = {
   "multiple-select": "TESTS_MULTIPLE_SELECT_ERROR"
 };
 const IGNORED_FIELDS = ["title", "subject", "attachment", "checkbox"];
-export const getInitialFormState = (fields, presets, existingSubject) => Object.keys(fields).reduce((acc, key) => {
-  const field = fields[key];
-  const {
-    required,
-    type
-  } = field;
-  if (type === "title") return acc;
-  if (key === "subject") {
-    const value = (existingSubject || presets?.[key]) ?? "";
-    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 === "multiple-select") {
-    const value = presets?.[key].length || [];
+export function getInitialFormState(fields, presets, existingSubject) {
+  return Object.keys(fields).reduce((acc, key) => {
+    const field = fields[key];
+    const {
+      required,
+      type
+    } = field;
+    if (type === "title") return acc;
+    if (key === "subject") {
+      const value = (existingSubject || presets?.[key]) ?? "";
+      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 === "multiple-select") {
+      const value = presets?.[key].length || [];
+      return {
+        ...acc,
+        [key]: {
+          value,
+          valid: validate(type, value, required)
+        }
+      };
+    }
+    const value = presets?.[key] ?? "";
     return {
       ...acc,
       [key]: {
@@ -63,16 +73,8 @@ export const getInitialFormState = (fields, presets, existingSubject) => Object.
         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 === "multiple-select") return value.length > 0;
@@ -127,7 +129,7 @@ export const send = async ({
   const json = response.json();
   return json;
 };
-export const getSettings = async site => {
+export async function getSettings(site) {
   const endpoint = `https://contacts.valraiso.net/api/settings/${site}`;
   try {
     const response = await Fetcher.get(endpoint);
@@ -135,4 +137,4 @@ export const getSettings = async site => {
   } catch (e) {
     return undefined;
   }
-};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.12.24",
+  "version": "1.12.26",
   "peerDependencies": {
     "dt-design-system": "^2.1.0",
     "leaflet": "^1.9.1",