@bigbinary/neeto-integrations-frontend 2.1.1 → 2.2.0-beta1

package/dist/ZapierForm.cjs.js

@@ -1,15 +1,26 @@
 'use strict';
 
-var React = require('react');
-var pure = require('@bigbinary/neeto-commons-frontend/pure');
-var neetoui = require('@bigbinary/neetoui');
+var react = require('react');
+var neetoCist = require('@bigbinary/neeto-cist');
+var Button = require('@bigbinary/neetoui/Button');
+var Spinner = require('@bigbinary/neetoui/Spinner');
+var Typography = require('@bigbinary/neetoui/Typography');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
+var constants = require('@bigbinary/neeto-commons-frontend/constants');
+var Alert = require('@bigbinary/neetoui/Alert');
+var Table = require('@bigbinary/neetoui/Table');
 var i18next = require('i18next');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
-var neetoIcons = require('@bigbinary/neeto-icons');
-var formik = require('@bigbinary/neetoui/formik');
+var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var Yup = require('yup');
+var jsxRuntime = require('react/jsx-runtime');
+var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
+var Form = require('@bigbinary/neetoui/formik/Form');
+var Input = require('@bigbinary/neetoui/formik/Input');
+var reactRouterDom = require('react-router-dom');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var CopyToClipboardButton = require('@bigbinary/neeto-molecules/CopyToClipboardButton');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,39 +42,47 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
+var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
+var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
 var Yup__namespace = /*#__PURE__*/_interopNamespace(Yup);
+var ActionBlock__default = /*#__PURE__*/_interopDefaultLegacy(ActionBlock);
+var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
+var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
+var CopyToClipboardButton__default = /*#__PURE__*/_interopDefaultLegacy(CopyToClipboardButton);
 
 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;
   }
 }
 
@@ -90,14 +109,14 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-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) {
@@ -131,57 +150,71 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var Menu = neetoui.Dropdown.Menu,
-  MenuItem = neetoui.Dropdown.MenuItem;
-var Actions = function Actions(_ref) {
+var GENERATE_API_KEY_VALIDATION = Yup__namespace.object({
+  label: Yup__namespace.string().trim(i18next.t("neetoIntegrations.zapier.label.noBlankSpaces")).required(i18next.t("neetoIntegrations.zapier.label.required")).strict()
+});
+var GENERATE_API_KEY_FORMIK_PROPS = {
+  initialValues: {
+    label: ""
+  },
+  validationSchema: GENERATE_API_KEY_VALIDATION,
+  validateOnBlur: false
+};
+var MENU_ITEMS = {
+  DELETE: "delete"
+};
+
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var getMenuItems = function getMenuItems(_ref) {
   var apiKey = _ref.apiKey,
     setApiKeyToDelete = _ref.setApiKeyToDelete;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
-    buttonStyle: "text",
-    icon: neetoIcons.MenuHorizontal,
-    strategy: "fixed"
-  }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
+  return [{
+    key: MENU_ITEMS.DELETE,
     "data-cy": "delete-apikey-button",
+    label: i18next.t("neetoIntegrations.common.delete"),
     onClick: function onClick() {
       return setApiKeyToDelete(apiKey);
     }
-  }, t("neetoIntegrations.common.delete"))));
+  }];
 };
-
-function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getApiKeysTableColumnData = function getApiKeysTableColumnData() {
   return [{
-    title: i18next__default["default"].t("neetoIntegrations.zapier.tableColumns.label"),
+    title: i18next.t("neetoIntegrations.zapier.tableColumns.label"),
     dataIndex: "options",
     key: "options",
     width: 272,
-    render: function render(options, _ref) {
-      var actions = _ref.actions;
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "flex items-center justify-between gap-x-3"
-      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-        className: "w-4/5",
-        style: "body2"
-      }, options === null || options === void 0 ? void 0 : options.label), actions);
+    render: function render(options, _ref2) {
+      var actions = _ref2.actions;
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center justify-between gap-x-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          className: "w-4/5",
+          style: "body2",
+          children: options === null || options === void 0 ? void 0 : options.label
+        }), actions]
+      });
     }
   }, {
-    title: i18next__default["default"].t("neetoIntegrations.zapier.tableColumns.createdAt"),
+    title: i18next.t("neetoIntegrations.zapier.tableColumns.createdAt"),
     dataIndex: "createdAt",
     key: "createdAt"
   }];
 };
