@bigbinary/neeto-molecules 1.3.9 → 1.3.11

package/dist/cjs/CustomDomain.js

@@ -0,0 +1,743 @@
+'use strict';
+
+var React = require('react');
+var neetoCist = require('@bigbinary/neeto-cist');
+var constants = require('@bigbinary/neeto-commons-frontend/constants');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var neetoIcons = require('@bigbinary/neeto-icons');
+var neetoui = require('@bigbinary/neetoui');
+var reactI18next = require('react-i18next');
+var formik = require('formik');
+var formik$1 = require('@bigbinary/neetoui/formik');
+var CopyToClipboardButton = require('@bigbinary/neeto-molecules/CopyToClipboardButton');
+var i18next = require('i18next');
+var ramda = require('ramda');
+var classnames = require('classnames');
+var Yup = require('yup');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var reactQuery = require('react-query');
+var axios = require('axios');
+
+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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var CopyToClipboardButton__default = /*#__PURE__*/_interopDefaultLegacy(CopyToClipboardButton);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var Yup__namespace = /*#__PURE__*/_interopNamespace(Yup);
+var axios__default = /*#__PURE__*/_interopDefaultLegacy(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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.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__default["default"].createElement(reactI18next.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 = neetoui.Dropdown.MenuItem,
+  Menu$1 = neetoui.Dropdown.Menu;
+var Submenu = function Submenu(_ref) {
+  var label = _ref.label,
+    key = _ref.key,
+    menuItemProps = _objectWithoutProperties(_ref, _excluded$2);
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, _extends({
+    customTarget: /*#__PURE__*/React__default["default"].createElement(MenuItem$1.Button, null, label),
+    key: key,
+    position: "left",
+    trigger: "hover"
+  }, menuItemProps.dropdownProps), /*#__PURE__*/React__default["default"].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__default["default"].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 = neetoui.Dropdown.MenuItem,
+  Divider = neetoui.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__default["default"].createElement(Divider, null);
+  }
+  if (hasSubItems) {
+    return /*#__PURE__*/React__default["default"].createElement(Submenu, _objectSpread$2({
+      label: label
+    }, menuItemProps));
+  }
+  return /*#__PURE__*/React__default["default"].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 = neetoui.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 = ramda.mergeRight(DEFAULT_TOOLTIP_PROPS, dropdownButtonProps.tooltipProps);
+  var targetIcon = isVertical ? neetoIcons.MenuVertical : neetoIcons.MenuHorizontal;
+  var isDropdownDisabled = isDisabled || dropdownProps.disabled;
+  if (isDropdownDisabled && !tooltipProps.disabled) {
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, tooltipProps, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(neetoui.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__default["default"].createElement(neetoui.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__default["default"].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__default["default"].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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var isDomainValidated = status === "active" || status === "pending_cname_validation";
+  var camelCasedStatus = neetoCist.snakeToCamelCase(status || "");
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classnames__default["default"]("flex gap-2", {
+      "flex-col items-start": stacked
+    })
+  }, status === "failed" ? /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
+    indicatorStyle: "danger",
+    label: t("neetoMolecules.customDomain.status.".concat(camelCasedStatus)),
+    style: "secondary"
+  }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
+    "data-cy": "".concat(utils.hyphenize(status), "-tag-container"),
+    indicatorStyle: isDomainValidated ? "success" : "warning",
+    style: "secondary",
+    label: t("neetoMolecules.customDomain.status.domain.".concat(camelCasedStatus))
+  }), isDomainValidated && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classnames__default["default"]("flex items-center justify-between gap-2", {
+      "w-full": stacked
+    })
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
+    "data-cy": "".concat(utils.hyphenize(status), "-tag-container"),
+    indicatorStyle: status === "active" ? "success" : "warning",
+    style: "secondary",
+    label: t("neetoMolecules.customDomain.status.cname.".concat(camelCasedStatus))
+  }))));
+};
+var TagBlock$1 = /*#__PURE__*/React__default["default"].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 ? i18next.t("neetoMolecules.customDomain.cname") : i18next.t("neetoMolecules.customDomain.domainValidationCname");
+  var recordDescription = isDomainValidated ? i18next.t("neetoMolecules.customDomain.validation.desc", {
+    record: recordType
+  }) : i18next.t("neetoMolecules.customDomain.validation.desc", {
+    record: recordType,
+    proxyMessage: i18next.t("neetoMolecules.customDomain.validation.proxyMessage")
+  });
+  var recordNameLabel = i18next.t("neetoMolecules.customDomain.validation.record", {
+    record: recordType,
+    type: i18next.t("neetoMolecules.common.name")
+  });
+  var recordValueLabel = i18next.t("neetoMolecules.customDomain.validation.record", {
+    record: recordType,
+    type: i18next.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__default["default"].createElement("div", {
+    className: "mt-6 grid gap-4"
+  }, customDomain.status !== "active" && /*#__PURE__*/React__default["default"].createElement(neetoui.Callout, {
+    icon: neetoIcons.Info,
+    style: "info"
+  }, recordDescription), /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+    disabled: true,
+    "data-cy": utils.joinHyphenCase(recordNameLabel),
+    label: recordNameLabel,
+    value: recordName,
+    suffix: /*#__PURE__*/React__default["default"].createElement(CopyToClipboardButton__default["default"], {
+      size: "small",
+      style: "text",
+      value: recordName
+    })
+  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
+    disabled: true,
+    "data-cy": utils.joinHyphenCase(recordValueLabel),
+    label: recordValueLabel,
+    value: recordValue,
+    suffix: /*#__PURE__*/React__default["default"].createElement(CopyToClipboardButton__default["default"], {
+      size: "small",
+      style: "text",
+      value: recordValue
+    })
+  }));
+};
+var Record$1 = /*#__PURE__*/React__default["default"].memo(Record);
+
+var StatusInfo = function StatusInfo() {
+  var helpUrl = "https://help.".concat(globalProps.appName.toLowerCase(), ".com/articles/custom-domains");
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "space-y-6"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-rounded neeto-ui-bg-gray-100 neeto-ui-text-gray-700 space-y-3 p-4"
+  }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
+    i18nKey: "neetoMolecules.customDomain.messageBlock.dnsStatus",
+    components: {
+      a: /*#__PURE__*/React__default["default"].createElement("a", {
+        className: "neeto-ui-btn--style-link",
+        href: helpUrl,
+        rel: "noreferrer",
+        target: "_blank"
+      })
+    }
+  })));
+};
+var StatusInfo$1 = /*#__PURE__*/React__default["default"].memo(StatusInfo);
+
+var getCustomDomainValidationSchema = function getCustomDomainValidationSchema() {
+  return Yup__namespace.object().shape({
+    hostname: Yup__namespace.string().required(i18next.t("neetoMolecules.customDomain.formikValidation.required")).matches(HOSTNAME_REGEX, i18next.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__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"));
+};
+var validateCname = function validateCname(url, id) {
+  return axios__default["default"].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 reactUtils.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 reactUtils.useMutationWithInvalidation(function (id) {
+    return customDomainApi.deleteCustomDomain(url, id);
+  }, _objectSpread({
+    keysToInvalidate: [DOMAIN_QUERY_KEY]
+  }, options));
+};
+var useFetchCustomDomains = function useFetchCustomDomains(params) {
+  return reactQuery.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 reactUtils.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 reactUtils.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 reactUtils.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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var initialFocusRef = React.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__default["default"].createElement(neetoui.Pane, {
+    initialFocusRef: initialFocusRef,
+    isOpen: isOpen,
+    onClose: onClose
+  }, /*#__PURE__*/React__default["default"].createElement(formik.Formik, {
+    enableReinitialize: true,
+    initialValues: customDomain || INITIAL_VALUES,
+    validationSchema: getCustomDomainValidationSchema(),
+    onSubmit: handleSubmit
+  }, function (_ref2) {
+    var dirty = _ref2.dirty;
+    return /*#__PURE__*/React__default["default"].createElement(formik.Form, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      "data-cy": "add-custom-domain-pane-heading",
+      style: "h2",
+      weight: "semibold"
+    }, neetoCist.isNotEmpty(customDomain) ? t("neetoMolecules.customDomain.edit") : t("neetoMolecules.customDomain.addNew"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "w-full space-y-6"
+    }, neetoCist.isNotEmpty(customDomain) && /*#__PURE__*/React__default["default"].createElement(TagBlock$1, {
+      stacked: true,
+      handleValidateCname: handleValidateCname,
+      isCnameRecordsAdded: customDomain.addedCnameAt,
+      status: customDomain.status
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "space-y-2"
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+      required: true,
+      htmlFor: "hostname"
+    }, neetoCist.isNotEmpty(customDomain) ? t("neetoMolecules.customDomain.customDomain", constants.SINGULAR) : t("neetoMolecules.customDomain.label")), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex items-start gap-2"
+    }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+      "data-cy": "custom-domain-input-field",
+      disabled: neetoCist.isNotEmpty(customDomain),
+      name: "hostname",
+      placeholder: t("neetoMolecules.customDomain.placeholder"),
+      ref: initialFocusRef
+    }), !neetoCist.isNotEmpty(customDomain) && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      "data-cy": "submit-custom-domain-button",
+      "data-testid": "submit-custom-domain-button",
+      disabled: !dirty || isCreating,
+      icon: neetoIcons.Check,
+      loading: isCreating,
+      style: "primary",
+      type: "submit"
+    }))), neetoCist.isNotEmpty(customDomain) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Record$1, {
+      customDomain: customDomain
+    }), customDomain.status === "pending_domain_validation" && /*#__PURE__*/React__default["default"].createElement(neetoui.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__default["default"].createElement(neetoui.Button, {
+      "data-cy": "validate-cname-record-button",
+      loading: isCnameValidating || isUpdating,
+      label: t("neetoMolecules.customDomain.validation.buttonLabel.cnameAdded"),
+      onClick: handleUpdateCname
+    }), /*#__PURE__*/React__default["default"].createElement(StatusInfo$1, null)))));
+  }));
+};
+
+var CustomDomain = function CustomDomain(_ref) {
+  var url = _ref.url,
+    iconOnly = _ref.iconOnly;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPaneOpen = _useState2[0],
+    setIsPaneOpen = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isAlertOpen = _useState4[0],
+    setIsAlertOpen = _useState4[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchCustomDomain = useFetchCustomDomains({
+      url: url
+    }),
+    customDomain = _useFetchCustomDomain.data,
+    isLoading = _useFetchCustomDomain.isLoading;
+  var _useDeleteCustomDomai = useDeleteCustomDomain(url, {
+      onSettled: function onSettled() {
+        return setIsAlertOpen(false);
+      }
+    }),
+    deleteCustomDomain = _useDeleteCustomDomai.mutate,
+    isDeleting = _useDeleteCustomDomai.isLoading;
+  var actions = [{
+    key: "edit",
+    label: t("neetoMolecules.common.actions.edit"),
+    onClick: function onClick() {
+      return setIsPaneOpen(true);
+    }
+  }, {
+    key: "delete",
+    label: t("neetoMolecules.common.actions.delete"),
+    onClick: function onClick() {
+      return setIsAlertOpen(true);
+    }
+  }];
+  if (isLoading) return /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null);
+  return /*#__PURE__*/React__default["default"].createElement("div", null, neetoCist.isNotEmpty(customDomain) ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex flex-row items-center"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
+    "data-cy": "".concat(utils.hyphenize(customDomain.status), "-tag-container"),
+    label: customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname,
+    style: customDomain.status === "active" ? "success" : "warning"
+  }), /*#__PURE__*/React__default["default"].createElement(MoreDropdown, {
+    dropdownProps: {
+      autoWidth: true
+    },
+    menuItems: actions,
+    dropdownButtonProps: {
+      "data-testid": "nui-dropdown-icon",
+      strategy: "fixed",
+      "data-cy": "custom-domain-menu-button"
+    }
+  })) : /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    icon: iconOnly && neetoIcons.CustomDomain,
+    style: "text",
+    label: iconOnly ? "" : t("neetoMolecules.common.actions.add", {
+      entity: t("neetoMolecules.customDomain.customDomain", constants.SINGULAR).toLowerCase()
+    }),
+    tooltipProps: iconOnly && {
+      content: t("neetoMolecules.customDomain.customDomain", constants.SINGULAR)
+    },
+    onClick: function onClick() {
+      return setIsPaneOpen(true);
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(Manage, {
+    hasOne: true,
+    customDomain: customDomain,
+    url: url,
+    isOpen: isPaneOpen,
+    setCustomDomain: neetoCist.noop,
+    onClose: function onClose() {
+      return setIsPaneOpen(false);
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(DeleteAlert, {
+    hostname: customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname,
+    isOpen: isAlertOpen,
+    isSubmitting: isDeleting,
+    onClose: function onClose() {
+      return setIsAlertOpen(false);
+    },
+    onSubmit: function onSubmit() {
+      return deleteCustomDomain();
+    }
+  }));
+};
+
+module.exports = CustomDomain;
+//# sourceMappingURL=CustomDomain.js.map