@opengeoweb/sigmet-airmet 1.2.5 → 2.1.2

package/sigmet-airmet.esm.js

@@ -1,14 +1,12 @@
 import * as React from 'react';
 import React__default from 'react';
 import { makeStyles, FormControlLabel, Radio, Grid, Typography, SvgIcon, Tooltip, Button, Checkbox, MenuItem, FormHelperText, Dialog, DialogTitle, DialogContent, Card, CardContent, List, ListItem, Backdrop, CircularProgress } from '@material-ui/core';
-import { MuiPickersUtilsProvider } from '@material-ui/pickers';
-import MomentUtils from '@date-io/moment';
 import { useFormContext } from 'react-hook-form';
 import { ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormNumberField, isInteger, isValidMax, isValidMin, isEmpty, ReactHookFormDateTime, isValidDate, isBefore, isBetween, hasMaxFeaturePoints, hasMulitpleIntersections, ReactHookFormHiddenInput, isMaximumOneDrawing, hasIntersectionWithFIR, isValidGeoJsonCoordinates, isXHoursBefore, isAfter, isXHoursAfter, ReactHookFormTextField, containsNoCommas, isLatitude, isNonOrBothCoordinates, isLongitude, errorMessages, isGeometryDirty, ReactHookFormProvider, defaultFormOptions } from '@opengeoweb/form-fields';
 import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
 import produce, { produce as produce$1 } from 'immer';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
-import { mapSelectors, generateMapId, generateTimesliderId, SyncGroups, generateLayerId, mapActions, publicLayers, KNMIlayers, LayerManagerMapButtonConnect, MapViewConnect, MapViewLayer, TimeSliderConnect } 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,6 +15,109 @@ import moment from 'moment';
 import { debounce } from 'lodash';
 import { Skeleton } from '@material-ui/lab';
 