-var getApiKeysTableRowData = function getApiKeysTableRowData(_ref2) {
-  var apiKeys = _ref2.apiKeys,
-    setApiKeyToDelete = _ref2.setApiKeyToDelete;
+var getApiKeysTableRowData = function getApiKeysTableRowData(_ref3) {
+  var apiKeys = _ref3.apiKeys,
+    setApiKeyToDelete = _ref3.setApiKeyToDelete;
   return apiKeys.map(function (apiKey) {
     return _objectSpread$1(_objectSpread$1({}, apiKey), {}, {
       createdAt: utils.timeFormat.fromNow(apiKey.createdAt),
-      actions: /*#__PURE__*/React__default["default"].createElement(Actions, {
-        apiKey: apiKey,
-        setApiKeyToDelete: setApiKeyToDelete
+      actions: /*#__PURE__*/jsxRuntime.jsx(MoreDropdown__default["default"], {
+        dropdownProps: {
+          strategy: "fixed"
+        },
+        menuItems: getMenuItems({
+          apiKey: apiKey,
+          setApiKeyToDelete: setApiKeyToDelete
+        })
       })
     });
   });
@@ -192,15 +225,19 @@ var ApiKeysList = function ApiKeysList(_ref) {
   var _ref$apiKeys = _ref.apiKeys,
     apiKeys = _ref$apiKeys === void 0 ? [] : _ref$apiKeys,
     _ref$deleteApiKey = _ref.deleteApiKey,
-    deleteApiKey = _ref$deleteApiKey === void 0 ? pure.noop : _ref$deleteApiKey,
+    deleteApiKey = _ref$deleteApiKey === void 0 ? neetoCist.noop : _ref$deleteApiKey,
     _ref$isDeleting = _ref.isDeleting,
     isDeleting = _ref$isDeleting === void 0 ? false : _ref$isDeleting,
     _ref$setNewlyCreatedA = _ref.setNewlyCreatedApiKey,
-    setNewlyCreatedApiKey = _ref$setNewlyCreatedA === void 0 ? pure.noop : _ref$setNewlyCreatedA;
-  var _useState = React.useState(null),
+    setNewlyCreatedApiKey = _ref$setNewlyCreatedA === void 0 ? neetoCist.noop : _ref$setNewlyCreatedA;
+  var _useState = react.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     apiKeyToDelete = _useState2[0],
     setApiKeyToDelete = _useState2[1];
+  var _useState3 = react.useState(constants.DEFAULT_PAGE_INDEX),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentPageNumber = _useState4[0],
+    setCurrentPageNumber = _useState4[1];
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var closeAlert = function closeAlert() {
@@ -215,99 +252,104 @@ var ApiKeysList = function ApiKeysList(_ref) {
     });
   };
   if (ramda.isEmpty(apiKeys)) return null;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "space-y-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h3"
-  }, t("neetoIntegrations.zapier.tableTitle")), /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
-    fixedHeight: true,
-    allowRowClick: false,
-    columnData: getApiKeysTableColumnData(),
-    rowData: getApiKeysTableRowData({
-      apiKeys: apiKeys,
-      setApiKeyToDelete: setApiKeyToDelete
-    })
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
-    backdropClassName: "zapier-delete-alert",
-    isOpen: ramda.isNotNil(apiKeyToDelete),
-    isSubmitting: isDeleting,
-    submitButtonLabel: t("neetoIntegrations.common.delete"),
-    title: t("neetoIntegrations.zapier.deleteApiKey.title"),
-    message: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-      i18nKey: "neetoIntegrations.zapier.deleteApiKey.message",
-      values: {
-        key: apiKeyToDelete === null || apiKeyToDelete === void 0 ? void 0 : (_apiKeyToDelete$optio = apiKeyToDelete.options) === null || _apiKeyToDelete$optio === void 0 ? void 0 : _apiKeyToDelete$optio.label
-      }
-    }),
-    onClose: closeAlert,
-    onSubmit: handleSubmit
-  }));
-};
-
-var GENERATE_API_KEY_VALIDATION = Yup__namespace.object({
-  label: Yup__namespace.string().required(i18next__default["default"].t("neetoIntegrations.common.required"))
-});
-var GENERATE_API_KEY_FORMIK_PROPS = {
-  initialValues: {
-    label: ""
-  },
-  validationSchema: GENERATE_API_KEY_VALIDATION
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "space-y-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "h3",
+        children: t("neetoIntegrations.zapier.tableTitle")
+      }), /*#__PURE__*/jsxRuntime.jsx(Table__default["default"], {
+        currentPageNumber: currentPageNumber,
+        fixedHeight: true,
+        allowRowClick: false,
+        columnData: getApiKeysTableColumnData(),
+        defaultPageSize: constants.DEFAULT_PAGE_SIZE,
+        handlePageChange: setCurrentPageNumber,
+        rowData: getApiKeysTableRowData({
+          apiKeys: apiKeys,
+          setApiKeyToDelete: setApiKeyToDelete
+        })
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Alert__default["default"], {
+      backdropClassName: "zapier-delete-alert",
+      isOpen: ramda.isNotNil(apiKeyToDelete),
+      isSubmitting: isDeleting,
+      submitButtonLabel: t("neetoIntegrations.common.delete"),
+      title: t("neetoIntegrations.zapier.deleteApiKey.title"),
+      message: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+        i18nKey: "neetoIntegrations.zapier.deleteApiKey.message",
+        values: {
+          key: apiKeyToDelete === null || apiKeyToDelete === void 0 || (_apiKeyToDelete$optio = apiKeyToDelete.options) === null || _apiKeyToDelete$optio === void 0 ? void 0 : _apiKeyToDelete$optio.label
+        }
+      }),
+      onClose: closeAlert,
+      onSubmit: handleSubmit
+    })]
+  });
 };
 
