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

package/app/javascript/src/translations/en.json

@@ -39,8 +39,9 @@
     "dnsProviderCnameRecordInfo": "We have detected that {{dnsProvider,anyCase}} is your DNS provider. Please <Login>log in</Login> to your {{dnsProvider,anyCase}} account and add the following DNS record by copying the exact settings listed below. View <Link>help article</Link> for adding DNS record in {{dnsProvider,anyCase}}.",
     "proxyMessage": " Do not enable proxy for the record. ",
     "nameServerMessage": "View <Link>help article</Link> for adding DNS record in {{dnsProvider,anyCase}}.",
-    "domainRedirectionInfo": "It can take up to 2-24 hours for your custom domain to start working. Please visit your site in 24 hours from now and if after 24 hours <strong>{{hostname}}</strong> is not working then please view <Link>help article</Link> for more information and contact us.",
-    "domainValidationInfo": "DNS record not found, if you added the DNS record in last 24 hours then please wait sometime and try it again. Verifying your domain usually only takes a few hours, but in some cases can take up to 24-48 hours.",
+    "domainValidationInfo": "DNS record not found, if you added the DNS record in last 24 hours then please wait sometime and try it again. Validating a domain takes around a few hours, but in some cases can take up to 24-48 hours. <br/><br/>You don't have to keep coming to validate the DNS entry. We will continue validating the entry periodically, and when your custom domain is ready, we will email you.",
+    "domainValidationFailedForKnownProvider": "DNS record validation failed even after 48 hours. This is probably due to an incorrect configuration of DNS records with your provider. <br/><br/> Please <Login>log in</Login> to your {{dnsProvider,anyCase}} account and add the DNS record by copying the exact settings listed above. View <Link>help article</Link> for adding DNS record in {{dnsProvider,anyCase}}. <br/><br/> If you have verified the records configured with your provider and are still facing issues then contact our support.",
+    "domainValidationFailedForUnknownProvider": "DNS record validation failed even after 48 hours. This is probably due to an incorrect configuration of DNS records with your provider. <br/><br/> Go to your DNS provider and add the DNS record by copying the exact settings listed above. View <Link>help article</Link> to understand how to add a DNS record. <br/><br/> If you have verified the records configured with your provider and are still facing issues then contact our support.",
     "certificateProvisionFailed": "The DNS record was found but we are facing some issues with provisioning certificate for your domain. Please try again later.",
     "learnMoreMessage": "Learn about <button>how to setup custom domains</button>",
     "domainCreation": {
@@ -52,6 +53,8 @@
       "successMessage": "Custom domain successfully validated.",
       "buttonLabel": {
         "domain": "Validate",
+        "validateManually": "Validate manually",
+        "revalidate": "Retry Validation",
         "updateDomain": "Go back and use a subdomain"
       }
     },
@@ -74,6 +77,10 @@
     },
     "toolTips": {
       "customDomain": "Add domain of your choice in case you do not prefer to use the default neeto domain."
+    },
+    "noData": {
+      "title": "There are no custom domains to show.",
+      "helpText": "Here is how you can <helpLink>setting up a custom domain</helpLink>."
     }
   }
-}
+}

package/dist/CustomDomain.js

@@ -5,7 +5,7 @@ import { withT, useQueryParams } from '@bigbinary/neeto-commons-frontend/react-u
 import Container from '@bigbinary/neeto-molecules/Container';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import useMutationWithInvalidation from '@bigbinary/neeto-commons-frontend/react-utils/useMutationWithInvalidation';
 import axios from 'axios';
 import Alert from '@bigbinary/neetoui/Alert';
@@ -18,6 +18,7 @@ import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import Button from '@bigbinary/neetoui/Button';
 import Typography from '@bigbinary/neetoui/Typography';
 import Tag from '@bigbinary/neetoui/Tag';
+import NoData from '@bigbinary/neetoui/NoData';
 import Pane from '@bigbinary/neetoui/Pane';
 import Stepper from '@bigbinary/neetoui/Stepper';
 import Callout from '@bigbinary/neetoui/Callout';
