@bigbinary/neeto-custom-domains-frontend 3.0.2 → 3.0.4

package/dist/cjs/CustomDomain.js

@@ -20,6 +20,7 @@ var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var Button = require('@bigbinary/neetoui/Button');
 var Typography = require('@bigbinary/neetoui/Typography');
 var Tag = require('@bigbinary/neetoui/Tag');
+var NoData = require('@bigbinary/neetoui/NoData');
 var Pane = require('@bigbinary/neetoui/Pane');
 var Stepper = require('@bigbinary/neetoui/Stepper');
 var Callout = require('@bigbinary/neetoui/Callout');
@@ -151,7 +152,8 @@ var DeleteAlert = reactUtils.withT(function (_ref) {
 
 var STATUS_TAG_STYLES = {
   active: "success",
-  pending: "warning"
+  pending: "warning",
+  failed: "danger"
 };
 
 var Domain = reactUtils.withT(function (_ref) {
@@ -161,13 +163,7 @@ var Domain = reactUtils.withT(function (_ref) {
     customDomain = _ref.customDomain,
     openDeleteAlert = _ref.openDeleteAlert,
     helpDocUrl = _ref.helpDocUrl;
-  return /*#__PURE__*/jsxRuntime.jsx(CardLayout, {
-    actionBlock: !isCustomDomainAdded && /*#__PURE__*/jsxRuntime.jsx(Button, {
-      label: t("neetoCustomDomains.actions.add", {
-        what: t("neetoCustomDomains.customDomain", constants.SINGULAR)
-      }),
-      onClick: openPane
-    }),
+  return isCustomDomainAdded ? /*#__PURE__*/jsxRuntime.jsx(CardLayout, {
     title: t("neetoCustomDomains.connectionTitle"),
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "space-y-1",
@@ -177,13 +173,13 @@ var Domain = reactUtils.withT(function (_ref) {
           className: "flex items-center space-x-2",
           children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
             style: "body2",
-            children: isCustomDomainAdded ? customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname : t("neetoCustomDomains.noDomainConnected")
-          }), isCustomDomainAdded && /*#__PURE__*/jsxRuntime.jsx(Tag, {
+            children: customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname
+          }), /*#__PURE__*/jsxRuntime.jsx(Tag, {
             "data-cy": "".concat(general.hyphenize(customDomain === null || customDomain === void 0 ? void 0 : customDomain.status), "-tag-container"),
             style: STATUS_TAG_STYLES[customDomain === null || customDomain === void 0 ? void 0 : customDomain.status],
             label: t("neetoCustomDomains.status.domain.".concat(customDomain === null || customDomain === void 0 ? void 0 : customDomain.status))
           })]
-        }), isCustomDomainAdded && /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
+        }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
           dropdownButtonProps: {
             "data-testid": "nui-dropdown-icon-".concat(customDomain === null || customDomain === void 0 ? void 0 : customDomain.id)
           },
@@ -217,6 +213,28 @@ var Domain = reactUtils.withT(function (_ref) {
         })
       })]
     })
+  }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "flex h-full w-full items-center justify-center",
+    children: /*#__PURE__*/jsxRuntime.jsx(NoData, {
+      className: "w-full",
+      title: t("neetoCustomDomains.noData.title"),
+      helpText: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+        i18nKey: "neetoCustomDomains.noData.helpText",
+        components: {
+          helpLink: /*#__PURE__*/jsxRuntime.jsx(Button, {
+            href: helpDocUrl,
+            style: "link",
+            target: "_blank"
+          })
+        }
+      }),
+      primaryButtonProps: {
+        label: t("neetoCustomDomains.actions.add", {
+          what: t("neetoCustomDomains.customDomain", constants.SINGULAR)
+        }),
+        onClick: openPane
+      }
+    })
   });
 });
 
