@bigbinary/neeto-custom-domains-frontend 1.1.0

package/dist/cjs/CustomDomainDashboard.js

@@ -0,0 +1,958 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var neetoCist = require('@bigbinary/neeto-cist');
+var useDebounce = require('@bigbinary/neeto-commons-frontend/react-utils/useDebounce');
+var Container = require('@bigbinary/neeto-molecules/Container');
+var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
+var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
+var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
+var Table = require('@bigbinary/neetoui/Table');
+var Typography = require('@bigbinary/neetoui/Typography');
+var NoData = require('@bigbinary/neetoui/NoData');
+var Button = require('@bigbinary/neetoui/Button');
+var reactI18next = require('react-i18next');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var reactQuery = require('@tanstack/react-query');
+var useMutationWithInvalidation = require('@bigbinary/neeto-commons-frontend/react-utils/useMutationWithInvalidation');
+var axios = require('axios');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var Alert = require('@bigbinary/neetoui/Alert');
+var jsxRuntime = require('react/jsx-runtime');
+var constants = require('@bigbinary/neeto-commons-frontend/constants');
+var withT = require('@bigbinary/neeto-commons-frontend/react-utils/withT');
+var general = require('@bigbinary/neeto-commons-frontend/utils/general');
+var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
+var Pane = require('@bigbinary/neetoui/Pane');
+var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
+var Input = require('@bigbinary/neetoui/formik/Input');
+var FormikForm = require('@bigbinary/neetoui/formik/Form');
+var i18next = require('i18next');
+var Yup = require('yup');
+var Checkbox = require('@bigbinary/neetoui/Checkbox');
+var Callout = require('@bigbinary/neetoui/Callout');
+var Stepper = require('@bigbinary/neetoui/Stepper');
+var CopyToClipboardButton = require('@bigbinary/neeto-molecules/CopyToClipboardButton');
+var Tag = require('@bigbinary/neetoui/Tag');
+var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
+var Toastr = require('@bigbinary/neetoui/Toastr');
+var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
+var classnames = require('classnames');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var useDebounce__default = /*#__PURE__*/_interopDefaultLegacy(useDebounce);
+var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
+var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
+var SubHeader__default = /*#__PURE__*/_interopDefaultLegacy(SubHeader);
+var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
+var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var NoData__default = /*#__PURE__*/_interopDefaultLegacy(NoData);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var useMutationWithInvalidation__default = /*#__PURE__*/_interopDefaultLegacy(useMutationWithInvalidation);
+var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
+var withT__default = /*#__PURE__*/_interopDefaultLegacy(withT);
+var NeetoHeader__default = /*#__PURE__*/_interopDefaultLegacy(NeetoHeader);
+var Pane__default = /*#__PURE__*/_interopDefaultLegacy(Pane);
+var ActionBlock__default = /*#__PURE__*/_interopDefaultLegacy(ActionBlock);
+var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
+var FormikForm__default = /*#__PURE__*/_interopDefaultLegacy(FormikForm);
+var Yup__namespace = /*#__PURE__*/_interopNamespace(Yup);
+var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
+var Callout__default = /*#__PURE__*/_interopDefaultLegacy(Callout);
+var Stepper__default = /*#__PURE__*/_interopDefaultLegacy(Stepper);
+var CopyToClipboardButton__default = /*#__PURE__*/_interopDefaultLegacy(CopyToClipboardButton);
+var Tag__default = /*#__PURE__*/_interopDefaultLegacy(Tag);
+var Toastr__default = /*#__PURE__*/_interopDefaultLegacy(Toastr);
+var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var getUrlwithId = function getUrlwithId(url, id) {
+  return id ? "".concat(url, "/").concat(id) : url;
+};
+var fetchCustomDomains = function fetchCustomDomains(_ref) {
+  var url = _ref.url,
+    params = _ref.params;
+  return axios__default["default"].get(url, {
+    params: params
+  });
+};
+var updateCustomDomain = function updateCustomDomain(url, id) {
+  return axios__default["default"].patch(getUrlwithId(url, id));
+};
+var createCustomDomain = function createCustomDomain(url, payload) {
+  return axios__default["default"].post(url, payload);
+};
+var deleteCustomDomain = function deleteCustomDomain(url, id) {
+  return axios__default["default"]["delete"](getUrlwithId(url, id));
+};
+var validateDomain = function validateDomain(url, id) {
+  return axios__default["default"].patch("".concat(getUrlwithId(url, id), "/validate_domain"), undefined, {
+    showToastr: false
+  });
+};
+var validateCname = function validateCname(url, id) {
+  return axios__default["default"].patch("".concat(getUrlwithId(url, id), "/validate_cname"));
+};
+var domainsApi = {
+  createCustomDomain: createCustomDomain,
+  deleteCustomDomain: deleteCustomDomain,
+  validateDomain: validateDomain,
+  fetchCustomDomains: fetchCustomDomains,
+  validateCname: validateCname,
+  updateCustomDomain: updateCustomDomain
+};
+
+var DOMAIN_QUERY_KEY = "custom-domain";
+
+function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(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__default["default"](function (payload) {
+    return domainsApi.createCustomDomain(url, payload);
+  }, _objectSpread$3({
+    keysToInvalidate: [[DOMAIN_QUERY_KEY]]
+  }, options));
+};
+var useDeleteCustomDomain = function useDeleteCustomDomain(url) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return useMutationWithInvalidation__default["default"](function (id) {
+    return domainsApi.deleteCustomDomain(url, id);
+  }, _objectSpread$3({
+    keysToInvalidate: [[DOMAIN_QUERY_KEY]]
+  }, options));
+};
+var useFetchCustomDomains = function useFetchCustomDomains(params) {
+  return reactQuery.useQuery({
+    queryKey: [DOMAIN_QUERY_KEY, _objectSpread$3({}, params)],
+    queryFn: function queryFn() {
+      return domainsApi.fetchCustomDomains(params);
+    }
+  });
+};
+var useValidateDomain = function useValidateDomain(url) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return useMutationWithInvalidation__default["default"](function (id) {
+    return domainsApi.validateDomain(url, id);
+  }, _objectSpread$3({
+    keysToInvalidate: [[DOMAIN_QUERY_KEY]]
+  }, options));
+};
+var useUpdateCustomDomain = function useUpdateCustomDomain(url) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return useMutationWithInvalidation__default["default"](function (id) {
+    return domainsApi.updateCustomDomain(url, id);
+  }, _objectSpread$3({
+    keysToInvalidate: [[DOMAIN_QUERY_KEY]]
+  }, options));
+};
+
+var DeleteAlert = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    onClose = _ref.onClose,
+    onSubmit = _ref.onSubmit,
+    isOpen = _ref.isOpen,
+    isSubmitting = _ref.isSubmitting,
+    hostname = _ref.hostname;
+  return /*#__PURE__*/jsxRuntime.jsx(Alert__default["default"], {
+    isOpen: isOpen,
+    isSubmitting: isSubmitting,
+    onClose: onClose,
+    onSubmit: onSubmit,
+    cancelButtonLabel: t("neetoCustomDomains.actions.cancel"),
+    submitButtonLabel: t("neetoCustomDomains.actions.delete"),
+    title: t("neetoCustomDomains.delete"),
+    message: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+      i18nKey: "neetoCustomDomains.alertMessage",
+      values: {
+        hostname: hostname
+      }
+    })
+  });
+});
+
+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__default["default"](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 Header = withT__default["default"](function (_ref) {
+  var t = _ref.t,
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    searchTerm = _ref.searchTerm,
+    setSearchTerm = _ref.setSearchTerm,
+    headerProps = _ref.headerProps,
+    isFiltersVisible = _ref.isFiltersVisible;
+  return /*#__PURE__*/jsxRuntime.jsx(NeetoHeader__default["default"], _objectSpread$2({
+    "data-testid": "custom-domain-header",
+    title: t("neetoCustomDomains.customDomain", constants.PLURAL),
+    actionBlock: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      "data-cy": "add-new-custom-domain-button",
+      label: t("neetoCustomDomains.addNew"),
+      onClick: function onClick() {
+        return setIsPaneOpen(true);
+      }
+    }),
+    searchProps: isFiltersVisible && {
+      value: searchTerm,
+      onChange: general.withEventTargetValue(setSearchTerm),
+      placeholder: t("neetoCustomDomains.search"),
+      "data-cy": "custom-domain-search-field",
+      className: "w-56"
+    }
+  }, headerProps));
+});
+var Header$1 = /*#__PURE__*/react.memo(Header);
+
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = ".neeto-molecule-custom-domain-pane{width:min(90%,1280px)}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9jb21wb25lbnRzL0N1c3RvbURvbWFpbkRhc2hib2FyZC9NYW5hZ2UvY3VzdG9tLWRvbWFpbi5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG1DQUNFLHFCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiLm5lZXRvLW1vbGVjdWxlLWN1c3RvbS1kb21haW4tcGFuZSB7XG4gIHdpZHRoOiBtaW4oOTAlLCAxMjgwcHgpO1xufVxuIl19 */";
+n(css,{});
+
+var HOSTNAME_REGEX = /^(https?:\/\/)?([a-zA-Z0-9][a-zA-Z0-9-]*\.)+[a-zA-Z]{2,}(\/\S*)?$/;
+var INITIAL_VALUES = {
+  hostname: ""
+};
+var STATUS_INDEX = ["pending_domain_validation", "pending_cname_validation", "active"];
+var DOMAIN_VALIDATION_STATUS = "pending_domain_validation";
+var STEPS = [{
+  id: 1,
+  label: "Domain validation"
+}, {
+  id: 2,
+  label: "Domain redirection"
+}];
+
+var getCustomDomainValidationSchema = function getCustomDomainValidationSchema() {
+  return Yup__namespace.object().shape({
+    hostname: Yup__namespace.string().required(i18next.t("neetoCustomDomains.formikValidation.required")).matches(HOSTNAME_REGEX, i18next.t("neetoCustomDomains.formikValidation.valid"))
+  });
+};
+
+var DomainField = function DomainField(_ref) {
+  var customDomain = _ref.customDomain,
+    onCreate = _ref.onCreate,
+    url = _ref.url,
+    setCustomDomain = _ref.setCustomDomain,
+    onClose = _ref.onClose;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useCreateCustomDomai = useCreateCustomDomain(url),
+    createCustomDomain = _useCreateCustomDomai.mutate,
+    isCreating = _useCreateCustomDomai.isPending;
+  var getHostname = function getHostname(url) {
+    try {
+      var parsedUrl = new URL(url);
+      return parsedUrl.hostname;
+    } catch (_unused) {
+      return url;
+    }
+  };
+  var handleSubmit = function handleSubmit(_ref2) {
+    var hostname = _ref2.hostname;
+    var parsedHostname = getHostname(hostname);
+    var payload = {
+      hostname: parsedHostname
+    };
+    createCustomDomain(payload, {
+      onSuccess: function onSuccess(values) {
+        setCustomDomain(values);
+        onCreate === null || onCreate === void 0 ? void 0 : onCreate(values);
+      }
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "h2",
+        children: t("neetoCustomDomains.addNew")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(FormikForm__default["default"], {
+      className: "flex-col space-y-6",
+      formikProps: {
+        enableReinitialize: true,
+        initialValues: customDomain || INITIAL_VALUES,
+        validationSchema: getCustomDomainValidationSchema(),
+        onSubmit: handleSubmit
+      },
+      children: function children(_ref3) {
+        var dirty = _ref3.dirty;
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "w-full",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Body, {
+            children: /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
+              required: true,
+              className: "w-full",
+              "data-cy": "custom-domain-input-field",
+              disabled: neetoCist.isNotEmpty(customDomain),
+              label: t("neetoCustomDomains.label"),
+              name: "hostname",
+              placeholder: t("neetoCustomDomains.placeholder")
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Footer, {
+            children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock__default["default"], {
+              cancelButtonProps: {
+                onClick: onClose
+              },
+              isSubmitting: isCreating,
+              submitButtonProps: {
+                label: t("neetoCustomDomains.actions.continue"),
+                "data-cy": "submit-custom-domain-button",
+                "data-testid": "submit-custom-domain-button",
+                disabled: !dirty || isCreating
+              }
+            })
+          })]
+        });
+      }
+    })]
+  });
+};
+
+var Common = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    currentStep = _ref.currentStep,
+    handleStepChange = _ref.handleStepChange,
+    hostname = _ref.hostname;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "mb-6 w-full space-y-6",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "-ml-2",
+      children: /*#__PURE__*/jsxRuntime.jsx(Stepper__default["default"], {
+        activeIndex: currentStep,
+        setActiveIndex: handleStepChange,
+        steps: STEPS
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "space-y-1",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "h4",
+        children: t("neetoCustomDomains.yourDomain")
+      }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "body1",
+        children: hostname
+      })]
+    })]
+  });
+});
+
+var columnData = function columnData() {
+  return [{
+    title: i18next.t("neetoCustomDomains.common.record"),
+    key: "record",
+    dataIndex: "record",
+    width: "90px",
+    render: function render() {
+      return /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "body2",
+        children: i18next.t("neetoCustomDomains.cname")
+      });
+    }
+  }, {
+    title: i18next.t("neetoCustomDomains.common.name"),
+    dataIndex: "name",
+    width: "35%",
+    key: "name",
+    render: function render(name, _) {
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center justify-between gap-1",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          className: "min-w-0 truncate",
+          style: "body2",
+          children: name
+        }), /*#__PURE__*/jsxRuntime.jsx(CopyToClipboardButton__default["default"], {
+          className: "flex-shrink-0",
+          size: "small",
+          style: "secondary",
+          value: name
+        })]
+      });
+    }
+  }, {
+    title: i18next.t("neetoCustomDomains.common.value"),
+    dataIndex: "value",
+    width: "35%",
+    key: "value",
+    render: function render(value, _) {
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center justify-between gap-1",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          className: "min-w-0 truncate",
+          style: "body2",
+          children: value
+        }), /*#__PURE__*/jsxRuntime.jsx(CopyToClipboardButton__default["default"], {
+          value: value,
+          className: "flex-shrink-0",
+          size: "small",
+          style: "secondary"
+        })]
+      });
+    }
+  }, {
+    title: i18next.t("neetoCustomDomains.common.status"),
+    dataIndex: "status",
+    key: "status",
+    width: "130px",
+    render: function render(status) {
+      return /*#__PURE__*/jsxRuntime.jsx(Tag__default["default"], {
+        label: i18next.t("neetoCustomDomains.common.".concat(status)),
+        style: status === "success" ? "success" : "warning"
+      });
+    }
+  }];
+};
+
+var HELP_DOC_URL = "https://help.".concat(initializers.globalProps.appName.toLowerCase(), ".com/articles/custom-domains");
+
+var Redirection = function Redirection(_ref) {
+  var customDomain = _ref.customDomain,
+    onClose = _ref.onClose,
+    setCustomDomain = _ref.setCustomDomain,
+    url = _ref.url,
+    currentStep = _ref.currentStep,
+    handleStepChange = _ref.handleStepChange,
+    incrementStep = _ref.incrementStep,
+    hasOne = _ref.hasOne;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var id = customDomain.id,
+    hostname = customDomain.hostname,
+    dnsTarget = customDomain.dnsTarget,
+    addedCnameAt = customDomain.addedCnameAt,
+    status = customDomain.status;
+  var cnameAdded = neetoCist.isPresent(addedCnameAt);
+  var customDomainId = hasOne ? null : id;
+  var _useState = react.useState(cnameAdded),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    addedRedirectionCname = _useState2[0],
+    setAddedRedirectionCname = _useState2[1];
+  var _useUpdateCustomDomai = useUpdateCustomDomain(url),
+    updateCustomDomain = _useUpdateCustomDomai.mutate,
+    isUpdating = _useUpdateCustomDomai.isPending;
+  var handleUpdateCname = function handleUpdateCname() {
+    addedRedirectionCname && updateCustomDomain(customDomainId, {
+      onSuccess: function onSuccess(data) {
+        incrementStep();
+        setCustomDomain(data);
+      }
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"].Body, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Common, {
+        currentStep: currentStep,
+        handleStepChange: handleStepChange,
+        hostname: hostname
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "mb-6 w-full space-y-6",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "space-y-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            style: "h4",
+            children: t("neetoCustomDomains.domainRedirection")
+          }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            style: "body2",
+            children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+              i18nKey: "neetoCustomDomains.cnameRecordInfo",
+              components: {
+                Link: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+                  href: HELP_DOC_URL,
+                  rel: "noreferrer",
+                  style: "link",
+                  target: "_blank"
+                })
+              }
+            })
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(TableWrapper__default["default"], {
+          className: "pb-0",
+          children: /*#__PURE__*/jsxRuntime.jsx(Table__default["default"], {
+            allowRowClick: false,
+            columnData: columnData(),
+            rowSelection: false,
+            rowData: [{
+              name: hostname,
+              value: dnsTarget,
+              status: status === "active" ? "success" : "pending"
+            }]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(Checkbox__default["default"], {
+          checked: addedRedirectionCname,
+          "data-testid": "cname-added-custom-domain-checkbox",
+          disabled: cnameAdded,
+          label: t("neetoCustomDomains.cnameAdded"),
+          onChange: function onChange() {
+            return setAddedRedirectionCname(function (value) {
+              return !value;
+            });
+          }
+        })]
+      }), cnameAdded && /*#__PURE__*/jsxRuntime.jsx(Callout__default["default"], {
+        style: "warning",
+        children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          style: "body2",
+          children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+            i18nKey: "neetoCustomDomains.domainRedirectionInfo",
+            values: {
+              hostname: hostname
+            },
+            components: {
+              Link: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+                href: HELP_DOC_URL,
+                rel: "noreferrer",
+                style: "link",
+                target: "_blank"
+              })
+            }
+          })
+        })
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Footer, {
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [status !== "active" ? /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          disabled: isUpdating || !addedRedirectionCname,
+          label: t("neetoCustomDomains.actions.continue"),
+          loading: isUpdating,
+          onClick: handleUpdateCname
+        }) : /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          label: t("neetoCustomDomains.actions.done"),
+          onClick: onClose
+        }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          label: t("neetoCustomDomains.actions.cancel"),
+          style: "text",
+          onClick: onClose
+        })]
+      })
+    })]
+  });
+};
+
+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__default["default"](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 Validation = function Validation(_ref) {
+  var customDomain = _ref.customDomain,
+    onClose = _ref.onClose,
+    setCustomDomain = _ref.setCustomDomain,
+    url = _ref.url,
+    currentStep = _ref.currentStep,
+    handleStepChange = _ref.handleStepChange,
+    incrementStep = _ref.incrementStep,
+    hasOne = _ref.hasOne;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var id = customDomain.id,
+    hostname = customDomain.hostname,
+    cnameValidationParams = customDomain.cnameValidationParams,
+    status = customDomain.status;
+  var isDomainValidated = status !== "pending_domain_validation";
+  var customDomainId = hasOne ? null : id;
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    showValidationWarning = _useState2[0],
+    setShowValidationWarning = _useState2[1];
+  var _useValidateDomain = useValidateDomain(url),
+    validateDomain = _useValidateDomain.mutate,
+    isValidating = _useValidateDomain.isPending;
+  var handleValidateDomain = function handleValidateDomain() {
+    return validateDomain(customDomainId, {
+      onError: function onError() {
+        setShowValidationWarning(true);
+      },
+      onSuccess: function onSuccess(values) {
+        Toastr__default["default"].success(t("neetoCustomDomains.validation.successMessage"));
+        incrementStep();
+        setCustomDomain(values);
+      }
+    });
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"].Body, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Common, {
+        currentStep: currentStep,
+        handleStepChange: handleStepChange,
+        hostname: hostname
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "mb-6 w-full space-y-6",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "space-y-1",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            style: "h4",
+            children: t("neetoCustomDomains.domainValidation")
+          }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            style: "body2",
+            children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+              i18nKey: "neetoCustomDomains.cnameRecordInfo",
+              components: {
+                Link: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+                  href: HELP_DOC_URL,
+                  rel: "noreferrer",
+                  style: "link",
+                  target: "_blank"
+                })
+              },
+              values: {
+                proxyMessage: t("neetoCustomDomains.proxyMessage")
+              }
+            })
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(TableWrapper__default["default"], {
+          className: "pb-0",
+          children: /*#__PURE__*/jsxRuntime.jsx(Table__default["default"], {
+            allowRowClick: false,
+            columnData: columnData(),
+            rowSelection: false,
+            rowData: [_objectSpread$1(_objectSpread$1({}, cnameValidationParams), {}, {
+              status: isDomainValidated ? "success" : "pending"
+            })]
+          })
+        })]
+      }), showValidationWarning && /*#__PURE__*/jsxRuntime.jsx(Callout__default["default"], {
+        style: "warning",
+        children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          style: "body2",
+          children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+            i18nKey: "neetoCustomDomains.domainValidationInfo",
+            components: {
+              Link: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+                href: HELP_DOC_URL,
+                rel: "noreferrer",
+                style: "link",
+                target: "_blank"
+              })
+            }
+          })
+        })
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Footer, {
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          disabled: isValidating,
+          loading: isValidating,
+          "data-cy": isDomainValidated ? "continue-button" : "validate-domain-button",
+          label: isDomainValidated ? t("neetoCustomDomains.actions.continue") : t("neetoCustomDomains.validation.buttonLabel.domain"),
+          onClick: isDomainValidated ? incrementStep : handleValidateDomain
+        }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          label: t("neetoCustomDomains.actions.cancel"),
+          style: "text",
+          onClick: onClose
+        })]
+      })
+    })]
+  });
+};
+
+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__default["default"](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 Settings = function Settings(_ref) {
+  var customDomain = _ref.customDomain,
+    url = _ref.url,
+    onClose = _ref.onClose,
+    setCustomDomain = _ref.setCustomDomain,
+    hasOne = _ref.hasOne;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var status = customDomain.status;
+  var _useState = react.useState(STATUS_INDEX.indexOf(status)),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    currentStep = _useState2[0],
+    setCurrentStep = _useState2[1];
+  var isNotValidationStep = STATUS_INDEX[currentStep] !== DOMAIN_VALIDATION_STATUS;
+  var handleStepChange = function handleStepChange(index) {
+    status !== DOMAIN_VALIDATION_STATUS && setCurrentStep(index);
+  };
+  var incrementStep = function incrementStep() {
+    return setCurrentStep(function (step) {
+      return step + 1;
+    });
+  };
+  var recordProps = {
+    currentStep: currentStep,
+    customDomain: customDomain,
+    handleStepChange: handleStepChange,
+    onClose: onClose,
+    setCustomDomain: setCustomDomain,
+    url: url,
+    incrementStep: incrementStep,
+    hasOne: hasOne
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "h2",
+        children: t("neetoCustomDomains.settings")
+      })
+    }), isNotValidationStep ? /*#__PURE__*/jsxRuntime.jsx(Redirection, _objectSpread({}, recordProps)) : /*#__PURE__*/jsxRuntime.jsx(Validation, _objectSpread({}, recordProps))]
+  });
+};
+
+var Manage = function Manage(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    customDomain = _ref.customDomain,
+    setCustomDomain = _ref.setCustomDomain,
+    url = _ref.url,
+    hasOne = _ref.hasOne,
+    onCreate = _ref.onCreate;
+  return /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"], {
+    isOpen: isOpen,
+    onClose: onClose,
+    className: "neeto-molecule-custom-domain-pane",
+    size: "large",
+    children: customDomain !== null && customDomain !== void 0 && customDomain.id ? /*#__PURE__*/jsxRuntime.jsx(Settings, {
+      customDomain: customDomain,
+      hasOne: hasOne,
+      onClose: onClose,
+      setCustomDomain: setCustomDomain,
+      url: url
+    }) : /*#__PURE__*/jsxRuntime.jsx(DomainField, {
+      customDomain: customDomain,
+      onClose: onClose,
+      onCreate: onCreate,
+      setCustomDomain: setCustomDomain,
+      url: url
+    })
+  });
+};
+
+var TagBlock = function TagBlock(_ref) {
+  var status = _ref.status,
+    _ref$stacked = _ref.stacked,
+    stacked = _ref$stacked === void 0 ? false : _ref$stacked;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var isDomainValidated = status === "active" || status === "pending_cname_validation";
+  var camelCasedStatus = neetoCist.snakeToCamelCase(status || "");
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: classnames__default["default"]("flex gap-2", {
+      "flex-col items-start": stacked
+    }),
+    children: status === "failed" ? /*#__PURE__*/jsxRuntime.jsx(Tag__default["default"], {
+      label: t("neetoCustomDomains.status.".concat(camelCasedStatus)),
+      style: "danger"
+    }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Tag__default["default"], {
+        "data-cy": "".concat(general.hyphenize(status), "-tag-container"),
+        label: t("neetoCustomDomains.status.domain.".concat(camelCasedStatus)),
+        style: isDomainValidated ? "success" : "warning"
+      }), isDomainValidated && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classnames__default["default"]("flex items-center justify-between gap-2", {
+          "w-full": stacked
+        }),
+        children: /*#__PURE__*/jsxRuntime.jsx(Tag__default["default"], {
+          "data-cy": "".concat(general.hyphenize(status), "-tag-container"),
+          label: t("neetoCustomDomains.status.cname.".concat(camelCasedStatus)),
+          style: status === "active" ? "success" : "warning"
+        })
+      })]
+    })
+  });
+};
+var TagBlock$1 = /*#__PURE__*/react.memo(TagBlock);
+
+var renderColumnData = function renderColumnData(enableManagePane, enableDeleteAlert) {
+  return [{
+    title: i18next.t("neetoCustomDomains.customDomain", constants.SINGULAR),
+    dataIndex: "hostname",
+    key: "hostname",
+    width: "60%",
+    render: function render(hostName, customDomain) {
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center justify-between gap-x-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          "data-cy": "hostname-button",
+          label: hostName,
+          style: "link",
+          onClick: function onClick() {
+            return enableManagePane(customDomain);
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(MoreDropdown__default["default"], {
+          dropdownButtonProps: {
+            "data-testid": "nui-dropdown-icon-".concat(customDomain.id)
+          },
+          dropdownProps: {
+            position: "bottom-end",
+            strategy: "fixed",
+            autoWidth: true
+          },
+          menuItems: [{
+            label: i18next.t("neetoCustomDomains.actions.edit"),
+            onClick: function onClick() {
+              return enableManagePane(customDomain);
+            },
+            key: "edit-custom-domain-button"
+          }, {
+            label: i18next.t("neetoCustomDomains.actions.delete"),
+            onClick: function onClick() {
+              return enableDeleteAlert(customDomain);
+            },
+            key: "delete-custom-domain"
+          }]
+        })]
+      });
+    }
+  }, {
+    title: i18next.t("neetoCustomDomains.common.status"),
+    dataIndex: "status",
+    key: "status",
+    render: function render(status) {
+      return /*#__PURE__*/jsxRuntime.jsx(TagBlock$1, {
+        status: status
+      });
+    },
+    width: "40%"
+  }];
+};
+
+var CustomDomainDashboard = function CustomDomainDashboard(_ref) {
+  var _data$customDomains, _data$customDomains2;
+  var headerProps = _ref.headerProps,
+    url = _ref.url,
+    onCreate = _ref.onCreate;
+  var _useState = react.useState(""),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
+  var _useState3 = react.useState(false),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    isPaneOpen = _useState4[0],
+    setIsPaneOpen = _useState4[1];
+  var _useState5 = react.useState({}),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    customDomain = _useState6[0],
+    setCustomDomain = _useState6[1];
+  var _useState7 = react.useState(false),
+    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    isAlertOpen = _useState8[0],
+    setIsAlertOpen = _useState8[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var debouncedSearchTerm = useDebounce__default["default"](searchTerm, 500);
+  var _useFetchCustomDomain = useFetchCustomDomains({
+      url: url,
+      params: {
+        searchTerm: debouncedSearchTerm
+      }
+    }),
+    data = _useFetchCustomDomain.data,
+    isLoading = _useFetchCustomDomain.isLoading;
+  var isFiltersVisible = neetoCist.isNotEmpty(data === null || data === void 0 ? void 0 : data.customDomains) || neetoCist.isPresent(searchTerm);
+  var _useDeleteCustomDomai = useDeleteCustomDomain(url, {
+      onSettled: function onSettled() {
+        setIsAlertOpen(false);
+        setCustomDomain({});
+      }
+    }),
+    deleteCustomDomain = _useDeleteCustomDomai.mutate,
+    isDeleting = _useDeleteCustomDomai.isPending;
+  var enableManagePane = function enableManagePane(customDomain) {
+    setCustomDomain(customDomain);
+    setIsPaneOpen(true);
+  };
+  var enableDeleteAlert = function enableDeleteAlert(customDomain) {
+    setCustomDomain(customDomain);
+    setIsAlertOpen(true);
+  };
+  var disableManagePane = function disableManagePane() {
+    setIsPaneOpen(false);
+    setCustomDomain({});
+  };
+  var disableDeleteAlert = function disableDeleteAlert() {
+    setIsAlertOpen(false);
+    setCustomDomain({});
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(Container__default["default"], {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Header$1, {
+        headerProps: headerProps,
+        isFiltersVisible: isFiltersVisible,
+        searchTerm: searchTerm,
+        setIsPaneOpen: setIsPaneOpen,
+        setSearchTerm: setSearchTerm
+      }), isLoading && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "h-screen w-full",
+        children: /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {})
+      }), !isLoading && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(SubHeader__default["default"], {
+          leftActionBlock: !!(data !== null && data !== void 0 && (_data$customDomains = data.customDomains) !== null && _data$customDomains !== void 0 && _data$customDomains.length) && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            className: "neeto-ui-gray-800 font-semibold",
+            component: "h4",
+            children: t("neetoCustomDomains.customDomainWithCount", {
+              count: data === null || data === void 0 ? void 0 : (_data$customDomains2 = data.customDomains) === null || _data$customDomains2 === void 0 ? void 0 : _data$customDomains2.length
+            })
+          })
+        }), neetoCist.isNotEmpty(data === null || data === void 0 ? void 0 : data.customDomains) ? /*#__PURE__*/jsxRuntime.jsx(TableWrapper__default["default"], {
+          children: /*#__PURE__*/jsxRuntime.jsx(Table__default["default"], {
+            fixedHeight: true,
+            allowRowClick: false,
+            rowData: data === null || data === void 0 ? void 0 : data.customDomains,
+            rowSelection: false,
+            columnData: renderColumnData(enableManagePane, enableDeleteAlert)
+          })
+        }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex h-full w-full flex-grow items-center justify-center",
+          children: /*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], {
+            title: t("neetoCustomDomains.notFound"),
+            helpText: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+              i18nKey: "neetoCustomDomains.learnMoreMessage",
+              components: {
+                button: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+                  href: "https://help.neetosite.com/p/a-95ad5b03",
+                  style: "link",
+                  target: "_blank"
+                })
+              }
+            }),
+            primaryButtonProps: {
+              label: t("neetoCustomDomains.addNew"),
+              onClick: function onClick() {
+                return setIsPaneOpen(true);
+              }
+            }
+          })
+        })]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Manage, {
+      customDomain: customDomain,
+      onCreate: onCreate,
+      setCustomDomain: setCustomDomain,
+      url: url,
+      hasOne: false,
+      isOpen: isPaneOpen,
+      onClose: disableManagePane
+    }), /*#__PURE__*/jsxRuntime.jsx(DeleteAlert, {
+      hostname: customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname,
+      isOpen: isAlertOpen,
+      isSubmitting: isDeleting,
+      onClose: disableDeleteAlert,
+      onSubmit: function onSubmit() {
+        return deleteCustomDomain(customDomain === null || customDomain === void 0 ? void 0 : customDomain.id);
+      }
+    })]
+  });
+};
+
+module.exports = CustomDomainDashboard;
+//# sourceMappingURL=CustomDomainDashboard.js.map