@bigbinary/neeto-molecules 1.1.10 → 1.1.11

package/dist/Settings/index.js

@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+import { getQueryParams } from "@bigbinary/neeto-commons-frontend/utils";
+import { NoData } from "@bigbinary/neetoui";
+import { isEmpty } from "ramda";
+import { useTranslation } from "react-i18next";
+import Category from "./Category";
+import { scrollIntoSettingCategory } from "./utils";
+var Settings = function Settings(_ref) {
+  var _ref$categories = _ref.categories,
+    categories = _ref$categories === void 0 ? [] : _ref$categories;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _getQueryParams = getQueryParams(),
+    categoryParam = _getQueryParams.category;
+  useEffect(function () {
+    scrollIntoSettingCategory(categoryParam === null || categoryParam === void 0 ? void 0 : categoryParam.toUpperCase());
+  }, [categoryParam]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isEmpty(categories) ? /*#__PURE__*/React.createElement("div", {
+    className: "flex h-full w-full flex-grow items-center justify-center",
+    "data-testid": "settings-no-data"
+  }, /*#__PURE__*/React.createElement(NoData, {
+    title: t("neetoMolecules.settingsPage.noData")
+  })) : categories.map(function (_ref2) {
+    var id = _ref2.id,
+      label = _ref2.label,
+      items = _ref2.items,
+      isIntegration = _ref2.isIntegration;
+    return /*#__PURE__*/React.createElement(Category, {
+      id: id,
+      isIntegration: isIntegration,
+      items: items,
+      label: label,
+      key: id
+    });
+  }));
+};
+export default Settings;

package/dist/Settings/utils.js

@@ -0,0 +1,4 @@
+export var scrollIntoSettingCategory = function scrollIntoSettingCategory(activeCategory) {
+  var _document$getElementB;
+  (_document$getElementB = document.getElementById(activeCategory)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView();
+};

package/dist/ShareViaEmail/EmailBodyEditor.js

@@ -0,0 +1,22 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React, { forwardRef } from "react";
+import { FormikEditor } from "@bigbinary/neeto-editor";
+import { useTranslation } from "react-i18next";
+import { EDITOR_ADDONS } from "./constants";
+var EmailBody = function EmailBody(_ref, ref) {
+  var id = _ref.id,
+    showVideoEmbedInEditor = _ref.showVideoEmbedInEditor;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement(FormikEditor, {
+    required: true,
+    className: "mb-6",
+    "data-cy": "email-body",
+    id: id,
+    label: t("neetoMolecules.shareViaEmail.emailBody"),
+    name: "emailBody",
+    ref: ref,
+    addons: showVideoEmbedInEditor ? [].concat(_toConsumableArray(EDITOR_ADDONS), ["video-embed"]) : EDITOR_ADDONS
+  });
+};
+export default /*#__PURE__*/forwardRef(EmailBody);

package/dist/ShareViaEmail/FilePicker.js

@@ -0,0 +1,43 @@
+import React, { useRef } from "react";
+import { Upload } from "@bigbinary/neeto-icons";
+import { Button } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+var FilePicker = function FilePicker(_ref) {
+  var _ref$types = _ref.types,
+    types = _ref$types === void 0 ? [] : _ref$types,
+    onChange = _ref.onChange;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var inputRef = useRef();
+  var accept = types.join(", ");
+  var handleInputChange = function handleInputChange(_ref2) {
+    var target = _ref2.target;
+    if (!target.files) return;
+    onChange(target.files);
+
+    // This will trigger handleClick when same file is uploaded again.
+    inputRef.current.value = "";
+    handleClick();
+  };
+  var handleClick = function handleClick() {
+    if (!inputRef.current) return;
+    inputRef.current.click();
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    icon: Upload,
+    label: t("neetoMolecules.shareViaEmail.uploadCsv"),
+    size: "small",
+    style: "link",
+    tooltipProps: {
+      content: t("neetoMolecules.shareViaEmail.uploadCsvTooltip")
+    },
+    onClick: handleClick
+  }), /*#__PURE__*/React.createElement("input", {
+    accept: accept,
+    className: "hidden",
+    ref: inputRef,
+    type: "file",
+    onChange: handleInputChange
+  }));
+};
+export default /*#__PURE__*/React.memo(FilePicker);

