@bigbinary/neeto-molecules 1.1.67 → 1.1.68

package/dist/NeetoWidget.js

@@ -1,9 +1,10 @@
-import { values, last, identity, any, pluck, assoc, prop, fromPairs, isEmpty } from 'ramda';
+import i18next, { t as t$1 } from 'i18next';
+import { values, last, pluck, identity, any, assoc, prop, fromPairs, isEmpty } from 'ramda';
 import * as React from 'react';
 import React__default, { useEffect, useState, useRef } from 'react';
 import { Info } from '@bigbinary/neeto-icons';
 import { Typography, Select, Button, Pane, Toastr, Tooltip, Switch, Label, Callout } from '@bigbinary/neetoui';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { useMutation, useQuery, useQueryClient, QueryClient, QueryClientProvider } from 'react-query';
 import classnames from 'classnames';
 import { capitalize, noop, isNotEmpty } from '@bigbinary/neeto-cist';
@@ -13,17 +14,16 @@ import Prism from 'prismjs';
 import 'prismjs/themes/prism-tomorrow.css';
 import { Formik, Form } from 'formik';
 import { MultiEmailInput, Input } from '@bigbinary/neetoui/formik';
-import i18next from 'i18next';
 import * as yup from 'yup';
 
-function _typeof(obj) {
+function _typeof(o) {
   "@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);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
 }
 
 function _toPrimitive(input, hint) {
@@ -57,7 +57,6 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var _SAMPLE_USER_IDENTITY;
 var NEETO_WIDGET_USER_IDENTITY_KEY = "NeetoWidgetUserIdentity";
 var SESSION_CONTEXT_KEY = "NeetoReplayWidgetSessionContext";
 var INSTALLATION_HELP_EMAIL = "support@neeto.com";
@@ -67,6 +66,16 @@ var WIDGET_TYPES = {
   chat: "chat",
   replay: "replay"
 };
+var WIDGET_HELP_LINKS = {
+  changelog: "https://help.neetochangelog.com/articles/installation",
+  chat: "https://help.neetochat.com/articles/installation-using-javascript-snippet",
+  replay: "https://help.neetoreplay.com/articles/install-widget"
+};
+var WIDGET_DESCRIPTIONS = {
+  changelog: t$1("neetoMolecules.widget.email.body.values.embedCode.description.changelog"),
+  chat: t$1("neetoMolecules.widget.email.body.values.embedCode.description.chat"),
+  replay: t$1("neetoMolecules.widget.email.body.values.embedCode.description.replay")
+};
 var WIDGET_TYPES_VALUES = values(WIDGET_TYPES);
 var QUERY_KEYS = {
   apiKey: "neetoWidgetApiKey",
@@ -104,7 +113,7 @@ var FRAMEWORK_SELECT_OPTIONS = [{
   label: "PHP",
   value: AVAILABLE_FRAMEWORK_OPTIONS.php
 }];
-var SAMPLE_USER_IDENTITY_CODE_STRING = (_SAMPLE_USER_IDENTITY = {}, _defineProperty(_SAMPLE_USER_IDENTITY, AVAILABLE_FRAMEWORK_OPTIONS.rails, "window.".concat(NEETO_WIDGET_USER_IDENTITY_KEY, " = {\n  user_identifier: \"<%= current_user.id %>\", // User identifier\"\n  name: \"<%= current_user.name %>\", // Full name\n  email: \"<%= current_user.email %>\", // Email address\n  started_at: \"<%= current_user.created_at.to_i %>\" // Signup date as a Unix timestamp ,\n}")), _defineProperty(_SAMPLE_USER_IDENTITY, AVAILABLE_FRAMEWORK_OPTIONS.django, "window.".concat(NEETO_WIDGET_USER_IDENTITY_KEY, " = {\n  user_identifier: \"{{ request.user.id|escapejs }}\", // User identifier\n  name: \"{{ request.user.name|escapejs }}\", // Full name\n  email: \"{{ request.user.email|escapejs }}\", // Email address\n  started_at: \"{{ request.user.created_at|date:'U' }}\" // Signup date as a Unix timestamp\"\n}")), _defineProperty(_SAMPLE_USER_IDENTITY, AVAILABLE_FRAMEWORK_OPTIONS.php, "window.".concat(NEETO_WIDGET_USER_IDENTITY_KEY, " = {\n  user_identifier: <?php echo json_encode($current_user->id) ?>, // User identifier\n  name: <?php echo json_encode($current_user->name) ?>, // Full name\n  email: <?php echo json_encode($current_user->email) ?>, // Email address\n  started_at: <?php echo strtotime($current_user->created_at) ?> // Signup date as a Unix timestamp\" ,\n}")), _SAMPLE_USER_IDENTITY);
+var SAMPLE_USER_IDENTITY_CODE_STRING = _defineProperty(_defineProperty(_defineProperty({}, AVAILABLE_FRAMEWORK_OPTIONS.rails, "window.".concat(NEETO_WIDGET_USER_IDENTITY_KEY, " = {\n  user_identifier: \"<%= current_user.id %>\", // User identifier\"\n  name: \"<%= current_user.name %>\", // Full name\n  email: \"<%= current_user.email %>\", // Email address\n  started_at: \"<%= current_user.created_at.to_i %>\" // Signup date as a Unix timestamp ,\n}")), AVAILABLE_FRAMEWORK_OPTIONS.django, "window.".concat(NEETO_WIDGET_USER_IDENTITY_KEY, " = {\n  user_identifier: \"{{ request.user.id|escapejs }}\", // User identifier\n  name: \"{{ request.user.name|escapejs }}\", // Full name\n  email: \"{{ request.user.email|escapejs }}\", // Email address\n  started_at: \"{{ request.user.created_at|date:'U' }}\" // Signup date as a Unix timestamp\"\n}")), AVAILABLE_FRAMEWORK_OPTIONS.php, "window.".concat(NEETO_WIDGET_USER_IDENTITY_KEY, " = {\n  user_identifier: <?php echo json_encode($current_user->id) ?>, // User identifier\n  name: <?php echo json_encode($current_user->name) ?>, // Full name\n  email: <?php echo json_encode($current_user->email) ?>, // Email address\n  started_at: <?php echo strtotime($current_user->created_at) ?> // Signup date as a Unix timestamp\" ,\n}"));
 var WIDGET_CONFIG_URL = "api/widget/v1/neeto_widget_tokens";
 var EMBED_CODE_EMAIL_URL = "api/widget/v1/email_snippets";
 var CHAT_WIDGET_KB_BASE_URL = "https://help.neetochat.com";
@@ -137,31 +146,31 @@ function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
 
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
     try {
-      if (_x = (_i = _i.call(arr)).next, 0 === i) {
-        if (Object(_i) !== _i) return;
-        _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
     } finally {
       try {
-        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
       } finally {
-        if (_d) throw _e;
+        if (o) throw n;
       }
     }
-    return _arr;
+    return a;
   }
 }
 
@@ -302,6 +311,62 @@ var PageLoader = function PageLoader(_ref) {
 };
 var PageLoader$1 = /*#__PURE__*/React__default.memo(PageLoader);
 
+var ChatWidgetBody = function ChatWidgetBody(_ref) {
+  var widgets = _ref.widgets;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, widgets.includes(WIDGET_TYPES.changelog) && /*#__PURE__*/React__default.createElement(Trans, {
+    i18nKey: "neetoMolecules.widget.email.body.values.embedCode.changelogHelp",
+    values: {
+      helpLink: WIDGET_HELP_LINKS.changelog
+    },
+    components: {
+      p: /*#__PURE__*/React__default.createElement(Typography, {
+        className: "mb-2",
+        style: "body2"
+      }),
+      a: /*#__PURE__*/React__default.createElement("a", {
+        className: "neeto-ui-text-primary-800",
+        href: WIDGET_HELP_LINKS.changelog,
+        rel: "noreferrer",
+        target: "_blank"
+      })
+    }
+  }), widgets.includes(WIDGET_TYPES.chat) && /*#__PURE__*/React__default.createElement(Trans, {
+    i18nKey: "neetoMolecules.widget.email.body.values.embedCode.chatHelp",
+    values: {
+      helpLink: WIDGET_HELP_LINKS.chat
+    },
+    components: {
+      p: /*#__PURE__*/React__default.createElement(Typography, {
+        className: "mb-2",
+        style: "body2"
+      }),
+      a: /*#__PURE__*/React__default.createElement("a", {
+        className: "neeto-ui-text-primary-800",
+        href: WIDGET_HELP_LINKS.chat,
+        rel: "noreferrer",
+        target: "_blank"
+      })
+    }
+  }), widgets.includes(WIDGET_TYPES.replay) && /*#__PURE__*/React__default.createElement(Trans, {
+    i18nKey: "neetoMolecules.widget.email.body.values.embedCode.replayHelp",
+    values: {
+      helpLink: WIDGET_HELP_LINKS.replay
+    },
+    components: {
+      p: /*#__PURE__*/React__default.createElement(Typography, {
+        className: "mb-2",
+        style: "body2"
+      }),
+      a: /*#__PURE__*/React__default.createElement("a", {
+        className: "neeto-ui-text-primary-800",
+        href: WIDGET_HELP_LINKS.replay,
+        rel: "noreferrer",
+        target: "_blank"
+      })
+    }
+  }));
+};
+
 var SyntaxHighlighter = function SyntaxHighlighter(_ref) {
   var className = _ref.className,
     code = _ref.code,
@@ -432,9 +497,21 @@ var getEmailWidgetSnippetFormInitialValues = function getEmailWidgetSnippetFormI
   };
 };
 var getSortedPrefixedWidgets = function getSortedPrefixedWidgets(widgets) {
-  return widgets.sort().map(function (widget) {
+  var sortedWidgets = widgets.sort().map(function (widget) {
     return "neeto".concat(capitalize(widget));
   });
+  return sortedWidgets.length === 1 ? sortedWidgets : t$1("neetoMolecules.widget.email.widgetList", {
+    firstWidgets: sortedWidgets.slice(0, -1),
+    lastWidget: last(sortedWidgets)
+  });
+};
+var getWidgetDescriptions = function getWidgetDescriptions(widgets) {
+  var values = Object.entries(WIDGET_DESCRIPTIONS).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 1),
+      widget = _ref2[0];
+    return widgets.includes(widget);
+  });
+  return pluck(1, values);
 };
 var getEmailWidgetSnippetValidationSchema = function getEmailWidgetSnippetValidationSchema() {
   return yup.object({
@@ -582,8 +659,8 @@ var useForceUpdate = function useForceUpdate() {
   };
 };
 
-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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchApiKey = function useFetchApiKey() {
   return useQuery(QUERY_KEYS.apiKey, function () {
     if (window.globalProps.railsEnv === "heroku" || !window.globalProps.ssoEnabled) {
@@ -748,16 +825,33 @@ var EmbedCode = function EmbedCode(_ref) {
       case EMAIL_TYPES.embedCode:
         return {
           codeString: getEmbedCodeString(),
-          subject: t("neetoMolecules.widget.email.fields.subject.values.embedCode"),
+          subject: t("neetoMolecules.widget.email.fields.subject.values.embedCode", {
+            widgetList: getSortedPrefixedWidgets(selectedWidgets)
+          }),
           body: /*#__PURE__*/React__default.createElement("div", {
             ref: bodyRef
           }, /*#__PURE__*/React__default.createElement(Trans, {
-            i18nKey: "neetoMolecules.widget.email.body.values.embedCode",
+            i18nKey: "neetoMolecules.widget.email.body.values.embedCode.mainText",
+            components: {
+              p: /*#__PURE__*/React__default.createElement(Typography, {
+                className: "mb-2",
+                style: "body2"
+              })
+            },
+            values: {
+              val: getWidgetDescriptions(selectedWidgets)
+            }
+          }), /*#__PURE__*/React__default.createElement(ChatWidgetBody, {
+            widgets: selectedWidgets
+          }), /*#__PURE__*/React__default.createElement(Trans, {
+            i18nKey: "neetoMolecules.widget.email.body.values.embedCode.supportText",
+            values: {
+              helpEmail: INSTALLATION_HELP_EMAIL
+            },
             components: {
-              p: /*#__PURE__*/React__default.createElement("p", {
-                style: {
-                  marginBottom: "8px"
-                }
+              p: /*#__PURE__*/React__default.createElement(Typography, {
+                className: "mb-2",
+                style: "body2"
               }),
               mail: /*#__PURE__*/React__default.createElement("a", {
                 className: "neeto-ui-text-primary-800",
@@ -765,10 +859,6 @@ var EmbedCode = function EmbedCode(_ref) {
                 rel: "noreferrer",
                 target: "_blank"
               })
-            },
-            values: {
-              val: getSortedPrefixedWidgets(selectedWidgets),
-              helpEmail: INSTALLATION_HELP_EMAIL
             }
           }))
         };
@@ -782,10 +872,9 @@ var EmbedCode = function EmbedCode(_ref) {
           }, /*#__PURE__*/React__default.createElement(Trans, {
             i18nKey: "neetoMolecules.widget.email.body.values.userIdentity",
             components: {
-              p: /*#__PURE__*/React__default.createElement("p", {
-                style: {
-                  marginBottom: "8px"
-                }
+              p: /*#__PURE__*/React__default.createElement(Typography, {
+                className: "mb-2",
+                style: "body2"
               }),
               configureLink: /*#__PURE__*/React__default.createElement("a", {
                 className: "neeto-ui-text-primary-800",
@@ -811,10 +900,9 @@ var EmbedCode = function EmbedCode(_ref) {
               sessionContextKbUrl: NEETO_REPLAY_CONFIGURE_URL
             },
             components: {
-              p: /*#__PURE__*/React__default.createElement("p", {
-                style: {
-                  marginBottom: "8px"
-                }
+              p: /*#__PURE__*/React__default.createElement(Typography, {
+                className: "mb-2",
+                style: "body2"
               }),
               configureLink: /*#__PURE__*/React__default.createElement("a", {
                 className: "neeto-ui-text-primary-800",
@@ -868,14 +956,18 @@ var EmbedCode = function EmbedCode(_ref) {
     className: "w-full"
   }, /*#__PURE__*/React__default.createElement(Trans, {
     values: {
-      val: getSortedPrefixedWidgets(selectedWidgets)
+      widgetList: getSortedPrefixedWidgets(selectedWidgets)
     },
     components: {
-      fontBold: /*#__PURE__*/React__default.createElement("span", {
-        className: "font-semibold"
+      fontBold: /*#__PURE__*/React__default.createElement(Typography, {
+        component: "span",
+        style: "body2",
+        weight: "semibold"
       }),
-      fontNormal: /*#__PURE__*/React__default.createElement("span", {
-        className: "font-normal"
+      fontNormal: /*#__PURE__*/React__default.createElement(Typography, {
+        component: "span",
+        style: "body2",
+        weight: "normal"
       })
     },
     i18nKey: isNotEmpty(selectedWidgets) ? "neetoMolecules.widget.installation.instructions.placement.selectedWidgets" : "neetoMolecules.widget.installation.instructions.placement.noneOfThese"