@bigbinary/neeto-custom-domains-frontend 3.2.2 → 3.3.0

package/dist/cjs/CustomDomain.js

@@ -4,12 +4,12 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var neetoCist = require('@bigbinary/neeto-cist');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var Container = require('@bigbinary/neeto-molecules/Container');
 var Spinner = require('@bigbinary/neetoui/Spinner');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var reactQuery = require('@tanstack/react-query');
 var useMutationWithInvalidation = require('@bigbinary/neeto-commons-frontend/react-utils/useMutationWithInvalidation');
 var axios = require('axios');
+var Container = require('@bigbinary/neeto-molecules/Container');
 var Alert = require('@bigbinary/neetoui/Alert');
 var reactI18next = require('react-i18next');
 var jsxRuntime = require('react/jsx-runtime');
@@ -17,11 +17,11 @@ var classNames = require('classnames');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var CustomDomain$1 = require('@bigbinary/neeto-icons/CustomDomain');
 var ExternalLink = require('@bigbinary/neeto-icons/ExternalLink');
-var CardLayout = require('@bigbinary/neeto-molecules/CardLayout');
-var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var Button = require('@bigbinary/neetoui/Button');
 var Typography = require('@bigbinary/neetoui/Typography');
 var Tooltip = require('@bigbinary/neetoui/Tooltip');
+var CardLayout = require('@bigbinary/neeto-molecules/CardLayout');
+var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var CheckCircle = require('@bigbinary/neeto-icons/CheckCircle');
 var Warning2 = require('@bigbinary/neeto-icons/Warning2');
 var CloseCircle = require('@bigbinary/neeto-icons/CloseCircle');
@@ -94,7 +94,7 @@ var domainsApi = {
 var DOMAIN_QUERY_KEY = "custom-domain";
 
 function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useCreateCustomDomain = function useCreateCustomDomain(url) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return useMutationWithInvalidation(function (payload) {
@@ -182,9 +182,12 @@ var DNS_TARGETS = {
 
 var Domain = function Domain(_ref) {
   var isCustomDomainAdded = _ref.isCustomDomainAdded,
+    disconnectedIntegrationCardDescription = _ref.disconnectedIntegrationCardDescription,
+    connectedIntegrationCardDescription = _ref.connectedIntegrationCardDescription,
     openPane = _ref.openPane,
     customDomains = _ref.customDomains,
     openDeleteAlert = _ref.openDeleteAlert,
+    helpDocUrl = _ref.helpDocUrl,
     setSelectedCustomDomain = _ref.setSelectedCustomDomain;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
@@ -280,19 +283,39 @@ var Domain = function Domain(_ref) {
                   "data-testid": "delete-custom-domain-button"
                 }]
               })]
-            }), /*#__PURE__*/jsxRuntime.jsxs(Typography, {
-              className: "neeto-ui-text-gray-600",
-              style: "body2",
-              children: [(customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "active" && (customDomain === null || customDomain === void 0 ? void 0 : customDomain.redirection) && /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
-                components: {
-                  b: /*#__PURE__*/jsxRuntime.jsx("b", {})
-                },
-                i18nKey: "neetoCustomDomains.redirectionTooltipDescription",
-                values: {
-                  fromDomain: customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname,
-                  toDomain: customDomain === null || customDomain === void 0 || (_customDomain$redirec = customDomain.redirection) === null || _customDomain$redirec === void 0 ? void 0 : _customDomain$redirec.toHostname
-                }
-              }), (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "active" && !(customDomain !== null && customDomain !== void 0 && customDomain.redirection) && t("neetoCustomDomains.activeTooltipDescription"), (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "pending" && t("neetoCustomDomains.pendingTooltipDescription"), (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "failed" && t("neetoCustomDomains.failedTooltipDescription")]
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              children: [/*#__PURE__*/jsxRuntime.jsxs(Typography, {
+                className: "neeto-ui-text-gray-600",
+                style: "body2",
+                children: [(customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "active" && (customDomain === null || customDomain === void 0 ? void 0 : customDomain.redirection) && /*#__PURE__*/jsxRuntime.jsxs("span", {
+                  children: [/*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+                    components: {
+                      b: /*#__PURE__*/jsxRuntime.jsx("b", {})
+                    },
+                    i18nKey: "neetoCustomDomains.redirectionTooltipDescription",
+                    values: {
+                      fromDomain: customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname,
+                      toDomain: customDomain === null || customDomain === void 0 || (_customDomain$redirec = customDomain.redirection) === null || _customDomain$redirec === void 0 ? void 0 : _customDomain$redirec.toHostname
+                    }
+                  }), " ", connectedIntegrationCardDescription || ""]
+                }), (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "active" && !(customDomain !== null && customDomain !== void 0 && customDomain.redirection) && /*#__PURE__*/jsxRuntime.jsxs("span", {
+                  children: [t("neetoCustomDomains.activeTooltipDescription"), " ", connectedIntegrationCardDescription || ""]
+                }), (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "pending" && t("neetoCustomDomains.pendingTooltipDescription"), (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "failed" && t("neetoCustomDomains.failedTooltipDescription")]
+              }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+                className: "neeto-ui-text-gray-600 mt-2",
+                style: "body2",
+                children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+                  i18nKey: "neetoCustomDomains.noData.helpTextConnected",
+                  components: {
+                    Link: /*#__PURE__*/jsxRuntime.jsx(Button, {
+                      href: helpDocUrl,
+                      rel: "noreferrer",
+                      style: "link",
+                      target: "_blank"
+                    })
+                  }
+                })
+              })]
             })]
           })]
         }, index);
