@bigbinary/neeto-custom-domains-frontend 3.1.12 → 3.1.14

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

@@ -30,12 +30,17 @@
     "delete": "Delete custom domain?",
     "search": "Search custom domains",
     "notFound": "There are no custom domains to show.",
+    "tooltipContent": "Delete the currently added custom domain to add a new one.",
     "placeholder": "{{subdomainPlaceholder,anyCase}}.yourbusiness.com",
-    "redirectionTooltipDescription": "Visiting {{fromDomain}} will redirect you to {{toDomain}}.",
+    "activeTooltipDescription": "Your custom domain is active.",
+    "pendingTooltipDescription": "Your custom domain is pending validation.",
+    "failedTooltipDescription": "Your custom domain is failed to validate. Please try again later.",
+    "redirectionTooltipDescription": "Your custom domain is active. Visiting <b>{{fromDomain}}</b> will redirect you to <b>{{toDomain}}</b>.",
     "cname": "CNAME",
     "label": "Domain name",
     "domainValidation": "Domain validation",
     "domainRedirection": "Domain redirection",
+    "domainValidationTitle": "Add the DNS record to your DNS provider",
     "cnameRecordTitle": "Setting up {{domainName}}",
     "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}}.",
@@ -90,8 +95,8 @@
       "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>add a custom domain</helpLink>."
+      "title": "No custom domain has been added.",
+      "helpText": "Add your custom domain to have a personalized URL."
     }
   }
 }

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

