@bigbinary/neeto-integrations-frontend 2.12.3 → 2.12.5

package/README.md

@@ -183,6 +183,10 @@ Available components:
 | neetoMonitor |  :white_check_mark:  |
 | neetoCal     |  :white_check_mark:  |
 
+### Instructions for development
+
+Check the [Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) for step-by-step instructions to develop the frontend package.
+
 ## 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/app/javascript/src/translations/en.json

@@ -47,7 +47,7 @@
         "createdAt": "Created At",
         "label": "Label"
       },
-      "newApiKeyInstruction": "Here is your Zapier API key. Make sure to copy the API key now as the API key will not be shown again. If you loose the API key then you can generate a new API key anytime.",
+      "newApiKeyInstruction": "Here is your Zapier API key. Make sure to copy the API key now as the API key will not be shown again. If you lose the API key then you can generate a new API key anytime.",
       "tableTitle": "Previously Generated API Keys",
       "deleteApiKey": {
         "title": "Delete API Key?",
@@ -84,7 +84,10 @@
       "apiKey": "API key",
       "helpDoc": "<externalLink>See instructions</externalLink> on getting the API key",
       "yourApiKey": "You are connected to Daily.co with the API key: <underline>{{apiKey, anyCase}}</underline>",
-      "connect": "Connect your Daily.co account",
+      "connect": {
+        "account": "Connect your Daily.co account",
+        "title": "Connect Daily.co"
+      },
       "connected": "You are connected to Daily.co",
       "disconnect": {
         "title": "Disconnect Daily.co integration?",

package/dist/Daily.cjs.js

@@ -7,19 +7,22 @@ var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var reactQuery = require('react-query');
 var axios = require('axios');
+var Container = require('@bigbinary/neeto-molecules/Container');
+var Header = require('@bigbinary/neeto-molecules/Header');
+var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
+var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
+var neetoui = require('@bigbinary/neetoui');
+var formik = require('@bigbinary/neetoui/formik');
+var reactI18next = require('react-i18next');
+var classnames = require('classnames');
 require('@bigbinary/neeto-molecules/IntegrationCard');
 var DisconnectAlert = require('@bigbinary/neeto-molecules/IntegrationDisconnectAlert');
 var WalkthroughModal = require('@bigbinary/neeto-molecules/IntegrationWalkthroughModal');
-var classnames = require('classnames');
+var neetoIcons = require('@bigbinary/neeto-icons');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var misc = require('@bigbinary/neeto-icons/misc');
-var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
-var reactI18next = require('react-i18next');
-var neetoui = require('@bigbinary/neetoui');
-var formik = require('@bigbinary/neetoui/formik');
 require('ramda');
 var yup = require('yup');
-var neetoIcons = require('@bigbinary/neeto-icons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -45,10 +48,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
+var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
+var HelpPopover__default = /*#__PURE__*/_interopDefaultLegacy(HelpPopover);
+var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 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);
 
 function _typeof(o) {
@@ -210,6 +216,48 @@ function _extends$1() {
   return _extends$1.apply(this, arguments);
 }
 
+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 = ["className", "children"];
+var ExternalLink = function ExternalLink(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement("a", _extends$1({
+    className: classnames__default["default"](["neeto-ui-text-primary-800 hover:neeto-ui-text-primary-800 visited:neeto-ui-text-primary-600 font-medium", className])
+  }, props), children);
+};
+var ExternalLink$1 = /*#__PURE__*/React__default["default"].memo(ExternalLink);
+
 var Manage$1 = reactUtils.withT(function (_ref) {
   var t = _ref.t,
     _ref$title = _ref.title,
@@ -260,7 +308,7 @@ var Manage$1 = reactUtils.withT(function (_ref) {
     className: "neeto-ui-border-gray-300 neeto-ui-rounded-xl mt-10 w-full space-y-4 border p-6"
   }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: "neeto-ui-text-gray-600",
-    size: 60
+    size: 48
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "space-y-2"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -447,23 +495,23 @@ var Connect = reactUtils.withT(function (_ref) {
     children = _ref.children,
     secondaryButtonProps = _ref.secondaryButtonProps;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mx-auto w-full max-w-lg"
+    className: "mx-auto w-full max-w-3xl"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "mb-6 flex flex-col gap-y-2"
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     size: 48
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-800 mb-0.5 mt-6",
-    style: "h2",
-    weight: "semibold"
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex flex-col gap-y-1"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    style: "h2"
   }, title), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-700 mb-8",
-    style: "body1",
-    weight: "normal"
-  }, description), children, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex w-full items-start space-x-4"
+    style: "body2"
+  }, description))), children, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex w-full items-center gap-x-3"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends$1({
     label: t("neetoIntegrations.common.connect"),
     onClick: onConnect
-  }, buttonProps)), neetoCist.isNotEmpty(secondaryButtonProps) && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends$1({
+  }, buttonProps)), secondaryButtonProps && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends$1({
     style: "secondary"
   }, secondaryButtonProps))));
 });
