@bigbinary/neeto-custom-domains-frontend 3.0.10 → 3.1.1

package/dist/CustomDomain.js

@@ -1,6 +1,6 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, memo } from 'react';
-import { isNotEmpty, isPresent, truncate, noop } from '@bigbinary/neeto-cist';
+import { createElement, useState, useEffect, memo } from 'react';
+import { isPresent, truncate, isNotEmpty, noop } from '@bigbinary/neeto-cist';
 import { withT, useQueryParams } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Container from '@bigbinary/neeto-molecules/Container';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
@@ -12,34 +12,35 @@ import Alert from '@bigbinary/neetoui/Alert';
 import { Trans, useTranslation } from 'react-i18next';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { SINGULAR } from '@bigbinary/neeto-commons-frontend/constants';
-import CardLayout from '@bigbinary/neeto-molecules/CardLayout';
 import { hyphenize } from '@bigbinary/neeto-commons-frontend/utils/general';
+import Redirection from '@bigbinary/neeto-icons/Redirection';
+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 Pane from '@bigbinary/neetoui/Pane';
 import Stepper from '@bigbinary/neetoui/Stepper';
 import Callout from '@bigbinary/neetoui/Callout';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import Input from '@bigbinary/neetoui/formik/Input';
-import FormikForm from '@bigbinary/neetoui/formik/Form';
+import Form from '@bigbinary/neetoui/formik/Form';
+import Radio from '@bigbinary/neetoui/formik/Radio';
 import { t } from 'i18next';
+import psl from 'psl';
+import { isNil } from 'ramda';
 import * as Yup from 'yup';
 import Table from '@bigbinary/neetoui/Table';
 import Toastr from '@bigbinary/neetoui/Toastr';
-import { isNil } from 'ramda';
 import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
-import psl from 'psl';
 import NeetoHeader from '@bigbinary/neeto-molecules/Header';
 
 var getUrlwithId = function getUrlwithId(url, id) {
   return id ? "".concat(url, "/").concat(id) : url;
 };
-var fetchCustomDomain = function fetchCustomDomain(url) {
-  return axios.get(url);
-};
+var fetchCustomDomain = axios.get;
 var updateCustomDomain = function updateCustomDomain(url, id) {
   return axios.patch(getUrlwithId(url, id));
 };
@@ -48,8 +49,8 @@ var createCustomDomain = function createCustomDomain(url, payload) {
     showToastr: false
   });
 };
