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

package/dist/cjs/CustomDomain.js

@@ -13,16 +13,17 @@ var axios = require('axios');
 var Alert = require('@bigbinary/neetoui/Alert');
 var reactI18next = require('react-i18next');
 var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
-var general = require('@bigbinary/neeto-commons-frontend/utils/general');
-var Redirection = require('@bigbinary/neeto-icons/Redirection');
+var CustomDomain$1 = require('@bigbinary/neeto-icons/CustomDomain');
+var ExternalLink = require('@bigbinary/neeto-icons/ExternalLink');
 var CardLayout = require('@bigbinary/neeto-molecules/CardLayout');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var Button = require('@bigbinary/neetoui/Button');
 var Typography = require('@bigbinary/neetoui/Typography');
-var Tag = require('@bigbinary/neetoui/Tag');
-var NoData = require('@bigbinary/neetoui/NoData');
-var Tooltip = require('@bigbinary/neetoui/Tooltip');
+var CheckCircle = require('@bigbinary/neeto-icons/CheckCircle');
+var Warning2 = require('@bigbinary/neeto-icons/Warning2');
+var CloseCircle = require('@bigbinary/neeto-icons/CloseCircle');
 var Pane = require('@bigbinary/neetoui/Pane');
 var Stepper = require('@bigbinary/neetoui/Stepper');
 var Callout = require('@bigbinary/neetoui/Callout');
@@ -31,6 +32,8 @@ var Input = require('@bigbinary/neetoui/formik/Input');
 var Form = require('@bigbinary/neetoui/formik/Form');
 var Radio = require('@bigbinary/neetoui/formik/Radio');
 var i18next = require('i18next');
+var Tag = require('@bigbinary/neetoui/Tag');
+var Tooltip = require('@bigbinary/neetoui/Tooltip');
 var psl = require('psl');
 var ramda = require('ramda');
 var Yup = require('yup');
@@ -163,13 +166,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 = reactI18next.useTranslation(),
     t = _useTranslation.t;
@@ -182,101 +189,131 @@ var Domain = function Domain(_ref) {
     openDeleteAlert();
   };
   return isCustomDomainAdded ? /*#__PURE__*/jsxRuntime.jsx(CardLayout, {
-    title: t("neetoCustomDomains.connectionTitle"),
-    children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Button, {
+      disabled: isCustomDomainAdded,
+      label: t("neetoCustomDomains.actions.add", {
+        what: t("neetoCustomDomains.customDomain", constants.SINGULAR)
+      }),
+      tooltipProps: {
+        content: t("neetoCustomDomains.tooltipContent")
+      },
+      onClick: openPane
+    }),
+    children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
-            className: "flex items-center space-x-2",
-            children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-              "data-cy": "custom-domain-host-name",
-              style: "body2",
-              children: customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname
-            }), /*#__PURE__*/jsxRuntime.jsx(Tag, {
-              "data-cy": "".concat(general.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__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
-            className: "flex items-center gap-2",
-            children: [(customDomain === null || customDomain === void 0 ? void 0 : customDomain.redirection) && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
+              className: "flex items-center gap-x-3",
+              children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsx(ExternalLink, {
+                  size: 16
+                })]
+              }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsx(reactI18next.Trans, {
+                components: {
+                  b: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Typography, {
-        style: "body2",
-        children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
-          i18nKey: "neetoCustomDomains.readHelpArticle",
-          components: {
-            Link: /*#__PURE__*/jsxRuntime.jsx(Button, {
-              href: helpDocUrl,
-              rel: "noreferrer",
-              style: "link",
-              target: "_blank"
-            })
-          }
-        })
-      })]
+      })
     })
-  }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "flex h-full w-full items-center justify-center",
-    children: /*#__PURE__*/jsxRuntime.jsx(NoData, {
-      className: "w-full",
-      title: t("neetoCustomDomains.noData.title"),
-      helpText: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
-        i18nKey: "neetoCustomDomains.noData.helpText",
-        components: {
-          helpLink: /*#__PURE__*/jsxRuntime.jsx(Button, {
-            href: helpDocUrl,
-            style: "link",
-            target: "_blank"
-          })
-        }
+  }) : /*#__PURE__*/jsxRuntime.jsx(CardLayout, {
+    actionBlock: /*#__PURE__*/jsxRuntime.jsx(Button, {
+      label: t("neetoCustomDomains.actions.add", {
+        what: t("neetoCustomDomains.customDomain", constants.SINGULAR)
       }),
-      primaryButtonProps: {
-        label: t("neetoCustomDomains.actions.add", {
-          what: t("neetoCustomDomains.customDomain", constants.SINGULAR)
-        }),
-        onClick: openPane
-      }
+      onClick: openPane
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex h-full w-full items-center gap-x-3",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "neeto-ui-bg-gray-100 neeto-ui-rounded-lg flex items-center justify-center p-2",
+        children: /*#__PURE__*/jsxRuntime.jsx(CustomDomain$1, {
+          className: "neeto-ui-text-gray-600",
+          size: 32
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col gap-y-1",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+          style: "h4",
+          weight: "medium",
+          children: t("neetoCustomDomains.noData.title")
+        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+          className: "neeto-ui-text-gray-600",
+          style: "body2",
+          children: t("neetoCustomDomains.noData.helpText")
+        })]
+      })]
     })
   });
 };
