@bigbinary/neeto-molecules 1.0.115 → 1.1.0

package/dist/NeetoWidget.js

@@ -2,11 +2,11 @@ import { values, last, identity, assoc, pluck, any, prop, fromPairs, isEmpty } f
 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, Switch, Label, Callout } from '@bigbinary/neetoui';
+import { Typography, Select, Button, Pane, Toastr, Tooltip, Switch, Label, Callout } from '@bigbinary/neetoui';
 import { useTranslation, Trans } from 'react-i18next';
 import { useMutation, useQuery, useQueryClient, QueryClient, QueryClientProvider } from 'react-query';
 import { capitalize, noop, isNotEmpty } from '@bigbinary/neeto-commons-frontend/pure';
-import { usePrevious } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { withT, usePrevious } from '@bigbinary/neeto-commons-frontend/react-utils';
 import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
 import { Formik, Form } from 'formik';
 import { MultiEmailInput, Input } from '@bigbinary/neetoui/formik';
@@ -3003,44 +3003,63 @@ var useUpdateConfigurations = function useUpdateConfigurations() {
   }));
 };
 
-var SelectionTabs = function SelectionTabs(_ref) {
+var TooltipSwitch = withT(function (_ref) {
+  var t = _ref.t,
+    enabledClientApps = _ref.enabledClientApps,
+    widget = _ref.widget,
+    selectedWidgets = _ref.selectedWidgets,
+    updateSelectedWidgets = _ref.updateSelectedWidgets;
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    disabled: enabledClientApps.includes(widget),
+    placement: "right",
+    content: t("neetoMolecules.widget.tooltips.productIsDisabled", {
+      productName: "neeto".concat(capitalize(widget))
+    })
+  }, /*#__PURE__*/React__default.createElement(Switch, {
+    checked: selectedWidgets.includes(widget),
+    disabled: !enabledClientApps.includes(widget),
+    onChange: function onChange() {
+      return updateSelectedWidgets(widget);
+    }
+  }));
+});
+
+var SelectionSwitches = function SelectionSwitches(_ref) {
   var selectedWidgets = _ref.selectedWidgets,
     updateSelectedWidgets = _ref.updateSelectedWidgets,
-    primarySelectedWidget = _ref.primarySelectedWidget;
-  var formattedPrimaryWidget = capitalize(WIDGET_TYPES_VALUES.includes(primarySelectedWidget) ? primarySelectedWidget : "");
-  var renderSelectedTab = function renderSelectedTab() {
-    return WIDGET_TYPES_VALUES.map(function (widget, index) {
-      return primarySelectedWidget !== widget ? /*#__PURE__*/React__default.createElement("div", {
-        className: "flex items-center space-x-2",
-        key: index
-      }, /*#__PURE__*/React__default.createElement(Switch, {
-        checked: selectedWidgets.includes(widget),
-        onChange: function onChange() {
-          return updateSelectedWidgets(widget);
-        }
-      }), /*#__PURE__*/React__default.createElement(Label, null, "neeto", capitalize(widget))) : null;
-    });
-  };
+    primaryApp = _ref.primaryApp,
+    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"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-center space-x-2"
-  }, isNotEmpty(formattedPrimaryWidget) && /*#__PURE__*/React__default.createElement(Switch, {
-    checked: selectedWidgets.includes(primarySelectedWidget),
-    onChange: function onChange() {
-      return updateSelectedWidgets(primarySelectedWidget);
-    }
+  }, isNotEmpty(primaryWidget) && /*#__PURE__*/React__default.createElement(TooltipSwitch, {
+    enabledClientApps: enabledClientApps,
+    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", formattedPrimaryWidget), /*#__PURE__*/React__default.createElement("a", {
-    href: WIDGET_KB_HELP_URL[primarySelectedWidget],
+  }, /*#__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"
-  }, renderSelectedTab()));
+  }, WIDGET_TYPES_VALUES.map(function (widget, index) {
+    return primaryApp !== widget && /*#__PURE__*/React__default.createElement("div", {
+      className: "flex items-center space-x-2",
+      key: index
+    }, /*#__PURE__*/React__default.createElement(TooltipSwitch, {
+      enabledClientApps: enabledClientApps,
+      selectedWidgets: selectedWidgets,
+      updateSelectedWidgets: updateSelectedWidgets,
+      widget: widget
+    }), /*#__PURE__*/React__default.createElement(Label, null, "neeto", capitalize(widget)));
+  })));
 };
 
 var EmbedCode = function EmbedCode(_ref) {
@@ -3083,6 +3102,9 @@ var EmbedCode = function EmbedCode(_ref) {
   var selectedWidgets = neetoWidgetTokens.filter(prop("enabled")).map(function (item) {
     return item.clientApplicationName.toLowerCase();
   });
+  var enabledClientApps = neetoWidgetTokens.filter(prop("clientApplicationEnabled")).map(function (item) {
+    return item.clientApplicationName.toLowerCase();
+  });
   var enabledWidgets = fromPairs(selectedWidgets.map(function (widget) {
     return [widget, true];
   }));
@@ -3100,18 +3122,16 @@ var EmbedCode = function EmbedCode(_ref) {
       }
     }, {
       onSuccess: function onSuccess() {
+        var productName = "neeto".concat(capitalize(widget));
         var response = isEnabled ? "neetoMolecules.widget.installation.enabled" : "neetoMolecules.widget.installation.disabled";
         Toastr.success(t(response, {
-          productName: "neeto".concat(capitalize(widget))
+          productName: productName
         }));
       }
     });
   };
   var getEmbedCodeString = function getEmbedCodeString() {
-    if (isNotEmpty(widgetApiKey)) {
-      return sampleConsolidatedCodeString(enabledWidgets, widgetApiKey);
-    }
-    return "";
+    return isNotEmpty(widgetApiKey) ? sampleConsolidatedCodeString(enabledWidgets, widgetApiKey) : "";
   };
   var getSnippetProps = function getSnippetProps(selectedEmailType) {
     switch (selectedEmailType) {
@@ -3217,8 +3237,9 @@ var EmbedCode = function EmbedCode(_ref) {
     className: "mx-auto mb-10 w-full flex-col items-center justify-start"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: classnames("mx-auto", maxWidth)
-  }, /*#__PURE__*/React__default.createElement(SelectionTabs, {
-    primarySelectedWidget: primaryApp,
+  }, /*#__PURE__*/React__default.createElement(SelectionSwitches, {
+    enabledClientApps: enabledClientApps,
+    primaryApp: primaryApp,
     selectedWidgets: selectedWidgets,
     updateSelectedWidgets: updateSelectedWidgets
   }), /*#__PURE__*/React__default.createElement("div", {