@bigbinary/neeto-commons-frontend 2.0.14 → 2.0.15

package/react-utils.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, useMemo, useRef, useReducer } from 'react';
+import React__default, { useState, useEffect, useRef, useReducer } from 'react';
 import { Search, Check, Copy, Help, LeftArrow as LeftArrow$1, User, Settings } from '@bigbinary/neeto-icons';
 import { Dropdown, Input, Label, Checkbox, Typography, Tooltip, Button, Toastr, Modal, Switch, PageLoader } from '@bigbinary/neetoui';
 import { curryN, isNil, complement as complement$1, isEmpty, curry, includes, __, filter, trim, toLower, identity, without, append, fromPairs, keys, values, last, pluck, any, uniq, intersection, mergeLeft, not as not$2, toPairs, assoc } from 'ramda';
@@ -495,11 +495,13 @@ var HoneybadgerErrorBoundary = function HoneybadgerErrorBoundary(_ref) {
 };
 
 var EMBED_WIDGET_S3_SCRIPT_STRING = "<script src=\"https://neeto-widget.s3.ap-south-1.amazonaws.com/embedNeetoWidget.js\"></script>";
-var DISABLE_NEETO_CHAT = "disableNeetoChat: true,";
-var DISABLE_NEETO_CHANGELOG = "disableNeetoChangelog: true,";
-var DISABLE_NEETO_REPLAY = "disableNeetoReplay: true,";
-var SAMPLE_CONTEXT_CODE_STRING = "window.NeetoReplayWidgetSessionContext = {\n  key1: \"value\",\n  key2: [\"array\", \"of\", \"values\"],\n  /* More key-value pairs */\n}";
-var SAMPLE_USER_IDENTITY_CODE_STRING = "window.NeetoWidgetUserIdentity = {\n  user_identifier: \"USER_ID_HERE\",\n  name: \"USER_NAME_HERE\",\n  email: \"USER_EMAIL_HERE\",\n  started_at: \"YYYY-MM-DD\",\n}";
+var NEETO_WIDGET_USER_IDENTITY_KEY = "NeetoWidgetUserIdentity";
+var SESSION_CONTEXT_KEY = "NeetoReplayWidgetSessionContext";
+var DISABLE_NEETO_CHAT = "enableNeetoChat: false,";
+var DISABLE_NEETO_CHANGELOG = "enableNeetoChangelog: false,";
+var DISABLE_NEETO_REPLAY = "enableNeetoReplay: false,";
+var SAMPLE_CONTEXT_CODE_STRING = "window.".concat(SESSION_CONTEXT_KEY, " = {\n  key1: \"value\",\n  key2: [\"array\", \"of\", \"values\"],\n  /* More key-value pairs */\n}");
+var SAMPLE_USER_IDENTITY_CODE_STRING = "window.".concat(NEETO_WIDGET_USER_IDENTITY_KEY, " = {\n  user_identifier: \"USER_ID_HERE\",\n  name: \"USER_NAME_HERE\",\n  email: \"USER_EMAIL_HERE\",\n  started_at: \"YYYY-MM-DD\",\n}");
 var WIDGET_TYPES = {
   changelog: "changelog",
   chat: "chat",
@@ -515,6 +517,13 @@ var QUERY_KEYS = {
 };
 var DEFAULT_QUERY_STALE_TIME = 60 * 60 * 1000; // 1 hour in milliseconds
 
+var EMAIL_TYPES = {
+  embedCode: "embedCode",
+  userIdentity: "userIdentity",
+  sessionContext: "sessionContext",
+  "null": ""
+};
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 var propTypes = {exports: {}};
@@ -1699,6 +1708,125 @@ if (process.env.NODE_ENV !== 'production') {
   propTypes.exports = requireFactoryWithThrowingShims()();
 }
 
+function useDebounce(value) {
+  var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 350;
+
+  var _useState = useState(value),
+      _useState2 = _slicedToArray(_useState, 2),
+      debouncedValue = _useState2[0],
+      setDebouncedValue = _useState2[1];
+
+  useEffect(function () {
+    var handler = setTimeout(function () {
+      setDebouncedValue(value);
+    }, delay);
+    return function () {
+      clearTimeout(handler);
+    };
+  }, [value]);
+  return debouncedValue;
+}
+
+var useFuncDebounce = function useFuncDebounce(func) {
+  var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 350;
+  var timer = useRef(null);
+
+  var debouncedFunc = function debouncedFunc() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    clearTimeout(timer.current);
+    timer.current = setTimeout(function () {
+      return func.apply(void 0, args);
+    }, delay);
+  };
+
+  debouncedFunc.cancel = function () {
+    return clearTimeout(timer.current);
+  };
+
+  return debouncedFunc;
+};
+
+var useForceUpdate = function useForceUpdate() {
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      setValue = _useState2[1];
+
+  return function () {
+    return setValue(function (value) {
+      return value + 1;
+    });
+  };
+};
+
+var useIsElementVisibleInDom = function useIsElementVisibleInDom(target) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isIntersecting = _useState2[0],
+      setIntersecting = _useState2[1];
+
+  var forceUpdate = useForceUpdate();
+  useEffect(function () {
+    if (!target) return forceUpdate();
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+          entry = _ref2[0];
+
+      return setIntersecting(entry.isIntersecting);
+    }, options);
+    observer.observe(target);
+    return function () {
+      return observer.unobserve(target);
+    };
+  }, [target, options]);
+  return isIntersecting;
+};
+
+var useOnClickOutside = function useOnClickOutside(ref, handler) {
+  useEffect(function () {
+    var listener = function listener(event) {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return function () {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [handler]);
+};
+
+var usePrevious = function usePrevious(value) {
+  var ref = useRef(value);
+  useEffect(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};
+
+var useUpdateEffect = function useUpdateEffect(callback) {
+  var dependencies = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var isInitialMount = useRef(true);
+  useEffect(function () {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+
+    callback();
+  }, dependencies);
+};
+
 var classnames$1 = {exports: {}};
 
 /*!
@@ -85585,7 +85713,7 @@ var copyToClipboard = /*#__PURE__*/function () {
 
 var CodeBlock = function CodeBlock(_ref) {
   var _ref$title = _ref.title,
-      title = _ref$title === void 0 ? "Code snippet" : _ref$title,
+      title = _ref$title === void 0 ? /*#__PURE__*/React__default.createElement("div", null, "Code snippet") : _ref$title,
       codeString = _ref.codeString,
       _ref$showCopyButton = _ref.showCopyButton,
       showCopyButton = _ref$showCopyButton === void 0 ? true : _ref$showCopyButton,
@@ -85646,7 +85774,7 @@ var CodeBlock = function CodeBlock(_ref) {
 };
 
 CodeBlock.propTypes = {
-  title: propTypes.exports.string,
+  title: propTypes.exports.object,
   codeString: propTypes.exports.string,
   showCopyButton: propTypes.exports.bool,
   className: propTypes.exports.string,
@@ -85659,6 +85787,8 @@ var getWidgetApiKeyUrl = function getWidgetApiKeyUrl() {
 };
 var EMBED_CODE_EMAIL_URL = "api/v1/widget/email_snippets";
 var WIDGET_KB_BASE_URL = "https://neetowidgethelp.neetokb.com";
+var NEETO_REPLAY_CONFIGURE_URL = "".concat(WIDGET_KB_BASE_URL, "/articles/configure-neetoreplay");
+var NEETO_CHAT_USER_IDENTITY_URL = "".concat(WIDGET_KB_BASE_URL, "/articles/configuring-neetochat");
 var WIDGET_KB_HELP_URL = {
   changelog: "".concat(WIDGET_KB_BASE_URL, "/categories/getting-started-with-neetochangelog"),
   chat: "".concat(WIDGET_KB_BASE_URL, "/categories/getting-started-with-neetochat"),
@@ -85718,16 +85848,6 @@ var embedWidgetEnvironment = function embedWidgetEnvironment() {
   }
 };
 
-var getSampleUserIdentity = function getSampleUserIdentity(enabledWidgets) {
-  return indentAndFormat(SAMPLE_USER_IDENTITY_CODE_STRING, function (cmd) {
-    if (!enabledWidgets.chat && !cmd.includes("email") && !cmd.includes("{") && !cmd.includes("}") || !enabledWidgets.chat && !enabledWidgets.replay) {
-      return getCommentedCommand(cmd, false, true);
-    }
-
-    return cmd;
-  });
-};
-
 var embedWidgetApiKey = function embedWidgetApiKey(apiKey) {
   return "apiKey: \"".concat(apiKey, "\",");
 };
@@ -85750,17 +85870,28 @@ var embedWidgetFunctionCall = function embedWidgetFunctionCall(enabledWidgets, a
   }), "\n});");
 };
 
+var filterMarkedCommands = function filterMarkedCommands(queryString) {
+  return queryString.split("\n").filter(function (line) {
+    return !line.includes("///") && line.trim();
+  }).join("\n");
+};
+
+var getSampleUserIdentity = function getSampleUserIdentity(enabledWidgets) {
+  return filterMarkedCommands(SAMPLE_USER_IDENTITY_CODE_STRING.split("\n").map(function (cmd) {
+    if (!enabledWidgets.chat && !cmd.includes("email") && !cmd.includes("{") && !cmd.includes("}") || !enabledWidgets.chat && !enabledWidgets.replay) {
+      return getCommentedCommand(cmd, false, true);
+    }
+
+    return cmd;
+  }).join("\n"));
+};
 var sampleConsolidatedCodeString = function sampleConsolidatedCodeString(enabledWidgets, apiKey) {
-  return "".concat(EMBED_WIDGET_S3_SCRIPT_STRING, "\n<script>\n  ").concat(getSampleUserIdentity(enabledWidgets), "\n\n  ").concat(indentAndFormat(SAMPLE_CONTEXT_CODE_STRING, function (cmd) {
-    return getCommentedCommand(cmd, enabledWidgets.replay, true);
-  }), "\n\n  ").concat(indentAndFormat(embedWidgetFunctionCall(enabledWidgets, apiKey)), "\n</script>");
+  return filterMarkedCommands("".concat(EMBED_WIDGET_S3_SCRIPT_STRING, "\n<script>\n  ").concat(enabledWidgets.chat || enabledWidgets.replay ? "window.".concat(NEETO_WIDGET_USER_IDENTITY_KEY, " = {};") : "", "\n  ").concat(enabledWidgets.replay ? "window.".concat(SESSION_CONTEXT_KEY, " = {};") : "", "\n\n  ").concat(indentAndFormat(embedWidgetFunctionCall(enabledWidgets, apiKey)), "\n</script>"));
 };
-var getEmailWidgetSnippetFormInitialValues = function getEmailWidgetSnippetFormInitialValues(selectedWidgets) {
+var getEmailWidgetSnippetFormInitialValues = function getEmailWidgetSnippetFormInitialValues(subject) {
   return {
     emails: "",
-    subject: i18next.t("neetoCommons.widget.email.fields.subject.default", {
-      selectedWidgets: selectedWidgets
-    })
+    subject: subject
   };
 };
 var getSelectedWidgetsCombinedText = function getSelectedWidgetsCombinedText(widgets) {
@@ -85786,7 +85917,10 @@ var CodeSnippet = function CodeSnippet(_ref) {
       _ref$onSent = _ref.onSent,
       onSent = _ref$onSent === void 0 ? noop$2 : _ref$onSent,
       codeString = _ref.codeString,
-      selectedWidgets = _ref.selectedWidgets;
+      _ref$subject = _ref.subject,
+      subject = _ref$subject === void 0 ? "" : _ref$subject,
+      _ref$body = _ref.body,
+      body = _ref$body === void 0 ? "" : _ref$body;
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
@@ -85814,7 +85948,7 @@ var CodeSnippet = function CodeSnippet(_ref) {
               emailMutation.mutate({
                 subject: formData.subject,
                 emails: pluck("value", formData.emails),
-                message: getDefaultBody(),
+                message: body,
                 snippet: codeString
               });
 
@@ -85831,19 +85965,13 @@ var CodeSnippet = function CodeSnippet(_ref) {
     };
   }();
 
-  var getDefaultBody = function getDefaultBody() {
-    return t("neetoCommons.widget.email.body", {
-      selectedWidgets: getSelectedWidgetsCombinedText(selectedWidgets)
-    });
-  };
-
   return /*#__PURE__*/React__default.createElement(Modal, {
     className: "rounded-lg w-1/2 mx-auto",
     isOpen: isModalOpen,
     size: "medium",
     onClose: onClose
   }, /*#__PURE__*/React__default.createElement(Formik, {
-    initialValues: getEmailWidgetSnippetFormInitialValues(getSelectedWidgetsCombinedText(selectedWidgets)),
+    initialValues: getEmailWidgetSnippetFormInitialValues(subject),
     validationSchema: EMAIL_WIDGET_SNIPPET_FORM_VALIDATION_SCHEMA,
     onSubmit: handleSubmit
   }, /*#__PURE__*/React__default.createElement(Form, null, /*#__PURE__*/React__default.createElement(Modal.Header, null, /*#__PURE__*/React__default.createElement(Typography, {
@@ -85866,7 +85994,7 @@ var CodeSnippet = function CodeSnippet(_ref) {
   }, /*#__PURE__*/React__default.createElement(Typography, {
     className: "mb-6",
     style: "body1"
-  }, getDefaultBody()), /*#__PURE__*/React__default.createElement(CodeBlock, {
+  }, body), /*#__PURE__*/React__default.createElement(CodeBlock, {
     className: "neeto-ui-bg-primary-100 neeto-ui-rounded-xl overflow-hidden",
     codeString: codeString,
     copyButton: false,
@@ -85892,7 +86020,8 @@ CodeSnippet.propTypes = {
   onClose: propTypes.exports.func,
   onSent: propTypes.exports.func,
   codeString: propTypes.exports.string,
-  selectedWidgets: propTypes.exports.arrayOf(propTypes.exports.string)
+  subject: propTypes.exports.string,
+  body: propTypes.exports.string
 };
 
 var useFetchApiKey = function useFetchApiKey() {
@@ -85933,7 +86062,7 @@ var SelectionTabs = function SelectionTabs(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "mb-4 px-2 w-full flex items-center justify-between gap-2"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-start gap-2"
+    className: "flex items-center justify-start gap-1"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "font-semibold text-base"
   }, "neeto", formattedPrimaryWidget), /*#__PURE__*/React__default.createElement("a", {
@@ -85941,7 +86070,7 @@ var SelectionTabs = function SelectionTabs(_ref) {
     target: "_blank",
     rel: "noreferrer"
   }, /*#__PURE__*/React__default.createElement(Help, {
-    size: 18
+    size: 16
   }))), /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center justify-end gap-2"
   }, renderSelectedTab()));
@@ -85954,8 +86083,6 @@ SelectionTabs.propTypes = {
 };
 
 var EmbedCode = function EmbedCode(_ref) {
-  var _apiKeyResult$data2;
-
   var _ref$primaryApp = _ref.primaryApp,
       primaryApp = _ref$primaryApp === void 0 ? "" : _ref$primaryApp,
       _ref$initialSelectedW = _ref.initialSelectedWidgets,
@@ -85967,16 +86094,18 @@ var EmbedCode = function EmbedCode(_ref) {
   var apiKeyResult = useFetchApiKey();
   var initialWidgets = uniq(intersection(append(primaryApp, initialSelectedWidgets), WIDGET_TYPES_VALUES));
 
-  var _useState = useState(false),
+  var _useState = useState(EMAIL_TYPES["null"]),
       _useState2 = _slicedToArray(_useState, 2),
-      isSendViaEmailModalOpen = _useState2[0],
-      setIsSendViaEmailModalOpen = _useState2[1];
+      emailType = _useState2[0],
+      setEmailType = _useState2[1];
 
   var _useState3 = useState(intersection(initialWidgets, WIDGET_TYPES_VALUES)),
       _useState4 = _slicedToArray(_useState3, 2),
       selectedWidgets = _useState4[0],
       setSelectedWidgets = _useState4[1];
 
+  var previousEmailType = usePrevious(emailType);
+
   var updateSelectedWidgets = function updateSelectedWidgets(widget) {
     if (selectedWidgets.includes(widget)) {
       setSelectedWidgets(without([widget], selectedWidgets));
@@ -85988,25 +86117,64 @@ var EmbedCode = function EmbedCode(_ref) {
   var enabledWidgets = fromPairs(selectedWidgets.map(function (widget) {
     return [widget, true];
   }));
-  var codeString = useMemo(function () {
+
+  var getEmbedCodeString = function getEmbedCodeString() {
     var _apiKeyResult$data;
 
     if ((_apiKeyResult$data = apiKeyResult.data) !== null && _apiKeyResult$data !== void 0 && _apiKeyResult$data.widgetApiKey) {
-      return sampleConsolidatedCodeString(enabledWidgets, apiKeyResult.data.widgetApiKey).split("\n").filter(function (line) {
-        return !line.includes("///") && line.trim();
-      }).join("\n");
+      return sampleConsolidatedCodeString(enabledWidgets, apiKeyResult.data.widgetApiKey);
     }
 
     return "";
-  }, [enabledWidgets, (_apiKeyResult$data2 = apiKeyResult.data) === null || _apiKeyResult$data2 === void 0 ? void 0 : _apiKeyResult$data2.widgetApiKey]);
+  };
+
+  var getSnippetProps = function getSnippetProps(selectedEmailType) {
+    switch (selectedEmailType) {
+      case EMAIL_TYPES.embedCode:
+        return {
+          codeString: getEmbedCodeString(),
+          subject: t("neetoCommons.widget.email.fields.subject.values.embedCode", {
+            selectedWidgets: getSelectedWidgetsCombinedText(selectedWidgets)
+          }),
+          body: t("neetoCommons.widget.email.body.values.embedCode", {
+            selectedWidgets: getSelectedWidgetsCombinedText(selectedWidgets),
+            neetoKbUrl: WIDGET_KB_BASE_URL
+          })
+        };
 
-  var handleSendViaEmail = function handleSendViaEmail() {
+      case EMAIL_TYPES.userIdentity:
+        return {
+          codeString: getSampleUserIdentity(enabledWidgets),
+          subject: t("neetoCommons.widget.email.fields.subject.values.userIdentity"),
+          body: t("neetoCommons.widget.email.body.values.userIdentity", {
+            userIdentityKbUrl: enabledWidgets.chat ? NEETO_CHAT_USER_IDENTITY_URL : NEETO_REPLAY_CONFIGURE_URL
+          })
+        };
+
+      case EMAIL_TYPES.sessionContext:
+        return {
+          codeString: SAMPLE_CONTEXT_CODE_STRING,
+          subject: t("neetoCommons.widget.email.fields.subject.values.sessionContext"),
+          body: t("neetoCommons.widget.email.body.values.sessionContext", {
+            sessionContextKbUrl: NEETO_REPLAY_CONFIGURE_URL
+          })
+        };
+
+      case EMAIL_TYPES["null"]:
+        return previousEmailType !== EMAIL_TYPES["null"] ? getSnippetProps(previousEmailType) : {};
+
+      default:
+        throw new Error("Invalid email type received.");
+    }
+  };
+
+  var handleSendViaEmail = function handleSendViaEmail(selectedEmail) {
     if (isEmpty(selectedWidgets)) {
       Toastr.error(t("neetoCommons.widget.installation.snippet.disabledError"));
       return;
     }
 
-    setIsSendViaEmailModalOpen(true);
+    setEmailType(selectedEmail);
   };
 
   if (apiKeyResult.isLoading) {
@@ -86016,20 +86184,22 @@ var EmbedCode = function EmbedCode(_ref) {
   }
 
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "mx-auto w-full flex-col items-center justify-start"
+    className: "mx-auto w-full flex-col items-center justify-start mb-10"
   }, /*#__PURE__*/React__default.createElement(SelectionTabs, {
     primarySelectedWidget: primaryApp,
     selectedWidgets: selectedWidgets,
     updateSelectedWidgets: updateSelectedWidgets
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "mx-auto w-full max-w-2xl flex-grow flex-col items-center justify-start"
+    className: "mx-auto w-full max-w-2xl flex-grow flex-col items-center justify-start mb-6"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "mx-auto mb-4 w-full"
   }, /*#__PURE__*/React__default.createElement(CodeBlock, {
-    codeString: codeString,
+    codeString: getEmbedCodeString(),
     className: "neeto-ui-bg-primary-100 neeto-ui-rounded-xl overflow-hidden",
-    title: "Embed Code",
-    sendViaEmail: handleSendViaEmail
+    title: /*#__PURE__*/React__default.createElement("div", null, "Embed code"),
+    sendViaEmail: function sendViaEmail() {
+      return handleSendViaEmail(EMAIL_TYPES.embedCode);
+    }
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "w-full"
   }, /*#__PURE__*/React__default.createElement(Trans, {
@@ -86045,14 +86215,56 @@ var EmbedCode = function EmbedCode(_ref) {
         className: "font-normal"
       })
     }
-  }, "Place the embed code in your HTML file. This will embed the selected widgets in your website.")), /*#__PURE__*/React__default.createElement(CodeSnippet, {
-    codeString: codeString,
-    selectedWidgets: selectedWidgets,
-    isModalOpen: isSendViaEmailModalOpen && isNotEmpty(selectedWidgets),
+  }, "Place the embed code in your HTML file. This will embed the selected widgets in your website."))), enabledWidgets.chat || enabledWidgets.replay ? /*#__PURE__*/React__default.createElement("div", {
+    className: "mx-auto w-full max-w-2xl flex-grow flex-col items-center justify-start mb-6"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "mx-auto mb-4 w-full"
+  }, /*#__PURE__*/React__default.createElement(CodeBlock, {
+    codeString: getSampleUserIdentity(enabledWidgets),
+    className: "neeto-ui-bg-primary-100 neeto-ui-rounded-xl overflow-hidden",
+    sendViaEmail: function sendViaEmail() {
+      return handleSendViaEmail(EMAIL_TYPES.userIdentity);
+    },
+    title: /*#__PURE__*/React__default.createElement("div", {
+      className: "flex items-center justify-start"
+    }, /*#__PURE__*/React__default.createElement("div", null, "User identity (Optional)"), /*#__PURE__*/React__default.createElement("a", {
+      href: enabledWidgets.chat ? NEETO_CHAT_USER_IDENTITY_URL : NEETO_REPLAY_CONFIGURE_URL,
+      target: "_blank",
+      rel: "noreferrer",
+      className: "ml-1"
+    }, /*#__PURE__*/React__default.createElement(Help, {
+      size: 16
+    })))
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full"
+  }, t("neetoCommons.widget.installation.instructions.userIdentity"))) : null, enabledWidgets.replay ? /*#__PURE__*/React__default.createElement("div", {
+    className: "mx-auto w-full max-w-2xl flex-grow flex-col items-center justify-start"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "mx-auto mb-4 w-full"
+  }, /*#__PURE__*/React__default.createElement(CodeBlock, {
+    codeString: SAMPLE_CONTEXT_CODE_STRING,
+    className: "neeto-ui-bg-primary-100 neeto-ui-rounded-xl overflow-hidden",
+    sendViaEmail: function sendViaEmail() {
+      return handleSendViaEmail(EMAIL_TYPES.sessionContext);
+    },
+    title: /*#__PURE__*/React__default.createElement("div", {
+      className: "flex items-center justify-start"
+    }, /*#__PURE__*/React__default.createElement("div", null, "Session context (Optional)"), /*#__PURE__*/React__default.createElement("a", {
+      href: NEETO_REPLAY_CONFIGURE_URL,
+      target: "_blank",
+      rel: "noreferrer",
+      className: "ml-1"
+    }, /*#__PURE__*/React__default.createElement(Help, {
+      size: 16
+    })))
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "w-full"
+  }, t("neetoCommons.widget.installation.instructions.sessionContext"))) : null, /*#__PURE__*/React__default.createElement(CodeSnippet, _extends$4({
+    isModalOpen: !!emailType && isNotEmpty(selectedWidgets),
     onClose: function onClose() {
-      return setIsSendViaEmailModalOpen(false);
+      return setEmailType(EMAIL_TYPES["null"]);
     }
-  })));
+  }, getSnippetProps(emailType))));
 };
 
 EmbedCode.propTypes = {
@@ -86236,125 +86448,6 @@ var NeetoWidget = {
   WIDGET_TYPES: WIDGET_TYPES
 };
 
-function useDebounce(value) {
-  var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 350;
-
-  var _useState = useState(value),
-      _useState2 = _slicedToArray(_useState, 2),
-      debouncedValue = _useState2[0],
-      setDebouncedValue = _useState2[1];
-
-  useEffect(function () {
-    var handler = setTimeout(function () {
-      setDebouncedValue(value);
-    }, delay);
-    return function () {
-      clearTimeout(handler);
-    };
-  }, [value]);
-  return debouncedValue;
-}
-
-var useFuncDebounce = function useFuncDebounce(func) {
-  var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 350;
-  var timer = useRef(null);
-
-  var debouncedFunc = function debouncedFunc() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    clearTimeout(timer.current);
-    timer.current = setTimeout(function () {
-      return func.apply(void 0, args);
-    }, delay);
-  };
-
-  debouncedFunc.cancel = function () {
-    return clearTimeout(timer.current);
-  };
-
-  return debouncedFunc;
-};
-
-var useForceUpdate = function useForceUpdate() {
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      setValue = _useState2[1];
-
-  return function () {
-    return setValue(function (value) {
-      return value + 1;
-    });
-  };
-};
-
-var useIsElementVisibleInDom = function useIsElementVisibleInDom(target) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isIntersecting = _useState2[0],
-      setIntersecting = _useState2[1];
-
-  var forceUpdate = useForceUpdate();
-  useEffect(function () {
-    if (!target) return forceUpdate();
-    var observer = new IntersectionObserver(function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 1),
-          entry = _ref2[0];
-
-      return setIntersecting(entry.isIntersecting);
-    }, options);
-    observer.observe(target);
-    return function () {
-      return observer.unobserve(target);
-    };
-  }, [target, options]);
-  return isIntersecting;
-};
-
-var useOnClickOutside = function useOnClickOutside(ref, handler) {
-  useEffect(function () {
-    var listener = function listener(event) {
-      // Do nothing if clicking ref's element or descendent elements
-      if (!ref.current || ref.current.contains(event.target)) {
-        return;
-      }
-
-      handler(event);
-    };
-
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    return function () {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [handler]);
-};
-
-var usePrevious = function usePrevious(value) {
-  var ref = useRef(value);
-  useEffect(function () {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-};
-
-var useUpdateEffect = function useUpdateEffect(callback) {
-  var dependencies = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  var isInitialMount = useRef(true);
-  useEffect(function () {
-    if (isInitialMount.current) {
-      isInitialMount.current = false;
-      return;
-    }
-
-    callback();
-  }, dependencies);
-};
-
 var ReducerBasedProvider = function ReducerBasedProvider(initialValue, StateContext, DispatchContext, reducer) {
   return function Provider(_ref) {
     var children = _ref.children;