package/dist/ShareViaEmail/Form.js

@@ -0,0 +1,101 @@
+import React, { useRef } from "react";
+import classnames from "classnames";
+import { useFormikContext } from "formik";
+import { Typography, Label } from "@bigbinary/neetoui";
+import { Input, Switch, ActionBlock } from "@bigbinary/neetoui/formik";
+import { useTranslation } from "react-i18next";
+import SendToFields from "../SendToFields";
+import EmailBody from "./EmailBodyEditor";
+import FormikDatePicker from "./FormikDatePicker";
+import { isPastDate } from "./utils";
+var Form = function Form(_ref) {
+  var disableReplyTo = _ref.disableReplyTo,
+    showVideoEmbedInEditor = _ref.showVideoEmbedInEditor,
+    children = _ref.children;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values,
+    initialValues = _useFormikContext.initialValues;
+  var editorRef = useRef();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleReset = function handleReset() {
+    return editorRef.current.editor.commands.setContent(initialValues.emailBody);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "space-y-4"
+  }, /*#__PURE__*/React.createElement(SendToFields, {
+    showUploadCsvButton: true,
+    emailInputProps: {
+      label: t("neetoMolecules.shareViaEmail.sendTo"),
+      name: "notifyEmails"
+    }
+  }), /*#__PURE__*/React.createElement(Input, {
+    required: true,
+    className: "col-span-1",
+    label: t("neetoMolecules.shareViaEmail.subject"),
+    name: "emailSubject"
+  }), /*#__PURE__*/React.createElement(EmailBody, {
+    id: "emailBody",
+    ref: editorRef,
+    showVideoEmbedInEditor: showVideoEmbedInEditor
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: editorRef
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement(Switch, {
+    "data-cy": "send-later-switch",
+    "data-testid": "send-later-switch",
+    name: "isSendLaterEnabled"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    component: "span",
+    "data-cy": "send-later-label",
+    lineHeight: "normal",
+    style: "h4",
+    weight: "semibold"
+  }, t("neetoMolecules.shareViaEmail.sendLater")))), values.isSendLaterEnabled && /*#__PURE__*/React.createElement(FormikDatePicker, {
+    autoFocus: true,
+    showTime: true,
+    "data-cy": "email-share-date-input",
+    "data-testid": "formik-date-picker",
+    disabledDate: isPastDate,
+    name: "sendEmailDatetime",
+    picker: "date",
+    size: "large",
+    type: "date"
+  }), /*#__PURE__*/React.createElement(Input, {
+    required: true,
+    label: t("neetoMolecules.shareViaEmail.startButtonText"),
+    name: "actionButtonText"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classnames({
+      "grid grid-cols-2 gap-6": !disableReplyTo
+    })
+  }, /*#__PURE__*/React.createElement(Input, {
+    required: true,
+    className: "col-auto",
+    label: t("neetoMolecules.shareViaEmail.sendFrom"),
+    name: "sendFromEmail"
+  }), !disableReplyTo && /*#__PURE__*/React.createElement(Input, {
+    required: true,
+    className: "col-auto",
+    "data-testid": "replyTo-field",
+    label: t("neetoMolecules.shareViaEmail.replyTo"),
+    name: "replyToEmail"
+  }))), children && /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-border-gray-300 mt-4 border-t py-4"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "mb-4"
+  }, t("neetoMolecules.shareViaEmail.additionalOptions")), children), /*#__PURE__*/React.createElement("div", {
+    className: "mt-6"
+  }, /*#__PURE__*/React.createElement(ActionBlock, {
+    cancelButtonProps: {
+      label: t("neetoMolecules.shareViaEmail.reset"),
+      type: "reset",
+      onClick: handleReset
+    },
+    submitButtonProps: {
+      label: t("neetoMolecules.shareViaEmail.sendEmail")
+    }
+  })));
+};
+export default Form;

