@bigbinary/neeto-molecules 1.1.9 → 1.1.11

package/dist/Metadata/DetailsBlock.js

@@ -0,0 +1,86 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from "react";
+import classnames from "classnames";
+import { isNotEmpty } from "@bigbinary/neeto-commons-frontend/pure";
+import { Down, Up } from "@bigbinary/neeto-icons";
+import { Button, Typography } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+import Block from "./Block";
+import { DEFAULT_TRUNCATE_AT, STYLES } from "./constants";
+var DetailsBlock = function DetailsBlock(_ref) {
+  var title = _ref.title,
+    actionBlock = _ref.actionBlock,
+    _ref$details = _ref.details,
+    details = _ref$details === void 0 ? [] : _ref$details,
+    className = _ref.className,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? STYLES.inline : _ref$style,
+    _ref$truncate = _ref.truncate,
+    truncate = _ref$truncate === void 0 ? false : _ref$truncate,
+    _ref$truncateAt = _ref.truncateAt,
+    truncateAt = _ref$truncateAt === void 0 ? DEFAULT_TRUNCATE_AT : _ref$truncateAt;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showTruncated = _useState2[0],
+    setShowTruncated = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _ref2 = truncate ? [details.slice(0, truncateAt), details.slice(truncateAt)] : [details],
+    _ref3 = _slicedToArray(_ref2, 2),
+    visibleDetails = _ref3[0],
+    truncatedDetails = _ref3[1];
+  return /*#__PURE__*/React.createElement(Block, {
+    actionBlock: actionBlock,
+    className: className,
+    title: title !== null && title !== void 0 ? title : t("neetoMolecules.metadata.detailsTitle")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col space-y-3",
+    "data-cy": "neeto-molecules-metadata-details-block"
+  }, visibleDetails.map(function (_ref4, index) {
+    var label = _ref4.label,
+      value = _ref4.value,
+      type = _ref4.type;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, type === "divider" ? /*#__PURE__*/React.createElement("hr", null) : /*#__PURE__*/React.createElement("div", {
+      "data-testid": "details-card-detail-wrapper",
+      className: classnames("flex", {
+        "space-x-4": style === STYLES.inline,
+        "flex-col": style === STYLES.multiline
+      })
+    }, /*#__PURE__*/React.createElement(Typography, {
+      className: "neeto-ui-text-gray-600",
+      style: "body2"
+    }, label), /*#__PURE__*/React.createElement(Typography, {
+      style: "body2"
+    }, value)));
+  }), showTruncated && truncatedDetails.map(function (_ref5, index) {
+    var label = _ref5.label,
+      value = _ref5.value,
+      type = _ref5.type;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, type === "divider" ? /*#__PURE__*/React.createElement("hr", null) : /*#__PURE__*/React.createElement("div", {
+      className: classnames("flex", {
+        "space-x-4": style === STYLES.inline,
+        "flex-col": style === STYLES.multiline
+      })
+    }, /*#__PURE__*/React.createElement(Typography, {
+      className: "neeto-ui-text-gray-600",
+      style: "body2"
+    }, label), /*#__PURE__*/React.createElement(Typography, {
+      style: "body2"
+    }, value)));
+  }), truncate && isNotEmpty(truncatedDetails) && /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "expand-button",
+    icon: showTruncated ? Up : Down,
+    style: "link",
+    label: showTruncated ? t("neetoMolecules.metadata.card.viewLess") : t("neetoMolecules.metadata.card.viewMore"),
+    onClick: function onClick() {
+      return setShowTruncated(function (showTruncated) {
+        return !showTruncated;
+      });
+    }
+  })));
+};
+export default DetailsBlock;

package/dist/Metadata/constants.js

@@ -0,0 +1,9 @@
+export var STYLES = {
+  inline: "inline",
+  multiline: "multiline"
+};
+export var SIZES = {
+  small: "small",
+  medium: "medium"
+};
+export var DEFAULT_TRUNCATE_AT = 3;

package/dist/Metadata/index.js

