@bigbinary/neeto-custom-domains-frontend 3.3.1 → 3.3.3

package/dist/v2/CustomDomain.js

@@ -0,0 +1,1408 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { createElement, useState, useEffect, memo } from 'react';
+import { isPresent, truncate, isNotEmpty, noop } from '@bigbinary/neeto-cist';
+import { withT, useQueryParams } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
+import { Alert, Typography, Button, Tooltip, Badge, Sheet, Callout, DataTable, Toastr, Stepper, Spinner } from '@bigbinary/neeto-atoms';
+import { Trans, useTranslation } from 'react-i18next';
+import { p as parse, u as useCreateCustomDomain, i as img, a as useValidateDomain, D as DOMAIN_QUERY_KEY, b as useFetchCustomDomain, c as useDeleteCustomDomain } from '../application-kZuSmUKo.js';
+import Container from '@bigbinary/neeto-molecules/v2/Container';
+import CheckCircle from '@bigbinary/neeto-icons/CheckCircle';
+import Warning2 from '@bigbinary/neeto-icons/Warning2';
+import CloseCircle from '@bigbinary/neeto-icons/CloseCircle';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { SINGULAR } from '@bigbinary/neeto-commons-frontend/v2/constants';
+import CustomDomain$1 from '@bigbinary/neeto-icons/CustomDomain';
+import ExternalLink from '@bigbinary/neeto-icons/ExternalLink';
+import CardLayout from '@bigbinary/neeto-molecules/v2/CardLayout';
+import MoreDropdown from '@bigbinary/neeto-molecules/v2/MoreDropdown';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { Form, RadioGroup, ActionBlock, Input } from '@bigbinary/neeto-atoms/formik';
+import { t } from 'i18next';
+import * as Yup from 'yup';
+import { useQueryClient } from '@tanstack/react-query';
+import CopyToClipboardButton from '@bigbinary/neeto-molecules/v2/CopyToClipboardButton';
+import NeetoHeader from '@bigbinary/neeto-molecules/v2/Header';
+import '@bigbinary/neeto-commons-frontend/react-utils/useMutationWithInvalidation';
+import 'axios';
+
+var STATUS_TAG_STYLES = {
+  active: "success",
+  pending: "warning",
+  failed: "danger"
+};
+var STATUS_ICON = {
+  active: CheckCircle,
+  pending: Warning2,
+  failed: CloseCircle
+};
+var DNS_TARGETS = {
+  staging: {
+    cname: "staging.neetodeployapp.com",
+    ip: "98.89.128.226"
+  },
+  production: {
+    cname: "dns.neetodeployapp.com",
+    ip: "34.233.85.113"
+  },
+  development: {
+    cname: "dns.neetodeployapp.com",
+    ip: "34.233.85.113"
+  }
+};
+var NEETO_CUSTOM_DOMAINS_NANO_README_URL = "https://github.com/neetozone/neeto-custom-domains-nano#env-variables";
+
+var DeleteAlert = withT(function (_ref) {
+  var t = _ref.t,
+    onClose = _ref.onClose,
+    onSubmit = _ref.onSubmit,
+    isOpen = _ref.isOpen,
+    isSubmitting = _ref.isSubmitting,
+    hostname = _ref.hostname;
+  return /*#__PURE__*/jsx(Alert, {
+    isOpen: isOpen,
+    isSubmitting: isSubmitting,
+    onClose: onClose,
+    onSubmit: onSubmit,
+    cancelButtonLabel: t("neetoCustomDomains.actions.cancel"),
+    submitButtonLabel: t("neetoCustomDomains.actions.delete"),
+    title: t("neetoCustomDomains.delete"),
+    message: /*#__PURE__*/jsx(Trans, {
+      i18nKey: "neetoCustomDomains.alertMessage",
+      values: {
+        hostname: hostname
+      }
+    })
+  });
+});
+
+var Domain = function Domain(_ref) {
+  var isCustomDomainAdded = _ref.isCustomDomainAdded,
+    disconnectedIntegrationCardDescription = _ref.disconnectedIntegrationCardDescription,
+    connectedIntegrationCardDescription = _ref.connectedIntegrationCardDescription,
+    openPane = _ref.openPane,
+    customDomains = _ref.customDomains,
+    openDeleteAlert = _ref.openDeleteAlert,
+    helpDocUrl = _ref.helpDocUrl,
+    setSelectedCustomDomain = _ref.setSelectedCustomDomain;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleEditClick = function handleEditClick(customDomain) {
+    setSelectedCustomDomain(customDomain);
+    openPane();
+  };
+  var handleDeleteClick = function handleDeleteClick(customDomain) {
+    setSelectedCustomDomain(customDomain);
+    openDeleteAlert();
+  };
+  return isCustomDomainAdded ? /*#__PURE__*/jsx(CardLayout, {
+    actionBlock: /*#__PURE__*/jsx(Tooltip, {
+      content: t("neetoCustomDomains.tooltipContent"),
+      position: "top",
+      children: /*#__PURE__*/jsx("span", {
+        className: "inline-block",
+        children: /*#__PURE__*/jsx(Button, {
+          "data-testid": "add-custom-domain-button",
+          disabled: isCustomDomainAdded,
+          label: t("neetoCustomDomains.actions.add", {
+            what: t("neetoCustomDomains.customDomain", SINGULAR)
+          }),
+          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: "flex items-center gap-x-3 pb-6 last:pb-0",
+          "data-testid": "custom-domain-item",
+          children: [/*#__PURE__*/jsx("div", {
+            className: classNames("rounded-lg flex items-center justify-center p-2", {
+              "bg-success": (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "active",
+              "bg-warning": (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "pending",
+              "bg-error": (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({
+                  "text-success-foreground": (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "active",
+                  "text-warning-foreground": (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "pending",
+                  "text-error-foreground": (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "failed"
+                })
+              });
+            }()
+          }), /*#__PURE__*/jsxs("div", {
+            className: "flex flex-col gap-y-1",
+            children: [/*#__PURE__*/jsxs("div", {
+              className: "flex items-center gap-x-3",
+              children: [/*#__PURE__*/jsxs("div", {
+                className: "hover:text-primary flex cursor-pointer items-center gap-x-2",
+                onClick: function onClick() {
+                  return window.open("https://".concat(customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname), "_blank", "noopener,noreferrer");
+                },
+                children: [/*#__PURE__*/jsx(Typography, {
+                  className: "hover:text-primary",
+                  variant: "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, {
+                isRounded: true,
+                dropdownButtonProps: {
+                  "data-testid": "custom-domains-more-dropdown-button",
+                  size: "sm"
+                },
+                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-testid": "edit-custom-domain-button"
+                }, {
+                  label: t("neetoCustomDomains.actions.delete"),
+                  onClick: function onClick() {
+                    return handleDeleteClick(customDomain);
+                  },
+                  key: "delete-custom-domain",
+                  "data-testid": "delete-custom-domain-button"
+                }]
+              })]
+            }), /*#__PURE__*/jsxs("div", {
+              children: [/*#__PURE__*/jsxs(Typography, {
+                className: "text-muted-foreground",
+                variant: "body2",
+                children: [(customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "active" && (customDomain === null || customDomain === void 0 ? void 0 : customDomain.redirection) && /*#__PURE__*/jsxs("span", {
+                  children: [/*#__PURE__*/jsx(Trans, {
+                    components: {
+                      b: /*#__PURE__*/jsx("b", {})
+                    },
+                    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
+                    }
+                  }), " ", connectedIntegrationCardDescription || ""]
+                }), (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "active" && !(customDomain !== null && customDomain !== void 0 && customDomain.redirection) && /*#__PURE__*/jsxs("span", {
+                  children: [t("neetoCustomDomains.activeTooltipDescription"), " ", connectedIntegrationCardDescription || ""]
+                }), (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")]
+              }), /*#__PURE__*/jsx(Typography, {
+                className: "text-muted-foreground mt-2",
+                variant: "body2",
+                children: /*#__PURE__*/jsx(Trans, {
+                  i18nKey: "neetoCustomDomains.noData.helpTextConnected",
+                  components: {
+                    Link: /*#__PURE__*/jsx(Button, {
+                      href: helpDocUrl,
+                      rel: "noreferrer",
+                      variant: "link",
+                      target: "_blank"
+                    })
+                  }
+                })
+              })]
+            })]
+          })]
+        }, index);
+      })
+    })
+  }) : /*#__PURE__*/jsx(CardLayout, {
+    actionBlock: /*#__PURE__*/jsx(Button, {
+      "data-testid": "add-new-custom-domain-button",
+      label: t("neetoCustomDomains.actions.add", {
+        what: t("neetoCustomDomains.customDomain", SINGULAR)
+      }),
+      onClick: openPane
+    }),
+    children: /*#__PURE__*/jsxs("div", {
+      className: "flex h-full w-full items-center gap-x-3",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "bg-muted rounded-lg flex items-center justify-center p-2",
+        children: /*#__PURE__*/jsx(CustomDomain$1, {
+          className: "text-muted-foreground",
+          size: 32
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex flex-col gap-y-1",
+        children: [/*#__PURE__*/jsx(Typography, {
+          variant: "h4",
+          weight: "medium",
+          children: t("neetoCustomDomains.noData.title")
+        }), /*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsx(Typography, {
+            className: "text-muted-foreground",
+            variant: "body2",
+            children: disconnectedIntegrationCardDescription || t("neetoCustomDomains.noData.helpTextDefault")
+          }), /*#__PURE__*/jsx(Typography, {
+            className: "text-muted-foreground mt-2",
+            variant: "body2",
+            children: /*#__PURE__*/jsx(Trans, {
+              i18nKey: "neetoCustomDomains.noData.helpTextDisconnected",
+              components: {
+                Link: /*#__PURE__*/jsx(Button, {
+                  href: helpDocUrl,
+                  rel: "noreferrer",
+                  variant: "link",
+                  target: "_blank"
+                })
+              }
+            })
+          })]
+        })]
+      })]
+    })
+  });
+};
+
+var HOSTNAME_REGEX = /^(https?:\/\/)?([a-zA-Z0-9][a-zA-Z0-9-]*\.)+[a-zA-Z]{2,}(\/\S*)?$/;
+var INITIAL_VALUES = {
+  hostname: ""
+};
+var CURRENT_STEP = {
+  notAdded: 0,
+  strategy: 1,
+  pending: 2,
+  failed: 2,
+  active: 3
+};
+var STEPS = [{
+  id: 1,
+  label: "Add domain"
+}, {
+  id: 2,
+  label: "Strategy"
+}, {
+  id: 3,
+  label: "Validate domain"
+}];
+var STRATEGY_INITIAL_VALUES = {
+  strategy: "rootToWww"
+};
+
+var isRootLevelDomain = function isRootLevelDomain(hostname) {
+  return !parse(hostname).subdomain;
+};
+var getCustomDomainValidationSchema = function getCustomDomainValidationSchema() {
+  return Yup.object().shape({
+    hostname: Yup.string().required(t("neetoCustomDomains.formikValidation.required")).matches(HOSTNAME_REGEX, t("neetoCustomDomains.formikValidation.valid"))
+  });
+};
+var strategyValidationSchema = Yup.object().shape({
+  strategy: Yup.string().required()
+});
+var strategyOptions = [{
+  value: "rootToWww",
+  label: "neetoCustomDomains.validation.strategy.rootToWww",
+  additionalLabelContent: /*#__PURE__*/jsx(Tooltip, {
+    content: t("neetoCustomDomains.validation.strategy.recommendedDescription"),
+    children: /*#__PURE__*/jsx(Badge, {
+      label: t("neetoCustomDomains.validation.strategy.recommended"),
+      variant: "blue-subtle"
+    })
+  })
+}, {
+  value: "wwwToRoot",
+  label: "neetoCustomDomains.validation.strategy.wwwToRoot"
+}, {
+  value: "onlyAddRoot",
+  label: "neetoCustomDomains.validation.strategy.onlyAddRoot"
+}];
+
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Strategy = withT(function (_ref) {
+  var t = _ref.t,
+    hostname = _ref.hostname,
+    subdomainPlaceholder = _ref.subdomainPlaceholder,
+    handleSubmit = _ref.handleSubmit,
+    errorData = _ref.errorData,
+    isSubmitting = _ref.isSubmitting,
+    setPrimaryDomain = _ref.setPrimaryDomain,
+    onClose = _ref.onClose;
+  return /*#__PURE__*/jsxs(Form, {
+    formikProps: {
+      initialValues: STRATEGY_INITIAL_VALUES,
+      validationSchema: strategyValidationSchema,
+      onSubmit: handleSubmit,
+      onReset: function onReset() {
+        setPrimaryDomain({});
+        onClose();
+      }
+    },
+    children: [/*#__PURE__*/jsx(Sheet.Body, {
+      className: "space-y-4",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "space-y-4",
+        children: [/*#__PURE__*/jsx(RadioGroup, {
+          stacked: true,
+          name: "strategy",
+          children: strategyOptions.map(function (_ref2, index) {
+            var value = _ref2.value,
+              label = _ref2.label,
+              AdditionalLabelContent = _ref2.additionalLabelContent;
+            return /*#__PURE__*/createElement(RadioGroup.Item, {
+              value: value,
+              key: index,
+              name: "strategy",
+              label: /*#__PURE__*/jsxs("span", {
+                className: "flex items-center gap-1",
+                children: [/*#__PURE__*/jsx("span", {
+                  children: /*#__PURE__*/jsx(Trans, {
+                    i18nKey: label,
+                    values: {
+                      hostname: hostname
+                    }
+                  })
+                }), AdditionalLabelContent]
+              })
+            });
+          })
+        }), (errorData === null || errorData === void 0 ? void 0 : errorData.key) && /*#__PURE__*/jsx(Callout, {
+          variant: "warning",
+          children: /*#__PURE__*/jsx(Typography, {
+            variant: "body2",
+            children: /*#__PURE__*/jsx(Trans, {
+              i18nKey: errorData === null || errorData === void 0 ? void 0 : errorData.key,
+              values: _objectSpread$1(_objectSpread$1({}, errorData), {}, {
+                subdomainPlaceholder: subdomainPlaceholder
+              }),
+              components: {
+                Link: /*#__PURE__*/jsx(Button, {
+                  href: errorData === null || errorData === void 0 ? void 0 : errorData.pageUrl,
+                  rel: "noreferrer",
+                  variant: "link",
+                  target: "_blank"
+                })
+              }
+            })
+          })
+        })]
+      })
+    }), /*#__PURE__*/jsx(Sheet.Footer, {
+      children: /*#__PURE__*/jsx(ActionBlock, {
+        isSubmitting: isSubmitting,
+        cancelButtonProps: {
+          label: t("neetoCustomDomains.actions.cancel")
+        },
+        submitButtonProps: {
+          label: t("neetoCustomDomains.actions.continue"),
+          disabled: false,
+          "data-testid": "custom-domain-strategy-continue-button"
+        }
+      })
+    })]
+  });
+});
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DomainField = function DomainField(_ref) {
+  var onCreate = _ref.onCreate,
+    url = _ref.url,
+    onClose = _ref.onClose,
+    subdomainPlaceholder = _ref.subdomainPlaceholder,
+    setPrimaryDomain = _ref.setPrimaryDomain,
+    errorData = _ref.errorData,
+    setErrorData = _ref.setErrorData;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    hostname = _useState2[0],
+    setHostname = _useState2[1];
+  var wwwHostname = "www.".concat(hostname);
+  var _useCreateCustomDomai = useCreateCustomDomain(url, {
+      onError: function onError(_ref2) {
+        var response = _ref2.response;
+        setPrimaryDomain();
+        setErrorData(response.data);
+      }
+    }),
+    createCustomDomain = _useCreateCustomDomai.mutate,
+    isCreatingCustomDomain = _useCreateCustomDomai.isPending;
+  var handleDomainCreation = function handleDomainCreation(payload) {
+    return createCustomDomain(payload, {
+      onSuccess: function onSuccess(values) {
+        onCreate === null || onCreate === void 0 || onCreate(values);
+      }
+    });
+  };
+  var handleStrategy = {
+    rootToWww: {
+      hostname: hostname,
+      toHostname: wwwHostname
+    },
+    wwwToRoot: {
+      hostname: wwwHostname,
+      toHostname: hostname
+    },
+    onlyAddRoot: {
+      hostname: hostname
+    }
+  };
+  var handleSubmit = function handleSubmit(_ref3) {
+    var strategy = _ref3.strategy;
+    return handleDomainCreation(handleStrategy[strategy]);
+  };
+  var getHostname = function getHostname(hostname) {
+    var url = hostname.includes("://") ? hostname : "https://".concat(hostname);
+    try {
+      var parsedUrl = new URL(url);
+      return parsedUrl.hostname;
+    } catch (_unused) {
+      return url;
+    }
+  };
+  var handleDomainSubmission = function handleDomainSubmission(_ref4) {
+    var hostname = _ref4.hostname;
+    setErrorData({});
+    var parsedHostname = getHostname(hostname);
+    setPrimaryDomain({
+      hostname: parsedHostname
+    });
+    if (isRootLevelDomain(hostname)) {
+      return setHostname(parsedHostname);
+    }
+    return handleDomainCreation({
+      hostname: parsedHostname
+    });
+  };
+  var handleCancel = function handleCancel() {
+    setPrimaryDomain();
+    onClose();
+  };
+  if (hostname) {
+    return /*#__PURE__*/jsx(Strategy, {
+      errorData: errorData,
+      handleSubmit: handleSubmit,
+      hostname: hostname,
+      onClose: onClose,
+      onCreate: onCreate,
+      setPrimaryDomain: setPrimaryDomain,
+      subdomainPlaceholder: subdomainPlaceholder,
+      url: url,
+      isSubmitting: isCreatingCustomDomain
+    });
+  }
+  return /*#__PURE__*/jsx(Form, {
+    className: "flex-col space-y-6",
+    formikProps: {
+      initialValues: INITIAL_VALUES,
+      validationSchema: getCustomDomainValidationSchema(),
+      onSubmit: handleDomainSubmission
+    },
+    children: function children(_ref5) {
+      var dirty = _ref5.dirty;
+      return /*#__PURE__*/jsxs("div", {
+        className: "w-full",
+        children: [/*#__PURE__*/jsx(Sheet.Body, {
+          children: /*#__PURE__*/jsxs("div", {
+            className: "w-full space-y-4",
+            children: [/*#__PURE__*/jsx(Input, {
+              required: true,
+              className: "w-full",
+              "data-testid": "custom-domain-input-field",
+              label: t("neetoCustomDomains.label"),
+              name: "hostname",
+              placeholder: t("neetoCustomDomains.placeholder", {
+                subdomainPlaceholder: subdomainPlaceholder
+              })
+            }), (errorData === null || errorData === void 0 ? void 0 : errorData.key) && /*#__PURE__*/jsx(Callout, {
+              variant: "warning",
+              children: /*#__PURE__*/jsx(Typography, {
+                variant: "body2",
+                children: /*#__PURE__*/jsx(Trans, {
+                  i18nKey: errorData === null || errorData === void 0 ? void 0 : errorData.key,
+                  values: _objectSpread(_objectSpread({}, errorData), {}, {
+                    subdomainPlaceholder: subdomainPlaceholder
+                  }),
+                  components: {
+                    Link: /*#__PURE__*/jsx(Button, {
+                      href: errorData === null || errorData === void 0 ? void 0 : errorData.pageUrl,
+                      rel: "noreferrer",
+                      variant: "link",
+                      target: "_blank"
+                    })
+                  }
+                })
+              })
+            })]
+          })
+        }), /*#__PURE__*/jsx(Sheet.Footer, {
+          children: /*#__PURE__*/jsx(ActionBlock, {
+            cancelButtonProps: {
+              onClick: handleCancel
+            },
+            submitButtonProps: {
+              label: t("neetoCustomDomains.actions.continue"),
+              "data-testid": "submit-custom-domain-button",
+              disabled: !dirty
+            }
+          })
+        })]
+      });
+    }
+  });
+};
+
+var getDnsProviderData = function getDnsProviderData(dnsProvider) {
+  var hostname = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "unknown";
+  var environment = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "production";
+  return dnsProviderData(hostname, environment)[dnsProvider];
+};
+var commonColumnData = function commonColumnData(dnsProvider) {
+  var dnsProviderInfo = getDnsProviderData(dnsProvider);
+  return [{
+    header: dnsProviderInfo.header.type,
+    id: "type",
+    accessorKey: "type"
+  }, {
+    header: dnsProviderInfo.header.name,
+    id: "name",
+    accessorKey: "name",
+    cell: function cell(_ref) {
+      var row = _ref.row;
+      var name = row.getValue("name");
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between gap-1",
+        children: [/*#__PURE__*/jsx(Typography, {
+          className: "min-w-0 truncate",
+          variant: "body2",
+          children: name
+        }), /*#__PURE__*/jsx(CopyToClipboardButton, {
+          className: "flex-shrink-0",
+          size: "sm",
+          variant: "outline",
+          value: name
+        })]
+      });
+    }
+  }, {
+    header: dnsProviderInfo.header.target,
+    id: "target",
+    accessorKey: "target",
+    cell: function cell(_ref2) {
+      var row = _ref2.row;
+      var value = row.getValue("target");
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between gap-1",
+        children: [/*#__PURE__*/jsx(Typography, {
+          className: "min-w-0 truncate",
+          variant: "body2",
+          children: truncate(value, 30)
+        }), /*#__PURE__*/jsx(CopyToClipboardButton, {
+          className: "flex-shrink-0",
+          size: "sm",
+          variant: "outline",
+          value: value
+        })]
+      });
+    }
+  }, {
+    header: dnsProviderInfo.header.ttl,
+    id: "ttl",
+    accessorKey: "ttl"
+  }];
+};
+var columnData = function columnData(dnsProvider) {
+  var commonColumns = commonColumnData(dnsProvider);
+  var cloudflareProxyColumn = {
+    header: "Proxy",
+    id: "proxy",
+    accessorKey: "proxy",
+    cell: function cell() {
+      return /*#__PURE__*/jsx("div", {
+        className: "flex items-center justify-between gap-1",
+        children: /*#__PURE__*/jsx("img", {
+          src: img
+        })
+      });
+    }
+  };
+  var networkSolutionsRefersToColumn = {
+    header: "Refers to",
+    id: "refersTo",
+    accessorKey: "proxy",
+    cell: function cell() {
+      return /*#__PURE__*/jsx("p", {
+        children: "Other Host"
+      });
+    }
+  };
+  dnsProvider === "cloudflare" && commonColumns.splice(3, 0, cloudflareProxyColumn);
+  dnsProvider === "networksolutions" && commonColumns.splice(1, 0, networkSolutionsRefersToColumn);
+  return commonColumns;
+};
+var rowData = function rowData(dnsProvider, hostname, dnsTarget, environment) {
+  var _dnsProviderInfo$valu, _dnsProviderInfo$valu2;
+  var subdomain = parse(hostname).subdomain;
+  var hostnameType = isPresent(subdomain) ? "subdomain" : "rootDomain";
+  var dnsProviderInfo = getDnsProviderData(dnsProvider, hostname, environment);
+  return [{
+    type: dnsProviderInfo.values.type[hostnameType],
+    name: dnsProviderInfo.values.name[hostnameType],
+    target: (_dnsProviderInfo$valu = dnsProviderInfo === null || dnsProviderInfo === void 0 || (_dnsProviderInfo$valu2 = dnsProviderInfo.values) === null || _dnsProviderInfo$valu2 === void 0 || (_dnsProviderInfo$valu2 = _dnsProviderInfo$valu2.target) === null || _dnsProviderInfo$valu2 === void 0 ? void 0 : _dnsProviderInfo$valu2[hostnameType]) !== null && _dnsProviderInfo$valu !== void 0 ? _dnsProviderInfo$valu : dnsTarget,
+    ttl: dnsProviderInfo.values.ttl[hostnameType]
+  }];
+};
+var dnsProviderData = function dnsProviderData(hostname) {
+  var environment = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "production";
+  var _parse = parse(hostname),
+    subdomain = _parse.subdomain,
+    domain = _parse.domain;
+  return {
+    cloudflare: {
+      name: "Cloudflare",
+      loginUrl: "https://dash.cloudflare.com/login",
+      header: {
+        type: "Type",
+        name: "Name",
+        target: "Target",
+        ttl: "TTL"
+      },
+      values: {
+        ttl: {
+          rootDomain: "1 min",
+          subdomain: "1 min"
+        },
+        type: {
+          rootDomain: "CNAME",
+          subdomain: "CNAME"
+        },
+        name: {
+          rootDomain: "@",
+          subdomain: subdomain
+        }
+      },
+      hasRootLevelDomainSupport: true
+    },
+    namecheap: {
+      name: "Namecheap",
+      loginUrl: "https://www.namecheap.com/myaccount/login",
+      header: {
+        type: "Type",
+        name: "Host",
+        target: "Value",
+        ttl: "TTL"
+      },
+      values: {
+        ttl: {
+          rootDomain: "1 min",
+          subdomain: "1 min"
+        },
+        type: {
+          rootDomain: "ALIAS",
+          subdomain: "CNAME"
+        },
+        name: {
+          rootDomain: "@",
+          subdomain: subdomain
+        }
+      },
+      hasRootLevelDomainSupport: true
+    },
+    hostinger: {
+      name: "Hostinger",
+      loginUrl: "https://auth.hostinger.com/login",
+      header: {
+        type: "Type",
+        name: "Name",
+        target: "Target",
+        ttl: "TTL"
+      },
+      values: {
+        ttl: {
+          rootDomain: "60",
+          subdomain: "60"
+        },
+        type: {
+          rootDomain: "CNAME",
+          subdomain: "CNAME"
+        },
+        name: {
+          rootDomain: "@",
+          subdomain: subdomain
+        }
+      },
+      hasRootLevelDomainSupport: true
+    },
+    digitalocean: {
+      name: "DigitalOcean",
+      loginUrl: "https://cloud.digitalocean.com/login",
+      header: {
+        type: "Type",
+        name: "Hostname",
+        target: "Is an alias of",
+        ttl: "TTL"
+      },
+      values: {
+        ttl: {
+          rootDomain: "60",
+          subdomain: "60"
+        },
+        type: {
+          rootDomain: "A",
+          subdomain: "CNAME"
+        },
+        name: {
+          rootDomain: "@",
+          subdomain: subdomain
+        },
+        target: {
+          rootDomain: DNS_TARGETS[environment].ip,
+          subdomain: DNS_TARGETS[environment].cname
+        }
+      },
+      hasRootLevelDomainSupport: true
+    },
+    godaddy: {
+      name: "GoDaddy",
+      loginUrl: "https://sso.godaddy.com/",
+      header: {
+        type: "Type",
+        name: "Name",
+        target: "Value",
+        ttl: "TTL"
+      },
+      values: {
+        ttl: {
+          rootDomain: "1/2 Hour",
+          subdomain: "1/2 Hour"
+        },
+        type: {
+          rootDomain: "A",
+          subdomain: "CNAME"
+        },
+        name: {
+          rootDomain: "@",
+          subdomain: subdomain
+        },
+        target: {
+          rootDomain: DNS_TARGETS[environment].ip,
+          subdomain: DNS_TARGETS[environment].cname
+        }
+      },
+      hasRootLevelDomainSupport: true
+    },
+    squarespace: {
+      name: "Squarespace",
+      loginUrl: "https://login.squarespace.com/",
+      header: {
+        type: "Type",
+        name: "Host",
+        target: "Data",
+        ttl: "Priority"
+      },
+      values: {
+        ttl: {
+          rootDomain: "-",
+          subdomain: "-"
+        },
+        type: {
+          rootDomain: "ALIAS",
+          subdomain: "CNAME"
+        },
+        name: {
+          rootDomain: "@",
+          subdomain: subdomain
+        }
+      },
+      hasRootLevelDomainSupport: true
+    },
+    wix: {
+      name: "Wix",
+      helpDocUrl: "https://help.neetocal.com/articles/how-to-add-dns-record-in-wix",
+      loginUrl: "https://users.wix.com/signin",
+      header: {
+        type: "Type",
+        name: "HostName",
+        target: "Value",
+        ttl: "TTL"
+      },
+      values: {
+        ttl: {
+          rootDomain: "30 minutes",
+          subdomain: "30 minutes"
+        },
+        type: {
+          rootDomain: "A",
+          subdomain: "CNAME"
+        },
+        name: {
+          rootDomain: "",
+          subdomain: subdomain
+        },
+        target: {
+          rootDomain: DNS_TARGETS[environment].ip,
+          subdomain: DNS_TARGETS[environment].cname
+        }
+      },
+      hasRootLevelDomainSupport: true
+    },
+    porkbun: {
+      name: "Porkbun",
+      loginUrl: "https://porkbun.com/account/login",
+      header: {
+        type: "Type",
+        name: "Host",
+        target: "Answer/Value",
+        ttl: "TTL"
+      },
+      values: {
+        ttl: {
+          rootDomain: "60",
+          subdomain: "60"
+        },
+        type: {
+          rootDomain: "ALIAS",
+          subdomain: "CNAME"
+        },
+        name: {
+          rootDomain: domain,
+          subdomain: subdomain
+        }
+      },
+      hasRootLevelDomainSupport: true
+    },
+    networksolutions: {
+      name: "Network Solutions",
+      loginUrl: "https://www.networksolutions.com/my-account/login",
+      header: {
+        type: "Type",
+        name: "Host Name",
+        target: "Alias to",
+        ttl: "TTL"
+      },
+      values: {
+        ttl: {
+          rootDomain: "15 minutes",
+          subdomain: "15 minutes"
+        },
+        type: {
+          rootDomain: "CNAME",
+          subdomain: "CNAME"
+        },
+        name: {
+          rootDomain: "@",
+          subdomain: subdomain
+        }
+      },
+      hasRootLevelDomainSupport: true
+    },
+    aws: {
+      name: "AWS",
+      loginUrl: "https://aws.amazon.com",
+      header: {
+        type: "Record Type",
+        name: "Record Name",
+        target: "Value",
+        ttl: "TTL"
+      },
+      values: {
+        ttl: {
+          rootDomain: "60",
+          subdomain: "60"
+        },
+        type: {
+          rootDomain: "A",
+          subdomain: "CNAME"
+        },
+        name: {
+          rootDomain: "",
+          subdomain: subdomain
+        },
+        target: {
+          rootDomain: DNS_TARGETS[environment].ip,
+          subdomain: DNS_TARGETS[environment].cname
+        }
+      },
+      hasRootLevelDomainSupport: true
+    },
+    strato: {
+      name: "Strato",
+      loginUrl: "https://www.strato.de/apps/CustomerService",
+      header: {
+        type: "Type",
+        name: "Prefix",
+        target: "Value"
+      },
+      values: {
+        type: {
+          rootDomain: "A",
+          subdomain: "CNAME"
+        },
+        ttl: {
+          rootDomain: "-",
+          subdomain: "-"
+        },
+        name: {
+          rootDomain: hostname,
+          subdomain: subdomain
+        },
+        target: {
+          rootDomain: DNS_TARGETS[environment].ip,
+          subdomain: DNS_TARGETS[environment].cname
+        }
+      },
+      hasRootLevelDomainSupport: true
+    },
+    microsoft: {
+      name: "Microsoft 365",
+      loginUrl: "https://admin.microsoft.com",
+      header: {
+        type: "Type",
+        name: "Host name or Alias",
+        target: "Points to address / IP address",
+        ttl: "TTL"
+      },
+      values: {
+        type: {
+          rootDomain: "A (Address)",
+          subdomain: "CNAME (ALIAS)"
+        },
+        ttl: {
+          rootDomain: "1/2 hour",
+          subdomain: "1/2 hour"
+        },
+        name: {
+          rootDomain: "@",
+          subdomain: subdomain
+        },
+        target: {
+          rootDomain: DNS_TARGETS[environment].ip,
+          subdomain: DNS_TARGETS[environment].cname
+        }
+      },
+      hasRootLevelDomainSupport: true
+    },
+    unknown: {
+      name: "this provider",
+      loginUrl: "https://dash.cloudflare.com/login",
+      header: {
+        type: "Type",
+        name: "Name",
+        target: "Target",
+        ttl: "TTL"
+      },
+      values: {
+        ttl: {
+          rootDomain: "1m",
+          subdomain: "1m"
+        },
+        type: {
+          rootDomain: "A",
+          subdomain: "CNAME"
+        },
+        name: {
+          rootDomain: "@",
+          subdomain: subdomain
+        },
+        target: {
+          rootDomain: DNS_TARGETS[environment].ip,
+          subdomain: DNS_TARGETS[environment].cname
+        }
+      },
+      hasRootLevelDomainSupport: true
+    }
+  };
+};
+
+var Validation = function Validation(_ref) {
+  var customDomains = _ref.customDomains,
+    onClose = _ref.onClose,
+    url = _ref.url,
+    dnsHelpDocs = _ref.dnsHelpDocs,
+    primaryDomain = _ref.primaryDomain,
+    environment = _ref.environment;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var hostname = primaryDomain.hostname,
+    status = primaryDomain.status,
+    dnsProvider = primaryDomain.dnsProvider;
+  var queryClient = useQueryClient();
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    errorKey = _useState2[0],
+    setErrorKey = _useState2[1];
+  var isDomainValidated = status === "active";
+  var dnsProviderInfo = getDnsProviderData(dnsProvider, hostname, environment);
+  var domainType = isRootLevelDomain(hostname) ? "rootDomain" : "subdomain";
+  var _useValidateDomain = useValidateDomain(url, {
+      onError: function onError(_ref2) {
+        var response = _ref2.response;
+        setErrorKey(response.data.error);
+        queryClient.invalidateQueries({
+          queryKey: [DOMAIN_QUERY_KEY]
+        });
+        if (response.data.error === "neetoCustomDomains.jobInProgress") {
+          setTimeout(validateDomain, 10000);
+        }
+      },
+      onSuccess: function onSuccess() {
+        Toastr.success(t("neetoCustomDomains.validation.successMessage"));
+        onClose();
+      }
+    }),
+    validateDomain = _useValidateDomain.mutate,
+    isValidating = _useValidateDomain.isPending;
+  var HelpUrlLink = function HelpUrlLink(_ref3) {
+    var _dnsHelpDocs$dnsProvi, _dnsHelpDocs$dnsProvi2, _dnsHelpDocs$unknown;
+    var children = _ref3.children;
+    return /*#__PURE__*/jsx(Button, {
+      label: children,
+      rel: "noreferrer",
+      variant: "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]
+    });
+  };
+  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",
+      variant: "link",
+      target: "_blank"
+    });
+  };
+  var components = {
+    Login: /*#__PURE__*/jsx(LoginLink, {}),
+    Link: /*#__PURE__*/jsx(HelpUrlLink, {}),
+    br: /*#__PURE__*/jsx("br", {})
+  };
+  return /*#__PURE__*/jsxs("div", {
+    children: [/*#__PURE__*/jsxs(Sheet.Body, {
+      className: "space-y-4",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "space-y-2",
+        children: [/*#__PURE__*/jsx(Typography, {
+          variant: "h4",
+          weight: "medium",
+          children: t("neetoCustomDomains.domainValidationTitle")
+        }), /*#__PURE__*/jsx(Typography, {
+          variant: "body2",
+          children: dnsProvider !== "unknown" ? /*#__PURE__*/jsx(Trans, {
+            components: components,
+            i18nKey: "neetoCustomDomains.dnsProviderCnameRecordInfo",
+            values: {
+              dnsProvider: dnsProviderInfo === null || dnsProviderInfo === void 0 ? void 0 : dnsProviderInfo.name
+            }
+          }) : /*#__PURE__*/jsx(Trans, {
+            components: components,
+            i18nKey: "neetoCustomDomains.cnameRecordInfo"
+          })
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: "space-y-1",
+        children: /*#__PURE__*/jsx(DataTable, {
+          allowRowClick: false,
+          columnDefs: columnData(dnsProvider),
+          data: customDomains.map(function (_ref5) {
+            var hostname = _ref5.hostname,
+              dnsTarget = _ref5.dnsTarget,
+              dnsProvider = _ref5.dnsProvider;
+            return rowData(dnsProvider, hostname, dnsTarget, environment);
+          }).flat()
+        })
+      }), status === "failed" && /*#__PURE__*/jsx(Callout, {
+        variant: STATUS_TAG_STYLES[status],
+        children: /*#__PURE__*/jsx(Typography, {
+          variant: "body2",
+          children: dnsProvider !== "unknown" ? /*#__PURE__*/jsx(Trans, {
+            components: components,
+            i18nKey: "neetoCustomDomains.domainValidationFailedForKnownProvider",
+            values: {
+              dnsProvider: dnsProviderInfo.name
+            }
+          }) : /*#__PURE__*/jsx(Trans, {
+            components: components,
+            i18nKey: "neetoCustomDomains.domainValidationFailedForUnknownProvider",
+            values: {
+              dnsProvider: dnsProviderInfo.name
+            }
+          })
+        })
+      }), isNotEmpty(errorKey) && status === "pending" && /*#__PURE__*/jsx(Callout, {
+        variant: STATUS_TAG_STYLES[status],
+        children: /*#__PURE__*/jsx(Typography, {
+          variant: "body2",
+          children: /*#__PURE__*/jsx(Trans, {
+            components: components,
+            i18nKey: errorKey
+          })
+        })
+      })]
+    }), /*#__PURE__*/jsx(Sheet.Footer, {
+      children: /*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/*#__PURE__*/jsx(Button, {
+          "data-testid": "validate-domain-button",
+          disabled: isValidating || isDomainValidated,
+          loading: isValidating,
+          label: t("neetoCustomDomains.validation.buttonLabel.iHaveAddedTheRecords"),
+          onClick: validateDomain
+        }), /*#__PURE__*/jsx(Button, {
+          "data-testid": "cancel-button",
+          label: t("neetoCustomDomains.actions.cancel"),
+          variant: "ghost",
+          onClick: onClose
+        })]
+      })
+    })]
+  });
+};
+
+var DomainPane = function DomainPane(_ref) {
+  var customDomains = _ref.customDomains,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    onCreate = _ref.onCreate,
+    url = _ref.url,
+    helpDocUrl = _ref.helpDocUrl,
+    dnsHelpDocs = _ref.dnsHelpDocs,
+    subdomainPlaceholder = _ref.subdomainPlaceholder,
+    environment = _ref.environment;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(customDomains[0]),
+    _useState2 = _slicedToArray(_useState, 2),
+    primaryDomain = _useState2[0],
+    setPrimaryDomain = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    errorData = _useState4[0],
+    setErrorData = _useState4[1];
+  var _useFetchCustomDomain = useFetchCustomDomain(url),
+    isLoading = _useFetchCustomDomain.isLoading;
+  useEffect(function () {
+    var domain = customDomains.find(function (_ref2) {
+      var hostname = _ref2.hostname;
+      return isRootLevelDomain(hostname);
+    }) || customDomains[0];
+    setPrimaryDomain(domain);
+  }, [customDomains]);
+  var getCurrentStep = function getCurrentStep(domain) {
+    if (!domain) return "notAdded";
+    if (domain !== null && domain !== void 0 && domain.hostname && !(domain !== null && domain !== void 0 && domain.status)) return "strategy";
+    return domain === null || domain === void 0 ? void 0 : domain.status;
+  };
+  return /*#__PURE__*/jsxs(Sheet, {
+    isOpen: isOpen,
+    onClose: onClose,
+    className: "flex flex-col",
+    size: "large",
+    children: [/*#__PURE__*/jsxs(Sheet.Header, {
+      className: "space-y-2",
+      children: [/*#__PURE__*/jsx(Sheet.Title, {
+        children: /*#__PURE__*/jsx(Typography, {
+          variant: "h2",
+          children: t("neetoCustomDomains.addNew")
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: "neeto_custom_domain_stepper -ml-2",
+        children: /*#__PURE__*/jsx(Stepper, {
+          activeIndex: CURRENT_STEP[getCurrentStep(primaryDomain)],
+          setActiveIndex: noop,
+          steps: STEPS
+        })
+      })]
+    }), function (_primaryDomain$hostna) {
+      var currentStep = getCurrentStep(primaryDomain);
+      var isStrategyStep = CURRENT_STEP[currentStep] === 1;
+      var isSubdomain = !isRootLevelDomain((_primaryDomain$hostna = primaryDomain === null || primaryDomain === void 0 ? void 0 : primaryDomain.hostname) !== null && _primaryDomain$hostna !== void 0 ? _primaryDomain$hostna : "");
+      var shouldShowLoader = isLoading || isStrategyStep && isSubdomain;
+      if (shouldShowLoader) {
+        return /*#__PURE__*/jsx("div", {
+          className: "flex w-full grow items-center justify-center",
+          children: /*#__PURE__*/jsx(Spinner, {})
+        });
+      }
+      if (CURRENT_STEP[getCurrentStep(primaryDomain)] > 1) {
+        return /*#__PURE__*/jsx(Validation, {
+          customDomains: customDomains,
+          dnsHelpDocs: dnsHelpDocs,
+          environment: environment,
+          helpDocUrl: helpDocUrl,
+          onClose: onClose,
+          onCreate: onCreate,
+          primaryDomain: primaryDomain,
+          subdomainPlaceholder: subdomainPlaceholder,
+          url: url
+        });
+      }
+      return /*#__PURE__*/jsx(DomainField, {
+        errorData: errorData,
+        onClose: onClose,
+        onCreate: onCreate,
+        setErrorData: setErrorData,
+        setPrimaryDomain: setPrimaryDomain,
+        subdomainPlaceholder: subdomainPlaceholder,
+        url: url
+      });
+    }()]
+  });
+};
+
+var Header$1 = function Header(_ref) {
+  _ref.openPane;
+    var breadcrumbs = _ref.breadcrumbs;
+    _ref.isCustomDomainAdded;
+    _ref.setSelectedCustomDomain;
+    var helpDocUrl = _ref.helpDocUrl,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "large" : _ref$size;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx(NeetoHeader, {
+    breadcrumbs: breadcrumbs,
+    size: size,
+    "data-testid": "custom-domain-header",
+    title: t("neetoCustomDomains.customDomain", SINGULAR),
+    titleHelpPopoverProps: {
+      title: t("neetoCustomDomains.customDomain", SINGULAR),
+      description: t("neetoCustomDomains.toolTips.customDomain"),
+      helpLinkProps: {
+        href: helpDocUrl
+      }
+    }
+  });
+};
+var Header = /*#__PURE__*/memo(Header$1);
+
+var CustomDomain = function CustomDomain(_ref) {
+  var breadcrumbs = _ref.breadcrumbs,
+    url = _ref.url,
+    onCreate = _ref.onCreate,
+    helpDocUrl = _ref.helpDocUrl,
+    headerSize = _ref.headerSize,
+    dnsHelpDocs = _ref.dnsHelpDocs,
+    subdomainPlaceholder = _ref.subdomainPlaceholder,
+    disconnectedIntegrationCardDescription = _ref.disconnectedIntegrationCardDescription,
+    connectedIntegrationCardDescription = _ref.connectedIntegrationCardDescription,
+    appName = _ref.appName,
+    _ref$environment = _ref.environment,
+    environment = _ref$environment === void 0 ? "production" : _ref$environment;
+  var _useQueryParams = useQueryParams(),
+    pane = _useQueryParams.pane;
+  var _useState = useState(pane === "open"),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPaneOpen = _useState2[0],
+    setIsPaneOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isAlertOpen = _useState4[0],
+    setIsAlertOpen = _useState4[1];
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedCustomDomain = _useState6[0],
+    setSelectedCustomDomain = _useState6[1];
+  var _useFetchCustomDomain = useFetchCustomDomain(url),
+    _useFetchCustomDomain2 = _useFetchCustomDomain.data,
+    _useFetchCustomDomain3 = _useFetchCustomDomain2 === void 0 ? {} : _useFetchCustomDomain2,
+    _useFetchCustomDomain4 = _useFetchCustomDomain3.customDomains,
+    customDomains = _useFetchCustomDomain4 === void 0 ? [] : _useFetchCustomDomain4,
+    isLoading = _useFetchCustomDomain.isLoading;
+  var _useDeleteCustomDomai = useDeleteCustomDomain(url, selectedCustomDomain === null || selectedCustomDomain === void 0 ? void 0 : selectedCustomDomain.hostname, {
+      onSettled: function onSettled() {
+        setIsAlertOpen(false);
+      }
+    }),
+    deleteCustomDomain = _useDeleteCustomDomai.mutate,
+    isDeleting = _useDeleteCustomDomai.isPending;
+  var openPane = function openPane() {
+    return setIsPaneOpen(true);
+  };
+  var closePane = function closePane() {
+    return setIsPaneOpen(false);
+  };
+  var openDeleteAlert = function openDeleteAlert() {
+    return setIsAlertOpen(true);
+  };
+  var isCustomDomainAdded = isNotEmpty(customDomains);
+  if (isLoading) {
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-screen w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
+  var isDevelopment = environment === "development";
+  return /*#__PURE__*/jsxs("div", {
+    children: [/*#__PURE__*/jsxs(Container, {
+      children: [/*#__PURE__*/jsx(Header, {
+        breadcrumbs: breadcrumbs,
+        helpDocUrl: helpDocUrl,
+        isCustomDomainAdded: isCustomDomainAdded,
+        openPane: openPane,
+        setSelectedCustomDomain: setSelectedCustomDomain,
+        size: headerSize
+      }), isDevelopment && /*#__PURE__*/jsx(Callout, {
+        className: "mb-4",
+        variant: "warning",
+        children: /*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsx(Trans, {
+            components: {
+              Link: /*#__PURE__*/jsx("a", {
+                className: "underline",
+                href: NEETO_CUSTOM_DOMAINS_NANO_README_URL,
+                rel: "noreferrer",
+                target: "_blank"
+              })
+            },
+            i18nKey: "neetoCustomDomains.developmentBanner.message"
+          }), /*#__PURE__*/jsx("div", {
+            className: "mt-2 text-xs opacity-75",
+            children: /*#__PURE__*/jsx(Trans, {
+              i18nKey: "neetoCustomDomains.developmentBanner.footnote"
+            })
+          })]
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: "flex h-full w-full justify-center",
+        children: /*#__PURE__*/jsx(Domain, {
+          connectedIntegrationCardDescription: connectedIntegrationCardDescription,
+          customDomains: customDomains,
+          disconnectedIntegrationCardDescription: disconnectedIntegrationCardDescription,
+          helpDocUrl: helpDocUrl,
+          isCustomDomainAdded: isCustomDomainAdded,
+          openDeleteAlert: openDeleteAlert,
+          openPane: openPane,
+          setSelectedCustomDomain: setSelectedCustomDomain
+        })
+      })]
+    }), /*#__PURE__*/jsx(DomainPane, {
+      customDomains: customDomains,
+      dnsHelpDocs: dnsHelpDocs,
+      environment: environment,
+      helpDocUrl: helpDocUrl,
+      onCreate: onCreate,
+      url: url,
+      customDomain: selectedCustomDomain,
+      isOpen: isPaneOpen,
+      subdomainPlaceholder: subdomainPlaceholder || appName,
+      onClose: closePane
+    }), /*#__PURE__*/jsx(DeleteAlert, {
+      hostname: selectedCustomDomain === null || selectedCustomDomain === void 0 ? void 0 : selectedCustomDomain.hostname,
+      isOpen: isAlertOpen,
+      isSubmitting: isDeleting,
+      onClose: function onClose() {
+        return setIsAlertOpen(false);
+      },
+      onSubmit: deleteCustomDomain
+    })]
+  });
+};
+
+export { CustomDomain as default };
+//# sourceMappingURL=CustomDomain.js.map