fixup! Add parent company to claim a facility

src/app/src/components/ClaimFacilityFacilityInfoStep.jsx

@@ -84,6 +84,9 @@ function ClaimFacilityFacilityInfoStep({
                                 {parentCompanyFormField.label}
                             </Typography>
                         </InputLabel>
+                        <aside style={claimAFacilityFormStyles.asideStyles}>
+                            {parentCompanyFormField.aside}
+                        </aside>
                         <div style={claimAFacilityFormStyles.textFieldStyles}>
                             <Select
                                 options={contributorOptions}

src/app/src/components/ClaimedFacilitiesDetails.jsx

@@ -14,6 +14,7 @@ import find from 'lodash/find';
 import stubFalse from 'lodash/stubFalse';
 import isEmpty from 'lodash/isEmpty';
 import get from 'lodash/get';
+import isNull from 'lodash/isNull';
 import Select from 'react-select';
 import { isEmail } from 'validator';
 import { toast } from 'react-toastify';
@@ -57,6 +58,14 @@ import {
     mapDjangoChoiceTuplesToSelectOptions,
 } from '../util/util';
 
+import { claimAFacilityFormFields } from '../util/constants';
+
+const {
+    parentCompany: {
+        aside: parentCompanyAside,
+    },
+} = claimAFacilityFormFields;
+
 const claimedFacilitiesDetailsStyles = Object.freeze({
     containerStyles: Object.freeze({
         display: 'flex',
@@ -109,6 +118,9 @@ const claimedFacilitiesDetailsStyles = Object.freeze({
         padding: '10px 0',
         color: 'red',
     }),
+    asideStyles: Object.freeze({
+        padding: '5px 20px 20px 0',
+    }),
 });
 
 const selectStyles = Object.freeze({
@@ -136,7 +148,16 @@ const InputSection = ({
     isSelect = false,
     selectOptions = null,
     hasValidationErrorFn = stubFalse,
+    aside = null,
 }) => {
+    const asideNode = (
+        <ShowOnly when={!isNull(aside)}>
+            <aside style={claimedFacilitiesDetailsStyles.asideStyles}>
+                {aside}
+            </aside>
+        </ShowOnly>
+    );
+
     if (isSelect) {
         return (
             <div style={claimedFacilitiesDetailsStyles.inputSectionStyles}>
@@ -147,6 +168,7 @@ const InputSection = ({
                 >
                     {label}
                 </InputLabel>
+                {asideNode}
                 <Select
                     onChange={onChange}
                     value={find(selectOptions, ['value', value])}
@@ -180,6 +202,7 @@ const InputSection = ({
                     </span>
                 ) : null}
             </InputLabel>
+            {asideNode}
             <TextField
                 variant="outlined"
                 style={claimedFacilitiesDetailsStyles.inputSectionFieldStyles}
@@ -322,6 +345,7 @@ function ClaimedFacilitiesDetails({
                 <ShowOnly when={!isEmpty(contributorOptions)}>
                     <InputSection
                         label="Parent Company"
+                        aside={parentCompanyAside}
                         value={get(data, 'facility_parent_company.id', null)}
                         onChange={updateParentCompany}
                         disabled={updating}

src/app/src/util/constants.js

@@ -436,7 +436,9 @@ export const claimAFacilityFormFields = Object.freeze({
     }),
     parentCompany: Object.freeze({
         id: 'parent-company',
-        label: 'Parent company of facility, selected from contributors list',
+        label: 'Parent company',
+        aside: `If you cannot find the parent company in this list consider
+inviting them to register with the Open Apparel Registry.`,
     }),
     website: Object.freeze({
         id: 'website',

src/app/src/util/styles.js

@@ -104,4 +104,7 @@ export const claimAFacilityFormStyles = Object.freeze({
         width: '100%',
         padding: '5px 0 5px',
     }),
+    asideStyles: Object.freeze({
+        padding: '5px 20px 5px 0',
+    }),
 });