ublo-lib 1.31.43 → 1.31.44

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

@@ -4,208 +4,138 @@ import * as Messages from "./messages";
 import * as Icons from "./icons";
 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";
-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);
-  const items = data?.attachment?.value || [];
-  const {
-    attachmentAllowed,
-    attachmentMaxSize,
-    attachmentAuthorizedFormats,
-    attachmentMaxFiles
-  } = settings;
-  const splittedFormats = attachmentAuthorizedFormats?.split(",");
-  const formatedAuthorizedFormats = splittedFormats?.map((format, i) => `${i > 0 ? "," : ""} ${getFormatName(format)}`);
-  const handleDrop = React.useCallback(files => {
-    const authorizedSelectionFormats = files.every(file => splittedFormats.includes(file.type));
-    if (!authorizedSelectionFormats) {
-      return {
-        error: Messages.get(lang, "attachmentFormatError")
-      };
-    }
-    const authorizedSelectionFileNumber = files.length > 0 && files.length <= attachmentMaxFiles - items.length;
-    if (!authorizedSelectionFileNumber) {
-      return {
-        error: Messages.get(lang, "attachmentNumberError")
-      };
-    }
-    const maxSizeinOctet = attachmentMaxSize * 1000000;
-    const authorizedSelectionFileSize = files.every(file => file.size < maxSizeinOctet);
-    if (!authorizedSelectionFileSize) {
-      return {
-        error: Messages.get(lang, "attachmentSizeError")
-      };
-    }
-    return {
-      success: true
+export default function Attachment({ lang, name, label, settings, data, setData, }) {
+    var _a;
+    const ref = React.useRef();
+    const [dragging, setDragging] = React.useState(false);
+    const [error, setError] = React.useState(false);
+    const items = ((_a = data === null || data === void 0 ? void 0 : data.attachment) === null || _a === void 0 ? void 0 : _a.value) || [];
+    const { attachmentAllowed, attachmentMaxSize, attachmentAuthorizedFormats, attachmentMaxFiles, } = settings;
+    const splittedFormats = attachmentAuthorizedFormats === null || attachmentAuthorizedFormats === void 0 ? void 0 : attachmentAuthorizedFormats.split(",");
+    const formatedAuthorizedFormats = splittedFormats === null || splittedFormats === void 0 ? void 0 : splittedFormats.map((format, i) => `${i > 0 ? "," : ""} ${getFormatName(format)}`);
+    const handleDrop = React.useCallback((files) => {
+        const authorizedSelectionFormats = files.every((file) => splittedFormats.includes(file.type));
+        if (!authorizedSelectionFormats) {
+            return { error: Messages.get(lang, "attachmentFormatError") };
+        }
+        const authorizedSelectionFileNumber = files.length > 0 && files.length <= attachmentMaxFiles - items.length;
+        if (!authorizedSelectionFileNumber) {
+            return { error: Messages.get(lang, "attachmentNumberError") };
+        }
+        const maxSizeinOctet = attachmentMaxSize * 1000000;
+        const authorizedSelectionFileSize = files.every((file) => file.size < maxSizeinOctet);
+        if (!authorizedSelectionFileSize) {
+            return { error: Messages.get(lang, "attachmentSizeError") };
+        }
+        return { success: true };
+    }, [attachmentMaxFiles, attachmentMaxSize, items.length, lang, splittedFormats]);
+    const onChange = React.useCallback((e) => {
+        const files = Array.from((e.dataTransfer || e.target).files || []);
+        const { success, error } = handleDrop(files);
+        if (success) {
+            setData((data) => {
+                var _a;
+                const currentFiles = ((_a = data === null || data === void 0 ? void 0 : data.attachment) === null || _a === void 0 ? void 0 : _a.value) || [];
+                const newFiles = convertToFileList([...currentFiles, ...files]);
+                return Object.assign(Object.assign({}, data), { attachment: { value: newFiles, valid: true } });
+            });
+        }
+        else {
+            setError(error);
+            setTimeout(() => setError(undefined), 5000);
+        }
+    }, [handleDrop, setData]);
+    const removeItem = (name) => {
+        const newItems = convertToFileList(Array.from(items).filter((item) => item.name !== name));
+        setData((data) => (Object.assign(Object.assign({}, data), { attachment: { value: newItems, valid: true } })));
     };
-  }, [attachmentMaxFiles, attachmentMaxSize, items.length, lang, splittedFormats]);
-  const onChange = React.useCallback(e => {
-    const files = Array.from((e.dataTransfer || e.target).files || []);
-    const {
-      success,
-      error
-    } = handleDrop(files);
-    if (success) {
-      setData(data => {
-        const currentFiles = data?.attachment?.value || [];
-        const newFiles = convertToFileList([...currentFiles, ...files]);
-        return {
-          ...data,
-          attachment: {
-            value: newFiles,
-            valid: true
-          }
-        };
-      });
-    } else {
-      setError(error);
-      setTimeout(() => setError(undefined), 5000);
-    }
-  }, [handleDrop, setData]);
-  const removeItem = name => {
-    const newItems = convertToFileList(Array.from(items).filter(item => item.name !== name));
-    setData(data => ({
-      ...data,
-      attachment: {
-        value: newItems,
-        valid: true
-      }
-    }));
-  };
-  const onDragIn = React.useCallback(e => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (e.dataTransfer.items) {
-      setError(undefined);
-      setDragging(e.dataTransfer.items.length > 0);
-    }
-  }, []);
-  const onDragOut = React.useCallback(e => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDragging(false);
-  }, []);
-  const onDrop = React.useCallback(e => {
-    e.preventDefault();
-    e.stopPropagation();
-    onChange(e);
-    e.dataTransfer.clearData();
-    setDragging(false);
-  }, [onChange]);
-  const onDragOver = e => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-  React.useEffect(() => {
-    const container = ref.current;
-    if (container) {
-      container.addEventListener("dragenter", onDragIn);
-      container.addEventListener("dragleave", onDragOut);
-      container.addEventListener("drop", onDrop);
-      container.addEventListener("dragover", onDragOver);
-      return () => {
-        container.removeEventListener("dragover", onDragOver);
-        container.removeEventListener("drop", onDrop);
-        container.removeEventListener("dragleave", onDragOut);
-        container.removeEventListener("dragenter", onDragIn);
-      };
-    }
-  }, [onDragIn, onDragOut, onDrop]);
-  const overlayMessage = error || dragging && Messages.get(lang, "attachmentOverlay");
-  const attachmentcss = classNames(css.attachment, {
-    [css.attachmentDragging]: dragging
-  });
-  const overlaycss = classNames(css.inputOverlay, {
-    [css.inputOverlayError]: error
-  });
-  if (!attachmentAllowed) return null;
-  return _jsxs("div", {
-    className: attachmentcss,
-    children: [_jsxs("label", {
-      className: css.label,
-      htmlFor: name,
-      children: [label && _jsx("span", {
-        children: label
-      }), _jsxs("div", {
-        ref: ref,
-        className: css.input,
-        children: [items.length ? _jsx("div", {
-          className: css.items,
-          children: Array.from(items).map((item, i) => _jsx(Item, {
-            item: item,
-            removeItem: removeItem
-          }, i))
-        }) : _jsxs("div", {
-          className: css.placeholder,
-          children: [_jsx(Icons.Upload, {
-            className: css.placeholderIcon
-          }), Messages.get(lang, "attachmentPlaceholder")]
-        }), (error || dragging) && _jsx("div", {
-          className: overlaycss,
-          children: overlayMessage
-        })]
-      }), _jsx("input", {
-        id: name,
-        className: css.uploadInput,
-        type: "file",
-        accept: attachmentAuthorizedFormats,
-        disabled: !attachmentAllowed,
-        onChange: onChange,
-        multiple: attachmentMaxFiles > 1
-      })]
-    }), _jsxs("div", {
-      className: css.helper,
-      children: [_jsx("b", {
-        children: attachmentMaxFiles
-      }), " ", Messages.get(lang, "attachmentHelper1"), ".", " ", _jsx("b", {
-        children: attachmentMaxSize
-      }), Messages.get(lang, "attachmentHelper2"), ".", " ", Messages.get(lang, "attachmentHelper3"), " ", _jsx("b", {
-        children: formatedAuthorizedFormats
-      }), "."]
-    })]
-  });
+    const onDragIn = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.dataTransfer.items) {
+            setError(undefined);
+            setDragging(e.dataTransfer.items.length > 0);
+        }
+    }, []);
+    const onDragOut = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragging(false);
+    }, []);
+    const onDrop = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onChange(e);
+        e.dataTransfer.clearData();
+        setDragging(false);
+    }, [onChange]);
+    const onDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    React.useEffect(() => {
+        const container = ref.current;
+        if (container) {
+            container.addEventListener("dragenter", onDragIn);
+            container.addEventListener("dragleave", onDragOut);
+            container.addEventListener("drop", onDrop);
+            container.addEventListener("dragover", onDragOver);
+            return () => {
+                container.removeEventListener("dragover", onDragOver);
+                container.removeEventListener("drop", onDrop);
+                container.removeEventListener("dragleave", onDragOut);
+                container.removeEventListener("dragenter", onDragIn);
+            };
+        }
+    }, [onDragIn, onDragOut, onDrop]);
+    const overlayMessage = error || (dragging && Messages.get(lang, "attachmentOverlay"));
+    const attachmentcss = classNames(css.attachment, {
+        [css.attachmentDragging]: dragging,
+    });
+    const overlaycss = classNames(css.inputOverlay, {
+        [css.inputOverlayError]: error,
+    });
+    if (!attachmentAllowed)
+        return null;
+    return (<div className={attachmentcss}>
+      <label className={css.label} htmlFor={name}>
+        {label && <span>{label}</span>}
+        <div ref={ref} className={css.input}>
+          {items.length ? (<div className={css.items}>
+              {Array.from(items).map((item, i) => (<Item key={i} item={item} removeItem={removeItem}/>))}
+            </div>) : (<div className={css.placeholder}>
+              <Icons.Upload className={css.placeholderIcon}/>
+              {Messages.get(lang, "attachmentPlaceholder")}
+            </div>)}
+          {(error || dragging) && (<div className={overlaycss}>{overlayMessage}</div>)}
+        </div>
+        <input id={name} className={css.uploadInput} type="file" accept={attachmentAuthorizedFormats} disabled={!attachmentAllowed} onChange={onChange} multiple={attachmentMaxFiles > 1}/>
+      </label>
+      <div className={css.helper}>
+        <b>{attachmentMaxFiles}</b> {Messages.get(lang, "attachmentHelper1")}.{" "}
+        <b>{attachmentMaxSize}</b>
+        {Messages.get(lang, "attachmentHelper2")}.{" "}
+        {Messages.get(lang, "attachmentHelper3")}{" "}
+        <b>{formatedAuthorizedFormats}</b>.
+      </div>
+    </div>);
 }