@@ -471,23 +519,23 @@ Connect.prototypes = {
   /**
    * To specify the Icon to be shown
    */
-  Icon: propTypesExports.PropTypes.node,
+  Icon: PropTypes.node,
   /**
    * To specify the title of the connect component
    */
-  title: propTypesExports.PropTypes.string,
+  title: PropTypes.string,
   /**
    * To specify the description for connect component
    */
-  description: propTypesExports.PropTypes.string,
+  description: PropTypes.string,
   /**
    * To specify the props for the connect button
    */
-  buttonProps: propTypesExports.PropTypes.object,
+  buttonProps: PropTypes.object,
   /**
    * Handler function that is triggered when the connect button is clicked.
    */
-  onConnect: propTypesExports.PropTypes.func
+  onConnect: PropTypes.func
 };
 
 ({
@@ -551,13 +599,13 @@ var Finish = reactUtils.withT(function (_ref) {
     secondaryButtonProps = _ref$secondaryButtonP === void 0 ? {} : _ref$secondaryButtonP,
     children = _ref.children;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-w-full mx-auto max-w-lg"
+    className: "mx-auto w-full max-w-3xl"
   }, /*#__PURE__*/React__default["default"].createElement(SvgSuccess, null), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-800 mb-8 mt-4",
+    className: "mb-6 mt-4",
     style: "h2",
     weight: "semibold"
   }, title), children, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex w-full items-start space-x-2"
+    className: "flex w-full items-center gap-x-2"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends$1({
     onClick: onClick,
     label: t("neetoIntegrations.common.continue")
@@ -609,48 +657,6 @@ 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,{});
 
-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 = ["className", "children"];
-var ExternalLink = function ExternalLink(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default["default"].createElement("a", _extends$1({
-    className: classnames__default["default"](["neeto-ui-text-primary-800 hover:neeto-ui-text-primary-800 visited:neeto-ui-text-primary-600 font-medium", className])
-  }, props), children);
-};
-var ExternalLink$1 = /*#__PURE__*/React__default["default"].memo(ExternalLink);
-
 var MANAGE_DAILY_CO_FORM_INITIAL_VALUES = {
   apiKey: ""
 };
@@ -663,7 +669,8 @@ var DAILY_CO_VALIDATION_SCHEMA = yup__namespace.object().shape({
 var Form = function Form(_ref) {
   var helpDocUrl = _ref.helpDocUrl,
     videoUrl = _ref.videoUrl,
-    onConnect = _ref.onConnect;
+    onConnect = _ref.onConnect,
+    breadcrumbs = _ref.breadcrumbs;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = React.useState(false),
@@ -683,7 +690,37 @@ var Form = function Form(_ref) {
   if (isConnecting) {
     return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
   }
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
+    isHeaderFixed: true
+  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], {
+    breadcrumbs: breadcrumbs,
+    title: /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "flex items-center gap-2"
+    }, t("neetoIntegrations.daily.connect.title"), /*#__PURE__*/React__default["default"].createElement(HelpPopover__default["default"], {
+      title: t("neetoIntegrations.daily.connect.title"),
+      description: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
+        i18nKey: "neetoIntegrations.daily.helpDoc",
+        components: {
+          externalLink: /*#__PURE__*/React__default["default"].createElement(ExternalLink$1, {
+            "data-cy": "api-key-help-doc-link",
+            href: helpDocUrl,
+            rel: "noreferrer",
+            target: "_blank"
+          })
+        }
+      }),
+      helpLinkProps: {
+        label: /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+          className: "mt-8",
+          label: t("neetoIntegrations.daily.walkthroughText"),
+          style: "link",
+          onClick: function onClick() {
+            return setIsDemoModalOpen(true);
+          }
+        })
+      }
+    }))
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "mx-auto w-full max-w-md"
   }, /*#__PURE__*/React__default["default"].createElement(formik.Form, {
     formikProps: {
@@ -694,32 +731,14 @@ var Form = function Form(_ref) {
   }, function (_ref2) {
     var dirty = _ref2.dirty;
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "mt-10 w-full space-y-5"
+      className: "mt-14 w-full space-y-5"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "block"
+      className: "block min-h-20"
     }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
       autoFocus: true,
       required: true,
       label: t("neetoIntegrations.daily.apiKey"),
-      name: "apiKey",
-      helpText: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-        i18nKey: "neetoIntegrations.daily.helpDoc",
-        components: {
-          externalLink: /*#__PURE__*/React__default["default"].createElement(ExternalLink$1, {
-            "data-cy": "api-key-help-doc-link",
-            href: helpDocUrl,
-            rel: "noreferrer",
-            target: "_blank"
-          })
-        }
-      })
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      className: "mt-8",
-      label: t("neetoIntegrations.daily.walkthroughText"),
-      style: "link",
-      onClick: function onClick() {
-        return setIsDemoModalOpen(true);
-      }
+      name: "apiKey"
     })), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
       disabled: isConnecting || !dirty,
       label: t("neetoIntegrations.common.connect"),
@@ -732,7 +751,7 @@ var Form = function Form(_ref) {
     onClose: function onClose() {
       return setIsDemoModalOpen(false);
     }
-  }));
+  })));
 };
 var Form$1 = reactUtils.withTitle(Form, i18next__default["default"].t("neetoIntegrations.browserTitles.integrations.dailyco"));
 
@@ -788,7 +807,7 @@ var Manage = function Manage(_ref) {
         apiKey: apiKey
       }
     }) : description,
-    title: isConnected ? t("neetoIntegrations.daily.connected") : t("neetoIntegrations.daily.connect"),
+    title: isConnected ? t("neetoIntegrations.daily.connected") : t("neetoIntegrations.daily.connect.account"),
     onClose: function onClose() {
       return setIsDisconnectAlertOpen(false);
     },