@bigbinary/neeto-molecules 1.0.0

package/dist/CustomDomain.js

@@ -0,0 +1,732 @@
+import React, { useState } from 'react';
+import { snakeToCamelCase, isNotEmpty } from '@bigbinary/neeto-commons-frontend/pure';
+import { useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { Tag, Button, Dropdown, Callout, Input, Pane, Typography, Label, PageLoader, Table, NoData, Alert } from '@bigbinary/neetoui';
+import { Container, Header, SubHeader } from '@bigbinary/neetoui/layouts';
+import { useTranslation, Trans } from 'react-i18next';
+import { MenuHorizontal, Info, Copy, Check } from '@bigbinary/neeto-icons';
+import { Input as Input$1 } from '@bigbinary/neetoui/formik';
+import { Formik, Form } from 'formik';
+import { joinHyphenCase, copyToClipboard, timeFormat } from '@bigbinary/neeto-commons-frontend/utils';
+import { t } from 'i18next';
+import * as Yup from 'yup';
+import { useQueryClient, useMutation, useQuery } from 'react-query';
+import axios from 'axios';
+
+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);
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
+    try {
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+    return _arr;
+  }
+}
+
+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 DEFAULT_STALE_TIME = 60 * 60 * 1000;
+var DOMAIN_QUERY_KEY = "custom-domain";
+var ENTITY_COUNT = {
+  singular: 1,
+  plural: 2
+};
+
+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: ""
+};
+
+var classnames$1 = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+	/* global define */
+
+	(function () {
+
+		var hasOwn = {}.hasOwnProperty;
+
+		function classNames() {
+			var classes = [];
+
+			for (var i = 0; i < arguments.length; i++) {
+				var arg = arguments[i];
+				if (!arg) continue;
+
+				var argType = typeof arg;
+
+				if (argType === 'string' || argType === 'number') {
+					classes.push(arg);
+				} else if (Array.isArray(arg)) {
+					if (arg.length) {
+						var inner = classNames.apply(null, arg);
+						if (inner) {
+							classes.push(inner);
+						}
+					}
+				} else if (argType === 'object') {
+					if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+						classes.push(arg.toString());
+						continue;
+					}
+
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				}
+			}
+
+			return classes.join(' ');
+		}
+
+		if (module.exports) {
+			classNames.default = classNames;
+			module.exports = classNames;
+		} else {
+			window.classNames = classNames;
+		}
+	}());
+} (classnames$1));
+
+var classnames = classnames$1.exports;
+
+var TagBlock = function TagBlock(_ref) {
+  var status = _ref.status,
+    isCnameRecordsAdded = _ref.isCnameRecordsAdded,
+    _ref$stacked = _ref.stacked,
+    stacked = _ref$stacked === void 0 ? false : _ref$stacked,
+    handleValidateCname = _ref.handleValidateCname;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var isTxtValidated = 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, {
+    indicatorStyle: isTxtValidated ? "success" : "warning",
+    style: "secondary",
+    label: t("neetoMolecules.customDomain.status.txt.".concat(camelCasedStatus))
+  }), isTxtValidated && /*#__PURE__*/React.createElement("div", {
+    className: classnames("flex items-center justify-between gap-2", {
+      "w-full": stacked
+    })
+  }, /*#__PURE__*/React.createElement(Tag, {
+    indicatorStyle: status === "active" ? "success" : "warning",
+    style: "secondary",
+    label: t("neetoMolecules.customDomain.status.cname.".concat(camelCasedStatus))
+  }), isCnameRecordsAdded && status === "pending_cname_validation" && /*#__PURE__*/React.createElement(Button, {
+    className: "text-xs",
+    style: "link",
+    label: t("neetoMolecules.customDomain.validation.buttonLabel.cnameCheck"),
+    onClick: handleValidateCname
+  }))));
+};
+
+var Menu = Dropdown.Menu,
+  MenuItem = Dropdown.MenuItem;
+var renderColumnData = function renderColumnData(enableManagePane, enableDeleteAlert) {
+  return [{
+    title: t("neetoMolecules.customDomain.customDomain", {
+      count: ENTITY_COUNT.singular
+    }),
+    dataIndex: "hostname",
+    key: "hostname"
+  }, {
+    title: t("neetoMolecules.common.status"),
+    dataIndex: "status",
+    key: "status",
+    render: function render(status) {
+      return /*#__PURE__*/React.createElement(TagBlock, {
+        status: status
+      });
+    },
+    width: "40%"
+  }, {
+    id: "actions",
+    width: "10%",
+    render: function render(_, customDomain) {
+      return /*#__PURE__*/React.createElement("div", {
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }, /*#__PURE__*/React.createElement(Dropdown, {
+        autoWidth: true,
+        buttonProps: {
+          style: "text"
+        },
+        icon: MenuHorizontal,
+        position: "bottom-end",
+        strategy: "fixed"
+      }, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem.Button, {
+        onClick: function onClick() {
+          return enableManagePane(customDomain);
+        }
+      }, t("neetoMolecules.common.actions.edit")), /*#__PURE__*/React.createElement(MenuItem.Button, {
+        onClick: function onClick() {
+          return enableDeleteAlert(customDomain);
+        }
+      }, t("neetoMolecules.common.actions.delete")))));
+    }
+  }];
+};
+var recordData = function recordData(customDomain) {
+  var status = customDomain.status,
+    hostname = customDomain.hostname,
+    dnsTarget = customDomain.dnsTarget,
+    txtValue = customDomain.txtValue;
+  var isTxtValidated = status === "active" || status === "pending_cname_validation";
+  var recordName = isTxtValidated ? hostname : "_acme-challenge.".concat(hostname);
+  var recordValue = isTxtValidated ? dnsTarget : txtValue;
+  var recordType = isTxtValidated ? "CNAME" : "TXT";
+  var recordDescription = t("neetoMolecules.customDomain.validation.desc", {
+    record: recordType
+  });
+  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: "grid gap-4 mt-6"
+  }, 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(Button, {
+      icon: Copy,
+      style: "text",
+      onClick: function onClick() {
+        return copyToClipboard(recordName);
+      }
+    })
+  }), /*#__PURE__*/React.createElement(Input, {
+    disabled: true,
+    "data-cy": joinHyphenCase(recordValueLabel),
+    label: recordValueLabel,
+    value: recordValue,
+    suffix: /*#__PURE__*/React.createElement(Button, {
+      icon: Copy,
+      style: "text",
+      onClick: function onClick() {
+        return copyToClipboard(recordValue);
+      }
+    })
+  }));
+};
+
+var CustomDomainInfo = function CustomDomainInfo(_ref) {
+  var time = _ref.time;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "space-y-6"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "p-4 neeto-ui-rounded neeto-ui-bg-gray-100 space-y-3 neeto-ui-text-gray-700"
+  }, /*#__PURE__*/React.createElement(Trans, {
+    i18nKey: "neetoMolecules.customDomain.messageBlock.dnsStatus"
+  }), /*#__PURE__*/React.createElement(Button, {
+    href: "mailto:support@neeto.com",
+    label: "support@neeto.com",
+    style: "link"
+  })), /*#__PURE__*/React.createElement(Callout, {
+    icon: Info,
+    style: "info"
+  }, t("neetoMolecules.customDomain.messageBlock.cnameAddedTime", {
+    time: timeFormat.fromNow(time)
+  })));
+};
+
+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"))
+  });
+};
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+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;
+}
+
+var customDomainsUrl = "custom_domains/domains";
+var fetchCustomDomains = function fetchCustomDomains(payload) {
+  return axios.get(customDomainsUrl, {
+    params: payload
+  });
+};
+var updateCustomDomain = function updateCustomDomain(id) {
+  return axios.patch("".concat(customDomainsUrl, "/").concat(id));
+};
+var createCustomDomain = function createCustomDomain(payload) {
+  return axios.post(customDomainsUrl, payload);
+};
+var deleteCustomDomain = function deleteCustomDomain(id) {
+  return axios["delete"]("".concat(customDomainsUrl, "/").concat(id));
+};
+var validateTxt = function validateTxt(id) {
+  return axios.patch("".concat(customDomainsUrl, "/").concat(id, "/validate_txt"));
+};
+var validateCname = function validateCname(id) {
+  return axios.patch("".concat(customDomainsUrl, "/").concat(id, "/validate_cname"));
+};
+var customDomainApi = {
+  createCustomDomain: createCustomDomain,
+  deleteCustomDomain: deleteCustomDomain,
+  validateTxt: validateTxt,
+  fetchCustomDomains: fetchCustomDomains,
+  validateCname: validateCname,
+  updateCustomDomain: updateCustomDomain
+};
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var useCreateCustomDomain = function useCreateCustomDomain() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var queryClient = useQueryClient();
+  return useMutation(function (payload) {
+    return customDomainApi.createCustomDomain(payload);
+  }, _objectSpread(_objectSpread({}, options), {}, {
+    onSuccess: function onSuccess() {
+      return queryClient.invalidateQueries(DOMAIN_QUERY_KEY);
+    }
+  }));
+};
+var useDeleteCustomDomain = function useDeleteCustomDomain() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var queryClient = useQueryClient();
+  return useMutation(function (id) {
+    return customDomainApi.deleteCustomDomain(id);
+  }, _objectSpread(_objectSpread({}, options), {}, {
+    onSuccess: function onSuccess(result) {
+      var _options$onSuccess;
+      (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(options, result);
+      queryClient.invalidateQueries(DOMAIN_QUERY_KEY);
+    }
+  }));
+};
+var useFetchCustomDomains = function useFetchCustomDomains(payload) {
+  return useQuery([DOMAIN_QUERY_KEY, _objectSpread({}, payload)], function () {
+    return customDomainApi.fetchCustomDomains(payload);
+  }, {
+    staleTime: DEFAULT_STALE_TIME
+  });
+};
+var useValidateTxt = function useValidateTxt() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var queryClient = useQueryClient();
+  return useMutation(function (id) {
+    return customDomainApi.validateTxt(id);
+  }, _objectSpread(_objectSpread({}, options), {}, {
+    onSuccess: function onSuccess() {
+      return queryClient.invalidateQueries(DOMAIN_QUERY_KEY);
+    }
+  }));
+};
+var useValidateCname = function useValidateCname() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var queryClient = useQueryClient();
+  return useMutation(function (id) {
+    return customDomainApi.validateCname(id);
+  }, _objectSpread(_objectSpread({}, options), {}, {
+    onSuccess: function onSuccess() {
+      return queryClient.invalidateQueries(DOMAIN_QUERY_KEY);
+    }
+  }));
+};
+var useUpdateCustomDomain = function useUpdateCustomDomain() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var queryClient = useQueryClient();
+  return useMutation(function (id) {
+    return customDomainApi.updateCustomDomain(id);
+  }, _objectSpread(_objectSpread({}, options), {}, {
+    onSuccess: function onSuccess() {
+      return queryClient.invalidateQueries(DOMAIN_QUERY_KEY);
+    }
+  }));
+};
+
+var Manage = function Manage(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    customDomain = _ref.customDomain,
+    setCustomDomain = _ref.setCustomDomain;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useCreateCustomDomai = useCreateCustomDomain(),
+    createCustomDomain = _useCreateCustomDomai.mutate,
+    isCreating = _useCreateCustomDomai.isLoading;
+  var _useValidateTxt = useValidateTxt(),
+    validateTxt = _useValidateTxt.mutate,
+    isValidating = _useValidateTxt.isLoading;
+  var _useValidateCname = useValidateCname(),
+    validateCname = _useValidateCname.mutate,
+    isCnameValidating = _useValidateCname.isLoading;
+  var _useUpdateCustomDomai = useUpdateCustomDomain(),
+    updateCustomDomain = _useUpdateCustomDomai.mutate,
+    isUpdating = _useUpdateCustomDomai.isLoading;
+  var handleSubmit = function handleSubmit(values) {
+    return createCustomDomain(values, {
+      onSuccess: function onSuccess(values) {
+        return setCustomDomain(values);
+      }
+    });
+  };
+  var handleValidateTxt = function handleValidateTxt() {
+    return validateTxt(customDomain.id, {
+      onSuccess: function onSuccess(values) {
+        return setCustomDomain(values);
+      }
+    });
+  };
+  var handleValidateCname = function handleValidateCname() {
+    validateCname(customDomain.id, {
+      onSuccess: function onSuccess(data) {
+        return setCustomDomain(data);
+      }
+    });
+  };
+  var handleUpdateCname = function handleUpdateCname() {
+    updateCustomDomain(customDomain.id, {
+      onSuccess: function onSuccess(data) {
+        return setCustomDomain(data);
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(Pane, {
+    isOpen: isOpen,
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement(Formik, {
+    enableReinitialize: true,
+    initialValues: customDomain || INITIAL_VALUES,
+    validateOnBlur: isCreating,
+    validateOnChange: isCreating,
+    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"
+    }, customDomain ? t("neetoMolecules.common.actions.editTitle", {
+      entity: t("neetoMolecules.customDomain.customDomain", {
+        count: ENTITY_COUNT.singular
+      }).toLocaleLowerCase()
+    }) : t("neetoMolecules.common.actions.addNew", {
+      entity: t("neetoMolecules.customDomain.customDomain", {
+        count: ENTITY_COUNT.singular
+      }).toLocaleLowerCase()
+    }))), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
+      className: "space-y-6 w-full"
+    }, !!customDomain && /*#__PURE__*/React.createElement(TagBlock, {
+      stacked: true,
+      handleValidateCname: handleValidateCname,
+      isCnameRecordsAdded: customDomain.addedCnameAt,
+      status: customDomain.status
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "space-y-2"
+    }, /*#__PURE__*/React.createElement(Label, {
+      htmlFor: "hostname"
+    }, customDomain ? t("neetoMolecules.customDomain.customDomain", {
+      count: ENTITY_COUNT.singular
+    }) : t("neetoMolecules.customDomain.label")), /*#__PURE__*/React.createElement("div", {
+      className: "flex items-start gap-2"
+    }, /*#__PURE__*/React.createElement(Input$1, {
+      autoFocus: true,
+      "data-cy": "custom-domain-input-field",
+      disabled: !!customDomain,
+      name: "hostname",
+      placeholder: t("neetoMolecules.customDomain.placeholder")
+    }), !customDomain && /*#__PURE__*/React.createElement(Button, {
+      "data-cy": "submit-custom-domain-button",
+      disabled: !dirty || isCreating,
+      icon: Check,
+      loading: isCreating,
+      style: "primary",
+      type: "submit"
+    }))), !!customDomain && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Record, {
+      customDomain: customDomain
+    }), customDomain.status === "pending_txt_validation" && /*#__PURE__*/React.createElement(Button, {
+      "data-cy": "validate-txt-record-button",
+      disabled: isValidating,
+      loading: isValidating,
+      label: t("neetoMolecules.customDomain.validation.buttonLabel.txt"),
+      onClick: handleValidateTxt
+    }), customDomain.status === "pending_cname_validation" && !customDomain.addedCnameAt && /*#__PURE__*/React.createElement(Button, {
+      "data-cy": "validate-cname-record-button",
+      loading: isCnameValidating || isUpdating,
+      label: t("neetoMolecules.customDomain.validation.buttonLabel.cnameAdded"),
+      onClick: handleUpdateCname
+    }), customDomain.status === "pending_cname_validation" && customDomain.addedCnameAt && /*#__PURE__*/React.createElement(CustomDomainInfo, {
+      time: customDomain.addedCnameAt
+    })))));
+  }));
+};
+
+var CustomDomain = function CustomDomain(_ref) {
+  var _data$customDomains;
+  var headerProps = _ref.headerProps;
+  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(null),
+    _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({
+      search: debouncedSearchTerm
+    }),
+    data = _useFetchCustomDomain.data,
+    isLoading = _useFetchCustomDomain.isLoading;
+  var _useDeleteCustomDomai = useDeleteCustomDomain({
+      onSettled: function onSettled() {
+        return setIsAlertOpen(false);
+      }
+    }),
+    deleteCustomDomain = _useDeleteCustomDomai.mutate,
+    isDeleting = _useDeleteCustomDomai.isLoading;
+  var enableManagePane = function enableManagePane(customDomain) {
+    setCustomDomain(customDomain);
+    setIsPaneOpen(true);
+  };
+  var enableDeleteAlert = function enableDeleteAlert(customDomain) {
+    setCustomDomain(customDomain);
+    setIsAlertOpen(true);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, _extends({
+    actionBlock: /*#__PURE__*/React.createElement(Button, {
+      "data-cy": "add-new-custom-domain-button",
+      label: t("neetoMolecules.common.actions.addNew", {
+        entity: t("neetoMolecules.customDomain.customDomain", {
+          count: ENTITY_COUNT.singular
+        }).toLocaleLowerCase()
+      }),
+      onClick: function onClick() {
+        return enableManagePane(null);
+      }
+    }),
+    searchProps: {
+      value: searchTerm,
+      onChange: function onChange(e) {
+        return setSearchTerm(e.target.value);
+      },
+      placeholder: t("neetoMolecules.common.search", {
+        entity: t("neetoMolecules.customDomain.customDomain", {
+          count: ENTITY_COUNT.plural
+        }).toLocaleLowerCase()
+      }),
+      "data-cy": "custom-domain-search-field"
+    },
+    title: t("neetoMolecules.customDomain.customDomain", {
+      count: ENTITY_COUNT.plural
+    })
+  }, headerProps)), isLoading && /*#__PURE__*/React.createElement("div", {
+    className: "w-full h-screen"
+  }, /*#__PURE__*/React.createElement(PageLoader, null)), !isLoading && (isNotEmpty(data === null || data === void 0 ? void 0 : data.customDomains) ? /*#__PURE__*/React.createElement("div", {
+    className: "w-full flex-grow"
+  }, /*#__PURE__*/React.createElement(SubHeader, {
+    leftActionBlock: /*#__PURE__*/React.createElement(Typography, {
+      className: "neeto-ui-gray-800 font-semibold",
+      component: "h4"
+    }, t("neetoMolecules.customDomain.customDomainWithCount", {
+      count: data === null || data === void 0 ? void 0 : (_data$customDomains = data.customDomains) === null || _data$customDomains === void 0 ? void 0 : _data$customDomains.length
+    }))
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Table, {
+    allowRowClick: false,
+    rowData: data === null || data === void 0 ? void 0 : data.customDomains,
+    rowSelection: false,
+    columnData: renderColumnData(enableManagePane, enableDeleteAlert)
+  }))) : /*#__PURE__*/React.createElement("div", {
+    className: "flex h-full w-full flex-grow items-center justify-center"
+  }, /*#__PURE__*/React.createElement(NoData, {
+    primaryButtonProps: {
+      label: t("neetoMolecules.common.actions.addNew", {
+        entity: t("neetoMolecules.customDomain.customDomain", {
+          count: ENTITY_COUNT.singular
+        }).toLocaleLowerCase()
+      }),
+      onClick: function onClick() {
+        return enableManagePane(null);
+      }
+    },
+    title: t("neetoMolecules.common.notFound.title", {
+      entity: t("neetoMolecules.customDomain.customDomain", {
+        count: ENTITY_COUNT.plural
+      }).toLocaleLowerCase()
+    })
+  })))), /*#__PURE__*/React.createElement(Manage, {
+    customDomain: customDomain,
+    isOpen: isPaneOpen,
+    setCustomDomain: setCustomDomain,
+    onClose: function onClose() {
+      return setIsPaneOpen(false);
+    }
+  }), /*#__PURE__*/React.createElement(Alert, {
+    cancelButtonLabel: t("neetoMolecules.common.deleteAlert.no"),
+    isOpen: isAlertOpen,
+    isSubmitting: isDeleting,
+    submitButtonLabel: t("neetoMolecules.common.deleteAlert.yes"),
+    message: /*#__PURE__*/React.createElement(Trans, {
+      i18nKey: "neetoMolecules.customDomain.alertMessage",
+      values: {
+        hostname: customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname
+      }
+    }),
+    title: t("neetoMolecules.common.deleteAlert.title", {
+      entity: t("neetoMolecules.customDomain.customDomain", {
+        count: ENTITY_COUNT.singular
+      }).toLocaleLowerCase()
+    }),
+    onClose: function onClose() {
+      return setIsAlertOpen(false);
+    },
+    onSubmit: function onSubmit() {
+      return deleteCustomDomain(customDomain === null || customDomain === void 0 ? void 0 : customDomain.id);
+    }
+  }));
+};
+
+export { CustomDomain as default };