@bigbinary/neeto-integrations-frontend 2.12.4 → 2.12.5

package/dist/index.cjs.js

@@ -16,6 +16,9 @@ var i18next = require('i18next');
 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 formik = require('@bigbinary/neetoui/formik');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
@@ -51,6 +54,9 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 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 yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 
@@ -395,7 +401,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),
@@ -415,7 +422,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: {
@@ -426,32 +463,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"),
@@ -464,7 +483,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"));
 
@@ -520,7 +539,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);
     },