authscape 1.0.220 → 1.0.223

package/index.js

@@ -30,7 +30,9 @@ function AuthScapeApp(_ref) {
     _ref$enforceLoggedIn = _ref.enforceLoggedIn,
     enforceLoggedIn = _ref$enforceLoggedIn === void 0 ? false : _ref$enforceLoggedIn,
     _ref$onAuthentication = _ref.onAuthenticationLoaded,
-    onAuthenticationLoaded = _ref$onAuthentication === void 0 ? null : _ref$onAuthentication;
+    onAuthenticationLoaded = _ref$onAuthentication === void 0 ? null : _ref$onAuthentication,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children;
   var _useState = (0, _react.useState)(process.env.enableOEMClient ? true : false),
     _useState2 = _slicedToArray(_useState, 2),
     isLoading = _useState2[0],
@@ -83,13 +85,13 @@ function AuthScapeApp(_ref) {
         }
       }
     }
-  }, /*#__PURE__*/_react["default"].createElement(Component, _extends({}, pageProps, {
+  }, children == null && /*#__PURE__*/_react["default"].createElement(Component, _extends({}, pageProps, {
     currentUser: currentUser,
     toast: _reactToastify.toast,
     setIsLoading: setIsLoading,
     loadedUser: loadedUser,
     logEvent: logEvent
-  }))), /*#__PURE__*/_react["default"].createElement(_Backdrop["default"], {
+  })), children != null && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children)), /*#__PURE__*/_react["default"].createElement(_Backdrop["default"], {
     sx: {
       color: '#fff',
       zIndex: 99999
@@ -1322,6 +1324,431 @@ var GooglePlacesModal = function GooglePlacesModal(_ref3) {
 exports.GooglePlacesModal = GooglePlacesModal;
 "use strict";
 
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OEMEditor = OEMEditor;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = _interopRequireWildcard(require("@monaco-editor/react"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
+var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _material = require("@mui/material");
+var _xDataGrid = require("@mui/x-data-grid");
+var _excluded = ["children", "value", "index"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+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 _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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+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 _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 _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 _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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function OEMEditor(_ref) {
+  var loadedUser = _ref.loadedUser,
+    notification = _ref.notification,
+    _ref$companyId = _ref.companyId,
+    companyId = _ref$companyId === void 0 ? null : _ref$companyId;
+  var cssEditorRef = (0, _react.useRef)(null);
+  var htmlEditorRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  var _React$useState = _react["default"].useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    value = _React$useState2[0],
+    setValue = _React$useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fonts = _useState4[0],
+    setFonts = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dnsFields = _useState6[0],
+    setDnsFields = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedFont = _useState8[0],
+    setSelectedFont = _useState8[1];
+  function TabPanel(props) {
+    var children = props.children,
+      value = props.value,
+      index = props.index,
+      other = _objectWithoutProperties(props, _excluded);
+    return /*#__PURE__*/_react["default"].createElement("div", _extends({
+      role: "tabpanel",
+      hidden: value !== index,
+      id: "simple-tabpanel-".concat(index),
+      "aria-labelledby": "simple-tab-".concat(index)
+    }, other), value === index && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+      sx: {
+        p: 3
+      }
+    }, children));
+  }
+  function a11yProps(index) {
+    return {
+      id: "simple-tab-".concat(index),
+      'aria-controls': "simple-tabpanel-".concat(index)
+    };
+  }
+  var handleChange = function handleChange(event, newValue) {
+    setValue(newValue);
+  };
+  var GetBaseUrl = function GetBaseUrl() {
+    return window.location.protocol + "//" + window.location.host;
+  };
+  (0, _react.useEffect)(function () {
+    if (loadedUser) {
+      var fetchData = /*#__PURE__*/function () {
+        var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+          var response, domain, responseFields;
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return apiService().get("/OEM/GetFonts");
+              case 2:
+                response = _context.sent;
+                if (response != null && response.status == 200) {
+                  setFonts(response.data);
+                }
+                domain = GetBaseUrl();
+                _context.next = 7;
+                return apiService().get("/OEM/GetFields?domain=" + domain + "&companyId=" + companyId);
+              case 7:
+                responseFields = _context.sent;
+                if (responseFields != null && responseFields.status == 200) {
+                  setDnsFields(responseFields.data);
+                }
+              case 9:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function fetchData() {
+          return _ref2.apply(this, arguments);
+        };
+      }();
+      fetchData();
+    }
+  }, [loadedUser]);
+  function handleCSSEditorDidMount(editor, monaco) {
+    cssEditorRef.current = editor;
+  }
+  function handleHtmlEditorDidMount(editor, monaco) {
+    htmlEditorRef.current = editor;
+  }
+  var monaco = (0, _react2.useMonaco)();
+  var columns = [{
+    field: "label",
+    headerName: "Fonts",
+    width: 200,
+    editable: false,
+    renderCell: function renderCell(params) {
+      var RenderData = function RenderData(row) {
+        // const { id, value, field } = params;
+        // const apiRef = useGridApiContext();
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+          sx: {
+            fontFamily: row.value,
+            fontSize: 20
+          }
+        }, row.value), /*#__PURE__*/_react["default"].createElement("link", {
+          href: "https://fonts.googleapis.com/css2?family=" + row.value,
+          rel: "stylesheet"
+        }));
+      };
+      return RenderData(params);
+    }
+  }];
+  (0, _react.useEffect)(function () {
+    var fetchData = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        var baseUri, response;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              // if (monaco) {
+              //     //console.log("here is the monaco instance:", monaco);
+              // }
+              baseUri = GetBaseUrl();
+              _context2.next = 3;
+              return apiService().get("/oem/GetEditorData?domain=" + baseUri + "&companyId=" + companyId);
+            case 3:
+              response = _context2.sent;
+              if (response.status == 200) {
+                setData(response.data);
+                setSelectedFont(response.data.fontFamily);
+              }
+            case 5:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function fetchData() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    fetchData();
+  }, [monaco]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: {
+      width: '100%'
+    }
+  }, selectedFont != null && /*#__PURE__*/_react["default"].createElement("link", {
+    href: "https://fonts.googleapis.com/css2?family=" + selectedFont,
+    rel: "stylesheet"
+  }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: {
+      borderBottom: 1,
+      borderColor: 'divider'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    value: value,
+    onChange: handleChange,
+    "aria-label": "basic tabs example"
+  }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], _extends({
+    label: "General"
+  }, a11yProps(0))), /*#__PURE__*/_react["default"].createElement(_Tab["default"], _extends({
+    label: "Fonts"
+  }, a11yProps(1))), /*#__PURE__*/_react["default"].createElement(_Tab["default"], _extends({
+    label: "Style Sheet Editor"
+  }, a11yProps(2))), /*#__PURE__*/_react["default"].createElement(_Tab["default"], _extends({
+    label: "HTML Import Editor"
+  }, a11yProps(3))))), /*#__PURE__*/_react["default"].createElement(TabPanel, {
+    value: value,
+    index: 0
+  }, dnsFields != null && dnsFields.map(function (dnsField) {
+    return /*#__PURE__*/_react["default"].createElement(_Box["default"], null, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
+      container: true,
+      spacing: 2
+    }, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
+      item: true,
+      xs: 3
+    }, dnsField.name), /*#__PURE__*/_react["default"].createElement(_material.Grid, {
+      item: true,
+      xs: 9
+    }, /*#__PURE__*/_react["default"].createElement(ColorPicker, {
+      name: dnsField.name,
+      defaultColor: dnsField.value,
+      onColorChanged: /*#__PURE__*/function () {
+        var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(name, hex) {
+          return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+            while (1) switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.next = 2;
+                return apiService().post("/OEM/SetFieldValue", {
+                  id: dnsField.id,
+                  fieldId: dnsField.fieldId,
+                  value: hex
+                });
+              case 2:
+                notification(dnsField.name + " Saved");
+              case 3:
+              case "end":
+                return _context3.stop();
+            }
+          }, _callee3);
+        }));
+        return function (_x2, _x3) {
+          return _ref4.apply(this, arguments);
+        };
+      }()
+    }))));
+  })), /*#__PURE__*/_react["default"].createElement(TabPanel, {
+    value: value,
+    index: 1
+  }, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
+    container: true,
+    spacing: 2
+  }, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
+    item: true,
+    xs: 6
+  }, loadedUser && /*#__PURE__*/_react["default"].createElement(_xDataGrid.DataGrid, {
+    rows: fonts,
+    columns: columns,
+    sx: {
+      height: "80vh"
+    },
+    onRowClick: /*#__PURE__*/function () {
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(row) {
+        var baseUri, response;
+        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              baseUri = GetBaseUrl();
+              _context4.next = 3;
+              return apiService().post("/OEM/SetFont", {
+                companyId: companyId,
+                domain: baseUri,
+                value: row.row.label
+              });
+            case 3:
+              response = _context4.sent;
+              if (response != null && response.status == 200) {
+                setSelectedFont(row.row.label);
+                notification("Font saved!");
+              }
+            case 5:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4);
+      }));
+      return function (_x4) {
+        return _ref5.apply(this, arguments);
+      };
+    }()
+  })), /*#__PURE__*/_react["default"].createElement(_material.Grid, {
+    item: true,
+    xs: 6,
+    sx: {
+      marginTop: 4
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], null, "Font Selected:"), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: {
+      marginBottom: 2,
+      fontWeight: "bold",
+      fontSize: 20
+    }
+  }, " ", selectedFont), /*#__PURE__*/_react["default"].createElement("hr", null), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: {
+      fontFamily: selectedFont
+    }
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ultricies odio. Nunc ut quam turpis. In hac habitasse platea dictumst. Suspendisse potenti. Nullam malesuada, purus id sagittis vestibulum, massa tellus gravida elit, vitae ultrices tortor nulla ac nunc. Aenean tempus semper est vel convallis. Sed feugiat, risus eu tincidunt eleifend, purus metus vulputate nulla, et condimentum sapien erat in nisi. Nunc non malesuada libero. Donec tempus tincidunt mi at vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Etiam nec eleifend orci. Suspendisse in est vel nunc rhoncus bibendum vitae id felis. Integer bibendum dolor elit, at tincidunt lacus tempor ac. Maecenas lobortis, mauris at condimentum feugiat, nulla orci condimentum massa, sed facilisis tellus ligula vitae metus. Aliquam erat volutpat. Quisque dignissim felis augue, at semper nisl posuere ut. Proin fringilla diam vitae faucibus finibus.", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), "Aenean tempus semper est vel convallis. Sed feugiat, risus eu tincidunt eleifend, purus metus vulputate nulla, et condimentum sapien erat in nisi. Nunc non malesuada libero. Donec tempus tincidunt mi at vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti")))), /*#__PURE__*/_react["default"].createElement(TabPanel, {
+    value: value,
+    index: 2
+  }, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
+    container: true,
+    spacing: 2
+  }, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
+    item: true,
+    xs: 6
+  }, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      marginBottom: "0px"
+    }
+  }, "Global CSS edits"), /*#__PURE__*/_react["default"].createElement("small", null, "You can make edits to your stylesheet")), /*#__PURE__*/_react["default"].createElement(_material.Grid, {
+    item: true,
+    xs: 6,
+    sx: {
+      textAlign: "right"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    startIcon: /*#__PURE__*/_react["default"].createElement(_Check["default"], null),
+    sx: {
+      marginTop: 4
+    },
+    variant: "contained",
+    onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+      var baseUri, response;
+      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            baseUri = GetBaseUrl();
+            _context5.next = 3;
+            return apiService().post("/OEM/SetGlobalCSS", {
+              companyId: companyId,
+              domain: baseUri,
+              value: cssEditorRef.current.getValue()
+            });
+          case 3:
+            response = _context5.sent;
+            if (response != null && response.status == 200) {
+              notification("CSS Saved!");
+            }
+          case 5:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5);
+    }))
+  }, "Save Changes"))), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: {
+      paddingTop: 1
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_react2["default"], {
+    height: "70vh",
+    onMount: handleCSSEditorDidMount,
+    defaultLanguage: "css",
+    theme: "vs-dark",
+    defaultValue: data.prettyCSS == null ? "" : data.prettyCSS
+  }))), /*#__PURE__*/_react["default"].createElement(TabPanel, {
+    value: value,
+    index: 3
+  }, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
+    container: true,
+    spacing: 2
+  }, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
+    item: true,
+    xs: 6
+  }, /*#__PURE__*/_react["default"].createElement("h4", {
+    style: {
+      marginBottom: "0px"
+    }
+  }, "HTML import Edits"), /*#__PURE__*/_react["default"].createElement("small", null, "You can add imports such as google analytics or clarity")), /*#__PURE__*/_react["default"].createElement(_material.Grid, {
+    item: true,
+    xs: 6,
+    sx: {
+      textAlign: "right"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    startIcon: /*#__PURE__*/_react["default"].createElement(_Check["default"], null),
+    sx: {
+      marginTop: 4
+    },
+    variant: "contained",
+    onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+      var baseUri, response;
+      return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            baseUri = GetBaseUrl();
+            _context6.next = 3;
+            return apiService().post("/OEM/SetGlobalHTML", {
+              companyId: companyId,
+              domain: baseUri,
+              value: htmlEditorRef.current.getValue()
+            });
+          case 3:
+            response = _context6.sent;
+            if (response != null && response.status == 200) {
+              notification("HTML saved!");
+            }
+          case 5:
+          case "end":
+            return _context6.stop();
+        }
+      }, _callee6);
+    }))
+  }, "Save Changes"))), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    sx: {
+      paddingTop: 1
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_react2["default"], {
+    height: "70vh",
+    onMount: handleHtmlEditorDidMount,
+    defaultLanguage: "html",
+    theme: "vs-dark",
+    defaultValue: data.prettyHTML == null ? "" : data.prettyHTML
+  })))));
+}
+"use strict";
+
 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); }
 Object.defineProperty(exports, "__esModule", {
   value: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "authscape",
-  "version": "1.0.220",
+  "version": "1.0.223",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -28,6 +28,7 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
+    "@monaco-editor/react": "^4.5.1",
     "@stripe/react-stripe-js": "^1.9.0",
     "@stripe/stripe-js": "^1.32.0",
     "axios": "^0.27.2",

package/src/components/AuthScapeApp.js

@@ -6,7 +6,7 @@ import { useRouter } from 'next/router';
 import { ThemeProvider } from '@mui/material/styles';
 import { Box } from '@mui/material';
 
-export function AuthScapeApp({Component, pageProps, muiTheme = {}, enforceLoggedIn = false, onAuthenticationLoaded = null}) {
+export function AuthScapeApp({Component, pageProps, muiTheme = {}, enforceLoggedIn = false, onAuthenticationLoaded = null, children = null}) {
 
     const [isLoading, setIsLoading] = useState(process.env.enableOEMClient ? true : false);
     const [loadedUser, setLoadedUser] = useState(false);
@@ -72,7 +72,14 @@ export function AuthScapeApp({Component, pageProps, muiTheme = {}, enforceLogged
                             }
                         }
                     }}>
-                    <Component {...pageProps} currentUser={currentUser} toast={toast} setIsLoading={setIsLoading} loadedUser={loadedUser} logEvent={logEvent} />
+                        {children == null &&
+                            <Component {...pageProps} currentUser={currentUser} toast={toast} setIsLoading={setIsLoading} loadedUser={loadedUser} logEvent={logEvent} />
+                        }
+                        {children != null &&
+                        <>
+                            {children}
+                        </>
+                        }
                     </AuthorizationComponent>
 
                     <Backdrop sx={{ color: '#fff', zIndex: 99999 }} open={isLoading}>

package/src/components/OEMEditor.js

@@ -0,0 +1,324 @@
+import React, { useState, useRef, useEffect } from "react";
+import Editor, { useMonaco } from "@monaco-editor/react";
+import Button from '@mui/material/Button';
+import CheckIcon from '@mui/icons-material/Check';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Box from '@mui/material/Box';
+import { Grid } from "@mui/material";
+import { DataGrid } from "@mui/x-data-grid";
+
+export function OEMEditor({loadedUser, notification, companyId = null}) {
+
+    const cssEditorRef = useRef(null);
+    const htmlEditorRef = useRef(null);
+
+    const [data, setData] = useState('');
+    const [value, setValue] = React.useState(0);
+    const [fonts, setFonts] = useState([]);
+    const [dnsFields, setDnsFields] = useState([]);
+    const [selectedFont, setSelectedFont] = useState(null);
+
+    function TabPanel(props) {
+        const { children, value, index, ...other } = props;
+      
+        return (
+          <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+          >
+            {value === index && (
+              <Box sx={{ p: 3 }}>
+                {children}
+              </Box>
+            )}
+          </div>
+        );
+    }
+    
+    function a11yProps(index) {
+      return {
+        id: `simple-tab-${index}`,
+        'aria-controls': `simple-tabpanel-${index}`,
+      };
+    }
+
+    const handleChange = (event, newValue) => {
+      setValue(newValue);
+    };
+
+    const GetBaseUrl = () => {
+      return window.location.protocol + "//" + window.location.host;
+    }
+
+    useEffect(() => {
+
+      if (loadedUser)
+      {
+        const fetchData = async () => {
+
+          let response = await apiService().get("/OEM/GetFonts");
+          if (response != null && response.status == 200)
+          {
+            setFonts(response.data);
+          }
+
+          var domain = GetBaseUrl();
+          let responseFields = await apiService().get("/OEM/GetFields?domain=" + domain + "&companyId=" + companyId);
+          if (responseFields != null && responseFields.status == 200)
+          {
+            setDnsFields(responseFields.data);
+          }
+
+        }
+        fetchData();
+      }
+
+    }, [loadedUser]);
+  
+
+    function handleCSSEditorDidMount(editor, monaco) {
+      cssEditorRef.current = editor; 
+    }
+
+    function handleHtmlEditorDidMount(editor, monaco) {
+      htmlEditorRef.current = editor; 
+    }
+
+    const monaco = useMonaco();
+
+    const columns = [
+      {
+        field: "label",
+        headerName: "Fonts",
+        width: 200,
+        editable: false,
+        renderCell: (params) => {
+          const RenderData = (row) => {
+            // const { id, value, field } = params;
+            // const apiRef = useGridApiContext();
+            return (
+              <>
+                <Box sx={{fontFamily: row.value, fontSize:20}}>{row.value}</Box>
+                <link href={"https://fonts.googleapis.com/css2?family=" + row.value} rel="stylesheet"></link>
+              </>
+            );
+          };
+          return RenderData(params);
+        },
+      }
+    ];
+
+    useEffect(() => {
+
+        const fetchData = async () => {
+
+            // if (monaco) {
+            //     //console.log("here is the monaco instance:", monaco);
+            // }
+
+            var baseUri = GetBaseUrl();
+            let response = await apiService().get("/oem/GetEditorData?domain=" + baseUri + "&companyId=" + companyId);
+            if (response.status == 200)
+            {
+                setData(response.data);
+                setSelectedFont(response.data.fontFamily);
+            }
+        }
+        fetchData();
+
+    }, [monaco]);
+
+    return (
+        <>
+            <Box sx={{ width: '100%' }}>
+
+              {selectedFont != null &&
+                <link href={"https://fonts.googleapis.com/css2?family=" + selectedFont} rel="stylesheet"></link>
+              }
+          
+              <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                  <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                  <Tab label="General" {...a11yProps(0)} />
+                  <Tab label="Fonts" {...a11yProps(1)} />
+                  <Tab label="Style Sheet Editor" {...a11yProps(2)} />
+                  <Tab label="HTML Import Editor" {...a11yProps(3)} />
+                  </Tabs>
+              </Box>
+              <TabPanel value={value} index={0}>
+                
+                {dnsFields != null && dnsFields.map((dnsField) => {
+                  
+                  return (
+                    <Box>
+                      <Grid container spacing={2}>
+                        <Grid item xs={3}>
+                          {dnsField.name}
+                        </Grid>
+                        <Grid item xs={9}>
+
+                          <ColorPicker name={dnsField.name} defaultColor={dnsField.value} onColorChanged={async (name, hex) => {
+
+                            await apiService().post("/OEM/SetFieldValue", {
+                              id: dnsField.id,
+                              fieldId: dnsField.fieldId,
+                              value: hex
+                            });
+
+                            notification(dnsField.name + " Saved");
+
+                          }} />
+                        </Grid>
+                      </Grid>
+                    </Box>
+                  )
+
+                  
+
+                })}
+
+                {/* {dnsFields != null &&
+                  <Box sx={{marginTop:2}}>
+                    <Button startIcon={<SaveRoundedIcon/>} variant="contained" onClick={async () => {
+
+                      await apiService().post("/oem/SetFieldValue", {
+                        id: dnsField.id,
+                        name: dnsField.name,
+                        value: JSON.stringify(rgb)
+                      });
+
+                    }}>Save Changes</Button>
+                  </Box>
+                } */}
+
+              </TabPanel>
+              <TabPanel value={value} index={1}>
+
+              <Grid container spacing={2}>
+                <Grid item xs={6}>
+
+                {(loadedUser) &&
+
+                  <DataGrid
+                    rows={fonts}
+                    columns={columns}
+                    sx={{height:"80vh"}}
+                    onRowClick={async (row) => {
+
+                      var baseUri = GetBaseUrl();
+                      let response = await apiService().post("/OEM/SetFont", {
+                        companyId: companyId,
+                        domain: baseUri,
+                        value: row.row.label
+                      });
+                      if (response != null && response.status == 200)
+                      {
+                        setSelectedFont(row.row.label);
+                        notification("Font saved!");
+                      }
+                    }}
+                  />
+                }
+
+                </Grid>
+                <Grid item xs={6} sx={{marginTop:4}}>
+                  <Box>Font Selected:</Box>
+                  <Box sx={{marginBottom:2, fontWeight:"bold", fontSize:20}}> {selectedFont}</Box>
+                  <hr />
+                  <Box sx={{fontFamily: selectedFont}}>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ultricies odio. Nunc ut quam turpis. In hac habitasse platea dictumst. 
+                    Suspendisse potenti. Nullam malesuada, purus id sagittis vestibulum, massa tellus gravida elit, vitae ultrices tortor nulla ac nunc. 
+                    Aenean tempus semper est vel convallis. Sed feugiat, risus eu tincidunt eleifend, purus metus vulputate nulla, et condimentum sapien erat in nisi. 
+                    Nunc non malesuada libero. Donec tempus tincidunt mi at vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
+                    Suspendisse potenti. Etiam nec eleifend orci. Suspendisse in est vel nunc rhoncus bibendum vitae id felis. 
+                    Integer bibendum dolor elit, at tincidunt lacus tempor ac. Maecenas lobortis, mauris at condimentum feugiat, nulla orci condimentum massa, sed facilisis tellus ligula vitae metus. 
+                    Aliquam erat volutpat. Quisque dignissim felis augue, at semper nisl posuere ut. Proin fringilla diam vitae faucibus finibus.
+                    <br/><br/>
+                    Aenean tempus semper est vel convallis. Sed feugiat, risus eu tincidunt eleifend, purus metus vulputate nulla, et condimentum sapien erat in nisi. Nunc non malesuada libero. Donec tempus tincidunt mi at vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti
+                  </Box>
+                </Grid>
+              </Grid>
+
+              </TabPanel>
+              <TabPanel value={value} index={2}>
+
+              <Grid container spacing={2}>
+                  <Grid item xs={6}>
+                      <h4 style={{marginBottom:"0px"}}>Global CSS edits</h4>
+                      <small>You can make edits to your stylesheet</small>
+                  </Grid>
+                  <Grid item xs={6} sx={{textAlign:"right"}}>
+                      <Button startIcon={<CheckIcon/>} sx={{marginTop:4}} variant="contained" onClick={async () => { 
+
+                        var baseUri = GetBaseUrl();
+                        let response = await apiService().post("/OEM/SetGlobalCSS", {
+                          companyId: companyId,
+                          domain: baseUri,
+                          value: cssEditorRef.current.getValue()
+                        });
+                        if (response != null && response.status == 200)
+                        {
+                          notification("CSS Saved!")
+                        }
+
+                      }}>Save Changes</Button>
+                  </Grid>
+              </Grid>
+
+              <Box sx={{paddingTop:1}}>
+
+                  <Editor
+                      height="70vh"
+                      onMount={handleCSSEditorDidMount}
+                      defaultLanguage="css"
+                      theme="vs-dark" 
+                      defaultValue={data.prettyCSS == null ? "" : data.prettyCSS}
+                  />
+              </Box>
+
+              </TabPanel>
+              <TabPanel value={value} index={3}>
+                  
+
+                  <Grid container spacing={2}>
+                      <Grid item xs={6}>
+                          <h4 style={{marginBottom:"0px"}}>HTML import Edits</h4>
+                          <small>You can add imports such as google analytics or clarity</small>
+                      </Grid>
+                      <Grid item xs={6} sx={{textAlign:"right"}}>
+                          <Button startIcon={<CheckIcon/>} sx={{marginTop:4}} variant="contained" onClick={async () => {
+
+                            var baseUri = GetBaseUrl();
+                            let response = await apiService().post("/OEM/SetGlobalHTML", {
+                              companyId: companyId,
+                              domain: baseUri,
+                              value: htmlEditorRef.current.getValue()
+                            });
+                            if (response != null && response.status == 200)
+                            {
+                              notification("HTML saved!")
+                            } 
+
+                           }}>Save Changes</Button>
+                      </Grid>
+                  </Grid>
+                  
+                  <Box sx={{paddingTop:1}}>
+                      <Editor
+                          height="70vh"
+                          onMount={handleHtmlEditorDidMount}
+                          defaultLanguage="html"
+                          theme="vs-dark"
+                          defaultValue={data.prettyHTML == null ? "" : data.prettyHTML}
+                      />
+                  </Box>
+
+
+              </TabPanel>
+            </Box>
+        </>
+    )
+}