@bigbinary/neeto-custom-domains-frontend 1.1.0

package/dist/CustomDomainDashboard.js

@@ -0,0 +1,906 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { memo, useState } from 'react';
+import { isNotEmpty, isPresent, snakeToCamelCase } from '@bigbinary/neeto-cist';
+import useDebounce from '@bigbinary/neeto-commons-frontend/react-utils/useDebounce';
+import Container from '@bigbinary/neeto-molecules/Container';
+import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
+import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
+import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
+import Table from '@bigbinary/neetoui/Table';
+import Typography from '@bigbinary/neetoui/Typography';
+import NoData from '@bigbinary/neetoui/NoData';
+import Button from '@bigbinary/neetoui/Button';
+import { Trans, useTranslation } from 'react-i18next';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { useQuery } from '@tanstack/react-query';
+import useMutationWithInvalidation from '@bigbinary/neeto-commons-frontend/react-utils/useMutationWithInvalidation';
+import axios from 'axios';
+import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
+import Alert from '@bigbinary/neetoui/Alert';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { PLURAL, SINGULAR } from '@bigbinary/neeto-commons-frontend/constants';
+import withT$1 from '@bigbinary/neeto-commons-frontend/react-utils/withT';
+import { withEventTargetValue, hyphenize } from '@bigbinary/neeto-commons-frontend/utils/general';
+import NeetoHeader from '@bigbinary/neeto-molecules/Header';
+import Pane from '@bigbinary/neetoui/Pane';
+import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
+import Input from '@bigbinary/neetoui/formik/Input';
+import FormikForm from '@bigbinary/neetoui/formik/Form';
+import { t as t$1 } from 'i18next';
+import * as Yup from 'yup';
+import Checkbox from '@bigbinary/neetoui/Checkbox';
+import Callout from '@bigbinary/neetoui/Callout';
+import Stepper from '@bigbinary/neetoui/Stepper';
+import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
+import Tag from '@bigbinary/neetoui/Tag';
+import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
+import Toastr from '@bigbinary/neetoui/Toastr';
+import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
+import classnames from '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.get(url, {
+    params: params
+  });
+};
+var updateCustomDomain = function updateCustomDomain(url, id) {
+  return axios.patch(getUrlwithId(url, id));
+};
+var createCustomDomain = function createCustomDomain(url, payload) {
+  return axios.post(url, payload);
+};
+var deleteCustomDomain = function deleteCustomDomain(url, id) {
+  return axios["delete"](getUrlwithId(url, id));
+};
+var validateDomain = function validateDomain(url, id) {
+  return axios.patch("".concat(getUrlwithId(url, id), "/validate_domain"), undefined, {
+    showToastr: false
+  });
+};
+var validateCname = function validateCname(url, id) {
+  return axios.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(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(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(function (id) {
+    return domainsApi.deleteCustomDomain(url, id);
+  }, _objectSpread$3({
+    keysToInvalidate: [[DOMAIN_QUERY_KEY]]
+  }, options));
+};
+var useFetchCustomDomains = function useFetchCustomDomains(params) {
+  return 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(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(function (id) {
+    return domainsApi.updateCustomDomain(url, id);
+  }, _objectSpread$3({
+    keysToInvalidate: [[DOMAIN_QUERY_KEY]]
+  }, options));
+};
+
+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
+      }
+    })
+  });
+});
+
+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 Header = withT$1(function (_ref) {
+  var t = _ref.t,
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    searchTerm = _ref.searchTerm,
+    setSearchTerm = _ref.setSearchTerm,
+    headerProps = _ref.headerProps,
+    isFiltersVisible = _ref.isFiltersVisible;
+  return /*#__PURE__*/jsx(NeetoHeader, _objectSpread$2({
+    "data-testid": "custom-domain-header",
+    title: t("neetoCustomDomains.customDomain", PLURAL),
+    actionBlock: /*#__PURE__*/jsx(Button, {
+      "data-cy": "add-new-custom-domain-button",
+      label: t("neetoCustomDomains.addNew"),
+      onClick: function onClick() {
+        return setIsPaneOpen(true);
+      }
+    }),
+    searchProps: isFiltersVisible && {
+      value: searchTerm,
+      onChange: withEventTargetValue(setSearchTerm),
+      placeholder: t("neetoCustomDomains.search"),
+      "data-cy": "custom-domain-search-field",
+      className: "w-56"
+    }
+  }, headerProps));
+});
+var Header$1 = /*#__PURE__*/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.object().shape({
+    hostname: Yup.string().required(t$1("neetoCustomDomains.formikValidation.required")).matches(HOSTNAME_REGEX, t$1("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 = 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__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        children: t("neetoCustomDomains.addNew")
+      })
+    }), /*#__PURE__*/jsx(FormikForm, {
+      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__*/jsxs("div", {
+          className: "w-full",
+          children: [/*#__PURE__*/jsx(Pane.Body, {
+            children: /*#__PURE__*/jsx(Input, {
+              required: true,
+              className: "w-full",
+              "data-cy": "custom-domain-input-field",
+              disabled: isNotEmpty(customDomain),
+              label: t("neetoCustomDomains.label"),
+              name: "hostname",
+              placeholder: t("neetoCustomDomains.placeholder")
+            })
+          }), /*#__PURE__*/jsx(Pane.Footer, {
+            children: /*#__PURE__*/jsx(ActionBlock, {
+              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 = withT(function (_ref) {
+  var t = _ref.t,
+    currentStep = _ref.currentStep,
+    handleStepChange = _ref.handleStepChange,
+    hostname = _ref.hostname;
+  return /*#__PURE__*/jsxs("div", {
+    className: "mb-6 w-full space-y-6",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "-ml-2",
+      children: /*#__PURE__*/jsx(Stepper, {
+        activeIndex: currentStep,
+        setActiveIndex: handleStepChange,
+        steps: STEPS
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "space-y-1",
+      children: [/*#__PURE__*/jsx(Typography, {
+        style: "h4",
+        children: t("neetoCustomDomains.yourDomain")
+      }), /*#__PURE__*/jsx(Typography, {
+        style: "body1",
+        children: hostname
+      })]
+    })]
+  });
+});
+
+var columnData = function columnData() {
+  return [{
+    title: t$1("neetoCustomDomains.common.record"),
+    key: "record",
+    dataIndex: "record",
+    width: "90px",
+    render: function render() {
+      return /*#__PURE__*/jsx(Typography, {
+        style: "body2",
+        children: t$1("neetoCustomDomains.cname")
+      });
+    }
+  }, {
+    title: t$1("neetoCustomDomains.common.name"),
+    dataIndex: "name",
+    width: "35%",
+    key: "name",
+    render: function render(name, _) {
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between gap-1",
+        children: [/*#__PURE__*/jsx(Typography, {
+          className: "min-w-0 truncate",
+          style: "body2",
+          children: name
+        }), /*#__PURE__*/jsx(CopyToClipboardButton, {
+          className: "flex-shrink-0",
+          size: "small",
+          style: "secondary",
+          value: name
+        })]
+      });
+    }
+  }, {
+    title: t$1("neetoCustomDomains.common.value"),
+    dataIndex: "value",
+    width: "35%",
+    key: "value",
+    render: function render(value, _) {
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between gap-1",
+        children: [/*#__PURE__*/jsx(Typography, {
+          className: "min-w-0 truncate",
+          style: "body2",
+          children: value
+        }), /*#__PURE__*/jsx(CopyToClipboardButton, {
+          value: value,
+          className: "flex-shrink-0",
+          size: "small",
+          style: "secondary"
+        })]
+      });
+    }
+  }, {
+    title: t$1("neetoCustomDomains.common.status"),
+    dataIndex: "status",
+    key: "status",
+    width: "130px",
+    render: function render(status) {
+      return /*#__PURE__*/jsx(Tag, {
+        label: t$1("neetoCustomDomains.common.".concat(status)),
+        style: status === "success" ? "success" : "warning"
+      });
+    }
+  }];
+};
+
+var HELP_DOC_URL = "https://help.".concat(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 = useTranslation(),
+    t = _useTranslation.t;
+  var id = customDomain.id,
+    hostname = customDomain.hostname,
+    dnsTarget = customDomain.dnsTarget,
+    addedCnameAt = customDomain.addedCnameAt,
+    status = customDomain.status;
+  var cnameAdded = isPresent(addedCnameAt);
+  var customDomainId = hasOne ? null : id;
+  var _useState = useState(cnameAdded),
+    _useState2 = _slicedToArray(_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__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(Pane.Body, {
+      children: [/*#__PURE__*/jsx(Common, {
+        currentStep: currentStep,
+        handleStepChange: handleStepChange,
+        hostname: hostname
+      }), /*#__PURE__*/jsxs("div", {
+        className: "mb-6 w-full space-y-6",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "space-y-1",
+          children: [/*#__PURE__*/jsx(Typography, {
+            style: "h4",
+            children: t("neetoCustomDomains.domainRedirection")
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body2",
+            children: /*#__PURE__*/jsx(Trans, {
+              i18nKey: "neetoCustomDomains.cnameRecordInfo",
+              components: {
+                Link: /*#__PURE__*/jsx(Button, {
+                  href: HELP_DOC_URL,
+                  rel: "noreferrer",
+                  style: "link",
+                  target: "_blank"
+                })
+              }
+            })
+          })]
+        }), /*#__PURE__*/jsx(TableWrapper, {
+          className: "pb-0",
+          children: /*#__PURE__*/jsx(Table, {
+            allowRowClick: false,
+            columnData: columnData(),
+            rowSelection: false,
+            rowData: [{
+              name: hostname,
+              value: dnsTarget,
+              status: status === "active" ? "success" : "pending"
+            }]
+          })
+        }), /*#__PURE__*/jsx(Checkbox, {
+          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__*/jsx(Callout, {
+        style: "warning",
+        children: /*#__PURE__*/jsx(Typography, {
+          style: "body2",
+          children: /*#__PURE__*/jsx(Trans, {
+            i18nKey: "neetoCustomDomains.domainRedirectionInfo",
+            values: {
+              hostname: hostname
+            },
+            components: {
+              Link: /*#__PURE__*/jsx(Button, {
+                href: HELP_DOC_URL,
+                rel: "noreferrer",
+                style: "link",
+                target: "_blank"
+              })
+            }
+          })
+        })
+      })]
+    }), /*#__PURE__*/jsx(Pane.Footer, {
+      children: /*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [status !== "active" ? /*#__PURE__*/jsx(Button, {
+          disabled: isUpdating || !addedRedirectionCname,
+          label: t("neetoCustomDomains.actions.continue"),
+          loading: isUpdating,
+          onClick: handleUpdateCname
+        }) : /*#__PURE__*/jsx(Button, {
+          label: t("neetoCustomDomains.actions.done"),
+          onClick: onClose
+        }), /*#__PURE__*/jsx(Button, {
+          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(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 = 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 = useState(false),
+    _useState2 = _slicedToArray(_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.success(t("neetoCustomDomains.validation.successMessage"));
+        incrementStep();
+        setCustomDomain(values);
+      }
+    });
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(Pane.Body, {
+      children: [/*#__PURE__*/jsx(Common, {
+        currentStep: currentStep,
+        handleStepChange: handleStepChange,
+        hostname: hostname
+      }), /*#__PURE__*/jsxs("div", {
+        className: "mb-6 w-full space-y-6",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "space-y-1",
+          children: [/*#__PURE__*/jsx(Typography, {
+            style: "h4",
+            children: t("neetoCustomDomains.domainValidation")
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body2",
+            children: /*#__PURE__*/jsx(Trans, {
+              i18nKey: "neetoCustomDomains.cnameRecordInfo",
+              components: {
+                Link: /*#__PURE__*/jsx(Button, {
+                  href: HELP_DOC_URL,
+                  rel: "noreferrer",
+                  style: "link",
+                  target: "_blank"
+                })
+              },
+              values: {
+                proxyMessage: t("neetoCustomDomains.proxyMessage")
+              }
+            })
+          })]
+        }), /*#__PURE__*/jsx(TableWrapper, {
+          className: "pb-0",
+          children: /*#__PURE__*/jsx(Table, {
+            allowRowClick: false,
+            columnData: columnData(),
+            rowSelection: false,
+            rowData: [_objectSpread$1(_objectSpread$1({}, cnameValidationParams), {}, {
+              status: isDomainValidated ? "success" : "pending"
+            })]
+          })
+        })]
+      }), showValidationWarning && /*#__PURE__*/jsx(Callout, {
+        style: "warning",
+        children: /*#__PURE__*/jsx(Typography, {
+          style: "body2",
+          children: /*#__PURE__*/jsx(Trans, {
+            i18nKey: "neetoCustomDomains.domainValidationInfo",
+            components: {
+              Link: /*#__PURE__*/jsx(Button, {
+                href: HELP_DOC_URL,
+                rel: "noreferrer",
+                style: "link",
+                target: "_blank"
+              })
+            }
+          })
+        })
+      })]
+    }), /*#__PURE__*/jsx(Pane.Footer, {
+      children: /*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/*#__PURE__*/jsx(Button, {
+          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__*/jsx(Button, {
+          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(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 = useTranslation(),
+    t = _useTranslation.t;
+  var status = customDomain.status;
+  var _useState = useState(STATUS_INDEX.indexOf(status)),
+    _useState2 = _slicedToArray(_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__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        children: t("neetoCustomDomains.settings")
+      })
+    }), isNotValidationStep ? /*#__PURE__*/jsx(Redirection, _objectSpread({}, recordProps)) : /*#__PURE__*/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__*/jsx(Pane, {
+    isOpen: isOpen,
+    onClose: onClose,
+    className: "neeto-molecule-custom-domain-pane",
+    size: "large",
+    children: customDomain !== null && customDomain !== void 0 && customDomain.id ? /*#__PURE__*/jsx(Settings, {
+      customDomain: customDomain,
+      hasOne: hasOne,
+      onClose: onClose,
+      setCustomDomain: setCustomDomain,
+      url: url
+    }) : /*#__PURE__*/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 = useTranslation(),
+    t = _useTranslation.t;
+  var isDomainValidated = status === "active" || status === "pending_cname_validation";
+  var camelCasedStatus = snakeToCamelCase(status || "");
+  return /*#__PURE__*/jsx("div", {
+    className: classnames("flex gap-2", {
+      "flex-col items-start": stacked
+    }),
+    children: status === "failed" ? /*#__PURE__*/jsx(Tag, {
+      label: t("neetoCustomDomains.status.".concat(camelCasedStatus)),
+      style: "danger"
+    }) : /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(Tag, {
+        "data-cy": "".concat(hyphenize(status), "-tag-container"),
+        label: t("neetoCustomDomains.status.domain.".concat(camelCasedStatus)),
+        style: isDomainValidated ? "success" : "warning"
+      }), isDomainValidated && /*#__PURE__*/jsx("div", {
+        className: classnames("flex items-center justify-between gap-2", {
+          "w-full": stacked
+        }),
+        children: /*#__PURE__*/jsx(Tag, {
+          "data-cy": "".concat(hyphenize(status), "-tag-container"),
+          label: t("neetoCustomDomains.status.cname.".concat(camelCasedStatus)),
+          style: status === "active" ? "success" : "warning"
+        })
+      })]
+    })
+  });
+};
+var TagBlock$1 = /*#__PURE__*/memo(TagBlock);
+
+var renderColumnData = function renderColumnData(enableManagePane, enableDeleteAlert) {
+  return [{
+    title: t$1("neetoCustomDomains.customDomain", SINGULAR),
+    dataIndex: "hostname",
+    key: "hostname",
+    width: "60%",
+    render: function render(hostName, customDomain) {
+      return /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between gap-x-3",
+        children: [/*#__PURE__*/jsx(Button, {
+          "data-cy": "hostname-button",
+          label: hostName,
+          style: "link",
+          onClick: function onClick() {
+            return enableManagePane(customDomain);
+          }
+        }), /*#__PURE__*/jsx(MoreDropdown, {
+          dropdownButtonProps: {
+            "data-testid": "nui-dropdown-icon-".concat(customDomain.id)
+          },
+          dropdownProps: {
+            position: "bottom-end",
+            strategy: "fixed",
+            autoWidth: true
+          },
+          menuItems: [{
+            label: t$1("neetoCustomDomains.actions.edit"),
+            onClick: function onClick() {
+              return enableManagePane(customDomain);
+            },
+            key: "edit-custom-domain-button"
+          }, {
+            label: t$1("neetoCustomDomains.actions.delete"),
+            onClick: function onClick() {
+              return enableDeleteAlert(customDomain);
+            },
+            key: "delete-custom-domain"
+          }]
+        })]
+      });
+    }
+  }, {
+    title: t$1("neetoCustomDomains.common.status"),
+    dataIndex: "status",
+    key: "status",
+    render: function render(status) {
+      return /*#__PURE__*/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 = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isPaneOpen = _useState4[0],
+    setIsPaneOpen = _useState4[1];
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    customDomain = _useState6[0],
+    setCustomDomain = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isAlertOpen = _useState8[0],
+    setIsAlertOpen = _useState8[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var debouncedSearchTerm = useDebounce(searchTerm, 500);
+  var _useFetchCustomDomain = useFetchCustomDomains({
+      url: url,
+      params: {
+        searchTerm: debouncedSearchTerm
+      }
+    }),
+    data = _useFetchCustomDomain.data,
+    isLoading = _useFetchCustomDomain.isLoading;
+  var isFiltersVisible = isNotEmpty(data === null || data === void 0 ? void 0 : data.customDomains) || 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__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(Container, {
+      children: [/*#__PURE__*/jsx(Header$1, {
+        headerProps: headerProps,
+        isFiltersVisible: isFiltersVisible,
+        searchTerm: searchTerm,
+        setIsPaneOpen: setIsPaneOpen,
+        setSearchTerm: setSearchTerm
+      }), isLoading && /*#__PURE__*/jsx("div", {
+        className: "h-screen w-full",
+        children: /*#__PURE__*/jsx(PageLoader, {})
+      }), !isLoading && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(SubHeader, {
+          leftActionBlock: !!(data !== null && data !== void 0 && (_data$customDomains = data.customDomains) !== null && _data$customDomains !== void 0 && _data$customDomains.length) && /*#__PURE__*/jsx(Typography, {
+            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
+            })
+          })
+        }), isNotEmpty(data === null || data === void 0 ? void 0 : data.customDomains) ? /*#__PURE__*/jsx(TableWrapper, {
+          children: /*#__PURE__*/jsx(Table, {
+            fixedHeight: true,
+            allowRowClick: false,
+            rowData: data === null || data === void 0 ? void 0 : data.customDomains,
+            rowSelection: false,
+            columnData: renderColumnData(enableManagePane, enableDeleteAlert)
+          })
+        }) : /*#__PURE__*/jsx("div", {
+          className: "flex h-full w-full flex-grow items-center justify-center",
+          children: /*#__PURE__*/jsx(NoData, {
+            title: t("neetoCustomDomains.notFound"),
+            helpText: /*#__PURE__*/jsx(Trans, {
+              i18nKey: "neetoCustomDomains.learnMoreMessage",
+              components: {
+                button: /*#__PURE__*/jsx(Button, {
+                  href: "https://help.neetosite.com/p/a-95ad5b03",
+                  style: "link",
+                  target: "_blank"
+                })
+              }
+            }),
+            primaryButtonProps: {
+              label: t("neetoCustomDomains.addNew"),
+              onClick: function onClick() {
+                return setIsPaneOpen(true);
+              }
+            }
+          })
+        })]
+      })]
+    }), /*#__PURE__*/jsx(Manage, {
+      customDomain: customDomain,
+      onCreate: onCreate,
+      setCustomDomain: setCustomDomain,
+      url: url,
+      hasOne: false,
+      isOpen: isPaneOpen,
+      onClose: disableManagePane
+    }), /*#__PURE__*/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);
+      }
+    })]
+  });
+};
+
+export { CustomDomainDashboard as default };
+//# sourceMappingURL=CustomDomainDashboard.js.map