-var deleteCustomDomain = function deleteCustomDomain(url) {
-  return axios["delete"](getUrlwithId(url));
+var deleteCustomDomain = function deleteCustomDomain(url, hostname) {
+  return axios["delete"](getUrlwithId(url, hostname));
 };
 var validateDomain = function validateDomain(url) {
   return axios.patch("".concat(url, "/validate_domain"), undefined, {
@@ -70,27 +71,27 @@ var domainsApi = {
 
 var DOMAIN_QUERY_KEY = "custom-domain";
 
-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), !0).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; }
+function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useCreateCustomDomain = function useCreateCustomDomain(url) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return useMutationWithInvalidation(function (payload) {
     return domainsApi.createCustomDomain(url, payload);
-  }, _objectSpread$1({
+  }, _objectSpread$2({
     keysToInvalidate: [[DOMAIN_QUERY_KEY]]
   }, options));
 };
-var useDeleteCustomDomain = function useDeleteCustomDomain(url) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useMutationWithInvalidation(function (id) {
-    return domainsApi.deleteCustomDomain(url, id);
-  }, _objectSpread$1({
+var useDeleteCustomDomain = function useDeleteCustomDomain(url, hostname) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return useMutationWithInvalidation(function () {
+    return domainsApi.deleteCustomDomain(url, hostname);
+  }, _objectSpread$2({
     keysToInvalidate: [[DOMAIN_QUERY_KEY]]
   }, options));
 };
 var useFetchCustomDomain = function useFetchCustomDomain(params) {
   return useQuery({
-    queryKey: [DOMAIN_QUERY_KEY, _objectSpread$1({}, params)],
+    queryKey: [DOMAIN_QUERY_KEY, _objectSpread$2({}, params)],
     queryFn: function queryFn() {
       return domainsApi.fetchCustomDomain(params);
     },
@@ -107,7 +108,7 @@ var useValidateDomain = function useValidateDomain(url) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return useMutationWithInvalidation(function () {
     return domainsApi.validateDomain(url);
-  }, _objectSpread$1({
+  }, _objectSpread$2({
     keysToInvalidate: [[DOMAIN_QUERY_KEY]]
   }, options));
 };
@@ -142,51 +143,81 @@ var STATUS_TAG_STYLES = {
   failed: "danger"
 };
 
-var Domain = withT(function (_ref) {
-  var t = _ref.t,
-    isCustomDomainAdded = _ref.isCustomDomainAdded,
+var Domain = function Domain(_ref) {
+  var isCustomDomainAdded = _ref.isCustomDomainAdded,
     openPane = _ref.openPane,
-    customDomain = _ref.customDomain,
+    customDomains = _ref.customDomains,
     openDeleteAlert = _ref.openDeleteAlert,
-    helpDocUrl = _ref.helpDocUrl;
+    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, {
     title: t("neetoCustomDomains.connectionTitle"),
     children: /*#__PURE__*/jsxs("div", {
       className: "space-y-1",
-      children: [/*#__PURE__*/jsxs("div", {
-        className: "neeto-ui-border-gray-200 neeto-ui-rounded neeto-ui-bg-gray-50 flex items-center justify-between border p-2",
-        children: [/*#__PURE__*/jsxs("div", {
-          className: "flex items-center space-x-2",
-          children: [/*#__PURE__*/jsx(Typography, {
-            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: [customDomains === null || customDomains === void 0 ? void 0 : customDomains.map(function (customDomain, index) {
+        var _customDomain$redirec, _customDomain$redirec2;
+        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",
+          children: [/*#__PURE__*/jsxs("div", {
+            className: "flex items-center space-x-2",
+            children: [/*#__PURE__*/jsx(Typography, {
+              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))
+            })]
+          }), /*#__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"),
+                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__*/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"),
-            onClick: openPane,
-            key: "edit-custom-domain-button",
-            "data-cy": "edit-custom-domain-button"
-          }, {
-            label: t("neetoCustomDomains.actions.delete"),
-            onClick: openDeleteAlert,
-            key: "delete-custom-domain",
-            "data-cy": "delete-custom-domain-button"
-          }]
-        })]
+        }, index);
       }), /*#__PURE__*/jsx(Typography, {
         style: "body2",
         children: /*#__PURE__*/jsx(Trans, {
@@ -225,7 +256,7 @@ var Domain = withT(function (_ref) {
       }
     })
   });
-});
+};
 
 var HOSTNAME_REGEX = /^(https?:\/\/)?([a-zA-Z0-9][a-zA-Z0-9-]*\.)+[a-zA-Z]{2,}(\/\S*)?$/;
 var INITIAL_VALUES = {
@@ -233,38 +264,157 @@ var INITIAL_VALUES = {
 };
 var CURRENT_STEP = {
   notAdded: 0,
-  pending: 1,
-  failed: 1,
-  active: 2
+  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 isNil(psl.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(Tag, {
+      label: t("neetoCustomDomains.validation.strategy.recommended"),
+      style: "info"
+    })
+  })
+}, {
+  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), !0).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(Pane.Body, {
+      className: "space-y-4",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "space-y-4",
+        children: [/*#__PURE__*/jsx(Radio, {
+          stacked: true,
+          name: "strategy",
+          children: strategyOptions.map(function (_ref2, index) {
+            var value = _ref2.value,
+              label = _ref2.label,
+              AdditionalLabelContent = _ref2.additionalLabelContent;
+            return /*#__PURE__*/createElement(Radio.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, {
+          style: "warning",
+          children: /*#__PURE__*/jsx(Typography, {
+            style: "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",
+                  style: "link",
+                  target: "_blank"
+                })
+              }
+            })
+          })
+        })]
+      })
+    }), /*#__PURE__*/jsx(Pane.Footer, {
+      children: /*#__PURE__*/jsx(ActionBlock, {
+        isSubmitting: isSubmitting,
+        cancelButtonProps: {
+          label: t("neetoCustomDomains.actions.cancel")
+        },
+        submitButtonProps: {
+          label: t("neetoCustomDomains.actions.continue"),
+          disabled: false,
+          "data-cy": "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), !0).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 customDomain = _ref.customDomain,
-    onCreate = _ref.onCreate,
+  var onCreate = _ref.onCreate,
     url = _ref.url,
     onClose = _ref.onClose,
-    subdomainPlaceholder = _ref.subdomainPlaceholder;
+    subdomainPlaceholder = _ref.subdomainPlaceholder,
+    setPrimaryDomain = _ref.setPrimaryDomain,
+    errorData = _ref.errorData,
+    setErrorData = _ref.setErrorData;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useState = useState({}),
+  var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
-    errorData = _useState2[0],
-    setErrorData = _useState2[1];
+    hostname = _useState2[0],
+    setHostname = _useState2[1];
+  var wwwHostname = "www.".concat(hostname);
   var _useCreateCustomDomai = useCreateCustomDomain(url, {
       onError: function onError(_ref2) {
         var response = _ref2.response;
@@ -272,7 +422,28 @@ var DomainField = function DomainField(_ref) {
       }
     }),
     createCustomDomain = _useCreateCustomDomai.mutate,
-    isCreating = _useCreateCustomDomai.isPending;
+    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
+    }
+  };
+  var handleSubmit = function handleSubmit(_ref3) {
+    var strategy = _ref3.strategy;
+    return handleDomainCreation(handleStrategy[strategy]);
+  };
   var getHostname = function getHostname(url) {
     try {
       var parsedUrl = new URL(url);
@@ -281,28 +452,46 @@ var DomainField = function DomainField(_ref) {
       return url;
     }
   };
-  var handleSubmit = function handleSubmit(_ref3) {
-    var hostname = _ref3.hostname;
+  var handleDomainSubmission = function handleDomainSubmission(_ref4) {
+    var hostname = _ref4.hostname;
+    setErrorData({});
     var parsedHostname = getHostname(hostname);
-    var payload = {
+    setPrimaryDomain({
+      hostname: parsedHostname
+    });
+    if (isRootLevelDomain(hostname)) {
+      return setHostname(parsedHostname);
+    }
+    return handleDomainCreation({
       hostname: parsedHostname
-    };
-    createCustomDomain(payload, {
-      onSuccess: function onSuccess(values) {
-        onCreate === null || onCreate === void 0 || onCreate(values);
-      }
     });
   };
-  return /*#__PURE__*/jsx(FormikForm, {
+  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: {
-      enableReinitialize: true,
-      initialValues: customDomain || INITIAL_VALUES,
+      initialValues: INITIAL_VALUES,
       validationSchema: getCustomDomainValidationSchema(),
-      onSubmit: handleSubmit
+      onSubmit: handleDomainSubmission
     },
-    children: function children(_ref4) {
-      var dirty = _ref4.dirty;
+    children: function children(_ref5) {
+      var dirty = _ref5.dirty;
       return /*#__PURE__*/jsxs("div", {
         className: "w-full",
         children: [/*#__PURE__*/jsx(Pane.Body, {
@@ -312,7 +501,6 @@ var DomainField = function DomainField(_ref) {
               required: true,
               className: "w-full",
               "data-cy": "custom-domain-input-field",
-              disabled: isNotEmpty(customDomain),
               label: t("neetoCustomDomains.label"),
               name: "hostname",
               placeholder: t("neetoCustomDomains.placeholder", {
@@ -324,6 +512,9 @@ var DomainField = function DomainField(_ref) {
                 style: "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,
@@ -331,10 +522,7 @@ var DomainField = function DomainField(_ref) {
                       style: "link",
                       target: "_blank"
                     })
-                  },
-                  values: _objectSpread(_objectSpread({}, errorData), {}, {
-                    subdomainPlaceholder: subdomainPlaceholder
-                  })
+                  }
                 })
               })
             })]
@@ -342,14 +530,13 @@ var DomainField = function DomainField(_ref) {
         }), /*#__PURE__*/jsx(Pane.Footer, {
           children: /*#__PURE__*/jsx(ActionBlock, {
             cancelButtonProps: {
-              onClick: onClose
+              onClick: handleCancel
             },
-            isSubmitting: isCreating,
             submitButtonProps: {
               label: t("neetoCustomDomains.actions.continue"),
               "data-cy": "submit-custom-domain-button",
               "data-testid": "submit-custom-domain-button",
-              disabled: !dirty || isCreating
+              disabled: !dirty
             }
           })
         })]
@@ -364,9 +551,6 @@ var getDnsProviderData = function getDnsProviderData(dnsProvider) {
   var hostname = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "unknown";
   return dnsProviderData(hostname)[dnsProvider];
 };
-var isRootLevelDomain = function isRootLevelDomain(hostname) {
-  return isNil(psl.parse(hostname).subdomain);
-};
 var commonColumnData = function commonColumnData(dnsProvider) {
   var dnsProviderInfo = getDnsProviderData(dnsProvider);
   return [{
@@ -478,8 +662,8 @@ var dnsProviderData = function dnsProviderData(hostname) {
       },
       values: {
         ttl: {
-          rootDomain: "1m",
-          subdomain: "1m"
+          rootDomain: "1 min",
+          subdomain: "1 min"
         },
         type: {
           rootDomain: "CNAME",
@@ -503,8 +687,8 @@ var dnsProviderData = function dnsProviderData(hostname) {
       },
       values: {
         ttl: {
-          rootDomain: "1m",
-          subdomain: "1m"
+          rootDomain: "1 min",
+          subdomain: "1 min"
         },
         type: {
           rootDomain: "ALIAS",
@@ -557,15 +741,19 @@ var dnsProviderData = function dnsProviderData(hostname) {
           subdomain: "60"
         },
         type: {
-          rootDomain: "CNAME",
+          rootDomain: "A",
           subdomain: "CNAME"
         },
         name: {
-          rootDomain: psl.parse(hostname).domain,
+          rootDomain: "@",
           subdomain: psl.parse(hostname).subdomain
+        },
+        target: {
+          rootDomain: "34.233.85.113",
+          subdomain: "dns.neetodeployapp.com"
         }
       },
-      hasRootLevelDomainSupport: false
+      hasRootLevelDomainSupport: true
     },
     godaddy: {
       name: "GoDaddy",
@@ -582,15 +770,19 @@ var dnsProviderData = function dnsProviderData(hostname) {
           subdomain: "1/2 Hour"
         },
         type: {
-          rootDomain: "CNAME",
+          rootDomain: "A",
           subdomain: "CNAME"
         },
         name: {
-          rootDomain: psl.parse(hostname).domain,
+          rootDomain: "@",
           subdomain: psl.parse(hostname).subdomain
+        },
+        target: {
+          rootDomain: "34.233.85.113",
+          subdomain: "dns.neetodeployapp.com"
         }
       },
-      hasRootLevelDomainSupport: false
+      hasRootLevelDomainSupport: true
     },
     squarespace: {
       name: "Squarespace",
@@ -633,15 +825,19 @@ var dnsProviderData = function dnsProviderData(hostname) {
           subdomain: "30 minutes"
         },
         type: {
-          rootDomain: "CNAME",
+          rootDomain: "A",
           subdomain: "CNAME"
         },
         name: {
-          rootDomain: psl.parse(hostname).domain,
+          rootDomain: "",
           subdomain: psl.parse(hostname).subdomain
+        },
+        target: {
+          rootDomain: "34.233.85.113",
+          subdomain: "dns.neetodeployapp.com"
         }
       },
-      hasRootLevelDomainSupport: false
+      hasRootLevelDomainSupport: true
     },
     porkbun: {
       name: "Porkbun",
@@ -708,15 +904,19 @@ var dnsProviderData = function dnsProviderData(hostname) {
           subdomain: "60"
         },
         type: {
-          rootDomain: "CNAME",
+          rootDomain: "A",
           subdomain: "CNAME"
         },
         name: {
-          rootDomain: psl.parse(hostname).domain,
+          rootDomain: "",
           subdomain: psl.parse(hostname).subdomain
+        },
+        target: {
+          rootDomain: "34.233.85.113",
+          subdomain: "dns.neetodeployapp.com"
         }
       },
-      hasRootLevelDomainSupport: false
+      hasRootLevelDomainSupport: true
     },
     strato: {
       name: "Strato",
@@ -728,7 +928,7 @@ var dnsProviderData = function dnsProviderData(hostname) {
       },
       values: {
         type: {
-          rootDomain: "CNAME",
+          rootDomain: "A",
           subdomain: "CNAME"
         },
         ttl: {
@@ -736,11 +936,15 @@ var dnsProviderData = function dnsProviderData(hostname) {
           subdomain: "-"
         },
         name: {
-          rootDomain: "www",
+          rootDomain: hostname,
           subdomain: (_psl$parse = psl.parse(hostname)) === null || _psl$parse === void 0 ? void 0 : _psl$parse.subdomain
+        },
+        target: {
+          rootDomain: "34.233.85.113",
+          subdomain: "dns.neetodeployapp.com"
         }
       },
-      hasRootLevelDomainSupport: false
+      hasRootLevelDomainSupport: true
     },
     microsoft: {
       name: "Microsoft 365",
@@ -769,7 +973,7 @@ var dnsProviderData = function dnsProviderData(hostname) {
           subdomain: "dns.neetodeployapp.com"
         }
       },
-      hasRootLevelDomainSupport: false
+      hasRootLevelDomainSupport: true
     },
     unknown: {
       name: "this provider",
@@ -786,31 +990,35 @@ var dnsProviderData = function dnsProviderData(hostname) {
           subdomain: "1m"
         },
         type: {
-          rootDomain: "CNAME",
+          rootDomain: "A",
           subdomain: "CNAME"
         },
         name: {
           rootDomain: "@",
           subdomain: psl.parse(hostname).subdomain
+        },
+        target: {
+          rootDomain: "34.233.85.113",
+          subdomain: "dns.neetodeployapp.com"
         }
       },
-      hasRootLevelDomainSupport: false
+      hasRootLevelDomainSupport: true
     }
   };
 };
 
 var Validation = function Validation(_ref) {
   var _dnsHelpDocs$dnsProvi, _dnsHelpDocs$dnsProvi2, _dnsHelpDocs$unknown, _dnsHelpDocs$dnsProvi3, _dnsHelpDocs$dnsProvi4, _dnsHelpDocs$unknown2, _dnsHelpDocs$dnsProvi5, _dnsHelpDocs$dnsProvi6, _dnsHelpDocs$unknown3;
-  var customDomain = _ref.customDomain,
+  var customDomains = _ref.customDomains,
     onClose = _ref.onClose,
     url = _ref.url,
-    dnsHelpDocs = _ref.dnsHelpDocs;
+    dnsHelpDocs = _ref.dnsHelpDocs,
+    primaryDomain = _ref.primaryDomain;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var hostname = customDomain.hostname,
-    dnsTarget = customDomain.dnsTarget,
-    status = customDomain.status,
-    dnsProvider = customDomain.dnsProvider;
+  var hostname = primaryDomain.hostname,
+    status = primaryDomain.status,
+    dnsProvider = primaryDomain.dnsProvider;
   var queryClient = useQueryClient();
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
@@ -840,33 +1048,27 @@ var Validation = function Validation(_ref) {
   return /*#__PURE__*/jsxs("div", {
     children: [/*#__PURE__*/jsxs(Pane.Body, {
       className: "space-y-4",
-      children: [/*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsx("div", {
         className: "space-y-2",
-        children: [/*#__PURE__*/jsx(Typography, {
-          style: "h4",
-          weight: "medium",
-          children: t("neetoCustomDomains.cnameRecordTitle", {
-            domainName: hostname
-          })
-        }), /*#__PURE__*/jsx(Typography, {
+        children: /*#__PURE__*/jsx(Typography, {
           style: "body2",
           children: dnsProvider !== "unknown" ? /*#__PURE__*/jsx(Trans, {
             i18nKey: "neetoCustomDomains.dnsProviderCnameRecordInfo",
             values: {
-              dnsProvider: dnsProviderInfo.name
+              dnsProvider: dnsProviderInfo === null || dnsProviderInfo === void 0 ? void 0 : dnsProviderInfo.name
             },
             components: {
               Login: /*#__PURE__*/jsx(Button, {
-                href: dnsProviderInfo.loginUrl,
+                href: dnsProviderInfo === null || dnsProviderInfo === void 0 ? void 0 : dnsProviderInfo.loginUrl,
                 rel: "noreferrer",
                 style: "link",
                 target: "_blank"
               }),
               Link: /*#__PURE__*/jsx(Button, {
-                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],
                 rel: "noreferrer",
                 style: "link",
-                target: "_blank"
+                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]
               })
             }
           }) : /*#__PURE__*/jsx(Trans, {
@@ -880,18 +1082,23 @@ var Validation = function Validation(_ref) {
               })
             }
           })
-        })]
+        })
       }), /*#__PURE__*/jsx("div", {
         className: "space-y-1",
         children: /*#__PURE__*/jsx(Table, {
           allowRowClick: false,
           columnData: columnData(dnsProvider),
           enableColumnFreeze: false,
-          rowData: rowData(dnsProvider, hostname, dnsTarget),
           rowSelection: false,
           scroll: {
-            x: '100%'
-          }
+            x: "100%"
+          },
+          rowData: customDomains.map(function (_ref3) {
+            var hostname = _ref3.hostname,
+              dnsTarget = _ref3.dnsTarget,
+              dnsProvider = _ref3.dnsProvider;
+            return rowData(dnsProvider, hostname, dnsTarget);
+          }).flat()
         })
       }), status === "failed" && /*#__PURE__*/jsx(Callout, {
         style: STATUS_TAG_STYLES[status],
@@ -910,10 +1117,10 @@ var Validation = function Validation(_ref) {
                 target: "_blank"
               }),
               Link: /*#__PURE__*/jsx(Button, {
-                href: (_dnsHelpDocs$dnsProvi3 = (_dnsHelpDocs$dnsProvi4 = dnsHelpDocs[dnsProvider]) === null || _dnsHelpDocs$dnsProvi4 === void 0 ? void 0 : _dnsHelpDocs$dnsProvi4[domainType]) !== null && _dnsHelpDocs$dnsProvi3 !== void 0 ? _dnsHelpDocs$dnsProvi3 : (_dnsHelpDocs$unknown2 = dnsHelpDocs.unknown) === null || _dnsHelpDocs$unknown2 === void 0 ? void 0 : _dnsHelpDocs$unknown2[domainType],
                 rel: "noreferrer",
                 style: "link",
-                target: "_blank"
+                target: "_blank",
+                href: (_dnsHelpDocs$dnsProvi3 = (_dnsHelpDocs$dnsProvi4 = dnsHelpDocs[dnsProvider]) === null || _dnsHelpDocs$dnsProvi4 === void 0 ? void 0 : _dnsHelpDocs$dnsProvi4[domainType]) !== null && _dnsHelpDocs$dnsProvi3 !== void 0 ? _dnsHelpDocs$dnsProvi3 : (_dnsHelpDocs$unknown2 = dnsHelpDocs.unknown) === null || _dnsHelpDocs$unknown2 === void 0 ? void 0 : _dnsHelpDocs$unknown2[domainType]
               }),
               br: /*#__PURE__*/jsx("br", {})
             }
@@ -930,10 +1137,10 @@ var Validation = function Validation(_ref) {
                 target: "_blank"
               }),
               Link: /*#__PURE__*/jsx(Button, {
-                href: (_dnsHelpDocs$dnsProvi5 = (_dnsHelpDocs$dnsProvi6 = dnsHelpDocs[dnsProvider]) === null || _dnsHelpDocs$dnsProvi6 === void 0 ? void 0 : _dnsHelpDocs$dnsProvi6[domainType]) !== null && _dnsHelpDocs$dnsProvi5 !== void 0 ? _dnsHelpDocs$dnsProvi5 : (_dnsHelpDocs$unknown3 = dnsHelpDocs.unknown) === null || _dnsHelpDocs$unknown3 === void 0 ? void 0 : _dnsHelpDocs$unknown3[domainType],
                 rel: "noreferrer",
                 style: "link",
-                target: "_blank"
+                target: "_blank",
+                href: (_dnsHelpDocs$dnsProvi5 = (_dnsHelpDocs$dnsProvi6 = dnsHelpDocs[dnsProvider]) === null || _dnsHelpDocs$dnsProvi6 === void 0 ? void 0 : _dnsHelpDocs$dnsProvi6[domainType]) !== null && _dnsHelpDocs$dnsProvi5 !== void 0 ? _dnsHelpDocs$dnsProvi5 : (_dnsHelpDocs$unknown3 = dnsHelpDocs.unknown) === null || _dnsHelpDocs$unknown3 === void 0 ? void 0 : _dnsHelpDocs$unknown3[domainType]
               }),
               br: /*#__PURE__*/jsx("br", {})
             }
@@ -944,10 +1151,10 @@ var Validation = function Validation(_ref) {
         children: /*#__PURE__*/jsx(Typography, {
           style: "body2",
           children: /*#__PURE__*/jsx(Trans, {
-            i18nKey: errorKey,
             components: {
               br: /*#__PURE__*/jsx("br", {})
-            }
+            },
+            i18nKey: errorKey
           })
         })
       })]
@@ -957,11 +1164,12 @@ var Validation = function Validation(_ref) {
         children: [/*#__PURE__*/jsx(Button, {
           "data-cy": "validate-domain-button",
           disabled: isValidating || isDomainValidated,
-          label: status === "failed" ? t("neetoCustomDomains.validation.buttonLabel.revalidate") : isNotEmpty(errorKey) ? t("neetoCustomDomains.validation.buttonLabel.validateManually") : t("neetoCustomDomains.validation.buttonLabel.domain"),
           loading: isValidating,
+          label: status === "failed" ? t("neetoCustomDomains.validation.buttonLabel.revalidate") : isNotEmpty(errorKey) ? t("neetoCustomDomains.validation.buttonLabel.validateManually") : t("neetoCustomDomains.validation.buttonLabel.domain"),
           onClick: validateDomain
         }), /*#__PURE__*/jsx(Button, {
           label: t("neetoCustomDomains.actions.cancel"),
+          "data-cy": "cancel-button",
           style: "text",
           onClick: onClose
         })]
@@ -971,19 +1179,38 @@ var Validation = function Validation(_ref) {
 };
 
 var DomainPane = function DomainPane(_ref) {
-  var customDomain = _ref.customDomain,
+  var customDomains = _ref.customDomains,
     isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     onCreate = _ref.onCreate,
     url = _ref.url,
-    isCustomDomainAdded = _ref.isCustomDomainAdded,
     helpDocUrl = _ref.helpDocUrl,
     dnsHelpDocs = _ref.dnsHelpDocs,
     subdomainPlaceholder = _ref.subdomainPlaceholder;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _customDomain$status = customDomain.status,
-    status = _customDomain$status === void 0 ? "notAdded" : _customDomain$status;
+  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(Pane, {
     isOpen: isOpen,
     onClose: onClose,
@@ -996,24 +1223,47 @@ var DomainPane = function DomainPane(_ref) {
       }), /*#__PURE__*/jsx("div", {
         className: "-ml-2",
         children: /*#__PURE__*/jsx(Stepper, {
-          activeIndex: CURRENT_STEP[status],
+          activeIndex: CURRENT_STEP[getCurrentStep(primaryDomain)],
           setActiveIndex: noop,
           steps: STEPS
         })
+      }), primaryDomain && /*#__PURE__*/jsx(Typography, {
+        style: "h4",
+        weight: "medium",
+        children: t("neetoCustomDomains.cnameRecordTitle", {
+          domainName: primaryDomain.hostname
+        })
       })]
-    }), isCustomDomainAdded ? /*#__PURE__*/jsx(Validation, {
-      customDomain: customDomain,
-      dnsHelpDocs: dnsHelpDocs,
-      helpDocUrl: helpDocUrl,
-      onClose: onClose,
-      url: url
-    }) : /*#__PURE__*/jsx(DomainField, {
-      customDomain: customDomain,
-      onClose: onClose,
-      onCreate: onCreate,
-      url: url,
-      subdomainPlaceholder: subdomainPlaceholder
-    })]
+    }), 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(PageLoader, {});
+      }
+      if (CURRENT_STEP[getCurrentStep(primaryDomain)] > 1) {
+        return /*#__PURE__*/jsx(Validation, {
+          customDomains: customDomains,
+          dnsHelpDocs: dnsHelpDocs,
+          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
+      });
+    }()]
   });
 };
 
@@ -1021,31 +1271,36 @@ var Header = function Header(_ref) {
   var openPane = _ref.openPane,
     breadcrumbs = _ref.breadcrumbs,
     isCustomDomainAdded = _ref.isCustomDomainAdded,
+    setSelectedCustomDomain = _ref.setSelectedCustomDomain,
     helpDocUrl = _ref.helpDocUrl,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "large" : _ref$size;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var handleClick = function handleClick() {
+    setSelectedCustomDomain({});
+    openPane();
+  };
   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
-      }
-    },
     actionBlock: /*#__PURE__*/jsx(Button, {
       "data-cy": "add-new-custom-domain-button",
       disabled: isCustomDomainAdded,
       label: t("neetoCustomDomains.actions.add", {
         what: t("neetoCustomDomains.customDomain", SINGULAR)
       }),
-      onClick: openPane
-    })
+      onClick: handleClick
+    }),
+    titleHelpPopoverProps: {
+      title: t("neetoCustomDomains.customDomain", SINGULAR),
+      description: t("neetoCustomDomains.toolTips.customDomain"),
+      helpLinkProps: {
+        href: helpDocUrl
+      }
+    }
   });
 };
 var Header$1 = /*#__PURE__*/memo(Header);
