[OSDEV-1116] Implement contribution record page

doc/release/RELEASE-NOTES.md

@@ -36,6 +36,7 @@ This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html
 * [OSDEV-1335](https://opensupplyhub.atlassian.net/browse/OSDEV-1335) - Fixed the assertion in the test for the `country.rb` filter of the "production locations" Logstash pipeline. The main issue was with the evaluation of statements in the Ruby block. Since only the last statement is evaluated in a Ruby block, all the checks were grouped into one chain of logical statements and returned as a `result` variable at the end.
 
 ### What's new
+* [OSDEV-1116](https://opensupplyhub.atlassian.net/browse/OSDEV-1116) - A new Contribution Record Page has been developed to enable quick identification and moderation of contributions. This page includes two main sections: Moderation Event Data and Potential Matches, along with a set of buttons designed to facilitate the moderation process.
 * [OSDEV-1120](https://opensupplyhub.atlassian.net/browse/OSDEV-1120) - A new Moderation Queue Dashboard page has been introduced, featuring three essential components:
     * Moderation Events Table: Allows users to view and manage moderation events more effectively.
     * Filtering Options: Multiple filter fields enable users to customize the displayed events based on different criteria, making it easier to find specific events.

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import DashboardContributionRecord from '../../components/Dashboard/DashboardContributionRecord';
+import renderWithProviders from '../../util/testUtils/renderWithProviders';
+
+describe('DashboardContributionRecord component', () => {
+  const routeProps = {
+    match: {
+        params: {
+            moderationID: '1',
+        },
+    },
+  };
+  const defaultProps = {
+    event: {},
+    potentialMatches: [],
+    error: null,
+    fetchPotentialMatchError: null,
+  };
+
+  const renderComponent = (props = {}) => renderWithProviders(
+    <DashboardContributionRecord {...defaultProps} {...routeProps} {...props}/>
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('should render the CreateButton', () => {
+    const {getByText} = renderComponent();
+
+    expect(getByText('Create New Location')).toBeInTheDocument();
+  });
+
+  test('should render the RejectButton', () => {
+    const {getByText} = renderComponent();
+
+    expect(getByText('Reject Contribution')).toBeInTheDocument();
+  });
+
+  test('should render the ClaimButton', () => {
+    const {getByText} = renderComponent();
+
+    expect(getByText('Go to Claim')).toBeInTheDocument();
+  });
+
+  test('should disable button when fetching is true', () => {
+    const {getByRole} = renderComponent({ fetching: true });
+    const createButton = getByRole('button', { name: /Create New Location/i });
+    const rejectButton = getByRole('button', { name: /Reject Contribution/i });
+    const claimButton = getByRole('button', { name: /Go to Claim/i });
+
+    expect(createButton).toBeDisabled();
+    expect(rejectButton).toBeDisabled();
+    expect(claimButton).toBeDisabled();
+  });
+
+  test('should enable button when fetching is false', () => {
+    const {getByRole} = renderComponent({fetching: false,moderationID :'2'});
+    const createButton = getByRole('button', { name: /Create New Location/i });
+    const rejectButton = getByRole('button', { name: /Reject Contribution/i  });
+    const claimButton = getByRole('button', { name: /Go to Claim/i });
+
+    expect(createButton.getAttribute("disabled")).toBe('');
+    expect(rejectButton.getAttribute("disabled")).toBe('');
+    expect(claimButton.getAttribute("disabled")).toBe('');
+  });
+
+  test('renders the "No potential matches found" block if no potential matches', () => {
+    const {getByText} = renderComponent();
+
+    expect(getByText('No potential matches found')).toBeInTheDocument();
+  });
+
+
+  it('renders the loading spinner', () => {
+    const {getByRole} = renderComponent({ fetching: true });
+
+    expect(getByRole('progressbar')).toBeInTheDocument();
+  });
+
+
+});

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

@@ -41,7 +41,7 @@ describe('DashboardModerationQueueListTable component', () => {
             source: 'API',
         },
     ];
-    
+
     const paginatedModerationEvents = [
         ...sampleModerationEvents,
         {
@@ -150,7 +150,7 @@ describe('DashboardModerationQueueListTable component', () => {
 
         expect(getByText(/1-5 of 6/)).toBeInTheDocument();
         expect(getByText(/rows per page/i)).toBeInTheDocument();
-        
+
         fireEvent.click(getByText('5'));
         fireEvent.click(getByText('10'));
         expect(getByText(/1-6 of 6/)).toBeInTheDocument();

src/react/src/actions/dashboardContributionRecord.js

@@ -0,0 +1,129 @@
+import { createAction } from 'redux-act';
+import { logErrorAndDispatchFailure } from '../util/util';
+
+export const startFetchingModerationEvent = createAction(
+    'START_FETCHING_MODERATION_EVENT',
+);
+export const failFetchingModerationEvent = createAction(
+    'FAIL_FETCHING_MODERATION_EVENT',
+);
+export const completeFetchingModerationEvent = createAction(
+    'COMPLETE_FETCHING_MODERATION_EVENT',
+);
+export const startFetchingPotentialMatches = createAction(
+    'START_FETCHING_POTENTIAL_MATCHES',
+);
+export const failFetchingPotentialMatches = createAction(
+    'FAIL_FETCHING_POTENTIAL_MATCHES',
+);
+export const completeFetchingPotentialMatches = createAction(
+    'COMPLETE_FETCHING_POTENTIAL_MATCHES',
+);
+
+// TODO: Remove mock data and replace with actual API call as part of https://opensupplyhub.atlassian.net/browse/OSDEV-1347
+const eventMockData = {
+    moderation_id: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
+    created_at: '2024-10-17T11:30:20.287Z',
+    updated_at: '2024-10-18T11:30:20.287Z',
+    os_id: 'CN2021250D1DTN7',
+    cleaned_data: {
+        name: 'Eco Friendly Plastics',
+        address: '435 Main St, Manhattan, NY - USA',
+        country: {
+            name: 'Germany',
+            alpha_2: 'DE',
+            alpha_3: 'DEU',
+            numeric: '276',
+        },
+    },
+    contributor_id: 0,
+    contributor_name: 'Green Solutions Corp',
+    request_type: 'CREATE',
+    source: 'API',
+    moderation_status: 'PENDING',
+    moderation_decision_date: null,
+    claim_id: 0,
+};
+
+// TODO: Remove mock data and replace with actual API call as part  of /v1/production-locations endpoint
+const potentialMatchesMockData = [
+    {
+        os_id: 'CN2021250D1DTN7',
+        name: 'Test name INC',
+        address: '435 Main St, Manhattan, NY - USA',
+        sector: ['Apparel'],
+        parent_company: 'ASI GLOBAL LIMITED',
+        product_type: ['Accessories'],
+        location_type: [],
+        processing_type: ['Final Product Assembly'],
+        number_of_workers: {
+            min: 0,
+            max: 0,
+        },
+        coordinates: {
+            lat: 0,
+            lng: 0,
+        },
+        local_name: '',
+        description: '',
+        business_url: '',
+        minimum_order_quantity: '',
+        average_lead_time: '',
+        percent_female_workers: 0,
+        affiliations: [],
+        certifications_standards_regulations: [],
+        historical_os_id: [],
+        country: {
+            name: 'Germany',
+            alpha_2: 'DE',
+            alpha_3: 'DEU',
+            numeric: '276',
+        },
+        claim_status: 'unclaimed',
+    },
+];
+
+// eslint-disable-next-line no-unused-vars
+export function fetchModerationEvent(moderationID) {
+    return async dispatch => {
+        dispatch(startFetchingModerationEvent());
+
+        // TODO: Replace the mock implementation with an actual API call as part of https://opensupplyhub.atlassian.net/browse/OSDEV-1347
+        return new Promise(resolve => {
+            setTimeout(() => resolve({ data: eventMockData }), 1000);
+        })
+            .then(({ data }) => dispatch(completeFetchingModerationEvent(data)))
+            .catch(err =>
+                dispatch(
+                    logErrorAndDispatchFailure(
+                        err,
+                        'An error prevented fetching moderation event',
+                        failFetchingModerationEvent,
+                    ),
+                ),
+            );
+    };
+}
+
+export function fetchPotentialMatches() {
+    return async dispatch => {
+        dispatch(startFetchingPotentialMatches());
+
+        // TODO: Replace the mock implementation with an actual API call as part of /v1/production-locations endpoint
+        return new Promise(resolve => {
+            setTimeout(() => resolve({ data: potentialMatchesMockData }), 1000);
+        })
+            .then(({ data }) =>
+                dispatch(completeFetchingPotentialMatches(data)),
+            )
+            .catch(err =>
+                dispatch(
+                    logErrorAndDispatchFailure(
+                        err,
+                        'An error prevented fetching potential matches',
+                        failFetchingPotentialMatches,
+                    ),
+                ),
+            );
+    };
+}

src/react/src/components/Dashboard.jsx

@@ -16,7 +16,8 @@ import DashboardActivityReports from './DashboardActivityReports';
 import DashboardApiBlock from './DashboardApiBlock';
 import DashboardLinkToOsId from './DashboardLinkToOsId';
 import DashboardGeocoder from './DashboardGeocoder';
-import DashboardModerationQueue from './Dashboard/DashboardModerationQueue';
+// import DashboardModerationQueue from './Dashboard/DashboardModerationQueue';
+// import DashboardContributionRecord from './Dashboard/DashboardContributionRecord';
 import FeatureFlag from './FeatureFlag';
 import RouteNotFound from './RouteNotFound';
 
@@ -37,7 +38,8 @@ import {
     dashboardActivityReportsRoute,
     dashboardGeocoderRoute,
     dashboardLinkOsIdRoute,
-    dashboardModerationQueueRoute,
+    // dashboardModerationQueueRoute,
+    // dashboardContributionRecordRoute,
 } from '../util/constants';
 
 import AppGrid from './AppGrid';
@@ -95,6 +97,7 @@ function Dashboard({ userWithAccessHasSignedIn, fetchingSessionSignIn }) {
             </FeatureFlag>
             <Link to={dashboardDeleteFacilityRoute}>Delete a Facility</Link>
             <Link to={dashboardMergeFacilitiesRoute}>Merge Two Facilities</Link>
+            {/* <Link to={dashboardModerationQueueRoute}>Moderation Queue</Link> */}
             <Link to={dashboardAdjustFacilityMatchesRoute}>
                 Adjust Facility Matches
             </Link>
@@ -215,13 +218,20 @@ function Dashboard({ userWithAccessHasSignedIn, fetchingSessionSignIn }) {
                             path={dashboardRoute}
                             render={() => 'Dashboard'}
                         />
-                        <Route
+                        {/* <Route
                             exact
                             path={dashboardModerationQueueRoute}
                             render={makeClickableDashboardLinkFn(
                                 'Moderation Queue',
                             )}
-                        />
+                        /> */}
+                        {/* <Route
+                            exact
+                            path={dashboardContributionRecordRoute}
+                            render={makeClickableDashboardLinkFn(
+                                'Contribution Record',
+                            )}
+                        /> */}
                     </Switch>
                 }
             >
@@ -251,11 +261,16 @@ function Dashboard({ userWithAccessHasSignedIn, fetchingSessionSignIn }) {
                         path={dashboardUpdateFacilityLocationRoute}
                         component={DashboardUpdateFacilityLocation}
                     />
-                    <Route
+                    {/* <Route
                         exact
                         path={dashboardModerationQueueRoute}
                         component={DashboardModerationQueue}
                     />
+                    <Route
+                        exact
+                        path={dashboardContributionRecordRoute}
+                        component={DashboardContributionRecord}
+                    /> */}
                     <Route
                         exact
                         path={dashboardClaimsDetailsRoute}