@@ -0,0 +1,97 @@
+{
+  "neetoCustomDomains": {
+    "common": {
+      "record": "רשומה",
+      "name": "שם",
+      "value": "ערך",
+      "status": "סטטוס",
+      "success": "הצלחה",
+      "pending": "ב待待"
+    },
+    "actions": {
+      "cancel": "ביטול",
+      "delete": "מחק",
+      "edit": "ערוך",
+      "continue": "המשך",
+      "done": "בוצע",
+      "add": "הוסף {{what}}"
+    },
+    "unexpectedError": "אירעה שגיאה בלתי צפויה. אנא נסה שוב מאוחר יותר.",
+    "customDomain_one": "דומיין מותאם אישית",
+    "customDomain_other": "דומיינים מותאמים אישית",
+    "customDomainWithCount_one": "{{count}} דומיין מותאם אישית",
+    "customDomainWithCount_other": "{{count}} דומיינים מותאמים אישית",
+    "settings": "הגדרות דומיין מותאם אישית",
+    "connectionTitle": "דומיין מותאם אישית נוסף",
+    "noDomainConnected": "לא נוסף דומיין מותאם אישית",
+    "readHelpArticle": "<Link>קרא עוד</Link> כדי ללמוד איך להוסיף דומיינים מותאמים אישית.",
+    "yourDomain": "הדומיין שלך",
+    "addNew": "הוסף דומיין מותאם אישית",
+    "delete": "למחוק דומיין מותאם אישית?",
+    "search": "חפש דומיינים מותאמים אישית",
+    "notFound": "אין דומיינים מותאמים אישית להציג.",
+    "placeholder": "{{subdomainPlaceholder,anyCase}}.yourbusiness.com",
+    "redirectionTooltipDescription": "ביקור ב{{fromDomain}} יופנה אותך ל{{toDomain}}.",
+    "cname": "CNAME",
+    "label": "שם הדומיין",
+    "domainValidation": "אימות דומיין",
+    "domainRedirection": "הפניית דומיין",
+    "cnameRecordTitle": "הגדרת {{domainName}}",
+    "cnameRecordInfo": "עבור לספק ה-DNS שלך והוסף את רשומת ה-DNS הבאה על ידי העתקת ההגדרות המדויקות המפורטות למטה. ראו <Link>מאמר עזרה</Link> כדי להבין איך להוסיף רשומת DNS.",
+    "dnsProviderCnameRecordInfo": "גילינו ש{{dnsProvider,anyCase}} הוא ספק ה-DNS שלך. אנא <Login>היכנס</Login> לחשבון שלך ב{{dnsProvider,anyCase}} ו הוסף את רשומת ה-DNS הבאה על ידי העתקת ההגדרות המדויקות המפורטות למטה. ראו <Link>מאמר עזרה</Link> כדי להוסיף רשומת DNS ב{{dnsProvider,anyCase}}.",
+    "proxyMessage": "אל תפעיל פרוקסי עבור הרשומה.",
+    "nameServerMessage": "ראו <Link>מאמר עזרה</Link> להוספת רשומת DNS ב{{dnsProvider,anyCase}}.",
+    "domainValidationInfo": "לא נמצאה רשומת DNS, אם הוספת את רשומת ה-DNS ב-24 השעות האחרונות אז אנא חכה מעט ונסה שוב. אימות דומיין לוקח כעוגיות שעות, אך בחלק מהמקרים יכול לקחת עד 24-48 שעות. <br/><br/> אין צורך להמשיך לבדוק את הרשומת DNS. נמשיך לאמת את הרשומה מדי פעם, וכאשר הדומיין המותאם אישית שלך יהיה מוכן, נשלח לך דוא\"ל.",
+    "domainValidationFailedForKnownProvider": "אימות הרשומת DNS נכשל גם לאחר 48 שעות. זה כנראה משום שההגדרה של רשומות ה-DNS שלך עם הספק היא שגויה. <br/><br/> אנא <Login>היכנס</Login> לחשבון שלך ב{{dnsProvider,anyCase}} והוסף את רשומת ה-DNS על ידי העתקת ההגדרות המדויקות המפורטות למעלה. ראו <Link>מאמר עזרה</Link> כדי להוסיף רשומת DNS ב{{dnsProvider,anyCase}}. <br/><br/> אם בדקת את הרשומות שהוגדרו עם הספק שלך ועדיין נתקלת בבעיות פנה לתמיכה שלנו.",
+    "domainValidationFailedForUnknownProvider": "אימות הרשומת DNS נכשל גם לאחר 48 שעות. זה כנראה משום שההגדרה של רשומות ה-DNS שלך עם הספק היא שגויה. <br/><br/> עבור לספק ה-DNS שלך והוסף את רשומת ה-DNS על ידי העתקת ההגדרות המדויקות המפורטות למעלה. ראו <Link>מאמר עזרה</Link> כדי להבין איך להוסיף רשומת DNS. <br/><br/> אם בדקת את הרשומות שהוגדרו עם הספק שלך ועדיין נתקלת בבעיות פנה לתמיכה שלנו.",
+    "certificateProvisionFailed": "הושגה רשומת ה-DNS אך אנו נתקים בעיות באספקת תעודה לדומיין שלך. אנא נסה שוב מאוחר יותר.",
+    "learnMoreMessage": "למד על <button>how to add custom domains</button>",
+    "jobInProgress": "הדומיין מאומת. אנא המתן רגע.",
+    "domainCreation": {
+      "existInStaging": "הדומיין המותאם אישית <strong>{{hostname}}</strong> כבר הוגדר לעבודה עם מקום עבודה אחר. אם אתה הבעלים החוקי, אנא פנה לתמיכה כדי להשיב את הדומיין המותאם אישית.",
+      "existInProduction": "הדומיין המותאם אישית <strong>{{hostname}}</strong> כבר הוגדר למקום העבודה <strong>{{workspace}}</strong>. אנא <Link>היכנס</Link> לאותו מקום עבודה והסר את הדומיין המותאם אישית לפני שננסה להוסיף את אותו דומיין כאן. אנא פנה לתמיכה אם אינך חלק מהמקום עבודה הזה.",
+      "rootDomainUnsupported": "{{dnsProvider,anyCase}} לא מאפשר להוסיף רשומת DNS עבור הדומיין השורש. עם זאת, אתה יכול להוסיף דומיין מותאם אישית עבור תת דומיין. <br/><br/> זה אומר, אם תנסה להוסיף <strong>https://{{hostname}}</strong>, {{dnsProvider,anyCase}} לא יאפשר זאת. עם זאת, אתה יכול לקבל תת דומיין כמו <strong>https://{{subdomainPlaceholder, anyCase}}.{{hostname}}</strong>, ו{{dnsProvider,anyCase}} יאשר לך להוסיף דומיין מותאם אישית."
+    },
+    "validation": {
+      "successMessage": "הדומיין המותאם אישית אומת בהצלחה.",
+      "strategy": {
+        "wwwToRoot": "הוסף <strong>www.{{hostname}}</strong> והפנה ל<strong>{{hostname}}</strong>.",
+        "rootToWww": "הוסף <strong>{{hostname}}</strong> והפנה ל<strong>www.{{hostname}}</strong>.",
+        "onlyAddRoot": "פשוט הוסף <strong>{{hostname}}</strong>.",
+        "recommended": "מומלץ",
+        "recommendedDescription": "שימוש בתת דומיין 'www' מסייע בנהלים גמישים יותר ומבטיח שהעוגיות שנקבעות באתר הזה לא יישתפו עם תתי דומיינים אחרים."
+      },
+      "buttonLabel": {
+        "domain": "אמת",
+        "validateManually": "אמת ידנית",
+        "revalidate": "נסה לאמת שוב",
+        "updateDomain": "חזור והשתמש בתת דומיין",
+        "iHaveAddedTheRecords": "הוספתי את הרשומות"
+      }
+    },
+    "status": {
+      "domain": {
+        "active": "פעיל",
+        "pending": "בהמתנה",
+        "failed": "נכשל"
+      },
+      "cname": {
+        "active": "הדומיין הופנה",
+        "pendingCnameValidation": "הפניית הדומיין בהמתנה"
+      },
+      "failed": "נכשל"
+    },
+    "alertMessage": "אתה מוחק לצמיתות את הדומיין המותאם אישית <strong>{{hostname}}</strong>. זה לא ניתן לביטול.",
+    "formikValidation": {
+      "required": "הדומיין נדרש",
+      "valid": "הזן דומיין או URL תקף"
+    },
+    "toolTips": {
+      "customDomain": "הוסף דומיין לפי בחירתך במקרה שאינך מעדיף להשתמש בדומיין ברירת המחדל של Neeto."
+    },
+    "noData": {
+      "title": "אין דומיינים מותאמים אישית להציג.",
+      "helpText": "הנה איך אתה יכול <helpLink>להוסיף דומיין מותאם אישית</helpLink>."
+    }
+  }
+}