@@ -1069,11 +1324,17 @@ var CustomDomain = function CustomDomain(_ref) {
     _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,
-    customDomain = _useFetchCustomDomain2 === void 0 ? {} : _useFetchCustomDomain2,
+    _useFetchCustomDomain3 = _useFetchCustomDomain2 === void 0 ? {} : _useFetchCustomDomain2,
+    _useFetchCustomDomain4 = _useFetchCustomDomain3.customDomains,
+    customDomains = _useFetchCustomDomain4 === void 0 ? [] : _useFetchCustomDomain4,
     isLoading = _useFetchCustomDomain.isLoading;
-  var _useDeleteCustomDomai = useDeleteCustomDomain(url, {
+  var _useDeleteCustomDomai = useDeleteCustomDomain(url, selectedCustomDomain === null || selectedCustomDomain === void 0 ? void 0 : selectedCustomDomain.hostname, {
       onSettled: function onSettled() {
         setIsAlertOpen(false);
       }
@@ -1089,7 +1350,7 @@ var CustomDomain = function CustomDomain(_ref) {
   var openDeleteAlert = function openDeleteAlert() {
     return setIsAlertOpen(true);
   };
-  var isCustomDomainAdded = isNotEmpty(customDomain);
+  var isCustomDomainAdded = isNotEmpty(customDomains);
   if (isLoading) {
     return /*#__PURE__*/jsx("div", {
       className: "h-screen w-full",
@@ -1103,29 +1364,31 @@ var CustomDomain = function CustomDomain(_ref) {
         helpDocUrl: helpDocUrl,
         isCustomDomainAdded: isCustomDomainAdded,
         openPane: openPane,
+        setSelectedCustomDomain: setSelectedCustomDomain,
         size: headerSize
       }), /*#__PURE__*/jsx("div", {
         className: "flex w-full justify-center h-full",
         children: /*#__PURE__*/jsx(Domain, {
-          customDomain: customDomain,
+          customDomains: customDomains,
           helpDocUrl: helpDocUrl,
           isCustomDomainAdded: isCustomDomainAdded,
           openDeleteAlert: openDeleteAlert,
-          openPane: openPane
+          openPane: openPane,
+          setSelectedCustomDomain: setSelectedCustomDomain
         })
       })]
     }), /*#__PURE__*/jsx(DomainPane, {
-      customDomain: customDomain,
+      customDomains: customDomains,
       dnsHelpDocs: dnsHelpDocs,
       helpDocUrl: helpDocUrl,
-      isCustomDomainAdded: isCustomDomainAdded,
       onCreate: onCreate,
       url: url,
+      customDomain: selectedCustomDomain,
       isOpen: isPaneOpen,
-      onClose: closePane,
-      subdomainPlaceholder: subdomainPlaceholder || appName
+      subdomainPlaceholder: subdomainPlaceholder || appName,
+      onClose: closePane
     }), /*#__PURE__*/jsx(DeleteAlert, {
-      hostname: customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname,
+      hostname: selectedCustomDomain === null || selectedCustomDomain === void 0 ? void 0 : selectedCustomDomain.hostname,
       isOpen: isAlertOpen,
       isSubmitting: isDeleting,
       onClose: function onClose() {