+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 = {
   bbox: {
     left: -1205884.85699446,
@@ -332,6 +433,43 @@ 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.
@@ -382,14 +520,18 @@ var MapViewGeoJson = function MapViewGeoJson(_ref) {
       _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 timesliderId = React.useRef("sigmet-" + generateTimesliderId()).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]);
@@ -422,13 +564,13 @@ var MapViewGeoJson = function MapViewGeoJson(_ref) {
     dispatch(mapActions.setBaseLayers({
       mapId: mapId,
       layers: [Object.assign(Object.assign({}, publicLayers.baseLayerGrey), {
-        id: "baselayer-" + mapId
+        id: "baselayer-".concat(mapId)
       }), Object.assign(Object.assign({}, publicLayers.overLayer), {
-        id: "countryborders-" + mapId
-      }), Object.assign(Object.assign({}, KNMIlayers.northSeaPlatforms), {
-        id: "northseaplatforms-" + mapId
-      }), Object.assign(Object.assign({}, KNMIlayers.majorAirportsEHAA), {
-        id: "majorairportsehaa-" + mapId
+        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({
@@ -456,24 +598,17 @@ var MapViewGeoJson = function MapViewGeoJson(_ref) {
       height: '99%'
     },
     "data-testid": "MapView"
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: 'absolute',
-      left: '20px',
-      top: '20px',
-      zIndex: 50
-    }
-  }, /*#__PURE__*/React.createElement(LayerManagerMapButtonConnect, {
+  }, /*#__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,
@@ -492,7 +627,7 @@ var MapViewGeoJson = function MapViewGeoJson(_ref) {
     },
     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,
@@ -511,11 +646,11 @@ var MapViewGeoJson = function MapViewGeoJson(_ref) {
     },
     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", {
@@ -714,23 +849,6 @@ var isFir = function isFir(geojson) {
   return geojson && geojson.features && geojson.features[0].properties['selectionType'] === 'fir';
 };
 
-/* *
- * 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 getDrawModeFromSelectionType = function getDrawModeFromSelectionType(selectionType) {
   switch (selectionType) {
     case 'point':
@@ -767,10 +885,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;
@@ -782,21 +898,23 @@ var useDrawMode = function useDrawMode(initialGeometry) {
     start: null,
     end: null
   }),
-      drawMode = _React$useState[0],
-      setDrawMode = _React$useState[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      drawMode = _React$useState2[0],
+      setDrawMode = _React$useState2[1];
   /* Drawmode for the layers */
 
 
-  var _React$useState2 = React.useState({
+  var _React$useState3 = React.useState({
     start: getInitialLayerDrawModes('start'),
     end: getInitialLayerDrawModes('end')
   }),
-      layerDrawModes = _React$useState2[0],
-      setLayersDrawModes = _React$useState2[1];
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      layerDrawModes = _React$useState4[0],
+      setLayersDrawModes = _React$useState4[1];
   /* GeoJSONs for the layers */
 
 
-  var _React$useState3 = React.useState(function () {
+  var _React$useState5 = React.useState(function () {
     return {
       start: addFeatureProperties(initialGeometry && initialGeometry.start, featurePropsStart),
       end: addFeatureProperties(initialGeometry && initialGeometry.end, featurePropsEnd),
@@ -805,8 +923,9 @@ var useDrawMode = function useDrawMode(initialGeometry) {
       fir: addFeatureProperties(getFir(), featurePropsFIR)
     };
   }),
-      geoJSONs = _React$useState3[0],
-      setLayerGeoJSONs = _React$useState3[1];
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      geoJSONs = _React$useState6[0],
+      setLayerGeoJSONs = _React$useState6[1];
   /**
    *
    * @param mapDrawMode Can be 'POINT' | 'BOX' | 'POLYGON' |  'FIR' | 'DELETE'
@@ -1259,7 +1378,7 @@ var DrawTools = function DrawTools(_ref) {
   }, /*#__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
@@ -1276,7 +1395,7 @@ var DrawTools = function DrawTools(_ref) {
   }))), /*#__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
@@ -1292,7 +1411,7 @@ var DrawTools = function DrawTools(_ref) {
   }))), /*#__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
@@ -1308,7 +1427,7 @@ var DrawTools = function DrawTools(_ref) {
   }))), /*#__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
@@ -1340,22 +1459,6 @@ var DrawTools = function DrawTools(_ref) {
   }))));
 };
 
-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 _config$firareas$fir = config.firareas[fir],
@@ -1513,9 +1616,7 @@ var useProductSettings = function useProductSettings(productConfig) {
   });
   var allowedUnits = Object.keys(firData).reduce(function (list, key) {
     if (firData[key].units) {
-      var _Object$assign;
-
-      return Object.assign(Object.assign({}, list), (_Object$assign = {}, _Object$assign[key] = firData[key].units, _Object$assign));
+      return Object.assign(Object.assign({}, list), _defineProperty({}, key, firData[key].units));
     }
 
     return list;
@@ -1545,19 +1646,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';
@@ -1610,20 +1711,16 @@ var hasValue = function hasValue(value) {
 };
 var removeEmptyNumberFieldValues = function removeEmptyNumberFieldValues(product) {
   return Object.keys(product).reduce(function (list, key) {
-    var _ref2;
-
     var value = product[key]; // check if nested object has value
 
     if (_typeof(value) === 'object' && value !== null && value !== undefined) {
-      var _ref;
-
       var hasNaNValue = Object.keys(value).reduce(function (total, valKey) {
         return !hasValue(value[valKey]) || total;
       }, false);
-      return Object.assign(Object.assign({}, list), !hasNaNValue && (_ref = {}, _ref[key] = value, _ref));
+      return Object.assign(Object.assign({}, list), !hasNaNValue && _defineProperty({}, key, value));
     }
 
-    return Object.assign(Object.assign({}, list), hasValue(value) && (_ref2 = {}, _ref2[key] = value, _ref2));
+    return Object.assign(Object.assign({}, list), hasValue(value) && _defineProperty({}, key, value));
   }, {});
 };
 var createSigmetPostParameter = function createSigmetPostParameter(sigmetToPost, newStatus, previousUuid) {
@@ -1650,24 +1747,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';
@@ -1690,11 +1787,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)';
@@ -1705,9 +1802,7 @@ var extractUnitsToShow = function extractUnitsToShow(allowedUnits, unitType) {
     var unit = allowedUnits[key];
 
     if (unitType[unit]) {
-      var _Object$assign2;
-
-      return Object.assign(Object.assign({}, list), (_Object$assign2 = {}, _Object$assign2[unit] = unitType[unit], _Object$assign2));
+      return Object.assign(Object.assign({}, list), _defineProperty({}, unit, unitType[unit]));
     }
 
     return list;
@@ -1833,22 +1928,6 @@ var airmetConfig = {
 	active_firs: active_firs
 };
 
-/* *
- * 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 invalidLevelsTill4900FTStepsMessage = 'Levels must be rounded to the nearest 100ft';
 var invalidLevelsFrom50FLStepsMessage = 'Levels must be rounded to the nearest 5';
 
@@ -2023,12 +2102,12 @@ var Levels = function Levels(_ref) {
         isInteger: isInteger,
         max: function max(value) {
           return (// The max level depends on the unit
-            isValidMax(value, getMaxLevelValue(getValues('level.unit'), productType)) || "The maximum level in " + LevelUnits[getValues('level.unit')] + " is " + getMaxLevelValue(getValues('level.unit'), productType)
+            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) {
           return (// The min level depends on the unit
-            isValidMin(value, getMinLevelValue(getValues('level.unit'))) || "The minimum level in " + LevelUnits[getValues('level.unit')] + " is " + getMinLevelValue(getValues('level.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) {
@@ -2073,7 +2152,7 @@ var Levels = function Levels(_ref) {
     disabled: isDisabled,
     defaultValue: 'FL',
     onChange: function onChange() {
-      trigger([].concat(getValues('level.value') || getValues('level.value') === 0 ? ['level.value'] : [], 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();
     }
@@ -2095,12 +2174,12 @@ var Levels = function Levels(_ref) {
         isInteger: isInteger,
         max: function max(value) {
           return (// The max level depends on the unit
-            isValidMax(value, getMaxLevelValue(getValues('level.unit'), productType)) || "The maximum level in " + LevelUnits[getValues('level.unit')] + " is " + getMaxLevelValue(getValues('level.unit'), productType)
+            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) {
           return (// The min level depends on the unit
-            isValidMin(value, getMinLevelValue(getValues('level.unit'))) || "The minimum level in " + LevelUnits[getValues('level.unit')] + " is " + getMinLevelValue(getValues('level.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) {
@@ -2182,12 +2261,12 @@ var Levels = function Levels(_ref) {
         isInteger: isInteger,
         max: function max(value) {
           return (// The max level depends on the unit
-            isValidMax(value, getMaxLevelValue(getValues('lowerLevel.unit'), productType)) || "The maximum level in " + LevelUnits[getValues('lowerLevel.unit')] + " is " + getMaxLevelValue(getValues('lowerLevel.unit'), productType)
+            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) {
           return (// The min level depends on the unit
-            isValidMin(value, getMinLevelValue(getValues('lowerLevel.unit'))) || "The minimum level in " + LevelUnits[getValues('lowerLevel.unit')] + " is " + getMinLevelValue(getValues('lowerLevel.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) {
@@ -2266,12 +2345,12 @@ var Levels = function Levels(_ref) {
         isInteger: isInteger,
         max: function max(value) {
           return (// The max level depends on the unit
-            isValidMax(value, getMaxLevelValue(getValues('level.unit'), productType)) || "The maximum level in " + LevelUnits[getValues('level.unit')] + " is " + getMaxLevelValue(getValues('level.unit'), productType)
+            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) {
           return (// The min level depends on the unit
-            isValidMin(value, getMinLevelValue(getValues('level.unit'))) || "The minimum level in " + LevelUnits[getValues('level.unit')] + " is " + getMinLevelValue(getValues('level.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) {
@@ -2424,23 +2503,6 @@ var ObservationForecastTime = function ObservationForecastTime(_ref) {
   })));
 };
 
-/* *
- * 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 Phenomenon = function Phenomenon(_ref) {
   var productType = _ref.productType,
       isDisabled = _ref.isDisabled,
@@ -2499,7 +2561,7 @@ var Phenomenon = function Phenomenon(_ref) {
 
       _onChange();
 
-      return trigger([].concat(getValues('validDateStart') ? ['validDateStart'] : [], getValues('validDateEnd') ? ['validDateEnd'] : []));
+      return trigger([].concat(_toConsumableArray(getValues('validDateStart') ? ['validDateStart'] : []), _toConsumableArray(getValues('validDateEnd') ? ['validDateEnd'] : [])));
     },
     autoFocus: true
   }, Object.keys(phenomenaList).map(function (key) {
@@ -2813,12 +2875,12 @@ var Progress = function Progress(_ref) {
         isInteger: isInteger,
         min: function min(value) {
           return (// The max level depends on the unit
-            isValidMin(value, getMinMovementSpeedValue(getValues('movementUnit'))) || "The minimum level in " + MovementUnit[getValues('movementUnit')] + " is " + getMinMovementSpeedValue(getValues('movementUnit'))
+            isValidMin(value, getMinMovementSpeedValue(getValues('movementUnit'))) || "The minimum level in ".concat(MovementUnit[getValues('movementUnit')], " is ").concat(getMinMovementSpeedValue(getValues('movementUnit')))
           );
         },
         max: function max(value) {
           return (// The max level depends on the unit
-            isValidMax(value, getMaxMovementSpeedValue(getValues('movementUnit'))) || "The maximum level in " + MovementUnit[getValues('movementUnit')] + " is " + getMaxMovementSpeedValue(getValues('movementUnit'))
+            isValidMax(value, getMaxMovementSpeedValue(getValues('movementUnit'))) || "The maximum level in ".concat(MovementUnit[getValues('movementUnit')], " is ").concat(getMaxMovementSpeedValue(getValues('movementUnit')))
           );
         },
         validateMovementSteps: function validateMovementSteps(value) {
@@ -2953,7 +3015,7 @@ var SelectFIR = function SelectFIR(_ref) {
     }
   }, 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, {
@@ -3113,7 +3175,7 @@ var ValidFrom = function ValidFrom(_ref) {
         },
         // 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");
         }
       }
     },
@@ -3207,7 +3269,7 @@ var ValidUntil = function ValidUntil(_ref) {
         },
         // 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");
         }
       }
     },
@@ -3568,12 +3630,12 @@ var SurfaceWind = function SurfaceWind(_ref) {
         isInteger: isInteger,
         min: function min(value) {
           return (// The min level depends on the unit
-            isValidMin(value, getMinWindSpeedValue(getValues('windUnit'))) || "The minimum wind speed in " + WindUnit[getValues('windUnit')] + " is " + getMinWindSpeedValue(getValues('windUnit'))
+            isValidMin(value, getMinWindSpeedValue(getValues('windUnit'))) || "The minimum wind speed in ".concat(WindUnit[getValues('windUnit')], " is ").concat(getMinWindSpeedValue(getValues('windUnit')))
           );
         },
         max: function max(value) {
           return (// The max level depends on the unit
-            isValidMax(value, getMaxWindSpeedValue(getValues('windUnit'))) || "The maximum wind speed in " + WindUnit[getValues('windUnit')] + " is " + getMaxWindSpeedValue(getValues('windUnit'))
+            isValidMax(value, getMaxWindSpeedValue(getValues('windUnit'))) || "The maximum wind speed in ".concat(WindUnit[getValues('windUnit')], " is ").concat(getMaxWindSpeedValue(getValues('windUnit')))
           );
         }
       }
@@ -3760,12 +3822,12 @@ var CloudLevels = function CloudLevels(_ref) {
         isInteger: isInteger,
         min: function min(value) {
           return (// The min level depends on the unit
-            isValidMin(value, getMinCloudLevelValue(getValues('cloudLevel.unit'))) || "The minimum level in " + CloudLevelUnits[getValues('cloudLevel.unit')] + " is " + getMinCloudLevelValue(getValues('cloudLevel.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) {
           return (// The max level depends on the unit
-            isValidMax(value, getMaxCloudLevelValue(getValues('cloudLevel.unit'))) || "The maximum level in " + CloudLevelUnits[getValues('cloudLevel.unit')] + " is " + getMaxCloudLevelValue(getValues('cloudLevel.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) {
@@ -3867,12 +3929,12 @@ var CloudLevels = function CloudLevels(_ref) {
         isInteger: isInteger,
         min: function min(value) {
           return (// The min level depends on the unit
-            isValidMin(value, getMinCloudLowerLevelValue(getValues('cloudLowerLevel.unit'))) || "The minimum level in " + CloudLevelUnits[getValues('cloudLowerLevel.unit')] + " is " + getMinCloudLowerLevelValue(getValues('cloudLowerLevel.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) {
           return (// The max level depends on the unit
-            isValidMax(value, getMaxCloudLowerLevelValue(getValues('cloudLowerLevel.unit'))) || "The maximum level in " + CloudLevelUnits[getValues('cloudLowerLevel.unit')] + " is " + getMaxCloudLowerLevelValue(getValues('cloudLowerLevel.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) {
@@ -3921,8 +3983,9 @@ var shouldRetrieveTAC = function shouldRetrieveTAC(product) {
 };
 var useTAC = function useTAC(initialProduct, getTAC) {
   var _React$useState = React__default.useState(noTAC),
-      TAC = _React$useState[0],
-      setTAC = _React$useState[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      TAC = _React$useState2[0],
+      setTAC = _React$useState2[1];
 
   var _useIsMounted = useIsMounted(),
       isMounted = _useIsMounted.isMounted;
@@ -4003,23 +4066,6 @@ var ProductFormTAC = function ProductFormTAC(_ref) {
   }));
 };
 
-/* *
- * 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 SigmetForm = function SigmetForm(_ref) {
   var mode = _ref.mode,
       _ref$isCancelSigmet = _ref.isCancelSigmet,
@@ -4027,7 +4073,9 @@ var SigmetForm = function SigmetForm(_ref) {
       _ref$initialSigmet = _ref.initialSigmet,
       initialSigmet = _ref$initialSigmet === void 0 ? null : _ref$initialSigmet,
       _ref$initialCancelSig = _ref.initialCancelSigmet,
-      initialCancelSigmet = _ref$initialCancelSig === void 0 ? null : _ref$initialCancelSig;
+      initialCancelSigmet = _ref$initialCancelSig === void 0 ? null : _ref$initialCancelSig,
+      _ref$showMap = _ref.showMap,
+      showMap = _ref$showMap === void 0 ? true : _ref$showMap;
   var classes = useStyles$6();
 
   var _useApiContext = useApiContext(),
@@ -4040,15 +4088,17 @@ var SigmetForm = function SigmetForm(_ref) {
       getValues = _useFormContext.getValues;
 
   var _React$useState = React__default.useState(mode === 'view'),
-      isDisabled = _React$useState[0],
-      setIsDisabled = _React$useState[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isDisabled = _React$useState2[0],
+      setIsDisabled = _React$useState2[1];
 
   var isReadOnly = mode === 'view';
   var helperText = isDisabled ? '' : 'Optional';
 
   var _useTAC = useTAC(initialSigmet !== null ? initialSigmet : initialCancelSigmet, api.getSigmetTAC),
-      tac = _useTAC[0],
-      updateTac = _useTAC[1];
+      _useTAC2 = _slicedToArray(_useTAC, 2),
+      tac = _useTAC2[0],
+      updateTac = _useTAC2[1];
 
   var onChangeForm = function onChangeForm() {
     updateTac(getValues());
@@ -4131,7 +4181,7 @@ var SigmetForm = function SigmetForm(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8
-  }, /*#__PURE__*/React__default.createElement(MapViewGeoJson, {
+  }, showMap && /*#__PURE__*/React__default.createElement(MapViewGeoJson, {
     geoJSONs: geoJSONs,
     setLayerGeoJSONs: function setLayerGeoJSONs(geoJSONs) {
       return _setLayerGeoJSONs(createInterSections(geoJSONs));
@@ -4145,8 +4195,6 @@ var SigmetForm = function SigmetForm(_ref) {
     item: true,
     xs: 4,
     className: classes.productForm
-  }, /*#__PURE__*/React__default.createElement(MuiPickersUtilsProvider, {
-    utils: MomentUtils
   }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     direction: "column",
@@ -4283,26 +4331,9 @@ var SigmetForm = function SigmetForm(_ref) {
   }))), /*#__PURE__*/React__default.createElement(Type, {
     isDisabled: isDisabled,
     isReadOnly: isReadOnly
-  }))))));
+  })))));
 };
 
-/* *
- * 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 AirmetForm = function AirmetForm(_ref) {
   var mode = _ref.mode,
       _ref$isCancelAirmet = _ref.isCancelAirmet,
@@ -4310,7 +4341,9 @@ var AirmetForm = function AirmetForm(_ref) {
       _ref$initialAirmet = _ref.initialAirmet,
       initialAirmet = _ref$initialAirmet === void 0 ? null : _ref$initialAirmet,
       _ref$initialCancelAir = _ref.initialCancelAirmet,
-      initialCancelAirmet = _ref$initialCancelAir === void 0 ? null : _ref$initialCancelAir;
+      initialCancelAirmet = _ref$initialCancelAir === void 0 ? null : _ref$initialCancelAir,
+      _ref$showMap = _ref.showMap,
+      showMap = _ref$showMap === void 0 ? true : _ref$showMap;
   var classes = useStyles$6();
 
   var _useApiContext = useApiContext(),
@@ -4325,15 +4358,17 @@ var AirmetForm = function AirmetForm(_ref) {
   var phenomenon = watch('phenomenon');
 
   var _React$useState = React__default.useState(mode === 'view'),
-      isDisabled = _React$useState[0],
-      setIsDisabled = _React$useState[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isDisabled = _React$useState2[0],
+      setIsDisabled = _React$useState2[1];
 
   var isReadOnly = mode === 'view';
   var helperText = isDisabled ? '' : 'Optional';
 
   var _useTAC = useTAC(initialAirmet !== null ? initialAirmet : initialCancelAirmet, api.getAirmetTAC),
-      tac = _useTAC[0],
-      updateTac = _useTAC[1];
+      _useTAC2 = _slicedToArray(_useTAC, 2),
+      tac = _useTAC2[0],
+      updateTac = _useTAC2[1];
 
   var onChangeForm = function onChangeForm() {
     updateTac(getValues());
@@ -4394,7 +4429,7 @@ var AirmetForm = function AirmetForm(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8
-  }, /*#__PURE__*/React__default.createElement(MapViewGeoJson, {
+  }, showMap && /*#__PURE__*/React__default.createElement(MapViewGeoJson, {
     geoJSONs: geoJSONs,
     setLayerGeoJSONs: function setLayerGeoJSONs(geoJSONs) {
       return _setLayerGeoJSONs(createInterSections(geoJSONs));
@@ -4407,8 +4442,6 @@ var AirmetForm = function AirmetForm(_ref) {
     item: true,
     xs: 4,
     className: classes.productForm
-  }, /*#__PURE__*/React__default.createElement(MuiPickersUtilsProvider, {
-    utils: MomentUtils
   }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     direction: "column",
@@ -4525,7 +4558,7 @@ var AirmetForm = function AirmetForm(_ref) {
   }))), /*#__PURE__*/React__default.createElement(Type, {
     isDisabled: isDisabled,
     isReadOnly: isReadOnly
-  }))))));
+  })))));
 };
 
 var useStyles$3 = makeStyles({
@@ -4613,22 +4646,6 @@ var ContentDialog = function ContentDialog(_a) {
   }, children));
 };
 
