Add fields for claim form and profile

- add fields for facility claim form and claimed facility profile
- adjust display order for claimed facility details page
- replace .update with .save in facility claim details endpoint

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Make "Dashboard" text on dashboard screens a clickable link [#667](https://github.com/open-apparel-registry/open-apparel-registry/pull/667)
 - Display RouteNotFound component for unmatched routes [#657](https://github.com/open-apparel-registry/open-apparel-registry/pull/657)
 - Add disclaimer text for claimed facility details [#670](https://github.com/open-apparel-registry/open-apparel-registry/pull/670)
+- Update claim a facility form and profile fields [#650](https://github.com/open-apparel-registry/open-apparel-registry/pull/650)
 
 ### Deprecated
 

src/app/src/__tests__/utils.tests.js

@@ -1205,6 +1205,7 @@ it('checks whether the claim a facility form is valid', () => {
             label: 'label',
             value: 'value',
         },
+        jobTitle: 'computer programmer',
     };
 
     expect(isEqual(

src/app/src/actions/claimFacility.js

@@ -36,6 +36,8 @@ export function fetchClaimFacilityData(oarID) {
 
 export const updateClaimAFacilityContactPerson =
     createAction('UPDATE_CLAIM_A_FACILITY_CONTACT_PERSON');
+export const updateClaimAFacilityJobTitle =
+    createAction('UPDATE_CLAIM_A_FACILITY_JOB_TITLE');
 export const updateClaimAFacilityEmail =
     createAction('UPDATE_CLAIM_A_FACILITY_EMAIL');
 export const updateClaimAFacilityPhoneNumber =
@@ -52,6 +54,8 @@ export const updateClaimAFacilityVerificationMethod =
     createAction('UPDATE_CLAIM_A_FACILITY_VERIFICATION_METHOD');
 export const updateClaimAFacilityPreferredContactMethod =
     createAction('UPDATE_CLAIM_A_FACILITY_PREFERRED_CONTACT_METHOD');
+export const updateClaimAFacilityLinkedinProfile =
+    createAction('UPDATE_CLAIM_A_FACILITY_LINKEDIN_PROFILE');
 
 export const startSubmitClaimAFacilityData =
     createAction('START_SUBMIT_CLAIM_A_FACILITY_DATA');

src/app/src/actions/claimedFacilityDetails.js

@@ -1,6 +1,9 @@
 import { createAction } from 'redux-act';
 import mapValues from 'lodash/mapValues';
 import isNull from 'lodash/isNull';
+import omit from 'lodash/omit';
+import isInteger from 'lodash/isInteger';
+import { isInt } from 'validator';
 
 import apiRequest from '../util/apiRequest';
 
@@ -65,8 +68,31 @@ export function submitClaimedFacilityDetailsUpdate(claimID) {
 
         dispatch(startUpdateClaimedFacilityDetails());
 
+        const updateData = Object.assign(
+            {},
+            omit(
+                data,
+                [
+                    'contributors',
+                    'countries',
+                    'facility_types',
+                ],
+            ),
+            {
+                facility_workers_count:
+                    (isInteger(data.facility_workers_count) || isInt(data.facility_workers_count))
+                        ? data.facility_workers_count
+                        : null,
+                facility_female_workers_percentage:
+                    (isInteger(data.facility_female_workers_percentage) ||
+                     isInt(data.facility_female_workers_percentage))
+                        ? data.facility_female_workers_percentage
+                        : null,
+            },
+        );
+
         return apiRequest
-            .put(makeGetOrUpdateApprovedFacilityClaimURL(claimID), data)
+            .put(makeGetOrUpdateApprovedFacilityClaimURL(claimID), updateData)
             .then(({ data: responseData }) => mapValues(responseData, (v) => {
                 if (isNull(v)) {
                     return '';
@@ -83,8 +109,10 @@ export function submitClaimedFacilityDetailsUpdate(claimID) {
     };
 }
 
-export const updateClaimedFacilityName =
-    createAction('UPDATE_CLAIMED_FACILITY_NAME');
+export const updateClaimedFacilityNameEnglish =
+    createAction('UPDATE_CLAIMED_FACILITY_NAME_ENGLISH');
+export const updateClaimedFacilityNameNativeLanguage =
+    createAction('UPDATE_CLAIMED_FACILITY_NAME_NATIVE_LANGUAGE');
 export const updateClaimedFacilityAddress =
     createAction('UPDATE_CLAIMED_FACILITY_ADDRESS');
 export const updateClaimedFacilityPhone =
@@ -93,12 +121,18 @@ export const updateClaimedFacilityPhoneVisibility =
     createAction('UPDATE_CLAIMED_FACILITY_PHONE_VISIBILITY');
 export const updateClaimedFacilityWebsite =
     createAction('UPDATE_CLAIMED_FACILITY_WEBSITE');
+export const updateClaimedFacilityWebsiteVisibility =
+    createAction('UPDATE_CLAIMED_FACILITY_WEBSITE_VISIBILITY');
 export const updateClaimedFacilityDescription =
     createAction('UPDATE_CLAIMED_FACILITY_DESCRIPTION');
 export const updateClaimedFacilityMinimumOrder =
     createAction('UPDATE_CLAIMED_FACILITY_MINIMUM_ORDER');
 export const updateClaimedFacilityAverageLeadTime =
     createAction('UPDATE_CLAIMED_FACILITY_AVERAGE_LEAD_TIME');
+export const updateClaimedFacilityWorkersCount =
+    createAction('UPDATE_CLAIMED_FACILITY_WORKERS_COUNT');
+export const updateClaimedFacilityFemaleWorkersPercentage =
+    createAction('UPDATE_CLAIMED_FACILITY_FEMALE_WORKERS_PERCENTAGE');
 export const updateClaimedFacilityPointOfContactVisibility =
     createAction('UPDATE_CLAIMED_FACILITY_POINT_OF_CONTACT_VISIBILITY');
 export const updateClaimedFacilityContactPersonName =
@@ -117,3 +151,7 @@ export const updateClaimedFacilityOfficePhone =
     createAction('UPDATE_CLAIMED_FACILITY_OFFICE_PHONE');
 export const updateClaimedFacilityParentCompany =
     createAction('UPDATE_CLAIMED_FACILITY_PARENT_COMPANY');
+export const updateClaimedFacilityFacilityType =
+    createAction('UPDATE_CLAIMED_FACILITY_FACILITY_TYPE');
+export const updateClaimedFacilityOtherFacilityType =
+    createAction('UPDATE_CLAIMED_FACILITY_OTHER_FACILITY_TYPE');

src/app/src/components/ClaimFacilityContactInfoStep.jsx

@@ -13,6 +13,7 @@ import {
     updateClaimAFacilityContactPerson,
     updateClaimAFacilityEmail,
     updateClaimAFacilityPhoneNumber,
+    updateClaimAFacilityJobTitle,
 } from '../actions/claimFacility.js';
 
 import { getValueFromEvent } from '../util/util';
@@ -21,7 +22,12 @@ import { claimAFacilityFormStyles } from '../util/styles';
 
 import { claimAFacilityFormFields } from '../util/constants';
 
-const { contactName, contactEmail, contactPhone } = claimAFacilityFormFields;
+const {
+    contactName,
+    contactEmail,
+    contactPhone,
+    contactJobTitle,
+} = claimAFacilityFormFields;
 
 function ClaimFacilityContactInfoStep({
     contactPerson,
@@ -31,6 +37,8 @@ function ClaimFacilityContactInfoStep({
     phoneNumber,
     updatePhoneNumber,
     fetching,
+    jobTitle,
+    updateJobTitle,
 }) {
     return (
         <>
@@ -52,6 +60,23 @@ function ClaimFacilityContactInfoStep({
                     disabled={fetching}
                 />
             </div>
+            <div style={claimAFacilityFormStyles.inputGroupStyles}>
+                <InputLabel htmlFor={contactJobTitle.id}>
+                    <Typography variant="title">
+                        {contactJobTitle.label}
+                        <RequiredAsterisk />
+                    </Typography>
+                </InputLabel>
+                <TextField
+                    error={isEmpty(jobTitle)}
+                    id={contactJobTitle.id}
+                    variant="outlined"
+                    style={claimAFacilityFormStyles.textFieldStyles}
+                    value={jobTitle}
+                    onChange={updateJobTitle}
+                    disabled={fetching}
+                />
+            </div>
             <div style={claimAFacilityFormStyles.inputGroupStyles}>
                 <InputLabel htmlFor={contactEmail.id}>
                     <Typography variant="title">
@@ -101,12 +126,14 @@ ClaimFacilityContactInfoStep.propTypes = {
     updateContactPerson: func.isRequired,
     updateEmail: func.isRequired,
     updatePhoneNumber: func.isRequired,
+    jobTitle: string.isRequired,
+    updateJobTitle: func.isRequired,
 };
 
 function mapStateToProps({
     claimFacility: {
         claimData: {
-            formData: { contactPerson, email, phoneNumber },
+            formData: { contactPerson, email, phoneNumber, jobTitle },
             fetching,
         },
     },
@@ -116,6 +143,7 @@ function mapStateToProps({
         email,
         phoneNumber,
         fetching,
+        jobTitle,
     };
 }
 
@@ -127,6 +155,8 @@ function mapDispatchToProps(dispatch) {
             dispatch(updateClaimAFacilityEmail(getValueFromEvent(e))),
         updatePhoneNumber: e =>
             dispatch(updateClaimAFacilityPhoneNumber(getValueFromEvent(e))),
+        updateJobTitle: e =>
+            dispatch(updateClaimAFacilityJobTitle(getValueFromEvent(e))),
     };
 }
 

src/app/src/components/ClaimFacilityFacilityInfoStep.jsx

@@ -5,6 +5,7 @@ import Typography from '@material-ui/core/Typography';
 import TextField from '@material-ui/core/TextField';
 import InputLabel from '@material-ui/core/InputLabel';
 import isEmpty from 'lodash/isEmpty';
+import { isURL } from 'validator';
 import Select from 'react-select';
 
 import RequiredAsterisk from './RequiredAsterisk';
@@ -108,6 +109,7 @@ function ClaimFacilityFacilityInfoStep({
                 </InputLabel>
                 <TextField
                     id={websiteFormField.id}
+                    error={!isEmpty(website) && !isURL(website)}
                     variant="outlined"
                     style={claimAFacilityFormStyles.textFieldStyles}
                     value={website}

src/app/src/components/ClaimFacilityVerificationInfoStep.jsx

@@ -5,12 +5,15 @@ import Typography from '@material-ui/core/Typography';
 import TextField from '@material-ui/core/TextField';
 import InputLabel from '@material-ui/core/InputLabel';
 import Select from 'react-select';
+import isEmpty from 'lodash/isEmpty';
+import { isURL } from 'validator';
 
 import RequiredAsterisk from './RequiredAsterisk';
 
 import {
     updateClaimAFacilityVerificationMethod,
     updateClaimAFacilityPreferredContactMethod,
+    updateClaimAFacilityLinkedinProfile,
 } from '../actions/claimFacility';
 
 import { getValueFromEvent } from '../util/util';
@@ -25,6 +28,7 @@ import {
 const {
     verificationMethod: verificationMethodFormField,
     preferredContactMethod: preferredContactMethodFormField,
+    linkedinProfile: linkedinProfileFormField,
 } = claimAFacilityFormFields;
 
 const selectStyles = Object.freeze({
@@ -46,6 +50,8 @@ function ClaimFacilityVerificationInfoStep({
     preferredContactMethod,
     updateContactPreference,
     fetching,
+    linkedinProfile,
+    updateLinkedinProfile,
 }) {
     return (
         <>
@@ -58,6 +64,7 @@ function ClaimFacilityVerificationInfoStep({
                 </InputLabel>
                 <div style={claimAFacilityFormStyles.textFieldStyles}>
                     <Select
+                        autoFocus
                         options={claimAFacilityPreferredContactOptions}
                         id={preferredContactMethodFormField.id}
                         value={preferredContactMethod}
@@ -67,6 +74,22 @@ function ClaimFacilityVerificationInfoStep({
                     />
                 </div>
             </div>
+            <div style={claimAFacilityFormStyles.inputGroupStyles}>
+                <InputLabel htmlFor={linkedinProfileFormField.id}>
+                    <Typography variant="title">
+                        {linkedinProfileFormField.label}
+                    </Typography>
+                </InputLabel>
+                <TextField
+                    id={linkedinProfileFormField.id}
+                    error={!isEmpty(linkedinProfile) && !isURL(linkedinProfile)}
+                    variant="outlined"
+                    style={claimAFacilityFormStyles.textFieldStyles}
+                    value={linkedinProfile}
+                    onChange={updateLinkedinProfile}
+                    disabled={fetching}
+                />
+            </div>
             <div style={claimAFacilityFormStyles.inputGroupStyles}>
                 <InputLabel htmlFor={verificationMethodFormField.id}>
                     <Typography variant="title">
@@ -101,12 +124,18 @@ ClaimFacilityVerificationInfoStep.propTypes = {
     fetching: bool.isRequired,
     updateVerification: func.isRequired,
     updateContactPreference: func.isRequired,
+    linkedinProfile: string.isRequired,
+    updateLinkedinProfile: func.isRequired,
 };
 
 function mapStateToProps({
     claimFacility: {
         claimData: {
-            formData: { verificationMethod, preferredContactMethod },
+            formData: {
+                verificationMethod,
+                preferredContactMethod,
+                linkedinProfile,
+            },
             fetching,
         },
     },
@@ -115,6 +144,7 @@ function mapStateToProps({
         verificationMethod,
         preferredContactMethod,
         fetching,
+        linkedinProfile,
     };
 }
 
@@ -126,6 +156,8 @@ function mapDispatchToProps(dispatch) {
             ),
         updateContactPreference: v =>
             dispatch(updateClaimAFacilityPreferredContactMethod(v)),
+        updateLinkedinProfile: e =>
+            dispatch(updateClaimAFacilityLinkedinProfile(getValueFromEvent(e))),
     };
 }