@opengeoweb/warnings 12.11.0 → 12.13.0

package/index.esm.js

@@ -3,11 +3,11 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Polygons, ExitDomain, Share, Edit, Delete, CoastalEvent, TemperatureLow, TemperatureHigh, Rain, Snow, Lightning, Fog, Wind, Thunderstorm, VulcanicEruption, Haze, FreezingPrecipitation, ModerateAircraftIcing, SevereAircraftIcing, ModerateTurbulence, SevereTurbulence, SandStorm, RadioactiveMaterials, DrawPolygon, Visibility, Add, ArrowUpCompact, ArrowDownCompact, breakpoints, DragHandle, Options, Close, ChevronDown, ChevronUp, Copy, Update, Cancel, Success, Expire, Remove } from '@opengeoweb/theme';
 import { uiTypes, uiActions, getSingularDrawtoolDrawLayerId, drawingToolSelectors, layerSelectors, uiSelectors, drawingToolActions, layerActions, mapListener, layersListener, drawingToolListener, syncGroupsListener, openlayersListener, syncGroupsReducer, drawingToolReducer, uiReducer, layerReducer, mapReducer, useSetupDialog, genericSelectors, useUpdateSharedData, genericActions, selectorMemoizationOptions } from '@opengeoweb/store';
 import { defaultPolygon, emptyGeoJSON, MapControlButton, getIcon, rewindGeometry, getGeoJSONPropertyValue, currentlySupportedDrawModes, defaultLayers, viewUtils, OpenLayersMapView, MapControls, OpenLayersZoomControl, OpenLayersLayer, OpenLayersFeatureLayer, genericOpenLayersFeatureStyle } from '@opengeoweb/webmap-react';