@@ -0,0 +1,29 @@
+import React from "react";
+import classnames from "classnames";
+import Block from "./Block";
+import { SIZES } from "./constants";
+import DetailsBlock from "./DetailsBlock";
+import "./metadata.scss";
+var Metadata = function Metadata(_ref) {
+  var headerBlock = _ref.headerBlock,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? SIZES.medium : _ref$size,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-cy": "neeto-molecules-metadata-wrapper",
+    "data-testid": "metadata-wrapper",
+    className: classnames("neeto-ui-bg-gray-100 neeto-molecules-metadata h-screen flex-shrink-0 overflow-y-auto overflow-x-hidden p-6", {
+      "neeto-molecules-metadata--size-large": size === SIZES.medium,
+      "neeto-molecules-metadata--size-small": size === SIZES.small
+    }, className)
+  }, headerBlock && /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-metadata__header mb-5 flex w-full justify-center",
+    "data-cy": "neeto-molecules-metadata-header",
+    "data-testid": "metadata-header"
+  }, headerBlock), children);
+};
+Metadata.Block = Block;
+Metadata.DetailsBlock = DetailsBlock;
+export default Metadata;

package/dist/Metadata/metadata.scss

@@ -0,0 +1,15 @@
+:root {
+  --neeto-molecules-metadata-width: 384px;
+}
+
+.neeto-molecules-metadata {
+  width: var(--neeto-molecules-metadata-width);
+
+  &--size-small {
+    --neeto-molecules-metadata-width: 340px;
+  }
+
+  &__card {
+    width: 100%;
+  }
+}

package/dist/MoreDropdown/constants.js

@@ -0,0 +1,25 @@
+export var BUTTON_STYLES = {
+  primary: "primary",
+  secondary: "secondary",
+  danger: "danger",
+  danger_text: "danger-text",
+  text: "text",
+  link: "link"
+};
+export var SIZES = {
+  small: "small",
+  medium: "medium",
+  large: "large"
+};
+export var STRATEGY = {
+  absolute: "absolute",
+  fixed: "fixed"
+};
+export var MENU_ITEM_TYPES = {
+  menuItem: "menuItem",
+  divider: "divider"
+};
+export var DEFAULT_TOOLTIP_PROPS = {
+  disabled: true,
+  position: "bottom"
+};

package/dist/{MoreDropdown.js → MoreDropdown/index.js}

@@ -1,105 +1,14 @@
-import React from 'react';
-import { MenuVertical, MenuHorizontal } from '@bigbinary/neeto-icons';
-import { Dropdown, Tooltip, Button } from '@bigbinary/neetoui';
-import { mergeRight } from 'ramda';
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
-}
-
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
-}
-
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-var MENU_ITEM_TYPES = {
-  menuItem: "menuItem",
-  divider: "divider"
-};
-var DEFAULT_TOOLTIP_PROPS = {
-  disabled: true,
-  position: "bottom"
-};
-
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["key", "onClick", "label", "type", "isVisible"];
 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 React from "react";
+import { MenuHorizontal, MenuVertical } from "@bigbinary/neeto-icons";
+import { Button, Dropdown, Tooltip } from "@bigbinary/neetoui";
+import { mergeRight } from "ramda";
+import { BUTTON_STYLES, DEFAULT_TOOLTIP_PROPS, MENU_ITEM_TYPES, SIZES, STRATEGY } from "./constants";
 var Menu = Dropdown.Menu,
   MenuItem = Dropdown.MenuItem,
   Divider = Dropdown.Divider;
@@ -157,6 +66,4 @@ var MoreDropdown = function MoreDropdown(_ref) {
     });
   }), menuBottomChildren));
 };
-
-export { MoreDropdown as default };
-//# sourceMappingURL=MoreDropdown.js.map
+export default MoreDropdown;

package/dist/NavigationHeader/LeftBlock.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { isPresent } from "@bigbinary/neeto-commons-frontend/pure";
+import { Tooltip } from "@bigbinary/neetoui";
+import { mergeDeepRight } from "ramda";
+import { Link } from "react-router-dom";
+import Rename from "../Rename";
+import { DEFAULT_HOME_BUTTON_PROPS } from "./constants";
+var LeftBlock = function LeftBlock(_ref) {
+  var customHomeButtonProps = _ref.homeButtonProps,
+    homeUrl = _ref.homeUrl,
+    renameProps = _ref.renameProps,
+    children = _ref.children;
+  var homeButtonProps = mergeDeepRight(DEFAULT_HOME_BUTTON_PROPS, customHomeButtonProps);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2",
+    "data-testid": "navigation-header-left-block"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: homeButtonProps.tooltip.content,
+    position: homeButtonProps.tooltip.position
+  }, /*#__PURE__*/React.createElement(Link, {
+    "data-cy": "home-button",
+    "data-testid": "home-button",
+    to: homeUrl
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-rounded hover:neeto-ui-bg-gray-200 p-1"
+  }, homeButtonProps.icon))), isPresent(renameProps) && /*#__PURE__*/React.createElement(Rename, {
+    dropdownItems: renameProps.dropdownItems,
+    value: renameProps.value,
+    renameProps: renameProps
+  }), children);
+};
+export default LeftBlock;