@@ -1076,21 +1113,21 @@ var Validation = function Validation(_ref) {
     var _dnsHelpDocs$dnsProvi, _dnsHelpDocs$dnsProvi2, _dnsHelpDocs$unknown;
     var children = _ref3.children;
     return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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 = {
@@ -1101,21 +1138,25 @@ var Validation = function Validation(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     children: [/*#__PURE__*/jsxRuntime.jsxs(Pane.Body, {
       className: "space-y-4",
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "space-y-2",
-        children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+          style: "h4",
+          weight: "medium",
+          children: t("neetoCustomDomains.domainValidationTitle")
+        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
           style: "body2",
           children: dnsProvider !== "unknown" ? /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+            components: components,
             i18nKey: "neetoCustomDomains.dnsProviderCnameRecordInfo",
             values: {
               dnsProvider: dnsProviderInfo === null || dnsProviderInfo === void 0 ? void 0 : dnsProviderInfo.name
-            },
-            components: components
+            }
           }) : /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
-            i18nKey: "neetoCustomDomains.cnameRecordInfo",
-            components: components
+            components: components,
+            i18nKey: "neetoCustomDomains.cnameRecordInfo"
           })
-        })
+        })]
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "space-y-1",
         children: /*#__PURE__*/jsxRuntime.jsx(Table, {
@@ -1138,17 +1179,17 @@ var Validation = function Validation(_ref) {
         children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
           style: "body2",
           children: dnsProvider !== "unknown" ? /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+            components: components,
             i18nKey: "neetoCustomDomains.domainValidationFailedForKnownProvider",
             values: {
               dnsProvider: dnsProviderInfo.name
-            },
-            components: components
+            }
           }) : /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+            components: components,
             i18nKey: "neetoCustomDomains.domainValidationFailedForUnknownProvider",
             values: {
               dnsProvider: dnsProviderInfo.name
-            },
-            components: components
+            }
           })
         })
       }), neetoCist.isNotEmpty(errorKey) && status === "pending" && /*#__PURE__*/jsxRuntime.jsx(Callout, {
@@ -1171,8 +1212,8 @@ var Validation = function Validation(_ref) {
           label: t("neetoCustomDomains.validation.buttonLabel.iHaveAddedTheRecords"),
           onClick: validateDomain
         }), /*#__PURE__*/jsxRuntime.jsx(Button, {
-          label: t("neetoCustomDomains.actions.cancel"),
           "data-cy": "cancel-button",
+          label: t("neetoCustomDomains.actions.cancel"),
           style: "text",
           onClick: onClose
         })]
@@ -1230,18 +1271,12 @@ var DomainPane = function DomainPane(_ref) {
         style: "h2",
         children: t("neetoCustomDomains.addNew")
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "-ml-2 neeto_custom_domain_stepper",
+        className: "neeto_custom_domain_stepper -ml-2",
         children: /*#__PURE__*/jsxRuntime.jsx(Stepper, {
           activeIndex: CURRENT_STEP[getCurrentStep(primaryDomain)],
           setActiveIndex: neetoCist.noop,
           steps: STEPS
         })
-      }), primaryDomain && /*#__PURE__*/jsxRuntime.jsx(Typography, {
-        style: "h4",
-        weight: "medium",
-        children: t("neetoCustomDomains.cnameRecordTitle", {
-          domainName: primaryDomain.hostname
-        })
       })]
     }), function (_primaryDomain$hostna) {
       var currentStep = getCurrentStep(primaryDomain);
@@ -1250,7 +1285,7 @@ var DomainPane = function DomainPane(_ref) {
       var shouldShowLoader = isLoading || isStrategyStep && isSubdomain;
       if (shouldShowLoader) {
         return /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex justify-center items-center grow w-full",
+          className: "flex w-full grow items-center justify-center",
           children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
         });
       }