@opengeoweb/sigmet-airmet 1.2.2 → 2.1.0

package/sigmet-airmet.esm.js

@@ -8,7 +8,7 @@ import { ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormNumberField,
 import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
 import produce, { produce as produce$1 } from 'immer';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
-import { mapTypes, mapSelectors, generateMapId, generateLayerId, mapActions, MapViewConnect, MapViewLayer } from '@opengeoweb/core';
+import { mapTypes, mapSelectors, generateMapId, generateTimesliderId, SyncGroups, generateLayerId, mapActions, publicLayers, MapControls, LayerManagerMapButtonConnect, MapViewConnect, MapViewLayer, TimeSliderConnect } from '@opengeoweb/core';
 import * as turf from '@turf/turf';
 import { polygonToLineString, booleanClockwise, rewind } from '@turf/turf';
 import { useDraftFormHelpers, useIsMounted, StatusTag, AlertBanner, usePreventBrowserClose, useConfirmationDialog, isAxiosError, getAxiosErrorMessage, ConfirmationServiceProvider, usePoller } from '@opengeoweb/shared';
@@ -17,103 +17,107 @@ import moment from 'moment';
 import { debounce } from 'lodash';
 import { Skeleton } from '@material-ui/lab';
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-}
-
-function __read(o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-}
-
-function __spreadArray(to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function (obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function (obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+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 _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+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.");
 }
 
 var srsAndBboxDefault = {
@@ -125,34 +129,6 @@ var srsAndBboxDefault = {
   },
   srs: 'EPSG:3857'
 };
-var baseLayer = {
-  name: 'WorldMap_Light_Grey_Canvas',
-  title: 'WorldMap_Light_Grey_Canvas',
-  type: 'twms',
-  layerType: mapTypes.LayerType.baseLayer,
-  enabled: true
-};
-var countryBorders = {
-  service: 'https://geoservices.knmi.nl/wms?DATASET=baselayers&',
-  name: 'countryborders',
-  format: 'image/png',
-  layerType: mapTypes.LayerType.overLayer,
-  enabled: true
-};
-var northSeaPlatforms = {
-  service: 'https://adaguc-server-geoweb.geoweb.knmi.cloud/adagucserver?dataset=OVL-sigmetairmet',
-  name: 'northseastations',
-  format: 'image/png',
-  layerType: mapTypes.LayerType.overLayer,
-  enabled: true
-};
-var majorAirportsEHAA = {
-  service: 'https://adaguc-server-geoweb.geoweb.knmi.cloud/adagucserver?dataset=OVL-sigmetairmet',
-  name: 'airports',
-  format: 'image/png',
-  layerType: mapTypes.LayerType.overLayer,
-  enabled: true
-};
 var featurePropsStart = {
   stroke: '#f24a00',
   'stroke-width': 1.5,
@@ -199,7 +175,7 @@ var emptyPolygonGeoJSONStart = {
   type: 'FeatureCollection',
   features: [{
     type: 'Feature',
-    properties: __assign(__assign({}, featurePropsUnStyled), {
+    properties: Object.assign(Object.assign({}, featurePropsUnStyled), {
       selectionType: 'poly'
     }),
     geometry: {
@@ -212,7 +188,7 @@ var emptyPolygonGeoJSONEnd = {
   type: 'FeatureCollection',
   features: [{
     type: 'Feature',
-    properties: __assign(__assign({}, featurePropsUnStyled), {
+    properties: Object.assign(Object.assign({}, featurePropsUnStyled), {
       selectionType: 'poly'
     }),
     geometry: {
@@ -225,7 +201,7 @@ var emptyBoxGeoJSONStart = {
   type: 'FeatureCollection',
   features: [{
     type: 'Feature',
-    properties: __assign({
+    properties: Object.assign({
       _adaguctype: 'box',
       selectionType: 'box'
     }, featurePropsUnStyled),
@@ -239,7 +215,7 @@ var emptyBoxGeoJSONEnd = {
   type: 'FeatureCollection',
   features: [{
     type: 'Feature',
-    properties: __assign({
+    properties: Object.assign({
       _adaguctype: 'box',
       selectionType: 'box'
     }, featurePropsUnStyled),
@@ -253,7 +229,7 @@ var emptyPointsGeojsonStart = {
   type: 'FeatureCollection',
   features: [{
     type: 'Feature',
-    properties: __assign(__assign({}, featurePropsUnStyled), {
+    properties: Object.assign(Object.assign({}, featurePropsUnStyled), {
       selectionType: 'point'
     }),
     geometry: {
@@ -266,7 +242,7 @@ var emptyPointsGeojsonEnd = {
   type: 'FeatureCollection',
   features: [{
     type: 'Feature',
-    properties: __assign(__assign({}, featurePropsUnStyled), {
+    properties: Object.assign(Object.assign({}, featurePropsUnStyled), {
       selectionType: 'point'
     }),
     geometry: {
@@ -459,6 +435,59 @@ var StartOrEndDrawing;
   StartOrEndDrawing["end"] = "end";
 })(StartOrEndDrawing || (StartOrEndDrawing = {}));
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+var adagucBaseUrl = 'https://adaguc-server-geoweb.geoweb.knmi.cloud/adagucserver';
+var KNMIGeoWebSigmetAirmetOverlays = {
+  name: 'SigmetAirmetOverlays',
+  url: "".concat(adagucBaseUrl, "?dataset=OVL-sigmetairmet"),
+  id: 'sigmetairmetoverlays'
+};
+var northSeaPlatforms = {
+  service: KNMIGeoWebSigmetAirmetOverlays.url,
+  name: 'northseastations',
+  format: 'image/png',
+  layerType: mapTypes.LayerType.overLayer,
+  enabled: true
+};
+var majorAirportsEHAA = {
+  service: KNMIGeoWebSigmetAirmetOverlays.url,
+  name: 'airports',
+  format: 'image/png',
+  layerType: mapTypes.LayerType.overLayer,
+  enabled: true
+};
+
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
 var allowOneGeoJSONFeature = function allowOneGeoJSONFeature(mode, geojson) {
   switch (mode) {
     case MapDrawMode.BOX:
@@ -472,39 +501,50 @@ var allowOneGeoJSONFeature = function allowOneGeoJSONFeature(mode, geojson) {
   }
 };
 
-var MapViewGeoJson = function MapViewGeoJson(_a) {
-  var geoJSONs = _a.geoJSONs,
-      _b = _a.setLayerGeoJSONs,
-      setLayerGeoJSONs = _b === void 0 ? function () {} : _b,
-      _c = _a.layerDrawModes,
-      layerDrawModes = _c === void 0 ? {
+var MapViewGeoJson = function MapViewGeoJson(_ref) {
+  var geoJSONs = _ref.geoJSONs,
+      _ref$setLayerGeoJSONs = _ref.setLayerGeoJSONs,
+      setLayerGeoJSONs = _ref$setLayerGeoJSONs === void 0 ? function () {} : _ref$setLayerGeoJSONs,
+      _ref$layerDrawModes = _ref.layerDrawModes,
+      layerDrawModes = _ref$layerDrawModes === void 0 ? {
     start: null,
     end: null
-  } : _c,
-      _d = _a.drawMode,
-      drawMode = _d === void 0 ? {
+  } : _ref$layerDrawModes,
+      _ref$drawMode = _ref.drawMode,
+      drawMode = _ref$drawMode === void 0 ? {
     start: null,
     end: null
-  } : _d,
-      _e = _a.setDrawMode,
-      setDrawMode = _e === void 0 ? function () {} : _e,
-      _f = _a.exitDrawModeCallbackStart,
-      exitDrawModeCallbackStart = _f === void 0 ? function () {} : _f,
-      _g = _a.exitDrawModeCallbackEnd,
-      exitDrawModeCallbackEnd = _g === void 0 ? function () {} : _g;
+  } : _ref$drawMode,
+      _ref$setDrawMode = _ref.setDrawMode,
+      setDrawMode = _ref$setDrawMode === void 0 ? function () {} : _ref$setDrawMode,
+      _ref$exitDrawModeCall = _ref.exitDrawModeCallbackStart,
+      exitDrawModeCallbackStart = _ref$exitDrawModeCall === void 0 ? function () {} : _ref$exitDrawModeCall,
+      _ref$exitDrawModeCall2 = _ref.exitDrawModeCallbackEnd,
+      exitDrawModeCallbackEnd = _ref$exitDrawModeCall2 === void 0 ? function () {} : _ref$exitDrawModeCall2;
   var dispatch = useDispatch();
+  var firstMap = useSelector(function (store) {
+    return mapSelectors.getFirstMap(store);
+  }, shallowEqual);
+  var firstMapId = firstMap && firstMap.id ? firstMap.id : null;
   var mapLayers = useSelector(function (store) {
-    return mapSelectors.getMapLayers(store, 'main-map');
+    return mapSelectors.getMapLayers(store, firstMapId);
   }, shallowEqual);
   var mapDimensions = useSelector(function (store) {
-    return mapSelectors.getMapDimensions(store, 'main-map');
+    return mapSelectors.getMapDimensions(store, firstMapId);
   }, shallowEqual);
-  var mapId = React.useRef("sigmet-" + generateMapId()).current;
+  var mapId = React.useRef("sigmet-".concat(generateMapId())).current;
+  var timesliderId = React.useRef("sigmet-".concat(generateTimesliderId())).current;
+  var syncGroupAddGroup = React.useCallback(function (payload) {
+    return dispatch(SyncGroups.actions.syncGroupAddGroup(payload));
+  }, [dispatch]);
+  var syncGroupAddTarget = React.useCallback(function (payload) {
+    return dispatch(SyncGroups.actions.syncGroupAddTarget(payload));
+  }, [dispatch]);
   React.useEffect(function () {
     if (mapLayers && mapLayers.length) {
       // use maplayers, but change layerId and current mapId
       var layers = mapLayers.map(function (layer) {
-        return __assign(__assign({}, layer), {
+        return Object.assign(Object.assign({}, layer), {
           id: generateLayerId(),
           mapId: mapId
         });
@@ -525,41 +565,58 @@ var MapViewGeoJson = function MapViewGeoJson(_a) {
 
     dispatch(mapActions.setBaseLayers({
       mapId: mapId,
-      layers: [__assign(__assign({}, baseLayer), {
-        id: "baselayer-" + mapId
-      }), __assign(__assign({}, countryBorders), {
-        id: "countryborders-" + mapId
-      }), __assign(__assign({}, northSeaPlatforms), {
-        id: "northseaplatforms-" + mapId
-      }), __assign(__assign({}, majorAirportsEHAA), {
-        id: "majorairportsehaa-" + mapId
+      layers: [Object.assign(Object.assign({}, publicLayers.baseLayerGrey), {
+        id: "baselayer-".concat(mapId)
+      }), Object.assign(Object.assign({}, publicLayers.overLayer), {
+        id: "countryborders-".concat(mapId)
+      }), Object.assign(Object.assign({}, northSeaPlatforms), {
+        id: "northseaplatforms-".concat(mapId)
+      }), Object.assign(Object.assign({}, majorAirportsEHAA), {
+        id: "majorairportsehaa-".concat(mapId)
       })]
     }));
     dispatch(mapActions.setBbox({
       mapId: mapId,
       bbox: srsAndBboxDefault.bbox,
       srs: srsAndBboxDefault.srs
-    })); // eslint-disable-next-line react-hooks/exhaustive-deps
+    }));
+    syncGroupAddGroup({
+      groupId: 'Time_SigmetAirmet',
+      title: 'Group 1 for sigmet/airmet map',
+      type: SyncGroups.constants.SYNCGROUPS_TYPE_SETTIME
+    });
+    syncGroupAddTarget({
+      groupId: 'Time_SigmetAirmet',
+      targetId: mapId
+    });
+    syncGroupAddTarget({
+      groupId: 'Time_SigmetAirmet',
+      targetId: timesliderId
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     style: {
-      height: '100%'
+      position: 'relative',
+      height: '99%'
     },
     "data-testid": "MapView"
-  }, /*#__PURE__*/React.createElement(MapViewConnect, {
+  }, /*#__PURE__*/React.createElement(MapControls, null, /*#__PURE__*/React.createElement(LayerManagerMapButtonConnect, {
+    source: "module",
+    mapId: mapId
+  })), /*#__PURE__*/React.createElement(MapViewConnect, {
     mapId: mapId
   }, /*#__PURE__*/React.createElement(MapViewLayer, {
-    id: "geojsonlayer-fir-" + mapId,
+    id: "geojsonlayer-fir-".concat(mapId),
     isInEditMode: false,
     geojson: geoJSONs.fir
   }), /*#__PURE__*/React.createElement(MapViewLayer, {
-    id: "geojsonlayer-end-" + mapId,
+    id: "geojsonlayer-end-".concat(mapId),
     isInEditMode: drawMode.end !== null && layerDrawModes.end !== null,
     geojson: geoJSONs.end,
     drawMode: layerDrawModes.end,
     updateGeojson: function updateGeojson(geojson) {
       var end = allowOneGeoJSONFeature(layerDrawModes.end, geojson);
-      setLayerGeoJSONs(__assign(__assign({}, geoJSONs), {
+      setLayerGeoJSONs(Object.assign(Object.assign({}, geoJSONs), {
         end: end
       }));
     },
@@ -572,13 +629,13 @@ var MapViewGeoJson = function MapViewGeoJson(_a) {
     },
     featureNrToEdit: 0
   }), /*#__PURE__*/React.createElement(MapViewLayer, {
-    id: "geojsonlayer-start-" + mapId,
+    id: "geojsonlayer-start-".concat(mapId),
     isInEditMode: drawMode.start !== null && layerDrawModes.start !== null,
     geojson: geoJSONs.start,
     drawMode: layerDrawModes.start,
     updateGeojson: function updateGeojson(geojson) {
       var start = allowOneGeoJSONFeature(layerDrawModes.start, geojson);
-      setLayerGeoJSONs(__assign(__assign({}, geoJSONs), {
+      setLayerGeoJSONs(Object.assign(Object.assign({}, geoJSONs), {
         start: start
       }));
     },
@@ -591,13 +648,24 @@ var MapViewGeoJson = function MapViewGeoJson(_a) {
     },
     featureNrToEdit: 0
   }), /*#__PURE__*/React.createElement(MapViewLayer, {
-    id: "geojsonlayer-intersection-end-" + mapId,
+    id: "geojsonlayer-intersection-end-".concat(mapId),
     isInEditMode: false,
     geojson: geoJSONs.intersectionEnd
   }), /*#__PURE__*/React.createElement(MapViewLayer, {
-    id: "geojsonlayer-intersection-start-" + mapId,
+    id: "geojsonlayer-intersection-start-".concat(mapId),
     isInEditMode: false,
     geojson: geoJSONs.intersectionStart
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: '0',
+      bottom: '0',
+      zIndex: 1000,
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(TimeSliderConnect, {
+    sourceId: timesliderId,
+    mapId: mapId
   })));
 };
 
@@ -819,10 +887,8 @@ var addFeatureProperties = function addFeatureProperties(geojson, featurePropert
   });
 };
 
-var useDrawMode = function useDrawMode(initialGeometry) {
-  if (initialGeometry === void 0) {
-    initialGeometry = null;
-  }
+var useDrawMode = function useDrawMode() {
+  var initialGeometry = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
 
   var getInitialLayerDrawModes = function getInitialLayerDrawModes(startorEnd) {
     return initialGeometry && initialGeometry[startorEnd] ? getDrawModeFromSelectionType(initialGeometry[startorEnd].features[0].properties.selectionType) : null;
@@ -830,25 +896,27 @@ var useDrawMode = function useDrawMode(initialGeometry) {
   /* For the radio buttons */
 
 
-  var _a = __read(React.useState({
+  var _React$useState = React.useState({
     start: null,
     end: null
-  }), 2),
-      drawMode = _a[0],
-      setDrawMode = _a[1];
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      drawMode = _React$useState2[0],
+      setDrawMode = _React$useState2[1];
   /* Drawmode for the layers */
 
 
-  var _b = __read(React.useState({
+  var _React$useState3 = React.useState({
     start: getInitialLayerDrawModes('start'),
     end: getInitialLayerDrawModes('end')
-  }), 2),
-      layerDrawModes = _b[0],
-      setLayersDrawModes = _b[1];
+  }),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      layerDrawModes = _React$useState4[0],
+      setLayersDrawModes = _React$useState4[1];
   /* GeoJSONs for the layers */
 
 
-  var _c = __read(React.useState(function () {
+  var _React$useState5 = React.useState(function () {
     return {
       start: addFeatureProperties(initialGeometry && initialGeometry.start, featurePropsStart),
       end: addFeatureProperties(initialGeometry && initialGeometry.end, featurePropsEnd),
@@ -856,9 +924,10 @@ var useDrawMode = function useDrawMode(initialGeometry) {
       intersectionEnd: addFeatureProperties(initialGeometry && initialGeometry.intersectionEnd, featurePropsIntersectionEnd),
       fir: addFeatureProperties(getFir(), featurePropsFIR)
     };
-  }), 2),
-      geoJSONs = _c[0],
-      setLayerGeoJSONs = _c[1];
+  }),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      geoJSONs = _React$useState6[0],
+      setLayerGeoJSONs = _React$useState6[1];
   /**
    *
    * @param mapDrawMode Can be 'POINT' | 'BOX' | 'POLYGON' |  'FIR' | 'DELETE'
@@ -867,8 +936,7 @@ var useDrawMode = function useDrawMode(initialGeometry) {
 
 
   var setDrawModeType = function setDrawModeType(mapDrawMode, startOrEnd, updateCallback) {
-    var newGeoJSONDrawMode = __assign({}, layerDrawModes);
-
+    var newGeoJSONDrawMode = Object.assign({}, layerDrawModes);
     var featureStyleProperties = startOrEnd === StartOrEndDrawing.start ? featurePropsStart : featurePropsEnd;
     /* Switch on the mapdrawmode type for either start or end */
 
@@ -903,17 +971,19 @@ var useDrawMode = function useDrawMode(initialGeometry) {
       case MapDrawMode.FIR:
         {
           newGeoJSONDrawMode[startOrEnd] = mapDrawMode;
-          var cleanGeoJSON = produce(geoJSONs, function (draft) {
-            draft[startOrEnd] = addFeatureProperties(getFir(), __assign(__assign({}, featureStyleProperties), {
+
+          var _cleanGeoJSON = produce(geoJSONs, function (draft) {
+            draft[startOrEnd] = addFeatureProperties(getFir(), Object.assign(Object.assign({}, featureStyleProperties), {
               selectionType: 'fir'
             }));
           });
+
           setDrawMode({
             start: null,
             end: null
           });
           setLayersDrawModes(newGeoJSONDrawMode);
-          var intersections = createInterSections(cleanGeoJSON);
+          var intersections = createInterSections(_cleanGeoJSON);
           setLayerGeoJSONs(intersections);
           if (updateCallback) updateCallback(intersections);
           break;
@@ -923,8 +993,7 @@ var useDrawMode = function useDrawMode(initialGeometry) {
 
       case MapDrawMode.DELETE:
         {
-          var newDrawMode = __assign({}, drawMode);
-
+          var newDrawMode = Object.assign({}, drawMode);
           newDrawMode[startOrEnd] = null;
           setDrawMode(newDrawMode);
 
@@ -932,23 +1001,27 @@ var useDrawMode = function useDrawMode(initialGeometry) {
             case MapDrawMode.POINT:
             case MapDrawMode.BOX:
               {
-                var cleanGeoJSON = produce(geoJSONs, function (draft) {
+                var _cleanGeoJSON2 = produce(geoJSONs, function (draft) {
                   draft[startOrEnd] = addFeatureProperties(geoJSONTemplate[newGeoJSONDrawMode[startOrEnd]][startOrEnd], featureStyleProperties);
                 });
-                var intersections = createInterSections(cleanGeoJSON);
-                setLayerGeoJSONs(intersections);
-                if (updateCallback) updateCallback(intersections);
+
+                var _intersections = createInterSections(_cleanGeoJSON2);
+
+                setLayerGeoJSONs(_intersections);
+                if (updateCallback) updateCallback(_intersections);
                 break;
               }
 
             default:
               {
-                var cleanGeoJSON = produce(geoJSONs, function (draft) {
+                var _cleanGeoJSON3 = produce(geoJSONs, function (draft) {
                   draft[startOrEnd] = addFeatureProperties(geoJSONTemplate['POLYGON'][startOrEnd], featureStyleProperties);
                 });
-                var intersections = createInterSections(cleanGeoJSON);
-                setLayerGeoJSONs(intersections);
-                if (updateCallback) updateCallback(intersections);
+
+                var _intersections2 = createInterSections(_cleanGeoJSON3);
+
+                setLayerGeoJSONs(_intersections2);
+                if (updateCallback) updateCallback(_intersections2);
                 break;
               }
           }
@@ -1081,14 +1154,51 @@ var useStyles$6 = makeStyles({
   }
 });
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 var RadioButtonAndLabel = function RadioButtonAndLabel(props) {
   var value = props.value,
       label = props.label,
-      _a = props.disabled,
-      disabled = _a === void 0 ? true : _a,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? true : _props$disabled,
       restProps = __rest(props, ["value", "label", "disabled"]);
 
-  return /*#__PURE__*/React__default.createElement(FormControlLabel, __assign({
+  return /*#__PURE__*/React__default.createElement(FormControlLabel, Object.assign({
     style: {
       pointerEvents: 'none'
     },
@@ -1120,11 +1230,16 @@ var RadioButtonAndLabel = function RadioButtonAndLabel(props) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 
-var Change = function Change(_a) {
-  var isDisabled = _a.isDisabled,
-      isReadOnly = _a.isReadOnly;
-  var watch = useFormContext().watch;
-  var isRequired = useDraftFormHelpers().isRequired;
+var Change = function Change(_ref) {
+  var isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly;
+
+  var _useFormContext = useFormContext(),
+      watch = _useFormContext.watch;
+
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      isRequired = _useDraftFormHelpers.isRequired;
+
   var classes = useStyles$6();
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -1172,18 +1287,34 @@ var Change = function Change(_a) {
   })))));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
 var RegionDraw = function RegionDraw(props) {
-  return /*#__PURE__*/React__default.createElement(SvgIcon, __assign({}, props), /*#__PURE__*/React__default.createElement("path", {
+  return /*#__PURE__*/React__default.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React__default.createElement("path", {
     d: "M6,2 L6,2.999 L10,2.999 L10,2 L14,2 L14,2.999 L18,2.999 L18,2 L22,2 L22,6 L20.999,6 L20.999,10 L22,10 L22,14 L20.999,14 L20.999,18 L22,18 L22,22 L18,22 L18,20.999 L14,20.999 L14,22 L10,22 L10,20.999 L6,20.999 L6,22 L2,22 L2,18 L2.999,18 L2.999,14 L2,14 L2,10 L2.999,10 L2.999,6 L2,6 L2,2 L6,2 Z M10,4.999 L6,4.999 L6,6 L4.999,6 L4.999,10 L6,10 L6,14 L4.999,14 L4.999,18 L6,18 L6,18.999 L10,18.999 L10,18 L14,18 L14,18.999 L18,18.999 L18,18 L18.999,18 L18.999,14 L18,14 L18,10 L18.999,10 L18.999,6 L18,6 L18,4.999 L14,4.999 L14,6 L10,6 L10,4.999 Z"
   }));
 };
 var PolygonDraw = function PolygonDraw(props) {
-  return /*#__PURE__*/React__default.createElement(SvgIcon, __assign({}, props), /*#__PURE__*/React__default.createElement("path", {
+  return /*#__PURE__*/React__default.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React__default.createElement("path", {
     d: "M14,1 L14,4.113 L12.0044614,2.2 L11.994,5.221 L4.039,19 L5,19 L5,23 L1,23 L1,19 L2.307,19 L10.389,5 L10,5 L10,1 L14,1 Z M13.0044614,4.62000715 L23.2887637,14.4827842 L18.3738381,14.8752125 L20.4451897,19.755011 L18.7229079,20.4860763 L16.6515563,15.6062777 L12.9550728,18.8691758 L13.0044614,4.62000715 Z"
   }));
 };
 var FIRDraw = function FIRDraw(props) {
-  return /*#__PURE__*/React__default.createElement(SvgIcon, __assign({}, props), /*#__PURE__*/React__default.createElement("g", {
+  return /*#__PURE__*/React__default.createElement(SvgIcon, Object.assign({}, props), /*#__PURE__*/React__default.createElement("g", {
     stroke: "none",
     strokeWidth: "1",
     fill: "none",
@@ -1234,11 +1365,11 @@ var useStyles$5 = makeStyles({
   }
 });
 
-var DrawTools = function DrawTools(_a) {
-  var _b = _a.type,
-      type = _b === void 0 ? '' : _b,
-      drawMode = _a.drawMode,
-      setDrawMode = _a.setDrawMode;
+var DrawTools = function DrawTools(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? '' : _ref$type,
+      drawMode = _ref.drawMode,
+      setDrawMode = _ref.setDrawMode;
   var classes = useStyles$5();
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -1249,7 +1380,7 @@ var DrawTools = function DrawTools(_a) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: "Drop a point as " + type + " position"
+    title: "Drop a point as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(LocationOn, {
       className: classes.drawButtons
@@ -1266,7 +1397,7 @@ var DrawTools = function DrawTools(_a) {
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: "Draw a box as " + type + " position"
+    title: "Draw a box as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(RegionDraw, {
       className: classes.drawButtons
@@ -1282,7 +1413,7 @@ var DrawTools = function DrawTools(_a) {
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: "Draw a shape as " + type + " position"
+    title: "Draw a shape as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(PolygonDraw, {
       className: classes.drawButtons
@@ -1298,7 +1429,7 @@ var DrawTools = function DrawTools(_a) {
   }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: "Set FIR as " + type + " position"
+    title: "Set FIR as ".concat(type, " position")
   }, /*#__PURE__*/React__default.createElement(Radio, {
     icon: /*#__PURE__*/React__default.createElement(FIRDraw, {
       className: classes.drawButtons
@@ -1330,30 +1461,12 @@ var DrawTools = function DrawTools(_a) {
   }))));
 };
 
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
-}
-
 var getHoursBeforeValidity = function getHoursBeforeValidity(phenomenon, fir, config) {
   if (!fir) return 4;
-  var _a = config.firareas[fir],
-      hoursbeforevalidity = _a.hoursbeforevalidity,
-
-  /* eslint-disable @typescript-eslint/naming-convention */
-  va_hoursbeforevalidity = _a.va_hoursbeforevalidity,
-      tc_hoursbeforevalidity = _a.tc_hoursbeforevalidity;
+  var _config$firareas$fir = config.firareas[fir],
+      hoursbeforevalidity = _config$firareas$fir.hoursbeforevalidity,
+      va_hoursbeforevalidity = _config$firareas$fir.va_hoursbeforevalidity,
+      tc_hoursbeforevalidity = _config$firareas$fir.tc_hoursbeforevalidity;
 
   switch (phenomenon) {
     // Tropical Cyclone
@@ -1370,12 +1483,10 @@ var getHoursBeforeValidity = function getHoursBeforeValidity(phenomenon, fir, co
 };
 var getMaxHoursOfValidity = function getMaxHoursOfValidity(phenomenon, fir, config) {
   if (!fir) return 4;
-  var _a = config.firareas[fir],
-      maxhoursofvalidity = _a.maxhoursofvalidity,
-
-  /* eslint-disable @typescript-eslint/naming-convention */
-  va_maxhoursofvalidity = _a.va_maxhoursofvalidity,
-      tc_maxhoursofvalidity = _a.tc_maxhoursofvalidity;
+  var _config$firareas$fir2 = config.firareas[fir],
+      maxhoursofvalidity = _config$firareas$fir2.maxhoursofvalidity,
+      va_maxhoursofvalidity = _config$firareas$fir2.va_maxhoursofvalidity,
+      tc_maxhoursofvalidity = _config$firareas$fir2.tc_maxhoursofvalidity;
 
   switch (phenomenon) {
     // Tropical Cyclone
@@ -1506,10 +1617,8 @@ var useProductSettings = function useProductSettings(productConfig) {
     };
   });
   var allowedUnits = Object.keys(firData).reduce(function (list, key) {
-    var _a;
-
     if (firData[key].units) {
-      return __assign(__assign({}, list), (_a = {}, _a[key] = firData[key].units, _a));
+      return Object.assign(Object.assign({}, list), _defineProperty({}, key, firData[key].units));
     }
 
     return list;
@@ -1539,19 +1648,19 @@ var getDialogtitle = function getDialogtitle(product, productType) {
   var productName = productType.toUpperCase();
 
   if (product === null) {
-    return "New " + productName;
+    return "New ".concat(productName);
   }
 
   if (!isInstanceOfCancelSigmetOrAirmet(product)) {
     var phenomenon = productType === 'sigmet' ? SigmetPhenomena[product.phenomenon] : AirmetPhenomena[product.phenomenon];
-    return productName + " " + phenomenon + " - " + (product.status === 'DRAFT' ? 'saved as draft' : ProductStatusDescription[product.status]);
+    return "".concat(productName, " ").concat(phenomenon, " - ").concat(product.status === 'DRAFT' ? 'saved as draft' : ProductStatusDescription[product.status]);
   }
 
   if (isInstanceOfCancelSigmet(product)) {
-    return productName + " Cancels " + product.cancelsSigmetSequenceId;
+    return "".concat(productName, " Cancels ").concat(product.cancelsSigmetSequenceId);
   }
 
-  return productName + " Cancels " + product.cancelsAirmetSequenceId;
+  return "".concat(productName, " Cancels ").concat(product.cancelsAirmetSequenceId);
 };
 var getProductFormMode = function getProductFormMode(canBeOptions, productListItem) {
   if (productListItem === null) return 'new';
@@ -1604,22 +1713,20 @@ var hasValue = function hasValue(value) {
 };
 var removeEmptyNumberFieldValues = function removeEmptyNumberFieldValues(product) {
   return Object.keys(product).reduce(function (list, key) {
-    var _a, _b;
-
     var value = product[key]; // check if nested object has value
 
     if (_typeof(value) === 'object' && value !== null && value !== undefined) {
       var hasNaNValue = Object.keys(value).reduce(function (total, valKey) {
         return !hasValue(value[valKey]) || total;
       }, false);
-      return __assign(__assign({}, list), !hasNaNValue && (_a = {}, _a[key] = value, _a));
+      return Object.assign(Object.assign({}, list), !hasNaNValue && _defineProperty({}, key, value));
     }
 
-    return __assign(__assign({}, list), hasValue(value) && (_b = {}, _b[key] = value, _b));
+    return Object.assign(Object.assign({}, list), hasValue(value) && _defineProperty({}, key, value));
   }, {});
 };
 var createSigmetPostParameter = function createSigmetPostParameter(sigmetToPost, newStatus, previousUuid) {
-  var sigmetIncludingUuid = previousUuid !== null ? __assign(__assign({}, sigmetToPost), {
+  var sigmetIncludingUuid = previousUuid !== null ? Object.assign(Object.assign({}, sigmetToPost), {
     uuid: previousUuid
   }) : sigmetToPost; // Do not send empty numbered fields to the BE to prevent errors
 
@@ -1630,7 +1737,7 @@ var createSigmetPostParameter = function createSigmetPostParameter(sigmetToPost,
   };
 };
 var createAirmetPostParameter = function createAirmetPostParameter(airmetToPost, newStatus, previousUuid) {
-  var airmetIncludingUuid = previousUuid !== null ? __assign(__assign({}, airmetToPost), {
+  var airmetIncludingUuid = previousUuid !== null ? Object.assign(Object.assign({}, airmetToPost), {
     uuid: previousUuid
   }) : airmetToPost; // Do not send empty numbered fields to the BE to prevent errors
 
@@ -1642,24 +1749,24 @@ var createAirmetPostParameter = function createAirmetPostParameter(airmetToPost,
 };
 var getConfirmationDialogTitle = function getConfirmationDialogTitle(action, productType) {
   var product = productType.toUpperCase();
-  if (action === 'CLOSED') return "Close " + product;
-  if (action === 'DISCARDED') return "Discard " + product;
+  if (action === 'CLOSED') return "Close ".concat(product);
+  if (action === 'DISCARDED') return "Discard ".concat(product);
   if (action === 'PUBLISHED') return 'Publish';
-  return "Cancel " + product;
+  return "Cancel ".concat(product);
 };
 var getConfirmationDialogContent = function getConfirmationDialogContent(action, productType) {
   var product = productType.toUpperCase();
-  if (action === 'DISCARDED') return "Are you sure you would like to discard this " + product + "? Its properties will be lost";
+  if (action === 'DISCARDED') return "Are you sure you would like to discard this ".concat(product, "? Its properties will be lost");
   if (action === 'CLOSED') return 'Do you want to save any changes made?';
-  if (action === 'PUBLISHED') return "Are you sure you want to publish this " + product + "?";
-  return "Are you sure you want to cancel this " + product + "?";
+  if (action === 'PUBLISHED') return "Are you sure you want to publish this ".concat(product, "?");
+  return "Are you sure you want to cancel this ".concat(product, "?");
 };
 var getConfirmationDialogButtonLabel = function getConfirmationDialogButtonLabel(action, productType) {
   var product = productType.toUpperCase();
 
   switch (action) {
     case 'DISCARDED':
-      return "Discard " + product;
+      return "Discard ".concat(product);
 
     case 'PUBLISHED':
       return 'Publish';
@@ -1682,11 +1789,11 @@ var getConfirmationDialogCancelLabel = function getConfirmationDialogCancelLabel
 };
 var getProductIssueDate = function getProductIssueDate(initialProduct, initialCancelProduct) {
   if (initialProduct !== null && (initialProduct.status === 'PUBLISHED' || initialProduct.status === 'EXPIRED') && initialProduct.issueDate) {
-    return moment.utc(initialProduct.issueDate).format('YYYY/MM/DD HH:mm') + " UTC";
+    return "".concat(moment.utc(initialProduct.issueDate).format('YYYY/MM/DD HH:mm'), " UTC");
   }
 
   if (initialCancelProduct !== null && initialCancelProduct.issueDate) {
-    return moment.utc(initialCancelProduct.issueDate).format('YYYY/MM/DD HH:mm') + " UTC";
+    return "".concat(moment.utc(initialCancelProduct.issueDate).format('YYYY/MM/DD HH:mm'), " UTC");
   }
 
   return '(Not published)';
@@ -1694,12 +1801,10 @@ var getProductIssueDate = function getProductIssueDate(initialProduct, initialCa
 
 var extractUnitsToShow = function extractUnitsToShow(allowedUnits, unitType) {
   return Object.keys(allowedUnits).reduce(function (list, key) {
-    var _a;
-
     var unit = allowedUnits[key];
 
     if (unitType[unit]) {
-      return __assign(__assign({}, list), (_a = {}, _a[unit] = unitType[unit], _a));
+      return Object.assign(Object.assign({}, list), _defineProperty({}, unit, unitType[unit]));
     }
 
     return list;
@@ -1858,27 +1963,32 @@ var _validateLevelUnitCombinations = function validateLevelUnitCombinations(leve
   return true;
 };
 
-var Levels = function Levels(_a) {
-  var isDisabled = _a.isDisabled,
-      isReadOnly = _a.isReadOnly,
-      _b = _a.onChange,
-      _onChange = _b === void 0 ? function () {
+var Levels = function Levels(_ref) {
+  var isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly,
+      _ref$onChange = _ref.onChange,
+      _onChange = _ref$onChange === void 0 ? function () {
     return null;
-  } : _b,
-      productType = _a.productType;
-
-  var _c = useFormContext(),
-      watch = _c.watch,
-      setValue = _c.setValue,
-      trigger = _c.trigger,
-      getValues = _c.getValues,
-      reset = _c.reset,
-      clearErrors = _c.clearErrors;
-
-  var isRequired = useDraftFormHelpers().isRequired;
+  } : _ref$onChange,
+      productType = _ref.productType;
+
+  var _useFormContext = useFormContext(),
+      watch = _useFormContext.watch,
+      setValue = _useFormContext.setValue,
+      trigger = _useFormContext.trigger,
+      getValues = _useFormContext.getValues,
+      reset = _useFormContext.reset,
+      clearErrors = _useFormContext.clearErrors;
+
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      isRequired = _useDraftFormHelpers.isRequired;
+
   var classes = useStyles$6();
   var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
-  var allowedUnits = useProductSettings(config).allowedUnits;
+
+  var _useProductSettings = useProductSettings(config),
+      allowedUnits = _useProductSettings.allowedUnits;
+
   var selectedFIR = watch('locationIndicatorATSR'); // Get allowed level units based on selected FIR - if no FIR selected, allow all default units
 
   var allowedLevelUnitsForFir = getAllowedUnits(selectedFIR, allowedUnits, 'level_unit', LevelUnits);
@@ -1913,7 +2023,7 @@ var Levels = function Levels(_a) {
     onChange: function onChange() {
       // Reset default value for the level value to '' so when it rerenders it uses this empty default value
       var currentValues = getValues();
-      reset(__assign(__assign({}, currentValues), {
+      reset(Object.assign(Object.assign({}, currentValues), {
         level: {
           unit: 'FL',
           value: ''
@@ -1993,16 +2103,19 @@ var Levels = function Levels(_a) {
         isRequired: isRequired,
         isInteger: isInteger,
         max: function max(value) {
-          // The max level depends on the unit
-          return isValidMax(value, getMaxLevelValue(getValues('level.unit'), productType)) || "The maximum level in " + LevelUnits[getValues('level.unit')] + " is " + getMaxLevelValue(getValues('level.unit'), productType);
+          return (// The max level depends on the unit
+            isValidMax(value, getMaxLevelValue(getValues('level.unit'), productType)) || "The maximum level in ".concat(LevelUnits[getValues('level.unit')], " is ").concat(getMaxLevelValue(getValues('level.unit'), productType))
+          );
         },
         min: function min(value) {
-          // The min level depends on the unit
-          return isValidMin(value, getMinLevelValue(getValues('level.unit'))) || "The minimum level in " + LevelUnits[getValues('level.unit')] + " is " + getMinLevelValue(getValues('level.unit'));
+          return (// The min level depends on the unit
+            isValidMin(value, getMinLevelValue(getValues('level.unit'))) || "The minimum level in ".concat(LevelUnits[getValues('level.unit')], " is ").concat(getMinLevelValue(getValues('level.unit')))
+          );
         },
         validateLevels: function validateLevels(value) {
-          // level step depends on the unit
-          return _validateLevels(value, getValues('level.unit'));
+          return (// level step depends on the unit
+            _validateLevels(value, getValues('level.unit'))
+          );
         }
       }
     },
@@ -2031,8 +2144,9 @@ var Levels = function Levels(_a) {
       validate: {
         isRequired: isRequired,
         validateLevelUnitCombinations: function validateLevelUnitCombinations(value) {
-          // level step depends on the unit
-          return _validateLevelUnitCombinations(value, watch('levelInfoMode') === 'BETW_SFC' ? 'SFC' : getValues('lowerLevel.unit')) === true;
+          return (// level step depends on the unit
+            _validateLevelUnitCombinations(value, watch('levelInfoMode') === 'BETW_SFC' ? 'SFC' : getValues('lowerLevel.unit')) === true
+          );
         }
       }
     },
@@ -2040,7 +2154,7 @@ var Levels = function Levels(_a) {
     disabled: isDisabled,
     defaultValue: 'FL',
     onChange: function onChange() {
-      trigger(__spreadArray(__spreadArray(__spreadArray([], __read(getValues('level.value') || getValues('level.value') === 0 ? ['level.value'] : [])), __read(getValues('lowerLevel.value') || getValues('lowerLevel.value') === 0 ? ['lowerLevel.value'] : [])), ['lowerLevel.unit']));
+      trigger([].concat(_toConsumableArray(getValues('level.value') || getValues('level.value') === 0 ? ['level.value'] : []), _toConsumableArray(getValues('lowerLevel.value') || getValues('lowerLevel.value') === 0 ? ['lowerLevel.value'] : []), ['lowerLevel.unit']));
 
       _onChange();
     }
@@ -2061,16 +2175,19 @@ var Levels = function Levels(_a) {
         isRequired: isRequired,
         isInteger: isInteger,
         max: function max(value) {
-          // The max level depends on the unit
-          return isValidMax(value, getMaxLevelValue(getValues('level.unit'), productType)) || "The maximum level in " + LevelUnits[getValues('level.unit')] + " is " + getMaxLevelValue(getValues('level.unit'), productType);
+          return (// The max level depends on the unit
+            isValidMax(value, getMaxLevelValue(getValues('level.unit'), productType)) || "The maximum level in ".concat(LevelUnits[getValues('level.unit')], " is ").concat(getMaxLevelValue(getValues('level.unit'), productType))
+          );
         },
         min: function min(value) {
-          // The min level depends on the unit
-          return isValidMin(value, getMinLevelValue(getValues('level.unit'))) || "The minimum level in " + LevelUnits[getValues('level.unit')] + " is " + getMinLevelValue(getValues('level.unit'));
+          return (// The min level depends on the unit
+            isValidMin(value, getMinLevelValue(getValues('level.unit'))) || "The minimum level in ".concat(LevelUnits[getValues('level.unit')], " is ").concat(getMinLevelValue(getValues('level.unit')))
+          );
         },
         validateLevels: function validateLevels(value) {
-          // level step depends on the unit
-          return _validateLevels(value, getValues('level.unit'));
+          return (// level step depends on the unit
+            _validateLevels(value, getValues('level.unit'))
+          );
         }
       }
     },
@@ -2111,8 +2228,9 @@ var Levels = function Levels(_a) {
       validate: {
         isRequired: isRequired,
         validateLevelUnitCombinations: function validateLevelUnitCombinations(value) {
-          // level step depends on the unit
-          return _validateLevelUnitCombinations(getValues('level.unit'), value);
+          return (// level step depends on the unit
+            _validateLevelUnitCombinations(getValues('level.unit'), value)
+          );
         }
       }
     },
@@ -2144,20 +2262,24 @@ var Levels = function Levels(_a) {
         isRequired: isRequired,
         isInteger: isInteger,
         max: function max(value) {
-          // The max level depends on the unit
-          return isValidMax(value, getMaxLevelValue(getValues('lowerLevel.unit'), productType)) || "The maximum level in " + LevelUnits[getValues('lowerLevel.unit')] + " is " + getMaxLevelValue(getValues('lowerLevel.unit'), productType);
+          return (// The max level depends on the unit
+            isValidMax(value, getMaxLevelValue(getValues('lowerLevel.unit'), productType)) || "The maximum level in ".concat(LevelUnits[getValues('lowerLevel.unit')], " is ").concat(getMaxLevelValue(getValues('lowerLevel.unit'), productType))
+          );
         },
         min: function min(value) {
-          // The min level depends on the unit
-          return isValidMin(value, getMinLevelValue(getValues('lowerLevel.unit'))) || "The minimum level in " + LevelUnits[getValues('lowerLevel.unit')] + " is " + getMinLevelValue(getValues('lowerLevel.unit'));
+          return (// The min level depends on the unit
+            isValidMin(value, getMinLevelValue(getValues('lowerLevel.unit'))) || "The minimum level in ".concat(LevelUnits[getValues('lowerLevel.unit')], " is ").concat(getMinLevelValue(getValues('lowerLevel.unit')))
+          );
         },
         isLevelLower: function isLevelLower$1(value) {
-          // The lower level needs to be smaller than upper level
-          return isLevelLower(value, getValues('lowerLevel.unit'), getValues('level.value'), getValues('level.unit'));
+          return (// The lower level needs to be smaller than upper level
+            isLevelLower(value, getValues('lowerLevel.unit'), getValues('level.value'), getValues('level.unit'))
+          );
         },
         validateLevels: function validateLevels(value) {
-          // level step depends on the unit
-          return _validateLevels(value, getValues('lowerLevel.unit'));
+          return (// level step depends on the unit
+            _validateLevels(value, getValues('lowerLevel.unit'))
+          );
         }
       }
     },
@@ -2224,16 +2346,19 @@ var Levels = function Levels(_a) {
         isRequired: isRequired,
         isInteger: isInteger,
         max: function max(value) {
-          // The max level depends on the unit
-          return isValidMax(value, getMaxLevelValue(getValues('level.unit'), productType)) || "The maximum level in " + LevelUnits[getValues('level.unit')] + " is " + getMaxLevelValue(getValues('level.unit'), productType);
+          return (// The max level depends on the unit
+            isValidMax(value, getMaxLevelValue(getValues('level.unit'), productType)) || "The maximum level in ".concat(LevelUnits[getValues('level.unit')], " is ").concat(getMaxLevelValue(getValues('level.unit'), productType))
+          );
         },
         min: function min(value) {
-          // The min level depends on the unit
-          return isValidMin(value, getMinLevelValue(getValues('level.unit'))) || "The minimum level in " + LevelUnits[getValues('level.unit')] + " is " + getMinLevelValue(getValues('level.unit'));
+          return (// The min level depends on the unit
+            isValidMin(value, getMinLevelValue(getValues('level.unit'))) || "The minimum level in ".concat(LevelUnits[getValues('level.unit')], " is ").concat(getMinLevelValue(getValues('level.unit')))
+          );
         },
         validateLevels: function validateLevels(value) {
-          // level step depends on the unit
-          return _validateLevels(value, getValues('level.unit'));
+          return (// level step depends on the unit
+            _validateLevels(value, getValues('level.unit'))
+          );
         }
       }
     },
@@ -2259,16 +2384,18 @@ var Levels = function Levels(_a) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 
-var ObservationForecast = function ObservationForecast(_a) {
-  var isDisabled = _a.isDisabled,
-      isReadOnly = _a.isReadOnly;
+var ObservationForecast = function ObservationForecast(_ref) {
+  var isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly;
+
+  var _useFormContext = useFormContext(),
+      watch = _useFormContext.watch,
+      trigger = _useFormContext.trigger,
+      getValues = _useFormContext.getValues;
 
-  var _b = useFormContext(),
-      watch = _b.watch,
-      trigger = _b.trigger,
-      getValues = _b.getValues;
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      isRequired = _useDraftFormHelpers.isRequired;
 
-  var isRequired = useDraftFormHelpers().isRequired;
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
@@ -2327,15 +2454,18 @@ var ObservationForecast = function ObservationForecast(_a) {
  * */
 var ForecastTimeValidation = 'Forecast time should lie between the valid start and valid end time';
 
-var ObservationForecastTime = function ObservationForecastTime(_a) {
-  var isDisabled = _a.isDisabled,
-      isReadOnly = _a.isReadOnly,
-      helperText = _a.helperText,
-      _b = _a.onChange,
-      onChange = _b === void 0 ? function () {
+var ObservationForecastTime = function ObservationForecastTime(_ref) {
+  var isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly,
+      helperText = _ref.helperText,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {
     return null;
-  } : _b;
-  var watch = useFormContext().watch;
+  } : _ref$onChange;
+
+  var _useFormContext = useFormContext(),
+      watch = _useFormContext.watch;
+
   var classes = useStyles$6();
   return (!isReadOnly || watch('observationOrForecastTime') !== null) && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -2375,18 +2505,18 @@ var ObservationForecastTime = function ObservationForecastTime(_a) {
   })));
 };
 
-var Phenomenon = function Phenomenon(_a) {
-  var productType = _a.productType,
-      isDisabled = _a.isDisabled,
-      _b = _a.onChange,
-      _onChange = _b === void 0 ? function () {
+var Phenomenon = function Phenomenon(_ref) {
+  var productType = _ref.productType,
+      isDisabled = _ref.isDisabled,
+      _ref$onChange = _ref.onChange,
+      _onChange = _ref$onChange === void 0 ? function () {
     return null;
-  } : _b;
+  } : _ref$onChange;
 
-  var _c = useFormContext(),
-      getValues = _c.getValues,
-      setValue = _c.setValue,
-      trigger = _c.trigger;
+  var _useFormContext = useFormContext(),
+      getValues = _useFormContext.getValues,
+      setValue = _useFormContext.setValue,
+      trigger = _useFormContext.trigger;
 
   var classes = useStyles$6();
   var phenomenaList = productType === 'sigmet' ? SigmetPhenomena : AirmetPhenomena;
@@ -2433,7 +2563,7 @@ var Phenomenon = function Phenomenon(_a) {
 
       _onChange();
 
-      return trigger(__spreadArray(__spreadArray([], __read(getValues('validDateStart') ? ['validDateStart'] : [])), __read(getValues('validDateEnd') ? ['validDateEnd'] : [])));
+      return trigger([].concat(_toConsumableArray(getValues('validDateStart') ? ['validDateStart'] : []), _toConsumableArray(getValues('validDateEnd') ? ['validDateEnd'] : [])));
     },
     autoFocus: true
   }, Object.keys(phenomenaList).map(function (key) {
@@ -2466,19 +2596,21 @@ var exitDrawModeMessage = 'Press ESC to exit draw mode';
 var maxFeaturePointsMessage = 'Intersection of the drawn polygon with the FIR-boundary has more than 6 individual points. Check if the TAC in the preview corresponds to the intended area.';
 var multiIntersectionsMessage = 'The drawn polygon has multiple intersections with the FIR-boundary. The drawn polygon will be used for the TAC-code.';
 
-var StartGeometry = function StartGeometry(_a) {
-  var _b = _a.isReadOnly,
-      isReadOnly = _b === void 0 ? false : _b,
-      drawMode = _a.drawMode,
-      geoJSONs = _a.geoJSONs,
-      setDrawModeType = _a.setDrawModeType;
+var StartGeometry = function StartGeometry(_ref) {
+  var _ref$isReadOnly = _ref.isReadOnly,
+      isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
+      drawMode = _ref.drawMode,
+      geoJSONs = _ref.geoJSONs,
+      setDrawModeType = _ref.setDrawModeType;
   var classes = useStyles$6();
 
-  var _c = useFormContext(),
-      errors = _c.errors,
-      watch = _c.watch;
+  var _useFormContext = useFormContext(),
+      errors = _useFormContext.errors,
+      watch = _useFormContext.watch;
+
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      isDraft = _useDraftFormHelpers.isDraft;
 
-  var isDraft = useDraftFormHelpers().isDraft;
   return !isReadOnly && /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
@@ -2598,34 +2730,37 @@ var getMinMovementSpeedValue = function getMinMovementSpeedValue(unit) {
   }
 };
 
-var Progress = function Progress(_a) {
-  var productType = _a.productType,
-      drawMode = _a.drawMode,
-      _b = _a.isDisabled,
-      isDisabled = _b === void 0 ? false : _b,
-      _c = _a.isReadOnly,
-      isReadOnly = _c === void 0 ? false : _c,
-      geoJSONs = _a.geoJSONs,
-      setDrawModeType = _a.setDrawModeType,
-      _d = _a.onChange,
-      _onChange = _d === void 0 ? function () {
+var Progress = function Progress(_ref) {
+  var productType = _ref.productType,
+      drawMode = _ref.drawMode,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$isReadOnly = _ref.isReadOnly,
+      isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
+      geoJSONs = _ref.geoJSONs,
+      setDrawModeType = _ref.setDrawModeType,
+      _ref$onChange = _ref.onChange,
+      _onChange = _ref$onChange === void 0 ? function () {
     return null;
-  } : _d;
+  } : _ref$onChange;
 
   var classes = useStyles$6();
 
-  var _e = useFormContext(),
-      watch = _e.watch,
-      getValues = _e.getValues,
-      trigger = _e.trigger,
-      errors = _e.errors;
+  var _useFormContext = useFormContext(),
+      watch = _useFormContext.watch,
+      getValues = _useFormContext.getValues,
+      trigger = _useFormContext.trigger,
+      errors = _useFormContext.errors;
 
-  var _f = useDraftFormHelpers(),
-      isRequired = _f.isRequired,
-      isDraft = _f.isDraft;
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      isRequired = _useDraftFormHelpers.isRequired,
+      isDraft = _useDraftFormHelpers.isDraft;
 
   var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
-  var allowedUnits = useProductSettings(config).allowedUnits;
+
+  var _useProductSettings = useProductSettings(config),
+      allowedUnits = _useProductSettings.allowedUnits;
+
   var movementType = watch('movementType');
   var selectedFIR = watch('locationIndicatorATSR'); // Get allowed movement units based on selected FIR - if no FIR selected, allow all units
 
@@ -2741,16 +2876,19 @@ var Progress = function Progress(_a) {
         isRequired: isRequired,
         isInteger: isInteger,
         min: function min(value) {
-          // The max level depends on the unit
-          return isValidMin(value, getMinMovementSpeedValue(getValues('movementUnit'))) || "The minimum level in " + MovementUnit[getValues('movementUnit')] + " is " + getMinMovementSpeedValue(getValues('movementUnit'));
+          return (// The max level depends on the unit
+            isValidMin(value, getMinMovementSpeedValue(getValues('movementUnit'))) || "The minimum level in ".concat(MovementUnit[getValues('movementUnit')], " is ").concat(getMinMovementSpeedValue(getValues('movementUnit')))
+          );
         },
         max: function max(value) {
-          // The max level depends on the unit
-          return isValidMax(value, getMaxMovementSpeedValue(getValues('movementUnit'))) || "The maximum level in " + MovementUnit[getValues('movementUnit')] + " is " + getMaxMovementSpeedValue(getValues('movementUnit'));
+          return (// The max level depends on the unit
+            isValidMax(value, getMaxMovementSpeedValue(getValues('movementUnit'))) || "The maximum level in ".concat(MovementUnit[getValues('movementUnit')], " is ").concat(getMaxMovementSpeedValue(getValues('movementUnit')))
+          );
         },
         validateMovementSteps: function validateMovementSteps(value) {
-          // movement step depends on the unit
-          return _validateMovementSteps(value, getValues('movementUnit'));
+          return (// movement step depends on the unit
+            _validateMovementSteps(value, getValues('movementUnit'))
+          );
         }
       }
     },
@@ -2828,18 +2966,23 @@ var Progress = function Progress(_a) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 
-var SelectFIR = function SelectFIR(_a) {
-  var productType = _a.productType,
-      isDisabled = _a.isDisabled;
+var SelectFIR = function SelectFIR(_ref) {
+  var productType = _ref.productType,
+      isDisabled = _ref.isDisabled;
   var classes = useStyles$6();
-  var setValue = useFormContext().setValue;
-  var isRequired = useDraftFormHelpers().isRequired;
+
+  var _useFormContext = useFormContext(),
+      setValue = _useFormContext.setValue;
+
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      isRequired = _useDraftFormHelpers.isRequired;
+
   var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
 
-  var _b = useProductSettings(config),
-      defaultATSR = _b.defaultATSR,
-      optionsFIR = _b.optionsFIR,
-      allFIRS = _b.allFIRS;
+  var _useProductSettings = useProductSettings(config),
+      defaultATSR = _useProductSettings.defaultATSR,
+      optionsFIR = _useProductSettings.optionsFIR,
+      allFIRS = _useProductSettings.allFIRS;
 
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -2874,7 +3017,7 @@ var SelectFIR = function SelectFIR(_a) {
     }
   }, optionsFIR.map(function (fir) {
     return /*#__PURE__*/React__default.createElement(MenuItem, {
-      key: fir.ATSR + "-" + fir.FIR,
+      key: "".concat(fir.ATSR, "-").concat(fir.FIR),
       value: fir.ATSR
     }, fir.FIR);
   })), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
@@ -2909,11 +3052,16 @@ var SelectFIR = function SelectFIR(_a) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 
-var Type = function Type(_a) {
-  var isReadOnly = _a.isReadOnly,
-      isDisabled = _a.isDisabled;
-  var watch = useFormContext().watch;
-  var isRequired = useDraftFormHelpers().isRequired;
+var Type = function Type(_ref) {
+  var isReadOnly = _ref.isReadOnly,
+      isDisabled = _ref.isDisabled;
+
+  var _useFormContext = useFormContext(),
+      watch = _useFormContext.watch;
+
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      isRequired = _useDraftFormHelpers.isRequired;
+
   var classes = useStyles$6();
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -2980,20 +3128,23 @@ var Type = function Type(_a) {
  * */
 var VALID_FROM_TIME_DELAY_IN_MINUTES = 30;
 
-var ValidFrom = function ValidFrom(_a) {
-  var productType = _a.productType,
-      isDisabled = _a.isDisabled,
-      _b = _a.onChange,
-      _onChange = _b === void 0 ? function () {
+var ValidFrom = function ValidFrom(_ref) {
+  var productType = _ref.productType,
+      isDisabled = _ref.isDisabled,
+      _ref$onChange = _ref.onChange,
+      _onChange = _ref$onChange === void 0 ? function () {
     return null;
-  } : _b;
+  } : _ref$onChange;
 
-  var _c = useFormContext(),
-      getValues = _c.getValues,
-      trigger = _c.trigger;
+  var _useFormContext = useFormContext(),
+      getValues = _useFormContext.getValues,
+      trigger = _useFormContext.trigger;
 
   var classes = useStyles$6();
-  var isRequired = useDraftFormHelpers().isRequired;
+
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      isRequired = _useDraftFormHelpers.isRequired;
+
   var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
@@ -3026,7 +3177,7 @@ var ValidFrom = function ValidFrom(_a) {
         },
         // The current time can be no more than 4 hours before the validity start (12 for VA/TC SIGMET)
         isCurrentTimeXHoursBeforeValue: function isCurrentTimeXHoursBeforeValue(value) {
-          return isXHoursBefore(moment.utc().format(), value, getHoursBeforeValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config)) || "Valid from time can be no more than " + getHoursBeforeValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config) + " hours after current time";
+          return isXHoursBefore(moment.utc().format(), value, getHoursBeforeValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config)) || "Valid from time can be no more than ".concat(getHoursBeforeValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config), " hours after current time");
         }
       }
     },
@@ -3065,23 +3216,30 @@ var ValidFrom = function ValidFrom(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
+var DEFAULT_VALID_TIME_SIGMET = 3;
+var DEFAULT_VALID_TIME_AIRMET = 1;
+var getDefaultHoursValid = function getDefaultHoursValid(productType) {
+  return productType === 'sigmet' ? DEFAULT_VALID_TIME_SIGMET : DEFAULT_VALID_TIME_AIRMET;
+};
 
-var ValidUntil = function ValidUntil(_a) {
-  var productType = _a.productType,
-      isDisabled = _a.isDisabled,
-      _b = _a.onChange,
-      _onChange = _b === void 0 ? function () {
+var ValidUntil = function ValidUntil(_ref) {
+  var productType = _ref.productType,
+      isDisabled = _ref.isDisabled,
+      _ref$onChange = _ref.onChange,
+      _onChange = _ref$onChange === void 0 ? function () {
     return null;
-  } : _b;
+  } : _ref$onChange;
+
+  var _useFormContext = useFormContext(),
+      getValues = _useFormContext.getValues,
+      trigger = _useFormContext.trigger;
 
-  var _c = useFormContext(),
-      getValues = _c.getValues,
-      trigger = _c.trigger;
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      isRequired = _useDraftFormHelpers.isRequired;
 
-  var isRequired = useDraftFormHelpers().isRequired;
   var classes = useStyles$6();
   var config = productType === 'sigmet' ? sigmetConfig : airmetConfig;
-  var defaultHoursValid = productType === 'sigmet' ? 3 : 1;
+  var defaultHoursValid = getDefaultHoursValid(productType);
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
@@ -3113,7 +3271,7 @@ var ValidUntil = function ValidUntil(_a) {
         },
         // Validity end can be no more than 4 hours after validity start (6 for VA/TC SIGMET)
         isXHoursAfter: function isXHoursAfter$1(value) {
-          return isXHoursAfter(value, getValues('validDateStart'), getMaxHoursOfValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config)) || "Valid until time can be no more than " + getMaxHoursOfValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config) + " hours after Valid from time";
+          return isXHoursAfter(value, getValues('validDateStart'), getMaxHoursOfValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config)) || "Valid until time can be no more than ".concat(getMaxHoursOfValidity(getValues('phenomenon'), getValues('locationIndicatorATSR'), config), " hours after Valid from time");
         }
       }
     },
@@ -3152,15 +3310,15 @@ var ValidUntil = function ValidUntil(_a) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 
-var VolcanicFields = function VolcanicFields(_a) {
-  var isDisabled = _a.isDisabled,
-      isReadOnly = _a.isReadOnly,
-      helperText = _a.helperText;
+var VolcanicFields = function VolcanicFields(_ref) {
+  var isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly,
+      helperText = _ref.helperText;
 
-  var _b = useFormContext(),
-      watch = _b.watch,
-      trigger = _b.trigger,
-      getValues = _b.getValues;
+  var _useFormContext = useFormContext(),
+      watch = _useFormContext.watch,
+      trigger = _useFormContext.trigger,
+      getValues = _useFormContext.getValues;
 
   var classes = useStyles$6();
   return /*#__PURE__*/React__default.createElement(Grid, {
@@ -3270,15 +3428,18 @@ var validateSurfaceVisibility = function validateSurfaceVisibility(value) {
   return intVisibility % 50 === 0 || invalidSurfaceVisibilityTill750StepsMessage;
 };
 
-var SurfaceVisibility = function SurfaceVisibility(_a) {
-  var isDisabled = _a.isDisabled,
-      _b = _a.onChange,
-      _onChange = _b === void 0 ? function () {
+var SurfaceVisibility = function SurfaceVisibility(_ref) {
+  var isDisabled = _ref.isDisabled,
+      _ref$onChange = _ref.onChange,
+      _onChange = _ref$onChange === void 0 ? function () {
     return null;
-  } : _b;
+  } : _ref$onChange;
 
   var classes = useStyles$6();
-  var isRequired = useDraftFormHelpers().isRequired;
+
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      isRequired = _useDraftFormHelpers.isRequired;
+
   return /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true,
@@ -3367,21 +3528,26 @@ var validateSurfaceWindDirection = function validateSurfaceWindDirection(value)
   return intVisibility % 10 === 0 || invalidSurfaceWindDirectionStepsMessage;
 };
 
-var SurfaceWind = function SurfaceWind(_a) {
-  var isDisabled = _a.isDisabled,
-      _b = _a.onChange,
-      _onChange = _b === void 0 ? function () {
+var SurfaceWind = function SurfaceWind(_ref) {
+  var isDisabled = _ref.isDisabled,
+      _ref$onChange = _ref.onChange,
+      _onChange = _ref$onChange === void 0 ? function () {
     return null;
-  } : _b;
+  } : _ref$onChange;
 
-  var _c = useFormContext(),
-      trigger = _c.trigger,
-      getValues = _c.getValues,
-      watch = _c.watch;
+  var _useFormContext = useFormContext(),
+      trigger = _useFormContext.trigger,
+      getValues = _useFormContext.getValues,
+      watch = _useFormContext.watch;
+
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      isRequired = _useDraftFormHelpers.isRequired;
 
-  var isRequired = useDraftFormHelpers().isRequired;
   var classes = useStyles$6();
-  var allowedUnits = useProductSettings(airmetConfig).allowedUnits;
+
+  var _useProductSettings = useProductSettings(airmetConfig),
+      allowedUnits = _useProductSettings.allowedUnits;
+
   var selectedFIR = watch('locationIndicatorATSR'); // Get allowed speed units based on selected FIR - if no FIR selected, allow all units
 
   var allowedWindUnitsForFir = getAllowedUnits(selectedFIR, allowedUnits, 'surfacewind_unit', WindUnit);
@@ -3465,12 +3631,14 @@ var SurfaceWind = function SurfaceWind(_a) {
         isRequired: isRequired,
         isInteger: isInteger,
         min: function min(value) {
-          // The min level depends on the unit
-          return isValidMin(value, getMinWindSpeedValue(getValues('windUnit'))) || "The minimum wind speed in " + WindUnit[getValues('windUnit')] + " is " + getMinWindSpeedValue(getValues('windUnit'));
+          return (// The min level depends on the unit
+            isValidMin(value, getMinWindSpeedValue(getValues('windUnit'))) || "The minimum wind speed in ".concat(WindUnit[getValues('windUnit')], " is ").concat(getMinWindSpeedValue(getValues('windUnit')))
+          );
         },
         max: function max(value) {
-          // The max level depends on the unit
-          return isValidMax(value, getMaxWindSpeedValue(getValues('windUnit'))) || "The maximum wind speed in " + WindUnit[getValues('windUnit')] + " is " + getMaxWindSpeedValue(getValues('windUnit'));
+          return (// The max level depends on the unit
+            isValidMax(value, getMaxWindSpeedValue(getValues('windUnit'))) || "The maximum wind speed in ".concat(WindUnit[getValues('windUnit')], " is ").concat(getMaxWindSpeedValue(getValues('windUnit')))
+          );
         }
       }
     },
@@ -3517,23 +3685,28 @@ var validateRoundedStep = function validateRoundedStep(value, unit) {
   return invalidUnitMessage;
 };
 
-var CloudLevels = function CloudLevels(_a) {
-  var isDisabled = _a.isDisabled,
-      isReadOnly = _a.isReadOnly,
-      _b = _a.onChange,
-      _onChange = _b === void 0 ? function () {
+var CloudLevels = function CloudLevels(_ref) {
+  var isDisabled = _ref.isDisabled,
+      isReadOnly = _ref.isReadOnly,
+      _ref$onChange = _ref.onChange,
+      _onChange = _ref$onChange === void 0 ? function () {
     return null;
-  } : _b;
+  } : _ref$onChange;
 
-  var _c = useFormContext(),
-      watch = _c.watch,
-      setValue = _c.setValue,
-      trigger = _c.trigger,
-      getValues = _c.getValues;
+  var _useFormContext = useFormContext(),
+      watch = _useFormContext.watch,
+      setValue = _useFormContext.setValue,
+      trigger = _useFormContext.trigger,
+      getValues = _useFormContext.getValues;
+
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      isRequired = _useDraftFormHelpers.isRequired;
 
-  var isRequired = useDraftFormHelpers().isRequired;
   var classes = useStyles$6();
-  var allowedUnits = useProductSettings(airmetConfig).allowedUnits;
+
+  var _useProductSettings = useProductSettings(airmetConfig),
+      allowedUnits = _useProductSettings.allowedUnits;
+
   var selectedFIR = watch('locationIndicatorATSR'); // Get allowed cloud level units based on selected FIR - if no FIR selected, allow all default units
 
   var allowedCloudLevelUnitsForFir = getAllowedUnits(selectedFIR, allowedUnits, 'cloud_level_unit', CloudLevelUnits);
@@ -3650,12 +3823,14 @@ var CloudLevels = function CloudLevels(_a) {
         isRequired: isRequired,
         isInteger: isInteger,
         min: function min(value) {
-          // The min level depends on the unit
-          return isValidMin(value, getMinCloudLevelValue(getValues('cloudLevel.unit'))) || "The minimum level in " + CloudLevelUnits[getValues('cloudLevel.unit')] + " is " + getMinCloudLevelValue(getValues('cloudLevel.unit'));
+          return (// The min level depends on the unit
+            isValidMin(value, getMinCloudLevelValue(getValues('cloudLevel.unit'))) || "The minimum level in ".concat(CloudLevelUnits[getValues('cloudLevel.unit')], " is ").concat(getMinCloudLevelValue(getValues('cloudLevel.unit')))
+          );
         },
         max: function max(value) {
-          // The max level depends on the unit
-          return isValidMax(value, getMaxCloudLevelValue(getValues('cloudLevel.unit'))) || "The maximum level in " + CloudLevelUnits[getValues('cloudLevel.unit')] + " is " + getMaxCloudLevelValue(getValues('cloudLevel.unit'));
+          return (// The max level depends on the unit
+            isValidMax(value, getMaxCloudLevelValue(getValues('cloudLevel.unit'))) || "The maximum level in ".concat(CloudLevelUnits[getValues('cloudLevel.unit')], " is ").concat(getMaxCloudLevelValue(getValues('cloudLevel.unit')))
+          );
         },
         step: function step(value) {
           return validateRoundedStep(value, getValues('cloudLevel.unit'));
@@ -3755,16 +3930,19 @@ var CloudLevels = function CloudLevels(_a) {
         isRequired: isRequired,
         isInteger: isInteger,
         min: function min(value) {
-          // The min level depends on the unit
-          return isValidMin(value, getMinCloudLowerLevelValue(getValues('cloudLowerLevel.unit'))) || "The minimum level in " + CloudLevelUnits[getValues('cloudLowerLevel.unit')] + " is " + getMinCloudLowerLevelValue(getValues('cloudLowerLevel.unit'));
+          return (// The min level depends on the unit
+            isValidMin(value, getMinCloudLowerLevelValue(getValues('cloudLowerLevel.unit'))) || "The minimum level in ".concat(CloudLevelUnits[getValues('cloudLowerLevel.unit')], " is ").concat(getMinCloudLowerLevelValue(getValues('cloudLowerLevel.unit')))
+          );
         },
         max: function max(value) {
-          // The max level depends on the unit
-          return isValidMax(value, getMaxCloudLowerLevelValue(getValues('cloudLowerLevel.unit'))) || "The maximum level in " + CloudLevelUnits[getValues('cloudLowerLevel.unit')] + " is " + getMaxCloudLowerLevelValue(getValues('cloudLowerLevel.unit'));
+          return (// The max level depends on the unit
+            isValidMax(value, getMaxCloudLowerLevelValue(getValues('cloudLowerLevel.unit'))) || "The maximum level in ".concat(CloudLevelUnits[getValues('cloudLowerLevel.unit')], " is ").concat(getMaxCloudLowerLevelValue(getValues('cloudLowerLevel.unit')))
+          );
         },
         isLevelLower: function isLevelLower$1(value) {
-          // The lower level needs to be smaller than upper level
-          return isLevelLower(value, getValues('cloudLowerLevel.unit'), getValues('cloudLevel.value'), getValues('cloudLevel.unit'));
+          return (// The lower level needs to be smaller than upper level
+            isLevelLower(value, getValues('cloudLowerLevel.unit'), getValues('cloudLevel.value'), getValues('cloudLevel.unit'))
+          );
         },
         step: function step(value) {
           return validateRoundedStep(value, getValues('cloudLowerLevel.unit'));
@@ -3806,53 +3984,50 @@ var shouldRetrieveTAC = function shouldRetrieveTAC(product) {
   return false;
 };
 var useTAC = function useTAC(initialProduct, getTAC) {
-  var _a = __read(React__default.useState(noTAC), 2),
-      TAC = _a[0],
-      setTAC = _a[1];
+  var _React$useState = React__default.useState(noTAC),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      TAC = _React$useState2[0],
+      setTAC = _React$useState2[1];
 
-  var isMounted = useIsMounted().isMounted;
+  var _useIsMounted = useIsMounted(),
+      isMounted = _useIsMounted.isMounted;
 
   var retrieveTAC = function retrieveTAC(product) {
-    return __awaiter(void 0, void 0, void 0, function () {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
       var result;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            _a.trys.push([0, 2,, 3]);
-
-            return [4
-            /*yield*/
-            , getTAC(product)];
-
-          case 1:
-            result = _a.sent();
-
-            if (isMounted.current) {
-              setTAC(result.data);
-            }
-
-            return [3
-            /*break*/
-            , 3];
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return getTAC(product);
+
+            case 3:
+              result = _context.sent;
+
+              if (isMounted.current) {
+                setTAC(result.data);
+              }
 
-          case 2:
-            _a.sent();
+              _context.next = 10;
+              break;
 
-            if (isMounted.current) {
-              setTAC(noTAC);
-            }
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
 
-            return [3
-            /*break*/
-            , 3];
+              if (isMounted.current) {
+                setTAC(noTAC);
+              }
 
-          case 3:
-            return [2
-            /*return*/
-            ];
+            case 10:
+            case "end":
+              return _context.stop();
+          }
         }
-      });
-    });
+      }, _callee, null, [[0, 7]]);
+    }));
   };
 
   React__default.useEffect(function () {
@@ -3875,8 +4050,8 @@ var useTAC = function useTAC(initialProduct, getTAC) {
   return [TAC, delayedQuery];
 };
 
-var ProductFormTAC = function ProductFormTAC(_a) {
-  var tac = _a.tac;
+var ProductFormTAC = function ProductFormTAC(_ref) {
+  var tac = _ref.tac;
   var classes = useStyles$4();
   var tacLines = tac.split('\n');
   return /*#__PURE__*/React__default.createElement(Typography, {
@@ -3893,33 +4068,37 @@ var ProductFormTAC = function ProductFormTAC(_a) {
   }));
 };
 
-var SigmetForm = function SigmetForm(_a) {
-  var mode = _a.mode,
-      _b = _a.isCancelSigmet,
-      isCancelSigmet = _b === void 0 ? false : _b,
-      _c = _a.initialSigmet,
-      initialSigmet = _c === void 0 ? null : _c,
-      _d = _a.initialCancelSigmet,
-      initialCancelSigmet = _d === void 0 ? null : _d;
+var SigmetForm = function SigmetForm(_ref) {
+  var mode = _ref.mode,
+      _ref$isCancelSigmet = _ref.isCancelSigmet,
+      isCancelSigmet = _ref$isCancelSigmet === void 0 ? false : _ref$isCancelSigmet,
+      _ref$initialSigmet = _ref.initialSigmet,
+      initialSigmet = _ref$initialSigmet === void 0 ? null : _ref$initialSigmet,
+      _ref$initialCancelSig = _ref.initialCancelSigmet,
+      initialCancelSigmet = _ref$initialCancelSig === void 0 ? null : _ref$initialCancelSig;
   var classes = useStyles$6();
-  var api = useApiContext().api;
 
-  var _e = useFormContext(),
-      watch = _e.watch,
-      setValue = _e.setValue,
-      handleSubmit = _e.handleSubmit,
-      getValues = _e.getValues;
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
+
+  var _useFormContext = useFormContext(),
+      watch = _useFormContext.watch,
+      setValue = _useFormContext.setValue,
+      handleSubmit = _useFormContext.handleSubmit,
+      getValues = _useFormContext.getValues;
 
-  var _f = __read(React__default.useState(mode === 'view'), 2),
-      isDisabled = _f[0],
-      setIsDisabled = _f[1];
+  var _React$useState = React__default.useState(mode === 'view'),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isDisabled = _React$useState2[0],
+      setIsDisabled = _React$useState2[1];
 
   var isReadOnly = mode === 'view';
   var helperText = isDisabled ? '' : 'Optional';
 
-  var _g = __read(useTAC(initialSigmet !== null ? initialSigmet : initialCancelSigmet, api.getSigmetTAC), 2),
-      tac = _g[0],
-      updateTac = _g[1];
+  var _useTAC = useTAC(initialSigmet !== null ? initialSigmet : initialCancelSigmet, api.getSigmetTAC),
+      _useTAC2 = _slicedToArray(_useTAC, 2),
+      tac = _useTAC2[0],
+      updateTac = _useTAC2[1];
 
   var onChangeForm = function onChangeForm() {
     updateTac(getValues());
@@ -3933,13 +4112,13 @@ var SigmetForm = function SigmetForm(_a) {
     intersectionEnd: initialSigmet.endGeometryIntersect
   } : null;
 
-  var _h = useDrawMode(initialGeometry),
-      drawMode = _h.drawMode,
-      setDrawMode = _h.setDrawMode,
-      layerDrawModes = _h.layerDrawModes,
-      geoJSONs = _h.geoJSONs,
-      _setLayerGeoJSONs = _h.setLayerGeoJSONs,
-      _setDrawModeType = _h.setDrawModeType;
+  var _useDrawMode = useDrawMode(initialGeometry),
+      drawMode = _useDrawMode.drawMode,
+      setDrawMode = _useDrawMode.setDrawMode,
+      layerDrawModes = _useDrawMode.layerDrawModes,
+      geoJSONs = _useDrawMode.geoJSONs,
+      _setLayerGeoJSONs = _useDrawMode.setLayerGeoJSONs,
+      _setDrawModeType = _useDrawMode.setDrawModeType;
 
   var updateStartDrawing = function updateStartDrawing(mapGeoJSONS) {
     var baseGeoJSON = mapGeoJSONS || geoJSONs;
@@ -4157,35 +4336,39 @@ var SigmetForm = function SigmetForm(_a) {
   }))))));
 };
 
-var AirmetForm = function AirmetForm(_a) {
-  var mode = _a.mode,
-      _b = _a.isCancelAirmet,
-      isCancelAirmet = _b === void 0 ? false : _b,
-      _c = _a.initialAirmet,
-      initialAirmet = _c === void 0 ? null : _c,
-      _d = _a.initialCancelAirmet,
-      initialCancelAirmet = _d === void 0 ? null : _d;
+var AirmetForm = function AirmetForm(_ref) {
+  var mode = _ref.mode,
+      _ref$isCancelAirmet = _ref.isCancelAirmet,
+      isCancelAirmet = _ref$isCancelAirmet === void 0 ? false : _ref$isCancelAirmet,
+      _ref$initialAirmet = _ref.initialAirmet,
+      initialAirmet = _ref$initialAirmet === void 0 ? null : _ref$initialAirmet,
+      _ref$initialCancelAir = _ref.initialCancelAirmet,
+      initialCancelAirmet = _ref$initialCancelAir === void 0 ? null : _ref$initialCancelAir;
   var classes = useStyles$6();
-  var api = useApiContext().api;
 
-  var _e = useFormContext(),
-      watch = _e.watch,
-      setValue = _e.setValue,
-      handleSubmit = _e.handleSubmit,
-      getValues = _e.getValues;
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
+
+  var _useFormContext = useFormContext(),
+      watch = _useFormContext.watch,
+      setValue = _useFormContext.setValue,
+      handleSubmit = _useFormContext.handleSubmit,
+      getValues = _useFormContext.getValues;
 
   var phenomenon = watch('phenomenon');
 
-  var _f = __read(React__default.useState(mode === 'view'), 2),
-      isDisabled = _f[0],
-      setIsDisabled = _f[1];
+  var _React$useState = React__default.useState(mode === 'view'),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isDisabled = _React$useState2[0],
+      setIsDisabled = _React$useState2[1];
 
   var isReadOnly = mode === 'view';
   var helperText = isDisabled ? '' : 'Optional';
 
-  var _g = __read(useTAC(initialAirmet !== null ? initialAirmet : initialCancelAirmet, api.getAirmetTAC), 2),
-      tac = _g[0],
-      updateTac = _g[1];
+  var _useTAC = useTAC(initialAirmet !== null ? initialAirmet : initialCancelAirmet, api.getAirmetTAC),
+      _useTAC2 = _slicedToArray(_useTAC, 2),
+      tac = _useTAC2[0],
+      updateTac = _useTAC2[1];
 
   var onChangeForm = function onChangeForm() {
     updateTac(getValues());
@@ -4196,13 +4379,13 @@ var AirmetForm = function AirmetForm(_a) {
     intersectionStart: initialAirmet.startGeometryIntersect
   } : null;
 
-  var _h = useDrawMode(initialGeometry),
-      drawMode = _h.drawMode,
-      setDrawMode = _h.setDrawMode,
-      layerDrawModes = _h.layerDrawModes,
-      geoJSONs = _h.geoJSONs,
-      _setLayerGeoJSONs = _h.setLayerGeoJSONs,
-      _setDrawModeType = _h.setDrawModeType;
+  var _useDrawMode = useDrawMode(initialGeometry),
+      drawMode = _useDrawMode.drawMode,
+      setDrawMode = _useDrawMode.setDrawMode,
+      layerDrawModes = _useDrawMode.layerDrawModes,
+      geoJSONs = _useDrawMode.geoJSONs,
+      _setLayerGeoJSONs = _useDrawMode.setLayerGeoJSONs,
+      _setDrawModeType = _useDrawMode.setDrawModeType;
 
   var updateStartDrawing = function updateStartDrawing(mapGeoJSONS) {
     var baseGeoJSON = mapGeoJSONS || geoJSONs;
@@ -4407,8 +4590,8 @@ var ContentDialog = function ContentDialog(_a) {
       children = _a.children,
       options = _a.options,
       onClose = _a.onClose,
-      _b = _a.alertBanner,
-      alertBanner = _b === void 0 ? null : _b,
+      _a$alertBanner = _a.alertBanner,
+      alertBanner = _a$alertBanner === void 0 ? null : _a$alertBanner,
       other = __rest(_a, ["open", "toggleDialogStatus", "title", "children", "options", "onClose", "alertBanner"]);
 
   var classes = useStyles$3();
@@ -4421,7 +4604,7 @@ var ContentDialog = function ContentDialog(_a) {
     }
   };
 
-  return /*#__PURE__*/React.createElement(Dialog, __assign({
+  return /*#__PURE__*/React.createElement(Dialog, Object.assign({
     "data-testid": "contentDialog",
     open: open,
     onClose: handleClose,
@@ -4483,21 +4666,19 @@ var getActiveStatus = function getActiveStatus(product, className) {
   });
 };
 
-var getStatusTagList = function getStatusTagList(product, cancelsSeqId) {
-  if (cancelsSeqId === void 0) {
-    cancelsSeqId = null;
-  }
+var getStatusTagList = function getStatusTagList(product) {
+  var cancelsSeqId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
 
   if (cancelsSeqId !== null) {
     return /*#__PURE__*/React__default.createElement(StatusTag, {
-      content: "cancels " + cancelsSeqId,
+      content: "cancels ".concat(cancelsSeqId),
       color: "red"
     });
   }
 
   if (product.status === 'CANCELLED') {
     return /*#__PURE__*/React__default.createElement(StatusTag, {
-      content: "cancelled " + product.sequence,
+      content: "cancelled ".concat(product.sequence),
       color: "red"
     });
   }
@@ -4556,19 +4737,24 @@ var formatValidTime = function formatValidTime(startDate, endDate, format) {
     return '-';
   }
 
-  return moment.utc(startDate).format('DD MMM YYYY, HH:mm') + " - " + moment.utc(endDate).format(format) + " UTC";
+  return "".concat(moment.utc(startDate).format('DD MMM YYYY, HH:mm'), " - ").concat(moment.utc(endDate).format(format), " UTC");
 };
 
-var ProductListRow = function ProductListRow(_a) {
-  var product = _a.product,
-      productType = _a.productType;
+var ProductListRow = function ProductListRow(_ref) {
+  var product = _ref.product,
+      productType = _ref.productType;
   var classes = useStyles$2();
-  var api = useApiContext().api;
-  var isMounted = useIsMounted().isMounted;
 
-  var _b = __read(React__default.useState(''), 2),
-      TAC = _b[0],
-      setTAC = _b[1];
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
+
+  var _useIsMounted = useIsMounted(),
+      isMounted = _useIsMounted.isMounted;
+
+  var _React$useState = React__default.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      TAC = _React$useState2[0],
+      setTAC = _React$useState2[1];
 
   var apiCall = productType === 'sigmet' ? api.getSigmetTAC : api.getAirmetTAC;
   React__default.useEffect(function () {
@@ -4644,7 +4830,7 @@ var ProductListRow = function ProductListRow(_a) {
     variant: "subtitle2",
     className: classes.font,
     "data-testid": "issueTime"
-  }, product.issueDate ? moment.utc(product.issueDate).format('DD MMM YYYY, HH:mm') + " UTC" : '(Not published)')), /*#__PURE__*/React__default.createElement(Grid, {
+  }, product.issueDate ? "".concat(moment.utc(product.issueDate).format('DD MMM YYYY, HH:mm'), " UTC") : '(Not published)')), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
     sm: 8,
@@ -4702,13 +4888,13 @@ var useStyles$1 = makeStyles({
   }
 });
 
-var ProductList = function ProductList(_a) {
-  var productType = _a.productType,
-      productList = _a.productList,
-      isLoading = _a.isLoading,
-      error = _a.error,
-      onClickProductRow = _a.onClickProductRow,
-      onClickNewProduct = _a.onClickNewProduct;
+var ProductList = function ProductList(_ref) {
+  var productType = _ref.productType,
+      productList = _ref.productList,
+      isLoading = _ref.isLoading,
+      error = _ref.error,
+      onClickProductRow = _ref.onClickProductRow,
+      onClickNewProduct = _ref.onClickNewProduct;
   var classes = useStyles$1();
   return /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
@@ -4739,7 +4925,7 @@ var ProductList = function ProductList(_a) {
       onClick: function onClick() {
         onClickProductRow(productListItem);
       },
-      key: product.sequence && product.issueDate ? product.sequence + "-" + product.issueDate : "draft-" + index,
+      key: product.sequence && product.issueDate ? "".concat(product.sequence, "-").concat(product.issueDate) : "draft-".concat(index),
       className: classes.listItem
     }, /*#__PURE__*/React__default.createElement(ProductListRow, {
       product: product,
@@ -4768,10 +4954,15 @@ var ProductList = function ProductList(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var CancelSigmetVolcanicMovements = function CancelSigmetVolcanicMovements(_a) {
-  var sigmet = _a.sigmet;
-  var allFIRS = useProductSettings(sigmetConfig).allFIRS;
-  var isRequired = useDraftFormHelpers().isRequired;
+var CancelSigmetVolcanicMovements = function CancelSigmetVolcanicMovements(_ref) {
+  var sigmet = _ref.sigmet;
+
+  var _useProductSettings = useProductSettings(sigmetConfig),
+      allFIRS = _useProductSettings.allFIRS;
+
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      isRequired = _useDraftFormHelpers.isRequired;
+
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "body1"
   }, "Use the FIR to indicate the direction the Volcanic Ash is moving to:"), /*#__PURE__*/React__default.createElement(ReactHookFormRadioGroup, {
@@ -4815,52 +5006,58 @@ var prepareCancelSigmet = function prepareCancelSigmet(sigmet, movement) {
     return sigmet;
   }
 
-  return __assign(__assign({}, sigmet), {
+  return Object.assign(Object.assign({}, sigmet), {
     vaSigmetMoveToFIR: movement
   });
 };
 
-var ProductFormDialogContent = function ProductFormDialogContent(_a) {
-  var isOpen = _a.isOpen,
-      toggleDialogStatus = _a.toggleDialogStatus,
-      mode = _a.mode,
-      productType = _a.productType,
-      productCanBe = _a.productCanBe,
-      product = _a.product;
+var ProductFormDialogContent = function ProductFormDialogContent(_ref) {
+  var isOpen = _ref.isOpen,
+      toggleDialogStatus = _ref.toggleDialogStatus,
+      mode = _ref.mode,
+      productType = _ref.productType,
+      productCanBe = _ref.productCanBe,
+      product = _ref.product;
   var classes = useStyles();
-  var api = useApiContext().api;
+
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
+
   var apiCall = productType === 'sigmet' ? api.postSigmet : api.postAirmet;
 
-  var _b = useFormContext(),
-      handleSubmit = _b.handleSubmit,
-      reset = _b.reset,
-      formState = _b.formState,
-      watch = _b.watch;
+  var _useFormContext = useFormContext(),
+      handleSubmit = _useFormContext.handleSubmit,
+      reset = _useFormContext.reset,
+      formState = _useFormContext.formState,
+      watch = _useFormContext.watch;
 
   var isDirty = formState.isDirty;
 
-  var _c = useDraftFormHelpers(),
-      toggleIsDraft = _c.toggleIsDraft,
-      DraftFieldHelper = _c.DraftFieldHelper;
+  var _useDraftFormHelpers = useDraftFormHelpers(),
+      toggleIsDraft = _useDraftFormHelpers.toggleIsDraft,
+      DraftFieldHelper = _useDraftFormHelpers.DraftFieldHelper;
 
   usePreventBrowserClose(isDirty);
   var confirmationDialog = useConfirmationDialog();
 
-  var _d = __read(React.useState(false), 2),
-      showLoader = _d[0],
-      setLoader = _d[1];
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      showLoader = _React$useState2[0],
+      setLoader = _React$useState2[1];
 
-  var _e = __read(React.useState(false), 2),
-      errorStoreMessage = _e[0],
-      setErrorStoreMessage = _e[1];
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      errorStoreMessage = _React$useState4[0],
+      setErrorStoreMessage = _React$useState4[1];
 
-  var _f = __read(React.useState(''), 2),
-      errorStoreMessageText = _f[0],
-      setErrorStoreMessageText = _f[1];
+  var _React$useState5 = React.useState(''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      errorStoreMessageText = _React$useState6[0],
+      setErrorStoreMessageText = _React$useState6[1];
 
   React.useEffect(function () {
     // set the values of the newly selected product
-    reset(product !== null ? __assign({}, product) : {});
+    reset(product !== null ? Object.assign({}, product) : {});
     return function () {
       // reset form on unmount
       reset({});
@@ -4989,7 +5186,10 @@ var ProductFormDialogContent = function ProductFormDialogContent(_a) {
       title: "An error has occurred while saving, please try again",
       info: errorStoreMessageText
     }) : null,
-    options: getProductFormLifecycleButtons(productCanBe, onProductButtonPress)
+    options: getProductFormLifecycleButtons(productCanBe, onProductButtonPress),
+    style: {
+      zIndex: 1000
+    }
   }, productType === 'sigmet' ? /*#__PURE__*/React.createElement(SigmetForm, {
     mode: mode,
     isCancelSigmet: product !== null && isInstanceOfCancelSigmet(product),
@@ -5025,13 +5225,25 @@ var ProductFormDialogContent = function ProductFormDialogContent(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var ProductFormDialog = function ProductFormDialog(_a) {
-  var isOpen = _a.isOpen,
-      productType = _a.productType,
-      toggleDialogStatus = _a.toggleDialogStatus,
-      _b = _a.productListItem,
-      productListItem = _b === void 0 ? null : _b; // Show the right options for a new sigmet/airmet not coming from the BE
+var prepareProductValues = function prepareProductValues(product, productType) {
+  // Ensure there is a valid start/end date
+  if (!isInstanceOfCancelSigmetOrAirmet(product) && (!product.validDateStart || !product.validDateEnd)) {
+    var defaultHoursValid = getDefaultHoursValid(productType);
+    return Object.assign({
+      validDateStart: moment.utc().add(VALID_FROM_TIME_DELAY_IN_MINUTES, 'minutes').format('YYYY-MM-DDTHH:mm:ss[Z]'),
+      validDateEnd: moment.utc().add(defaultHoursValid, 'hour').add(VALID_FROM_TIME_DELAY_IN_MINUTES, 'minutes').format('YYYY-MM-DDTHH:mm:ss[Z]')
+    }, product);
+  }
 
+  return product;
+};
+var ProductFormDialog = function ProductFormDialog(_ref) {
+  var isOpen = _ref.isOpen,
+      productType = _ref.productType,
+      toggleDialogStatus = _ref.toggleDialogStatus,
+      _ref$productListItem = _ref.productListItem,
+      productListItem = _ref$productListItem === void 0 ? null : _ref$productListItem;
+  // Show the right options for a new sigmet/airmet not coming from the BE
   var productCanBe = productListItem !== null ? productListItem.canbe : ['DRAFTED', 'DISCARDED', 'PUBLISHED']; // Determine mode of form based on canbe properties
 
   var mode = getProductFormMode(productCanBe, productListItem);
@@ -5047,7 +5259,7 @@ var ProductFormDialog = function ProductFormDialog(_a) {
     toggleDialogStatus: toggleDialogStatus,
     mode: mode,
     productCanBe: productCanBe,
-    product: productListItem !== null ? productListItem[productType] : null,
+    product: productListItem !== null ? prepareProductValues(productListItem[productType], productType) : null,
     productType: productType
   })));
 };
@@ -5062,24 +5274,28 @@ var ProductFormDialog = function ProductFormDialog(_a) {
  * ```<ApiProvider baseURL="http://test.com" appURL="http://app.com" auth={auth} onSetAuth={onSetAuth} createApi={api.createApi} authTokenUrl="url/tokenrefresh"> <MetInfoWrapper productType="sigmet"/> </ApiProvider>```
  */
 
-var MetInfoWrapper = function MetInfoWrapper(_a) {
-  var productType = _a.productType;
-  var api = useApiContext().api;
+var MetInfoWrapper = function MetInfoWrapper(_ref) {
+  var productType = _ref.productType;
 
-  var _b = __read(React__default.useState(false), 2),
-      isFormDialogOpen = _b[0],
-      setIsFormDialogOpen = _b[1];
+  var _useApiContext = useApiContext(),
+      api = _useApiContext.api;
 
-  var _c = __read(React__default.useState(null), 2),
-      selectedProduct = _c[0],
-      setSelectedProduct = _c[1]; // Retrieve list of products
+  var _React$useState = React__default.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isFormDialogOpen = _React$useState2[0],
+      setIsFormDialogOpen = _React$useState2[1];
 
+  var _React$useState3 = React__default.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      selectedProduct = _React$useState4[0],
+      setSelectedProduct = _React$useState4[1]; // Retrieve list of products
 
-  var _d = useApi(productType === 'sigmet' ? api.getSigmetList : api.getAirmetList),
-      errorList = _d.error,
-      isLoadingList = _d.isLoading,
-      productList = _d.result,
-      fetchNewProductList = _d.fetchApiData;
+
+  var _useApi = useApi(productType === 'sigmet' ? api.getSigmetList : api.getAirmetList),
+      errorList = _useApi.error,
+      isLoadingList = _useApi.isLoading,
+      productList = _useApi.result,
+      fetchNewProductList = _useApi.fetchApiData;
 
   var getNewProductList = function getNewProductList() {
     fetchNewProductList({});
@@ -5127,27 +5343,43 @@ var MetInfoWrapper = function MetInfoWrapper(_a) {
   }));
 };
 
-var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl) {
-  var axiosInstance = createApiInstance(url, appUrl, auth, setAuth, authTokenUrl);
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * */
+var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl, authClientId) {
+  var axiosInstance = createApiInstance(url, appUrl, auth, setAuth, authTokenUrl, authClientId);
   return {
     // api data
     getSigmetList: function getSigmetList() {
       return axiosInstance.get('/sigmetlist');
     },
     postSigmet: function postSigmet(formData) {
-      return axiosInstance.post('/sigmet', __assign({}, formData));
+      return axiosInstance.post('/sigmet', Object.assign({}, formData));
     },
     getSigmetTAC: function getSigmetTAC(sigmetData) {
-      return axiosInstance.post('/sigmet2tac', __assign({}, sigmetData));
+      return axiosInstance.post('/sigmet2tac', Object.assign({}, sigmetData));
     },
     postAirmet: function postAirmet(formData) {
-      return axiosInstance.post('/airmet', __assign({}, formData));
+      return axiosInstance.post('/airmet', Object.assign({}, formData));
     },
     getAirmetList: function getAirmetList() {
       return axiosInstance.get('/airmetlist');
     },
     getAirmetTAC: function getAirmetTAC(sigmetData) {
-      return axiosInstance.post('/airmet2tac', __assign({}, sigmetData));
+      return axiosInstance.post('/airmet2tac', Object.assign({}, sigmetData));
     }
   };
 };