@bigbinary/neeto-integrations-frontend 1.2.2 → 1.4.0

package/dist/index.js

@@ -2,10 +2,10 @@ import * as React from 'react';
 import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import { noop as noop$1, isNotEmpty } from '@bigbinary/neeto-commons-frontend/pure';
-import { Check, MenuVertical, MenuHorizontal, Copy } from '@bigbinary/neeto-icons';
-import { Dropdown, Typography, Tag, Button, Modal as Modal$1, Table, Alert, Callout, Spinner } from '@bigbinary/neetoui';
-import { isEmpty, isNotNil } from 'ramda';
-import { timeFormat, copyToClipboard } from '@bigbinary/neeto-commons-frontend/utils';
+import { joinHyphenCase, timeFormat, copyToClipboard } from '@bigbinary/neeto-commons-frontend/utils';
+import { Dropdown as Dropdown$1, Tag, Tooltip, Typography, Spinner, Button, Modal as Modal$1, Table, Alert, Callout } from '@bigbinary/neetoui';
+import { isNotNil, isEmpty } from 'ramda';
+import { MenuVertical, Warning, Check, MenuHorizontal, Copy } from '@bigbinary/neeto-icons';
 import { Form, Input } from '@bigbinary/neetoui/formik';
 import * as Yup from 'yup';
 
@@ -2782,7 +2782,7 @@ instance.hasLoadedNamespace;
 instance.loadNamespaces;
 instance.loadLanguages;
 
