[OSDEV-2353] Production location skeleton page

doc/release/RELEASE-NOTES.md

@@ -29,6 +29,7 @@ This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html
     * If `embed=1` is present, redirect to the `/facilities/:osID?sort_by=contributors_desc&embed=1` (with preserving other URL parameters) regardless of active `enable_production_location_page` flag.
     * 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.
 
 ### Release instructions
 * Ensure that the following commands are included in the `post_deployment` command:

src/django/api/mail.py

@@ -53,8 +53,13 @@ def make_claim_url(request: Request, location: Facility):
         # New claim flow: /claim/{os_id}.
         return '{}/claim/{}'.format(make_oshub_url(request), location.id)
     else:
-        # Old claim flow: /facilities/{os_id}/claim.
-        return '{}/claim'.format(make_facility_url(request, location))
+        # Old claim flow: /facilities/{os_id}/claim
+        # (do not use make_facility_url
+        # so we never produce /production-locations/{id}/claim when
+        # PRODUCTION_LOCATION_PAGE_SWITCH is on).
+        return '{}/facilities/{}/claim'.format(
+            make_oshub_url(request), location.id
+        )
 
 
 def make_pl_search_url(request):

src/react/src/Routes.jsx

@@ -31,7 +31,7 @@ import SurveyDialogNotification from './components/SurveyDialogNotification';
 import Settings from './components/Settings/Settings';
 import ExternalRedirect from './components/ExternalRedirect';
 import Facilities from './components/Facilities';
-import ProductionLocationDetails from './components/ProductionLocation/ProductionLocationDetails';
+import ProductionLocationDetailsContainer from './components/ProductionLocation/ProductionLocationDetailsContainer/ProductionLocationDetailsContainer';
 import ContributeProductionLocation from './components/Contribute/ContributeProductionLocation';
 import SearchByOsIdResult from './components/Contribute/SearchByOsIdResult';
 import SearchByNameAndAddressResult from './components/Contribute/SearchByNameAndAddressResult';