@@ -319,10 +342,26 @@ var Domain = function Domain(_ref) {
           style: "h4",
           weight: "medium",
           children: t("neetoCustomDomains.noData.title")
-        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-          className: "neeto-ui-text-gray-600",
-          style: "body2",
-          children: t("neetoCustomDomains.noData.helpText")
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: disconnectedIntegrationCardDescription || t("neetoCustomDomains.noData.helpTextDefault")
+          }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+            className: "neeto-ui-text-gray-600 mt-2",
+            style: "body2",
+            children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+              i18nKey: "neetoCustomDomains.noData.helpTextDisconnected",
+              components: {
+                Link: /*#__PURE__*/jsxRuntime.jsx(Button, {
+                  href: helpDocUrl,
+                  rel: "noreferrer",
+                  style: "link",
+                  target: "_blank"
+                })
+              }
+            })
+          })]
         })]
       })]
     })
@@ -1004,7 +1043,7 @@ var strategyOptions = [{
 }];
 
 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; }
+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), true).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 Strategy = reactUtils.withT(function (_ref) {
   var t = _ref.t,
     hostname = _ref.hostname,
@@ -1090,7 +1129,7 @@ var Strategy = reactUtils.withT(function (_ref) {
 });
 
 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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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 DomainField = function DomainField(_ref) {
   var onCreate = _ref.onCreate,
     url = _ref.url,
@@ -1857,7 +1896,7 @@ var Validation = function Validation(_ref) {
   });
 };
 
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=true===r.prepend?"prepend":"append",d=true===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
 var css = ".neeto_custom_domain_stepper button{cursor:default!important}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2RvbWFpbnMvX292ZXJyaWRlcy5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDRSxvQ0FDRSx3QkNBSiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0b19jdXN0b21fZG9tYWluX3N0ZXBwZXIge1xuICBidXR0b24ge1xuICAgIGN1cnNvcjogZGVmYXVsdCAhaW1wb3J0YW50O1xuICB9XG59XG4iLCIubmVldG9fY3VzdG9tX2RvbWFpbl9zdGVwcGVyIGJ1dHRvbiB7XG4gIGN1cnNvcjogZGVmYXVsdCAhaW1wb3J0YW50O1xufSJdfQ== */";
 n(css,{});
@@ -1952,32 +1991,20 @@ var DomainPane = function DomainPane(_ref) {
 };
 
 var Header = function Header(_ref) {
-  var openPane = _ref.openPane,
-    breadcrumbs = _ref.breadcrumbs,
-    isCustomDomainAdded = _ref.isCustomDomainAdded,
-    setSelectedCustomDomain = _ref.setSelectedCustomDomain,
-    helpDocUrl = _ref.helpDocUrl,
+  _ref.openPane;
+    var breadcrumbs = _ref.breadcrumbs;
+    _ref.isCustomDomainAdded;
+    _ref.setSelectedCustomDomain;
+    var helpDocUrl = _ref.helpDocUrl,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "large" : _ref$size;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var handleClick = function handleClick() {
-    setSelectedCustomDomain({});
-    openPane();
-  };
   return /*#__PURE__*/jsxRuntime.jsx(NeetoHeader, {
     breadcrumbs: breadcrumbs,
     size: size,
     "data-testid": "custom-domain-header",
     title: t("neetoCustomDomains.customDomain", constants.SINGULAR),
-    actionBlock: /*#__PURE__*/jsxRuntime.jsx(Button, {
-      "data-testid": "add-new-custom-domain-button",
-      disabled: isCustomDomainAdded,
-      label: t("neetoCustomDomains.actions.add", {
-        what: t("neetoCustomDomains.customDomain", constants.SINGULAR)
-      }),
-      onClick: handleClick
-    }),
     titleHelpPopoverProps: {
       title: t("neetoCustomDomains.customDomain", constants.SINGULAR),
       description: t("neetoCustomDomains.toolTips.customDomain"),
@@ -1997,6 +2024,8 @@ var CustomDomain = function CustomDomain(_ref) {
     headerSize = _ref.headerSize,
     dnsHelpDocs = _ref.dnsHelpDocs,
     subdomainPlaceholder = _ref.subdomainPlaceholder,
+    disconnectedIntegrationCardDescription = _ref.disconnectedIntegrationCardDescription,
+    connectedIntegrationCardDescription = _ref.connectedIntegrationCardDescription,
     appName = _ref.appName,
     _ref$environment = _ref.environment,
     environment = _ref$environment === void 0 ? "production" : _ref$environment;
@@ -2039,7 +2068,7 @@ var CustomDomain = function CustomDomain(_ref) {
   var isCustomDomainAdded = neetoCist.isNotEmpty(customDomains);
   if (isLoading) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex justify-center items-center w-full h-screen",
+      className: "flex h-screen w-full items-center justify-center",
       children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
     });
   }
@@ -2053,9 +2082,11 @@ var CustomDomain = function CustomDomain(_ref) {
         setSelectedCustomDomain: setSelectedCustomDomain,
         size: headerSize
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex w-full justify-center h-full",
+        className: "flex h-full w-full justify-center",
         children: /*#__PURE__*/jsxRuntime.jsx(Domain, {
+          connectedIntegrationCardDescription: connectedIntegrationCardDescription,
           customDomains: customDomains,
+          disconnectedIntegrationCardDescription: disconnectedIntegrationCardDescription,
           helpDocUrl: helpDocUrl,
           isCustomDomainAdded: isCustomDomainAdded,
           openDeleteAlert: openDeleteAlert,