package/dist/NavigationHeader/Navigation.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { joinHyphenCase } from "@bigbinary/neeto-commons-frontend/utils";
+import { Typography } from "@bigbinary/neetoui";
+import { NavLink } from "react-router-dom";
+var NavigationLinks = function NavigationLinks(_ref) {
+  var headerLinks = _ref.headerLinks;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full items-center justify-center gap-6",
+    "data-testid": "navigation-header-navigation-links"
+  }, headerLinks.map(function (headerLink) {
+    return /*#__PURE__*/React.createElement(NavLink, {
+      activeClassName: "active",
+      className: "neeto-form-builder-header__link capitalize no-underline",
+      "data-cy": "".concat(joinHyphenCase(headerLink.key), "-tab"),
+      key: headerLink.key,
+      to: headerLink.to
+    }, /*#__PURE__*/React.createElement(Typography, {
+      lineHeight: "normal",
+      style: "h4",
+      weight: "semibold"
+    }, headerLink.label));
+  }));
+};
+export default NavigationLinks;

package/dist/NavigationHeader/RightBlock.js

@@ -0,0 +1,68 @@
+import React from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import PublishBlock from "../PublishBlock";
+import "./navigation-header.scss";
+var RightBlock = function RightBlock(_ref) {
+  var isDraftBlockHidden = _ref.isDraftBlockHidden,
+    previewDraftUrl = _ref.previewDraftUrl,
+    isResetDraftButtonVisible = _ref.isResetDraftButtonVisible,
+    onResetClick = _ref.onResetClick,
+    isResetting = _ref.isResetting,
+    isPublishDisabled = _ref.isPublishDisabled,
+    isPublishing = _ref.isPublishing,
+    handlePublish = _ref.handlePublish,
+    isPublishPreviewDisabled = _ref.isPublishPreviewDisabled,
+    previewPublishedUrl = _ref.previewPublishedUrl,
+    isPublishButtonVisible = _ref.isPublishButtonVisible,
+    isResetAlertOpen = _ref.isResetAlertOpen,
+    setIsResetAlertOpen = _ref.setIsResetAlertOpen,
+    handleReset = _ref.handleReset,
+    publishAlertTitle = _ref.publishAlertTitle,
+    publishAlertDescription = _ref.publishAlertDescription;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var renderDraftButtons = function renderDraftButtons(_ref2) {
+    var ViewDraftButton = _ref2.ViewDraftButton,
+      ResetDraftButton = _ref2.ResetDraftButton;
+    return !isDraftBlockHidden && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ViewDraftButton, {
+      to: previewDraftUrl
+    }), isResetDraftButtonVisible && /*#__PURE__*/React.createElement(ResetDraftButton, {
+      loading: isResetting,
+      onClick: function onClick() {
+        return onResetClick();
+      }
+    }));
+  };
+  var renderPublishButtons = function renderPublishButtons(_ref3) {
+    var PublishButton = _ref3.PublishButton,
+      PublishPreviewButton = _ref3.PublishPreviewButton;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isPublishButtonVisible && /*#__PURE__*/React.createElement(PublishButton, {
+      disabled: isPublishDisabled,
+      loading: isPublishing,
+      onClick: function onClick() {
+        return handlePublish();
+      }
+    }), /*#__PURE__*/React.createElement(PublishPreviewButton, {
+      disabled: isPublishPreviewDisabled,
+      to: previewPublishedUrl,
+      className: classNames({
+        "standalone-publish-preview-button": !isPublishButtonVisible
+      })
+    }));
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PublishBlock, {
+    renderDraftButtons: renderDraftButtons,
+    renderPublishButtons: renderPublishButtons
+  }), /*#__PURE__*/React.createElement(PublishBlock.Alert, {
+    isOpen: isResetAlertOpen,
+    isSubmitting: isResetting,
+    message: publishAlertDescription || t("neetoMolecules.navigationHeader.resetDescription"),
+    title: publishAlertTitle || t("neetoMolecules.navigationHeader.resetTitle"),
+    onClose: function onClose() {
+      return setIsResetAlertOpen(false);
+    },
+    onSubmit: handleReset
+  }));
+};
+export default RightBlock;

package/dist/NavigationHeader/constants.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { t } from "i18next";
+import { Home } from "@bigbinary/neeto-icons";
+export var DEFAULT_HOME_BUTTON_PROPS = {
+  tooltip: {
+    content: t("neetoMolecules.navigationHeader.home"),
+    position: "bottom"
+  },
+  homeUrl: "/",
+  icon: /*#__PURE__*/React.createElement(Home, null)
+};