@@ -165,7 +165,7 @@ class Routes extends Component {
                                         >
                                             <Route
                                                 component={
-                                                    ProductionLocationDetails
+                                                    ProductionLocationDetailsContainer
                                                 }
                                             />
                                         </FeatureFlag>

src/react/src/components/ProductionLocation/ClaimSection/ClaimDataContainer/ClaimDataContainer.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+
+import styles from './styles';
+
+const ClaimDataContainer = ({ classes, className }) => (
+    <div className={`${classes.container} ${className || ''}`}>
+        <Typography variant="title" className={classes.title} component="h3">
+            Claim Data
+        </Typography>
+    </div>
+);
+
+export default withStyles(styles)(ClaimDataContainer);

src/react/src/components/ProductionLocation/ClaimSection/ClaimDataContainer/styles.js

@@ -0,0 +1,9 @@
+export default theme =>
+    Object.freeze({
+        container: Object.freeze({
+            backgroundColor: 'white',
+        }),
+        title: Object.freeze({
+            marginBottom: theme.spacing.unit,
+        }),
+    });

src/react/src/components/ProductionLocation/Heading/ClaimFlag/ClaimFlag.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import Typography from '@material-ui/core/Typography';
+import Icon from '@material-ui/core/Icon';
+import { withStyles } from '@material-ui/core/styles';
+
+import BadgeClaimed from '../../../BadgeClaimed';
+
+import {
+    makeClaimFacilityLinkWithFeatureFlag,
+    convertFeatureFlagsObjectToListOfActiveFlags,
+} from '../../../../util/util';
+import { ENABLE_V1_CLAIMS_FLOW } from '../../../../util/constants';
+
+import { getBackgroundColorClass, getMainText } from './utils';
+import styles from './styles';
+
+const FacilityDetailsClaimFlag = ({
+    classes,
+    osId,
+    isClaimed,
+    isPending,
+    isEmbed,
+    isV1ClaimsFlowEnabled,
+}) => {
+    if (isEmbed) return null;
+    const rootVariantClass =
+        classes[getBackgroundColorClass(isClaimed, isPending)];
+    const claimFacilityLink = makeClaimFacilityLinkWithFeatureFlag(
+        osId,
+        isV1ClaimsFlowEnabled,
+    );
+    return (
+        <div className={rootVariantClass} data-testid="claim-banner">
+            <div className={classes.contentContainer}>
+                <Icon className={classes.itemPadding}>
+                    <BadgeClaimed />
+                </Icon>
+                <Typography className={classes.itemPadding}>
+                    {getMainText(isClaimed, isPending)}
+                </Typography>
+                {!isClaimed && !isPending ? (
+                    <Typography className={classes.itemPadding}>
+                        <Link
+                            to={claimFacilityLink}
+                            href={claimFacilityLink}
+                            className={classes.link}
+                        >
+                            I want to claim this production location
+                        </Link>
+                    </Typography>
+                ) : null}
+            </div>
+        </div>
+    );
+};
+
+const mapStateToProps = ({ featureFlags: { flags } }) => {
+    const activeFeatureFlags = convertFeatureFlagsObjectToListOfActiveFlags(
+        flags,
+    );
+    return {
+        isV1ClaimsFlowEnabled: activeFeatureFlags.includes(
+            ENABLE_V1_CLAIMS_FLOW,
+        ),
+    };
+};
+
+export default connect(mapStateToProps)(
+    withStyles(styles)(FacilityDetailsClaimFlag),
+);

src/react/src/components/ProductionLocation/Heading/ClaimFlag/styles.js

@@ -0,0 +1,40 @@
+import COLOURS from '../../../../util/COLOURS';
+
+export default theme =>
+    Object.freeze({
+        rootClaimed: {
+            backgroundColor: COLOURS.GREEN,
+            color: '#191919',
+            display: 'flex',
+            justifyContent: 'center',
+        },
+        rootPending: {
+            backgroundColor: COLOURS.NAVIGATION,
+            color: '#191919',
+            display: 'flex',
+            justifyContent: 'center',
+        },
+        rootUnclaimed: {
+            backgroundColor: COLOURS.LIGHT_RED,
+            color: '#191919',
+            display: 'flex',
+            justifyContent: 'center',
+        },
+        contentContainer: {
+            width: '100%',
+            maxWidth: '1072px',
+            display: 'flex',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            paddingRight: theme.spacing.unit,
+            paddingBottom: theme.spacing.unit,
+        },
+        link: {
+            color: theme.palette.primary.main,
+        },
+        itemPadding: {
+            paddingLeft: theme.spacing.unit * 3,
+            paddingTop: theme.spacing.unit,
+            paddingBottom: theme.spacing.unit / 4,
+        },
+    });

src/react/src/components/ProductionLocation/Heading/ClaimFlag/utils.js

@@ -0,0 +1,15 @@
+export const getBackgroundColorClass = (isClaimed, isPending) => {
+    if (isClaimed) return 'rootClaimed';
+    if (isPending) return 'rootPending';
+    return 'rootUnclaimed';
+};
+
+export const getMainText = (isClaimed, isPending) => {
+    if (isClaimed) {
+        return 'This production location has been claimed by an owner or manager';
+    }
+    if (isPending) {
+        return 'There is a pending claim for this production location';
+    }
+    return 'This production location has not been claimed';
+};

src/react/src/components/ProductionLocation/Heading/ClosureStatus/ClosureStatus.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import get from 'lodash/get';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
+
+import FeatureFlag from '../../../FeatureFlag';
+import { REPORT_A_FACILITY } from '../../../../util/constants';
+
+import PrimaryText from './PrimaryText';
+import styles from './styles';
+
+const ProductionLocationDetailClosureStatus = ({
+    data,
+    clearFacility,
+    classes,
+    useProductionLocationPage = false,
+    search = '',
+}) => {
+    const report = get(data, 'properties.activity_reports[0]');
+    const newOsId = get(data, 'properties.new_os_id');
+    const isClosed = get(data, 'properties.is_closed');
+    const isPending = report?.status === 'PENDING';
+
+    if (!report) return null;
+
+    if (!isPending && !isClosed) return null;
+
+    return (
+        <FeatureFlag flag={REPORT_A_FACILITY}>
+            <div className={classes.status}>
+                <div className={classes.contentContainer}>
+                    <i
+                        className={`${classes.text} ${classes.icon} far fa-fw fa-store-slash`}
+                    />
+                    <div className={classes.textBox}>
+                        <PrimaryText
+                            report={report}
+                            isPending={isPending}
+                            isClosed={isClosed}
+                            newOsId={newOsId}
+                            classes={classes}
+                            useProductionLocationPage={
+                                useProductionLocationPage
+                            }
+                            search={search}
+                            clearFacility={clearFacility}
+                        />
+                        {isPending && (
+                            <Typography
+                                className={classes.text}
+                                variant="body1"
+                            >
+                                Status pending
+                            </Typography>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </FeatureFlag>
+    );
+};
+
+export default withStyles(styles)(ProductionLocationDetailClosureStatus);

src/react/src/components/ProductionLocation/Heading/ClosureStatus/PrimaryText.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import { Link } from 'react-router-dom';
+
+import {
+    makeFacilityDetailLink,
+    makeFacilityDetailLinkOnRedirect,
+} from '../../../../util/util';
+
+const PrimaryText = ({
+    report,
+    isPending,
+    isClosed,
+    newOsId,
+    classes,
+    useProductionLocationPage,
+    search,
+    clearFacility,
+}) => {
+    if (isPending) {
+        const closureState = (report.closure_state || 'unknown').toLowerCase();
+        return (
+            <Typography className={classes.text} variant="subheading">
+                This facility may be {closureState}
+            </Typography>
+        );
+    }
+
+    if (isClosed && !!newOsId) {
+        const movedToPathname = useProductionLocationPage
+            ? makeFacilityDetailLinkOnRedirect(
+                  newOsId,
+                  search,
+                  useProductionLocationPage,
+              )
+            : makeFacilityDetailLink(newOsId);
+        return (
+            <Typography className={classes.text} variant="subheading">
+                This facility has moved to{' '}
+                <Link
+                    to={{
+                        pathname: movedToPathname,
+                        state: {
+                            panMapToFacilityDetails: true,
+                        },
+                    }}
+                    className={classes.text}
+                    onClick={() => clearFacility()}
+                >
+                    {newOsId}
+                </Link>
+            </Typography>
+        );
+    }
+
+    if (isClosed) {
+        return (
+            <Typography className={classes.text} variant="subheading">
+                This facility is closed
+            </Typography>
+        );
+    }
+
+    return null;
+};
+
+export default PrimaryText;

src/react/src/components/ProductionLocation/Heading/ClosureStatus/styles.js

@@ -0,0 +1,31 @@
+export default theme =>
+    Object.freeze({
+        status: {
+            backgroundColor: 'rgb(40, 39, 39)',
+            borderRadius: 0,
+            display: 'flex',
+            justifyContent: 'center',
+        },
+        contentContainer: {
+            width: '100%',
+            maxWidth: '1072px',
+            display: 'flex',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            padding: theme.spacing.unit,
+        },
+        icon: {
+            fontSize: '24px',
+            fontWeight: 'normal',
+            paddingLeft: theme.spacing.unit * 2,
+            paddingRight: theme.spacing.unit * 3,
+        },
+        textBox: {
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        text: {
+            color: 'rgb(255, 255, 255)',
+            fontSize: '14px',
+        },
+    });

src/react/src/components/ProductionLocation/Heading/DataSourcesInfo/DataSourcesInfo.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
+
+import styles from './styles';
+
+const ProductionLocationDetailsDataSourcesInfo = ({ classes, className }) => (
+    <div className={`${classes.container} ${className || ''}`}>
+        <Typography variant="title" className={classes.title} component="h3">
+            Understanding Data Sources
+        </Typography>
+    </div>
+);
+
+export default withStyles(styles)(ProductionLocationDetailsDataSourcesInfo);

src/react/src/components/ProductionLocation/Heading/DataSourcesInfo/styles.js

@@ -0,0 +1,9 @@
+export default theme =>
+    Object.freeze({
+        container: Object.freeze({
+            backgroundColor: 'white',
+        }),
+        title: Object.freeze({
+            marginBottom: theme.spacing.unit,
+        }),
+    });