package/dist/ShareViaEmail/FormikDatePicker.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name"];
+import React from "react";
+import { useField } from "formik";
+import { DatePicker } from "@bigbinary/neetoui";
+var FormikDatePicker = function FormikDatePicker(_ref) {
+  var name = _ref.name,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useField = useField(name),
+    _useField2 = _slicedToArray(_useField, 3),
+    field = _useField2[0],
+    meta = _useField2[1],
+    setValue = _useField2[2].setValue;
+  return /*#__PURE__*/React.createElement(DatePicker, _extends({}, field, meta, {
+    onChange: function onChange(date) {
+      return setValue(date || undefined);
+    }
+  }, props, {
+    "data-cy": "email-share-date-input"
+  }));
+};
+export default FormikDatePicker;

package/dist/ShareViaEmail/constants.js

@@ -0,0 +1,14 @@
+export var ONE_MEGABYTE = 1048576;
+export var INITIAL_VALUES = {
+  sendFromEmail: "",
+  replyToEmail: "",
+  notifyEmails: [],
+  emailSubject: "",
+  emailBody: "",
+  isSendLaterEnabled: false,
+  sendEmailDatetime: undefined,
+  category: "email_share",
+  actionButtonText: ""
+};
+export var EDITOR_ADDONS = ["emoji", "block-quote", "image-upload", "divider"];
+export var ALLOWED_FILE_PICKER_TYPES = [".csv"];

package/dist/ShareViaEmail/index.js

@@ -0,0 +1,89 @@
+import React from "react";
+import { LeftArrow } from "@bigbinary/neeto-icons";
+import { Button, Typography } from "@bigbinary/neetoui";
+import { Form } from "@bigbinary/neetoui/formik";
+import { useTranslation } from "react-i18next";
+import EmailPreview from "../EmailPreview";
+import EmailForm from "./Form";
+import { emailFormValidationSchema, generateInitialValues } from "./utils";
+var ShareViaEmail = function ShareViaEmail(_ref) {
+  var backToUrl = _ref.backToUrl,
+    handleSubmit = _ref.handleSubmit,
+    children = _ref.children,
+    description = _ref.description,
+    defaultValues = _ref.defaultValues,
+    disableReplyTo = _ref.disableReplyTo,
+    productName = _ref.productName,
+    showVideoEmbedInEditor = _ref.showVideoEmbedInEditor,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "" : _ref$title;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var shareViaEmailTitle = title || t("neetoMolecules.shareViaEmail.title");
+  var sendToEmails = function sendToEmails(notifyEmails) {
+    return notifyEmails.map(function (email) {
+      return email === null || email === void 0 ? void 0 : email.value;
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-gray-100 flex w-full flex-1 flex-col p-8"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mx-auto flex w-full max-w-7xl flex-col"
+  }, /*#__PURE__*/React.createElement(Form, {
+    scrollToErrorField: true,
+    formProps: {
+      noValidate: true
+    },
+    formikProps: {
+      enableReinitialize: true,
+      validateOnMount: true,
+      initialValues: generateInitialValues(defaultValues),
+      validationSchema: emailFormValidationSchema(disableReplyTo),
+      onSubmit: handleSubmit
+    }
+  }, function (_ref2) {
+    var values = _ref2.values;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "grid grid-cols-12 gap-8"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "col-span-5"
+    }, backToUrl && /*#__PURE__*/React.createElement(Button, {
+      className: "mb-4",
+      "data-testid": "back-to-url-button",
+      icon: LeftArrow,
+      iconPosition: "left",
+      label: t("neetoMolecules.shareViaEmail.backToShare"),
+      size: "small",
+      style: "link",
+      to: backToUrl
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "mb-6"
+    }, /*#__PURE__*/React.createElement(Typography, {
+      className: "mb-0.5 break-words",
+      "data-cy": "share-via-email-heading",
+      lineHeight: "normal",
+      style: "h2",
+      weight: "semibold"
+    }, shareViaEmailTitle), description && /*#__PURE__*/React.createElement(Typography, {
+      className: "neeto-ui-text-gray-700",
+      "data-cy": "share-via-email-sub-heading",
+      lineHeight: "normal",
+      style: "body2"
+    }, description)), /*#__PURE__*/React.createElement(EmailForm, {
+      disableReplyTo: disableReplyTo,
+      showVideoEmbedInEditor: showVideoEmbedInEditor
+    }, children)), /*#__PURE__*/React.createElement("div", {
+      className: "col-span-7"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "sticky top-10 pt-10"
+    }, /*#__PURE__*/React.createElement(EmailPreview, {
+      actionButtonText: values.actionButtonText,
+      body: values.emailBody,
+      from: values.sendFromEmail,
+      productName: productName,
+      subject: values.emailSubject,
+      to: sendToEmails(values.notifyEmails)
+    }))));
+  })));
+};
+export default ShareViaEmail;

