@bigbinary/neeto-custom-domains-frontend 2.1.0-beta2 → 2.1.0-beta3

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

@@ -34,7 +34,7 @@
     "label": "Domain name",
     "domainValidation": "Domain validation",
     "domainRedirection": "Domain redirection",
-    "cnameRecordTitle": " Add the DNS record to your DNS provider",
+    "cnameRecordTitle": "Set up DNS records for the domain {{domainName}} in your DNS provider",
     "cnameRecordInfo": "Go to your DNS provider and add the following DNS record by copying the exact settings listed below. View <Link>help article</Link> to understand how to add a DNS record.",
     "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. ",
@@ -49,9 +49,11 @@
       "existInProduction": "Custom domain <strong>{{hostname}}</strong> is already configured for the workspace <strong>{{workspace}}</strong>. Please <Link>login</Link> to that workspace and remove custom domain before trying to add the same domain here. please contact support if you are not part of this workspace."
     },
     "validation": {
+      "rootDomainUnsupported": "<Callout><span>{{providerName,anyCase}} doesn't allow you to set a CNAME record for the root domain. However, you can set up your custom domain for a subdomain. <br/><br/>This means that, if you try to set up <strong>https://{{rootDomain}}</strong>, {{provider,anyCase}} will not allow it. However, you can have a subdomain like <strong>https://schedule.{{rootDomain}}</strong>, and {{provider,anyCase}} will allow you to setup a custom domain.</span></Callout>",
       "successMessage": "Custom domain successfully validated.",
       "buttonLabel": {
-        "domain": "Validate"
+        "domain": "Validate",
+        "updateDomain": "Go back and use a subdomain"
       }
     },
     "status": {
@@ -75,4 +77,4 @@
       "customDomain": "Add domain of your choice in case you do not prefer to use the default neeto domain."
     }
   }
-}
+}

package/dist/CustomDomain.js

@@ -1,6 +1,6 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, memo } from 'react';
-import { isNotEmpty, isPresent, truncate, noop } from '@bigbinary/neeto-cist';
+import { isNotEmpty, isPresent, truncate, capitalize, noop } from '@bigbinary/neeto-cist';
 import { withT, useQueryParams } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Container from '@bigbinary/neeto-molecules/Container';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
@@ -27,8 +27,10 @@ import { t } from 'i18next';
 import * as Yup from 'yup';
 import Table from '@bigbinary/neetoui/Table';
 import Toastr from '@bigbinary/neetoui/Toastr';
+import { isNil } from 'ramda';
 import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
 import psl from 'psl';
+import Info from '@bigbinary/neeto-icons/Info';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
 import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 
@@ -332,6 +334,9 @@ var getDnsProviderData = function getDnsProviderData(dnsProvider) {
   var hostname = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
   return dnsProviderData(hostname)[dnsProvider];
 };
+var isRootLevelDomain = function isRootLevelDomain(hostname) {
+  return isNil(psl.parse(hostname).subdomain);
+};
 var commonColumnData = function commonColumnData(dnsProvider) {
   var dnsProviderInfo = getDnsProviderData(dnsProvider);
   return [{
@@ -402,7 +407,7 @@ var columnData = function columnData(dnsProvider) {
       });
     }
   };
