@bigbinary/neeto-custom-domains-frontend 3.1.13 → 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/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, {})
         });
       }