-/* *
- * 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 getActiveStatus = function getActiveStatus(product, className) {
   // do not return an icon if product is expired
   if (moment(product.validDateEnd) < moment.utc(new Date())) {
@@ -4647,21 +4664,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"
     });
   }
@@ -4720,7 +4735,7 @@ 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(_ref) {
@@ -4735,8 +4750,9 @@ var ProductListRow = function ProductListRow(_ref) {
       isMounted = _useIsMounted.isMounted;
 
   var _React$useState = React__default.useState(''),
-      TAC = _React$useState[0],
-      setTAC = _React$useState[1];
+      _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 () {
@@ -4812,7 +4828,7 @@ var ProductListRow = function ProductListRow(_ref) {
     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,
@@ -4907,7 +4923,7 @@ var ProductList = function ProductList(_ref) {
       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,
@@ -5023,16 +5039,19 @@ var ProductFormDialogContent = function ProductFormDialogContent(_ref) {
   var confirmationDialog = useConfirmationDialog();
 
   var _React$useState = React.useState(false),
-      showLoader = _React$useState[0],
-      setLoader = _React$useState[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      showLoader = _React$useState2[0],
+      setLoader = _React$useState2[1];
 
-  var _React$useState2 = React.useState(false),
-      errorStoreMessage = _React$useState2[0],
-      setErrorStoreMessage = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      errorStoreMessage = _React$useState4[0],
+      setErrorStoreMessage = _React$useState4[1];
 
-  var _React$useState3 = React.useState(''),
-      errorStoreMessageText = _React$useState3[0],
-      setErrorStoreMessageText = _React$useState3[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
@@ -5243,22 +5262,6 @@ var ProductFormDialog = function ProductFormDialog(_ref) {
   })));
 };
 
-/* *
- * 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)
- * */
 /**
  * Shows the list of Sigmets or Airmets and allows to create, edit and view Sigmets/Airmets.
  * Needs to be wrapped in the ApiProvider.
@@ -5276,12 +5279,14 @@ var MetInfoWrapper = function MetInfoWrapper(_ref) {
       api = _useApiContext.api;
 
   var _React$useState = React__default.useState(false),
-      isFormDialogOpen = _React$useState[0],
-      setIsFormDialogOpen = _React$useState[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isFormDialogOpen = _React$useState2[0],
+      setIsFormDialogOpen = _React$useState2[1];
 
-  var _React$useState2 = React__default.useState(null),
-      selectedProduct = _React$useState2[0],
-      setSelectedProduct = _React$useState2[1]; // Retrieve list of products
+  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 _useApi = useApi(productType === 'sigmet' ? api.getSigmetList : api.getAirmetList),
@@ -5352,8 +5357,8 @@ var MetInfoWrapper = function MetInfoWrapper(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var createApi = function createApi(url, appUrl, auth, setAuth, authTokenUrl) {
-  var axiosInstance = createApiInstance(url, appUrl, auth, setAuth, authTokenUrl);
+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() {