@bigbinary/neeto-integrations-frontend 2.12.3 → 2.12.5

package/dist/Daily.js

@@ -6,19 +6,22 @@ import { useMutationWithInvalidation, withT, withTitle, useQueryParams } from '@
 import { DEFAULT_STALE_TIME } from '@bigbinary/neeto-commons-frontend/constants';
 import { useQuery } from 'react-query';
 import axios from 'axios';
+import Container from '@bigbinary/neeto-molecules/Container';
+import Header from '@bigbinary/neeto-molecules/Header';
+import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
+import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
+import { Typography, Button, Tooltip } from '@bigbinary/neetoui';
+import { Form as Form$2, Input } from '@bigbinary/neetoui/formik';
+import { Trans, useTranslation } from 'react-i18next';
+import classnames from 'classnames';
 import '@bigbinary/neeto-molecules/IntegrationCard';
 import DisconnectAlert from '@bigbinary/neeto-molecules/IntegrationDisconnectAlert';
 import WalkthroughModal from '@bigbinary/neeto-molecules/IntegrationWalkthroughModal';
-import classnames from 'classnames';
+import { Check } from '@bigbinary/neeto-icons';
 import { buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
 import { Daily as Daily$1 } from '@bigbinary/neeto-icons/misc';
-import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
-import { Trans, useTranslation } from 'react-i18next';
-import { Typography, Button, Tooltip } from '@bigbinary/neetoui';
-import { Form as Form$2, Input } from '@bigbinary/neetoui/formik';
 import 'ramda';
 import * as yup from 'yup';
-import { Check } from '@bigbinary/neeto-icons';
 
 function _typeof(o) {
   "@babel/helpers - typeof";
@@ -179,6 +182,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.createElement("a", _extends$1({
+    className: classnames(["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.memo(ExternalLink);
+
 var Manage$1 = withT(function (_ref) {
   var t = _ref.t,
     _ref$title = _ref.title,
@@ -229,7 +274,7 @@ var Manage$1 = 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.createElement(Icon, {
     className: "neeto-ui-text-gray-600",
-    size: 60
+    size: 48
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "space-y-2"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -416,23 +461,23 @@ var Connect = withT(function (_ref) {
     children = _ref.children,
     secondaryButtonProps = _ref.secondaryButtonProps;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "mx-auto w-full max-w-lg"
+    className: "mx-auto w-full max-w-3xl"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-6 flex flex-col gap-y-2"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     size: 48
-  }), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-800 mb-0.5 mt-6",
-    style: "h2",
-    weight: "semibold"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-y-1"
+  }, /*#__PURE__*/React__default.createElement(Typography, {
+    style: "h2"
   }, title), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-700 mb-8",
-    style: "body1",
-    weight: "normal"
-  }, description), children, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex w-full items-start space-x-4"
+    style: "body2"
+  }, description))), children, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-full items-center gap-x-3"
   }, /*#__PURE__*/React__default.createElement(Button, _extends$1({
     label: t("neetoIntegrations.common.connect"),
     onClick: onConnect
-  }, buttonProps)), isNotEmpty(secondaryButtonProps) && /*#__PURE__*/React__default.createElement(Button, _extends$1({
+  }, buttonProps)), secondaryButtonProps && /*#__PURE__*/React__default.createElement(Button, _extends$1({
     style: "secondary"
   }, secondaryButtonProps))));
 });
@@ -440,23 +485,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
 };
 
 ({
@@ -520,13 +565,13 @@ var Finish = withT(function (_ref) {
     secondaryButtonProps = _ref$secondaryButtonP === void 0 ? {} : _ref$secondaryButtonP,
     children = _ref.children;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-w-full mx-auto max-w-lg"
+    className: "mx-auto w-full max-w-3xl"
   }, /*#__PURE__*/React__default.createElement(SvgSuccess, null), /*#__PURE__*/React__default.createElement(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.createElement("div", {
-    className: "flex w-full items-start space-x-2"
+    className: "flex w-full items-center gap-x-2"
   }, /*#__PURE__*/React__default.createElement(Button, _extends$1({
     onClick: onClick,
     label: t("neetoIntegrations.common.continue")
@@ -578,48 +623,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.createElement("a", _extends$1({
-    className: classnames(["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.memo(ExternalLink);
-
 var MANAGE_DAILY_CO_FORM_INITIAL_VALUES = {
   apiKey: ""
 };
@@ -632,7 +635,8 @@ var DAILY_CO_VALIDATION_SCHEMA = yup.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 = useTranslation(),
     t = _useTranslation.t;
   var _useState = useState(false),
@@ -652,7 +656,37 @@ var Form = function Form(_ref) {
   if (isConnecting) {
     return /*#__PURE__*/React__default.createElement(PageLoader, null);
   }
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement(Container, {
+    isHeaderFixed: true
+  }, /*#__PURE__*/React__default.createElement(Header, {
+    breadcrumbs: breadcrumbs,
+    title: /*#__PURE__*/React__default.createElement("span", {
+      className: "flex items-center gap-2"
+    }, t("neetoIntegrations.daily.connect.title"), /*#__PURE__*/React__default.createElement(HelpPopover, {
+      title: t("neetoIntegrations.daily.connect.title"),
+      description: /*#__PURE__*/React__default.createElement(Trans, {
+        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"
+          })
+        }
+      }),
+      helpLinkProps: {
+        label: /*#__PURE__*/React__default.createElement(Button, {
+          className: "mt-8",
+          label: t("neetoIntegrations.daily.walkthroughText"),
+          style: "link",
+          onClick: function onClick() {
+            return setIsDemoModalOpen(true);
+          }
+        })
+      }
+    }))
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "mx-auto w-full max-w-md"
   }, /*#__PURE__*/React__default.createElement(Form$2, {
     formikProps: {
@@ -663,32 +697,14 @@ var Form = function Form(_ref) {
   }, function (_ref2) {
     var dirty = _ref2.dirty;
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "mt-10 w-full space-y-5"
+      className: "mt-14 w-full space-y-5"
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "block"
+      className: "block min-h-20"
     }, /*#__PURE__*/React__default.createElement(Input, {
       autoFocus: true,
       required: true,
       label: t("neetoIntegrations.daily.apiKey"),
-      name: "apiKey",
-      helpText: /*#__PURE__*/React__default.createElement(Trans, {
-        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"
-          })
-        }
-      })
-    }), /*#__PURE__*/React__default.createElement(Button, {
-      className: "mt-8",
-      label: t("neetoIntegrations.daily.walkthroughText"),
-      style: "link",
-      onClick: function onClick() {
-        return setIsDemoModalOpen(true);
-      }
+      name: "apiKey"
     })), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Button, {
       disabled: isConnecting || !dirty,
       label: t("neetoIntegrations.common.connect"),
@@ -701,7 +717,7 @@ var Form = function Form(_ref) {
     onClose: function onClose() {
       return setIsDemoModalOpen(false);
     }
-  }));
+  })));
 };
 var Form$1 = withTitle(Form, i18next.t("neetoIntegrations.browserTitles.integrations.dailyco"));
 
@@ -757,7 +773,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);
     },