-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 Item({ item, removeItem }) {
+    const { name } = item;
+    const onRemoveClick = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        removeItem(name);
+    };
+    return (<div className={css.item} onClick={undefined}>
+      <button className={css.itemRemove} onClick={onRemoveClick}>
+        <Icons.Bin className={css.itemRemoveIcon}/>
+      </button>
+      <Icons.File className={css.itemIcon}/>
+      <span className={css.itemName}>{name}</span>
+    </div>);
 }
 function getFormatName(format) {
-  const splittedName = format.split("/");
-  return splittedName[splittedName.length - 1];
-}
+    const splittedName = format.split("/");
+    return splittedName[splittedName.length - 1];
+}

package/es/common/components/custom-contact-form/custom-contact-form.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+type Props = {
+    kind?: string;
+    title?: string;
+    fields: Record<string, Record<string, string | number | boolean>>;
+    presets?: {
+        values?: Record<string, string | number>;
+        setter?: React.Dispatch<React.SetStateAction<Record<string, string> | undefined>>;
+        allowReset?: boolean;
+        disableFields?: boolean;
+    };
+    className?: string;
+    innerClassName?: string;
+    subject?: {
+        prefix?: string;
+        suffix?: string;
+    };
+    onSubmit?: (data: any) => void;
+    customSend?: (data: any) => Promise<unknown>;
+    sendButtonText?: string;
+};
+declare const _default: React.MemoExoticComponent<typeof CustomContactFormWithSnackbar>;
+export default _default;
+declare function CustomContactFormWithSnackbar(props: Props): React.JSX.Element;

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

