@bigbinary/neeto-molecules 1.1.77 → 1.2.0-beta1

package/dist/NeetoWidget.js

@@ -1,62 +1,29 @@
-import i18next, { t as t$1 } from 'i18next';
+import { _ as _defineProperty } from './defineProperty-549061a7.js';
+import i18next, { t } 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 { useMutation, useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Info } from '@bigbinary/neeto-icons';
 import { Typography, Select, Button, Pane, Toastr, Tooltip, Switch, Label, Callout } from '@bigbinary/neetoui';
 import { Trans, useTranslation } from 'react-i18next';
-import { useMutation, useQuery, useQueryClient, QueryClient, QueryClientProvider } from 'react-query';
+import { _ as _extends } from './extends-093996c9.js';
+import { _ as _slicedToArray } from './slicedToArray-b4278ecd.js';
 import classnames from 'classnames';
 import { capitalize, noop, isNotEmpty } from '@bigbinary/neeto-cist';
-import { withT, usePrevious } from '@bigbinary/neeto-commons-frontend/react-utils';
-import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
+import usePrevious from '@bigbinary/neeto-commons-frontend/react-utils/usePrevious';
+import PageLoader from './PageLoader.js';
+import CopyToClipboardButton from './CopyToClipboardButton.js';
 import Prism from 'prismjs';
 import 'prismjs/themes/prism-tomorrow.css';
 import { Formik, Form } from 'formik';
 import { MultiEmailInput, Input } from '@bigbinary/neetoui/formik';
 import axios from 'axios';
 import * as yup from 'yup';
-
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  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) {
-  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;
-}
+import useMutationWithInvalidation from '@bigbinary/neeto-commons-frontend/react-utils/useMutationWithInvalidation';
+import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
+import './objectWithoutProperties-a0edb288.js';
+import './inject-css-c86de496.js';
+import '@bigbinary/neeto-commons-frontend/utils/general';
 
 var NEETO_WIDGET_USER_IDENTITY_KEY = "NeetoWidgetUserIdentity";
 var SESSION_CONTEXT_KEY = "NeetoReplayWidgetSessionContext";
