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

package/README.md

@@ -107,23 +107,66 @@ const CustomDomain = () => {
     },
   ];
 
-  const title = (
-    <div className="flex items-center gap-x-2">
-      {t("neetoCustomDomains.customDomain", SINGULAR)}
-      <HelpPopover
-        description={t("neetoCustomDomains.toolTips.customDomain")}
-        helpLinkProps={{ href: CUSTOM_DOMAIN_HELP_DOC_URL }}
-        popoverProps={{ position: "top" }}
-        title={t("neetoCustomDomains.customDomain", SINGULAR)}
-      />
-    </div>
-  );
+  const CUSTOM_DOMAIN_DNS_PROVIDER_HELP_DOCS = {
+  cloudflare: {
+    subdomain: `${PERMANENT_URL}/permanent-url-1`,
+    rootDomain: `${PERMANENT_URL}/permanent-url-2`,
+  },
+  unknown: {
+    subdomain: `${PERMANENT_URL}/permanent-url-3`,
+    rootDomain: `${PERMANENT_URL}/permanent-url-4`,
+  },
+  namecheap: {
+    subdomain: `${PERMANENT_URL}/permanent-url-5`,
+    rootDomain: `${PERMANENT_URL}/permanent-url-6`,
+  },
+  hostinger: {
+    subdomain: `${PERMANENT_URL}/permanent-url-7`,
+    rootDomain: `${PERMANENT_URL}/permanent-url-8`,
+  },
+  digitalocean: {
+    subdomain: `${PERMANENT_URL}/permanent-url-9`,
+    rootDomain: `${PERMANENT_URL}/permanent-url-10`,
+  },
+  godaddy: {
+    subdomain: `${PERMANENT_URL}/permanent-url-11`,
+    rootDomain: `${PERMANENT_URL}/permanent-url-12`,
+  },
+  squarespace: {
+    subdomain: `${PERMANENT_URL}/permanent-url-13`,
+    rootDomain: `${PERMANENT_URL}/permanent-url-14`,
+  },
+  wix: {
+    subdomain: `${PERMANENT_URL}/permanent-url-15`,
+    rootDomain: `${PERMANENT_URL}/permanent-url-16`,
+  },
+  porkbun: {
+    subdomain: `${PERMANENT_URL}/permanent-url-17`,
+    rootDomain: `${PERMANENT_URL}/permanent-url-18`,
+  },
+  networksolutions: {
+    subdomain: `${PERMANENT_URL}/permanent-url-19`,
+    rootDomain: `${PERMANENT_URL}/permanent-url-20`,
+  },
+  aws: {
+    subdomain: `${PERMANENT_URL}/permanent-url-21`,
+    rootDomain: `${PERMANENT_URL}/permanent-url-22`,
+  },
+  strato: {
+    subdomain: `${PERMANENT_URL}/permanent-url-23`,
+    rootDomain: `${PERMANENT_URL}/permanent-url-24`,
+  },
+}
 
   return (
     <div className="w-full">
       <NeetoCustomDomainDashboard
-        headerProps={{ breadcrumbs, title }}
-        url={`${BASE_API_V1_URL}/custom_domain`}
+        appName="appname" // Eg: `cal`, `form`
+        dnsHelpDocs={CUSTOM_DOMAIN_DNS_PROVIDER_HELP_DOCS}
+        helpDocUrl={CUSTOM_DOMAIN_HELP_DOC_URL}
+        subdomainPlaceholder="subdomain-placeholder" // Eg: `schedule` for NeetoCal and `form` for NeetoForm
+        url={`${BASE_URL}/custom-domains`}
+        { ...{ breadcrumbs } }
       />
     </div>
   );
@@ -153,6 +196,7 @@ Consult the
 guide for details on how to publish.
 
 ## Integrations
+
 - NeetoCal
 - NeetoForm
 - NeetoKb

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

@@ -23,7 +23,7 @@
     "settings": "Custom domain settings",
     "connectionTitle": "Connected custom domain",
     "noDomainConnected": "No custom domain connected",
-    "readHelpArticle": "<Link>Read more</Link> to learn more about setting up custom domain",
+    "readHelpArticle": "<Link>Read more</Link> to learn how to set up custom domains.",
     "yourDomain": "Your domain",
     "addNew": "Add custom domain",
     "delete": "Delete custom domain?",
@@ -40,14 +40,13 @@
     "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": "CNAME record not found, if you added CNAME 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.",
-    "certificateProvisionFailed": "CNAME record found but we are facing some issues with provisioning certificate for your domain. Please try again",
+    "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.",
+    "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>",
-    "cnameAdded": "I have added redirection CNAME record",
     "domainCreation": {
       "existInStaging": "Custom domain <strong>{{hostname}}</strong> is already configured for another workspace. If you are the legitimate owner, please contact support to retrieve the custom domain.",
       "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.",
-      "rootDomainUnsupported": "{{dnsProvider,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://{{hostname}}</strong>, {{dnsProvider,anyCase}} will not allow it. However, you can have a subdomain like <strong>https://{{subdomainPlaceholder, anyCase}}.{{hostname}}</strong>, and {{dnsProvider,anyCase}} will allow you to setup a custom domain."
+      "rootDomainUnsupported": "{{dnsProvider,anyCase}} doesn't allow you to add a DNS 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://{{hostname}}</strong>, {{dnsProvider,anyCase}} will not allow it. However, you can have a subdomain like <strong>https://{{subdomainPlaceholder, anyCase}}.{{hostname}}</strong>, and {{dnsProvider,anyCase}} will allow you to setup a custom domain."
     },
     "validation": {
       "successMessage": "Custom domain successfully validated.",
@@ -77,4 +76,4 @@
       "customDomain": "Add domain of your choice in case you do not prefer to use the default neeto domain."
     }
   }
