[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/DashboardContributionRecord.test.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import DashboardContributionRecord from '../../components/Dashboard/DashboardContributionRecord';
+import renderWithProviders from '../../util/testUtils/renderWithProviders';
+import { waitFor } from '@testing-library/react';
+
+describe('DashboardContributionRecord component', () => {
+  const routeProps = {
+    match: {
+        params: {
+            moderationID: '1',
+        },
+    },
+  };
+  const defaultProps = {
+    event: {},
+    potentialMatches: [],
+    fetchEventError: 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 eventFetching is true', () => {
+    const {getByRole} = renderComponent({ eventFetching: 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', async () => {
+    const {getByRole} = renderComponent({eventFetching: false});
+    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 });
+
+    await waitFor(() => {
+      expect(createButton).not.toBeDisabled();
+      expect(rejectButton).not.toBeDisabled();
+      expect(claimButton).not.toBeDisabled();
+    });
+
+  });
+
+  test('renders the "No potential matches found" block if no potential matches', () => {
+    const {getByText} = renderComponent();
+
+    expect(getByText('No potential matches found')).toBeInTheDocument();
+  });
+
+  test('renders the loading spinner', () => {
+    const {getByRole} = renderComponent({ eventFetching: true });
+
+    expect(getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  test('should render event data when provided', async () => {
+    const event = {
+      moderation_id: 14,
+      created_at: '2024-11-17T11:33:20.287Z',
+      updated_at: '2024-12-18T21:30:20.187Z',
+      os_id: 'CN2021250D1DTU7',
+      cleaned_data: {
+          name: 'Eco Friendly Plastics Test',
+          address: '764 Main St, Manhattan, NY - USA',
+          country: {
+              name: 'Germany',
+              alpha_2: 'DE',
+              alpha_3: 'DEU',
+              numeric: '286',
+          },
+      },
+      contributor_id: 0,
+      contributor_name: 'Green Solutions Corp Test',
+      request_type: 'CREATE',
+      source: 'API',
+      moderation_status: 'PENDING',
+      moderation_decision_date: null,
+      claim_id: 0,
+    };
+    const { container } = renderComponent({ event });
+
+    await waitFor(() => {
+      const preElement = container.querySelector("pre");
+      expect(preElement).toBeInTheDocument();
+    });
+  });
+
+
+  test('should render potential matches when available', async () => {
+    const potentialMatches = [
+      {
+          os_id: 'CN2031250H1DTN7',
+          name: 'Test name INC Test',
+          address: '495 Main St, Manhattan, NY - US',
+          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',
+      },
+    ];
+    const {getByText}= renderComponent({potentialMatches});
+
+    await waitFor(() => {
+      expect(getByText('Name: Test name INC NEW')).toBeInTheDocument();
+      expect(getByText('Address: 1523 Main St, Manhattan, NY - USA')).toBeInTheDocument();
+      expect(getByText('Claimed Status: unclaimed')).toBeInTheDocument();
+      expect(getByText('Potential Matches (1)')).toBeInTheDocument();
+    });
+  });
+});

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

@@ -41,7 +41,6 @@ describe('DashboardModerationQueueListTable component', () => {
             source: 'API',
         },
     ];
-
     const paginatedModerationEvents = [
         ...sampleModerationEvents,
         {
@@ -150,7 +149,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();
@@ -172,4 +171,4 @@ describe('DashboardModerationQueueListTable component', () => {
         const { getByText } = renderComponent({ events: [] });
         expect(getByText(/0-0 of 0/)).toBeInTheDocument();
     });
-});
+});

src/react/src/actions/dashboardContributionRecord.js

@@ -0,0 +1,132 @@
+import { createAction } from 'redux-act';
+import { logErrorAndDispatchFailure } from '../util/util';
+
+export const startFetchingSingleModerationEvent = createAction(
+    'START_FETCHING_SINGLE_MODERATION_EVENT',
+);
+export const failFetchingSingleModerationEvent = createAction(
+    'FAIL_FETCHING_SINGLE_MODERATION_EVENT',
+);
+export const completeFetchingSingleModerationEvent = createAction(
+    'COMPLETE_FETCHING_SINGLE_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',
+);
+export const cleanupContributionRecord = createAction(
+    'CLEANUP_CONTRIBUTION_RECORD',
+);
+
+// TODO: Remove mock data and replace with actual API call as part of https://opensupplyhub.atlassian.net/browse/OSDEV-1347
+const eventMockData = {
+    moderation_id: 12,
+    created_at: '2024-06-13T15:30:20.287Z',
+    updated_at: '2024-09-20T11:35:20.287Z',
+    os_id: 'FN2071250D1DTN7',
+    cleaned_data: {
+        name: 'Eco Test Friendly Plastics',
+        address: '4999 Main St, Manhattan, NY - USA',
+        country: {
+            name: 'Germany',
+            alpha_2: 'DE',
+            alpha_3: 'DEU',
+            numeric: '276',
+        },
+    },
+    contributor_id: 0,
+    contributor_name: 'Green Test 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: 'CY2021280D1DTN7',
+        name: 'Test name INC NEW',
+        address: '1523 Main St, Manhattan, NY - USA',
+        sector: ['Apparel'],
+        parent_company: 'ASI TEST GLOBAL LIMITED',
+        product_type: ['Accessories'],
+        location_type: [],
+        processing_type: ['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 fetchSingleModerationEvent(moderationID) {
+    return async dispatch => {
+        dispatch(startFetchingSingleModerationEvent());
+        // 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(completeFetchingSingleModerationEvent(data)),
+            )
+            .catch(err =>
+                dispatch(
+                    logErrorAndDispatchFailure(
+                        err,
+                        'An error prevented fetching moderation event',
+                        failFetchingSingleModerationEvent,
+                    ),
+                ),
+            );
+    };
+}
+
+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

@@ -17,6 +17,7 @@ import DashboardApiBlock from './DashboardApiBlock';
 import DashboardLinkToOsId from './DashboardLinkToOsId';
 import DashboardGeocoder from './DashboardGeocoder';
 import DashboardModerationQueue from './Dashboard/DashboardModerationQueue';
+import DashboardContributionRecord from './Dashboard/DashboardContributionRecord';
 import FeatureFlag from './FeatureFlag';
 import RouteNotFound from './RouteNotFound';
 
@@ -38,6 +39,7 @@ import {
     dashboardGeocoderRoute,
     dashboardLinkOsIdRoute,
     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>
@@ -222,6 +225,13 @@ function Dashboard({ userWithAccessHasSignedIn, fetchingSessionSignIn }) {
                                 'Moderation Queue',
                             )}
                         />
+                        <Route
+                            exact
+                            path={dashboardContributionRecordRoute}
+                            render={makeClickableDashboardLinkFn(
+                                'Contribution Record',
+                            )}
+                        />
                     </Switch>
                 }
             >
@@ -256,6 +266,11 @@ function Dashboard({ userWithAccessHasSignedIn, fetchingSessionSignIn }) {
                         path={dashboardModerationQueueRoute}
                         component={DashboardModerationQueue}
                     />
+                    <Route
+                        exact
+                        path={dashboardContributionRecordRoute}
+                        component={DashboardContributionRecord}
+                    />
                     <Route
                         exact
                         path={dashboardClaimsDetailsRoute}