-function _objectWithoutPropertiesLoose(source, excluded) {
+function _objectWithoutPropertiesLoose$1(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -2795,9 +2795,9 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-function _objectWithoutProperties(source, excluded) {
+function _objectWithoutProperties$1(source, excluded) {
   if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var target = _objectWithoutPropertiesLoose$1(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -3181,7 +3181,7 @@ function hasLoadedNamespace(ns, i18n) {
   });
 }
 
-var _excluded = ["format"],
+var _excluded$1 = ["format"],
   _excluded2 = ["children", "count", "parent", "i18nKey", "context", "tOptions", "values", "defaults", "components", "ns", "i18n", "t", "shouldUnescape"];
 function ownKeys$3(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -3265,7 +3265,7 @@ function nodesToString(children, i18nOptions) {
       warn("Trans: the passed in value is invalid - seems you passed in a null child.");
     } else if (_typeof$1(child) === 'object') {
       var format = child.format,
-        clone = _objectWithoutProperties(child, _excluded);
+        clone = _objectWithoutProperties$1(child, _excluded$1);
       var keys = Object.keys(clone);
       if (keys.length === 1) {
         var value = format ? "".concat(keys[0], ", ").concat(format) : keys[0];
@@ -3401,7 +3401,7 @@ function Trans(_ref) {
     i18nFromProps = _ref.i18n,
     tFromProps = _ref.t,
     shouldUnescape = _ref.shouldUnescape,
-    additionalProps = _objectWithoutProperties(_ref, _excluded2);
+    additionalProps = _objectWithoutProperties$1(_ref, _excluded2);
   var _ref2 = useContext(I18nContext) || {},
     i18nFromContext = _ref2.i18n,
     defaultNSFromContext = _ref2.defaultNS;
@@ -3612,7 +3612,15 @@ var common = {
 	disconnect: "Disconnect",
 	finish: "Finish",
 	required: "Required",
-	"delete": "Delete"
+	"delete": "Delete",
+	tryAgain: "Try Again"
+};
+var tags = {
+	connected: "Connected",
+	expired: "Expired"
+};
+var tooltip = {
+	integrationNotAvailable: "This integration is not available right now."
 };
 var demo = {
 	title: "Check how it behaves",
@@ -3643,6 +3651,8 @@ var zapier = {
 };
 var en = {
 	common: common,
+	tags: tags,
+	tooltip: tooltip,
 	demo: demo,
 	walkthroughModal: walkthroughModal,
 	zapier: zapier
@@ -3662,66 +3672,234 @@ instance.use(initReactI18next).init({
   }
 });
 
-var Menu$1 = Dropdown.Menu,
-  MenuItem$1 = Dropdown.MenuItem;
+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);
+}
+
+var renderDataCy = function renderDataCy(label, suffix) {
+  return "".concat(label.replace(/\./g, "").toLowerCase(), "-").concat(suffix);
+};
+
+var Menu$1 = Dropdown$1.Menu,
+  MenuItem$1 = Dropdown$1.MenuItem;
+var Dropdown = function Dropdown(_ref) {
+  var _ref$customDropDown = _ref.customDropDown,
+    CustomDropdown = _ref$customDropDown === void 0 ? {} : _ref$customDropDown,
+    _ref$handleManage = _ref.handleManage,
+    handleManage = _ref$handleManage === void 0 ? noop$1 : _ref$handleManage,
+    _ref$hideDisconnect = _ref.hideDisconnect,
+    hideDisconnect = _ref$hideDisconnect === void 0 ? false : _ref$hideDisconnect,
+    _ref$onDisconnect = _ref.onDisconnect,
+    onDisconnect = _ref$onDisconnect === void 0 ? noop$1 : _ref$onDisconnect;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var isManageable = isNotNil(handleManage);
+  if (isNotNil(CustomDropdown)) {
+    return CustomDropdown;
+  }
+  if (!isManageable && hideDisconnect) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(Dropdown$1, {
+    buttonProps: {
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    },
+    buttonStyle: "text",
+    dropdownProps: {
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    },
+    icon: MenuVertical
+  }, /*#__PURE__*/React__default.createElement(Menu$1, null, isManageable && /*#__PURE__*/React__default.createElement(MenuItem$1.Button, {
+    onClick: function onClick() {
+      return handleManage();
+    }
+  }, t("common.manage")), !hideDisconnect && /*#__PURE__*/React__default.createElement(MenuItem$1.Button, {
+    onClick: function onClick() {
+      return onDisconnect();
+    }
+  }, t("common.disconnect"))));
+};
+
+var Status = function Status(_ref) {
+  var isExpired = _ref.isExpired;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var tagProps = isExpired ? {
+    icon: Warning,
+    label: t("tags.expired"),
+    style: "warning"
+  } : {
+    icon: Check,
+    label: t("tags.connected"),
+    style: "success"
+  };
+  return /*#__PURE__*/React__default.createElement(Tag, _extends$1({
+    className: "flex-row-reverse"
+  }, tagProps));
+};
+
+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 _excluded = ["disabled", "children"];
+var TooltipWrapper = function TooltipWrapper(_ref) {
+  var disabled = _ref.disabled,
+    children = _ref.children,
+    tooltipProps = _objectWithoutProperties(_ref, _excluded);
+  return disabled ? /*#__PURE__*/React__default.createElement(Tooltip, tooltipProps, children) : children;
+};
+
 var Card = function Card(_ref) {
-  var label = _ref.label,
-    description = _ref.description,
-    Icon = _ref.Icon,
+  var Icon = _ref.icon,
+    _ref$subIcons = _ref.subIcons,
+    subIcons = _ref$subIcons === void 0 ? [] : _ref$subIcons,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? "" : _ref$description,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
-    isConnected = _ref.isConnected,
-    _ref$isStatusLoading = _ref.isStatusLoading,
-    isStatusLoading = _ref$isStatusLoading === void 0 ? false : _ref$isStatusLoading,
-    _ref$customDropdown = _ref.customDropdown,
-    customDropdown = _ref$customDropdown === void 0 ? null : _ref$customDropdown,
-    _ref$onDisconnect = _ref.onDisconnect,
-    onDisconnect = _ref$onDisconnect === void 0 ? noop$1 : _ref$onDisconnect,
     _ref$onConnect = _ref.onConnect,
     onConnect = _ref$onConnect === void 0 ? noop$1 : _ref$onConnect,
+    _ref$onDisconnect = _ref.onDisconnect,
+    onDisconnect = _ref$onDisconnect === void 0 ? noop$1 : _ref$onDisconnect,
     _ref$onManage = _ref.onManage,
-    onManage = _ref$onManage === void 0 ? noop$1 : _ref$onManage;
+    onManage = _ref$onManage === void 0 ? undefined : _ref$onManage,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$isConnected = _ref.isConnected,
+    isConnected = _ref$isConnected === void 0 ? false : _ref$isConnected,
+    _ref$isFailed = _ref.isFailed,
+    isFailed = _ref$isFailed === void 0 ? false : _ref$isFailed,
+    _ref$isExpired = _ref.isExpired,
+    isExpired = _ref$isExpired === void 0 ? false : _ref$isExpired,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$hidden = _ref.hidden,
+    hidden = _ref$hidden === void 0 ? false : _ref$hidden,
+    _ref$hideDisconnect = _ref.hideDisconnect,
+    hideDisconnect = _ref$hideDisconnect === void 0 ? false : _ref$hideDisconnect,
+    _ref$onClick = _ref.onClick,
+    onCardClick = _ref$onClick === void 0 ? undefined : _ref$onClick,
+    _ref$tooltipProps = _ref.tooltipProps,
+    tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps,
+    _ref$customDropDown = _ref.customDropDown,
+    customDropDown = _ref$customDropDown === void 0 ? null : _ref$customDropDown,
+    children = _ref.children;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classnames("outline-none neeto-ui-border-gray-300 neeto-ui-shadow-xs hover:neeto-ui-border-gray-500 focus:neeto-ui-border-gray-500 neeto-ui-rounded-lg flex flex-col border p-6 no-underline transition-colors", className)
+  var cardProps = function cardProps() {
+    return isConnected && isNotNil(onCardClick) ? {
+      onClick: onCardClick
+    } : {};
+  };
+  return /*#__PURE__*/React__default.createElement(TooltipWrapper, _extends$1({
+    content: disabled && t("tooltip.integrationNotAvailable"),
+    disabled: disabled,
+    position: "top"
+  }, tooltipProps), /*#__PURE__*/React__default.createElement("div", _extends$1({
+    className: classnames("outline-none neeto-ui-border-gray-300 neeto-ui-shadow-xs hover:neeto-ui-border-gray-500 focus:neeto-ui-border-gray-500 neeto-ui-rounded-lg flex flex-col border p-6 no-underline transition-colors", {
+      "hover:neeto-ui-bg-100 cursor-not-allowed opacity-50": disabled,
+      "cursor-pointer": isConnected && isNotNil(onCardClick),
+      hidden: hidden
+    }, className)
+  }, cardProps()), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-grow justify-between",
+    "data-cy": "integration-tabs"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "h-full"
+    className: "flex min-w-0 flex-col justify-end"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-4"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    className: "neeto-ui-text-gray-700",
+    className: "relative mb-4 flex h-8"
+  }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+    className: "neeto-ui-text-gray-600",
     size: 32
-  })), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-800 mb-2",
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "my-auto"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    className: "mb-2",
+    "data-cy": renderDataCy(label, "integration-card-label"),
     style: "h4",
     weight: "semibold"
   }, label), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-700",
+    className: "break-words",
+    "data-cy": "".concat(joinHyphenCase(label), "-integration-description"),
     style: "body2"
-  }, description)), /*#__PURE__*/React__default.createElement("div", {
+  }, description), children)), isNotEmpty(subIcons) && /*#__PURE__*/React__default.createElement("div", {
+    className: "flex h-24 flex-col gap-2"
+  }, subIcons.map(function (Icon) {
+    return /*#__PURE__*/React__default.createElement(Icon, {
+      className: "neeto-ui-text-gray-600",
+      key: Icon,
+      size: 24
+    });
+  }))), /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-border-gray-300 mt-4 w-full border-t pt-2"
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, isLoading ? /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-3 flex items-center justify-start"
+  }, /*#__PURE__*/React__default.createElement(Spinner, null)) : /*#__PURE__*/React__default.createElement("div", {
     className: "flex h-8 items-center justify-between"
-  }, isConnected ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tag, {
-    className: "flex-row-reverse",
-    icon: Check,
-    label: t("common.connected"),
-    size: "small",
-    style: "success"
-  }), customDropdown || /*#__PURE__*/React__default.createElement(Dropdown, {
-    buttonStyle: "text",
-    icon: MenuVertical
-  }, /*#__PURE__*/React__default.createElement(Menu$1, null, /*#__PURE__*/React__default.createElement(MenuItem$1.Button, {
-    onClick: onManage
-  }, t("common.manage")), /*#__PURE__*/React__default.createElement(MenuItem$1.Button, {
-    onClick: onDisconnect
-  }, t("common.disconnect"))))) : /*#__PURE__*/React__default.createElement(Button, {
-    label: !isStatusLoading && t("common.connect"),
-    loading: isStatusLoading,
+  }, isConnected && /*#__PURE__*/React__default.createElement(Status, {
+    isExpired: isExpired
+  }), isFailed && /*#__PURE__*/React__default.createElement(Button, {
+    className: "neeto-ui-text-warning-500",
+    "data-cy": renderDataCy(label, "connect-button"),
+    disabled: disabled || isLoading,
+    label: t("common.tryAgain"),
     style: "link",
     onClick: onConnect
-  }))));
+  }), !isConnected && !isFailed && /*#__PURE__*/React__default.createElement(Button, {
+    "data-cy": renderDataCy(label, "connect-button"),
+    disabled: disabled || isLoading,
+    label: t("common.connect"),
+    style: "link",
+    onClick: onConnect
+  }), (isConnected || isFailed) && /*#__PURE__*/React__default.createElement(Dropdown, {
+    customDropDown: customDropDown,
+    handleManage: onManage,
+    hideDisconnect: hideDisconnect,
+    onDisconnect: onDisconnect
+  })))));
 };
 
 var Stepper = function Stepper(_ref) {
@@ -3790,21 +3968,6 @@ var Modal = function Modal(_ref) {
   }, children)));
 };
 
