opensupplyhub · kellyi · Jun 25, 2019 · Jun 21, 2019
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Order facility claim notes from oldest to newest on dashboard [#596](https://github.com/open-apparel-registry/open-apparel-registry/pull/596)
 - Prevent users from submitting another claim for a facility when they have a first claim still pending [#601](https://github.com/open-apparel-registry/open-apparel-registry/pull/601)
 - Email contributors when facility claims are approved or claim profiles are updated [#611](https://github.com/open-apparel-registry/open-apparel-registry/pull/611)
+- Add `parent_company` field to facility claims [#626](https://github.com/open-apparel-registry/open-apparel-registry/pull/626)
 
 ### Deprecated
 

diff --git a/src/app/src/actions/claimFacility.js b/src/app/src/actions/claimFacility.js
@@ -9,7 +9,9 @@ import {
     logErrorAndDispatchFailure,
     makeGetFacilityByOARIdURL,
     makeClaimFacilityAPIURL,
+    makeParentCompanyOptionsAPIURL,
     claimAFacilityFormIsValid,
+    mapDjangoChoiceTuplesToSelectOptions,
 } from '../util/util';
 
 export const startFetchClaimFacilityData = createAction('START_FETCH_CLAIM_FACILITY_DATA');
@@ -40,6 +42,8 @@ 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 =
@@ -73,6 +77,7 @@ export function submitClaimAFacilityData(oarID) {
         const postData = mapKeys(
             Object.assign({}, formData, {
                 preferredContactMethod: get(formData, 'preferredContactMethod.value', null),
+                parentCompany: get(formData, 'parentCompany.value', null),
             }),
             (_, k) => snakeCase(k),
         );
@@ -89,3 +94,28 @@ export function submitClaimAFacilityData(oarID) {
             )));
     };
 }
+
+export const startFetchParentCompanyOptions =
+    createAction('START_FETCH_PARENT_COMPANY_OPTIONS');
+export const failFetchParentCompanyOptions =
+    createAction('FAIL_FETCH_PARENT_COMPANY_OPTIONS');
+export const completeFetchParentCompanyOptions =
+    createAction('COMPLETE_FETCH_PARENT_COMPANY_OPTIONS');
+export const resetParentCompanyOptions =
+    createAction('RESET_PARENT_COMPANY_OPTIONS');
+
+export function fetchParentCompanyOptions() {
+    return (dispatch) => {
+        dispatch(startFetchParentCompanyOptions());
+
+        return csrfRequest
+            .get(makeParentCompanyOptionsAPIURL())
+            .then(({ data }) => mapDjangoChoiceTuplesToSelectOptions(data))
+            .then(data => dispatch(completeFetchParentCompanyOptions(data)))
+            .catch(err => dispatch(logErrorAndDispatchFailure(
+                err,
+                'An error prevented fetching parent company options',
+                failFetchParentCompanyOptions,
+            )));
+    };
+}
diff --git a/src/app/src/actions/claimedFacilityDetails.js b/src/app/src/actions/claimedFacilityDetails.js
@@ -115,3 +115,5 @@ export const updateClaimedFacilityOfficeCountry =
     createAction('UPDATE_CLAIMED_FACILITY_OFFICE_COUNTRY');
 export const updateClaimedFacilityOfficePhone =
     createAction('UPDATE_CLAIMED_FACILITY_OFFICE_PHONE');
+export const updateClaimedFacilityParentCompany =
+    createAction('UPDATE_CLAIMED_FACILITY_PARENT_COMPANY');
diff --git a/src/app/src/components/ClaimFacility.jsx b/src/app/src/components/ClaimFacility.jsx
@@ -15,6 +15,7 @@ import ClaimFacilityStepper from '../components/ClaimFacilityStepper';
 import {
     fetchClaimFacilityData,
     clearClaimFacilityDataAndForm,
+    fetchParentCompanyOptions,
 } from '../actions/claimFacility';
 
 import { facilityDetailsPropType } from '../util/propTypes';
@@ -38,7 +39,7 @@ function ClaimFacility({
     data,
     fetching,
     error,
-    getFacilityData,
+    getClaimData,
     clearClaimData,
     userHasSignedIn,
     match: {
@@ -47,11 +48,13 @@ function ClaimFacility({
         },
     },
 }) {
+    /* eslint-disable react-hooks/exhaustive-deps */
     useEffect(() => {
-        getFacilityData();
+        getClaimData();
 
         return clearClaimData;
-    }, [getFacilityData, clearClaimData]);
+    }, []);
+    /* eslint-enable react-hooks/exhaustive-deps */
 
     if (fetching) {
         return <CircularProgress />;
@@ -120,14 +123,17 @@ ClaimFacility.propTypes = {
     data: facilityDetailsPropType,
     fetching: bool.isRequired,
     error: arrayOf(string),
-    getFacilityData: func.isRequired,
+    getClaimData: func.isRequired,
     clearClaimData: func.isRequired,
     userHasSignedIn: bool.isRequired,
 };
 
 function mapStateToProps({
     claimFacility: {
         facilityData: { data, fetching, error },
+        parentCompanyOptions: {
+            fetching: fetchingParentCompanyOptions,
+        },
     },
     auth: {
         user: { user },
@@ -136,7 +142,7 @@ function mapStateToProps({
 }) {
     return {
         data,
-        fetching: fetching || sessionFetching,
+        fetching: fetching || sessionFetching || fetchingParentCompanyOptions,
         userHasSignedIn: !!user,
         error,
     };
@@ -151,7 +157,10 @@ function mapDispatchToProps(
     },
 ) {
     return {
-        getFacilityData: () => dispatch(fetchClaimFacilityData(oarID)),
+        getClaimData: () => {
+            dispatch(fetchParentCompanyOptions());
+            return dispatch(fetchClaimFacilityData(oarID));
+        },
         clearClaimData: () => dispatch(clearClaimFacilityDataAndForm()),
     };
 }

diff --git a/src/app/src/components/ClaimFacilityFacilityInfoStep.jsx b/src/app/src/components/ClaimFacilityFacilityInfoStep.jsx
@@ -1,17 +1,19 @@
 import React from 'react';
-import { bool, func, string } from 'prop-types';
+import { bool, func, number, shape, string } from 'prop-types';
 import { connect } from 'react-redux';
 import Typography from '@material-ui/core/Typography';
 import TextField from '@material-ui/core/TextField';
 import InputLabel from '@material-ui/core/InputLabel';
-import { isEmpty } from 'validator';
+import isEmpty from 'lodash/isEmpty';
+import Select from 'react-select';
 
 import RequiredAsterisk from './RequiredAsterisk';
 
 import {
     updateClaimAFacilityCompany,
     updateClaimAFacilityWebsite,
     updateClaimAFacilityDescription,
+    updateClaimAFacilityParentCompany,
 } from '../actions/claimFacility';
 
 import { getValueFromEvent } from '../util/util';
@@ -20,12 +22,28 @@ import { claimAFacilityFormStyles } from '../util/styles';
 
 import { claimAFacilityFormFields } from '../util/constants';
 
+import { contributorOptionsPropType } from '../util/propTypes';
+
 const {
     companyName: companyFormField,
     website: websiteFormField,
     facilityDescription: descriptionFormField,
+    parentCompany: parentCompanyFormField,
 } = claimAFacilityFormFields;
 
+const selectStyles = Object.freeze({
+    input: provided =>
+        Object.freeze({
+            ...provided,
+            padding: '10px',
+        }),
+    menu: provided =>
+        Object.freeze({
+            ...provided,
+            zIndex: '2',
+        }),
+});
+
 function ClaimFacilityFacilityInfoStep({
     companyName,
     updateCompany,
@@ -34,6 +52,9 @@ function ClaimFacilityFacilityInfoStep({
     facilityDescription,
     updateDescription,
     fetching,
+    contributorOptions,
+    parentCompany,
+    updateParentCompany,
 }) {
     return (
         <>
@@ -55,6 +76,30 @@ function ClaimFacilityFacilityInfoStep({
                     disabled={fetching}
                 />
             </div>
+            {
+                contributorOptions && (
+                    <div style={claimAFacilityFormStyles.inputGroupStyles}>
+                        <InputLabel htmlFor={parentCompanyFormField.id}>
+                            <Typography variant="title">
+                                {parentCompanyFormField.label}
+                            </Typography>
+                        </InputLabel>
+                        <aside style={claimAFacilityFormStyles.asideStyles}>
+                            {parentCompanyFormField.aside}
+                        </aside>
+                        <div style={claimAFacilityFormStyles.textFieldStyles}>
+                            <Select
+                                options={contributorOptions}
+                                id={parentCompanyFormField.id}
+                                value={parentCompany}
+                                onChange={updateParentCompany}
+                                disabled={fetching}
+                                styles={selectStyles}
+                            />
+                        </div>
+                    </div>
+                )
+            }
             <div style={claimAFacilityFormStyles.inputGroupStyles}>
                 <InputLabel htmlFor={websiteFormField.id}>
                     <Typography variant="title">
@@ -91,6 +136,11 @@ function ClaimFacilityFacilityInfoStep({
     );
 }
 
+ClaimFacilityFacilityInfoStep.defaultProps = {
+    contributorOptions: null,
+    parentCompany: null,
+};
+
 ClaimFacilityFacilityInfoStep.propTypes = {
     companyName: string.isRequired,
     website: string.isRequired,
@@ -99,28 +149,40 @@ ClaimFacilityFacilityInfoStep.propTypes = {
     updateCompany: func.isRequired,
     updateWebsite: func.isRequired,
     updateDescription: func.isRequired,
+    contributorOptions: contributorOptionsPropType,
+    parentCompany: shape({
+        value: number.isRequired,
+        label: string.isRequired,
+    }),
+    updateParentCompany: func.isRequired,
 };
 
 function mapStateToProps({
     claimFacility: {
         claimData: {
-            formData: { companyName, website, facilityDescription },
+            formData: { companyName, website, facilityDescription, parentCompany },
             fetching,
         },
+        parentCompanyOptions: {
+            data: contributorOptions,
+        },
     },
 }) {
     return {
         companyName,
         website,
         facilityDescription,
         fetching,
+        contributorOptions,
+        parentCompany,
     };
 }
 
 function mapDispatchToProps(dispatch) {
     return {
         updateCompany: e =>
             dispatch(updateClaimAFacilityCompany(getValueFromEvent(e))),
+        updateParentCompany: v => dispatch(updateClaimAFacilityParentCompany(v)),
         updateWebsite: e =>
             dispatch(updateClaimAFacilityWebsite(getValueFromEvent(e))),
         updateDescription: e =>

diff --git a/src/app/src/components/ClaimFacilityVerificationInfoStep.jsx b/src/app/src/components/ClaimFacilityVerificationInfoStep.jsx
@@ -27,6 +27,19 @@ const {
     preferredContactMethod: preferredContactMethodFormField,
 } = claimAFacilityFormFields;
 
+const selectStyles = Object.freeze({
+    input: provided =>
+        Object.freeze({
+            ...provided,
+            padding: '10px',
+        }),
+    menu: provided =>
+        Object.freeze({
+            ...provided,
+            zIndex: '2',
+        }),
+});
+
 function ClaimFacilityVerificationInfoStep({
     verificationMethod,
     updateVerification,
@@ -50,6 +63,7 @@ function ClaimFacilityVerificationInfoStep({
                         value={preferredContactMethod}
                         onChange={updateContactPreference}
                         disabled={fetching}
+                        styles={selectStyles}
                     />
                 </div>
             </div>