From 364ce9d79f00f30b38865c63e3f3f3fc78df982d Mon Sep 17 00:00:00 2001
From: Kelly Innes <kinnes@azavea.com>
Date: Mon, 24 Jun 2019 17:47:57 -0400
Subject: [PATCH] fixup! Add parent company to claim a facility

---
 .../ClaimFacilityFacilityInfoStep.jsx         |  3 +++
 .../components/ClaimedFacilitiesDetails.jsx   | 24 +++++++++++++++++++
 src/app/src/util/constants.js                 |  4 +++-
 src/app/src/util/styles.js                    |  3 +++
 4 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/app/src/components/ClaimFacilityFacilityInfoStep.jsx b/src/app/src/components/ClaimFacilityFacilityInfoStep.jsx
index b2a08df8e..f9bf0db0d 100644
--- a/src/app/src/components/ClaimFacilityFacilityInfoStep.jsx
+++ b/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}
diff --git a/src/app/src/components/ClaimedFacilitiesDetails.jsx b/src/app/src/components/ClaimedFacilitiesDetails.jsx
index a9f56ce03..aed1de01c 100644
--- a/src/app/src/components/ClaimedFacilitiesDetails.jsx
+++ b/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}
diff --git a/src/app/src/util/constants.js b/src/app/src/util/constants.js
index 15413a1b2..800b5d234 100644
--- a/src/app/src/util/constants.js
+++ b/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',
diff --git a/src/app/src/util/styles.js b/src/app/src/util/styles.js
index 55b05712f..e04d27795 100644
--- a/src/app/src/util/styles.js
+++ b/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',
+    }),
 });