@bigbinary/neeto-molecules 1.3.10 → 1.3.12

package/dist/cjs/IpRestriction.js

@@ -0,0 +1,683 @@
+'use strict';
+
+var React = require('react');
+var neetoui = require('@bigbinary/neetoui');
+var formik = require('@bigbinary/neetoui/formik');
+var reactI18next = require('react-i18next');
+var formik$1 = require('formik');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var neetoIcons = require('@bigbinary/neeto-icons');
+var i18next = require('i18next');
+var yup = require('yup');
+var ipNum = require('ip-num');
+var ramda = require('ramda');
+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__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+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();
+}
+
+function _extends$1() {
+  _extends$1 = 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$1.apply(this, arguments);
+}
+
+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;
+}
+
+var _path, _path2, _g, _defs;
+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 SvgNeeto = function SvgNeeto(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: 50,
+    height: 50,
+    viewBox: "0 0 415 415",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M414.989 207.495C414.989 92.899 322.091 0 207.495 0H0v414.989h414.989V207.495Z",
+    fill: "#0043AC"
+  })), /*#__PURE__*/React__namespace.createElement("mask", {
+    id: "neeto_svg__a",
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: 0,
+    y: 0,
+    width: 415,
+    height: 415
+  }, _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M414.989 207.495C414.989 92.899 322.091 0 207.495 0H0v414.989h414.989V207.495Z",
+    fill: "#0043AC"
+  }))), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+    mask: "url(#neeto_svg__a)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M233.747 348.74c88.579 101.145 172.015 116.411 202.661 111.401v32.491H-8.032V230.487c43.685-2.726 153.2 17.108 241.779 118.253Z",
+    fill: "url(#neeto_svg__b)"
+  }))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("radialGradient", {
+    id: "neeto_svg__b",
+    cx: 0,
+    cy: 0,
+    r: 1,
+    gradientUnits: "userSpaceOnUse",
+    gradientTransform: "rotate(47.118 -220.556 214.818) scale(427.964 725.049)"
+  }, /*#__PURE__*/React__namespace.createElement("stop", {
+    stopColor: "#0043AC"
+  }), /*#__PURE__*/React__namespace.createElement("stop", {
+    offset: 1,
+    stopColor: "#3DB1CA",
+    stopOpacity: 0.8
+  })))));
+};
+
+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-molecules-pageloader__wrapper{height:100%;position:relative;width:100%}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader{height:100%;left:0;position:absolute;top:0;width:100%}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader__content{height:66px;margin-bottom:16px;overflow:hidden;padding:8px;position:relative;width:66px}.neeto-molecules-pageloader__wrapper .neeto-molecules-pageloader__text{color:rgb(var(--neeto-ui-gray-800));font-size:1.25rem;line-height:1.75rem;margin-bottom:4rem;text-align:center}.neeto-molecules-pageloader__spinner{display:flex;gap:2px;height:25px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.neeto-molecules-pageloader__spinner>div{animation:neeto-ui-stretch-delay 1.2s ease-in-out infinite;background-color:#fff;border-radius:2px;display:inline-flex;height:100%;width:2px}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect2{animation-delay:-1.1s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect3{animation-delay:-1s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect4{animation-delay:-.9s}.neeto-molecules-pageloader__spinner .neeto-molecules-pageloader__rect5{animation-delay:-.8s}@keyframes neeto-ui-stretch-delay{0%,40%,to{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}";
+n(css,{});
+
+var _excluded = ["text"];
+var PageLoader = function PageLoader(_ref) {
+  var _ref$text = _ref.text,
+    text = _ref$text === void 0 ? "" : _ref$text,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
+    className: "neeto-molecules-pageloader__wrapper"
+  }, otherProps), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-pageloader neeto-ui-flex neeto-ui-flex-col neeto-ui-items-center neeto-ui-justify-center"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-pageloader__content neeto-ui-flex neeto-ui-flex-shrink-0 neeto-ui-items-center neeto-ui-justify-center",
+    "data-cy": "neeto-molecules-pageloader"
+  }, /*#__PURE__*/React__default["default"].createElement(SvgNeeto, {
+    className: "neeto-molecules-pageloader__logo",
+    size: 50
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-pageloader__spinner"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-pageloader__rect1"
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-pageloader__rect2"
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-pageloader__rect3"
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-pageloader__rect4"
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-pageloader__rect5"
+  }))), text && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    style: "h5",
+    weight: "semibold"
+  }, text)));
+};
+var PageLoader$1 = /*#__PURE__*/React__default["default"].memo(PageLoader);
+
+// We need to apply a transformation for the label. Hence disabling this lint warning.
+// eslint-disable-next-line @bigbinary/neeto/use-functions-and-hooks-from-neeto-commons-frontend
+var toLabelAndValue = function toLabelAndValue(value) {
+  return {
+    label: humanizeIpAddressFormat(value),
+    value: value
+  };
+};
+var isValidIPv4String = function isValidIPv4String(ip) {
+  return ramda.isNotNil(ip) && ipNum.Validator.isValidIPv4String(ip)[0];
+};
+var isValidIPv6String = function isValidIPv6String(ip) {
+  return ramda.isNotNil(ip) && ipNum.Validator.isValidIPv6String(ip)[0];
+};
+var isValidIpString = function isValidIpString(ip) {
+  return isValidIPv4String(ip) || isValidIPv6String(ip);
+};
+var areIpAddressesInSameFormat = function areIpAddressesInSameFormat(ipStart, ipEnd) {
+  return isValidIPv4String(ipStart) && isValidIPv4String(ipEnd) || isValidIPv6String(ipStart) && isValidIPv6String(ipEnd);
+};
+var isValidIPv4Range = function isValidIPv4Range(ipStart, ipEnd) {
+  var ipStartAddr = ipNum.IPv4.fromDecimalDottedString(ipStart);
+  var ipEndAddr = ipNum.IPv4.fromDecimalDottedString(ipEnd);
+  return ipStartAddr.isLessThanOrEquals(ipEndAddr);
+};
+var isValidIPv6Range = function isValidIPv6Range(ipStart, ipEnd) {
+  var ipStartAddr = ipNum.IPv6.fromString(ipStart);
+  var ipEndAddr = ipNum.IPv6.fromString(ipEnd);
+  return ipStartAddr.isLessThanOrEquals(ipEndAddr);
+};
+var isValidIPRange = function isValidIPRange(ipStart, ipEnd) {
+  if (isValidIPv4String(ipStart) && isValidIPv4String(ipEnd)) {
+    return isValidIPv4Range(ipStart, ipEnd);
+  }
+  if (isValidIPv6String(ipStart) && isValidIPv6String(ipEnd)) {
+    return isValidIPv6Range(ipStart, ipEnd);
+  }
+  return false;
+};
+yup__namespace.addMethod(yup__namespace.string, "validIp", function (errorMessage) {
+  return this.test("valid-ip", errorMessage, function (value) {
+    if (ramda.isNil(value)) {
+      return this;
+    }
+    var isValidIp = isValidIpString(value);
+    return isValidIp || this.createError({
+      path: this.path,
+      message: errorMessage
+    });
+  });
+});
+var getIpRestrictionValidationSchema = function getIpRestrictionValidationSchema() {
+  return yup__namespace.object().shape({
+    ipStart: yup__namespace.string().validIp(i18next.t("neetoMolecules.ipRestriction.validations.invalidIp")).required(i18next.t("neetoMolecules.ipRestriction.validations.ipStartRequired")),
+    ipEnd: yup__namespace.string().validIp(i18next.t("neetoMolecules.ipRestriction.validations.invalidIp")).when("ipStart", function (ipStart, schema) {
+      return schema.test({
+        test: function test(ipEnd) {
+          return areIpAddressesInSameFormat(ipStart, ipEnd);
+        },
+        message: i18next.t("neetoMolecules.ipRestriction.validations.eitherIpv4OrIpv6")
+      });
+    }).when("ipStart", function (ipStart, schema) {
+      return schema.test({
+        test: function test(ipEnd) {
+          return isValidIPRange(ipStart, ipEnd);
+        },
+        message: i18next.t("neetoMolecules.ipRestriction.validations.ipEndGreaterThanIpStart")
+      });
+    }).required(i18next.t("neetoMolecules.ipRestriction.validations.ipEndRequired")),
+    addressType: yup__namespace.object().shape({
+      value: yup__namespace.string().required(),
+      label: yup__namespace.string().required()
+    }).nullable().required(i18next.t("neetoMolecules.ipRestriction.validations.addressTypeRequired"))
+  });
+};
+var humanizeIpAddressFormat = function humanizeIpAddressFormat(addressFormat) {
+  var addressFormats = {
+    ipv4: "IPv4",
+    ipv6: "IPv6"
+  };
+  return addressFormats[addressFormat];
+};
+var buildInitialValue = function buildInitialValue(isIpRestrictionEnabled, allowedIpRanges) {
+  return {
+    ipRestriction: isIpRestrictionEnabled,
+    allowedIpRanges: buildAllowedIpRangesFormData(allowedIpRanges)
+  };
+};
+var buildAllowedIpRangesFormData = function buildAllowedIpRangesFormData(allowedIpRanges) {
+  return allowedIpRanges.map(function (allowedIpRange) {
+    return ramda.assoc("addressType", toLabelAndValue(allowedIpRange.addressType), allowedIpRange);
+  });
+};
+var buildIpRestrictionPayload = function buildIpRestrictionPayload(values) {
+  var allowedIpRangesWithTransformedAddressType = values.allowedIpRanges.map(function (allowedIpRange) {
+    return ramda.assoc("addressType", allowedIpRange.addressType.value, allowedIpRange);
+  });
+  return {
+    isIpRestrictionEnabled: values.ipRestriction,
+    allowedIpRanges: allowedIpRangesWithTransformedAddressType
+  };
+};
+
+var IP_RESTRICTIONS_ENGINE_BASE_URL = "/ip_restrictions/api/v1";
+var QUERY_KEYS = {
+  IP_RESTRICTION: "IP_RESTRICTION",
+  ALLOWED_IP_RANGES: "ALLOWED_IP_RANGES",
+  CURRENT_IP: "CURRENT_IP"
+};
+var ADDRESS_TYPE_SELECT_OPTIONS = [{
+  label: i18next.t("neetoMolecules.ipRestriction.ipv4"),
+  value: "ipv4"
+}, {
+  label: i18next.t("neetoMolecules.ipRestriction.ipv6"),
+  value: "ipv6"
+}];
+({
+  ipStart: "",
+  ipEnd: "",
+  addressType: ADDRESS_TYPE_SELECT_OPTIONS[0].value
+});
+var VALIDATION_SCHEMA = yup__namespace.object().shape({
+  ipRestriction: yup__namespace["boolean"](),
+  allowedIpRanges: yup__namespace.array().of(getIpRestrictionValidationSchema())
+});
+var NEW_ALLOWED_IP_RANGE = {
+  ipStart: "",
+  ipEnd: "",
+  addressType: null,
+  createdAt: new Date().toISOString()
+};
+
+var AllowedIpRange = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    index = _ref.index,
+    arrayHelpers = _ref.arrayHelpers;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-bg-white neeto-ui-rounded-lg grid grid-cols-2 gap-4 p-3 sm:grid-cols-12"
+  }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
+    className: "col-span-1 text-left sm:col-span-4",
+    "data-cy": "ip-start-text-field",
+    label: t("neetoMolecules.ipRestriction.ipStart"),
+    labelProps: {
+      className: "sm:hidden"
+    },
+    name: "allowedIpRanges.".concat(index, ".ipStart"),
+    placeholder: t("neetoMolecules.ipRestriction.ipStart")
+  }), /*#__PURE__*/React__default["default"].createElement(formik.Input, {
+    className: "col-span-1 text-left sm:col-span-4",
+    "data-cy": "ip-end-text-field",
+    label: t("neetoMolecules.ipRestriction.ipEnd"),
+    labelProps: {
+      className: "sm:hidden"
+    },
+    name: "allowedIpRanges.".concat(index, ".ipEnd"),
+    placeholder: t("neetoMolecules.ipRestriction.ipEnd")
+  }), /*#__PURE__*/React__default["default"].createElement(formik.Select, {
+    className: "col-span-1 text-left sm:col-span-2",
+    "data-testid": "address-type-select-field",
+    label: t("neetoMolecules.ipRestriction.type"),
+    labelProps: {
+      className: "sm:hidden"
+    },
+    name: "allowedIpRanges.".concat(index, ".addressType"),
+    options: ADDRESS_TYPE_SELECT_OPTIONS
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "col-span-1 flex sm:col-span-2 sm:justify-center"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    className: "mt-auto sm:mt-0",
+    "data-testid": "allowed-ip-range-delete-btn",
+    icon: neetoIcons.Delete,
+    style: "text",
+    tooltipProps: {
+      content: t("neetoMolecules.common.actions.discard"),
+      position: "top"
+    },
+    onClick: function onClick() {
+      return arrayHelpers.remove(index);
+    }
+  })));
+});
+
+var AllowedIpRanges = reactUtils.withT(function (_ref) {
+  var t = _ref.t;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "space-y-6",
+    "data-cy": "allowed-ip-range-container"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    "data-cy": "allowed-ip-range-heading",
+    style: "h4"
+  }, t("neetoMolecules.ipRestriction.allowedIpRangeTitle")), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "space-y-4"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "hidden grid-cols-12 gap-4 px-3 sm:grid"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-700 col-span-4 uppercase",
+    style: "h6"
+  }, t("neetoMolecules.ipRestriction.ipStart"), "*"), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-700 col-span-4 uppercase",
+    style: "h6"
+  }, t("neetoMolecules.ipRestriction.ipEnd"), "*"), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-700 col-span-2 uppercase",
+    style: "h6"
+  }, t("neetoMolecules.ipRestriction.type"), "*"), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: "neeto-ui-text-gray-700 col-span-2 text-center uppercase",
+    style: "h6"
+  }, t("neetoMolecules.ipRestriction.actions"))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "w-full space-y-2"
+  }, /*#__PURE__*/React__default["default"].createElement(formik$1.FieldArray, {
+    name: "allowedIpRanges"
+  }, function (arrayHelpers) {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, arrayHelpers.form.values.allowedIpRanges.map(function (allowedIpRange, index) {
+      return /*#__PURE__*/React__default["default"].createElement(AllowedIpRange, {
+        allowedIpRange: allowedIpRange,
+        arrayHelpers: arrayHelpers,
+        index: index,
+        key: allowedIpRange.createdAt
+      });
+    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      "data-cy": "add-allowed-ip-range-button",
+      label: t("neetoMolecules.ipRestriction.addNew"),
+      style: "link",
+      onClick: function onClick() {
+        return arrayHelpers.push(NEW_ALLOWED_IP_RANGE);
+      }
+    }));
+  }))));
+});
+var AllowedIpRanges$1 = /*#__PURE__*/React__default["default"].memo(AllowedIpRanges);
+
+var show$1 = function show(params) {
+  return axios__default["default"].get("".concat(IP_RESTRICTIONS_ENGINE_BASE_URL, "/current_ip"), {
+    params: params
+  });
+};
+var currentIpApi = {
+  show: show$1
+};
+
+var CURRENT_IP = QUERY_KEYS.CURRENT_IP;
+var useShowCurrentIp = function useShowCurrentIp() {
+  return reactQuery.useQuery([CURRENT_IP], function () {
+    return currentIpApi.show();
+  });
+};
+
+var CurrentIp = function CurrentIp() {
+  var _useShowCurrentIp = useShowCurrentIp(),
+    data = _useShowCurrentIp.data,
+    isLoading = _useShowCurrentIp.isLoading;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex flex-wrap items-baseline gap-1",
+    "data-cy": "current-ip-container"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, null, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
+    i18nKey: "neetoMolecules.ipRestriction.currentIpMessage",
+    values: {
+      ip: isLoading ? "..." : data.ip
+    }
+  })));
+};
+var CurrentIp$1 = /*#__PURE__*/React__default["default"].memo(CurrentIp);
+
+var allowedIpRangesUrl = "".concat(IP_RESTRICTIONS_ENGINE_BASE_URL, "/allowed_ips");
+var fetch = function fetch() {
+  return axios__default["default"].get(allowedIpRangesUrl);
+};
+var create = function create(payload) {
+  return axios__default["default"].post(allowedIpRangesUrl, {
+    allowedIpRange: payload
+  });
+};
+var destroy = function destroy(id) {
+  return axios__default["default"]["delete"]("".concat(allowedIpRangesUrl, "/").concat(id));
+};
+var update$1 = function update(_ref) {
+  var id = _ref.id,
+    payload = _ref.payload;
+  return axios__default["default"].patch("".concat(allowedIpRangesUrl, "/").concat(id), {
+    allowedIpRange: payload
+  });
+};
+var allowedIpRangesApi = {
+  fetch: fetch,
+  create: create,
+  destroy: destroy,
+  update: update$1
+};
+
+var ALLOWED_IP_RANGES$1 = QUERY_KEYS.ALLOWED_IP_RANGES;
+var useFetchAllowedIpRanges = function useFetchAllowedIpRanges(options) {
+  return reactQuery.useQuery([ALLOWED_IP_RANGES$1], function () {
+    return allowedIpRangesApi.fetch();
+  }, options);
+};
+
+var ipRestrictionUrl = "".concat(IP_RESTRICTIONS_ENGINE_BASE_URL, "/ip_restriction");
+var update = function update(params) {
+  return axios__default["default"].patch(ipRestrictionUrl, {
+    ipRestriction: params
+  });
+};
+var show = function show() {
+  return axios__default["default"].get(ipRestrictionUrl);
+};
+var ipRestrictionApi = {
+  update: update,
+  show: show
+};
+
+var IP_RESTRICTION = QUERY_KEYS.IP_RESTRICTION,
+  ALLOWED_IP_RANGES = QUERY_KEYS.ALLOWED_IP_RANGES;
+var useShowIpRestriction = function useShowIpRestriction() {
+  return reactQuery.useQuery([IP_RESTRICTION], function () {
+    return ipRestrictionApi.show();
+  });
+};
+var useUpdateIpRestriction = function useUpdateIpRestriction() {
+  return reactUtils.useMutationWithInvalidation(ipRestrictionApi.update, {
+    keysToInvalidate: [IP_RESTRICTION, ALLOWED_IP_RANGES]
+  });
+};
+
+var IpRestriction = function IpRestriction() {
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAlertOpen = _useState2[0],
+    setIsAlertOpen = _useState2[1];
+  var _useShowIpRestriction = useShowIpRestriction(),
+    _useShowIpRestriction2 = _useShowIpRestriction.data,
+    _useShowIpRestriction3 = _useShowIpRestriction2 === void 0 ? {} : _useShowIpRestriction2,
+    isIpRestrictionEnabled = _useShowIpRestriction3.isIpRestrictionEnabled,
+    isFetchingIpRestriction = _useShowIpRestriction.isLoading;
+  var _useFetchAllowedIpRan = useFetchAllowedIpRanges({
+      enabled: isIpRestrictionEnabled
+    }),
+    allowedIpRanges = _useFetchAllowedIpRan.data,
+    isFetchingAllowedIpRanges = _useFetchAllowedIpRan.isLoading,
+    isRefetching = _useFetchAllowedIpRan.isRefetching;
+  var _useUpdateIpRestricti = useUpdateIpRestriction(),
+    updateIpRestriction = _useUpdateIpRestricti.mutate,
+    isUpdating = _useUpdateIpRestricti.isLoading;
+  if (isFetchingIpRestriction || isFetchingAllowedIpRanges || isRefetching) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "h-screen"
+    }, /*#__PURE__*/React__default["default"].createElement(PageLoader$1, null));
+  }
+  var handleSubmit = function handleSubmit(values, formikBag) {
+    if (values.ipRestriction) setIsAlertOpen(true);else handleUpdateIpRestriction(values, formikBag);
+  };
+  var handleCloseAlert = function handleCloseAlert(setSubmitting) {
+    setIsAlertOpen(false);
+    setSubmitting(false);
+  };
+  var handleUpdateIpRestriction = function handleUpdateIpRestriction(values, _ref) {
+    var setSubmitting = _ref.setSubmitting,
+      resetForm = _ref.resetForm;
+    updateIpRestriction(buildIpRestrictionPayload(values), {
+      onSuccess: function onSuccess() {
+        setIsAlertOpen(false);
+        setSubmitting(false);
+        resetForm({
+          values: values
+        });
+      },
+      onError: function onError() {
+        setIsAlertOpen(false);
+        setSubmitting(false);
+      }
+    });
+  };
+  return /*#__PURE__*/React__default["default"].createElement(formik.Form, {
+    className: "mx-auto mb-4 w-full sm:max-w-screen-sm md:max-w-screen-md lg:max-w-3xl",
+    formikProps: {
+      initialValues: buildInitialValue(isIpRestrictionEnabled, allowedIpRanges),
+      validationSchema: VALIDATION_SCHEMA,
+      validateOnBlur: true,
+      enableReinitialize: true,
+      onSubmit: handleSubmit
+    }
+  }, function (_ref2) {
+    var values = _ref2.values,
+      dirty = _ref2.dirty,
+      setFieldValue = _ref2.setFieldValue,
+      resetForm = _ref2.resetForm,
+      setSubmitting = _ref2.setSubmitting;
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(formik.BlockNavigation, null), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "neeto-ui-bg-white neeto-ui-border-gray-200 neeto-ui-rounded-lg mx-auto mb-4 w-full overflow-hidden border sm:max-w-screen-sm md:max-w-screen-md lg:max-w-3xl",
+      "data-cy": "ip-restrictions-card"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "space-y-2 p-6"
+    }, /*#__PURE__*/React__default["default"].createElement(formik.Checkbox, {
+      checked: values.ipRestriction,
+      className: "flex-grow-0",
+      "data-cy": "enable-ip-restriction-checkbox",
+      disabled: isFetchingIpRestriction || isUpdating,
+      name: "ipRestriction",
+      label: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+        style: "h3"
+      }, t("neetoMolecules.ipRestriction.switchLabel")),
+      onChange: function onChange() {
+        return setFieldValue("ipRestriction", !values.ipRestriction);
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      "data-cy": "ip-restriction-description",
+      style: "body2"
+    }, t("neetoMolecules.ipRestriction.description"))), values.ipRestriction && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "neeto-ui-bg-gray-100 w-full space-y-6 p-6"
+    }, /*#__PURE__*/React__default["default"].createElement(CurrentIp$1, null), /*#__PURE__*/React__default["default"].createElement(AllowedIpRanges$1, null), /*#__PURE__*/React__default["default"].createElement(neetoui.Callout, {
+      style: "warning"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "leading-2 block whitespace-pre-wrap py-1"
+    }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
+      i18nKey: "neetoMolecules.ipRestriction.warningMessage"
+    }))))), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex flex-wrap items-center justify-between gap-4"
+    }, dirty && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      className: "neeto-ui-text-error-500",
+      style: "body2"
+    }, t("neetoMolecules.ipRestriction.validations.unsavedChanges")), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "ml-auto flex justify-between"
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+      className: "mr-2",
+      disabled: !dirty,
+      label: t("neetoMolecules.common.actions.reset"),
+      style: "secondary",
+      type: "reset",
+      onClick: resetForm
+    }), /*#__PURE__*/React__default["default"].createElement(formik.Button, {
+      "data-cy": "ip-restriction-save-changes",
+      "data-testid": "save-changes-button",
+      isLoading: isUpdating,
+      type: "submit"
+    }, t("neetoMolecules.common.actions.saveChanges")))), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
+      isOpen: isAlertOpen,
+      isSubmitting: isUpdating,
+      title: t("neetoMolecules.ipRestriction.enableAlert.title"),
+      message: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
+        i18nKey: "neetoMolecules.ipRestriction.enableAlert.message"
+      }),
+      submitButtonLabel: t("neetoMolecules.ipRestriction.enableAlert.submitButtonLabel"),
+      onClose: function onClose() {
+        return handleCloseAlert(setSubmitting);
+      },
+      onSubmit: function onSubmit() {
+        return handleUpdateIpRestriction(values, {
+          setSubmitting: setSubmitting,
+          resetForm: resetForm
+        });
+      }
+    }));
+  });
+};
+var index = /*#__PURE__*/React__default["default"].memo(IpRestriction);
+
+module.exports = index;
+//# sourceMappingURL=IpRestriction.js.map