-  var netoworkSolutionsRefersToColumn = {
+  var networkSolutionsRefersToColumn = {
     title: "Refers to",
     dataIndex: "proxy",
     width: "20%",
@@ -414,7 +419,7 @@ var columnData = function columnData(dnsProvider) {
     }
   };
   dnsProvider === "cloudflare" && commonColumns.splice(3, 0, cloudflareProxyColumn);
-  dnsProvider === "networksolutions" && commonColumns.splice(1, 0, netoworkSolutionsRefersToColumn);
+  dnsProvider === "networksolutions" && commonColumns.splice(1, 0, networkSolutionsRefersToColumn);
   return commonColumns;
 };
 var rowData = function rowData(dnsProvider, hostname, dnsTarget) {
@@ -452,7 +457,8 @@ var dnsProviderData = function dnsProviderData(hostname) {
           rootDomain: "@",
           subdomain: psl.parse(hostname).subdomain
         }
-      }
+      },
+      hasRootLevelDomainSupport: true
     },
     namecheap: {
       name: "Namecheap",
@@ -476,7 +482,8 @@ var dnsProviderData = function dnsProviderData(hostname) {
           rootDomain: "@",
           subdomain: psl.parse(hostname).subdomain
         }
-      }
+      },
+      hasRootLevelDomainSupport: true
     },
     hostinger: {
       name: "Hostinger",
@@ -500,7 +507,8 @@ var dnsProviderData = function dnsProviderData(hostname) {
           rootDomain: "@",
           subdomain: psl.parse(hostname).subdomain
         }
-      }
+      },
+      hasRootLevelDomainSupport: true
     },
     digitalocean: {
       name: "DigitalOcean",
@@ -524,7 +532,8 @@ var dnsProviderData = function dnsProviderData(hostname) {
           rootDomain: psl.parse(hostname).domain,
           subdomain: psl.parse(hostname).subdomain
         }
-      }
+      },
+      hasRootLevelDomainSupport: false
     },
     godaddy: {
       name: "GoDaddy",
@@ -548,7 +557,8 @@ var dnsProviderData = function dnsProviderData(hostname) {
           rootDomain: psl.parse(hostname).domain,
           subdomain: psl.parse(hostname).subdomain
         }
-      }
+      },
+      hasRootLevelDomainSupport: false
     },
     squarespace: {
       name: "Squarespace",
@@ -572,7 +582,8 @@ var dnsProviderData = function dnsProviderData(hostname) {
           rootDomain: "@",
           subdomain: psl.parse(hostname).subdomain
         }
-      }
+      },
+      hasRootLevelDomainSupport: true
     },
     wix: {
       name: "Wix",
@@ -597,7 +608,8 @@ var dnsProviderData = function dnsProviderData(hostname) {
           rootDomain: psl.parse(hostname).domain,
           subdomain: psl.parse(hostname).subdomain
         }
-      }
+      },
+      hasRootLevelDomainSupport: false
     },
     porkbun: {
       name: "Porkbun",
@@ -605,7 +617,7 @@ var dnsProviderData = function dnsProviderData(hostname) {
       header: {
         type: "Type",
         name: "Host",
-        target: "Answer",
+        target: "Answer/Value",
         ttl: "TTL"
       },
       values: {
@@ -621,7 +633,8 @@ var dnsProviderData = function dnsProviderData(hostname) {
           rootDomain: psl.parse(hostname).domain,
           subdomain: psl.parse(hostname).subdomain
         }
-      }
+      },
+      hasRootLevelDomainSupport: true
     },
     networksolutions: {
       name: "Network Solutions",
@@ -645,7 +658,8 @@ var dnsProviderData = function dnsProviderData(hostname) {
           rootDomain: "@",
           subdomain: psl.parse(hostname).subdomain
         }
-      }
+      },
+      hasRootLevelDomainSupport: true
     },
     aws: {
       name: "AWS",
@@ -669,9 +683,11 @@ var dnsProviderData = function dnsProviderData(hostname) {
           rootDomain: psl.parse(hostname).domain,
           subdomain: psl.parse(hostname).subdomain
         }
-      }
+      },
+      hasRootLevelDomainSupport: false
     },
     unknown: {
+      name: "this provider",
       loginUrl: "https://dash.cloudflare.com/login",
       header: {
         type: "Type",
@@ -692,11 +708,62 @@ var dnsProviderData = function dnsProviderData(hostname) {
           rootDomain: "@",
           subdomain: psl.parse(hostname).subdomain
         }
-      }
+      },
+      hasRootLevelDomainSupport: false
     }
   };
 };
 