@@ -130,7 +131,8 @@ var DeleteAlert = withT(function (_ref) {
 
 var STATUS_TAG_STYLES = {
   active: "success",
-  pending: "warning"
+  pending: "warning",
+  failed: "danger"
 };
 
 var Domain = withT(function (_ref) {
@@ -140,13 +142,7 @@ var Domain = withT(function (_ref) {
     customDomain = _ref.customDomain,
     openDeleteAlert = _ref.openDeleteAlert,
     helpDocUrl = _ref.helpDocUrl;
-  return /*#__PURE__*/jsx(CardLayout, {
-    actionBlock: !isCustomDomainAdded && /*#__PURE__*/jsx(Button, {
-      label: t("neetoCustomDomains.actions.add", {
-        what: t("neetoCustomDomains.customDomain", SINGULAR)
-      }),
-      onClick: openPane
-    }),
+  return isCustomDomainAdded ? /*#__PURE__*/jsx(CardLayout, {
     title: t("neetoCustomDomains.connectionTitle"),
     children: /*#__PURE__*/jsxs("div", {
       className: "space-y-1",
@@ -156,13 +152,13 @@ var Domain = withT(function (_ref) {
           className: "flex items-center space-x-2",
           children: [/*#__PURE__*/jsx(Typography, {
             style: "body2",
-            children: isCustomDomainAdded ? customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname : t("neetoCustomDomains.noDomainConnected")
-          }), isCustomDomainAdded && /*#__PURE__*/jsx(Tag, {
+            children: customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname
+          }), /*#__PURE__*/jsx(Tag, {
             "data-cy": "".concat(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__*/jsx(MoreDropdown, {
+        }), /*#__PURE__*/jsx(MoreDropdown, {
           dropdownButtonProps: {
             "data-testid": "nui-dropdown-icon-".concat(customDomain === null || customDomain === void 0 ? void 0 : customDomain.id)
           },
@@ -196,6 +192,28 @@ var Domain = withT(function (_ref) {
         })
       })]
     })
+  }) : /*#__PURE__*/jsx("div", {
+    className: "flex h-full w-full items-center justify-center",
+    children: /*#__PURE__*/jsx(NoData, {
+      className: "w-full",
+      title: t("neetoCustomDomains.noData.title"),
+      helpText: /*#__PURE__*/jsx(Trans, {
+        i18nKey: "neetoCustomDomains.noData.helpText",
+        components: {
+          helpLink: /*#__PURE__*/jsx(Button, {
+            href: helpDocUrl,
+            style: "link",
+            target: "_blank"
+          })
+        }
+      }),
+      primaryButtonProps: {
+        label: t("neetoCustomDomains.actions.add", {
+          what: t("neetoCustomDomains.customDomain", SINGULAR)
+        }),
+        onClick: openPane
+      }
+    })
   });
 });
 
@@ -206,6 +224,7 @@ var INITIAL_VALUES = {
 var CURRENT_STEP = {
   notAdded: 0,
   pending: 1,
+  failed: 1,
   active: 2
 };
 var STEPS = [{
@@ -741,7 +760,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,
@@ -752,6 +771,7 @@ var Validation = function Validation(_ref) {
     dnsTarget = customDomain.dnsTarget,
     status = customDomain.status,
     dnsProvider = customDomain.dnsProvider;
+  var queryClient = useQueryClient();
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     errorKey = _useState2[0],
@@ -763,6 +783,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"));
@@ -827,11 +850,62 @@ var Validation = function Validation(_ref) {
             x: '100%'
           }
         })
-      }), isNotEmpty(errorKey) && /*#__PURE__*/jsx(Callout, {
+      }), status === "failed" && /*#__PURE__*/jsx(Callout, {
+        style: STATUS_TAG_STYLES[status],
+        children: /*#__PURE__*/jsx(Typography, {
+          style: "body2",
+          children: dnsProvider !== "unknown" ? /*#__PURE__*/jsx(Trans, {
+            i18nKey: "neetoCustomDomains.domainValidationFailedForKnownProvider",
+            values: {
+              dnsProvider: dnsProviderInfo.name
+            },
+            components: {
+              Login: /*#__PURE__*/jsx(Button, {
+                href: dnsProviderInfo.loginUrl,
+                rel: "noreferrer",
+                style: "link",
+                target: "_blank"
+              }),
+              Link: /*#__PURE__*/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__*/jsx("br", {})
+            }
+          }) : /*#__PURE__*/jsx(Trans, {
+            i18nKey: "neetoCustomDomains.domainValidationFailedForUnknownProvider",
+            values: {
+              dnsProvider: dnsProviderInfo.name
+            },
+            components: {
+              Login: /*#__PURE__*/jsx(Button, {
+                href: dnsProviderInfo.loginUrl,
+                rel: "noreferrer",
+                style: "link",
+                target: "_blank"
+              }),
+              Link: /*#__PURE__*/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__*/jsx("br", {})
+            }
+          })
+        })
+      }), isNotEmpty(errorKey) && status === "pending" && /*#__PURE__*/jsx(Callout, {
         style: STATUS_TAG_STYLES[status],
         children: /*#__PURE__*/jsx(Typography, {
           style: "body2",
-          children: t(errorKey)
+          children: /*#__PURE__*/jsx(Trans, {
+            i18nKey: errorKey,
+            components: {
+              br: /*#__PURE__*/jsx("br", {})
+            }
+          })
         })
       })]
     }), /*#__PURE__*/jsx(Pane.Footer, {
@@ -840,7 +914,7 @@ var Validation = function Validation(_ref) {
         children: [/*#__PURE__*/jsx(Button, {
           "data-cy": "validate-domain-button",
           disabled: isValidating || isDomainValidated,
-          label: t("neetoCustomDomains.validation.buttonLabel.domain"),
+          label: status === "failed" ? t("neetoCustomDomains.validation.buttonLabel.revalidate") : isNotEmpty(errorKey) ? t("neetoCustomDomains.validation.buttonLabel.validateManually") : t("neetoCustomDomains.validation.buttonLabel.domain"),
           loading: isValidating,
           onClick: validateDomain
         }), /*#__PURE__*/jsx(Button, {
@@ -988,7 +1062,7 @@ var CustomDomain = function CustomDomain(_ref) {
         openPane: openPane,
         size: headerSize
       }), /*#__PURE__*/jsx("div", {
-        className: "flex w-full justify-center",
+        className: "flex w-full justify-center h-full",
         children: /*#__PURE__*/jsx(Domain, {
           customDomain: customDomain,
           helpDocUrl: helpDocUrl,