package/dist/CustomDomain.js

@@ -11,16 +11,17 @@ import axios from 'axios';
 import Alert from '@bigbinary/neetoui/Alert';
 import { Trans, useTranslation } from 'react-i18next';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
 import { SINGULAR } from '@bigbinary/neeto-commons-frontend/constants';
-import { hyphenize } from '@bigbinary/neeto-commons-frontend/utils/general';
-import Redirection from '@bigbinary/neeto-icons/Redirection';
+import CustomDomain$1 from '@bigbinary/neeto-icons/CustomDomain';
+import ExternalLink from '@bigbinary/neeto-icons/ExternalLink';
 import CardLayout from '@bigbinary/neeto-molecules/CardLayout';
 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 Tooltip from '@bigbinary/neetoui/Tooltip';
+import CheckCircle from '@bigbinary/neeto-icons/CheckCircle';
+import Warning2 from '@bigbinary/neeto-icons/Warning2';
+import CloseCircle from '@bigbinary/neeto-icons/CloseCircle';
 import Pane from '@bigbinary/neetoui/Pane';
 import Stepper from '@bigbinary/neetoui/Stepper';
 import Callout from '@bigbinary/neetoui/Callout';
@@ -29,6 +30,8 @@ import Input from '@bigbinary/neetoui/formik/Input';
 import Form from '@bigbinary/neetoui/formik/Form';
 import Radio from '@bigbinary/neetoui/formik/Radio';
 import { t as t$1 } from 'i18next';
