@bigbinary/neeto-molecules 1.1.78 → 1.2.0-beta2

package/dist/CustomDomain.js

@@ -1,630 +1,33 @@
-import React, { useRef, useState } from 'react';
-import { snakeToCamelCase, isNotEmpty, noop } from '@bigbinary/neeto-cist';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React__default, { useState } from 'react';
+import { isNotEmpty, noop } from '@bigbinary/neeto-cist';
 import { SINGULAR } from '@bigbinary/neeto-commons-frontend/constants';
-import { hyphenize, joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils';
-import { MenuVertical, MenuHorizontal, Info, Check, CustomDomain as CustomDomain$1 } from '@bigbinary/neeto-icons';
-import { Alert, Dropdown, Tooltip, Button, Tag, Callout, Input, Pane, Typography, Label, Spinner } from '@bigbinary/neetoui';
-import { useTranslation, Trans } from 'react-i18next';
-import { Formik, Form } from 'formik';
-import { Input as Input$1 } from '@bigbinary/neetoui/formik';
-import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
-import { t } from 'i18next';
-import { mergeRight } from 'ramda';
-import classnames from 'classnames';
-import * as Yup from 'yup';
-import { useMutationWithInvalidation } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { useQuery } from 'react-query';
-import axios from 'axios';
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-var DeleteAlert = function DeleteAlert(_ref) {
-  var onClose = _ref.onClose,
-    onSubmit = _ref.onSubmit,
-    isOpen = _ref.isOpen,
-    isSubmitting = _ref.isSubmitting,
-    hostname = _ref.hostname;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React.createElement(Alert, {
-    cancelButtonLabel: t("neetoMolecules.common.actions.cancel"),
-    isOpen: isOpen,
-    isSubmitting: isSubmitting,
-    submitButtonLabel: t("neetoMolecules.common.actions.delete"),
-    title: t("neetoMolecules.customDomain.delete"),
-    message: /*#__PURE__*/React.createElement(Trans, {
-      i18nKey: "neetoMolecules.customDomain.alertMessage",
-      values: {
-        hostname: hostname
-      }
-    }),
-    onClose: onClose,
-    onSubmit: onSubmit
-  });
-};
-
-var HOSTNAME_REGEX = /^(?!-)[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\.[a-zA-Z]{2,})+/;
-var INITIAL_VALUES = {
-  hostname: ""
-};
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
-}
-
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-var MENU_ITEM_TYPES = {
-  menuItem: "menuItem",
-  divider: "divider"
-};
-var DEFAULT_TOOLTIP_PROPS = {
-  disabled: true,
-  position: "bottom"
-};
-
-var _excluded$2 = ["label", "key"],
-  _excluded2 = ["isVisible", "key"];
-var MenuItem$1 = Dropdown.MenuItem,
-  Menu$1 = Dropdown.Menu;
-var Submenu = function Submenu(_ref) {
-  var label = _ref.label,
-    key = _ref.key,
-    menuItemProps = _objectWithoutProperties(_ref, _excluded$2);
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({
-    customTarget: /*#__PURE__*/React.createElement(MenuItem$1.Button, null, label),
-    key: key,
-    position: "left",
-    trigger: "hover"
-  }, menuItemProps.dropdownProps), /*#__PURE__*/React.createElement(Menu$1, null, menuItemProps.menuItems.map(function (_ref2) {
-    var _ref2$isVisible = _ref2.isVisible,
-      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
-      key = _ref2.key,
-      menuItemProps = _objectWithoutProperties(_ref2, _excluded2);
-    if (!isVisible) return null;
-    return /*#__PURE__*/React.createElement(MoreDropdownMenuItem, _extends({
-      key: key
-    }, menuItemProps));
-  })));
-};
-
-var _excluded$1 = ["onClick", "label", "type", "hasSubItems"];
-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 MenuItem = Dropdown.MenuItem,
-  Divider = Dropdown.Divider;
-var MoreDropdownMenuItem = function MoreDropdownMenuItem(_ref) {
-  var onClick = _ref.onClick,
-    label = _ref.label,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? MENU_ITEM_TYPES.menuItem : _ref$type,
-    _ref$hasSubItems = _ref.hasSubItems,
-    hasSubItems = _ref$hasSubItems === void 0 ? false : _ref$hasSubItems,
-    menuItemProps = _objectWithoutProperties(_ref, _excluded$1);
-  if (type === MENU_ITEM_TYPES.divider) {
-    return /*#__PURE__*/React.createElement(Divider, null);
-  }
-  if (hasSubItems) {
-    return /*#__PURE__*/React.createElement(Submenu, _objectSpread$2({
-      label: label
-    }, menuItemProps));
-  }
-  return /*#__PURE__*/React.createElement(MenuItem.Button, _objectSpread$2({
-    onClick: onClick
-  }, menuItemProps), label);
-};
-
-var _excluded = ["isVisible", "key"];
-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 Menu = Dropdown.Menu;
-var MoreDropdown = function MoreDropdown(_ref) {
-  var _ref$dropdownButtonPr = _ref.dropdownButtonProps,
-    dropdownButtonProps = _ref$dropdownButtonPr === void 0 ? {} : _ref$dropdownButtonPr,
-    _ref$isVertical = _ref.isVertical,
-    isVertical = _ref$isVertical === void 0 ? false : _ref$isVertical,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$dropdownProps = _ref.dropdownProps,
-    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
-    menuTopChildren = _ref.menuTopChildren,
-    menuBottomChildren = _ref.menuBottomChildren,
-    _ref$menuItems = _ref.menuItems,
-    menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems;
-  var tooltipProps = mergeRight(DEFAULT_TOOLTIP_PROPS, dropdownButtonProps.tooltipProps);
-  var targetIcon = isVertical ? MenuVertical : MenuHorizontal;
-  var isDropdownDisabled = isDisabled || dropdownProps.disabled;
-  if (isDropdownDisabled && !tooltipProps.disabled) {
-    return /*#__PURE__*/React.createElement(Tooltip, tooltipProps, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, _extends({
-      disabled: true,
-      "data-cy": "more-dropdown-button",
-      "data-testid": "nui-dropdown-button",
-      icon: targetIcon,
-      iconPosition: "right",
-      size: "medium",
-      style: "text"
-    }, dropdownButtonProps))));
-  }
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({
-    autoWidth: true,
-    className: "flex",
-    disabled: isDisabled,
-    icon: targetIcon,
-    buttonProps: _objectSpread$1({
-      className: "min-h-0 flex-shrink-0",
-      style: "text"
-    }, dropdownButtonProps)
-  }, dropdownProps), /*#__PURE__*/React.createElement(Menu, null, menuTopChildren, menuItems.map(function (_ref2) {
-    var _ref2$isVisible = _ref2.isVisible,
-      isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
-      key = _ref2.key,
-      menuItemProps = _objectWithoutProperties(_ref2, _excluded);
-    if (!isVisible) return null;
-    return /*#__PURE__*/React.createElement(MoreDropdownMenuItem, _extends({
-      key: key
-    }, menuItemProps));
-  }), menuBottomChildren));
-};
-
-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__*/React.createElement("div", {
-    className: classnames("flex gap-2", {
-      "flex-col items-start": stacked
-    })
-  }, status === "failed" ? /*#__PURE__*/React.createElement(Tag, {
-    indicatorStyle: "danger",
-    label: t("neetoMolecules.customDomain.status.".concat(camelCasedStatus)),
-    style: "secondary"
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tag, {
-    "data-cy": "".concat(hyphenize(status), "-tag-container"),
-    indicatorStyle: isDomainValidated ? "success" : "warning",
-    style: "secondary",
-    label: t("neetoMolecules.customDomain.status.domain.".concat(camelCasedStatus))
-  }), isDomainValidated && /*#__PURE__*/React.createElement("div", {
-    className: classnames("flex items-center justify-between gap-2", {
-      "w-full": stacked
-    })
-  }, /*#__PURE__*/React.createElement(Tag, {
-    "data-cy": "".concat(hyphenize(status), "-tag-container"),
-    indicatorStyle: status === "active" ? "success" : "warning",
-    style: "secondary",
-    label: t("neetoMolecules.customDomain.status.cname.".concat(camelCasedStatus))
-  }))));
-};
-var TagBlock$1 = /*#__PURE__*/React.memo(TagBlock);
-
-var recordData = function recordData(customDomain) {
-  var status = customDomain.status,
-    hostname = customDomain.hostname,
-    dnsTarget = customDomain.dnsTarget,
-    cnameValidationParams = customDomain.cnameValidationParams;
-  var isDomainValidated = status === "active" || status === "pending_cname_validation";
-  var recordName = isDomainValidated ? hostname : cnameValidationParams === null || cnameValidationParams === void 0 ? void 0 : cnameValidationParams.name;
-  var recordValue = isDomainValidated ? dnsTarget : cnameValidationParams === null || cnameValidationParams === void 0 ? void 0 : cnameValidationParams.value;
-  var recordType = isDomainValidated ? t("neetoMolecules.customDomain.cname") : t("neetoMolecules.customDomain.domainValidationCname");
-  var recordDescription = isDomainValidated ? t("neetoMolecules.customDomain.validation.desc", {
-    record: recordType
-  }) : t("neetoMolecules.customDomain.validation.desc", {
-    record: recordType,
-    proxyMessage: t("neetoMolecules.customDomain.validation.proxyMessage")
-  });
-  var recordNameLabel = t("neetoMolecules.customDomain.validation.record", {
-    record: recordType,
-    type: t("neetoMolecules.common.name")
-  });
-  var recordValueLabel = t("neetoMolecules.customDomain.validation.record", {
-    record: recordType,
-    type: t("neetoMolecules.common.value")
-  });
-  return {
-    recordName: recordName,
-    recordValue: recordValue,
-    recordDescription: recordDescription,
-    recordNameLabel: recordNameLabel,
-    recordValueLabel: recordValueLabel
-  };
-};
-
-var Record = function Record(_ref) {
-  var customDomain = _ref.customDomain;
-  var _recordData = recordData(customDomain),
-    recordName = _recordData.recordName,
-    recordValue = _recordData.recordValue,
-    recordDescription = _recordData.recordDescription,
-    recordNameLabel = _recordData.recordNameLabel,
-    recordValueLabel = _recordData.recordValueLabel;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "mt-6 grid gap-4"
-  }, customDomain.status !== "active" && /*#__PURE__*/React.createElement(Callout, {
-    icon: Info,
-    style: "info"
-  }, recordDescription), /*#__PURE__*/React.createElement(Input, {
-    disabled: true,
-    "data-cy": joinHyphenCase(recordNameLabel),
-    label: recordNameLabel,
-    value: recordName,
-    suffix: /*#__PURE__*/React.createElement(CopyToClipboardButton, {
-      size: "small",
-      style: "text",
-      value: recordName
-    })
-  }), /*#__PURE__*/React.createElement(Input, {
-    disabled: true,
-    "data-cy": joinHyphenCase(recordValueLabel),
-    label: recordValueLabel,
-    value: recordValue,
-    suffix: /*#__PURE__*/React.createElement(CopyToClipboardButton, {
-      size: "small",
-      style: "text",
-      value: recordValue
-    })
-  }));
-};
-var Record$1 = /*#__PURE__*/React.memo(Record);
-
-var StatusInfo = function StatusInfo() {
-  var helpUrl = "https://help.".concat(globalProps.appName.toLowerCase(), ".com/articles/custom-domains");
-  return /*#__PURE__*/React.createElement("div", {
-    className: "space-y-6"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-rounded neeto-ui-bg-gray-100 neeto-ui-text-gray-700 space-y-3 p-4"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: "neetoMolecules.customDomain.messageBlock.dnsStatus",
-    components: {
-      a: /*#__PURE__*/React.createElement("a", {
-        className: "neeto-ui-btn--style-link",
-        href: helpUrl,
-        rel: "noreferrer",
-        target: "_blank"
-      })
-    }
-  })));
-};
-var StatusInfo$1 = /*#__PURE__*/React.memo(StatusInfo);
-
-var getCustomDomainValidationSchema = function getCustomDomainValidationSchema() {
-  return Yup.object().shape({
-    hostname: Yup.string().required(t("neetoMolecules.customDomain.formikValidation.required")).matches(HOSTNAME_REGEX, t("neetoMolecules.customDomain.formikValidation.valid"))
-  });
-};
-
-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"));
-};
-var validateCname = function validateCname(url, id) {
-  return axios.patch("".concat(getUrlwithId(url, id), "/validate_cname"));
-};
-var customDomainApi = {
-  createCustomDomain: createCustomDomain,
-  deleteCustomDomain: deleteCustomDomain,
-  validateDomain: validateDomain,
-  fetchCustomDomains: fetchCustomDomains,
-  validateCname: validateCname,
-  updateCustomDomain: updateCustomDomain
-};
-
-var DOMAIN_QUERY_KEY = "custom-domain";
-
-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 useCreateCustomDomain = function useCreateCustomDomain(url) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useMutationWithInvalidation(function (payload) {
-    return customDomainApi.createCustomDomain(url, payload);
-  }, _objectSpread({
-    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 customDomainApi.deleteCustomDomain(url, id);
-  }, _objectSpread({
-    keysToInvalidate: [DOMAIN_QUERY_KEY]
-  }, options));
-};
-var useFetchCustomDomains = function useFetchCustomDomains(params) {
-  return useQuery([DOMAIN_QUERY_KEY, _objectSpread({}, params)], function () {
-    return customDomainApi.fetchCustomDomains(params);
-  });
-};
-var useValidateDomain = function useValidateDomain(url) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useMutationWithInvalidation(function (id) {
-    return customDomainApi.validateDomain(url, id);
-  }, _objectSpread({
-    keysToInvalidate: [DOMAIN_QUERY_KEY]
-  }, options));
-};
-var useValidateCname = function useValidateCname(url) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useMutationWithInvalidation(function (id) {
-    return customDomainApi.validateCname(url, id);
-  }, _objectSpread({
-    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 customDomainApi.updateCustomDomain(url, id);
-  }, _objectSpread({
-    keysToInvalidate: [DOMAIN_QUERY_KEY]
-  }, options));
-};
-
-var Manage = function Manage(_ref) {
-  var isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    customDomain = _ref.customDomain,
-    setCustomDomain = _ref.setCustomDomain,
-    url = _ref.url,
-    hasOne = _ref.hasOne;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var initialFocusRef = useRef(null);
-  var customDomainId = hasOne ? null : customDomain === null || customDomain === void 0 ? void 0 : customDomain.id;
-  var _useCreateCustomDomai = useCreateCustomDomain(url),
-    createCustomDomain = _useCreateCustomDomai.mutate,
-    isCreating = _useCreateCustomDomai.isLoading;
-  var _useValidateDomain = useValidateDomain(url),
-    validateDomain = _useValidateDomain.mutate,
-    isValidating = _useValidateDomain.isLoading;
-  var _useValidateCname = useValidateCname(url),
-    validateCname = _useValidateCname.mutate,
-    isCnameValidating = _useValidateCname.isLoading;
-  var _useUpdateCustomDomai = useUpdateCustomDomain(url),
-    updateCustomDomain = _useUpdateCustomDomai.mutate,
-    isUpdating = _useUpdateCustomDomai.isLoading;
-  var handleSubmit = function handleSubmit(values) {
-    return createCustomDomain(values, {
-      onSuccess: function onSuccess(values) {
-        return setCustomDomain(values);
-      }
-    });
-  };
-  var handleValidateDomain = function handleValidateDomain() {
-    return validateDomain(customDomainId, {
-      onSuccess: function onSuccess(values) {
-        return setCustomDomain(values);
-      }
-    });
-  };
-  var handleValidateCname = function handleValidateCname() {
-    validateCname(customDomainId, {
-      onSuccess: function onSuccess(data) {
-        return setCustomDomain(data);
-      }
-    });
-  };
-  var handleUpdateCname = function handleUpdateCname() {
-    updateCustomDomain(customDomainId, {
-      onSuccess: function onSuccess(data) {
-        return setCustomDomain(data);
-      }
-    });
-  };
-  return /*#__PURE__*/React.createElement(Pane, {
-    initialFocusRef: initialFocusRef,
-    isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(Formik, {
-    enableReinitialize: true,
-    initialValues: customDomain || INITIAL_VALUES,
-    validationSchema: getCustomDomainValidationSchema(),
-    onSubmit: handleSubmit
-  }, function (_ref2) {
-    var dirty = _ref2.dirty;
-    return /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-      "data-cy": "add-custom-domain-pane-heading",
-      style: "h2",
-      weight: "semibold"
-    }, isNotEmpty(customDomain) ? t("neetoMolecules.customDomain.edit") : t("neetoMolecules.customDomain.addNew"))), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
-      className: "w-full space-y-6"
-    }, isNotEmpty(customDomain) && /*#__PURE__*/React.createElement(TagBlock$1, {
-      stacked: true,
-      handleValidateCname: handleValidateCname,
-      isCnameRecordsAdded: customDomain.addedCnameAt,
-      status: customDomain.status
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "space-y-2"
-    }, /*#__PURE__*/React.createElement(Label, {
-      required: true,
-      htmlFor: "hostname"
-    }, isNotEmpty(customDomain) ? t("neetoMolecules.customDomain.customDomain", SINGULAR) : t("neetoMolecules.customDomain.label")), /*#__PURE__*/React.createElement("div", {
-      className: "flex items-start gap-2"
-    }, /*#__PURE__*/React.createElement(Input$1, {
-      "data-cy": "custom-domain-input-field",
-      disabled: isNotEmpty(customDomain),
-      name: "hostname",
-      placeholder: t("neetoMolecules.customDomain.placeholder"),
-      ref: initialFocusRef
-    }), !isNotEmpty(customDomain) && /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "submit-custom-domain-button",
-      "data-testid": "submit-custom-domain-button",
-      disabled: !dirty || isCreating,
-      icon: Check,
-      loading: isCreating,
-      style: "primary",
-      type: "submit"
-    }))), isNotEmpty(customDomain) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Record$1, {
-      customDomain: customDomain
-    }), customDomain.status === "pending_domain_validation" && /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "validate-domain-button",
-      disabled: isValidating,
-      loading: isValidating,
-      label: t("neetoMolecules.customDomain.validation.buttonLabel.domain"),
-      onClick: handleValidateDomain
-    }), customDomain.status === "pending_cname_validation" && /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "validate-cname-record-button",
-      loading: isCnameValidating || isUpdating,
-      label: t("neetoMolecules.customDomain.validation.buttonLabel.cnameAdded"),
-      onClick: handleUpdateCname
-    }), /*#__PURE__*/React.createElement(StatusInfo$1, null)))));
-  }));
-};
+import { hyphenize } from '@bigbinary/neeto-commons-frontend/utils/general';
+import { CustomDomain as CustomDomain$1 } from '@bigbinary/neeto-icons';
+import { Spinner, Tag, Button } from '@bigbinary/neetoui';
+import { useTranslation } from 'react-i18next';
+import { u as useFetchCustomDomains, a as useDeleteCustomDomain, M as Manage, D as DeleteAlert } from './index-7d311b7a.js';
+import MoreDropdown from './MoreDropdown.js';
+import 'formik';
+import '@bigbinary/neeto-hotkeys';
+import '@bigbinary/neetoui/formik';
+import 'i18next';
+import 'yup';
+import './CopyToClipboardButton.js';
+import '@babel/runtime/helpers/extends';
+import '@babel/runtime/helpers/defineProperty';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import 'classnames';
+import 'ramda';
+import './inject-css-c86de496.js';
+import '@tanstack/react-query';
+import '@bigbinary/neeto-commons-frontend/react-utils/useMutationWithInvalidation';
+import 'axios';
 
 var CustomDomain = function CustomDomain(_ref) {
   var url = _ref.url,
-    iconOnly = _ref.iconOnly;
+    iconOnly = _ref.iconOnly,
+    onCreate = _ref.onCreate;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPaneOpen = _useState2[0],
@@ -646,7 +49,7 @@ var CustomDomain = function CustomDomain(_ref) {
       }
     }),
     deleteCustomDomain = _useDeleteCustomDomai.mutate,
