[OSDEV-1130] SLC. Implement collecting contribution data page (FE)

src/react/src/Routes.jsx

@@ -31,6 +31,7 @@ import ExternalRedirect from './components/ExternalRedirect';
 import Facilities from './components/Facilities';
 import ContributeProductionLocation from './components/Contribute/ContributeProductionLocation';
 import SearchByOsIdResult from './components/Contribute/SearchByOsIdResult';
+import ProductionLocationInfo from './components/Contribute/ProductionLocationInfo';
 
 import { sessionLogin } from './actions/auth';
 import { fetchFeatureFlags } from './actions/featureFlags';
@@ -57,6 +58,7 @@ import {
     InfoPaths,
     contributeProductionLocationRoute,
     searchByOsIdResultRoute,
+    productionLocationInfoRoute,
 } from './util/constants';
 
 class Routes extends Component {
@@ -169,6 +171,12 @@ class Routes extends Component {
                                     path={searchByOsIdResultRoute}
                                     component={SearchByOsIdResult}
                                 />
+                                <Route
+                                    exact
+                                    path={productionLocationInfoRoute}
+                                    component={ProductionLocationInfo}
+                                />
+
                                 <Route exact path="/about/processing">
                                     <ExternalRedirect
                                         to={`${InfoLink}/${InfoPaths.dataQuality}`}

src/react/src/actions/prodactionLocationInfo.js

@@ -0,0 +1,163 @@
+// import { createAction } from 'redux-act';
+// import { toPairs, snakeCase, mapKeys } from 'lodash';
+
+// import apiRequest from '../util/apiRequest';
+
+// import {
+//     logErrorAndDispatchFailure,
+//     makeGetFacilityByOSIdURL,
+//     makeClaimFacilityAPIURL,
+//     claimAFacilityFormIsValid,
+// } from '../util/util';
+
+// export const startFetchClaimFacilityData = createAction(
+//     'START_FETCH_CLAIM_FACILITY_DATA',
+// );
+// export const failFetchClaimFacilityData = createAction(
+//     'FAIL_FETCH_CLAIM_FACILITY_DATA',
+// );
+// export const completeFetchClaimFacilityData = createAction(
+//     'COMPLETE_FETCH_CLAIM_FACILITY_DATA',
+// );
+// export const clearClaimFacilityDataAndForm = createAction(
+//     'CLEAR_CLAIM_FACILITY_DATA_AND_FORM',
+// );
+
+// export function fetchClaimFacilityData(osID) {
+//     return dispatch => {
+//         dispatch(startFetchClaimFacilityData());
+
+//         return apiRequest
+//             .get(makeGetFacilityByOSIdURL(osID))
+//             .then(({ data }) => dispatch(completeFetchClaimFacilityData(data)))
+//             .catch(err =>
+//                 dispatch(
+//                     logErrorAndDispatchFailure(
+//                         err,
+//                         'An error prevented fetching data about that facility',
+//                         failFetchClaimFacilityData,
+//                     ),
+//                 ),
+//             );
+//     };
+// }
+
+// export const updateClaimFacilityIntro = createAction(
+//     'UPDATE_CLAIM_A_FACILITY_INTRO',
+// );
+
+// export const updateClaimAFacilityContactPerson = createAction(
+//     'UPDATE_CLAIM_A_FACILITY_CONTACT_PERSON',
+// );
+// export const updateClaimAFacilityJobTitle = createAction(
+//     'UPDATE_CLAIM_A_FACILITY_JOB_TITLE',
+// );
+// export const updateClaimAFacilityPhoneNumber = createAction(
+//     'UPDATE_CLAIM_A_FACILITY_PHONE_NUMBER',
+// );
+// export const updateClaimAFacilityCompany = createAction(
+//     'UPDATE_CLAIM_A_FACILITY_COMPANY',
+// );
+// export const updateClaimAFacilityParentCompany = createAction(
+//     'UPDATE_CLAIM_A_FACILITY_PARENT_COMPANY',
+// );
+// export const updateClaimAFacilityWebsite = createAction(
+//     'UPDATE_CLAIM_A_FACILITY_WEBSITE',
+// );
+// export const updateClaimAFacilityDescription = createAction(
+//     'UPDATE_CLAIM_A_FACILITY_DESCRIPTION',
+// );
+// export const updateClaimAFacilityVerificationMethod = createAction(
+//     'UPDATE_CLAIM_A_FACILITY_VERIFICATION_METHOD',
+// );
+// export const updateClaimAFacilityLinkedinProfile = createAction(
+//     'UPDATE_CLAIM_A_FACILITY_LINKEDIN_PROFILE',
+// );
+// export const updateClaimAFacilityUploadFiles = createAction(
+//     'UPDATE_CLAIM_A_FACILITY_UPLOAD_FILES',
+// );
+// export const updateClaimAFacilityBusinessUploadFiles = createAction(
+//     'UPDATE_CLAIM_A_FACILITY_BUSINESS_UPLOAD_FILES',
+// );
+// export const startSubmitClaimAFacilityData = createAction(
+//     'START_SUBMIT_CLAIM_A_FACILITY_DATA',
+// );
+// export const failSubmitClaimAFacilityData = createAction(
+//     'FAIL_SUBMIT_CLAIM_A_FACILITY_DATA',
+// );
+// export const completeSubmitClaimAFacilityData = createAction(
+//     'COMPLETE_SUBMIT_CLAIM_A_FACILITY_DATA',
+// );
+// export const updateClaimAFacilityYourName = createAction(
+//     'UPDATE_CLAIM_A_FACILITY_YOUR_NAME',
+// );
+// export const updateClaimAFacilityYourTitle = createAction(
+//     'UPDATE_CLAIM_A_FACILITY_YOUR_TITLE',
+// );
+// export const updateClaimAFacilityYourBusinessWebsite = createAction(
+//     'UPDATE_CLAIM_A_FACILITY_YOUR_BUSINESS_WEBSITE',
+// );
+// export const updateClaimAFacilityBusinessWebsite = createAction(
+//     'UPDATE_CLAIM_A_FACILITY_BUSINESS_WEBSITE',
+// );
+// export const updateClaimAFacilityBusinessLinkedinProfile = createAction(
+//     'UPDATE_CLAIM_A_FACILITY_YOUR_BUSINESS_LINKEDIN_PROFILE',
+// );
+
+// export const updateClaimASector = createAction('UPDATE_CLAIM_A_SECTOR');
+// export const updateClaimANumberOfWorkers = createAction(
+//     'UPDATE_CLAIM_A_NUMBER_OF_WORKERS',
+// );
+// export const updateClaimALocalLanguageName = createAction(
+//     'UPDATE_CLAIM_A_LOCAL_LANGUAGE_NAME',
+// );
+
+// export function submitClaimAFacilityData(osID) {
+//     return (dispatch, getState) => {
+//         const {
+//             claimFacility: {
+//                 claimData: { formData },
+//             },
+//         } = getState();
+
+//         if (!claimAFacilityFormIsValid(formData)) {
+//             return null;
+//         }
+
+//         const postData = new FormData();
+//         toPairs(formData).forEach(([key, value]) => {
+//             const formattedKey = snakeCase(key);
+//             if (
+//                 formattedKey === 'upload_files' ||
+//                 formattedKey === 'business_upload_files'
+//             ) {
+//                 mapKeys(value, file => {
+//                     postData.append('files', file);
+//                 });
+//             } else if (formattedKey === 'sectors') {
+//                 if (value !== null) {
+//                     postData.append(formattedKey, value);
+//                 }
+//             } else {
+//                 postData.append(formattedKey, value);
+//             }
+//         });
+
+//         dispatch(startSubmitClaimAFacilityData());
+
+//         return apiRequest
+//             .post(makeClaimFacilityAPIURL(osID), postData)
+//             .then(({ data }) =>
+//                 dispatch(completeSubmitClaimAFacilityData(data)),
+//             )
+//             .catch(err =>
+//                 dispatch(
+//                     logErrorAndDispatchFailure(
+//                         err,
+//                         'An error prevented submitting facility claim data',
+//                         failSubmitClaimAFacilityData,
+//                     ),
+//                 ),
+//             );
+//     };
+// }

src/react/src/components/ArrowDropDownUpIcon.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default ({ color = '#191919' }) => (
+    <svg
+        width="10"
+        height="5"
+        viewBox="0 0 10 5"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path d="M0 5L5 0L10 5H0Z" fill={color} />
+    </svg>
+);

src/react/src/components/Contribute/InputHelperText.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
+import { inputHelperText } from '../../util/styles';
+
+const InputHelperText = ({ classes, text = 'This field is required.' }) => (
+    <span className={classes.helperTextWrapStyles}>
+        <InfoOutlinedIcon className={classes.iconInfoStyles} />
+        <Typography component="span" className={classes.inputHelperTextStyles}>
+            {text}
+        </Typography>
+    </span>
+);
+
+export default withStyles(inputHelperText)(InputHelperText);