+var RootLevelDomainFallback = function RootLevelDomainFallback(_ref) {
+  var _dnsProviderData, _dnsProviderData2;
+  var t = _ref.t,
+    dnsProvider = _ref.dnsProvider,
+    onClose = _ref.onClose,
+    url = _ref.url,
+    hostname = _ref.hostname;
+  var _useDeleteCustomDomai = useDeleteCustomDomain(url, {
+      onSettled: function onSettled() {
+      }
+    }),
+    deleteCustomDomain = _useDeleteCustomDomai.mutate,
+    isDeleting = _useDeleteCustomDomai.isPending;
+  return /*#__PURE__*/jsxs("div", {
+    children: [/*#__PURE__*/jsx(Pane.Body, {
+      children: /*#__PURE__*/jsx(Trans, {
+        i18nKey: "neetoCustomDomains.validation.rootDomainUnsupported",
+        values: {
+          provider: (_dnsProviderData = dnsProviderData(hostname)) === null || _dnsProviderData === void 0 || (_dnsProviderData = _dnsProviderData[dnsProvider]) === null || _dnsProviderData === void 0 ? void 0 : _dnsProviderData.name,
+          providerName: capitalize((_dnsProviderData2 = dnsProviderData(hostname)) === null || _dnsProviderData2 === void 0 || (_dnsProviderData2 = _dnsProviderData2[dnsProvider]) === null || _dnsProviderData2 === void 0 ? void 0 : _dnsProviderData2.name),
+          rootDomain: hostname
+        },
+        components: {
+          br: /*#__PURE__*/jsx("br", {}),
+          span: /*#__PURE__*/jsx("span", {}),
+          Callout: /*#__PURE__*/jsx(Callout, {
+            icon: Info,
+            style: "info"
+          })
+        }
+      })
+    }), /*#__PURE__*/jsx(Pane.Footer, {
+      children: /*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/*#__PURE__*/jsx(Button, {
+          "data-cy": "update-custom-domain-button",
+          label: t("neetoCustomDomains.validation.buttonLabel.updateDomain"),
+          onClick: deleteCustomDomain,
+          loading: isDeleting
+        }), /*#__PURE__*/jsx(Button, {
+          label: t("neetoCustomDomains.actions.cancel"),
+          style: "text",
+          onClick: onClose
+        })]
+      })
+    })]
+  });
+};
+var RootLevelDomainFallback$1 = withT(RootLevelDomainFallback);
+
 var Validation = function Validation(_ref) {
   var customDomain = _ref.customDomain,
     onClose = _ref.onClose,
@@ -714,6 +781,7 @@ var Validation = function Validation(_ref) {
     setErrorKey = _useState2[1];
   var isDomainValidated = status === "active";
   var dnsProviderInfo = getDnsProviderData(dnsProvider);
+  var domainType = isRootLevelDomain(hostname) ? "rootDomain" : "subdomain";
   var _useValidateDomain = useValidateDomain(url, {
       onError: function onError(_ref2) {
         var response = _ref2.response;
@@ -726,6 +794,14 @@ var Validation = function Validation(_ref) {
     }),
     validateDomain = _useValidateDomain.mutate,
     isValidating = _useValidateDomain.isPending;
+  if (isRootLevelDomain(hostname) && !dnsProviderInfo.hasRootLevelDomainSupport) {
+    return /*#__PURE__*/jsx(RootLevelDomainFallback$1, {
+      dnsProvider: dnsProvider,
+      onClose: onClose,
+      url: url,
+      hostname: hostname
+    });
+  }
   return /*#__PURE__*/jsxs("div", {
     children: [/*#__PURE__*/jsxs(Pane.Body, {
       className: "space-y-4",
@@ -734,7 +810,9 @@ var Validation = function Validation(_ref) {
         children: [/*#__PURE__*/jsx(Typography, {
           style: "h4",
           weight: "medium",
-          children: t("neetoCustomDomains.cnameRecordTitle")
+          children: t("neetoCustomDomains.cnameRecordTitle", {
+            domainName: hostname
+          })
         }), /*#__PURE__*/jsx(Typography, {
           style: "body2",
           children: dnsProvider !== "unknown" ? /*#__PURE__*/jsx(Trans, {
@@ -750,7 +828,7 @@ var Validation = function Validation(_ref) {
                 target: "_blank"
               }),
               Link: /*#__PURE__*/jsx(Button, {
-                href: dnsHelpDocs[dnsProvider],
+                href: dnsHelpDocs[dnsProvider][domainType],
                 rel: "noreferrer",
                 style: "link",
                 target: "_blank"
@@ -760,7 +838,7 @@ var Validation = function Validation(_ref) {
             i18nKey: "neetoCustomDomains.cnameRecordInfo",
             components: {
               Link: /*#__PURE__*/jsx(Button, {
-                href: dnsHelpDocs[dnsProvider],
+                href: dnsHelpDocs[dnsProvider][domainType],
                 rel: "noreferrer",
                 style: "link",
                 target: "_blank"