-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 GenerateKey = function GenerateKey(_ref) {
   var handleSubmit = _ref.handleSubmit,
     isLoading = _ref.isLoading;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var inputRef = React.useRef(null);
-  React.useEffect(function () {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
+  var inputRef = react.useRef(null);
+  var history = reactRouterDom.useHistory();
+  react.useEffect(function () {
+    if (!inputRef.current) return;
+    inputRef.current.focus();
   }, []);
-  return /*#__PURE__*/React__default["default"].createElement(formik.Form, {
+  return /*#__PURE__*/jsxRuntime.jsx(Form__default["default"], {
     formikProps: _objectSpread(_objectSpread({}, GENERATE_API_KEY_FORMIK_PROPS), {}, {
       onSubmit: handleSubmit
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "space-y-3",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
+        name: "label",
+        placeholder: t("neetoIntegrations.zapier.labelInputPlaceholder"),
+        ref: inputRef
+      }), /*#__PURE__*/jsxRuntime.jsx(ActionBlock__default["default"], {
+        cancelButtonProps: {
+          onClick: function onClick() {
+            return history.goBack();
+          }
+        },
+        isSubmitting: isLoading,
+        submitButtonProps: {
+          label: t("neetoIntegrations.zapier.generateApiKey")
+        }
+      })]
     })
-  }, function (_ref2) {
-    var dirty = _ref2.dirty;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "space-y-4"
-    }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
-      name: "label",
-      placeholder: t("neetoIntegrations.zapier.labelInputPlaceholder"),
-      ref: inputRef
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      disabled: !dirty,
-      label: t("neetoIntegrations.zapier.generateApiKey"),
-      loading: isLoading,
-      type: "submit"
-    }));
   });
 };
 