-    isDeleting = _useDeleteCustomDomai.isLoading;
+    isDeleting = _useDeleteCustomDomai.isPending;
   var actions = [{
     key: "edit",
     label: t("neetoMolecules.common.actions.edit"),
@@ -660,14 +63,14 @@ var CustomDomain = function CustomDomain(_ref) {
       return setIsAlertOpen(true);
     }
   }];
-  if (isLoading) return /*#__PURE__*/React.createElement(Spinner, null);
-  return /*#__PURE__*/React.createElement("div", null, isNotEmpty(customDomain) ? /*#__PURE__*/React.createElement("div", {
+  if (isLoading) return /*#__PURE__*/React__default.createElement(Spinner, null);
+  return /*#__PURE__*/React__default.createElement("div", null, isNotEmpty(customDomain) ? /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-row items-center"
-  }, /*#__PURE__*/React.createElement(Tag, {
+  }, /*#__PURE__*/React__default.createElement(Tag, {
     "data-cy": "".concat(hyphenize(customDomain.status), "-tag-container"),
     label: customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname,
     style: customDomain.status === "active" ? "success" : "warning"
-  }), /*#__PURE__*/React.createElement(MoreDropdown, {
+  }), /*#__PURE__*/React__default.createElement(MoreDropdown, {
     dropdownProps: {
       autoWidth: true
     },
@@ -677,11 +80,11 @@ var CustomDomain = function CustomDomain(_ref) {
       strategy: "fixed",
       "data-cy": "custom-domain-menu-button"
     }
-  })) : /*#__PURE__*/React.createElement(Button, {
+  })) : /*#__PURE__*/React__default.createElement(Button, {
     icon: iconOnly && CustomDomain$1,
     style: "text",
     label: iconOnly ? "" : t("neetoMolecules.common.actions.add", {
-      entity: t("neetoMolecules.customDomain.customDomain", SINGULAR).toLowerCase()
+      entity: t("neetoMolecules.customDomain.customDomain", SINGULAR)
     }),
     tooltipProps: iconOnly && {
       content: t("neetoMolecules.customDomain.customDomain", SINGULAR)
@@ -689,16 +92,17 @@ var CustomDomain = function CustomDomain(_ref) {
     onClick: function onClick() {
       return setIsPaneOpen(true);
     }
-  }), /*#__PURE__*/React.createElement(Manage, {
-    hasOne: true,
+  }), /*#__PURE__*/React__default.createElement(Manage, {
     customDomain: customDomain,
+    onCreate: onCreate,
     url: url,
+    hasOne: true,
     isOpen: isPaneOpen,
     setCustomDomain: noop,
     onClose: function onClose() {
       return setIsPaneOpen(false);
     }
-  }), /*#__PURE__*/React.createElement(DeleteAlert, {
+  }), /*#__PURE__*/React__default.createElement(DeleteAlert, {
     hostname: customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname,
     isOpen: isAlertOpen,
     isSubmitting: isDeleting,