package/dist/ShareViaEmail/utils.js

@@ -0,0 +1,72 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import dayjs from "dayjs";
+import { t } from "i18next";
+import { isNot } from "@bigbinary/neeto-commons-frontend/pure";
+import { isEditorEmpty } from "@bigbinary/neeto-editor";
+import Papa from "papaparse";
+import { prop } from "ramda";
+import { string } from "yup";
+import * as yup from "yup";
+import { INITIAL_VALUES } from "./constants";
+var isValidEmail = function isValidEmail(email) {
+  return string().email().isValidSync(email);
+};
+export var isPastDate = function isPastDate(date) {
+  return dayjs(date).isBefore(dayjs().subtract(1, "days"));
+};
+export var createEmailOptions = function createEmailOptions() {
+  var emails = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return emails.map(function (email) {
+    return {
+      label: email,
+      value: email,
+      valid: isValidEmail(email)
+    };
+  });
+};
+export var parseCsvEmails = function parseCsvEmails(file) {
+  return new Promise(function (resolve) {
+    Papa.parse(file, {
+      header: true,
+      skipEmptyLines: true,
+      transformHeader: function transformHeader(h) {
+        return h.toLowerCase().replace(/\W/g, "");
+      },
+      complete: function complete(results) {
+        var _results$meta$fields;
+        var isEmailFieldPresent = (_results$meta$fields = results.meta.fields) === null || _results$meta$fields === void 0 ? void 0 : _results$meta$fields.includes("email");
+        if (!isEmailFieldPresent) return resolve([]);
+        var emails = results.data.map(function (item) {
+          var _item$email;
+          return (_item$email = item.email) === null || _item$email === void 0 ? void 0 : _item$email.trim();
+        }).filter(isNot(undefined));
+        return resolve(createEmailOptions(emails));
+      }
+    });
+  });
+};
+export var generateInitialValues = function generateInitialValues(defaultValues) {
+  return _objectSpread(_objectSpread({}, INITIAL_VALUES), defaultValues);
+};
+export var emailFormValidationSchema = function emailFormValidationSchema(disableReplyTo) {
+  return yup.object().shape({
+    emailSubject: yup.string().required(t("neetoMolecules.shareViaEmail.validations.requiredField.subject")),
+    emailBody: yup.string().test("emailBody", t("neetoMolecules.shareViaEmail.validations.requiredField.emailBody"), function (value) {
+      return !isEditorEmpty(value);
+    }),
+    sendFromEmail: yup.string().trim().email(t("neetoMolecules.shareViaEmail.validations.invalidField.emailAddress")).required(t("neetoMolecules.shareViaEmail.validations.requiredField.sendFrom")),
+    replyToEmail: !disableReplyTo && yup.string().trim().email(t("neetoMolecules.shareViaEmail.validations.invalidField.emailAddress")).required(t("neetoMolecules.shareViaEmail.validations.requiredField.replyTo")),
+    notifyEmails: yup.array().min(1, t("neetoMolecules.shareViaEmail.validations.atleastOneIsRequired.emailAddress")).test("are-all-emails-valid", t("neetoMolecules.shareViaEmail.validations.invalidField.emailAddress"), function (emails) {
+      return emails.every(prop("valid"));
+    }),
+    isSendLaterEnabled: yup["boolean"](),
+    sendEmailDatetime: yup.date().when("isSendLaterEnabled", {
+      is: true,
+      then: yup.date().required(t("neetoMolecules.shareViaEmail.validations.requiredField.sendLater"))
+    }),
+    name: yup.string(),
+    actionButtonText: yup.string().required(t("neetoMolecules.shareViaEmail.validations.requiredField.startButtonText"))
+  });
+};

