@bigbinary/neeto-integrations-frontend 2.10.1 → 2.10.3

package/dist/index.js

@@ -6,21 +6,130 @@ export { default as WalkthroughModal } from '@bigbinary/neeto-molecules/Integrat
 import * as React from 'react';
 import React__default, { useState, useEffect, useRef } from 'react';
 import i18next, { t as t$1 } from 'i18next';
-import { isNotPresent, isPresent, noop, keysToSnakeCase, _findBy, isNotEmpty } from '@bigbinary/neeto-cist';
-import { useMutationWithInvalidation, withTitle, withT, useStateWithDependency } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { humanize, noop, isPresent, keysToSnakeCase, _findBy, isNotEmpty } from '@bigbinary/neeto-cist';
+import { withT, useMutationWithInvalidation, withTitle, useQueryParams, useStateWithDependency } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { DEFAULT_STALE_TIME } from '@bigbinary/neeto-commons-frontend/constants';
 import { useQuery } from 'react-query';
 import axios from 'axios';
-import { isPresent as isPresent$1 } from '@bigbinary/neeto-commons-frontend/pure';
-import { getQueryParams } from '@bigbinary/neeto-commons-frontend/utils';
-import { GoogleCalendar as GoogleCalendar$1, Google } from '@bigbinary/neeto-icons/misc';
-import { Button, Typography, Callout, Modal as Modal$1 } from '@bigbinary/neetoui';
-import { useTranslation, Trans } from 'react-i18next';
+import { buildUrl, getQueryParams } from '@bigbinary/neeto-commons-frontend/utils';
+import { Daily as Daily$1, GoogleCalendar as GoogleCalendar$1, Google, Zoom as Zoom$1 } from '@bigbinary/neeto-icons/misc';
+import { Typography, Button, Callout, Modal as Modal$1 } from '@bigbinary/neetoui';
+import { Trans, useTranslation } from 'react-i18next';
 import { Form as Form$2, Input, Select, ActionBlock } from '@bigbinary/neetoui/formik';
 import { prop, equals, isEmpty } from 'ramda';
 import * as yup from 'yup';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import classnames from 'classnames';