-var NewApiKeyCallout = function NewApiKeyCallout(_ref) {
-  var apiKey = _ref.apiKey;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mb-8 space-y-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Callout, null, t("neetoIntegrations.zapier.newApiKeyInstruction")), /*#__PURE__*/React__default["default"].createElement(neetoui.Callout, {
-    className: "flex justify-between",
-    style: "success"
-  }, apiKey, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    icon: neetoIcons.Copy,
-    style: "text",
-    tooltipProps: {
-      content: t("neetoIntegrations.zapier.copyApiKey")
-    },
-    onClick: function onClick() {
-      return utils.copyToClipboard(apiKey);
-    }
-  })));
-};
+var NewApiKeyInfo = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    apiKey = _ref.apiKey;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "space-y-2",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      classname: "neeto-ui-text-gray-700",
+      style: "body2",
+      weight: "normal",
+      children: t("neetoIntegrations.zapier.newApiKeyInstruction")
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex justify-between",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        className: "neeto-ui-text-gray-800 my-auto",
+        style: "h5",
+        weight: "semibold",
+        children: apiKey
+      }), /*#__PURE__*/jsxRuntime.jsx(CopyToClipboardButton__default["default"], {
+        label: t("neetoIntegrations.zapier.copyApiKey"),
+        value: apiKey
+      })]
+    })]
+  });
+});
 
 var ZapierForm = function ZapierForm(_ref) {
   var _ref$newlyCreatedApiK = _ref.newlyCreatedApiKey,
@@ -325,45 +367,47 @@ var ZapierForm = function ZapierForm(_ref) {
     _ref$isDeleting = _ref.isDeleting,
     isDeleting = _ref$isDeleting === void 0 ? false : _ref$isDeleting,
     _ref$deleteApiKey = _ref.deleteApiKey,
-    deleteApiKey = _ref$deleteApiKey === void 0 ? pure.noop : _ref$deleteApiKey,
+    deleteApiKey = _ref$deleteApiKey === void 0 ? neetoCist.noop : _ref$deleteApiKey,
     _ref$handleGenerateAp = _ref.handleGenerateApiKey,
-    handleGenerateApiKey = _ref$handleGenerateAp === void 0 ? pure.noop : _ref$handleGenerateAp,
+    handleGenerateApiKey = _ref$handleGenerateAp === void 0 ? neetoCist.noop : _ref$handleGenerateAp,
     _ref$setNewlyCreatedA = _ref.setNewlyCreatedApiKey,
-    setNewlyCreatedApiKey = _ref$setNewlyCreatedA === void 0 ? pure.noop : _ref$setNewlyCreatedA,
+    setNewlyCreatedApiKey = _ref$setNewlyCreatedA === void 0 ? neetoCist.noop : _ref$setNewlyCreatedA,
     _ref$setIsDemoModalOp = _ref.setIsDemoModalOpen,
-    setIsDemoModalOpen = _ref$setIsDemoModalOp === void 0 ? pure.noop : _ref$setIsDemoModalOp;
+    setIsDemoModalOpen = _ref$setIsDemoModalOp === void 0 ? neetoCist.noop : _ref$setIsDemoModalOp;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  if (isLoading) return /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "w-full max-w-xl space-y-6 p-10"
-  }, pure.isNotEmpty(newlyCreatedApiKey) && /*#__PURE__*/React__default["default"].createElement(NewApiKeyCallout, {
-    apiKey: newlyCreatedApiKey
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h2"
-  }, t("neetoIntegrations.zapier.apiKeys")), ramda.isEmpty(apiKeys) && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h4"
-  }, t("neetoIntegrations.zapier.emptyText")), /*#__PURE__*/React__default["default"].createElement(GenerateKey, {
-    handleSubmit: handleGenerateApiKey,
-    isLoading: isGenerating
-  }), pure.isNotEmpty(helpDocUrl) && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    href: helpDocUrl,
-    label: t("neetoIntegrations.zapier.helpDoc"),
-    style: "link",
-    target: "_blank"
-  })), /*#__PURE__*/React__default["default"].createElement(ApiKeysList, {
-    apiKeys: apiKeys,
-    deleteApiKey: deleteApiKey,
-    isDeleting: isDeleting,
-    setNewlyCreatedApiKey: setNewlyCreatedApiKey
-  }), pure.isNotEmpty(videoUrl) && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    className: "mb-6",
-    label: t("neetoIntegrations.zapier.walkthroughText"),
-    style: "link",
-    onClick: function onClick() {
-      return setIsDemoModalOpen(true);
-    }
-  }));
+  if (isLoading) return /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {});
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex w-full max-w-3xl flex-col items-start space-y-6",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      style: "h2",
+      children: t("neetoIntegrations.zapier.apiKeys")
+    }), ramda.isEmpty(apiKeys) && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      style: "h4",
+      children: t("neetoIntegrations.zapier.emptyText")
+    }), /*#__PURE__*/jsxRuntime.jsx(GenerateKey, {
+      handleSubmit: handleGenerateApiKey,
+      isLoading: isGenerating
+    }), neetoCist.isNotEmpty(newlyCreatedApiKey) && /*#__PURE__*/jsxRuntime.jsx(NewApiKeyInfo, {
+      apiKey: newlyCreatedApiKey
+    }), neetoCist.isNotEmpty(helpDocUrl) && /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      href: helpDocUrl,
+      label: t("neetoIntegrations.zapier.helpDoc"),
+      style: "link",
+      target: "_blank"
+    }), neetoCist.isNotEmpty(videoUrl) && /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      label: t("neetoIntegrations.zapier.walkthroughText"),
+      style: "link",
+      onClick: function onClick() {
+        return setIsDemoModalOpen(true);
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(ApiKeysList, {
+      apiKeys: apiKeys,
+      deleteApiKey: deleteApiKey,
+      isDeleting: isDeleting,
+      setNewlyCreatedApiKey: setNewlyCreatedApiKey
+    })]
+  });
 };
 
 module.exports = ZapierForm;