@bigbinary/neeto-integrations-frontend 2.10.4 → 2.10.6

package/README.md

@@ -1,109 +1,9 @@
 # neeto-integrations-nano
 
-1. [Engine and package installation](./docs/engine-and-package-installation.md)
-2. [Building and releasing](./docs/building-and-releasing.md)
+The `neeto-integrations-nano` provides support for third-party integrations to neeto
+applications. The nano exports the `@bigbinary/neeto-integrations-frontend` NPM package and `neeto-integrations-engine` Rails engine for development.
 
-## @bigbinary/neeto-integrations-frontend
-
-![npm](https://img.shields.io/npm/v/@bigbinary/neeto-integrations-frontend?color=greenyellow)
-![npm](https://img.shields.io/npm/dw/@bigbinary/neeto-integrations-frontend?color=greenyellow)
-
-UI for integrations for all neeto products.
-
-### Installation
-
-```bash
-yarn add @bigbinary/neeto-integrations-frontend
-```
-
-### Usage
-
-Available components:
-
-- [Connect](./docs/connect/README.md)
-- [Finish](./docs/finish/README.md)
-- [Demo](./docs/demo/README.md)
-- [DisconnectAlert](./docs/DisconnectAlert/README.md)
-- [GoogleCalendar](./docs/GoogleCalendar/README.md)
-
-### Development
-
-Install all the dependencies by executing the following command
-
-```bash
-yarn install
-```
-
-### Using host application
-
-1. Clone this repository.
-2. Run `yarn install` to download the dependencies and setup the development
-   environment.
-3. Have a host application ready.
-4. Run `yarn build --watch` to automatically transpile code as you save the
-   file. You can omit the `--watch` flag if you want to run the build only once.
-5. In a different terminal, run `yalc publish` to publish the
-   neeto-integrations-frontend to the local yalc store.
-6. Run `yalc add @bigbinary/neeto-integrations-frontend` to install the
-   neeto-integrations-frontend to the host application.
-7. After making necessary changes to `neeto-integrations-frontend`, run
-   `yalc push` to push the changes to the host application (assuming that you
-   are in watch mode and the changes are bundled automatically). Restart
-   webpack-dev-server in host if changes are not applied.
-8. Video explanation on how to use yalc: https://vimeo.com/722958162/9e931b640c
-
-### Exports and Types
-
-The **neeto-integrations-frontend** JavaScript library offers two types of
-exports: the common bundle and the per-component bundle.
-
-#### Common Bundle
-
-The common bundle includes components such as `Card`, `Modal`, and `Connect`.
-You can import them using the following syntax:
-
-```js
-import { Card, Modal, Connect } from "@bigbinary/neeto-integrations-frontend";
-```
-
-To add a component to the common bundle, follow these steps:
-
-1. Place the component inside the `components` folder
-2. Add the necessary types for the component in the `types.d.ts` file located in
-   the library's root directory
-3. Export the component in the `index.js` file located in the library's root
-   directory
-
-#### Per-Component Bundle
-
-Each component inside the `components/Integrations` folder has its own bundle.
-For example, the `ZapierForm` component can be imported using the following
-syntax:
-
-```js
-import ZapierForm from "@bigbinary/neeto-integrations-frontend/ZapierForm";
-```
-
-To export a component as its own bundle, follow these steps:
-
-1. Place the component strictly inside the `components/Integrations` folder.
-2. Add the necessary types for the component in the `types` folder.
-
-# Product integrations
-
-| Projects     | IntegrationsFrontend |
-| ------------ | :------------------: |
-| neetoChat    |  :white_check_mark:  |
-| neetoDesk    |  :white_check_mark:  |
-| neetoForm    |  :white_check_mark:  |
-| neetoInvoice |  :white_check_mark:  |
-| neetoKB      |  :white_check_mark:  |
-| neetoMonitor |  :white_check_mark:  |
-| neetoCal     |  :white_check_mark:  |
-
-## neeto-integrations-engine
-
-This engine handles the authentication and token management for integrations
+The engine handles the authentication, webhooks and token management for integrations
 with the following providers.
 
 - Meta ( Facebook, Instagram, WhatsApp )
@@ -112,19 +12,32 @@ with the following providers.
 - Zapier
 - Twilio
 
-Host can provide required permissions for a supported third party integration,
-then engine will handle the authentication, token expiry for the host. Tokens
-and account details are stored in a table handled by the engine.
+Host can provide required permissions for a supported third-party integration, then engine will handle the authentication, token storing and refreshing for the host. Tokens, account details and webhook subscription details are stored in tables handled by the engine.
 
-This engine also webhook support and post Integration Video walkthrough support
-for MS Teams, Facebook Pages, and WhatsApp Integration.
+The frontend package provides components to handle integration card, steps, disconnect and other integration configuration page support.
 
-### Usage
+## Contents
+  1. [Development with Host application](#development-with-host-application)
+      - [Engine](#engine)
+        - [Installation](#installation)
+        - [Details](#details)
+        - [neeto products currently using this engine](#neeto-products-currently-using-this-engine)
+      - [Frontend package](#frontend-package---bigbinaryneeto-integrations-frontend)
+        - [Installation](#installation-1)
+        - [Usage](#usage)
+        - [Product integrations](#product-integrations)
+  2. [Instructions for publishing](#instructions-for-publishing)
+
+## Development with Host application
+
+### Engine
+
+#### Installation
 
 1. Add the gem to your `Gemfile`.
 
 ```ruby
-source "https://O6Ts9-SVDaUZpHMRs2CpJp22RwbETDE@gems.neeto.com" do
+source "NEETO_GEM_SERVER_URL" do
   gem "neeto-integrations-engine"
 end
 ```
@@ -132,7 +45,7 @@ end
 2. Run `bundle install`
 
 3. Add the required env variables to `.env.development` and update your
-   `secrets.yml`. Refer [here](./docs/setup.md) for more details on specific
+   `secrets.yml`. Refer [OAuth Config](./docs/engine/oauth-config.md) for more details on specific
    integrations.
 
 4. Import migrations to your project:
@@ -170,7 +83,7 @@ other_applications:
     provider: neeto
 ```
 
-Refer the [here](./docs/setup.md) for list of supported `provider`,
+Refer the [Oauth Config](./docs/engine/oauth-config.md) for list of supported `provider`,
 `service_name` and `service_type`.
 
 7. Import data migration to update the integrations list with the newly added
@@ -212,47 +125,13 @@ has_many :integrated_apps, class_name: "NeetoIntegrationsEngine::IntegratedApp",
 has_many :integrated_apps, as: :integrable, class_name: "NeetoIntegrationsEngine::IntegratedApp", dependent: :destroy
 ```
 
-### Endpoints
-
-|                 Endpoint                  |                       Usage                        |
-| :---------------------------------------: | :------------------------------------------------: |
-|      `/neeto_integrations/auth/url`       |      For generating oauth URL for integration      |
-|      `/neeto_integrations/settings`       |   For getting integrated_app and setting details   |
-|     `/neeto_integrations/disconnect`      |        For disconnecting an integrated_app         |
-|       `/neeto_integrations/status`        | For getting demoShown status for an integrated_app |
-|   `/neeto_integrations/zapier/api-keys`   |     For creating and destroying Zapier API key     |
-| `/neeto_integrations/zapier/subscription` |  For creating and destroying Zapier Subscription   |
-
-⚠️ **Note**: By default, the `integrable` is the current `organization`. You
-should add `integrableType` and `integrableId` in the payload, to fetch the
-integrated_app properly.
+#### Details
 
-### Errors
+  - [Endpoints](./docs/engine/endpoints.md)
+  - [Errors](./docs/engine/errors.md)
+  - [MS Teams credentials and integration information](./docs/engine/ms-teams.md)
 
-#### Response format
-
-- `status`: failure
-- `state`: Any state that was passed during Auth
-- `error`: Contains the error `message` and `code`
-
-#### Errors list
-
-|             Error              |                               Description                               |
-| :----------------------------: | :---------------------------------------------------------------------: |
-|       `AuthRequestError`       |             When an invalid `AuthRequest` ID has been given             |
-|     `InvalidServiceError`      |       When an unsupported `service_name` is provided for seeding        |
-|     `InvalidProviderError`     |        When an unsupported `provider` name is given for seeding         |
-|  `InvalidCallbackParamsError`  |          When the `params` received during callback is invalid          |
-| `InsufficientPermissionsError` |             When the user denies any permissions requested              |
-|     `InvalidRequestError`      |         When an invalid request is created in RequestDispatcher         |
-|   `InvalidRefreshTokenError`   |      When the invalid refresh token is given for refreshing token       |
-|          `TokenError`          |         When an error has occurred while fetching token details         |
-|  `MissingImplementationError`  | When a service has been inherited but the method(s) are not implemented |
-|  `TokenDebuggerServiceError`   |        When an error has occurred while fetching `token details`        |
-|  `AccountDetailsServiceError`  |       When an error has occurred while fetching `account details`       |
-|          `OauthError`          |               When an error occurred in the Oauth process               |
-
-## neeto products currently using this engine
+#### neeto products currently using this engine
 
 |  Products   |                   Integrated (Used in production)                    | Integration (Currently in development/staging) |
 | :---------: | :------------------------------------------------------------------: | :--------------------------------------------: |
@@ -260,3 +139,50 @@ integrated_app properly.
 | neetoSocial | Instagram(page), Facebook(page), Google(Analytics, YouTube), Twitter |                      :x:                       |
 |  neetoCal   |                               MS Teams                               |                      :x:                       |
 |  neetoForm  |                                 :x:                                  |                    MS Teams                    |
+
+### Frontend package - @bigbinary/neeto-integrations-frontend
+
+![npm](https://img.shields.io/npm/v/@bigbinary/neeto-integrations-frontend?color=greenyellow)
+![npm](https://img.shields.io/npm/dw/@bigbinary/neeto-integrations-frontend?color=greenyellow)
+
+UI for integrations for all neeto products.
+
+#### Installation
+
+```bash
+yarn add @bigbinary/neeto-integrations-frontend
+```
+
+#### Usage
+
+Available components:
+
+- Components
+  - [Card](./docs/frontend/components/Card/README.md)
+  - [Connect](./docs/frontend/components/connect/README.md)
+  - [Daily.co](./docs/frontend/components/daily.co/README.md)
+  - [Demo](./docs/frontend/components/demo/README.md)
+  - [DisconnectAlert](./docs/frontend/components/DisconnectAlert/README.md)
+  - [Finish](./docs/frontend/components/finish/README.md)
+  - [GoogleCalendar](./docs/frontend/components/GoogleCalendar/README.md)
+  - [Modal](./docs/frontend/components/Modal/README.md)
+  - [Twilio](./docs/frontend/components/twilio/README.md)
+  - [WalkthroughModal](./docs/frontend/components/WalkthroughModal/README.md)
+  - [Zoom](./docs/frontend/components/zoom/README.md)
+- [Exports and Types](./docs/frontend/exports-and-types.md)
+
+#### Product integrations
+
+| Projects     | IntegrationsFrontend |
+| ------------ | :------------------: |
+| neetoChat    |  :white_check_mark:  |
+| neetoDesk    |  :white_check_mark:  |
+| neetoForm    |  :white_check_mark:  |
+| neetoInvoice |  :white_check_mark:  |
+| neetoKB      |  :white_check_mark:  |
+| neetoMonitor |  :white_check_mark:  |
+| neetoCal     |  :white_check_mark:  |
+
+## Instructions for Publishing
+
+Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.

package/dist/Daily.cjs.js

@@ -10,6 +10,7 @@ var axios = require('axios');
 require('@bigbinary/neeto-molecules/IntegrationCard');
 var DisconnectAlert = require('@bigbinary/neeto-molecules/IntegrationDisconnectAlert');
 var WalkthroughModal = require('@bigbinary/neeto-molecules/IntegrationWalkthroughModal');
+var classnames = require('classnames');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var misc = require('@bigbinary/neeto-icons/misc');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
@@ -18,7 +19,6 @@ var neetoui = require('@bigbinary/neetoui');
 var formik = require('@bigbinary/neetoui/formik');
 require('ramda');
 var yup = require('yup');
-var classnames = require('classnames');
 var neetoIcons = require('@bigbinary/neeto-icons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -47,18 +47,18 @@ var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var DisconnectAlert__default = /*#__PURE__*/_interopDefaultLegacy(DisconnectAlert);
 var WalkthroughModal__default = /*#__PURE__*/_interopDefaultLegacy(WalkthroughModal);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-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) {
@@ -119,8 +119,8 @@ var QUERY_KEYS = {
   ZOOM_DETAILS: "zoom-details"
 };
 
-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 useCreateDaily = function useCreateDaily() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return reactUtils.useMutationWithInvalidation(dailiesApi.create, _objectSpread({
@@ -144,31 +144,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;
   }
 }
 
@@ -209,6 +209,8 @@ var Manage$1 = reactUtils.withT(function (_ref) {
     setIsDisconnectAlertOpen = _ref$setIsDisconnectA === void 0 ? neetoCist.noop : _ref$setIsDisconnectA,
     _ref$isDisconnecting = _ref.isDisconnecting,
     isDisconnecting = _ref$isDisconnecting === void 0 ? false : _ref$isDisconnecting,
+    _ref$onConnect = _ref.onConnect,
+    onConnect = _ref$onConnect === void 0 ? undefined : _ref$onConnect,
     _ref$onDisconnect = _ref.onDisconnect,
     onDisconnect = _ref$onDisconnect === void 0 ? undefined : _ref$onDisconnect,
     _ref$onClose = _ref.onClose,
@@ -225,10 +227,14 @@ var Manage$1 = reactUtils.withT(function (_ref) {
     helpDocUrl = _ref$helpDocUrl === void 0 ? "" : _ref$helpDocUrl,
     _ref$managePath = _ref.managePath,
     managePath = _ref$managePath === void 0 ? "" : _ref$managePath,
+    _ref$manageUrl = _ref.manageUrl,
+    manageUrl = _ref$manageUrl === void 0 ? "" : _ref$manageUrl,
     _ref$integrationName = _ref.integrationName,
     integrationName = _ref$integrationName === void 0 ? "" : _ref$integrationName,
     _ref$disconnectMessag = _ref.disconnectMessage,
     disconnectMessage = _ref$disconnectMessag === void 0 ? "" : _ref$disconnectMessag,
+    _ref$disconnectTitle = _ref.disconnectTitle,
+    disconnectTitle = _ref$disconnectTitle === void 0 ? "" : _ref$disconnectTitle,
     _ref$isConnectDisable = _ref.isConnectDisabled,
     isConnectDisabled = _ref$isConnectDisable === void 0 ? false : _ref$isConnectDisable,
     _ref$connectTooltipPr = _ref.connectTooltipProps,
@@ -253,11 +259,13 @@ var Manage$1 = reactUtils.withT(function (_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Check, {
     size: 24
   }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-800 break-all",
     style: "body1",
-    weight: "normal"
+    weight: "normal",
+    className: classnames__default["default"]("neeto-ui-text-gray-800", {
+      "break-all": isConnected
+    })
   }, description), helpDocUrl && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-800 break-all",
+    className: "neeto-ui-text-gray-800",
     style: "body2",
     weight: "normal"
   }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
@@ -274,12 +282,16 @@ var Manage$1 = reactUtils.withT(function (_ref) {
     }
   }))), isConnected ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "space-x-2"
-  }, managePath && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }, (managePath || manageUrl) && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "manage-button",
+    href: manageUrl,
+    target: manageUrl ? "_blank" : "_self",
     to: managePath,
     label: t("neetoIntegrations.common.manageIntegration", {
       integration: integrationName || neetoCist.humanize(integration)
     })
   }), onDisconnect && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "disconnect-button",
     style: "secondary",
     label: t("neetoIntegrations.common.disconnectIntegration", {
       integration: integrationName || neetoCist.humanize(integration)
@@ -287,21 +299,23 @@ var Manage$1 = reactUtils.withT(function (_ref) {
     onClick: function onClick() {
       return setIsDisconnectAlertOpen(true);
     }
-  })) : /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  })) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (connectPath || connectUrl || onConnect) && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "connect-button",
     disabled: isConnectDisabled,
     href: connectUrl,
     to: connectPath,
     tooltipProps: connectTooltipProps,
     label: t("neetoIntegrations.common.connectIntegration", {
       integration: integrationName || neetoCist.humanize(integration)
-    })
-  }))), /*#__PURE__*/React__default["default"].createElement(DisconnectAlert__default["default"], {
+    }),
+    onClick: onConnect
+  })))), /*#__PURE__*/React__default["default"].createElement(DisconnectAlert__default["default"], {
     isDisconnecting: isDisconnecting,
     onClose: onClose,
     onDisconnect: onDisconnect,
     isOpen: isDisconnectAlertOpen,
-    title: t("settings.integrations.".concat(integration, ".disconnect.title")),
-    message: disconnectMessage || t("settings.integrations.".concat(integration, ".disconnect.message"))
+    message: disconnectMessage || t("settings.integrations.".concat(integration, ".disconnect.message")),
+    title: disconnectTitle || t("settings.integrations.".concat(integration, ".disconnect.title"))
   }));
 });
 
@@ -737,7 +751,7 @@ var Manage = function Manage(_ref) {
   var _useDestroyDaily = useDestroyDaily({
       onSuccess: function onSuccess() {
         setIsDisconnectAlertOpen(false);
-        onDisconnect === null || onDisconnect === void 0 ? void 0 : onDisconnect();
+        onDisconnect === null || onDisconnect === void 0 || onDisconnect();
       }
     }),
     destroyIntegration = _useDestroyDaily.mutate,