[OSDEV-1365] SLC: Integrate collecting contribution data page

doc/release/RELEASE-NOTES.md

@@ -36,9 +36,21 @@ This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html
     - Connected GET `v1/production-locations`.
     - Routing between pages `Production Location Search`,`Search returned no results`, `Production Location Information`, `Search results`, and `I don't see my Location` pop-up is configured.
     - Max result limit set to 100.
+* [OSDEV-1365](https://opensupplyhub.atlassian.net/browse/OSDEV-1365) - SLC: Integrate collecting contribution data page.
+* [OSDEV-1370](https://opensupplyhub.atlassian.net/browse/OSDEV-1370) - SLC: Connect Backend API submission with "Thank for Submitting" screen
+    - Integrated `POST /v1/production-locations/` in `/contribute/production-location/info/` page.
+    - Integrated `PATCH /v1/production-locations/` in `/contribute/production-location/{os_id}/info/` page.
+    - Production location info page is now rendered using two routes: /contribute/production-location/info/ and /contribute/production-location/{os_id}/info/. First route for creating new production location, second is for updating existing one.
+    - Implemented error popup on error response for `PATCH | POST /v1/production-locations/`.
+    - Implemented error popup on error response for `GET /v1/moderation-events/{moderation_id}`.
+    - Integrated "Thank for Submitting" modal dialog. When popup is appeared, path parameter `{moderation-id}` will be attached to `/contribute/production-location/{os_id}/info/` or `/contribute/production-location/info/`.
+    - Implemented temporary saving of moderation events in local storage for a seamless user experience.
+    - Created separate mobile and desktop layouts for "Thank for Submitting" modal dialog.
+    - Created link to claim from "Thank for Submitting" modal dialog only if production location is available for claim and moderation event is not pending.
+    - Implemented serializing and validation production location fields before passing to the "Thank for Submitting" modal dialog.
+    - Refactored routing between search results page and production location info page. Search parameters are now stored in the Redux state, so the 'Go Back' button in production location info page will lead to the previous search.
 * [OSDEV-1558](https://opensupplyhub.atlassian.net/browse/OSDEV-1558) - Added a new field, `action_type`, to the moderation event. This data appears on the Contribution Record page when a moderator creates a new location or matches it to an existing one.
 
-
 ### Release instructions:
 * Ensure that the following commands are included in the `post_deployment` command:
     * `migrate`

src/django/api/tests/test_production_locations_create.py

@@ -98,7 +98,8 @@ def test_default_throttling_is_applied(self, mock_get):
                 response_body_dict.get('created_at'),
                 stringified_created_at
             )
-            self.assertEqual(len(response_body_dict), 3)
+            self.assertIn("cleaned_data", response_body_dict)
+            self.assertEqual(len(response_body_dict), 4)
 
         # Now simulate the 31st request, which should be throttled.
         throttled_response = self.client.post(
@@ -205,7 +206,8 @@ def test_moderation_event_created_with_valid_data(
             response_moderation_id,
             str(moderation_event.uuid)
         )
-        self.assertEqual(len(response_body_dict), 3)
+        self.assertIn("cleaned_data", response_body_dict)
+        self.assertEqual(len(response_body_dict), 4)
 
     @patch('api.geocoding.requests.get')
     def test_moderation_event_not_created_with_invalid_data(

src/django/api/tests/test_production_locations_partial_update.py

@@ -139,7 +139,8 @@ def test_default_throttling_is_applied(self, mock_get):
                 response_body_dict.get('os_id'),
                 self.production_location.id
             )
-            self.assertEqual(len(response_body_dict), 4)
+            self.assertIn("cleaned_data", response_body_dict)
+            self.assertEqual(len(response_body_dict), 5)
 
         # Now simulate the 31st request, which should be throttled.
         throttled_response = self.client.patch(
@@ -269,7 +270,8 @@ def test_moderation_event_created_with_valid_data(
             response_body_dict.get('os_id'),
             self.production_location.id
         )
-        self.assertEqual(len(response_body_dict), 4)
+        self.assertIn("cleaned_data", response_body_dict)
+        self.assertEqual(len(response_body_dict), 5)
 
     @patch('api.geocoding.requests.get')
     def test_moderation_event_not_created_with_invalid_data(

src/django/api/views/v1/production_locations.py

@@ -184,7 +184,8 @@ def create(self, request):
             {
                 'moderation_id': result.moderation_event.uuid,
                 'moderation_status': result.moderation_event.status,
-                'created_at': result.moderation_event.created_at
+                'created_at': result.moderation_event.created_at,
+                'cleaned_data': result.moderation_event.cleaned_data,
             },
             status=result.status_code
         )
@@ -238,7 +239,8 @@ def partial_update(self, request, pk=None):
                 'os_id': result.os.id,
                 'moderation_id': result.moderation_event.uuid,
                 'moderation_status': result.moderation_event.status,
-                'created_at': result.moderation_event.created_at
+                'created_at': result.moderation_event.created_at,
+                'cleaned_data': result.moderation_event.cleaned_data,
             },
             status=result.status_code
         )

src/react/src/App.css

@@ -626,6 +626,18 @@ hr {
   align-items: center;
 }
 
+.mobile-dialog-close-button {
+  border: 2px solid white !important;
+  border-radius: 50% !important;
+  color: white !important;
+  padding: 7px !important;
+  position: fixed !important;
+  right: 0;
+  top: 140px;
+  margin-right: 48px !important;
+  z-index: 10000 !important;
+}
+
 @media (max-width: 600px) {
   .user-profile-title-bar {
     flex-direction: column;

src/react/src/Routes.jsx

@@ -33,6 +33,7 @@ import ContributeProductionLocation from './components/Contribute/ContributeProd
 import SearchByOsIdResult from './components/Contribute/SearchByOsIdResult';
 import SearchByNameAndAddressResult from './components/Contribute/SearchByNameAndAddressResult';
 import ProductionLocationInfo from './components/Contribute/ProductionLocationInfo';
+import withProductionLocationSubmit from './components/Contribute/HOC/withProductionLocationSubmit';
 
 import { sessionLogin } from './actions/auth';
 import { fetchFeatureFlags } from './actions/featureFlags';
@@ -60,9 +61,18 @@ import {
     contributeProductionLocationRoute,
     searchByOsIdResultRoute,
     searchByNameAndAddressResultRoute,
-    productionLocationInfoRoute,
+    productionLocationInfoRouteCreate,
+    productionLocationInfoRouteUpdate,
 } from './util/constants';
 
+// Pre-wrapping components outside of Routes to prevent redundant re-renders on component mount
+const WrappedProductionLocationInfoUpdate = withProductionLocationSubmit(
+    ProductionLocationInfo,
+);
+const WrappedProductionLocationInfoCreate = withProductionLocationSubmit(
+    ProductionLocationInfo,
+);
+
 class Routes extends Component {
     componentDidMount() {
         window.addEventListener('resize', () =>
@@ -184,8 +194,17 @@ class Routes extends Component {
                                 />
                                 <Route
                                     exact
-                                    path={productionLocationInfoRoute}
-                                    component={ProductionLocationInfo}
+                                    path={productionLocationInfoRouteUpdate}
+                                    component={
+                                        WrappedProductionLocationInfoUpdate
+                                    }
+                                />
+                                <Route
+                                    exact
+                                    path={productionLocationInfoRouteCreate}
+                                    component={
+                                        WrappedProductionLocationInfoCreate
+                                    }
                                 />
                                 <Route exact path="/about/processing">
                                     <ExternalRedirect

src/react/src/__tests__/components/ConfirmNotFoundLocationDialog.test.js

@@ -2,7 +2,7 @@ import React from "react";
 import renderWithProviders from "../../util/testUtils/renderWithProviders";
 import ConfirmNotFoundLocationDialog from "../../components/Contribute/ConfirmNotFoundLocationDialog";
 import history from "../../util/history";
-import { contributeProductionLocationRoute, productionLocationInfoRoute } from "../../util/constants";
+import { contributeProductionLocationRoute, productionLocationInfoRouteCommon } from "../../util/constants";
 
 jest.mock("../../util/history", () => ({
     push: jest.fn(),
@@ -72,9 +72,7 @@ describe("ConfirmNotFoundLocationDialog component", () => {
 
         expect(mockHandleConfirmDialogClose).toHaveBeenCalledTimes(1);
         expect(mockClearLocations).toHaveBeenCalledTimes(1);
-        expect(history.push).toHaveBeenCalledWith(
-            productionLocationInfoRoute,
-        );
+        expect(history.push).toHaveBeenCalledWith(productionLocationInfoRouteCommon);
     });
 
     test("closes the dialog when the close button is clicked", () => {