+import Tag from '@bigbinary/neetoui/Tag';
+import Tooltip from '@bigbinary/neetoui/Tooltip';
 import psl from 'psl';
 import { isNil } from 'ramda';
 import * as Yup from 'yup';
@@ -142,13 +145,17 @@ var STATUS_TAG_STYLES = {
   pending: "warning",
   failed: "danger"
 };
+var STATUS_ICON = {
+  active: CheckCircle,
+  pending: Warning2,
+  failed: CloseCircle
+};
 
 var Domain = function Domain(_ref) {
   var isCustomDomainAdded = _ref.isCustomDomainAdded,
     openPane = _ref.openPane,
     customDomains = _ref.customDomains,
     openDeleteAlert = _ref.openDeleteAlert,
-    helpDocUrl = _ref.helpDocUrl,
     setSelectedCustomDomain = _ref.setSelectedCustomDomain;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -161,101 +168,131 @@ var Domain = function Domain(_ref) {
     openDeleteAlert();
   };
   return isCustomDomainAdded ? /*#__PURE__*/jsx(CardLayout, {
-    title: t("neetoCustomDomains.connectionTitle"),
-    children: /*#__PURE__*/jsxs("div", {
-      className: "space-y-1",
-      children: [customDomains === null || customDomains === void 0 ? void 0 : customDomains.map(function (customDomain, index) {
-        var _customDomain$redirec, _customDomain$redirec2;
+    actionBlock: /*#__PURE__*/jsx(Button, {
+      disabled: isCustomDomainAdded,
+      label: t("neetoCustomDomains.actions.add", {
+        what: t("neetoCustomDomains.customDomain", SINGULAR)
+      }),
+      tooltipProps: {
+        content: t("neetoCustomDomains.tooltipContent")
+      },
+      onClick: openPane
+    }),
+    children: /*#__PURE__*/jsx("div", {
+      className: "flex flex-col gap-y-6 divide-y divide-gray-200",
+      children: customDomains === null || customDomains === void 0 ? void 0 : customDomains.map(function (customDomain, index) {
+        var _customDomain$redirec;
         return /*#__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",
+          className: "flex items-center gap-x-3 pb-6 last:pb-0",
           "data-cy": "custom-domain-item",
-          children: [/*#__PURE__*/jsxs("div", {
-            className: "flex items-center space-x-2",
-            children: [/*#__PURE__*/jsx(Typography, {
-              "data-cy": "custom-domain-host-name",
-              style: "body2",
-              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))
-            })]
+          children: [/*#__PURE__*/jsx("div", {
+            className: classNames("neeto-ui-rounded-lg flex items-center justify-center p-2", {
+              "neeto-ui-bg-success-100": (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "active",
+              "neeto-ui-bg-warning-100": (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "pending",
+              "neeto-ui-bg-error-100": (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "failed"
+            }),
+            children: function () {
+              var IconComponent = STATUS_ICON[customDomain === null || customDomain === void 0 ? void 0 : customDomain.status] || CustomDomain$1;
+              return /*#__PURE__*/jsx(IconComponent, {
+                size: 32,
+                className: classNames({
+                  "neeto-ui-text-success-800": (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "active",
+                  "neeto-ui-text-warning-800": (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "pending",
+                  "neeto-ui-text-error-800": (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "failed"
+                })
+              });
+            }()
           }), /*#__PURE__*/jsxs("div", {
-            className: "flex items-center gap-2",
-            children: [(customDomain === null || customDomain === void 0 ? void 0 : customDomain.redirection) && /*#__PURE__*/jsx(Tooltip, {
-              content: t("neetoCustomDomains.redirectionTooltipDescription", {
-                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
-              }),
-              children: /*#__PURE__*/jsx(Tag, {
-                icon: Redirection,
-                label: customDomain === null || customDomain === void 0 || (_customDomain$redirec2 = customDomain.redirection) === null || _customDomain$redirec2 === void 0 ? void 0 : _customDomain$redirec2.toHostname,
-                style: "secondary"
-              })
-            }), /*#__PURE__*/jsx(MoreDropdown, {
-              dropdownButtonProps: {
-                "data-testid": "nui-dropdown-icon-".concat(customDomain === null || customDomain === void 0 ? void 0 : customDomain.id),
-                "data-cy": "custom-domains-more-dropdown-button"
-              },
-              dropdownProps: {
-                position: "bottom-end",
-                strategy: "fixed",
-                autoWidth: true
-              },
-              menuItems: [{
-                label: t("neetoCustomDomains.actions.edit"),
+            className: "flex flex-col gap-y-1",
+            children: [/*#__PURE__*/jsxs("div", {
+              className: "flex items-center gap-x-3",
+              children: [/*#__PURE__*/jsxs("div", {
+                className: "hover:neeto-ui-text-accent-800 flex cursor-pointer items-center gap-x-2",
                 onClick: function onClick() {
-                  return handleEditClick(customDomain);
+                  return window.open("https://".concat(customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname), "_blank", "noopener,noreferrer");
                 },
-                key: "edit-custom-domain-button",
-                "data-cy": "edit-custom-domain-button"
-              }, {
-                label: t("neetoCustomDomains.actions.delete"),
-                onClick: function onClick() {
-                  return handleDeleteClick(customDomain);
+                children: [/*#__PURE__*/jsx(Typography, {
+                  className: "hover:neeto-ui-text-accent-800",
+                  style: "h4",
+                  weight: "medium",
+                  children: customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname
+                }), (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "active" && /*#__PURE__*/jsx(ExternalLink, {
+                  size: 16
+                })]
+              }), /*#__PURE__*/jsx(MoreDropdown, {
+                dropdownButtonProps: {
+                  "data-testid": "nui-dropdown-icon-".concat(customDomain === null || customDomain === void 0 ? void 0 : customDomain.id),
+                  "data-cy": "custom-domains-more-dropdown-button",
+                  isRounded: true,
+                  style: "tertiary",
+                  size: "small"
+                },
+                dropdownProps: {
+                  position: "bottom-end",
+                  strategy: "fixed",
+                  autoWidth: true
+                },
+                menuItems: [{
+                  label: t("neetoCustomDomains.actions.edit"),
+                  onClick: function onClick() {
+                    return handleEditClick(customDomain);
+                  },
+                  key: "edit-custom-domain-button",
+                  "data-cy": "edit-custom-domain-button"
+                }, {
+                  label: t("neetoCustomDomains.actions.delete"),
+                  onClick: function onClick() {
+                    return handleDeleteClick(customDomain);
+                  },
+                  key: "delete-custom-domain",
+                  "data-cy": "delete-custom-domain-button"
+                }]
+              })]
+            }), /*#__PURE__*/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__*/jsx(Trans, {
+                components: {
+                  b: /*#__PURE__*/jsx("b", {})
                 },
-                key: "delete-custom-domain",
-                "data-cy": "delete-custom-domain-button"
-              }]
+                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")]
             })]
           })]
         }, index);
-      }), /*#__PURE__*/jsx(Typography, {
-        style: "body2",
-        children: /*#__PURE__*/jsx(Trans, {
-          i18nKey: "neetoCustomDomains.readHelpArticle",
-          components: {
-            Link: /*#__PURE__*/jsx(Button, {
-              href: helpDocUrl,
-              rel: "noreferrer",
-              style: "link",
-              target: "_blank"
-            })
-          }
-        })
-      })]
+      })
     })
-  }) : /*#__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"
-          })
-        }
+  }) : /*#__PURE__*/jsx(CardLayout, {
+    actionBlock: /*#__PURE__*/jsx(Button, {
+      label: t("neetoCustomDomains.actions.add", {
+        what: t("neetoCustomDomains.customDomain", SINGULAR)
       }),
-      primaryButtonProps: {
-        label: t("neetoCustomDomains.actions.add", {
-          what: t("neetoCustomDomains.customDomain", SINGULAR)
-        }),
-        onClick: openPane
-      }
+      onClick: openPane
+    }),
+    children: /*#__PURE__*/jsxs("div", {
+      className: "flex h-full w-full items-center gap-x-3",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "neeto-ui-bg-gray-100 neeto-ui-rounded-lg flex items-center justify-center p-2",
+        children: /*#__PURE__*/jsx(CustomDomain$1, {
+          className: "neeto-ui-text-gray-600",
+          size: 32
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex flex-col gap-y-1",
+        children: [/*#__PURE__*/jsx(Typography, {
+          style: "h4",
+          weight: "medium",
+          children: t("neetoCustomDomains.noData.title")
+        }), /*#__PURE__*/jsx(Typography, {
+          className: "neeto-ui-text-gray-600",
+          style: "body2",
+          children: t("neetoCustomDomains.noData.helpText")
+        })]
+      })]
     })
   });
 };
@@ -1055,21 +1092,21 @@ var Validation = function Validation(_ref) {
     var _dnsHelpDocs$dnsProvi, _dnsHelpDocs$dnsProvi2, _dnsHelpDocs$unknown;
     var children = _ref3.children;
     return /*#__PURE__*/jsx(Button, {
+      label: children,
       rel: "noreferrer",
       style: "link",
       target: "_blank",
-      href: (_dnsHelpDocs$dnsProvi = (_dnsHelpDocs$dnsProvi2 = dnsHelpDocs[dnsProvider]) === null || _dnsHelpDocs$dnsProvi2 === void 0 ? void 0 : _dnsHelpDocs$dnsProvi2[domainType]) !== null && _dnsHelpDocs$dnsProvi !== void 0 ? _dnsHelpDocs$dnsProvi : (_dnsHelpDocs$unknown = dnsHelpDocs.unknown) === null || _dnsHelpDocs$unknown === void 0 ? void 0 : _dnsHelpDocs$unknown[domainType],
-      label: children
+      href: (_dnsHelpDocs$dnsProvi = (_dnsHelpDocs$dnsProvi2 = dnsHelpDocs[dnsProvider]) === null || _dnsHelpDocs$dnsProvi2 === void 0 ? void 0 : _dnsHelpDocs$dnsProvi2[domainType]) !== null && _dnsHelpDocs$dnsProvi !== void 0 ? _dnsHelpDocs$dnsProvi : (_dnsHelpDocs$unknown = dnsHelpDocs.unknown) === null || _dnsHelpDocs$unknown === void 0 ? void 0 : _dnsHelpDocs$unknown[domainType]
     });
   };
   var LoginLink = function LoginLink(_ref4) {
     var children = _ref4.children;
     return /*#__PURE__*/jsx(Button, {
       href: dnsProviderInfo === null || dnsProviderInfo === void 0 ? void 0 : dnsProviderInfo.loginUrl,
+      label: children,
       rel: "noreferrer",
       style: "link",
-      target: "_blank",
-      label: children
+      target: "_blank"
     });
   };
   var components = {
@@ -1080,21 +1117,25 @@ var Validation = function Validation(_ref) {
   return /*#__PURE__*/jsxs("div", {
     children: [/*#__PURE__*/jsxs(Pane.Body, {
       className: "space-y-4",
-      children: [/*#__PURE__*/jsx("div", {
+      children: [/*#__PURE__*/jsxs("div", {
         className: "space-y-2",
-        children: /*#__PURE__*/jsx(Typography, {
+        children: [/*#__PURE__*/jsx(Typography, {
+          style: "h4",
+          weight: "medium",
+          children: t("neetoCustomDomains.domainValidationTitle")
+        }), /*#__PURE__*/jsx(Typography, {
           style: "body2",
           children: dnsProvider !== "unknown" ? /*#__PURE__*/jsx(Trans, {
+            components: components,
             i18nKey: "neetoCustomDomains.dnsProviderCnameRecordInfo",
             values: {
               dnsProvider: dnsProviderInfo === null || dnsProviderInfo === void 0 ? void 0 : dnsProviderInfo.name
-            },
-            components: components
+            }
           }) : /*#__PURE__*/jsx(Trans, {
-            i18nKey: "neetoCustomDomains.cnameRecordInfo",
-            components: components
+            components: components,
+            i18nKey: "neetoCustomDomains.cnameRecordInfo"
           })
-        })
+        })]
       }), /*#__PURE__*/jsx("div", {
         className: "space-y-1",
         children: /*#__PURE__*/jsx(Table, {
@@ -1117,17 +1158,17 @@ var Validation = function Validation(_ref) {
         children: /*#__PURE__*/jsx(Typography, {
           style: "body2",
           children: dnsProvider !== "unknown" ? /*#__PURE__*/jsx(Trans, {
+            components: components,
             i18nKey: "neetoCustomDomains.domainValidationFailedForKnownProvider",
             values: {
               dnsProvider: dnsProviderInfo.name
-            },
-            components: components
+            }
           }) : /*#__PURE__*/jsx(Trans, {
+            components: components,
             i18nKey: "neetoCustomDomains.domainValidationFailedForUnknownProvider",
             values: {
               dnsProvider: dnsProviderInfo.name
-            },
-            components: components
+            }
           })
         })
       }), isNotEmpty(errorKey) && status === "pending" && /*#__PURE__*/jsx(Callout, {
@@ -1150,8 +1191,8 @@ var Validation = function Validation(_ref) {
           label: t("neetoCustomDomains.validation.buttonLabel.iHaveAddedTheRecords"),
           onClick: validateDomain
         }), /*#__PURE__*/jsx(Button, {
-          label: t("neetoCustomDomains.actions.cancel"),
           "data-cy": "cancel-button",
+          label: t("neetoCustomDomains.actions.cancel"),
           style: "text",
           onClick: onClose
         })]
@@ -1209,18 +1250,12 @@ var DomainPane = function DomainPane(_ref) {
         style: "h2",
         children: t("neetoCustomDomains.addNew")
       }), /*#__PURE__*/jsx("div", {
-        className: "-ml-2 neeto_custom_domain_stepper",
+        className: "neeto_custom_domain_stepper -ml-2",
         children: /*#__PURE__*/jsx(Stepper, {
           activeIndex: CURRENT_STEP[getCurrentStep(primaryDomain)],
           setActiveIndex: noop,
           steps: STEPS
         })
-      }), primaryDomain && /*#__PURE__*/jsx(Typography, {
-        style: "h4",
-        weight: "medium",
-        children: t("neetoCustomDomains.cnameRecordTitle", {
-          domainName: primaryDomain.hostname
-        })
       })]
     }), function (_primaryDomain$hostna) {
       var currentStep = getCurrentStep(primaryDomain);
@@ -1229,7 +1264,7 @@ var DomainPane = function DomainPane(_ref) {
       var shouldShowLoader = isLoading || isStrategyStep && isSubdomain;
       if (shouldShowLoader) {
         return /*#__PURE__*/jsx("div", {
-          className: "flex justify-center items-center grow w-full",
+          className: "flex w-full grow items-center justify-center",
           children: /*#__PURE__*/jsx(Spinner, {})
         });
       }