@@ -227,6 +245,7 @@ var INITIAL_VALUES = {
 var CURRENT_STEP = {
   notAdded: 0,
   pending: 1,
+  failed: 1,
   active: 2
 };
 var STEPS = [{
@@ -762,7 +781,7 @@ var dnsProviderData = function dnsProviderData(hostname) {
 };
 
 var Validation = function Validation(_ref) {
-  var _dnsHelpDocs$dnsProvi, _dnsHelpDocs$dnsProvi2, _dnsHelpDocs$unknown;
+  var _dnsHelpDocs$dnsProvi, _dnsHelpDocs$dnsProvi2, _dnsHelpDocs$unknown, _dnsHelpDocs$dnsProvi3, _dnsHelpDocs$dnsProvi4, _dnsHelpDocs$unknown2, _dnsHelpDocs$dnsProvi5, _dnsHelpDocs$dnsProvi6, _dnsHelpDocs$unknown3;
   var customDomain = _ref.customDomain,
     onClose = _ref.onClose,
     url = _ref.url,
@@ -773,6 +792,7 @@ var Validation = function Validation(_ref) {
     dnsTarget = customDomain.dnsTarget,
     status = customDomain.status,
     dnsProvider = customDomain.dnsProvider;
+  var queryClient = reactQuery.useQueryClient();
   var _useState = React.useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     errorKey = _useState2[0],
@@ -784,6 +804,9 @@ var Validation = function Validation(_ref) {
       onError: function onError(_ref2) {
         var response = _ref2.response;
         setErrorKey(response.data.error);
+        queryClient.invalidateQueries({
+          queryKey: [DOMAIN_QUERY_KEY]
+        });
       },
       onSuccess: function onSuccess() {
         Toastr.success(t("neetoCustomDomains.validation.successMessage"));
@@ -848,11 +871,62 @@ var Validation = function Validation(_ref) {
             x: '100%'
           }
         })
-      }), neetoCist.isNotEmpty(errorKey) && /*#__PURE__*/jsxRuntime.jsx(Callout, {
+      }), status === "failed" && /*#__PURE__*/jsxRuntime.jsx(Callout, {
         style: STATUS_TAG_STYLES[status],
         children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
           style: "body2",
-          children: t(errorKey)
+          children: dnsProvider !== "unknown" ? /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+            i18nKey: "neetoCustomDomains.domainValidationFailedForKnownProvider",
+            values: {
+              dnsProvider: dnsProviderInfo.name
+            },
+            components: {
+              Login: /*#__PURE__*/jsxRuntime.jsx(Button, {
+                href: dnsProviderInfo.loginUrl,
+                rel: "noreferrer",
+                style: "link",
+                target: "_blank"
+              }),
+              Link: /*#__PURE__*/jsxRuntime.jsx(Button, {
+                href: (_dnsHelpDocs$dnsProvi3 = (_dnsHelpDocs$dnsProvi4 = dnsHelpDocs[dnsProvider]) === null || _dnsHelpDocs$dnsProvi4 === void 0 ? void 0 : _dnsHelpDocs$dnsProvi4[domainType]) !== null && _dnsHelpDocs$dnsProvi3 !== void 0 ? _dnsHelpDocs$dnsProvi3 : (_dnsHelpDocs$unknown2 = dnsHelpDocs.unknown) === null || _dnsHelpDocs$unknown2 === void 0 ? void 0 : _dnsHelpDocs$unknown2[domainType],
+                rel: "noreferrer",
+                style: "link",
+                target: "_blank"
+              }),
+              br: /*#__PURE__*/jsxRuntime.jsx("br", {})
+            }
+          }) : /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+            i18nKey: "neetoCustomDomains.domainValidationFailedForUnknownProvider",
+            values: {
+              dnsProvider: dnsProviderInfo.name
+            },
+            components: {
+              Login: /*#__PURE__*/jsxRuntime.jsx(Button, {
+                href: dnsProviderInfo.loginUrl,
+                rel: "noreferrer",
+                style: "link",
+                target: "_blank"
+              }),
+              Link: /*#__PURE__*/jsxRuntime.jsx(Button, {
+                href: (_dnsHelpDocs$dnsProvi5 = (_dnsHelpDocs$dnsProvi6 = dnsHelpDocs[dnsProvider]) === null || _dnsHelpDocs$dnsProvi6 === void 0 ? void 0 : _dnsHelpDocs$dnsProvi6[domainType]) !== null && _dnsHelpDocs$dnsProvi5 !== void 0 ? _dnsHelpDocs$dnsProvi5 : (_dnsHelpDocs$unknown3 = dnsHelpDocs.unknown) === null || _dnsHelpDocs$unknown3 === void 0 ? void 0 : _dnsHelpDocs$unknown3[domainType],
+                rel: "noreferrer",
+                style: "link",
+                target: "_blank"
+              }),
+              br: /*#__PURE__*/jsxRuntime.jsx("br", {})
+            }
+          })
+        })
+      }), neetoCist.isNotEmpty(errorKey) && status === "pending" && /*#__PURE__*/jsxRuntime.jsx(Callout, {
+        style: STATUS_TAG_STYLES[status],
+        children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+          style: "body2",
+          children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+            i18nKey: errorKey,
+            components: {
+              br: /*#__PURE__*/jsxRuntime.jsx("br", {})
+            }
+          })
         })
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(Pane.Footer, {
@@ -861,7 +935,7 @@ var Validation = function Validation(_ref) {
         children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
           "data-cy": "validate-domain-button",
           disabled: isValidating || isDomainValidated,
-          label: t("neetoCustomDomains.validation.buttonLabel.domain"),
+          label: status === "failed" ? t("neetoCustomDomains.validation.buttonLabel.revalidate") : neetoCist.isNotEmpty(errorKey) ? t("neetoCustomDomains.validation.buttonLabel.validateManually") : t("neetoCustomDomains.validation.buttonLabel.domain"),
           loading: isValidating,
           onClick: validateDomain
         }), /*#__PURE__*/jsxRuntime.jsx(Button, {
@@ -1009,7 +1083,7 @@ var CustomDomain = function CustomDomain(_ref) {
         openPane: openPane,
         size: headerSize
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex w-full justify-center",
+        className: "flex w-full justify-center h-full",
         children: /*#__PURE__*/jsxRuntime.jsx(Domain, {
           customDomain: customDomain,
           helpDocUrl: helpDocUrl,