[OSDEV-2374] Implement claim banner with status and cta support

doc/release/RELEASE-NOTES.md

@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html
     * Previously opened facility pages at `/facilities/:osID` will redirect to `/production-locations/:osID` after page refresh.
     * When the feature flag is disabled, accessing `/production-locations/:osID` routes will result in a "Not found" page with no automatic redirection to the legacy `/facilities/:osID` route.
 * [OSDEV-2353](https://opensupplyhub.atlassian.net/browse/OSDEV-2353) - Created basic layout components for new Production Location page redesign.
+* [OSDEV-2374](https://opensupplyhub.atlassian.net/browse/OSDEV-2374) - Created UI for Claim status banner.
 
 ### Release instructions
 * Ensure that the following commands are included in the `post_deployment` command:

src/react/src/__tests__/components/ProductionLocationClaimFlag.test.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { screen } from '@testing-library/react';
+import renderWithProviders from '../../util/testUtils/renderWithProviders';
+import ProductionLocationClaimFlag from '../../components/ProductionLocation/Heading/ClaimFlag/ClaimFlag';
+
+describe('ProductionLocation ClaimFlag', () => {
+    const defaultProps = {
+        osId: 'US202510850SQCV',
+        isClaimed: false,
+        isPending: false,
+        isEmbed: false,
+    };
+
+    test('renders without crashing', () => {
+        renderWithProviders(
+            <Router>
+                <ProductionLocationClaimFlag
+                    {...defaultProps}
+                    isClaimed
+                />
+            </Router>,
+        );
+
+        const banner = screen.getByTestId('claim-banner');
+        expect(banner).toBeInTheDocument();
+    });
+
+    test('shows CLAIMED PROFILE when claimed', () => {
+        renderWithProviders(
+            <Router>
+                <ProductionLocationClaimFlag
+                    {...defaultProps}
+                    isClaimed
+                />
+            </Router>,
+        );
+
+        const banner = screen.getByTestId('claim-banner');
+        expect(banner).toHaveTextContent('CLAIMED PROFILE');
+    });
+
+    test('shows unclaimed message when not claimed', () => {
+        renderWithProviders(
+            <Router>
+                <ProductionLocationClaimFlag {...defaultProps} />
+            </Router>,
+        );
+
+        const banner = screen.getByTestId('claim-banner');
+        expect(banner).toHaveTextContent(
+            'This production location has not been claimed',
+        );
+    });
+
+    test('shows claim link when not claimed and not pending', () => {
+        renderWithProviders(
+            <Router>
+                <ProductionLocationClaimFlag {...defaultProps} />
+            </Router>,
+        );
+
+        const link = screen.getByRole('link', {
+            name: /I want to claim this production location/i,
+        });
+        expect(link).toBeInTheDocument();
+    });
+
+    test('shows pending claim message when pending', () => {
+        renderWithProviders(
+            <Router>
+                <ProductionLocationClaimFlag
+                    {...defaultProps}
+                    isPending
+                />
+            </Router>,
+        );
+
+        const banner = screen.getByTestId('claim-banner');
+        expect(banner).toHaveTextContent(
+            'There is a pending claim for this production location',
+        );
+    });
+
+    test('returns null when embed is true', () => {
+        renderWithProviders(
+            <Router>
+                <ProductionLocationClaimFlag
+                    {...defaultProps}
+                    isEmbed
+                />
+            </Router>,
+        );
+
+        const banner = screen.queryByTestId('claim-banner');
+        expect(banner).not.toBeInTheDocument();
+    });
+
+    test('shows claimed-by line when claimed with contributor and date', () => {
+        const claimInfo = {
+            contributor: { name: 'Acme Corp' },
+            approved_at: '2023-06-15T12:00:00Z',
+        };
+
+        renderWithProviders(
+            <Router>
+                <ProductionLocationClaimFlag
+                    {...defaultProps}
+                    isClaimed
+                    claimInfo={claimInfo}
+                />
+            </Router>,
+        );
+
+        expect(screen.getByText(/Claimed by/)).toBeInTheDocument();
+        expect(screen.getByText(/Acme Corp/)).toBeInTheDocument();
+    });
+});

src/react/src/__tests__/components/ProductionLocationClosureStatus.test.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { screen } from '@testing-library/react';
+import PropTypes from 'prop-types';
+import renderWithProviders from '../../util/testUtils/renderWithProviders';
+import ClosureStatus from '../../components/ProductionLocation/Heading/ClosureStatus/ClosureStatus';
+
+jest.mock('../../components/FeatureFlag', () => {
+    const MockFeatureFlag = ({ children }) => <>{children}</>;
+    MockFeatureFlag.propTypes = { children: PropTypes.node };
+    MockFeatureFlag.defaultProps = { children: null };
+    return MockFeatureFlag;
+});
+
+describe('ProductionLocation ClosureStatus', () => {
+    const clearFacility = jest.fn();
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('returns null when there is no activity report', () => {
+        const data = {
+            properties: {},
+        };
+
+        renderWithProviders(
+            <Router>
+                <ClosureStatus data={data} clearFacility={clearFacility} />
+            </Router>,
+        );
+
+        expect(screen.queryByText('Status pending')).not.toBeInTheDocument();
+        expect(
+            screen.queryByText(/This facility may be/),
+        ).not.toBeInTheDocument();
+    });
+
+    test('returns null when report exists but not pending and not closed', () => {
+        const data = {
+            properties: {
+                activity_reports: [{ status: 'RESOLVED' }],
+                is_closed: false,
+            },
+        };
+
+        renderWithProviders(
+            <Router>
+                <ClosureStatus data={data} clearFacility={clearFacility} />
+            </Router>,
+        );
+
+        expect(screen.queryByText('Status pending')).not.toBeInTheDocument();
+        expect(
+            screen.queryByText(/This facility is closed/),
+        ).not.toBeInTheDocument();
+    });
+
+    test('renders pending message when report status is PENDING', () => {
+        const data = {
+            properties: {
+                activity_reports: [
+                    { status: 'PENDING', closure_state: 'closed' },
+                ],
+                is_closed: false,
+            },
+        };
+
+        renderWithProviders(
+            <Router>
+                <ClosureStatus data={data} clearFacility={clearFacility} />
+            </Router>,
+        );
+
+        expect(
+            screen.getByText(/This facility may be closed\./),
+        ).toBeInTheDocument();
+        expect(screen.getByText('Status pending')).toBeInTheDocument();
+    });
+
+    test('renders closed message when facility is closed and no new OS ID', () => {
+        const data = {
+            properties: {
+                activity_reports: [{ status: 'RESOLVED' }],
+                is_closed: true,
+            },
+        };
+
+        renderWithProviders(
+            <Router>
+                <ClosureStatus data={data} clearFacility={clearFacility} />
+            </Router>,
+        );
+
+        expect(
+            screen.getByText(/This facility is closed\./),
+        ).toBeInTheDocument();
+    });
+
+    test('renders moved-to link when closed with new_os_id', () => {
+        const data = {
+            properties: {
+                activity_reports: [{ status: 'RESOLVED' }],
+                is_closed: true,
+                new_os_id: 'US2025123456ABCD',
+            },
+        };
+
+        renderWithProviders(
+            <Router>
+                <ClosureStatus data={data} clearFacility={clearFacility} />
+            </Router>,
+        );
+
+        const link = screen.getByRole('link', { name: 'US2025123456ABCD' });
+        expect(link).toBeInTheDocument();
+        expect(
+            screen.getByText(/This facility has moved to/),
+        ).toBeInTheDocument();
+    });
+});