package/dist/ShareViaLink/EditURL.js

@@ -0,0 +1,74 @@
+import React, { useRef } from "react";
+import { Form, Formik } from "formik";
+import { Typography, Modal } from "@bigbinary/neetoui";
+import { Input, Button } from "@bigbinary/neetoui/formik";
+import { useTranslation } from "react-i18next";
+import { PATH_VALIDATION_SCHEMA } from "./constants";
+import "./edit-url.scss";
+import { getPathname, getPrefixFromUrl, truncatePrefix } from "./utils";
+var EditURL = function EditURL(_ref) {
+  var editUrlProps = _ref.editUrlProps,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    url = _ref.url,
+    isLoading = _ref.isLoading,
+    handleEdit = _ref.handleEdit;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var focusRef = useRef(null);
+  var handleSubmit = function handleSubmit(values) {
+    handleEdit(values.path);
+    onClose();
+  };
+  return /*#__PURE__*/React.createElement(Modal, {
+    "data-testid": "edit-url-modal",
+    initialFocusRef: focusRef,
+    isOpen: isOpen,
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    lineHeight: "normal",
+    style: "h2",
+    weight: "semibold"
+  }, t("neetoMolecules.shareViaLink.editUrl.title"))), /*#__PURE__*/React.createElement(Formik, {
+    enableReinitialize: true,
+    initialValues: {
+      path: (editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.editablePath) || getPathname(url)
+    },
+    validationSchema: PATH_VALIDATION_SCHEMA,
+    onSubmit: handleSubmit
+  }, function (_ref2) {
+    var isSubmitting = _ref2.isSubmitting,
+      dirty = _ref2.dirty;
+    return /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(Modal.Body, {
+      className: "w-full space-y-6"
+    }, /*#__PURE__*/React.createElement(Input, {
+      className: "no-padding",
+      "data-testid": "edit-url-input",
+      label: t("neetoMolecules.shareViaLink.editUrl.inputLabel"),
+      maxLength: editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.maxLength,
+      name: "path",
+      ref: focusRef,
+      prefix: truncatePrefix((editUrlProps === null || editUrlProps === void 0 ? void 0 : editUrlProps.prefix) || getPrefixFromUrl(url))
+    }), /*#__PURE__*/React.createElement(Typography, {
+      className: "neeto-ui-text-gray-700",
+      lineHeight: "normal",
+      style: "body2"
+    }, t("neetoMolecules.shareViaLink.editUrl.description"))), /*#__PURE__*/React.createElement(Modal.Footer, {
+      className: "space-x-2"
+    }, /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "edit-url-confirm-button",
+      disabled: isSubmitting || !dirty,
+      loading: isLoading,
+      type: "submit",
+      label: t("neetoMolecules.shareViaLink.editUrl.submitButtonLabel")
+    }), /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "edit-url-cancel-button",
+      disabled: isSubmitting,
+      style: "text",
+      type: "reset",
+      label: t("neetoMolecules.shareViaLink.editUrl.cancelButtonLabel"),
+      onClick: onClose
+    })));
+  }));
+};
+export default EditURL;

package/dist/ShareViaLink/Link.js