-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);
-}
-
 var propTypes = {exports: {}};
 
 /**
@@ -4197,14 +4360,14 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var Menu = Dropdown.Menu,
-  MenuItem = Dropdown.MenuItem;
+var Menu = Dropdown$1.Menu,
+  MenuItem = Dropdown$1.MenuItem;
 var Actions = function Actions(_ref) {
   var apiKey = _ref.apiKey,
     setApiKeyToDelete = _ref.setApiKeyToDelete;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  return /*#__PURE__*/React__default.createElement(Dropdown, {
+  return /*#__PURE__*/React__default.createElement(Dropdown$1, {
     buttonStyle: "text",
     icon: MenuHorizontal,
     strategy: "fixed"
@@ -4261,8 +4424,8 @@ var ApiKeysList = function ApiKeysList(_ref) {
     deleteApiKey = _ref$deleteApiKey === void 0 ? noop$1 : _ref$deleteApiKey,
     _ref$isDeleting = _ref.isDeleting,
     isDeleting = _ref$isDeleting === void 0 ? false : _ref$isDeleting,
-    _ref$setNewZapierApiK = _ref.setNewZapierApiKey,
-    setNewZapierApiKey = _ref$setNewZapierApiK === void 0 ? noop$1 : _ref$setNewZapierApiK;
+    _ref$setNewlyCreatedA = _ref.setNewlyCreatedApiKey,
+    setNewlyCreatedApiKey = _ref$setNewlyCreatedA === void 0 ? noop$1 : _ref$setNewlyCreatedA;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     apiKeyToDelete = _useState2[0],
@@ -4276,7 +4439,7 @@ var ApiKeysList = function ApiKeysList(_ref) {
     deleteApiKey(apiKeyToDelete === null || apiKeyToDelete === void 0 ? void 0 : apiKeyToDelete.id, {
       onSuccess: function onSuccess() {
         closeAlert();
-        setNewZapierApiKey("");
+        setNewlyCreatedApiKey("");
       }
     });
   };
@@ -4350,7 +4513,7 @@ var GenerateKey = function GenerateKey(_ref) {
   })));
 };
 
-var NewZapierApiKey = function NewZapierApiKey(_ref) {
+var NewApiKeyCallout = function NewApiKeyCallout(_ref) {
   var apiKey = _ref.apiKey;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -4372,12 +4535,12 @@ var NewZapierApiKey = function NewZapierApiKey(_ref) {
 };
 
 var ZapierForm = function ZapierForm(_ref) {
-  var _ref$newZapierApiKey = _ref.newZapierApiKey,
-    newZapierApiKey = _ref$newZapierApiKey === void 0 ? "" : _ref$newZapierApiKey,
+  var _ref$newlyCreatedApiK = _ref.newlyCreatedApiKey,
+    newlyCreatedApiKey = _ref$newlyCreatedApiK === void 0 ? "" : _ref$newlyCreatedApiK,
     _ref$videoUrl = _ref.videoUrl,
     videoUrl = _ref$videoUrl === void 0 ? "" : _ref$videoUrl,
-    _ref$zapierApiKeys = _ref.zapierApiKeys,
-    zapierApiKeys = _ref$zapierApiKeys === void 0 ? [] : _ref$zapierApiKeys,
+    _ref$apiKeys = _ref.apiKeys,
+    apiKeys = _ref$apiKeys === void 0 ? [] : _ref$apiKeys,
     _ref$isGenerating = _ref.isGenerating,
     isGenerating = _ref$isGenerating === void 0 ? false : _ref$isGenerating,
     _ref$isLoading = _ref.isLoading,
@@ -4388,8 +4551,8 @@ var ZapierForm = function ZapierForm(_ref) {
     deleteApiKey = _ref$deleteApiKey === void 0 ? noop$1 : _ref$deleteApiKey,
     _ref$handleGenerateAp = _ref.handleGenerateApiKey,
     handleGenerateApiKey = _ref$handleGenerateAp === void 0 ? noop$1 : _ref$handleGenerateAp,
-    _ref$setNewZapierApiK = _ref.setNewZapierApiKey,
-    setNewZapierApiKey = _ref$setNewZapierApiK === void 0 ? noop$1 : _ref$setNewZapierApiK,
+    _ref$setNewlyCreatedA = _ref.setNewlyCreatedApiKey,
+    setNewlyCreatedApiKey = _ref$setNewlyCreatedA === void 0 ? noop$1 : _ref$setNewlyCreatedA,
     _ref$setIsDemoModalOp = _ref.setIsDemoModalOpen,
     setIsDemoModalOpen = _ref$setIsDemoModalOp === void 0 ? noop$1 : _ref$setIsDemoModalOp;
   var _useTranslation = useTranslation(),
@@ -4397,20 +4560,20 @@ var ZapierForm = function ZapierForm(_ref) {
   if (isLoading) return /*#__PURE__*/React__default.createElement(Spinner, null);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "w-full max-w-xl space-y-10 p-10"
-  }, isNotEmpty(newZapierApiKey) && /*#__PURE__*/React__default.createElement(NewZapierApiKey, {
-    apiKey: newZapierApiKey
+  }, isNotEmpty(newlyCreatedApiKey) && /*#__PURE__*/React__default.createElement(NewApiKeyCallout, {
+    apiKey: newlyCreatedApiKey
   }), /*#__PURE__*/React__default.createElement(Typography, {
     style: "h2"
-  }, t("zapier.apiKeys")), isEmpty(zapierApiKeys) && /*#__PURE__*/React__default.createElement(Typography, {
+  }, t("zapier.apiKeys")), isEmpty(apiKeys) && /*#__PURE__*/React__default.createElement(Typography, {
     style: "h4"
   }, t("zapier.emptyText")), /*#__PURE__*/React__default.createElement(GenerateKey, {
     handleSubmit: handleGenerateApiKey,
     isLoading: isGenerating
   }), /*#__PURE__*/React__default.createElement(ApiKeysList, {
-    apiKeys: zapierApiKeys,
+    apiKeys: apiKeys,
     deleteApiKey: deleteApiKey,
     isDeleting: isDeleting,
-    setNewZapierApiKey: setNewZapierApiKey
+    setNewlyCreatedApiKey: setNewlyCreatedApiKey
   }), isNotEmpty(videoUrl) && /*#__PURE__*/React__default.createElement(Button, {
     className: "mb-6",
     label: t("zapier.walkthroughText"),