-import { SHARED_NAMESPACE, useConfirmationDialog, dateUtils, ToggleMenu, calculateStartSize, ToolContainerDraggable, AlertBanner, sessionStorageProvider, ConfirmationDialog, usePrevious, CustomIconButton, CustomTooltip, Avatar, getInitials, SwitchButton, FilterChip, TooltipSelect, usePreventBrowserClose, CustomToggleButton, Filter, FilterOption, StatusTag, LastUpdateTime, getAxiosErrorMessage, ErrorBoundary } from '@opengeoweb/shared';
+import { SHARED_NAMESPACE, useConfirmationDialog, dateUtils, ToggleMenu, calculateStartSize, ToolContainerDraggable, AlertBanner, sessionStorageProvider, ConfirmationDialog, usePrevious, CustomIconButton, CustomTooltip, Avatar, getInitials, SwitchButton, FilterChip, TooltipSelect, LastUpdateTime, usePreventBrowserClose, CustomToggleButton, Filter, FilterOption, StatusTag, getAxiosErrorMessage, ErrorBoundary } from '@opengeoweb/shared';
 import { createEntityAdapter, createSlice, createSelector, createListenerMiddleware, current, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { defaultBbox } from '@opengeoweb/core';
 import { FORM_FIELDS_NAMESPACE, useDraftFormHelpers, ReactHookFormSelect, ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormTextField, ReactHookFormProvider, defaultFormOptions, errorMessages, isEmpty, ReactHookFormDateTime, isXHoursAfter, isXHoursBefore } from '@opengeoweb/form-fields';
-import { SA_NAMESPACE, isInstanceOfCancelSigmet, getDefaultValidFromValue, isInstanceOfCancelAirmet, getTacGeometry, getMaxPolygonPoints, getDefaultValidUntilValue, useShortTestHelpers, ProductAction, SigmetForm, AirmetForm, getConfirmationDialogCancelLabel, getConfirmationDialogButtonLabel, getConfirmationDialogContent, getConfirmationDialogTitle, isVAPhenomenon, CancelSigmetVolcanicMovements, createAirmetPostParameter, createSigmetPostParameter, prepareCancelSigmet, getProductFormMode } from '@opengeoweb/sigmet-airmet';
+import { SA_NAMESPACE, isInstanceOfCancelSigmet, getDefaultValidFromValue, isInstanceOfCancelAirmet, getDefaultValidUntilValue, useShortTestHelpers, ProductAction, SigmetForm, AirmetForm, getConfirmationDialogCancelLabel, getConfirmationDialogButtonLabel, getConfirmationDialogContent, getConfirmationDialogTitle, isVAPhenomenon, CancelSigmetVolcanicMovements, createAirmetPostParameter, createSigmetPostParameter, prepareCancelSigmet, getProductFormMode } from '@opengeoweb/sigmet-airmet';
 import { LayerType, generateMapId } from '@opengeoweb/webmap';
 import { t } from 'i18next';
 import { useTranslation } from 'react-i18next';
@@ -218,9 +218,7 @@ var en = {
 	"maritime-add-area": "Add",
 	"maritime-no-area-selected": "(no area selected)",
 	"maritime-no-district-selected": "(no district selected)",
-	"maritime-backing": "Backing",
-	"maritime-veering": "Veering",
-	"maritime-no-change": "No change",
+	"maritime-no-change-selected": "(no change selected)",
 	"maritime-windforce": "{{value}} Bft",
 	"maritime-header-direction": "Direction",
 	"maritime-header-direction-from": "Direction from",
@@ -229,22 +227,25 @@ var en = {
 	"maritime-header-areas": "Areas",
 	"maritime-header-districts": "Districts",
 	"maritime-header-change": "Change",
-	"maritime-direction-n": "North",
-	"maritime-direction-nne": "North to Northeast",
-	"maritime-direction-ne": "Northeast",
-	"maritime-direction-nen": "Northeast to North",
-	"maritime-direction-e": "East",
-	"maritime-direction-ese": "East to Southeast",
-	"maritime-direction-se": "Southeast",
-	"maritime-direction-ses": "Southeast to South",
-	"maritime-direction-s": "South",
-	"maritime-direction-ssw": "South to Southwest",
-	"maritime-direction-sw": "Southwest",
-	"maritime-direction-sww": "Southwest to West",
-	"maritime-direction-w": "West",
-	"maritime-direction-wnw": "West to Northwest",
-	"maritime-direction-nw": "Northwest",
-	"maritime-direction-nwn": "Northwest to North",
+	"maritime-direction-N": "North",
+	"maritime-direction-NNE": "North to Northeast",
+	"maritime-direction-NE": "Northeast",
+	"maritime-direction-ENE": "East to Northeast",
+	"maritime-direction-E": "East",
+	"maritime-direction-ESE": "East to Southeast",
+	"maritime-direction-SE": "Southeast",
+	"maritime-direction-SSE": "South to Southeast",
+	"maritime-direction-S": "South",
+	"maritime-direction-SSW": "South to Southwest",
+	"maritime-direction-SW": "Southwest",
+	"maritime-direction-WSW": "West to Southwest",
+	"maritime-direction-W": "West",
+	"maritime-direction-WNW": "West to Northwest",
+	"maritime-direction-NW": "Northwest",
+	"maritime-direction-NNW": "North to Northwest",
+	"maritime-change-NO_CHANGE": "No change",
+	"maritime-change-BACKING": "Backing",
+	"maritime-change-VEERING": "Veering",
 	"maritime-delete-button": "Delete",
 	"maritime-retract-warning": "Retract warning",
 	"maritime-no-change-of-direction": "(no change of direction)",
@@ -252,12 +253,19 @@ var en = {
 	"maritime-retract-dialog-description-suffix": "will be removed",
 	"maritime-retract-dialog-empty-warning-description": "The warning will be retracted",
 	"maritime-retract-dialog-confirm": "Retract",
-	"maritime-retract-success": "Warning retracted successfully",
 	"maritime-clear-dialog-title": "Clear all",
 	"maritime-clear-dialog-description": "All warnings will be removed from the list",
-	"maritime-clear-success": "Warning list cleared successfully",
 	"maritime-warning-title-coastal": "Warning Maritime - Coastal Waters",
-	"maritime-warning-title-northsea": "Warning Maritime - North Sea Districts"
+	"maritime-warning-title-northsea": "Warning Maritime - North Sea Districts",
+	"maritime-domain-coastal": "Coastal Waters",
+	"maritime-domain-northsea": "North Sea Districts",
+	"maritime-editor-on": "You are now the editor of the Maritime Warnings for {{domain}}",
+	"maritime-editor-off": "You are now no longer the editor of the Maritime Warnings for {{domain}}",
+	"maritime-warning-post-success": "Warning published successfully",
+	"maritime-loading-config": "Loading config...",
+	"maritime-config-error": "Something went wrong with loading the configuration file",
+	"maritime-warning-validfrom": "Start time: ",
+	"maritime-warning-validuntil": "End time: "
 };
 var nl = {
 	"drawing-tool-form-tools": "Gereedschap",
@@ -414,9 +422,10 @@ var nl = {
 	"maritime-add-area": "Toevoegen",
 	"maritime-no-area-selected": "(geen gebied geselecteerd)",
 	"maritime-no-district-selected": "(geen district geselecteerd)",
-	"maritime-backing": "Krimpend",
-	"maritime-veering": "Ruimend",
-	"maritime-no-change": "Geen wijziging",
+	"maritime-no-change-selected": "(geen wijziging geselecteerd)",
+	"maritime-change-NO_CHANGE": "Geen wijziging",
+	"maritime-change-BACKING": "Krimpend",
+	"maritime-change-VEERING": "Ruimend",
 	"maritime-windforce": "{{value}} Bft",
 	"maritime-header-direction": "Richting",
 	"maritime-header-direction-from": "Richting van",
@@ -425,34 +434,37 @@ var nl = {
 	"maritime-header-areas": "Gebieden",
 	"maritime-header-districts": "Districten",
 	"maritime-header-change": "Wijziging",
-	"maritime-direction-n": "Noord",
-	"maritime-direction-nne": "Noord tot noordoost",
-	"maritime-direction-ne": "Noordoost",
-	"maritime-direction-nen": "Noordoost tot noord",
-	"maritime-direction-e": "Oost",
-	"maritime-direction-ese": "Oost tot zuidoost",
-	"maritime-direction-se": "Zuidoost",
-	"maritime-direction-ses": "Zuidoost tot zuid",
-	"maritime-direction-s": "Zuid",
-	"maritime-direction-ssw": "Zuid tot zuidwest",
-	"maritime-direction-sw": "Zuidwest",
-	"maritime-direction-sww": "Zuidwest tot west",
-	"maritime-direction-w": "West",
-	"maritime-direction-wnw": "West tot noordwest",
-	"maritime-direction-nw": "Noordwest",
-	"maritime-direction-nwn": "Noordwest tot noord",
+	"maritime-direction-N": "Noord",
+	"maritime-direction-NNE": "Noord tot noordoost",
+	"maritime-direction-NE": "Noordoost",
+	"maritime-direction-ENE": "Oost tot noordoost",
+	"maritime-direction-E": "Oost",
+	"maritime-direction-ESE": "Oost tot zuidoost",
+	"maritime-direction-SE": "Zuidoost",
+	"maritime-direction-SSE": "Zuid tot zuidoost",
+	"maritime-direction-S": "Zuid",
+	"maritime-direction-SSW": "Zuid tot zuidwest",
+	"maritime-direction-SW": "Zuidwest",
+	"maritime-direction-WSW": "West tot zuidwest",
+	"maritime-direction-W": "West",
+	"maritime-direction-WNW": "West tot noordwest",
+	"maritime-direction-NW": "Noordwest",
+	"maritime-direction-NNW": "Noord tot noordwest",
 	"maritime-delete-button": "Verwijderen",
 	"maritime-retract-warning": "Waarschuwing intrekken",
 	"maritime-retract-dialog-no-change": "(geen wijziging in richting)",
 	"maritime-retract-dialog-empty-warning-description": "De waarschuwing wordt verwijderd",
 	"maritime-retract-dialog-description-suffix": "wordt verwijderd",
 	"maritime-retract-dialog-confirm": "Intrekken",
-	"maritime-retract-success": "Waarschuwing succesvol ingetrokken",
 	"maritime-clear-dialog-title": "Wissen",
 	"maritime-clear-dialog-description": "Alle waarschuwingen worden verwijderd",
-	"maritime-clear-success": "Alle waarchuwingen zijn verwijderd",
 	"maritime-warning-title-coastal": "Maritieme Waarschuwing - Kustgebieden",
-	"maritime-warning-title-northsea": "Maritieme Waarschuwing - Noordzee Districten"
+	"maritime-warning-title-northsea": "Maritieme Waarschuwing - Noordzee Districten",
+	"maritime-warning-post-success": "Waarschuwing succesvol gepubliceerd",
+	"maritime-loading-config": "Laden van configuratie...",
+	"maritime-config-error": "Er is iets misgegaan bij het laden van het configuratiebestand",
+	"maritime-warning-validfrom": "Start tijd: ",
+	"maritime-warning-validuntil": "Eind tijd: "
 };
 var fi = {
 	"drawing-tool-form-tools": "Työkalut",
@@ -604,7 +616,9 @@ var fi = {
 	"aviation-discard-success": "{{warningType}} er forkastet!",
 	"error-auth-login": "Tämän toiminnallisuuden käyttäminen vaatii tunnistautumista. Kirjaudu sisään jatkaaksesi",
 	"cancel-warningType": "Peruuta {{warningType}}",
-	cancelling: "Peruuttaminen"
+	cancelling: "Peruuttaminen",
+	"maritime-editor-off": "Et ole enää {{domain}} -merivaroitusten muokkaaja",
+	"maritime-warning-post-success": "Varoitus julkaistu onnistuneesti"
 };
 var no = {
 	"drawing-tool-form-tools": "Verktøy",
@@ -2000,8 +2014,9 @@ var getPublicWarningList = function getPublicWarningList(auth) {
     headers: getHeaders(auth)
   }).then(handleResponse).then(function (warnings) {
     return warnings.map(function (warning) {
+      var _warning$warningDetai;
       return Object.assign({}, warning, {
-        type: 'public'
+        type: ((_warning$warningDetai = warning.warningDetail) == null ? void 0 : _warning$warningDetai.domain) || 'public'
       });
     });
   });
@@ -2026,6 +2041,19 @@ var postPublicWarning = function postPublicWarning(auth, data) {
     body: JSON.stringify(data)
   }).then(handleResponse);
 };
+var postMaritimeWarnings = function postMaritimeWarnings(auth, data) {
+  return fetch(publicWarningBaseUrl + "/maritime/", {
+    headers: getHeaders(auth),
+    method: 'POST',
+    body: JSON.stringify(data)
+  }).then(handleResponse);
+};
+var updateMaritimeWarningsEditor = function updateMaritimeWarningsEditor(domain, isEditor, auth, force) {
+  return fetch(publicWarningBaseUrl + "/maritime/" + domain + "?editor=" + (isEditor ? 'true' : 'false') + "&force=" + (force ? 'true' : 'false'), {
+    headers: getHeaders(auth),
+    method: 'POST'
+  }).then(handleResponse);
+};
 var deleteWarning = function deleteWarning(warningId, auth) {
   return fetch(publicWarningBaseUrl + "/warnings/" + warningId + "?delete=true", {
     headers: getHeaders(auth),
@@ -2109,6 +2137,12 @@ var deleteDrawing = function deleteDrawing(auth, drawingId) {
     headers: getHeaders(auth)
   }).then(handleResponse);
 };
+var getMaritimeWarningsConfig = function getMaritimeWarningsConfig(auth) {
+  var url = publicWarningBaseUrl + "/maritime-warnings-config";
+  return fetch(url, {
+    headers: getHeaders(auth)
+  }).then(handleResponse);
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2137,6 +2171,11 @@ var PublicWarningStatus;
   PublicWarningStatus["IGNORED"] = "IGNORED";
   PublicWarningStatus["WITHDRAWN"] = "WITHDRAWN";
 })(PublicWarningStatus || (PublicWarningStatus = {}));
+var MaritimeWarningAction;
+(function (MaritimeWarningAction) {
+  MaritimeWarningAction["SELECT"] = "SELECT";
+  MaritimeWarningAction["UPDATE"] = "UPDATE";
+})(MaritimeWarningAction || (MaritimeWarningAction = {}));
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2384,7 +2423,7 @@ var defaultDomainFilter = {
 };
 var domainLevels = {
   aviation: [Level.airmet, Level.sigmet],
-  maritime: [],
+  maritime: [Level.extreme, Level.moderate, Level.severe],
   "public": [Level.extreme, Level.moderate, Level.severe]
 };
 var defaultLevelFilter = (_defaultLevelFilter = {}, _defaultLevelFilter[emptyFilterId] = true, _defaultLevelFilter.extreme = true, _defaultLevelFilter.moderate = true, _defaultLevelFilter.severe = true, _defaultLevelFilter.AIR = true, _defaultLevelFilter.SIG = true, _defaultLevelFilter);
@@ -2394,9 +2433,9 @@ var makeFilterFromList = function makeFilterFromList(options, value) {
   if (value === void 0) {
     value = true;
   }
-  return options.reduce(function (acc, p) {
+  return options.reduce(function (acc, property) {
     var _Object$assign;
-    return p ? Object.assign({}, acc, (_Object$assign = {}, _Object$assign[p] = value, _Object$assign)) : acc;
+    return property ? Object.assign({}, acc, (_Object$assign = {}, _Object$assign[property] = value, _Object$assign)) : acc;
   }, (_options$reduce = {}, _options$reduce[emptyFilterId] = value, _options$reduce));
 };
 var AllPhenomena = Object.assign({}, AirmetPhenomena, SigmetPhenomena, Phenomenon$1);
@@ -2405,7 +2444,7 @@ var AllPhenomenaKeys = Object.fromEntries(Object.keys(AllPhenomena).map(function
 }));
 var domainPhenomena = {
   aviation: [].concat(Object.keys(SigmetPhenomena), Object.keys(AirmetPhenomena)),
-  maritime: [],
+  maritime: [Phenomenon$1.wind],
   "public": [].concat(Object.keys(Phenomenon$1))
 };
 var defaultPhenomenonFilter = makeFilterFromList(Object.keys(AllPhenomenaKeys));
@@ -2420,8 +2459,8 @@ var getSelectedOptions = function getSelectedOptions(options) {
   if (options === void 0) {
     options = {};
   }
-  var selectedOptions = Object.keys(options).filter(function (k) {
-    return options[k];
+  var selectedOptions = Object.keys(options).filter(function (key) {
+    return options[key];
   });
   var allSelected = selectedOptions.length === Object.keys(options).length;
   return {
@@ -2432,26 +2471,26 @@ var getSelectedOptions = function getSelectedOptions(options) {
 var updateState = function updateState(state, optionKey, value, only) {
   var _Object$assign4;
   if (only) {
-    return Object.keys(state).reduce(function (acc, k) {
+    return Object.keys(state).reduce(function (acc, key) {
       var _Object$assign2;
-      return Object.assign({}, acc, (_Object$assign2 = {}, _Object$assign2[k] = k === optionKey, _Object$assign2));
+      return Object.assign({}, acc, (_Object$assign2 = {}, _Object$assign2[key] = key === optionKey, _Object$assign2));
     }, {});
   }
   if (optionKey === 'ALL') {
     if (Object.keys(state).length < 2) {
       return state;
     }
-    return Object.keys(state).reduce(function (acc, k) {
+    return Object.keys(state).reduce(function (acc, key) {
       var _Object$assign3;
-      return Object.assign({}, acc, (_Object$assign3 = {}, _Object$assign3[k] = value, _Object$assign3));
+      return Object.assign({}, acc, (_Object$assign3 = {}, _Object$assign3[key] = value, _Object$assign3));
     }, {});
   }
   return Object.assign({}, state, (_Object$assign4 = {}, _Object$assign4[optionKey] = value, _Object$assign4));
 };
 /** Make sure our value is in the filter */
 var getValue = function getValue(values, value) {
-  return Object.values(values).find(function (v) {
-    return v === value;
+  return Object.values(values).find(function (existingValue) {
+    return existingValue === value;
   }) || emptyFilterId;
 };
 var getFiltersFromWarnings = function getFiltersFromWarnings(warnings, filterKey) {
@@ -3303,6 +3342,68 @@ var useMutateDeleteDrawing = function useMutateDeleteDrawing() {
     }
   });
 };
+var usePostMaritimeWarnings = function usePostMaritimeWarnings() {
+  var _useAuthenticationCon6 = useAuthenticationContext(),
+    auth = _useAuthenticationCon6.auth;
+  var queryClient = useQueryClient();
+  var dispatch = useDispatch();
+  return useMutation({
+    mutationFn: function mutationFn(data) {
+      if (!auth) {
+        throw new Error('Authentication context not found');
+      }
+      return postMaritimeWarnings(auth, data);
+    },
+    onSuccess: function onSuccess() {
+      dispatch(snackbarActions.openSnackbar({
+        type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
+        key: 'maritime-warning-post-success'
+      }));
+    },
+    onSettled: function () {
+      var _onSettled = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+        return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
+            case 0:
+              _context6.next = 2;
+              return queryClient.invalidateQueries({
+                queryKey: ['public-warning-list']
+              });
+            case 2:
+            case "end":
+              return _context6.stop();
+          }
+        }, _callee6);
+      }));
+      function onSettled() {
+        return _onSettled.apply(this, arguments);
+      }
+      return onSettled;
+    }()
+  });
+};
+var useMutateMaritimeWarningsEditor = function useMutateMaritimeWarningsEditor() {
+  var _useAuthenticationCon7 = useAuthenticationContext(),
+    auth = _useAuthenticationCon7.auth;
+  return useMutation({
+    mutationFn: function mutationFn(_ref0) {
+      var domain = _ref0.domain,
+        isEditor = _ref0.isEditor,
+        force = _ref0.force;
+      if (!auth) {
+        throw new Error('Authentication context not found');
+      }
+      return updateMaritimeWarningsEditor(domain, isEditor, auth, force);
+    }
+  });
+};
+var useMaritimeWarningsConfig = function useMaritimeWarningsConfig(disabled) {
+  if (disabled === void 0) {
+    disabled = false;
+  }
+  var maritimeConfigQuery = useAuthQuery(['maritime-warnings-config'], getMaritimeWarningsConfig, disabled);
+  return maritimeConfigQuery;
+};
 
 var getDeleteDescription = function getDeleteDescription(objectName, t) {
   return t('delete-dialog-description') + " \"" + objectName + "\"?";
@@ -4410,15 +4511,15 @@ var getSigmetList = function getSigmetList(auth) {
 var getAirmetConfig = function getAirmetConfig(auth) {
   return fetch(airmetBaseUrl + "/airmet-config", {
     headers: getHeaders(auth)
-  }).then(function (r) {
-    return r.json();
+  }).then(function (result) {
+    return result.json();
   });
 };
 var getSigmetConfig = function getSigmetConfig(auth) {
   return fetch(sigmetBaseUrl + "/sigmet-config", {
     headers: getHeaders(auth)
-  }).then(function (r) {
-    return r.json();
+  }).then(function (result) {
+    return result.json();
   });
 };
 var getAirmetTAC = function getAirmetTAC(auth, product) {
@@ -4427,24 +4528,24 @@ var getAirmetTAC = function getAirmetTAC(auth, product) {
     method: 'POST',
     headers: getHeaders(auth)
   }).then(/*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(r) {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(result) {
       var textData;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            if (!(r.status === 200)) {
+            if (!(result.status === 200)) {
               _context.next = 5;
               break;
             }
             _context.next = 3;
-            return r.text();
+            return result.text();
           case 3:
             textData = _context.sent;
             return _context.abrupt("return", {
               data: textData
             });
           case 5:
-            throw new Error("Failed to fetch TAC data: " + r.statusText);
+            throw new Error("Failed to fetch TAC data: " + result.statusText);
           case 6:
           case "end":
             return _context.stop();
@@ -4462,24 +4563,24 @@ var getSigmetTAC = function getSigmetTAC(auth, product) {
     method: 'POST',
     headers: getHeaders(auth)
   }).then(/*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(r) {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(result) {
       var textData;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            if (!(r.status === 200)) {
+            if (!(result.status === 200)) {
               _context2.next = 5;
               break;
             }
             _context2.next = 3;
-            return r.text();
+            return result.text();
           case 3:
             textData = _context2.sent;
             return _context2.abrupt("return", {
               data: textData
             });
           case 5:
-            throw new Error("Failed to fetch TAC data: " + r.statusText);
+            throw new Error("Failed to fetch TAC data: " + result.statusText);
           case 6:
           case "end":
             return _context2.stop();
@@ -4703,22 +4804,19 @@ function isCancelSigmet(warningDetail) {
   return warningDetail.cancelsSigmetSequenceId !== undefined;
 }
 var flattenPublicWarning = function flattenPublicWarning(publicWarning) {
-  if (publicWarning.type === 'public') {
-    return {};
+  if (publicWarning.type === 'airmet' || publicWarning.type === 'sigmet') {
+    var sigmetAirmetDetails = publicWarning.sigmetAirmetDetails,
+      rest = _objectWithoutPropertiesLoose(publicWarning, _excluded$6);
+    return Object.assign({}, rest, sigmetAirmetDetails);
   }
-  var sigmetAirmetDetails = publicWarning.sigmetAirmetDetails,
-    rest = _objectWithoutPropertiesLoose(publicWarning, _excluded$6);
-  return Object.assign({}, rest, sigmetAirmetDetails);
+  return {};
 };
-var transformAirmetToWarningFormat = function transformAirmetToWarningFormat(apiAirmet, productConfig) {
+var transformAirmetToWarningFormat = function transformAirmetToWarningFormat(apiAirmet) {
+  var _airmet$startGeometry;
   var airmet = apiAirmet.airmet;
-  var tacGeometry = getTacGeometry({
-    startGeometry: airmet.startGeometry,
-    startGeometryIntersect: airmet.startGeometryIntersect,
-    maxPoints: getMaxPolygonPoints(airmet.locationIndicatorATSR, productConfig)
-  });
+  var tacGeometry = (_airmet$startGeometry = airmet.startGeometryIntersect) != null ? _airmet$startGeometry : airmet.startGeometry;
   var areas = [];
-  if (airmet.startGeometry) {
+  if (airmet.startGeometry && tacGeometry.features.length > 0) {
     areas.push({
       areaId: airmet.uuid + "-start",
       geoJSON: Object.assign({}, tacGeometry, {
@@ -4755,18 +4853,11 @@ var transformAirmetToWarningFormat = function transformAirmetToWarningFormat(api
     type: 'airmet'
   };
 };
-var transformSigmetToWarningFormat = function transformSigmetToWarningFormat(apiSigmet, productConfig) {
+var transformSigmetToWarningFormat = function transformSigmetToWarningFormat(apiSigmet) {
+  var _sigmet$startGeometry, _sigmet$endGeometryIn;
   var sigmet = apiSigmet.sigmet;
-  var tacGeometryStart = getTacGeometry({
-    startGeometry: sigmet.startGeometry,
-    startGeometryIntersect: sigmet.startGeometryIntersect,
-    maxPoints: getMaxPolygonPoints(sigmet.locationIndicatorATSR, productConfig)
-  });
-  var tacGeometryEnd = getTacGeometry({
-    startGeometry: sigmet.endGeometry,
-    startGeometryIntersect: sigmet.endGeometryIntersect,
-    maxPoints: getMaxPolygonPoints(sigmet.locationIndicatorATSR, productConfig)
-  });
+  var tacGeometryStart = (_sigmet$startGeometry = sigmet.startGeometryIntersect) != null ? _sigmet$startGeometry : sigmet.startGeometry;
+  var tacGeometryEnd = (_sigmet$endGeometryIn = sigmet.endGeometryIntersect) != null ? _sigmet$endGeometryIn : sigmet.endGeometry;
   var areas = [];
   if (sigmet.startGeometry) {
     areas.push({
@@ -5621,15 +5712,80 @@ var ValidUntil = function ValidUntil(_ref) {
   });
 };
 
-var AreaList = /*#__PURE__*/React__default.memo(function (_ref) {
-  var areas = _ref.areas,
-    selected = _ref.selected,
-    disabled = _ref.disabled,
-    onClickItem = _ref.onClickItem;
+/* *
+ * 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 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+function useFilterChipSelect(_ref) {
+  var selectedIds = _ref.selectedIds,
+    assignedIds = _ref.assignedIds,
+    onToggleSelect = _ref.onToggleSelect,
+    onSelectMultiple = _ref.onSelectMultiple;
+  var lastSelectedByClick = React__default.useRef(null);
+  // reset lastSelectedByClick when it disappears from ids list
+  React__default.useEffect(function () {
+    if (lastSelectedByClick.current && (!assignedIds.includes(lastSelectedByClick.current) || !selectedIds.includes(lastSelectedByClick.current))) {
+      lastSelectedByClick.current = null;
+    }
+  }, [assignedIds, selectedIds]);
+  return {
+    handleChipClick: function handleChipClick(id, event) {
+      if (event.shiftKey && lastSelectedByClick.current) {
+        var assignedAreasIdsArray = Array.from(assignedIds);
+        var lastClickedIndex = assignedAreasIdsArray.indexOf(lastSelectedByClick.current);
+        var clickedIndex = assignedAreasIdsArray.indexOf(id);
+        var firstIndex = Math.min(clickedIndex, lastClickedIndex);
+        var secondIndex = Math.max(clickedIndex, lastClickedIndex);
+        onSelectMultiple == null || onSelectMultiple(assignedAreasIdsArray.slice(firstIndex, secondIndex + 1));
+      } else {
+        var idIsSelected = selectedIds.includes(id);
+        if (!idIsSelected) {
+          lastSelectedByClick.current = id;
+        } else {
+          lastSelectedByClick.current = null;
+        }
+        onToggleSelect == null || onToggleSelect(id);
+      }
+    }
+  };
+}
+
+var AreaList = /*#__PURE__*/React__default.memo(function (_ref2) {
+  var areas = _ref2.areas,
+    selected = _ref2.selected,
+    disabled = _ref2.disabled,
+    isReadOnly = _ref2.isReadOnly,
+    onToggleSelectArea = _ref2.onToggleSelectArea,
+    onSelectMultipleAreas = _ref2.onSelectMultipleAreas;
+  var _useFilterChipSelect = useFilterChipSelect({
+      selectedIds: selected,
+      assignedIds: areas.map(function (area) {
+        return area.districtName;
+      }),
+      onSelectMultiple: onSelectMultipleAreas,
+      onToggleSelect: onToggleSelectArea
+    }),
+    handleChipClick = _useFilterChipSelect.handleChipClick;
   return jsx(Stack, {
     "data-testid": "arealist",
     direction: "row",
     spacing: 1,
+    style: {
+      pointerEvents: !isReadOnly ? 'auto' : 'none'
+    },
     sx: {
       display: 'block',
       '.MuiChip-root': {
@@ -5639,18 +5795,20 @@ var AreaList = /*#__PURE__*/React__default.memo(function (_ref) {
       }
     },
     children: areas.map(function (area) {
-      var isDisabled = disabled.includes(area.id);
-      var isSelected = !isDisabled && selected.includes(area.id);
+      var isDisabled = disabled.includes(area.districtName);
+      var isSelected = !isDisabled && selected.includes(area.districtName);
       return jsx(FilterChip, {
-        id: area.id,
-        label: area.label,
+        id: area.districtName,
+        label: area.districtName,
         isSelected: isSelected,
         isDisabled: isDisabled,
-        onClick: function onClick() {
-          return onClickItem == null ? void 0 : onClickItem(area.id);
+        onClick: function onClick(_ref, event) {
+          if (!isReadOnly) {
+            handleChipClick == null || handleChipClick(area.districtName, event);
+          }
         },
         size: "medium"
-      }, area.id);
+      }, area.districtName);
     })
   });
 });
@@ -5709,38 +5867,52 @@ var WarningListHeaderContent = function WarningListHeaderContent(_ref) {
 };
 
 var AssignedAreas = function AssignedAreas(_ref) {
-  var _sx;
+  var _sx, _sx2;
   var assignedAreas = _ref.assignedAreas,
     selectedAreaIds = _ref.selectedAreaIds,
     onAddClick = _ref.onAddClick,
     onDeleteClick = _ref.onDeleteClick,
     onToggleSelectArea = _ref.onToggleSelectArea,
+    onSelectMultipleAreas = _ref.onSelectMultipleAreas,
+    _ref$isReadOnly = _ref.isReadOnly,
+    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
     _ref$shouldShowDistri = _ref.shouldShowDistricts,
     shouldShowDistricts = _ref$shouldShowDistri === void 0 ? false : _ref$shouldShowDistri;
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
   var assignedAreaIds = React__default.useMemo(function () {
     return new Set(assignedAreas.map(function (area) {
-      return area.id;
+      return area.districtName;
     }));
   }, [assignedAreas]);
   // can add the selected areas when they don't appear in the assigned area list
   var canAddSelectedAreas = React__default.useMemo(function () {
-    return selectedAreaIds.length > 0 && selectedAreaIds.every(function (id) {
+    return !isReadOnly && selectedAreaIds.length > 0 && selectedAreaIds.some(function (id) {
       return !assignedAreaIds.has(id);
     });
-  }, [selectedAreaIds, assignedAreaIds]);
+  }, [isReadOnly, selectedAreaIds, assignedAreaIds]);
+  var assignedAreaIdsArray = React__default.useMemo(function () {
+    return Array.from(assignedAreaIds);
+  }, [assignedAreaIds]);
+  var _useFilterChipSelect = useFilterChipSelect({
+      selectedIds: selectedAreaIds,
+      assignedIds: assignedAreaIdsArray,
+      onSelectMultiple: onSelectMultipleAreas,
+      onToggleSelect: onToggleSelectArea
+    }),
+    handleChipClick = _useFilterChipSelect.handleChipClick;
   var theme = useTheme();
   return jsxs(Box, {
-    sx: {
+    sx: (_sx = {
       display: 'flex',
       gridArea: 'areas',
       gap: 1,
       minHeight: 32,
-      marginLeft: 1,
       paddingInline: 0.5,
       borderRadius: 1
-    },
+    }, _sx["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
+      marginLeft: 1
+    }, _sx),
     style: {
       backgroundColor: canAddSelectedAreas ? theme.palette.geowebColors.cards.cardContainerMouseOver : undefined
     },
@@ -5752,33 +5924,38 @@ var AssignedAreas = function AssignedAreas(_ref) {
       },
       children: shouldShowDistricts ? t('maritime-no-district-selected') : t('maritime-no-area-selected')
     }), jsx(Box, {
-      sx: (_sx = {
+      sx: (_sx2 = {
         flexGrow: 1,
         display: 'flex',
         flexDirection: 'column',
         gap: 0.5,
         paddingBlock: 0.5,
         alignItems: 'flex-start'
-      }, _sx["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
+      }, _sx2["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
         flexWrap: 'wrap',
         flexDirection: 'row'
-      }, _sx),
+      }, _sx2),
+      style: {
+        pointerEvents: !isReadOnly ? 'auto' : 'none'
+      },
       children: assignedAreas.map(function (area) {
-        var isSelected = selectedAreaIds.includes(area.id);
+        var isSelected = selectedAreaIds.includes(area.districtName);
         return jsx(FilterChip, {
           size: "small",
-          id: area.id,
-          label: area.label,
+          id: area.districtName,
+          label: area.districtName,
           isSelected: isSelected,
-          onClick: function onClick() {
-            return onToggleSelectArea(area.id);
+          onClick: function onClick(_chipRef, event) {
+            if (!isReadOnly) {
+              handleChipClick(area.districtName, event);
+            }
           },
-          onClickIcon: isSelected ? function () {
-            return onDeleteClick(area.id);
+          onClickIcon: isSelected && !isReadOnly ? function () {
+            onDeleteClick(area.districtName);
           } : undefined
-        }, area.id);
+        }, area.districtName);
       })
-    }), jsx(AddButton, {
+    }), !isReadOnly && jsx(AddButton, {
       show: canAddSelectedAreas,
       onClick: onAddClick
     })]
@@ -5817,8 +5994,10 @@ var WarningListSelect = /*#__PURE__*/React__default.memo(function (_ref) {
     renderValue = _ref.renderValue,
     gridArea = _ref.gridArea,
     additionalStyling = _ref.additionalStyling,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+    _ref$isReadOnly = _ref.isReadOnly,
+    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
+    _ref$displayEmpty = _ref.displayEmpty,
+    displayEmpty = _ref$displayEmpty === void 0 ? false : _ref$displayEmpty;
   var currentIndex = options.findIndex(function (option) {
     return option.value === value;
   });
@@ -5833,14 +6012,25 @@ var WarningListSelect = /*#__PURE__*/React__default.memo(function (_ref) {
       style: {
         maxWidth: '100%'
       },
-      isEnabled: !isDisabled,
-      disabled: isDisabled,
+      isEnabled: !isReadOnly,
+      disabled: isReadOnly,
       value: value != null ? value : '',
+      displayEmpty: displayEmpty,
       SelectDisplayProps: {
         'aria-label': label
       },
       list: options,
-      additionalStyling: additionalStyling,
+      additionalStyling: Object.assign({
+        '&.Mui-disabled .MuiSvgIcon-root': {
+          display: 'none'
+        },
+        '&.Mui-disabled': {
+          color: 'inherit',
+          '& .MuiInput-input': {
+            WebkitTextFillColor: 'inherit'
+          }
+        }
+      }, additionalStyling),
       currentIndex: currentIndex > -1 ? currentIndex : undefined,
       renderValue: renderValue,
       onChange: function onChange(event) {
@@ -5899,7 +6089,8 @@ var WindForceSelect = function WindForceSelect(_ref) {
   var onChange = _ref.onChange,
     value = _ref.value,
     gridArea = _ref.gridArea,
-    options = _ref.options;
+    options = _ref.options,
+    isReadOnly = _ref.isReadOnly;
   var warningListOptions = React__default.useMemo(function () {
     return options.map(function (option) {
       return {
@@ -5968,6 +6159,7 @@ var WindForceSelect = function WindForceSelect(_ref) {
     onChange: onChange,
     renderOption: renderOption,
     renderValue: renderValue,
+    isReadOnly: isReadOnly,
     additionalStyling: {
       '& .MuiSvgIcon-root': {
         fill: arrowColor
@@ -5979,126 +6171,6 @@ var WindForceSelect = function WindForceSelect(_ref) {
   });
 };
 
-var windDirections = [{
-  value: 'NORTH',
-  label: function label(t) {
-    return t('maritime-direction-n');
-  }
-}, {
-  value: 'NORTH_TO_NORTHEAST',
-  label: function label(t) {
-    return t('maritime-direction-nne');
-  }
-}, {
-  value: 'NORTHEAST',
-  label: function label(t) {
-    return t('maritime-direction-ne');
-  }
-}, {
-  value: 'NORTHEAST_TO_NORTH',
-  label: function label(t) {
-    return t('maritime-direction-nen');
-  }
-}, {
-  value: 'EAST',
-  label: function label(t) {
-    return t('maritime-direction-e');
-  }
-}, {
-  value: 'EAST_TO_SOUTHEAST',
-  label: function label(t) {
-    return t('maritime-direction-ese');
-  }
-}, {
-  value: 'SOUTHEAST',
-  label: function label(t) {
-    return t('maritime-direction-se');
-  }
-}, {
-  value: 'SOUTHEAST_TO_SOUTH',
-  label: function label(t) {
-    return t('maritime-direction-ses');
-  }
-}, {
-  value: 'SOUTH',
-  label: function label(t) {
-    return t('maritime-direction-s');
-  }
-}, {
-  value: 'SOUTH_TO_SOUTHWEST',
-  label: function label(t) {
-    return t('maritime-direction-ssw');
-  }
-}, {
-  value: 'SOUTHWEST',
-  label: function label(t) {
-    return t('maritime-direction-sw');
-  }
-}, {
-  value: 'SOUTHWEST_TO_WEST',
-  label: function label(t) {
-    return t('maritime-direction-sww');
-  }
-}, {
-  value: 'WEST',
-  label: function label(t) {
-    return t('maritime-direction-w');
-  }
-}, {
-  value: 'WEST_TO_NORTHWEST',
-  label: function label(t) {
-    return t('maritime-direction-wnw');
-  }
-}, {
-  value: 'NORTHWEST',
-  label: function label(t) {
-    return t('maritime-direction-nw');
-  }
-}, {
-  value: 'NORTHWEST_TO_NORTH',
-  label: function label(t) {
-    return t('maritime-direction-nwn');
-  }
-}];
-var change = [{
-  value: 'NO_CHANGE',
-  label: function label(t) {
-    return t('maritime-no-change');
-  }
-}, {
-  value: 'BACKING',
-  label: function label(t) {
-    return t('maritime-backing');
-  }
-}, {
-  value: 'VEERING',
-  label: function label(t) {
-    return t('maritime-veering');
-  }
-}];
-var windForce = [{
-  level: WindForceLevel.extreme,
-  value: '12'
-}, {
-  level: WindForceLevel.extreme,
-  value: '11'
-}, {
-  level: WindForceLevel.extreme,
-  value: '10'
-}, {
-  level: WindForceLevel.severe,
-  value: '9'
-}, {
-  level: WindForceLevel.severe,
-  value: '8'
-}, {
-  level: WindForceLevel.moderate,
-  value: '7'
-}, {
-  level: WindForceLevel.moderate,
-  value: '6'
-}];
-
 var WarningListDragHandle = function WarningListDragHandle() {
   return jsx(CustomIconButton, {
     className: "handle",
@@ -6115,6 +6187,38 @@ var WarningListDragHandle = function WarningListDragHandle() {
   });
 };
 
+var getWindDirectionsFromConfig = function getWindDirectionsFromConfig(directionConfig, t) {
+  return directionConfig.map(function (direction) {
+    return {
+      value: direction.value,
+      label: t("maritime-direction-" + direction.value) || direction.label
+    };
+  });
+};
+var getWindForceFromConfig = function getWindForceFromConfig(forceConfig) {
+  if (forceConfig.maritimeLevelsSummer) {
+    return forceConfig.maritimeLevelsSummer.map(function (force) {
+      return {
+        value: force.windForce,
+        level: force.level
+      };
+    });
+  }
+  return forceConfig.maritimeLevelsWinter.map(function (force) {
+    return {
+      value: force.windForce,
+      level: force.level
+    };
+  });
+};
+var getChangeTypeFromConfig = function getChangeTypeFromConfig(changeConfig, t) {
+  return changeConfig.map(function (change) {
+    return {
+      value: change.key,
+      label: t("maritime-change-" + change.key) || change.label
+    };
+  });
+};
 var WarningListItem$1 = /*#__PURE__*/React__default.memo(function (_ref) {
   var warning = _ref.warning,
     areas = _ref.areas,
@@ -6123,12 +6227,15 @@ var WarningListItem$1 = /*#__PURE__*/React__default.memo(function (_ref) {
     onRemove = _ref.onRemove,
     onChange = _ref.onChange,
     onToggleSelectArea = _ref.onToggleSelectArea,
+    onSelectMultipleAreas = _ref.onSelectMultipleAreas,
     onRemoveArea = _ref.onRemoveArea,
+    isReadOnly = _ref.isReadOnly,
     _ref$shouldShowDistri = _ref.shouldShowDistricts,
-    shouldShowDistricts = _ref$shouldShowDistri === void 0 ? false : _ref$shouldShowDistri;
+    shouldShowDistricts = _ref$shouldShowDistri === void 0 ? false : _ref$shouldShowDistri,
+    maritimeConfig = _ref.maritimeConfig;
   var areasById = React__default.useMemo(function () {
     return new Map(areas.map(function (area) {
-      return [area.id, area];
+      return [area.districtName, area];
     }));
   }, [areas]);
   var assignedAreas = React__default.useMemo(function () {
@@ -6168,41 +6275,64 @@ var WarningListItem$1 = /*#__PURE__*/React__default.memo(function (_ref) {
   var handleAddClick = React__default.useCallback(function () {
     onAddClick(warning.id);
   }, [warning.id, onAddClick]);
-  var shouldDisableDirTo = warning.changeType === 'NO_CHANGE';
+  var shouldDisableDirTo = warning.changeType === 'NO_CHANGE' || isReadOnly;
+  var changeOptions = getChangeTypeFromConfig(maritimeConfig.changeType, t);
   return jsxs(StyledItem, {
     "data-testid": "maritime-warning",
-    children: [jsx(WarningListDragHandle, {}), jsx(WarningListSelect, {
+    children: [!isReadOnly && jsx(WarningListDragHandle, {}), jsx(WarningListSelect, {
       gridArea: "dirFrom",
       label: t('maritime-header-direction-from'),
-      options: windDirections,
+      options: getWindDirectionsFromConfig(maritimeConfig.windDirectionDefinition, t),
       onChange: handleChangeFromDirection,
-      value: warning.windDirectionFrom
+      value: warning.windDirectionFrom,
+      isReadOnly: isReadOnly
     }), jsx(WindForceSelect, {
       gridArea: "windForce",
       value: warning.windForce,
-      options: windForce,
-      onChange: handleChangeWindForce
+      options: getWindForceFromConfig(maritimeConfig.maritimeLevelDefinition),
+      onChange: handleChangeWindForce,
+      isReadOnly: isReadOnly
     }), jsx(AssignedAreas, {
       assignedAreas: assignedAreas,
       selectedAreaIds: selectedAreaIds,
       onAddClick: handleAddClick,
       onToggleSelectArea: onToggleSelectArea,
+      onSelectMultipleAreas: onSelectMultipleAreas,
       onDeleteClick: onRemoveArea,
-      shouldShowDistricts: shouldShowDistricts
+      shouldShowDistricts: shouldShowDistricts,
+      isReadOnly: isReadOnly
     }), jsx(WarningListSelect, {
       gridArea: "changeType",
       label: t('maritime-header-change'),
-      options: change,
+      options: changeOptions,
       onChange: handleChangeWindChangeType,
-      value: warning.changeType
+      value: warning.changeType,
+      isReadOnly: isReadOnly,
+      renderValue: function renderValue(value) {
+        if (value === '') {
+          return jsx(Typography, {
+            variant: "caption",
+            color: "textSecondary",
+            sx: {
+              alignSelf: 'center'
+            },
+            children: t('maritime-no-change-selected')
+          });
+        }
+        var option = changeOptions.find(function (item) {
+          return item.value === value;
+        });
+        return typeof (option == null ? void 0 : option.label) === 'function' ? option.label(t) : option == null ? void 0 : option.label;
+      },
+      displayEmpty: true
     }), jsx(WarningListSelect, {
       gridArea: "dirTo",
       label: t('maritime-header-direction-to'),
-      options: windDirections,
+      options: getWindDirectionsFromConfig(maritimeConfig.windDirectionDefinition, t),
       onChange: handleChangeToDirection,
       value: warning.windDirectionTo,
-      isDisabled: shouldDisableDirTo
-    }), jsx(CustomIconButton, {
+      isReadOnly: shouldDisableDirTo
+    }), !isReadOnly && jsx(CustomIconButton, {
       sx: {
         gridArea: 'delete',
         justifySelf: 'end',
@@ -6235,7 +6365,7 @@ var StyledItem = styled('div')(function (_ref2) {
     paddingInline: theme.spacing(0.25),
     // styling for small windows
     gridTemplateAreas: "\n        \"drag dirFrom    dirFrom windForce delete\"\n        \".    areas      areas   areas     .\"\n        \".    changeType dirTo dirTo       .\" \n    ",
-    gridTemplateColumns: '24px minmax(87px, 1fr) 1fr minmax(60px, 1fr) 24px'
+    gridTemplateColumns: '20px minmax(87px, 1fr) 1fr minmax(60px, 1fr) 20px'
   }, _ref3["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
     gridTemplateAreas: "\n        \"drag dirFrom windForce areas changeType dirTo delete\" \n    ",
     gridTemplateColumns: 'var(--grid-columns)'
@@ -6252,9 +6382,12 @@ var WarningList = function WarningList(_ref) {
     onRemoveArea = _ref.onRemoveArea,
     onChangeWarning = _ref.onChangeWarning,
     onToggleSelectArea = _ref.onToggleSelectArea,
+    onSelectMultipleAreas = _ref.onSelectMultipleAreas,
     onMoveWarning = _ref.onMoveWarning,
+    isReadOnly = _ref.isReadOnly,
     _ref$shouldShowDistri = _ref.shouldShowDistricts,
-    shouldShowDistricts = _ref$shouldShowDistri === void 0 ? false : _ref$shouldShowDistri;
+    shouldShowDistricts = _ref$shouldShowDistri === void 0 ? false : _ref$shouldShowDistri,
+    maritimeConfig = _ref.maritimeConfig;
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
   var onSort = React__default.useCallback(function (event) {
@@ -6266,7 +6399,8 @@ var WarningList = function WarningList(_ref) {
       display: 'flex',
       flexDirection: 'column',
       minHeight: 0,
-      '--grid-columns': '30px 150px 60px 2fr 100px 100px 1fr'
+      marginBottom: 1,
+      '--grid-columns': '30px 150px 60px 2fr 150px 150px 1fr'
     },
     children: [jsxs(Box, {
       sx: (_sx = {
@@ -6307,12 +6441,15 @@ var WarningList = function WarningList(_ref) {
           warning: warning,
           areas: areas,
           selectedAreaIds: selectedAreaIds,
+          isReadOnly: isReadOnly,
           onToggleSelectArea: onToggleSelectArea,
+          onSelectMultipleAreas: onSelectMultipleAreas,
           onAddClick: onAddSelectedAreas,
           onRemove: onRemoveWarning,
           onChange: onChangeWarning,
           onRemoveArea: onRemoveArea,
-          shouldShowDistricts: shouldShowDistricts
+          shouldShowDistricts: shouldShowDistricts,
+          maritimeConfig: maritimeConfig
         }, warning.id);
       })
     })]
@@ -6379,6 +6516,16 @@ function reducer(state, action) {
           selectedAreaIds: [].concat(state.selectedAreaIds, [action.id])
         });
       }
+    case 'selectMultipleAreas':
+      {
+        var newSelectedAreaIds = new Set([].concat(state.selectedAreaIds, action.ids));
+        if (newSelectedAreaIds.size === state.selectedAreaIds.length) {
+          return state;
+        }
+        return Object.assign({}, state, {
+          selectedAreaIds: Array.from(newSelectedAreaIds)
+        });
+      }
     case 'removeArea':
       {
         return Object.assign({}, state, {
@@ -6464,6 +6611,32 @@ function reducer(state, action) {
           modified: true
         });
       }
+    case 'mergeWarnings':
+      {
+        var clonedWarnings = new Set();
+        var mergedWarnings = state.warnings.reduce(function (acc, warning) {
+          var relatedWarningIndex = acc.findLastIndex(function (otherWarning) {
+            return warning.windDirectionFrom === otherWarning.windDirectionFrom && warning.windForce === otherWarning.windForce && warning.changeType === otherWarning.changeType && warning.windDirectionTo === otherWarning.windDirectionTo;
+          });
+          if (relatedWarningIndex > -1) {
+            var relatedWarning = acc[relatedWarningIndex];
+            // clone the warning to make sure React knows that it is a new warning
+            if (!clonedWarnings.has(relatedWarningIndex)) {
+              clonedWarnings.add(relatedWarningIndex);
+              var clonedRelatedWarning = Object.assign({}, relatedWarning, {
+                assignedAreaIds: [].concat(relatedWarning.assignedAreaIds, warning.assignedAreaIds)
+              });
+              return acc["with"](relatedWarningIndex, clonedRelatedWarning);
+            }
+            relatedWarning.assignedAreaIds = [].concat(relatedWarning.assignedAreaIds, warning.assignedAreaIds);
+            return acc;
+          }
+          return [].concat(acc, [warning]);
+        }, []);
+        return Object.assign({}, state, {
+          warnings: mergedWarnings
+        });
+      }
     case 'initialize':
       {
         if (action.warnings.length === 0) {
@@ -6474,6 +6647,12 @@ function reducer(state, action) {
           selectedAreaIds: []
         });
       }
+    case 'submitWarnings':
+      {
+        return Object.assign({}, state, {
+          modified: false
+        });
+      }
     default:
       {
         return state;
@@ -6487,36 +6666,46 @@ function useMaritimeWarningsFormState() {
 function useConfirmRetractDialog(_ref) {
   var areas = _ref.areas,
     warnings = _ref.warnings,
+    maritimeConfig = _ref.maritimeConfig,
     onRemoveWarning = _ref.onRemoveWarning;
   var confirmDialog = useConfirmationDialog();
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
-  var getLabelFromOption = React__default.useCallback(function (options, value) {
-    var option = options.find(function (option) {
-      return option.value === value;
+  var getLabelFromWindDirectionConfig = React__default.useCallback(function (directionConfig, value) {
+    var option = directionConfig.find(function (direction) {
+      return direction.value === value;
+    });
+    if (!option) {
+      return '';
+    }
+    return t("maritime-direction-" + option.value);
+  }, [t]);
+  var getLabelFromChangeConfig = React__default.useCallback(function (changeConfig, value) {
+    var option = changeConfig.find(function (change) {
+      return change.key === value;
     });
     if (!option) {
       return '';
     }
-    return typeof option.label === 'function' ? option.label(t) : option.label;
+    return t("maritime-change-" + option.key);
   }, [t]);
   var getWarningDescription = React__default.useCallback(function (warning) {
     if (!isPublishedWarning(warning)) {
       return t('maritime-retract-dialog-empty-warning-description');
     }
-    var windDirectionFromLabel = getLabelFromOption(windDirections, warning.windDirectionFrom);
+    var windDirectionFromLabel = getLabelFromWindDirectionConfig(maritimeConfig.windDirectionDefinition, warning.windDirectionFrom);
     var areasById = new Map(areas.map(function (area) {
-      return [area.id, area];
+      return [area.districtName, area];
     }));
     var areaLabels = warning.assignedAreaIds.map(function (areaId) {
-      return areasById.get(areaId).label;
+      return areasById.get(areaId).districtName;
     });
-    var changeToLabel = warning.changeType === 'NO_CHANGE' ? t('maritime-retract-dialog-no-change') : getLabelFromOption(change, warning.changeType) + " " + getLabelFromOption(windDirections, warning.windDirectionTo);
+    var changeToLabel = warning.changeType === 'NO_CHANGE' ? t('maritime-retract-dialog-no-change') : getLabelFromChangeConfig(maritimeConfig.changeType, warning.changeType) + " " + getLabelFromWindDirectionConfig(maritimeConfig.windDirectionDefinition, warning.windDirectionTo);
     var warningDescription = [windDirectionFromLabel + " " + t('maritime-windforce', {
       value: warning.windForce
     })].concat(areaLabels, [changeToLabel]).join(', ');
     return warningDescription + ". " + t('maritime-retract-dialog-description-suffix');
-  }, [areas, t, getLabelFromOption]);
+  }, [getLabelFromWindDirectionConfig, maritimeConfig.windDirectionDefinition, maritimeConfig.changeType, areas, t, getLabelFromChangeConfig]);
   return {
     onRemoveWarningWithConfirmation: React__default.useCallback(/*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(id) {
@@ -6605,14 +6794,118 @@ var isWarningsValid = function isWarningsValid(warnings) {
     return !isWarningEmpty(warning) && isWarningValid(warning);
   });
 };
+var getLevelFromWindForce = function getLevelFromWindForce(maritimeConfig, windForce) {
+  var _maritimeConfig$marit;
+  var period = maritimeConfig.maritimeLevelDefinition.maritimeLevelsSummer ? 'maritimeLevelsSummer' : 'maritimeLevelsWinter';
+  var levelInfo = (_maritimeConfig$marit = maritimeConfig.maritimeLevelDefinition) == null ? void 0 : _maritimeConfig$marit[period].find(function (level) {
+    return (level == null ? void 0 : level.windForce) === windForce;
+  });
+  return (levelInfo == null ? void 0 : levelInfo.level) || 'extreme';
+};
+var getType = function getType(domain) {
+  switch (domain) {
+    case 'coastalWaters':
+      return 'maritimeWarningCoastal';
+    case 'northSeaDistricts':
+    default:
+      return 'maritimeWarningNorthSea';
+  }
+};
+var mapItemsToMaritimeWarnings = function mapItemsToMaritimeWarnings(warnings, domain, maritimeConfig, editor) {
+  var type = getType(domain);
+  if (warnings.length === 1 && warnings[0].assignedAreaIds.length === 0) {
+    // 1 warning without any areas means cancel/withdraw all warnings
+    return [{
+      type: type,
+      editor: editor,
+      status: PublicWarningStatus.PUBLISHED,
+      warningDetail: {
+        areas: [],
+        domain: type
+      }
+    }];
+  }
+  return warnings.map(function (warning) {
+    return {
+      type: type,
+      editor: editor,
+      status: PublicWarningStatus.PUBLISHED,
+      warningDetail: {
+        phenomenon: 'wind',
+        validFrom: new Date().toISOString(),
+        validUntil: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
+        level: getLevelFromWindForce(maritimeConfig, warning.windForce || ''),
+        probability: 100,
+        areas: warning.assignedAreaIds.map(function (areaId) {
+          var areaDetails = maritimeConfig.districtList[domain].find(function (district) {
+            return district.districtName === areaId;
+          });
+          return {
+            objectName: areaId,
+            geoJSON: (areaDetails == null ? void 0 : areaDetails.geoJSON) || {
+              type: 'FeatureCollection',
+              features: []
+            }
+          };
+        }),
+        windDirectionFrom: warning.windDirectionFrom,
+        windForce: warning.windForce,
+        changeType: warning.changeType || 'NO_CHANGE',
+        windDirectionTo: warning.windDirectionTo,
+        descriptionOriginal: '',
+        descriptionTranslation: '',
+        domain: type
+      }
+    };
+  });
+};
+var mapMaritimeWarningsToItems = function mapMaritimeWarningsToItems(warnings) {
+  return warnings.map(function (warning) {
+    var _warning$warningDetai;
+    return {
+      id: warning.id || '',
+      assignedAreaIds: ((_warning$warningDetai = warning.warningDetail.areas) == null ? void 0 : _warning$warningDetai.map(function (area) {
+        return area.objectName;
+      })) || [],
+      windDirectionFrom: warning.warningDetail.windDirectionFrom,
+      windDirectionTo: warning.warningDetail.windDirectionTo,
+      windForce: warning.warningDetail.windForce,
+      changeType: warning.warningDetail.changeType,
+      validFrom: warning.warningDetail.validFrom,
+      validUntil: warning.warningDetail.validUntil
+    };
+  });
+};
+
+var MaritimeWarningAvatar = function MaritimeWarningAvatar(_ref) {
+  var editor = _ref.editor,
+    _ref$tooltipPlacement = _ref.tooltipPlacement,
+    tooltipPlacement = _ref$tooltipPlacement === void 0 ? 'bottom' : _ref$tooltipPlacement;
+  return jsx(CustomTooltip, {
+    title: "Editor: " + editor,
+    placement: tooltipPlacement,
+    children: jsx("span", {
+      children: jsx(Avatar, {
+        size: "small",
+        children: getInitials(editor)
+      })
+    })
+  });
+};
 
+var getWarningsValidity = function getWarningsValidity(t, warnings) {
+  var validFrom = warnings.length > 0 && warnings[0].validFrom ? dateUtils.dateToString(dateUtils.createDate(warnings[0].validFrom), dateUtils.DATE_FORMAT_NAME_OF_DAY_MONTH) : '';
+  var validUntil = warnings.length > 0 && warnings[0].validUntil ? dateUtils.dateToString(dateUtils.createDate(warnings[0].validUntil), dateUtils.DATE_FORMAT_NAME_OF_DAY_MONTH) : '';
+  return validFrom && validUntil ? "" + t('maritime-warning-validfrom') + validFrom + " - " + t('maritime-warning-validuntil') + validUntil : '';
+};
 var MaritimeWarningsForm = function MaritimeWarningsForm(_ref) {
-  var _sx, _sx2, _sx3;
+  var _sx, _sx2, _sx3, _sx4;
   var areas = _ref.areas,
     selectedAreaIds = _ref.selectedAreaIds,
     modified = _ref.modified,
     warnings = _ref.warnings,
     onToggleSelectArea = _ref.onToggleSelectArea,
+    onSelectMultipleAreas = _ref.onSelectMultipleAreas,
     onAddSelectedAreas = _ref.onAddSelectedAreas,
     onRemoveWarning = _ref.onRemoveWarning,
     onRemoveArea = _ref.onRemoveArea,
@@ -6621,20 +6914,29 @@ var MaritimeWarningsForm = function MaritimeWarningsForm(_ref) {
     onSubmit = _ref.onSubmit,
     onClear = _ref.onClear,
     onMoveWarning = _ref.onMoveWarning,
+    onToggleReadOnly = _ref.onToggleReadOnly,
+    isReadOnly = _ref.isReadOnly,
+    shouldHideEditorToggle = _ref.shouldHideEditorToggle,
     _ref$shouldShowDistri = _ref.shouldShowDistricts,
-    shouldShowDistricts = _ref$shouldShowDistri === void 0 ? false : _ref$shouldShowDistri;
+    shouldShowDistricts = _ref$shouldShowDistri === void 0 ? false : _ref$shouldShowDistri,
+    editor = _ref.editor,
+    error = _ref.error,
+    maritimeConfig = _ref.maritimeConfig,
+    _ref$lastUpdatedTime = _ref.lastUpdatedTime,
+    lastUpdatedTime = _ref$lastUpdatedTime === void 0 ? '' : _ref$lastUpdatedTime;
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
+  var showConfirmDialog = useConfirmationDialog();
   var disabledAreaIds = warnings.flatMap(function (warning) {
     return warning.assignedAreaIds;
   });
   var _useConfirmRetractDia = useConfirmRetractDialog({
       areas: areas,
       warnings: warnings,
+      maritimeConfig: maritimeConfig,
       onRemoveWarning: onRemoveWarning
     }),
     onRemoveWarningWithConfirmation = _useConfirmRetractDia.onRemoveWarningWithConfirmation;
-  var showConfirmDialog = useConfirmationDialog();
   var onClearWithConfirmation = React__default.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -6655,22 +6957,118 @@ var MaritimeWarningsForm = function MaritimeWarningsForm(_ref) {
     }, _callee);
   })), [onClear, t, showConfirmDialog]);
   var isValid = isWarningsValid(warnings);
-  return jsxs(Stack, {
-    direction: "column",
-    spacing: 3,
+  var onSwitchMode = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
+      var checked, isReadOnly;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            checked = event.target.checked;
+            isReadOnly = !checked;
+            if (!(modified && isReadOnly)) {
+              _context2.next = 5;
+              break;
+            }
+            _context2.next = 5;
+            return showConfirmDialog({
+              title: t('warning-view-mode-title'),
+              description: t('warning-view-mode-description'),
+              confirmLabel: t('warning-view-mode-confirm'),
+              cancelLabel: t('warning-dialog-cancel')
+            });
+          case 5:
+            onToggleReadOnly(isReadOnly);
+          case 6:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function onSwitchMode(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var validTimes = getWarningsValidity(t, warnings);
+  return jsxs(Box, {
     sx: (_sx = {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 1,
       height: '100%',
       containerName: 'maritime',
       containerType: 'inline-size',
-      padding: 2
+      padding: 2,
+      // in a dialog there is an additional empty footer that messes up styling. This hack fixes that.
+      '[role="dialog"] &': {
+        paddingBottom: 0
+      }
     }, _sx["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
       padding: 3
     }, _sx),
-    children: [jsx(AreaList, {
+    children: [error && jsx(AlertBanner, {
+      title: error.title,
+      severity: error.severity,
+      shouldClose: true
+    }), jsxs(Box, {
+      sx: (_sx2 = {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 1,
+        alignItems: 'center',
+        width: '100%'
+      }, _sx2["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
+        justifyContent: 'space-between'
+      }, _sx2),
+      children: [jsx(Typography, {
+        sx: {
+          color: 'geowebColors.captions.captionStatus.rgba',
+          fontSize: '10px',
+          lineHeight: '1.6',
+          letterSpacing: '0.33px',
+          minWidth: '300px'
+        },
+        children: validTimes
+      }), jsx(Box, {
+        sx: {
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 1,
+          alignItems: 'center',
+          height: '38px'
+        },
+        children: !shouldHideEditorToggle && jsxs(Fragment, {
+          children: [jsx(SwitchButton, {
+            inActiveLabel: t('warning-editor-user-viewer'),
+            activeLabel: t('warning-editor-user-editor'),
+            checked: !isReadOnly,
+            onChange: onSwitchMode
+          }), jsx(Box, {
+            sx: {
+              width: '16px',
+              marginLeft: 1
+            },
+            children: editor && jsx(MaritimeWarningAvatar, {
+              editor: editor
+            })
+          }), lastUpdatedTime && jsx(Box, {
+            sx: {
+              "float": 'left',
+              paddingTop: 0.5
+            },
+            children: jsx(LastUpdateTime, {
+              lastUpdateTime: lastUpdatedTime,
+              showRefreshButton: false
+            })
+          })]
+        })
+      })]
+    }), jsx(AreaList, {
       areas: areas,
       selected: selectedAreaIds,
       disabled: disabledAreaIds,
-      onClickItem: onToggleSelectArea
+      isReadOnly: isReadOnly,
+      onToggleSelectArea: onToggleSelectArea,
+      onSelectMultipleAreas: onSelectMultipleAreas
     }), jsx(WarningList, {
       warnings: warnings,
       areas: areas,
@@ -6679,10 +7077,13 @@ var MaritimeWarningsForm = function MaritimeWarningsForm(_ref) {
       onRemoveWarning: onRemoveWarningWithConfirmation,
       onChangeWarning: onChangeWarning,
       onToggleSelectArea: onToggleSelectArea,
+      onSelectMultipleAreas: onSelectMultipleAreas,
       onRemoveArea: onRemoveArea,
       onMoveWarning: onMoveWarning,
-      shouldShowDistricts: shouldShowDistricts
-    }), jsxs(Button, {
+      shouldShowDistricts: shouldShowDistricts,
+      isReadOnly: isReadOnly,
+      maritimeConfig: maritimeConfig
+    }), !isReadOnly && jsxs(Button, {
       onClick: onAddWarning,
       variant: "tertiary",
       size: "small",
@@ -6691,15 +7092,20 @@ var MaritimeWarningsForm = function MaritimeWarningsForm(_ref) {
         paddingInline: 2
       },
       children: [jsx(Add, {}), t('maritime-new-warning')]
-    }), jsxs(Stack, {
+    }), !isReadOnly && jsxs(Stack, {
       spacing: 2,
       direction: "row",
-      sx: (_sx2 = {}, _sx2["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
+      sx: (_sx3 = {}, _sx3["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
         position: 'absolute',
         bottom: 0,
         right: 0,
-        padding: 3
-      }, _sx2),
+        paddingInline: 2,
+        paddingBottom: 2,
+        // in a dialog there is an additional empty footer that messes up styling. This hack fixes that.
+        '[role="dialog"] &': {
+          paddingBottom: 0
+        }
+      }, _sx3),
       children: [jsx(Button, {
         onClick: onClearWithConfirmation,
         variant: "tertiary",
@@ -6711,11 +7117,11 @@ var MaritimeWarningsForm = function MaritimeWarningsForm(_ref) {
       }), jsx(Button, {
         variant: "primary",
         size: "small",
-        sx: (_sx3 = {
+        sx: (_sx4 = {
           width: '134px'
-        }, _sx3["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
+        }, _sx4["@container maritime (min-width: " + breakpoints.tablet + "px)"] = {
           marginLeft: '24px!important'
-        }, _sx3),
+        }, _sx4),
         disabled: !modified || !isValid,
         onClick: onSubmit,
         children: t('warning-button-publish')
@@ -6724,72 +7130,71 @@ var MaritimeWarningsForm = function MaritimeWarningsForm(_ref) {
   });
 };
 
-var areasByDomain = {
-  northSeaDistricts: [{
-    id: 'DOVER',
-    label: 'Dover'
-  }, {
-    id: 'THAMES',
-    label: 'Thames'
-  }, {
-    id: 'HUMBER',
-    label: 'Humber'
-  }, {
-    id: 'DOGGER',
-    label: 'Dogger'
-  }, {
-    id: 'GERMAN_BIGHT',
-    label: 'German Bight'
-  }],
-  coastalWaters: [{
-    id: 'VLISSINGEN',
-    label: 'Vlissingen'
-  }, {
-    id: 'ZIERIKZEE',
-    label: 'Zierikzee'
-  }, {
-    id: 'HOEK_VAN_HOLLAND',
-    label: 'Hoek van Holland'
-  }, {
-    id: 'IJMUIDEN',
-    label: 'IJmuiden'
-  }, {
-    id: 'TEXEL',
-    label: 'Texel'
-  }, {
-    id: 'HARLINGEN',
-    label: 'Harlingen'
-  }, {
-    id: 'ROTTUM',
-    label: 'Rottum'
-  }, {
-    id: 'DELFZIJL',
-    label: 'Delfzijl'
-  }, {
-    id: 'IJSSELMEER',
-    label: 'IJsselmeer'
-  }, {
-    id: 'MARKERMEER',
-    label: 'Markermeer'
-  }]
-};
-
 var MaritimeWarningsFormConnect = function MaritimeWarningsFormConnect(_ref) {
   var domain = _ref.domain,
     onPreventCloseView = _ref.onPreventCloseView,
     onModifyForm = _ref.onModifyForm;
-  var areas = areasByDomain[domain];
+  var _useWarningsTranslati = useWarningsTranslation(),
+    t = _useWarningsTranslati.t;
+  var _useAuthenticationCon = useAuthenticationContext$1(),
+    auth = _useAuthenticationCon.auth,
+    isLoggedIn = _useAuthenticationCon.isLoggedIn;
+  var confirmDialog = useConfirmationDialog();
+  var _useState = useState(),
+    error = _useState[0],
+    setError = _useState[1];
+  var domainLabel = React__default.useMemo(function () {
+    return domain === 'coastalWaters' ? t('maritime-domain-coastal') : t('maritime-domain-northsea');
+  }, [domain, t]);
+  var _useMaritimeWarningsC = useMaritimeWarningsConfig(),
+    maritimeConfig = _useMaritimeWarningsC.data,
+    isFetchingConfig = _useMaritimeWarningsC.isFetching,
+    configError = _useMaritimeWarningsC.error,
+    refetchConfig = _useMaritimeWarningsC.refetch;
+  var _usePublicWarnings = usePublicWarnings(),
+    data = _usePublicWarnings.data,
+    isFetchingWarnings = _usePublicWarnings.isFetching,
+    refetchWarnings = _usePublicWarnings.refetch,
+    dataUpdatedAt = _usePublicWarnings.dataUpdatedAt;
+  var _usePostMaritimeWarni = usePostMaritimeWarnings(),
+    postWarnings = _usePostMaritimeWarni.mutate,
+    publishError = _usePostMaritimeWarni.error;
+  var _useMutateMaritimeWar = useMutateMaritimeWarningsEditor(),
+    mutateEditor = _useMutateMaritimeWar.mutate,
+    editorError = _useMutateMaritimeWar.error;
+  var _useState2 = useState(isFetchingWarnings),
+    hasFetched = _useState2[0],
+    setHasFetched = _useState2[1];
+  React__default.useEffect(function () {
+    if (isFetchingWarnings) {
+      setHasFetched(true);
+    }
+  }, [isFetchingWarnings]);
+  var lastUpdateTime = dateUtils.dateToString(new Date(dataUpdatedAt), dateUtils.DATE_FORMAT_HOURS);
+  var areas = maritimeConfig == null ? void 0 : maritimeConfig.districtList[domain];
   var shouldShowDistricts = domain === 'northSeaDistricts';
+  var maritimeWarningsType = getType(domain);
   var _useMaritimeWarningsF = useMaritimeWarningsFormState(),
     state = _useMaritimeWarningsF[0],
     dispatch = _useMaritimeWarningsF[1];
+  var warningsFromApi = React__default.useMemo(function () {
+    return ((data == null ? void 0 : data.filter(function (warning) {
+      return warning.type === maritimeWarningsType && warning.status === 'PUBLISHED';
+    })) || []).reverse();
+  }, [data, maritimeWarningsType]);
+  var isNew = warningsFromApi.length === 0;
+  var editor = warningsFromApi && warningsFromApi.length > 0 ? warningsFromApi[0].editor : undefined;
+  var previousEditor = usePrevious(editor);
+  var isReadOnly = !isNew && editor !== (auth == null ? void 0 : auth.username);
+  var warningItemsFromApi = React__default.useMemo(function () {
+    return mapMaritimeWarningsToItems(warningsFromApi || []);
+  }, [warningsFromApi]);
   React__default.useEffect(function () {
-    // FIXME: replace this by warnings from api
     dispatch({
       type: 'initialize',
-      warnings: []
+      warnings: warningItemsFromApi
     });
-  }, [dispatch, domain, areas]);
+  }, [dispatch, warningItemsFromApi]);
   React__default.useEffect(function () {
     onPreventCloseView == null || onPreventCloseView(state.modified);
     if (onModifyForm) {
@@ -6810,6 +7215,14 @@ var MaritimeWarningsFormConnect = function MaritimeWarningsFormConnect(_ref) {
       });
     });
   }, [dispatch]);
+  var onSelectMultipleAreas = React__default.useCallback(function (ids) {
+    React__default.startTransition(function () {
+      dispatch({
+        type: 'selectMultipleAreas',
+        ids: ids
+      });
+    });
+  }, [dispatch]);
   var onAddSelectedAreas = React__default.useCallback(function (id) {
     React__default.startTransition(function () {
       dispatch({
@@ -6825,11 +7238,7 @@ var MaritimeWarningsFormConnect = function MaritimeWarningsFormConnect(_ref) {
         id: id
       });
     });
-    showSnackbar({
-      type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
-      key: 'maritime-retract-success'
-    });
-  }, [dispatch, showSnackbar]);
+  }, [dispatch]);
   var onAddWarning = React__default.useCallback(function () {
     React__default.startTransition(function () {
       dispatch({
@@ -6860,11 +7269,7 @@ var MaritimeWarningsFormConnect = function MaritimeWarningsFormConnect(_ref) {
         type: 'clearWarnings'
       });
     });
-    showSnackbar({
-      type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
-      key: 'maritime-clear-success'
-    });
-  }, [dispatch, showSnackbar]);
+  }, [dispatch]);
   var onMoveWarning = React__default.useCallback(function (oldIndex, newIndex) {
     dispatch({
       type: 'moveWarning',
@@ -6872,26 +7277,169 @@ var MaritimeWarningsFormConnect = function MaritimeWarningsFormConnect(_ref) {
       newIndex: newIndex
     });
   }, [dispatch]);
-  var onSubmit = React__default.useCallback(function () {
-    // eslint-disable-next-line no-console
-    console.log(state.warnings);
-    // FIXME: add logic for submission
-  }, [state]);
-  return jsx(MaritimeWarningsForm, {
-    areas: areas,
-    selectedAreaIds: state.selectedAreaIds,
-    warnings: state.warnings,
-    modified: state.modified,
-    onToggleSelectArea: onToggleSelectArea,
-    onAddSelectedAreas: onAddSelectedAreas,
-    onRemoveWarning: onRemoveWarning,
-    onRemoveArea: onRemoveArea,
-    onAddWarning: onAddWarning,
-    onChangeWarning: onChangeWarning,
-    onMoveWarning: onMoveWarning,
-    onClear: onClear,
-    onSubmit: onSubmit,
-    shouldShowDistricts: shouldShowDistricts
+  var onSubmit = React__default.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var nextState, maritimeWarnings;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          dispatch({
+            type: 'mergeWarnings'
+          });
+          nextState = reducer(state, {
+            type: 'mergeWarnings'
+          });
+          maritimeWarnings = mapItemsToMaritimeWarnings(nextState.warnings, domain, maritimeConfig, auth == null ? void 0 : auth.username);
+          postWarnings(maritimeWarnings, {
+            onSuccess: function onSuccess() {
+              dispatch({
+                type: 'submitWarnings'
+              });
+            }
+          });
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [dispatch, state, domain, maritimeConfig, auth == null ? void 0 : auth.username, postWarnings]);
+  var onToggleReadOnly = React__default.useCallback(function (isReadOnly) {
+    var message = isReadOnly ? t('maritime-editor-off', {
+      domain: domainLabel
+    }) : t('maritime-editor-on', {
+      domain: domainLabel
+    });
+    var updateEditor = function updateEditor(force) {
+      return mutateEditor({
+        domain: getType(domain),
+        isEditor: !isReadOnly,
+        force: force
+      }, {
+        onError: function onError(e) {
+          if (e.cause === 409) {
+            void refetchWarnings();
+            void confirmDialog({
+              title: t('warning-edit-mode-title'),
+              description: t('warning-edit-mode-description'),
+              confirmLabel: t('warning-edit-mode-confirm'),
+              cancelLabel: t('warning-dialog-cancel')
+            }).then(function () {
+              return void updateEditor(true);
+            }); // force update editor
+          } else {
+            void refetchWarnings();
+          }
+        },
+        onSuccess: function () {
+          var _onSuccess = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+            return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+              while (1) switch (_context2.prev = _context2.next) {
+                case 0:
+                  void refetchWarnings();
+                  showSnackbar({
+                    type: snackbarTypes.SnackbarMessageType.VERBATIM_MESSAGE,
+                    message: message
+                  });
+                case 2:
+                case "end":
+                  return _context2.stop();
+              }
+            }, _callee2);
+          }));
+          function onSuccess() {
+            return _onSuccess.apply(this, arguments);
+          }
+          return onSuccess;
+        }()
+      });
+    };
+    void updateEditor(false);
+  }, [t, domainLabel, mutateEditor, domain, refetchWarnings, confirmDialog, showSnackbar]);
+  useEffect(function () {
+    if (publishError) {
+      setError({
+        title: publishError.message,
+        severity: 'error'
+      });
+    } else if (editorError && editorError.cause !== 409) {
+      setError({
+        title: editorError.message,
+        severity: 'error'
+      });
+    } else {
+      setError(undefined);
+    }
+  }, [publishError, editorError]);
+  var shouldGiveEditorWarning = React__default.useCallback(function (newEditor, oldEditor) {
+    var oldEditorIsYou = oldEditor && oldEditor === (auth == null ? void 0 : auth.username);
+    if (oldEditorIsYou && newEditor && newEditor !== oldEditor) {
+      setError({
+        title: t('maritime-editor-off', {
+          domain: domainLabel
+        }),
+        severity: 'warning'
+      });
+    }
+  }, [auth == null ? void 0 : auth.username, domainLabel, t]);
+  useEffect(function () {
+    // Only give editor warning when the change in editor is from a refetch
+    if (hasFetched) {
+      setHasFetched(false);
+      shouldGiveEditorWarning(editor, previousEditor);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  if (!isLoggedIn) {
+    return jsx(AlertBanner, {
+      title: t('error-auth-login')
+    });
+  }
+  if (configError) {
+    return jsx(AlertBanner, {
+      title: t('maritime-config-error'),
+      info: configError.message,
+      actionButtonProps: {
+        title: t('error-title-retry'),
+        onClick: function onClick() {
+          void refetchConfig();
+        }
+      }
+    });
+  }
+  return jsxs(Fragment, {
+    children: [(isFetchingConfig || isFetchingWarnings || !maritimeConfig) && jsx(LinearProgress, {
+      "data-testid": "loading-bar",
+      color: "secondary",
+      sx: {
+        position: 'absolute',
+        width: '100%',
+        top: 0
+      }
+    }), !maritimeConfig ? jsxs("div", {
+      children: [" ", t('maritime-loading-config')]
+    }) : jsx(MaritimeWarningsForm, {
+      areas: areas || [],
+      selectedAreaIds: state.selectedAreaIds,
+      warnings: state.warnings,
+      modified: state.modified,
+      isReadOnly: isReadOnly,
+      shouldShowDistricts: shouldShowDistricts,
+      editor: editor,
+      onToggleSelectArea: onToggleSelectArea,
+      onSelectMultipleAreas: onSelectMultipleAreas,
+      onAddSelectedAreas: onAddSelectedAreas,
+      onRemoveWarning: onRemoveWarning,
+      onRemoveArea: onRemoveArea,
+      onAddWarning: onAddWarning,
+      onChangeWarning: onChangeWarning,
+      onMoveWarning: onMoveWarning,
+      onToggleReadOnly: onToggleReadOnly,
+      onClear: onClear,
+      onSubmit: onSubmit,
+      maritimeConfig: maritimeConfig,
+      lastUpdatedTime: lastUpdateTime,
+      error: error,
+      shouldHideEditorToggle: isNew
+    })]
   });
 };
 
@@ -7657,12 +8205,14 @@ var Form = function Form(_ref5) {
       })
     });
   };
+  if (isMaritimeWarning) {
+    return getFormContent();
+  }
   return jsxs(ContainerWrapper, {
     children: [jsxs(ContainerFormWrapper, {
       isReadOnly: isReadOnly,
       ref: ref,
       "data-testid": "scroll-container",
-      addPadding: !isMaritimeWarning,
       children: [errors && jsx(Box, {
         sx: {
           marginBottom: 2
@@ -7676,7 +8226,7 @@ var Form = function Form(_ref5) {
       }), getFormContent(), jsx(DraftFieldHelper, {}), jsx(ReactHookFormHiddenInput, {
         name: "id"
       })]
-    }), warningType !== 'maritimeWarningCoastal' && warningType !== 'maritimeWarningNorthSea' && formState !== 'cancel' && !isReadOnly && jsx(Box, {
+    }), formState !== 'cancel' && !isReadOnly && jsx(Box, {
       sx: {
         padding: '24px 10px 14px 10px',
         position: 'absolute',
@@ -7761,7 +8311,7 @@ var Form = function Form(_ref5) {
           })]
         })
       })
-    }), warningType !== 'maritimeWarningCoastal' && warningType !== 'maritimeWarningNorthSea' && formState === 'cancel' && jsx(Box, {
+    }), formState === 'cancel' && jsx(Box, {
       sx: {
         padding: '24px 10px 14px 10px',
         position: 'absolute',
@@ -7816,7 +8366,7 @@ var PublicWarningsForm = function PublicWarningsForm(props) {
   var defaultValues = selectedAviationProduct || getFormData(publicWarningDetails, object);
   return jsx(ReactHookFormProvider, {
     options: Object.assign({}, defaultFormOptions, {
-      mode: 'onSubmit',
+      mode: selectedAviationProduct ? defaultFormOptions.mode : 'onSubmit',
       defaultValues: defaultValues
     }),
     children: jsx(Form, Object.assign({}, props))
@@ -8788,18 +9338,15 @@ var useWarnings = function useWarnings(disabled) {
     sigmetWarnings = _useSigmetList.data,
     refetchSigmet = _useSigmetList.refetch,
     isFetchingSigmet = _useSigmetList.isFetching;
-  var warningType = useSelector(getWarningType);
-  var _useProductConfig = useProductConfig(warningType, false),
-    aviationConfig = _useProductConfig.data;
   var combinedWarnings = useMemo(function () {
     var transformedSigmets = (sigmetWarnings == null ? void 0 : sigmetWarnings.map(function (sigmet) {
-      return transformSigmetToWarningFormat(sigmet, aviationConfig);
+      return transformSigmetToWarningFormat(sigmet);
     })) || [];
     var transformedAirmets = (airmetWarnings == null ? void 0 : airmetWarnings.map(function (airmet) {
-      return transformAirmetToWarningFormat(airmet, aviationConfig);
+      return transformAirmetToWarningFormat(airmet);
     })) || [];
     return concat(publicWarnings || [], transformedSigmets, transformedAirmets);
-  }, [sigmetWarnings, airmetWarnings, publicWarnings, aviationConfig]);
+  }, [sigmetWarnings, airmetWarnings, publicWarnings]);
   var refetchWarnings = function refetchWarnings() {
     void refetchPublicWarnings();
     void refetchAirmet();
@@ -8869,8 +9416,8 @@ var PublicWarningsFormDialogConnect = function PublicWarningsFormDialogConnect(_
   var selectedWarningId = useSelector(getSelectedWarningId);
   var selectedWarningObject = useSelector(getPublicWarning);
   var warningType = useSelector(getWarningType);
-  var selectedWarning = combinedWarnings == null ? void 0 : combinedWarnings.find(function (w) {
-    return w.id === selectedWarningId;
+  var selectedWarning = combinedWarnings == null ? void 0 : combinedWarnings.find(function (warning) {
+    return warning.id === selectedWarningId;
   });
   var _useAuthenticationCon = useAuthenticationContext$1(),
     auth = _useAuthenticationCon.auth;
@@ -9466,7 +10013,18 @@ var WarningListItemMenu = function WarningListItemMenu(_ref) {
     onWithdrawWarning = _ref$onWithdrawWarnin === void 0 ? function () {} : _ref$onWithdrawWarnin,
     _ref$onActionAviation = _ref.onActionAviationWarning,
     onActionAviationWarning = _ref$onActionAviation === void 0 ? function () {} : _ref$onActionAviation,
+    _ref$onActionMaritime = _ref.onActionMaritimeWarning,
+    onActionMaritimeWarning = _ref$onActionMaritime === void 0 ? function () {} : _ref$onActionMaritime,
     t = _ref.t;
+  if (warning.type === 'maritimeWarningCoastal' || warning.type === 'maritimeWarningNorthSea') {
+    return [{
+      text: t('warning-list-button-update'),
+      action: function action() {
+        return onActionMaritimeWarning(warning, MaritimeWarningAction.UPDATE);
+      },
+      icon: jsx(Edit, {})
+    }];
+  }
   var duplicate = {
     text: t('warning-list-button-duplicate'),
     action: function action() {
@@ -9550,7 +10108,7 @@ var WarningListItemMenu = function WarningListItemMenu(_ref) {
         case ProductStatus.DRAFT:
           return [aviationDuplicate, aviationDelete];
         case ProductStatus.PUBLISHED:
-          if (warning.type !== 'public' && (isInstanceOfCancelSigmet(warning.sigmetAirmetDetails) || isInstanceOfCancelAirmet(warning.sigmetAirmetDetails))) {
+          if ((warning.type === 'airmet' || warning.type === 'sigmet') && (isInstanceOfCancelSigmet(warning.sigmetAirmetDetails) || isInstanceOfCancelAirmet(warning.sigmetAirmetDetails))) {
             return [];
           }
           return [{
@@ -9580,7 +10138,7 @@ var WarningListItemMenu = function WarningListItemMenu(_ref) {
         case ProductStatus.CANCELLED:
           return [];
         case ProductStatus.EXPIRED:
-          if (warning.type !== 'public' && (isInstanceOfCancelSigmet(warning.sigmetAirmetDetails) || isInstanceOfCancelAirmet(warning.sigmetAirmetDetails))) {
+          if ((warning.type === 'airmet' || warning.type === 'sigmet') && (isInstanceOfCancelSigmet(warning.sigmetAirmetDetails) || isInstanceOfCancelAirmet(warning.sigmetAirmetDetails))) {
             return [];
           }
           return [{
@@ -9598,7 +10156,7 @@ var WarningListItemMenu = function WarningListItemMenu(_ref) {
   }
 };
 
-var _excluded = ["warning", "activeWarningId", "highlightedItem", "onSelectWarning", "onEditWarning", "onDeleteWarning", "onDeleteReviewWarning", "onExpireWarning", "onWithdrawWarning", "onActionAviationWarning"];
+var _excluded = ["warning", "activeWarningId", "highlightedItem", "onSelectWarning", "onEditWarning", "onDeleteWarning", "onDeleteReviewWarning", "onExpireWarning", "onWithdrawWarning", "onActionAviationWarning", "onActionMaritimeWarning"];
 var renderLevelText = function renderLevelText(levelString) {
   if (!levelString) {
     return null;
@@ -9635,10 +10193,10 @@ var renderStatusIcon = function renderStatusIcon(warning, status) {
       icon: icon
     });
   };
-  if (warning.productStatus === ProductStatus.PUBLISHED && warning.type !== 'public' && (isCancelAirmet(warning.sigmetAirmetDetails) || isCancelSigmet(warning.sigmetAirmetDetails))) {
+  if (warning.productStatus === ProductStatus.PUBLISHED && (warning.type === 'airmet' || warning.type === 'sigmet') && (isCancelAirmet(warning.sigmetAirmetDetails) || isCancelSigmet(warning.sigmetAirmetDetails))) {
     return getStatusTag("Cnls " + (isCancelAirmet(warning.sigmetAirmetDetails) ? warning.sigmetAirmetDetails.cancelsAirmetSequenceId : warning.sigmetAirmetDetails.cancelsSigmetSequenceId), 'red');
   }
-  if (warning.productStatus === ProductStatus.CANCELLED && warning.type !== 'public') {
+  if (warning.productStatus === ProductStatus.CANCELLED && (warning.type === 'airmet' || warning.type === 'sigmet')) {
     return getStatusTag('Cnld', 'red');
   }
   switch (status) {
@@ -9695,12 +10253,14 @@ var WarningListItem = function WarningListItem(_ref) {
     onWithdrawWarning = _ref$onWithdrawWarnin === void 0 ? function () {} : _ref$onWithdrawWarnin,
     _ref$onActionAviation = _ref.onActionAviationWarning,
     onActionAviationWarning = _ref$onActionAviation === void 0 ? function () {} : _ref$onActionAviation,
+    _ref$onActionMaritime = _ref.onActionMaritimeWarning,
+    onActionMaritimeWarning = _ref$onActionMaritime === void 0 ? function () {} : _ref$onActionMaritime,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useWarningsTranslati = useWarningsTranslation(),
     t = _useWarningsTranslati.t;
   var phenomenonDetails = allPhenomenaDict[warning.warningDetail.phenomenon];
   var objectNameText = ((_warning$warningDetai = warning.warningDetail.areas) == null || (_warning$warningDetai = _warning$warningDetai[0]) == null ? void 0 : _warning$warningDetai.objectName) || '-';
-  var objectHoverText = warning.type !== 'public' ? warning.sigmetAirmetDetails.firName : objectNameText;
+  var objectHoverText = warning.type === 'airmet' || warning.type === 'sigmet' ? warning.sigmetAirmetDetails.firName : objectNameText;
   var _useOverflowCheck = useOverflowCheck(objectNameText),
     objectNameRef = _useOverflowCheck.ref;
   var phenomenonText = phenomenonDetails != null && phenomenonDetails.translationKey ? t(phenomenonDetails.translationKey) : '-';
@@ -9749,7 +10309,8 @@ var WarningListItem = function WarningListItem(_ref) {
         onDeleteWarning: onDeleteWarning,
         onExpireWarning: onExpireWarning,
         onWithdrawWarning: onWithdrawWarning,
-        onActionAviationWarning: onActionAviationWarning
+        onActionAviationWarning: onActionAviationWarning,
+        onActionMaritimeWarning: onActionMaritimeWarning
       }),
       buttonIcon: jsx(Options, {})
     }),
@@ -10057,9 +10618,9 @@ var NewWarningButton = function NewWarningButton(_ref) {
 var groupWarningsOnStatus = function groupWarningsOnStatus(warnings, sortState) {
   var key = sortState.key,
     direction = sortState.direction;
-  var sortedWarnings = warnings.sort(function (a, b) {
-    var dateStringA = key === 'lastUpdatedTime' ? a[key] : a.warningDetail[key];
-    var dateStringB = key === 'lastUpdatedTime' ? b[key] : b.warningDetail[key];
+  var sortedWarnings = warnings.sort(function (warningA, warningB) {
+    var dateStringA = key === 'lastUpdatedTime' ? warningA[key] : warningA.warningDetail[key];
+    var dateStringB = key === 'lastUpdatedTime' ? warningB[key] : warningB.warningDetail[key];
     return (dateStringB == null ? void 0 : dateStringB.localeCompare(dateStringA || '')) || 0;
   });
   if (direction === 'asc') {
@@ -10118,6 +10679,8 @@ var PublicWarningList = function PublicWarningList(_ref) {
     onWithdrawWarning = _ref$onWithdrawWarnin === void 0 ? function () {} : _ref$onWithdrawWarnin,
     _ref$onActionAviation = _ref.onActionAviationWarning,
     onActionAviationWarning = _ref$onActionAviation === void 0 ? function () {} : _ref$onActionAviation,
+    _ref$onActionMaritime = _ref.onActionMaritimeWarning,
+    onActionMaritimeWarning = _ref$onActionMaritime === void 0 ? function () {} : _ref$onActionMaritime,
     hoveredFeatureId = _ref.hoveredFeatureId,
     expandedSections = _ref.expandedSections,
     setExpandedSections = _ref.setExpandedSections;
@@ -10391,7 +10954,8 @@ var PublicWarningList = function PublicWarningList(_ref) {
                   activeWarningId: selectedWarningId,
                   onExpireWarning: onExpireWarning,
                   onWithdrawWarning: onWithdrawWarning,
-                  onActionAviationWarning: onActionAviationWarning
+                  onActionAviationWarning: onActionAviationWarning,
+                  onActionMaritimeWarning: onActionMaritimeWarning
                 }, key);
               }
             });
@@ -10637,9 +11201,15 @@ var useWarningFilters = function useWarningFilters(warnings, onUpdateFilters, sa
     }
   };
   var byFilterState = useCallback(function (warning) {
-    var levelDomain = ['SIG', 'AIR'].find(function (dom) {
-      return dom === warning.warningDetail.level;
-    }) ? Domain.aviation : Domain["public"];
+    var levelDomain = function () {
+      if (['SIG', 'AIR'].includes(warning.warningDetail.level)) {
+        return Domain.aviation;
+      }
+      if (warning.type === 'maritimeWarningCoastal' || warning.type === 'maritimeWarningNorthSea') {
+        return Domain.maritime;
+      }
+      return Domain["public"];
+    }();
     if (!savedDomainFilter[levelDomain]) {
       return false;
     }
@@ -10759,6 +11329,8 @@ var PublicWarningListConnect = function PublicWarningListConnect(_ref) {
   var panelId = _ref.panelId,
     presetFilterState = _ref.presetFilterState;
   var updatePublicWarningEditor = useMutatePublicWarningEditor();
+  var _useMutateMaritimeWar = useMutateMaritimeWarningsEditor(),
+    updateMaritimeWarningEditor = _useMutateMaritimeWar.mutateAsync;
   var _useMutateDeleteWarni = useMutateDeleteWarning(),
     deletePublicWarning = _useMutateDeleteWarni.mutateAsync;
   var _useSaveWarning = useSaveWarning(),
@@ -10825,8 +11397,12 @@ var PublicWarningListConnect = function PublicWarningListConnect(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
-  var selectWarning = function selectWarning(publicWarning) {
-    void openPublicWarningDialog('readonly', publicWarning);
+  var selectWarning = function selectWarning(warning) {
+    if ((warning == null ? void 0 : warning.type) === 'maritimeWarningCoastal' || (warning == null ? void 0 : warning.type) === 'maritimeWarningNorthSea') {
+      handleMaritimeProductClick(warning, MaritimeWarningAction.SELECT);
+    } else {
+      void openPublicWarningDialog('readonly', warning);
+    }
   };
   var createWarning = function createWarning(warningType) {
     void openPublicWarningDialog('', undefined, warningType);
@@ -10996,6 +11572,54 @@ var PublicWarningListConnect = function PublicWarningListConnect(_ref) {
         }
     }
   };
+  var editMaritimeWarning = /*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4(warning) {
+      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            if (!(warning && auth != null && auth.username && !warning.editor)) {
+              _context4.next = 9;
+              break;
+            }
+            _context4.prev = 1;
+            _context4.next = 4;
+            return updateMaritimeWarningEditor({
+              domain: warning.type,
+              isEditor: true
+            });
+          case 4:
+            _context4.next = 8;
+            break;
+          case 6:
+            _context4.prev = 6;
+            _context4.t0 = _context4["catch"](1);
+          case 8:
+            refetchWarnings();
+          case 9:
+            void openPublicWarningDialog('', undefined, warning.type);
+          case 10:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4, null, [[1, 6]]);
+    }));
+    return function editMaritimeWarning(_x8) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+  var handleMaritimeProductClick = function handleMaritimeProductClick(warning, actionType) {
+    if (!warning) {
+      return;
+    }
+    switch (actionType) {
+      case MaritimeWarningAction.SELECT:
+        void openPublicWarningDialog('', undefined, warning.type);
+        break;
+      case MaritimeWarningAction.UPDATE:
+        void editMaritimeWarning(warning);
+        break;
+    }
+  };
   var openSnackbar = function openSnackbar(message) {
     dispatch(snackbarActions.openSnackbar({
       type: snackbarTypes.SnackbarMessageType.VERBATIM_MESSAGE,
@@ -11138,7 +11762,8 @@ var PublicWarningListConnect = function PublicWarningListConnect(_ref) {
       onRefetchWarnings: refetchWarnings,
       filterHookState: filterHookState,
       hoveredFeatureId: hoveredFeatureId,
-      onActionAviationWarning: handleAviationProductClick
+      onActionAviationWarning: handleAviationProductClick,
+      onActionMaritimeWarning: handleMaritimeProductClick
     }), confirmDialogOptions && jsx(ConfirmDeleteWarningDialog, {
       onClose: function onClose() {
         return setConfirmDialogOptions(undefined);