package/dist/NavigationHeader/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+import LeftBlock from "./LeftBlock";
+import NavigationLinks from "./Navigation";
+import RightBlock from "./RightBlock";
+var NavigationHeader = function NavigationHeader(_ref) {
+  var leftActionBlock = _ref.leftActionBlock,
+    navigationLinks = _ref.navigationLinks,
+    rightActionBlock = _ref.rightActionBlock;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-form-builder-header neeto-ui-border-gray-200 neeto-ui-bg-white flex h-16 w-full flex-shrink-0 items-center border-b px-6 py-2",
+    "data-testid": "navigation-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "grid w-full grid-cols-3 gap-2"
+  }, leftActionBlock, navigationLinks, rightActionBlock));
+};
+NavigationHeader.LeftActionBlock = LeftBlock;
+NavigationHeader.NavigationLinks = NavigationLinks;
+NavigationHeader.RightActionBlock = RightBlock;
+export default NavigationHeader;

package/dist/NavigationHeader/navigation-header.scss

@@ -0,0 +1,3 @@
+.standalone-publish-preview-button {
+  border-radius: var(--neeto-ui-rounded) !important;
+}

package/dist/NeetoWidget/CodeBlock.js

@@ -0,0 +1,57 @@
+import React from "react";
+import classnames from "classnames";
+import { Button, Select, Typography } from "@bigbinary/neetoui";
+import { useTranslation, Trans } from "react-i18next";
+import CopyToClipboardButton from "../CopyToClipboardButton";
+import { FRAMEWORK_SELECT_OPTIONS } from "./constants";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+var CodeBlock = function CodeBlock(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Trans, {
+      i18nKey: "neetoMolecules.codeblock.codeSnippet"
+    })) : _ref$title,
+    codeString = _ref.codeString,
+    _ref$showCopyButton = _ref.showCopyButton,
+    showCopyButton = _ref$showCopyButton === void 0 ? true : _ref$showCopyButton,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$sendViaEmail = _ref.sendViaEmail,
+    sendViaEmail = _ref$sendViaEmail === void 0 ? undefined : _ref$sendViaEmail,
+    _ref$frameworkProps = _ref.frameworkProps,
+    frameworkProps = _ref$frameworkProps === void 0 ? {} : _ref$frameworkProps;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _ref2 = frameworkProps !== null && frameworkProps !== void 0 ? frameworkProps : {},
+    selectedFramework = _ref2.selectedFramework,
+    setSelectedFramework = _ref2.setSelectedFramework;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(["relative", className])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-primary-100 neeto-ui-rounded-lg flex w-full flex-wrap items-center justify-between gap-2 rounded-b-none p-3"
+  }, title && /*#__PURE__*/React.createElement(Typography, {
+    className: "m-0 flex-shrink-0",
+    "data-cy": "code-block-title-text",
+    style: "h4"
+  }, title), selectedFramework && /*#__PURE__*/React.createElement(Select, {
+    className: "w-40",
+    "data-testid": "framework-select",
+    options: FRAMEWORK_SELECT_OPTIONS,
+    value: selectedFramework,
+    onChange: setSelectedFramework
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ml-auto flex flex-shrink-0 items-center justify-end gap-2"
+  }, sendViaEmail ? /*#__PURE__*/React.createElement(Button, {
+    style: "text",
+    label: t("neetoMolecules.widget.installation.snippet.sendViaEmail"),
+    onClick: sendViaEmail
+  }) : null, showCopyButton && /*#__PURE__*/React.createElement(CopyToClipboardButton, {
+    label: t("neetoMolecules.widget.installation.snippet.copy"),
+    style: "primary",
+    value: codeString
+  }))), /*#__PURE__*/React.createElement(SyntaxHighlighter, {
+    className: "neeto-ui-bg-gray-800 neeto-ui-rounded-lg m-0 rounded-t-none",
+    code: codeString,
+    language: "javascript"
+  }));
+};
+export default CodeBlock;

package/dist/NeetoWidget/CodeSnippet.js