@@ -0,0 +1,105 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from "react";
+import { ExternalLink } from "@bigbinary/neeto-icons";
+import { Typography, Input, Button } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+import CopyToClipboardButton from "../CopyToClipboardButton";
+import MoreDropdown from "../MoreDropdown";
+import EditURL from "./EditURL";
+import RegenerateURL from "./RegenerateURL";
+var Link = function Link(_ref) {
+  var editUrlProps = _ref.editUrlProps,
+    enabledOptions = _ref.enabledOptions,
+    entityName = _ref.entityName,
+    handleEdit = _ref.handleEdit,
+    handleRegenerate = _ref.handleRegenerate,
+    isLoading = _ref.isLoading,
+    previewUrl = _ref.previewUrl,
+    url = _ref.url;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isRegenerateURLModalOpen = _useState2[0],
+    setIsRegenerateURLModalOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isEditURLModalOpen = _useState4[0],
+    setIsEditURLModalOpen = _useState4[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var isDropdownEnabled = enabledOptions.regenerate || enabledOptions.edit;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "space-y-4",
+    "data-testid": "link-block"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "space-y-0.5"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    "data-testid": "link-title",
+    lineHeight: "normal",
+    style: "h3",
+    weight: "semibold"
+  }, t("neetoMolecules.shareViaLink.title")), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-700",
+    "data-testid": "link-description",
+    lineHeight: "normal",
+    style: "body2"
+  }, t("neetoMolecules.shareViaLink.description", {
+    entity: entityName
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-1"
+  }, /*#__PURE__*/React.createElement(Input, {
+    readOnly: true,
+    value: url
+  }), /*#__PURE__*/React.createElement(CopyToClipboardButton, {
+    "data-testid": "link-copy-button",
+    label: t("neetoMolecules.shareViaLink.copyLink"),
+    value: url
+  }), /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "preview-button",
+    href: previewUrl || url,
+    icon: ExternalLink,
+    style: "secondary",
+    target: "_blank",
+    tooltipProps: {
+      content: t("neetoMolecules.shareViaLink.open", {
+        entity: entityName
+      }),
+      position: "top"
+    }
+  }), isDropdownEnabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MoreDropdown, {
+    menuItems: [{
+      isVisible: enabledOptions.regenerate,
+      "data-testid": "regenerate-url-button",
+      onClick: function onClick() {
+        return setIsRegenerateURLModalOpen(true);
+      },
+      label: t("neetoMolecules.shareViaLink.regenerateUrl.title"),
+      key: "regenerate-url-option"
+    }, {
+      isVisible: enabledOptions.edit,
+      "data-testid": "edit-url-button",
+      onClick: function onClick() {
+        return setIsEditURLModalOpen(true);
+      },
+      label: t("neetoMolecules.shareViaLink.editUrl.title"),
+      key: "edit-url-option"
+    }]
+  }), /*#__PURE__*/React.createElement(RegenerateURL, {
+    handleRegenerate: handleRegenerate,
+    isLoading: isLoading,
+    url: url,
+    isOpen: isRegenerateURLModalOpen,
+    onClose: function onClose() {
+      return setIsRegenerateURLModalOpen(false);
+    }
+  }), /*#__PURE__*/React.createElement(EditURL, {
+    editUrlProps: editUrlProps,
+    handleEdit: handleEdit,
+    isLoading: isLoading,
+    url: url,
+    isOpen: isEditURLModalOpen,
+    onClose: function onClose() {
+      return setIsEditURLModalOpen(false);
+    }
+  }))));
+};
+export default Link;

package/dist/ShareViaLink/QRCode.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { slugify } from "@bigbinary/neeto-commons-frontend/pure";
+import { Button, Typography } from "@bigbinary/neetoui";
+import QRCodeImage from "qrcode.react";
+import { Trans } from "react-i18next";
+import { downloadCanvas } from "./utils";
+var QRCode = function QRCode(_ref) {
+  var entity = _ref.entity,
+    url = _ref.url;
+  if (!entity) return null;
+  var id = entity.id,
+    name = entity.name;
+  var canvasId = "qrcode-share-".concat(id);
+  var handleDownload = function handleDownload() {
+    var canvas = document.getElementById(canvasId);
+    if (canvas) downloadCanvas(canvas, {
+      name: slugify(name)
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col space-y-4"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    lineHeight: "normal",
+    style: "body2",
+    weight: "medium"
+  }, /*#__PURE__*/React.createElement(Trans, {
+    i18nKey: "neetoMolecules.shareViaLink.socialMediaShare.qrCodeInfo",
+    components: {
+      button: /*#__PURE__*/React.createElement(Button, {
+        "data-testid": "qr-code-download-button",
+        style: "link",
+        onClick: handleDownload
+      })
+    }
+  })), /*#__PURE__*/React.createElement(QRCodeImage, {
+    "data-testid": canvasId,
+    id: canvasId,
+    value: url
+  }));
+};
+export default QRCode;