-}
+}

package/dist/CustomDomain.js

@@ -12,6 +12,7 @@ import Alert from '@bigbinary/neetoui/Alert';
 import { Trans, useTranslation } from 'react-i18next';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { SINGULAR } from '@bigbinary/neeto-commons-frontend/constants';
+import CardLayout from '@bigbinary/neeto-molecules/CardLayout';
 import { hyphenize } from '@bigbinary/neeto-commons-frontend/utils/general';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import Button from '@bigbinary/neetoui/Button';
@@ -31,7 +32,6 @@ import { isNil } from 'ramda';
 import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
 import psl from 'psl';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
-import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 
 var getUrlwithId = function getUrlwithId(url, id) {
   return id ? "".concat(url, "/").concat(id) : url;
@@ -140,12 +140,15 @@ var Domain = withT(function (_ref) {
     customDomain = _ref.customDomain,
     openDeleteAlert = _ref.openDeleteAlert,
     helpDocUrl = _ref.helpDocUrl;
-  return /*#__PURE__*/jsxs("div", {
-    className: "neeto-ui-border-gray-300 neeto-ui-rounded w-1/2 space-y-4 border p-6",
-    children: [/*#__PURE__*/jsx(Typography, {
-      style: "h2",
-      children: t("neetoCustomDomains.connectionTitle")
-    }), /*#__PURE__*/jsxs("div", {
+  return /*#__PURE__*/jsx(CardLayout, {
+    actionBlock: !isCustomDomainAdded && /*#__PURE__*/jsx(Button, {
+      label: t("neetoCustomDomains.actions.add", {
+        what: t("neetoCustomDomains.customDomain", SINGULAR)
+      }),
+      onClick: openPane
+    }),
+    title: t("neetoCustomDomains.connectionTitle"),
+    children: /*#__PURE__*/jsxs("div", {
       className: "space-y-1",
       children: [/*#__PURE__*/jsxs("div", {
         className: "neeto-ui-border-gray-200 neeto-ui-rounded neeto-ui-bg-gray-50 flex items-center justify-between border p-2",
@@ -179,7 +182,7 @@ var Domain = withT(function (_ref) {
           }]
         })]
       }), /*#__PURE__*/jsx(Typography, {
-        style: "body3",
+        style: "body2",
         children: /*#__PURE__*/jsx(Trans, {
           i18nKey: "neetoCustomDomains.readHelpArticle",
           components: {
@@ -192,12 +195,7 @@ var Domain = withT(function (_ref) {
           }
         })
       })]
-    }), !isCustomDomainAdded && /*#__PURE__*/jsx(Button, {
-      label: t("neetoCustomDomains.actions.add", {
-        what: t("neetoCustomDomains.customDomain", SINGULAR)
-      }),
-      onClick: openPane
-    })]
+    })
   });
 });
 
@@ -911,27 +909,18 @@ var Header = function Header(_ref) {
     size = _ref$size === void 0 ? "large" : _ref$size;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var title = /*#__PURE__*/jsxs("div", {
-    className: "flex items-center gap-x-2",
-    children: [/*#__PURE__*/jsx(Typography, {
-      style: "h2",
-      children: t("neetoCustomDomains.customDomain", SINGULAR)
-    }), /*#__PURE__*/jsx(HelpPopover, {
-      description: t("neetoCustomDomains.toolTips.customDomain"),
-      helpLinkProps: {
-        href: helpDocUrl
-      },
-      popoverProps: {
-        position: "top"
-      },
-      title: t("neetoCustomDomains.customDomain", SINGULAR)
-    })]
-  });
   return /*#__PURE__*/jsx(NeetoHeader, {
     breadcrumbs: breadcrumbs,
     size: size,
-    title: title,
     "data-testid": "custom-domain-header",
+    title: t("neetoCustomDomains.customDomain", SINGULAR),
+    titleHelpPopoverProps: {
+      title: t("neetoCustomDomains.customDomain", SINGULAR),
+      description: t("neetoCustomDomains.toolTips.customDomain"),
+      helpLinkProps: {
+        href: helpDocUrl
+      }
+    },
     actionBlock: /*#__PURE__*/jsx(Button, {
       "data-cy": "add-new-custom-domain-button",
       disabled: isCustomDomainAdded,
@@ -999,7 +988,7 @@ var CustomDomain = function CustomDomain(_ref) {
         openPane: openPane,
         size: headerSize
       }), /*#__PURE__*/jsx("div", {
-        className: "mt-10 flex w-full justify-center",
+        className: "flex w-full justify-center",
         children: /*#__PURE__*/jsx(Domain, {
           customDomain: customDomain,
           helpDocUrl: helpDocUrl,