@@ -0,0 +1,119 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useState } from "react";
+import { Formik, Form } from "formik";
+import { noop } from "@bigbinary/neeto-commons-frontend/pure";
+import { Typography, Button, Pane, Toastr } from "@bigbinary/neetoui";
+import { Input, MultiEmailInput } from "@bigbinary/neetoui/formik";
+import { pluck, any, assoc } from "ramda";
+import { useTranslation } from "react-i18next";
+import CodeBlock from "./CodeBlock";
+import { EMAIL_TYPES, FRAMEWORK_SELECT_OPTIONS } from "./constants";
+import { useEmailEmbedCode } from "./mutations";
+import { getEmailWidgetSnippetFormInitialValues, getEmailWidgetSnippetValidationSchema, getSampleUserIdentity } from "./utils";
+var CodeSnippet = function CodeSnippet(_ref) {
+  var isPaneOpen = _ref.isPaneOpen,
+    onClose = _ref.onClose,
+    _ref$onSent = _ref.onSent,
+    onSent = _ref$onSent === void 0 ? noop : _ref$onSent,
+    codeString = _ref.codeString,
+    _ref$subject = _ref.subject,
+    subject = _ref$subject === void 0 ? "" : _ref$subject,
+    _ref$body = _ref.body,
+    body = _ref$body === void 0 ? "" : _ref$body,
+    _ref$emailType = _ref.emailType,
+    emailType = _ref$emailType === void 0 ? EMAIL_TYPES.embedCode : _ref$emailType,
+    _ref$enabledWidgets = _ref.enabledWidgets,
+    enabledWidgets = _ref$enabledWidgets === void 0 ? {} : _ref$enabledWidgets;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(FRAMEWORK_SELECT_OPTIONS[0]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedFramework = _useState2[0],
+    setSelectedFramework = _useState2[1];
+  var emailMutation = useEmailEmbedCode(onSent);
+  var codeToDisplay = emailType === EMAIL_TYPES.userIdentity ? getSampleUserIdentity(enabledWidgets, selectedFramework.value) : codeString;
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(formData) {
+      var _body$ref$current$inn, _body$ref;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!any(function (_ref3) {
+              var valid = _ref3.valid;
+              return !valid;
+            }, formData.emails)) {
+              _context.next = 3;
+              break;
+            }
+            Toastr.error(t("neetoMolecules.widget.email.fields.emails.invalidError"));
+            return _context.abrupt("return");
+          case 3:
+            emailMutation.mutate({
+              subject: formData.subject,
+              emails: pluck("value", formData.emails),
+              message: (_body$ref$current$inn = (_body$ref = body.ref) === null || _body$ref === void 0 ? void 0 : _body$ref.current.innerHTML) !== null && _body$ref$current$inn !== void 0 ? _body$ref$current$inn : body,
+              snippet: codeToDisplay
+            });
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleSubmit(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var renderCodeBlockProps = function renderCodeBlockProps() {
+    var props = {
+      codeString: codeToDisplay,
+      showCopyButton: false,
+      className: "neeto-ui-bg-primary-100 neeto-ui-rounded-lg"
+    };
+    if (emailType === EMAIL_TYPES.userIdentity) {
+      props = assoc("frameworkProps", {
+        selectedFramework: selectedFramework,
+        setSelectedFramework: setSelectedFramework
+      }, props);
+    }
+    return props;
+  };
+  return /*#__PURE__*/React.createElement(Pane, {
+    isOpen: isPaneOpen,
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(Formik, {
+    initialValues: getEmailWidgetSnippetFormInitialValues(subject),
+    validationSchema: getEmailWidgetSnippetValidationSchema(),
+    onSubmit: handleSubmit
+  }, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    style: "h2"
+  }, t("neetoMolecules.widget.email.title"))), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
+    className: "w-full space-y-4"
+  }, /*#__PURE__*/React.createElement(MultiEmailInput, {
+    required: true,
+    label: t("neetoMolecules.widget.email.fields.emails.label"),
+    name: "emails",
+    placeholder: t("neetoMolecules.widget.email.fields.emails.placeholder")
+  }), /*#__PURE__*/React.createElement(Input, {
+    required: true,
+    label: t("neetoMolecules.widget.email.fields.subject.label"),
+    name: "subject",
+    type: "text"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    style: "body2"
+  }, body), /*#__PURE__*/React.createElement(CodeBlock, renderCodeBlockProps()))), /*#__PURE__*/React.createElement(Pane.Footer, {
+    className: "gap-x-2"
+  }, /*#__PURE__*/React.createElement(Button, {
+    disabled: emailMutation.isLoading,
+    label: t("neetoMolecules.widget.email.actions.send"),
+    loading: emailMutation.isLoading,
+    type: "submit"
+  }), /*#__PURE__*/React.createElement(Button, {
+    label: t("neetoMolecules.widget.email.actions.cancel"),
+    style: "text",
+    onClick: onClose
+  })))));
+};
+export default CodeSnippet;