[OSDEV-2085] Refactored new claim form to store select labels directly and extract shared utility for the StyledSelect component

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx

@@ -18,6 +18,7 @@ import { mainRoute } from '../../../../../util/constants';
 import eligibilityStepStyles from './styles';
 import RELATIONSHIP_OPTIONS from './constants';
 import InputErrorText from '../../../../Contribute/InputErrorText';
+import findSelectedOption from '../utils';
 
 const EligibilityStep = ({
     classes,
@@ -32,13 +33,15 @@ const EligibilityStep = ({
     const history = useHistory();
     const [ineligibleDialogOpen, setIneligibleDialogOpen] = useState(false);
 
-    const selectedRelationship = (formData && formData.relationship) || null;
+    const selectedRelationship = findSelectedOption(
+        RELATIONSHIP_OPTIONS,
+        formData.relationship,
+    );
 
     // This checks if the relationship field has been touched and either has validation errors
     // or no value selected
-    const isRelationshipError = Boolean(
-        touched?.relationship &&
-            (errors?.relationship || !selectedRelationship),
+    const isRelationshipError = !!(
+        touched?.relationship && errors?.relationship
     );
 
     const handleCloseIneligibleDialog = () => {
@@ -85,15 +88,18 @@ const EligibilityStep = ({
                             options={RELATIONSHIP_OPTIONS}
                             onBlur={() => handleBlur('relationship')}
                             value={selectedRelationship}
-                            onChange={value => {
+                            onChange={valueObject => {
                                 if (
-                                    value &&
-                                    (value.value === 'partner' ||
-                                        value.value === 'other')
+                                    valueObject &&
+                                    (valueObject.value === 'partner' ||
+                                        valueObject.value === 'other')
                                 ) {
                                     setIneligibleDialogOpen(true);
                                 } else {
-                                    handleChange('relationship', value);
+                                    handleChange(
+                                        'relationship',
+                                        valueObject.label,
+                                    );
                                 }
                             }}
                             styles={getSelectStyles(isRelationshipError)}

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/utils.js

@@ -0,0 +1,11 @@
+/**
+ * Finds and returns the option object whose label matches the selectedLabel.
+ * Helps convert the value to an object that can be supported by the
+ * StyledSelect component.
+ */
+const findSelectedOption = (options, selectedLabel) => {
+    if (!selectedLabel) return null;
+    return options.find(opt => opt.label === selectedLabel) || null;
+};
+
+export default findSelectedOption;

src/react/src/components/InitialClaimFlow/ClaimForm/validationSchemas.js

@@ -3,7 +3,7 @@ import { CLAIM_FORM_STEPS } from './constants';
 
 // Step 1: Eligibility validation.
 export const eligibilityStepSchema = Yup.object().shape({
-    relationship: Yup.object().required(
+    relationship: Yup.string().required(
         'Please select your relationship to this production location',
     ),
 });