[OSDEV-1746] Linked My Claimed Facilities page to SLC

doc/release/RELEASE-NOTES.md

@@ -63,6 +63,7 @@ Also was added sanitization on the server side by using the `Django-Bleach` libr
 ### What's new
 * [OSDEV-1814](https://opensupplyhub.atlassian.net/browse/OSDEV-1814) - Added toggle switch button for production location info page to render additional data if necessary. If toggle switch button is inactive (default behavior), additional data won't be send to the server along with name, address and country.
 * [OSDEV-1782](https://opensupplyhub.atlassian.net/browse/OSDEV-1782) - Added a confirmation dialog window that appears when a user tries to reject a moderation event. The dialog includes a WYSIWYG text editor where entering a message of at least 30 characters is required to confirm the rejection. If a user does not enter the required number of characters, the 'Reject' button is disabled, and a tooltip with a clear message appears when the mouse hovers over it.
+* [OSDEV-1786](https://opensupplyhub.atlassian.net/browse/OSDEV-1786) - Linked "My Claimed Facilities" page to SLC if no claimed production locations found, changed search button text.
 * [OSDEV-1607](https://opensupplyhub.atlassian.net/browse/OSDEV-1607) - Enabled SLC flow.
 
 ### Release instructions:

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { MemoryRouter, Route } from "react-router-dom";
+import renderWithProviders from '../../util/testUtils/renderWithProviders';
+import ClaimedFacilitiesList from '../../components/ClaimedFacilitiesList';
+import {
+    fetchClaimedFacilities,
+    clearClaimedFacilities,
+} from '../../actions/claimedFacilities';
+import { claimedFacilitiesRoute } from '../../util/constants.jsx'
+
+jest.mock('../../actions/claimedFacilities', () => {
+    const actualActions = jest.requireActual('../../actions/claimedFacilities');
+    return {
+        ...actualActions,
+        fetchClaimedFacilities: jest.fn(),
+        clearClaimedFacilities: jest.fn(),
+    };
+});
+
+describe('ClaimedFacilitiesList', () => {
+    const renderComponent = () => {
+        const preloadedState = {
+            claimedFacilities: {
+                data: [],
+                fetching: false
+            }
+        };
+
+        return renderWithProviders(
+            <MemoryRouter initialEntries={[claimedFacilitiesRoute]}>
+                <Route
+                    path={claimedFacilitiesRoute}
+                    component={() => <ClaimedFacilitiesList />}
+                />
+            </MemoryRouter>,
+            { preloadedState }
+        );
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        fetchClaimedFacilities.mockReturnValue(() => Promise.resolve());
+        clearClaimedFacilities.mockReturnValue(() => Promise.resolve());
+    })
+
+    test('renders the button with correct text and href if no claimed production locations are available', () => {
+        const { getByRole } = renderComponent();
+
+        const button = getByRole('button', { name: /Find My Production Location/i });
+        expect(button).toBeInTheDocument();
+
+        expect(button).toHaveTextContent('Find My Production Location');
+
+        expect(button).toHaveAttribute('href', '/contribute/single-location?tab=name-address');
+    });
+});
+

src/react/src/components/ClaimedFacilitiesList.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
 import { arrayOf, bool, func, string } from 'prop-types';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import Typography from '@material-ui/core/Typography';
@@ -13,6 +14,7 @@ import {
 } from '../actions/claimedFacilities';
 
 import { facilityClaimsListPropType } from '../util/propTypes';
+import { contributeProductionLocationRoute } from '../util/constants';
 
 const styles = Object.freeze({
     searchButton: Object.freeze({
@@ -46,10 +48,9 @@ function ClaimedFacilitiesList({
     }
 
     if (data.length === 0) {
-        window.console.log(fetching, data);
         return (
             <div>
-                <Typography variant="body" style={{ padding: '10px 0' }}>
+                <Typography variant="body1" style={{ padding: '10px 0' }}>
                     You do not have any approved facility claims. Search for
                     your facility and make a request to claim it. Claiming your
                     facility will enable you to add business information,
@@ -59,11 +60,11 @@ function ClaimedFacilitiesList({
                 <Button
                     variant="contained"
                     color="primary"
+                    component={Link}
                     style={styles.searchButton}
-                    to="/"
-                    href="/"
+                    to={`${contributeProductionLocationRoute}?tab=name-address`}
                 >
-                    Search
+                    Find My Production Location
                 </Button>
             </div>
         );