@@ -0,0 +1,121 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import * as React from "react";
+import classNames from "classnames";
+import { useUbloContext } from "ublo/with-ublo";
+import Field from "./field";
+import { SnackbarProvider, useSnackbar } from "dt-design-system/es/snackbar";
+import Button from "dt-design-system/es/button";
+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 { getInitialFormState, getSettings, send } from "./utils";
+import css from "./custom-contact-form.module.css";
+export default React.memo(CustomContactFormWithSnackbar);
+function CustomContactFormWithSnackbar(props) {
+    return (<SnackbarProvider>
+      <CustomContactForm {...props}/>
+    </SnackbarProvider>);
+}
+function CustomContactForm({ kind, title, fields, presets, className, innerClassName, subject, onSubmit, customSend, sendButtonText, }) {
+    const [data, setData] = React.useState(getInitialFormState(fields, presets === null || presets === void 0 ? void 0 : presets.values));
+    const [sending, setSending] = React.useState(false);
+    const [ready, setReady] = React.useState(false);
+    const [settings, setSettings] = React.useState();
+    const { lang, config } = useUbloContext();
+    const { site } = config;
+    const snackbar = useSnackbar();
+    const isFormValid = Object.keys(data).every((key) => data[key].valid);
+    const sendForm = () => __awaiter(this, void 0, void 0, function* () {
+        setSending(true);
+        const sendFunction = customSend || send;
+        const { message, error } = yield sendFunction({
+            site,
+            data,
+            fields,
+            subjectPrefix: subject === null || subject === void 0 ? void 0 : subject.prefix,
+            subjectSuffix: subject === null || subject === void 0 ? void 0 : subject.suffix,
+            kind,
+        });
+        if (error) {
+            snackbar.show({ type: "error", message: error });
+        }
+        else {
+            snackbar.show({ type: "success", message: Messages.get(lang, "sent") });
+            Plausible.sendGoal("Contact-us (other requests)");
+            setData((currentData) => { var _a; return getInitialFormState(fields, undefined, (_a = currentData.subject) === null || _a === void 0 ? void 0 : _a.value); });
+            resetForm();
+        }
+        setSending(false);
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({ data, message, error });
+    });
+    const resetForm = () => {
+        var _a;
+        (_a = presets === null || presets === void 0 ? void 0 : presets.setter) === null || _a === void 0 ? void 0 : _a.call(presets, undefined);
+        setData((currentData) => { var _a; return getInitialFormState(fields, undefined, (_a = currentData.subject) === null || _a === void 0 ? void 0 : _a.value); });
+    };
+    const blurForm = () => {
+        const activeElement = document.activeElement;
+        if (activeElement) {
+            activeElement.blur();
+        }
+    };
+    React.useEffect(() => {
+        if (!ready && !settings) {
+            const init = () => __awaiter(this, void 0, void 0, function* () {
+                if (typeof customSend === "function") {
+                    setReady(true);
+                    setSettings({});
+                    return;
+                }
+                const formSettings = yield getSettings(site);
+                setSettings(formSettings);
+                setReady(true);
+            });
+            init();
+        }
+    }, [customSend, ready, settings, site]);
+    React.useEffect(() => {
+        setData((currentData) => { var _a; return getInitialFormState(fields, presets === null || presets === void 0 ? void 0 : presets.values, (_a = currentData.subject) === null || _a === void 0 ? void 0 : _a.value); });
+    }, [fields, presets === null || presets === void 0 ? void 0 : presets.values]);
+    const classes = classNames(css.root, className);
+    const innerClasses = classNames(css.inner, {
+        [innerClassName]: innerClassName,
+    });
+    const showSendingOverlay = !!(settings === null || settings === void 0 ? void 0 : settings.attachmentAllowed) && sending;
+    if (!ready)
+        return null;
+    if (ready && !settings) {
+        return (<div className={css.root}>{Messages.get(lang, "NO_SETTINGS_FOUND")}</div>);
+    }
+    const formKey = presets ? JSON.stringify(presets.values) : undefined;
+    return (<div key={formKey} className={classes}>
+      {title && <div className={css.title}>{title}</div>}
+      <div className={innerClasses}>
+        {Object.keys(fields).map((key) => (<Field key={key} kind={kind} name={key} field={fields[key]} data={data} setData={setData} settings={settings} presets={presets}/>))}
+      </div>
+      <div className={css.bottom}>
+        {(presets === null || presets === void 0 ? void 0 : presets.allowReset) && (<Button className={css.resetButton} disabled={sending} onClick={resetForm}>
+            {Messages.get(lang, "reset")}
+          </Button>)}
+        <Button className={css.submitButton} disabled={!isFormValid || sending} onClick={sendForm} onPointerEnter={blurForm}>
+          {sendButtonText || Messages.get(lang, "send")}
+          <DTIcons.Mail />
+        </Button>
+      </div>
+      {showSendingOverlay && (<div className={css.sendingOverlay}>
+          <Icons.Spinner className={css.sendingIcon}/>
+          <span className={css.sendingMessage}>
+            {Messages.get(lang, "sending")}
+          </span>
+        </div>)}
+    </div>);
+}

package/es/common/components/custom-contact-form/field.d.ts

@@ -0,0 +1,10 @@
+export default function Field({ kind, name, field, data, setData, settings, presets, }: {
+    kind: any;
+    name: any;
+    field: any;
+    data: any;
+    setData: any;
+    settings: any;
+    presets: any;
+}): React.JSX.Element;
+import * as React from "react";