+import { Check } from '@bigbinary/neeto-icons';
+
+var Manage$1 = withT(function (_ref) {
+  var t = _ref.t,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "" : _ref$title,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? "" : _ref$description,
+    _ref$integration = _ref.integration,
+    integration = _ref$integration === void 0 ? "" : _ref$integration,
+    _ref$isDisconnectAler = _ref.isDisconnectAlertOpen,
+    isDisconnectAlertOpen = _ref$isDisconnectAler === void 0 ? false : _ref$isDisconnectAler,
+    _ref$setIsDisconnectA = _ref.setIsDisconnectAlertOpen,
+    setIsDisconnectAlertOpen = _ref$setIsDisconnectA === void 0 ? noop : _ref$setIsDisconnectA,
+    _ref$isDisconnecting = _ref.isDisconnecting,
+    isDisconnecting = _ref$isDisconnecting === void 0 ? false : _ref$isDisconnecting,
+    _ref$onDisconnect = _ref.onDisconnect,
+    onDisconnect = _ref$onDisconnect === void 0 ? noop : _ref$onDisconnect,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
+    _ref$Icon = _ref.Icon,
+    Icon = _ref$Icon === void 0 ? null : _ref$Icon,
+    _ref$isConnected = _ref.isConnected,
+    isConnected = _ref$isConnected === void 0 ? false : _ref$isConnected,
+    _ref$connectPath = _ref.connectPath,
+    connectPath = _ref$connectPath === void 0 ? "" : _ref$connectPath,
+    _ref$connectUrl = _ref.connectUrl,
+    connectUrl = _ref$connectUrl === void 0 ? "" : _ref$connectUrl,
+    _ref$helpDocUrl = _ref.helpDocUrl,
+    helpDocUrl = _ref$helpDocUrl === void 0 ? "" : _ref$helpDocUrl,
+    _ref$managePath = _ref.managePath,
+    managePath = _ref$managePath === void 0 ? "" : _ref$managePath,
+    _ref$integrationName = _ref.integrationName,
+    integrationName = _ref$integrationName === void 0 ? "" : _ref$integrationName,
+    _ref$disconnectMessag = _ref.disconnectMessage,
+    disconnectMessage = _ref$disconnectMessag === void 0 ? "" : _ref$disconnectMessag,
+    _ref$isConnectDisable = _ref.isConnectDisabled,
+    isConnectDisabled = _ref$isConnectDisable === void 0 ? false : _ref$isConnectDisable,
+    _ref$connectTooltipPr = _ref.connectTooltipProps,
+    connectTooltipProps = _ref$connectTooltipPr === void 0 ? null : _ref$connectTooltipPr;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "mx-auto w-full max-w-3xl"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-ui-border-gray-300 neeto-ui-rounded-xl mt-10 w-full space-y-4 border p-6"
+  }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
+    className: "neeto-ui-text-gray-600",
+    size: 60
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "space-y-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center space-x-4"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    className: "neeto-ui-text-gray-800 mb-0.5",
+    style: "h2",
+    weight: "semibold"
+  }, title), isConnected && /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-ui-bg-success-500 neeto-ui-text-white neeto-ui-rounded-full flex items-center justify-center p-1"
+  }, /*#__PURE__*/React__default.createElement(Check, {
+    size: 24
+  }))), /*#__PURE__*/React__default.createElement(Typography, {
+    className: "neeto-ui-text-gray-800 break-all",
+    style: "body1",
+    weight: "normal"
+  }, description), helpDocUrl && /*#__PURE__*/React__default.createElement(Typography, {
+    className: "neeto-ui-text-gray-800 break-all",
+    style: "body2",
+    weight: "normal"
+  }, /*#__PURE__*/React__default.createElement(Trans, {
+    i18nKey: "settings.integrations.common.helpDocUrl",
+    components: {
+      helpLink: /*#__PURE__*/React__default.createElement(Button, {
+        href: helpDocUrl,
+        style: "link"
+      })
+    },
+    values: {
+      integration: integrationName !== null && integrationName !== void 0 ? integrationName : humanize(integration)
+    }
+  }))), isConnected ? /*#__PURE__*/React__default.createElement("div", {
+    className: "space-x-2"
+  }, managePath && /*#__PURE__*/React__default.createElement(Button, {
+    to: managePath,
+    label: t("settings.integrations.common.manageIntegration", {
+      integration: integrationName !== null && integrationName !== void 0 ? integrationName : humanize(integration)
+    })
+  }), onDisconnect && /*#__PURE__*/React__default.createElement(Button, {
+    style: "danger",
+    label: t("settings.integrations.common.disconnectIntegration", {
+      integration: integrationName !== null && integrationName !== void 0 ? integrationName : humanize(integration)
+    }),
+    onClick: function onClick() {
+      return setIsDisconnectAlertOpen(true);
+    }
+  })) : /*#__PURE__*/React__default.createElement(Button, {
+    disabled: isConnectDisabled,
+    href: connectUrl,
+    to: connectPath,
+    tooltipProps: connectTooltipProps,
+    label: t("settings.integrations.common.connectIntegration", {
+      integration: integrationName !== null && integrationName !== void 0 ? integrationName : humanize(integration)
+    })
+  }))), /*#__PURE__*/React__default.createElement(DisconnectAlert, {
+    isDisconnecting: isDisconnecting,
+    onClose: onClose,
+    onDisconnect: onDisconnect,
+    isOpen: isDisconnectAlertOpen,
+    title: t("settings.integrations.".concat(integration, ".disconnect.title")),
+    message: disconnectMessage !== null && disconnectMessage !== void 0 ? disconnectMessage : t("settings.integrations.".concat(integration, ".disconnect.message"))
+  }));
+});
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -281,6 +390,7 @@ var Form = function Form(_ref) {
         i18nKey: "neetoIntegrations.daily.helpDoc",
         components: {
           externalLink: /*#__PURE__*/React__default.createElement(ExternalLink$1, {
+            "data-cy": "api-key-help-doc-link",
             href: helpDocUrl,
             rel: "noreferrer",
             target: "_blank"
@@ -310,46 +420,9 @@ var Form = function Form(_ref) {
 };
 var Form$1 = withTitle(Form, i18next.t("neetoIntegrations.browserTitles.integrations.dailyco"));
 
-var Manage$1 = withT(function (_ref) {
-  var t = _ref.t,
-    title = _ref.title,
-    description = _ref.description,
-    integration = _ref.integration,
-    isDisconnectAlertOpen = _ref.isDisconnectAlertOpen,
-    setIsDisconnectAlertOpen = _ref.setIsDisconnectAlertOpen,
-    isDisconnecting = _ref.isDisconnecting,
-    onDisconnect = _ref.onDisconnect,
-    onClose = _ref.onClose;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "mx-auto w-full max-w-md"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "mt-10 w-full space-y-4"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-800 mb-0.5",
-    style: "h3",
-    weight: "semibold"
-  }, title), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-600 break-all",
-    style: "body1",
-    weight: "normal"
-  }, description), /*#__PURE__*/React__default.createElement(Button, {
-    label: t("neetoIntegrations.common.disconnect"),
-    style: "danger",
-    onClick: function onClick() {
-      return setIsDisconnectAlertOpen(true);
-    }
-  }))), /*#__PURE__*/React__default.createElement(DisconnectAlert, {
-    isDisconnecting: isDisconnecting,
-    onClose: onClose,
-    onDisconnect: onDisconnect,
-    isOpen: isDisconnectAlertOpen,
-    message: t("neetoIntegrations.".concat(integration, ".disconnect.message")),
-    title: t("neetoIntegrations.".concat(integration, ".disconnect.title"))
-  }));
-});
-
 var Manage = function Manage(_ref) {
-  var onDisconnect = _ref.onDisconnect;
+  var description = _ref.description,
+    onDisconnect = _ref.onDisconnect;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDisconnectAlertOpen = _useState2[0],
@@ -359,7 +432,7 @@ var Manage = function Manage(_ref) {
     _useFetchDaily$data2 = _useFetchDaily$data === void 0 ? {} : _useFetchDaily$data,
     _useFetchDaily$data2$ = _useFetchDaily$data2.metadata,
     metadata = _useFetchDaily$data2$ === void 0 ? {} : _useFetchDaily$data2$,
-    isLoading = _useFetchDaily.isLoading;
+    isFetching = _useFetchDaily.isFetching;
   var _ref2 = metadata || {},
     _ref2$apiKey = _ref2.apiKey,
     apiKey = _ref2$apiKey === void 0 ? null : _ref2$apiKey;
@@ -373,24 +446,33 @@ var Manage = function Manage(_ref) {
     }),
     destroyIntegration = _useDestroyDaily.mutate,
     isDisconnecting = _useDestroyDaily.isLoading;
+  var isConnected = isPresent(apiKey);
   var handleDisconnect = function handleDisconnect() {
     return destroyIntegration("daily");
   };
-  if (isLoading || isDisconnecting) {
-    return /*#__PURE__*/React__default.createElement(PageLoader, null);
-  }
-  if (isNotPresent(apiKey)) {
-    onDisconnect === null || onDisconnect === void 0 ? void 0 : onDisconnect();
-  }
+  if (isFetching || isDisconnecting) return /*#__PURE__*/React__default.createElement(PageLoader, null);
   return /*#__PURE__*/React__default.createElement(Manage$1, {
+    isConnected: isConnected,
     isDisconnectAlertOpen: isDisconnectAlertOpen,
     isDisconnecting: isDisconnecting,
     setIsDisconnectAlertOpen: setIsDisconnectAlertOpen,
-    description: t("neetoIntegrations.daily.yourApiKey", {
-      apiKey: apiKey
+    Icon: Daily$1,
+    connectPath: buildUrl(window.location.pathname, {
+      connect: true
     }),
     integration: "daily",
-    title: t("neetoIntegrations.daily.connected"),
+    description: isConnected ? /*#__PURE__*/React__default.createElement(Trans, {
+      components: {
+        underline: /*#__PURE__*/React__default.createElement("u", {
+          className: "font-medium"
+        })
+      },
+      i18nKey: "neetoIntegrations.daily.yourApiKey",
+      values: {
+        apiKey: apiKey
+      }
+    }) : description,
+    title: isConnected ? t("neetoIntegrations.daily.connected") : t("neetoIntegrations.daily.connect"),
     onClose: function onClose() {
       return setIsDisconnectAlertOpen(false);
     },
@@ -405,10 +487,14 @@ var Daily = function Daily(_ref) {
     helpDocUrl = _ref$helpDocUrl === void 0 ? "" : _ref$helpDocUrl,
     _ref$videoUrl = _ref.videoUrl,
     videoUrl = _ref$videoUrl === void 0 ? "" : _ref$videoUrl,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? "" : _ref$description,
     _ref$onConnect = _ref.onConnect,
     onConnect = _ref$onConnect === void 0 ? noop : _ref$onConnect,
     _ref$onDisconnect = _ref.onDisconnect,
     onDisconnect = _ref$onDisconnect === void 0 ? noop : _ref$onDisconnect;
+  var _useQueryParams = useQueryParams(),
+    connect = _useQueryParams.connect;
   var _useFetchDaily = useFetchDaily(),
     _useFetchDaily$data = _useFetchDaily.data,
     _useFetchDaily$data2 = _useFetchDaily$data === void 0 ? {} : _useFetchDaily$data,
@@ -417,8 +503,9 @@ var Daily = function Daily(_ref) {
   var _ref2 = metadata || {},
     _ref2$apiKey = _ref2.apiKey,
     apiKey = _ref2$apiKey === void 0 ? null : _ref2$apiKey;
-  if (isPresent(apiKey) && !isOnboarding) {
+  if (isPresent(apiKey) && !isOnboarding || !connect) {
     return /*#__PURE__*/React__default.createElement(Manage, {
+      description: description,
       onDisconnect: onDisconnect
     });
   }
@@ -477,7 +564,7 @@ var GoogleCalendar = function GoogleCalendar(_ref) {
     setSteps = _useState2[1];
   var _getQueryParams = getQueryParams(),
     status = _getQueryParams.status;
-  var activeTab = isPresent$1(status) ? STEPS.finish : STEPS.connect;
+  var activeTab = isPresent(status) ? STEPS.finish : STEPS.connect;
   useEffect(function () {
     setSteps(function () {
       var stepsClone = _toConsumableArray(steps);
@@ -497,15 +584,15 @@ var GoogleCalendar = function GoogleCalendar(_ref) {
     isOpen: true,
     onClose: handleClose
   }, activeTab === STEPS.connect && /*#__PURE__*/React__default.createElement("div", {
-    className: "mx-auto w-full max-w-2xl"
+    className: "w-full max-w-2xl mx-auto"
   }, /*#__PURE__*/React__default.createElement(GoogleCalendar$1, {
     size: 42
   }), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-800 mb-3 mt-6",
+    className: "mt-6 mb-3 neeto-ui-text-gray-800",
     style: "h2",
     weight: "semibold"
   }, t("neetoIntegrations.google.connect.title")), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex w-full flex-col items-start pt-2"
+    className: "flex flex-col items-start w-full pt-2"
   }, /*#__PURE__*/React__default.createElement(Callout, {
     className: "block leading-5"
   }, /*#__PURE__*/React__default.createElement(Trans, {
@@ -517,7 +604,7 @@ var GoogleCalendar = function GoogleCalendar(_ref) {
       selectCheckbox: t("neetoIntegrations.google.connect.selectCheckbox")
     }
   })), permissionImage && /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-border-gray-300 my-4 border"
+    className: "my-4 border neeto-ui-border-gray-300"
   }, /*#__PURE__*/React__default.createElement("img", {
     src: permissionImage
   }))), /*#__PURE__*/React__default.createElement(Button, {
@@ -822,7 +909,11 @@ var useDestroyZoom = function useDestroyZoom(_ref) {
 };
 
 var Zoom = function Zoom(_ref) {
-  var _ref$onDisconnect = _ref.onDisconnect,
+  var _ref$connectUrl = _ref.connectUrl,
+    connectUrl = _ref$connectUrl === void 0 ? "" : _ref$connectUrl,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? "" : _ref$description,
+    _ref$onDisconnect = _ref.onDisconnect,
     onDisconnect = _ref$onDisconnect === void 0 ? noop : _ref$onDisconnect;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -846,24 +937,31 @@ var Zoom = function Zoom(_ref) {
     }),
     destroyIntegration = _useDestroyZoom.mutate,
     isDisconnecting = _useDestroyZoom.isLoading;
+  var isConnected = isPresent(email);
   var handleDisconnect = function handleDisconnect() {
     return destroyIntegration("zoom");
   };
-  if (isLoading) {
-    return /*#__PURE__*/React__default.createElement(PageLoader, null);
-  }
-  if (isNotPresent(email)) {
-    onDisconnect === null || onDisconnect === void 0 ? void 0 : onDisconnect();
-  }
+  if (isLoading) return /*#__PURE__*/React__default.createElement(PageLoader, null);
   return /*#__PURE__*/React__default.createElement(Manage$1, {
+    connectUrl: connectUrl,
+    isConnected: isConnected,
     isDisconnectAlertOpen: isDisconnectAlertOpen,
     isDisconnecting: isDisconnecting,
     setIsDisconnectAlertOpen: setIsDisconnectAlertOpen,
-    description: t("neetoIntegrations.zoom.account", {
-      email: email
-    }),
+    Icon: Zoom$1,
     integration: "zoom",
-    title: t("neetoIntegrations.zoom.connected"),
+    description: isConnected ? /*#__PURE__*/React__default.createElement(Trans, {
+      components: {
+        underline: /*#__PURE__*/React__default.createElement("u", {
+          className: "font-medium"
+        })
+      },
+      i18nKey: "neetoIntegrations.zoom.account",
+      values: {
+        email: email
+      }
+    }) : description,
+    title: isConnected ? t("neetoIntegrations.zoom.connected") : t("neetoIntegrations.zoom.connect"),
     onClose: function onClose() {
       return setIsDisconnectAlertOpen(false);
     },
@@ -1253,5 +1351,5 @@ function n(n, r) {
 var css = ".intrinsic-container{height:0;overflow:hidden;position:relative}.intrinsic-container-16x9{padding-bottom:56.25%}.intrinsic-container-4x3{padding-bottom:75%}.intrinsic-container iframe{height:100%;left:0;position:absolute;top:0;width:100%}";
 n(css,{});
 
-export { Connect, index as Daily, Demo, Finish, GoogleCalendar, Modal, Twilio, Zoom };
+export { Connect, index as Daily, Demo, Finish, GoogleCalendar, Manage$1 as Manage, Modal, Twilio, Zoom };
 //# sourceMappingURL=index.js.map