@@ -73,9 +40,9 @@ var WIDGET_HELP_LINKS = {
   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")
+  changelog: t("neetoMolecules.widget.email.body.values.embedCode.description.changelog"),
+  chat: t("neetoMolecules.widget.email.body.values.embedCode.description.chat"),
+  replay: t("neetoMolecules.widget.email.body.values.embedCode.description.replay")
 };
 var WIDGET_TYPES_VALUES = values(WIDGET_TYPES);
 var QUERY_KEYS = {
@@ -127,190 +94,7 @@ var WIDGET_KB_HELP_URL = {
   chat: "".concat(CHAT_WIDGET_KB_BASE_URL, "/categories/installation"),
   replay: "".concat(REPLAY_WIDGET_KB_BASE_URL, "/categories/widget-installation-usage")
 };
-
-function _extends$1() {
-  _extends$1 = 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$1.apply(this, arguments);
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-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 (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 (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-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;
-}
-
-var _path, _path2, _g, _defs;
-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 SvgNeeto = function SvgNeeto(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    width: 50,
-    height: 50,
-    viewBox: "0 0 415 415",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    d: "M414.989 207.495C414.989 92.899 322.091 0 207.495 0H0v414.989h414.989V207.495Z",
-    fill: "#0043AC"
-  })), /*#__PURE__*/React.createElement("mask", {
-    id: "neeto_svg__a",
-    style: {
-      maskType: "alpha"
-    },
-    maskUnits: "userSpaceOnUse",
-    x: 0,
-    y: 0,
-    width: 415,
-    height: 415
-  }, _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
-    d: "M414.989 207.495C414.989 92.899 322.091 0 207.495 0H0v414.989h414.989V207.495Z",
-    fill: "#0043AC"
-  }))), _g || (_g = /*#__PURE__*/React.createElement("g", {
-    mask: "url(#neeto_svg__a)"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M233.747 348.74c88.579 101.145 172.015 116.411 202.661 111.401v32.491H-8.032V230.487c43.685-2.726 153.2 17.108 241.779 118.253Z",
-    fill: "url(#neeto_svg__b)"
-  }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("radialGradient", {
-    id: "neeto_svg__b",
-    cx: 0,
-    cy: 0,
-    r: 1,
-    gradientUnits: "userSpaceOnUse",
-    gradientTransform: "rotate(47.118 -220.556 214.818) scale(427.964 725.049)"
-  }, /*#__PURE__*/React.createElement("stop", {
-    stopColor: "#0043AC"
-  }), /*#__PURE__*/React.createElement("stop", {
-    offset: 1,
-    stopColor: "#3DB1CA",
-    stopOpacity: 0.8
-  })))));
-};
-
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css = ".neeto-molecules-pageloader__wrapper{height:100%;position:relative;width:100%}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader{height:100%;left:0;position:absolute;top:0;width:100%}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader__content{height:66px;margin-bottom:16px;overflow:hidden;padding:8px;position:relative;width:66px}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader__text{color:rgb(var(--neeto-ui-gray-800));font-size:1.25rem;line-height:1.75rem;margin-bottom:4rem;text-align:center}.neeto-molecules-pageloader__spinner{display:flex;gap:2px;height:25px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.neeto-molecules-pageloader__spinner>div{animation:neeto-ui-stretch-delay 1.2s ease-in-out infinite;background-color:#fff;border-radius:2px;display:inline-flex;height:100%;width:2px}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect2{animation-delay:-1.1s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect3{animation-delay:-1s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect4{animation-delay:-.9s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect5{animation-delay:-.8s}@keyframes neeto-ui-stretch-delay{0%,40%,to{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}";
-n(css,{});
-
-var _excluded = ["text"];
-var PageLoader = function PageLoader(_ref) {
-  var _ref$text = _ref.text,
-    text = _ref$text === void 0 ? "" : _ref$text,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default.createElement("div", _extends$1({
-    className: "neeto-molecules-pageloader__wrapper"
-  }, otherProps), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-pageloader neeto-ui-flex neeto-ui-flex-col neeto-ui-items-center neeto-ui-justify-center"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-pageloader__content neeto-ui-flex neeto-ui-flex-shrink-0 neeto-ui-items-center neeto-ui-justify-center",
-    "data-cy": "neeto-molecules-pageloader"
-  }, /*#__PURE__*/React__default.createElement(SvgNeeto, {
-    className: "neeto-molecules-pageloader__logo",
-    size: 50
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-pageloader__spinner"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-pageloader__rect1"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-pageloader__rect2"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-pageloader__rect3"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-pageloader__rect4"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-pageloader__rect5"
-  }))), text && /*#__PURE__*/React__default.createElement(Typography, {
-    style: "h5",
-    weight: "semibold"
-  }, text)));
-};
-var PageLoader$1 = /*#__PURE__*/React__default.memo(PageLoader);
+var USE_NEETO_WIDGET_NPM_PAGE_URL = "https://www.npmjs.com/package/@bigbinary/react-use-neeto-widget";
 
 var ChatWidgetBody = function ChatWidgetBody(_ref) {
   var widgets = _ref.widgets;
@@ -501,7 +285,7 @@ var getSortedPrefixedWidgets = function getSortedPrefixedWidgets(widgets) {
   var sortedWidgets = widgets.sort().map(function (widget) {
     return "neeto".concat(capitalize(widget));
   });
-  return sortedWidgets.length === 1 ? sortedWidgets : t$1("neetoMolecules.widget.email.widgetList", {
+  return sortedWidgets.length === 1 ? sortedWidgets : t("neetoMolecules.widget.email.widgetList", {
     widgets: sortedWidgets
   });
 };
@@ -549,11 +333,15 @@ var updateWidgetConfiguration = function updateWidgetConfiguration(_ref) {
 };
 
 var useEmailEmbedCode = function useEmailEmbedCode(onSuccess) {
-  return useMutation(function (emailData) {
-    return emailWidgetSnippet(emailData);
-  }, {
-    onSuccess: onSuccess
-  });
+  return (
+    // useMutation(emailData => emailWidgetSnippet(emailData), { onSuccess });
+    useMutation({
+      mutationFn: function mutationFn(emailData) {
+        return emailWidgetSnippet(emailData);
+      },
+      onSuccess: onSuccess
+    })
+  );
 };
 
 var CodeSnippet = function CodeSnippet(_ref) {
@@ -609,8 +397,8 @@ var CodeSnippet = function CodeSnippet(_ref) {
     return props;
   };
   return /*#__PURE__*/React__default.createElement(Pane, {
-    isOpen: isPaneOpen,
-    onClose: onClose
+    onClose: onClose,
+    isOpen: isPaneOpen
   }, /*#__PURE__*/React__default.createElement(Formik, {
     initialValues: getEmailWidgetSnippetFormInitialValues(subject),
     validationSchema: getEmailWidgetSnippetValidationSchema(),
@@ -634,9 +422,9 @@ var CodeSnippet = function CodeSnippet(_ref) {
   }, body), /*#__PURE__*/React__default.createElement(CodeBlock, renderCodeBlockProps()))), /*#__PURE__*/React__default.createElement(Pane.Footer, {
     className: "gap-x-2"
   }, /*#__PURE__*/React__default.createElement(Button, {
-    disabled: emailMutation.isLoading,
+    disabled: emailMutation.isPending,
     label: t("neetoMolecules.widget.email.actions.send"),
-    loading: emailMutation.isLoading,
+    loading: emailMutation.isPending,
     type: "submit"
   }), /*#__PURE__*/React__default.createElement(Button, {
     label: t("neetoMolecules.widget.email.actions.cancel"),
@@ -660,30 +448,60 @@ var useForceUpdate = function useForceUpdate() {
 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) {
-      return Promise.resolve({
-        widgetApiKey: "placeholder-api-key"
-      });
-    }
-    return queryWidgetApiKey();
-  }, {
-    staleTime: DEFAULT_QUERY_STALE_TIME
-  });
+  return (
+    // useQuery(
+    //   QUERY_KEYS.apiKey,
+    //   () => {
+    //     if (
+    //       window.globalProps.railsEnv === "heroku" ||
+    //       !window.globalProps.ssoEnabled
+    //     ) {
+    //       return Promise.resolve({ widgetApiKey: "placeholder-api-key" });
+    //     }
+
+    //     return queryWidgetApiKey();
+    //   },
+    //   { staleTime: DEFAULT_QUERY_STALE_TIME }
+    // );
+    useQuery({
+      queryKey: [QUERY_KEYS.apiKey],
+      queryFn: function queryFn() {
+        if (window.globalProps.railsEnv === "heroku" || !window.globalProps.ssoEnabled) {
+          return Promise.resolve({
+            widgetApiKey: "placeholder-api-key"
+          });
+        }
+        return queryWidgetApiKey();
+      },
+      staleTime: DEFAULT_QUERY_STALE_TIME
+    })
+  );
 };
 var useFetchConfigurations = function useFetchConfigurations() {
-  return useQuery(QUERY_KEYS.configuration, fetchWidgetConfiguration, {
-    staleTime: DEFAULT_QUERY_STALE_TIME
-  });
+  return (
+    // useQuery(QUERY_KEYS.configuration, fetchWidgetConfiguration, {
+    //   staleTime: DEFAULT_QUERY_STALE_TIME,
+    // });
+    useQuery({
+      queryKey: [QUERY_KEYS.configuration],
+      queryFn: fetchWidgetConfiguration,
+      staleTime: DEFAULT_QUERY_STALE_TIME
+    })
+  );
 };
 var useUpdateConfigurations = function useUpdateConfigurations() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var queryClient = useQueryClient();
-  return useMutation(updateWidgetConfiguration, _objectSpread(_objectSpread({}, options), {}, {
-    onSuccess: function onSuccess() {
-      return queryClient.invalidateQueries(QUERY_KEYS.configuration);
-    }
-  }));
+  return (
+    // const queryClient = useQueryClient();
+
+    // return useMutation(updateWidgetConfiguration, {
+    //   ...options,
+    //   onSuccess: () => queryClient.invalidateQueries(QUERY_KEYS.configuration),
+    // });
+    useMutationWithInvalidation(updateWidgetConfiguration, _objectSpread({
+      keysToInvalidate: [QUERY_KEYS.configuration]
+    }, options))
+  );
 };
 
 var TooltipSwitch = withT(function (_ref) {
@@ -714,7 +532,7 @@ var SelectionSwitches = function SelectionSwitches(_ref) {
     enabledClientApps = _ref.enabledClientApps;
   var primaryWidget = WIDGET_TYPES_VALUES.includes(primaryApp) ? primaryApp : "";
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-4 flex w-full items-center justify-between gap-2"
+    className: "mb-4 flex w-full flex-wrap items-center justify-between gap-6"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center space-x-2"
   }, isNotEmpty(primaryWidget) && /*#__PURE__*/React__default.createElement(TooltipSwitch, {
@@ -722,16 +540,8 @@ var SelectionSwitches = function SelectionSwitches(_ref) {
     selectedWidgets: selectedWidgets,
     updateSelectedWidgets: updateSelectedWidgets,
     widget: primaryWidget
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center space-x-1"
-  }, /*#__PURE__*/React__default.createElement(Label, null, "neeto", capitalize(primaryWidget)), /*#__PURE__*/React__default.createElement("a", {
-    href: WIDGET_KB_HELP_URL[primaryApp],
-    rel: "noreferrer",
-    target: "_blank"
-  }, /*#__PURE__*/React__default.createElement(Info, {
-    size: 16
-  })))), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-end gap-6"
+  }), /*#__PURE__*/React__default.createElement(Label, null, "neeto", capitalize(primaryWidget))), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-wrap items-center gap-6 sm:justify-end"
   }, WIDGET_TYPES_VALUES.map(function (widget, index) {
     return primaryApp !== widget && /*#__PURE__*/React__default.createElement("div", {
       className: "flex items-center space-x-2",
@@ -787,6 +597,7 @@ var EmbedCode = function EmbedCode(_ref) {
   }).map(function (item) {
     return item.clientApplicationName.toLowerCase();
   });
+  var isOnlyChatWidgetSelected = selectedWidgets.length === 1 && selectedWidgets[0] === WIDGET_TYPES.chat;
   var enabledClientApps = neetoWidgetTokens.filter(prop("clientApplicationEnabled")).map(function (item) {
     return item.clientApplicationName.toLowerCase();
   });
@@ -924,10 +735,38 @@ var EmbedCode = function EmbedCode(_ref) {
     }
     setEmailType(selectedEmail);
   };
+  var getSelectedWidgetsInstructionsKey = function getSelectedWidgetsInstructionsKey() {
+    if (isEmpty(selectedWidgets)) {
+      return "neetoMolecules.widget.installation.instructions.placement.noneOfThese";
+    }
+    if (isOnlyChatWidgetSelected) {
+      return "neetoMolecules.widget.installation.instructions.placement.selectedChatWidget";
+    }
+    return "neetoMolecules.widget.installation.instructions.placement.selectedWidgets";
+  };
+  var embedHelpTextTranslationComponents = {
+    fontBold: /*#__PURE__*/React__default.createElement(Typography, {
+      component: "span",
+      style: "body2",
+      weight: "semibold"
+    }),
+    widgetNpmLink: /*#__PURE__*/React__default.createElement("a", {
+      className: "neeto-ui-text-primary-800",
+      href: USE_NEETO_WIDGET_NPM_PAGE_URL,
+      rel: "noreferrer",
+      target: "_blank"
+    }),
+    Link: /*#__PURE__*/React__default.createElement("a", {
+      className: "neeto-ui-text-primary-800",
+      href: WIDGET_KB_HELP_URL[primaryApp],
+      rel: "noreferrer",
+      target: "_blank"
+    })
+  };
   if (isLoadingApiKey || isLoadingConfigurations) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "h-full w-full"
-    }, /*#__PURE__*/React__default.createElement(PageLoader$1, null));
+    }, /*#__PURE__*/React__default.createElement(PageLoader, null));
   }
   return /*#__PURE__*/React__default.createElement("div", {
     className: "mx-auto mb-10 w-full flex-col items-center justify-start"
@@ -953,22 +792,11 @@ var EmbedCode = function EmbedCode(_ref) {
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "w-full"
   }, /*#__PURE__*/React__default.createElement(Trans, {
+    components: embedHelpTextTranslationComponents,
+    i18nKey: getSelectedWidgetsInstructionsKey(),
     values: {
       widgetList: getSortedPrefixedWidgets(selectedWidgets)
-    },
-    components: {
-      fontBold: /*#__PURE__*/React__default.createElement(Typography, {
-        component: "span",
-        style: "body2",
-        weight: "semibold"
-      }),
-      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"
+    }
   }))), shouldShowUserIdentity ? /*#__PURE__*/React__default.createElement("div", {
     className: "mb-8 w-full flex-grow flex-col items-center justify-start"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -979,45 +807,49 @@ var EmbedCode = function EmbedCode(_ref) {
       selectedFramework: selectedFramework,
       setSelectedFramework: setSelectedFramework
     },
+    title: t("neetoMolecules.widget.title.userIdentity"),
     codeString: getSampleUserIdentity(enabledWidgets, selectedFramework.value),
     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, t("neetoMolecules.widget.title.userIdentity")), /*#__PURE__*/React__default.createElement("a", {
-      className: "ml-1",
-      rel: "noreferrer",
-      target: "_blank",
-      href: enabledWidgets.chat ? NEETO_CHAT_USER_IDENTITY_URL : NEETO_REPLAY_CONFIGURE_URL
-    }, /*#__PURE__*/React__default.createElement(Info, {
-      size: 16
-    })))
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full"
-  }, t("neetoMolecules.widget.installation.instructions.userIdentity"))) : null, shouldShowSessionContext ? /*#__PURE__*/React__default.createElement("div", {
+    }
+  })), /*#__PURE__*/React__default.createElement(Trans, {
+    i18nKey: "neetoMolecules.widget.installation.instructions.userIdentity",
+    components: {
+      p: /*#__PURE__*/React__default.createElement(Typography, {
+        style: "body2"
+      }),
+      Link: /*#__PURE__*/React__default.createElement("a", {
+        className: "neeto-ui-text-primary-800",
+        rel: "noreferrer",
+        target: "_blank",
+        href: enabledWidgets.chat ? NEETO_CHAT_USER_IDENTITY_URL : NEETO_REPLAY_CONFIGURE_URL
+      })
+    }
+  })) : null, shouldShowSessionContext ? /*#__PURE__*/React__default.createElement("div", {
     className: "w-full flex-grow flex-col items-center justify-start"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "mx-auto mb-2 w-full"
   }, /*#__PURE__*/React__default.createElement(CodeBlock, {
     className: "neeto-ui-bg-primary-100 neeto-ui-rounded-lg",
     codeString: SAMPLE_CONTEXT_CODE_STRING,
+    title: t("neetoMolecules.widget.title.sessionContext"),
     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, t("neetoMolecules.widget.title.sessionContext")), /*#__PURE__*/React__default.createElement("a", {
-      className: "ml-1",
-      href: NEETO_REPLAY_CONFIGURE_URL,
-      rel: "noreferrer",
-      target: "_blank"
-    }, /*#__PURE__*/React__default.createElement(Info, {
-      size: 16
-    })))
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full"
-  }, t("neetoMolecules.widget.installation.instructions.sessionContext"))) : null), /*#__PURE__*/React__default.createElement(CodeSnippet, _extends$1({
+    }
+  })), /*#__PURE__*/React__default.createElement(Trans, {
+    i18nKey: "neetoMolecules.widget.installation.instructions.sessionContext",
+    components: {
+      p: /*#__PURE__*/React__default.createElement(Typography, {
+        style: "body2"
+      }),
+      Link: /*#__PURE__*/React__default.createElement("a", {
+        className: "neeto-ui-text-primary-800",
+        href: NEETO_REPLAY_CONFIGURE_URL,
+        rel: "noreferrer",
+        target: "_blank"
+      })
+    }
+  })) : null), /*#__PURE__*/React__default.createElement(CodeSnippet, _extends({
     isPaneOpen: !!emailType && isNotEmpty(selectedWidgets),
     onClose: function onClose() {
       return setEmailType(EMAIL_TYPES["null"]);