[OSDEV-2201][Claims Process Update] Implement “Confirm your eligibility” tab

[VadimKovalenkoSNF]

Implement feature from: OSDEV-2201

Introduce EligibilityStep component.

[barecheck]

React App | Jest test suite - Code coverage report

Total: 36.37%

Your code coverage diff: 0.24% ▴

✅ All code changes are covered

[barecheck]

Dedupe Hub App | Unittest test suite - Code coverage report

Total: 55.73%

Your code coverage diff: 0.00% ▴

✅ All code changes are covered

[barecheck]

Countries App | Unittest test suite - Code coverage report

Total: 100%

Your code coverage diff: 0.00% ▴

✅ All code changes are covered

[barecheck]

Contricleaner App | Unittest test suite - Code coverage report

Total: 98.75%

Your code coverage diff: 0.00% ▴

✅ All code changes are covered

[coderabbitai]

Actionable comments posted: 1

♻️ Duplicate comments (1)

src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx (1)

206-219: Validation race fixed—good job.

Switching to validateForm()’s returned errors and checking only current-step fields resolves the stale state issue flagged earlier. Looks correct.

🧹 Nitpick comments (3)

src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx (1)

58-66: Tidy icon rendering (optional).

Minor: avoid the IIFE in JSX and compute once per render for readability; or map steps directly to icon components to skip string indirection.

-const iconMapping = { Security, People, Language, Business };
-const getIconComponent = iconName => iconMapping[iconName] || Security;
+const ICONS = { Security, People, Language, Business };
+const getIconComponent = iconName => ICONS[iconName] || Security;
...
-<Typography ...>
-  {(() => {
-      const IconName = getIconComponent(STEP_ICONS[activeStep]);
-      return <IconName />;
-  })()}
+<Typography ...>
+  {(() => {
+      const StepIcon = getIconComponent(STEP_ICONS[activeStep]);
+      return <StepIcon />;
+  })()}

Also applies to: 248-257

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx (2)

129-159: Add onClose and ARIA to the Dialog.

Enable ESC/backdrop close and improve accessibility.

-<Dialog open={ineligibleDialogOpen}>
-    <DialogTitle>Not Eligible to File Claim</DialogTitle>
-    <DialogContent>
-        <Typography
+<Dialog
+  open={ineligibleDialogOpen}
+  onClose={handleCloseIneligibleDialog}
+  aria-labelledby="ineligible-dialog-title"
+  aria-describedby="ineligible-dialog-description"
+>
+    <DialogTitle id="ineligible-dialog-title">Not Eligible to File Claim</DialogTitle>
+    <DialogContent>
+        <Typography
           variant="body1"
           style={{ textAlign: 'center', fontSize: '16px' }}
+          id="ineligible-dialog-description"
         >

---

20-43: Option constants (optional extraction).

RELATIONSHIP_OPTIONS are likely reused and may need localization. Consider moving to a constants/i18n file for reuse and testing.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8693d60 and eb69a29.

📒 Files selected for processing (3)

• src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx (7 hunks)
• src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx (1 hunks)
• src/react/src/components/InitialClaimFlow/ClaimForm/hooks.js (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/react/src/components/InitialClaimFlow/ClaimForm/hooks.js

🧰 Additional context used

🧠 Learnings (2)

📚 Learning: 2025-10-24T13:01:46.846Z

Learnt from: vlad-shapik
PR: opensupplyhub/open-supply-hub#775
File: src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep.jsx:88-109
Timestamp: 2025-10-24T13:01:46.846Z
Learning: In the InitialClaimFlow ClaimForm steps (src/react/src/components/InitialClaimFlow/ClaimForm/Steps/), optional TextField components intentionally do not include the onBlur={handleBlur} handler, while required fields do include it. This is expected behavior for the claim form validation UX.

Applied to files:

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

📚 Learning: 2025-10-24T12:42:48.886Z

Learnt from: vlad-shapik
PR: opensupplyhub/open-supply-hub#775
File: src/react/src/components/InitialClaimFlow/ClaimForm/Stepper/Stepper.jsx:43-45
Timestamp: 2025-10-24T12:42:48.886Z
Learning: In the InitialClaimFlow ClaimForm Stepper component (src/react/src/components/InitialClaimFlow/ClaimForm/Stepper/Stepper.jsx), the stepper intentionally uses `index < currentStep` for the `isClickable` check rather than `completedSteps.includes(index)` to prevent users from jumping forward to completed future steps when navigating back, enforcing a linear backward-only navigation pattern.

Applied to files:

• src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx

🧬 Code graph analysis (2)

src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx (2)

src/react/src/components/InitialClaimFlow/ClaimForm/hooks.js (3)

• useClaimForm (67-140)
• useClaimForm (67-140)
• handleBlur (112-114)

src/react/src/components/InitialClaimFlow/ClaimForm/constants.js (2)

• STEP_ICONS (42-47)
• STEP_ICONS (42-47)

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx (3)

src/react/src/components/InitialClaimFlow/ClaimForm/hooks.js (1)

• handleBlur (112-114)

src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx (1)

• mapStateToProps (352-398)

src/react/src/components/InitialClaimFlow/HOCs/withScrollReset.jsx (1)

• withScrollReset (5-19)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (14)

• GitHub Check: Cursor Bugbot
• GitHub Check: get-base-branch-countries-cov
• GitHub Check: get-base-branch-contricleaner-cov
• GitHub Check: run-countries-code-quality
• GitHub Check: run-flake8-linter
• GitHub Check: run-eslint-linter-and-prettier-formatter
• GitHub Check: get-base-branch-django-cov
• GitHub Check: run-dd-code-quality
• GitHub Check: run-contricleaner-code-quality
• GitHub Check: run-integration-test-code-quality
• GitHub Check: run-django-code-quality
• GitHub Check: get-base-branch-dd-cov
• GitHub Check: run-fe-code-quality
• GitHub Check: get-base-branch-fe-cov

🔇 Additional comments (4)

src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx (3)

131-137: handleBlur propagation aligns with form UX.

Passing handleBlur from the hook down to steps matches the required-field pattern for validation. Looks good. Based on learnings.

Also applies to: 264-269

---

241-245: Stepper navigation hook-up is consistent.

Using onStepClick={setStep} works with the Stepper’s “index < currentStep” rule to prevent jumping forward. Based on learnings.

---

248-251: Verify Typography variant.

variant="title" can be deprecated in some MUI setups. If you see warnings, switch to variant="h6" with theme typography variant mapping.

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx (1)

66-69: Ineligible selection preserves prior valid value—OK.

Dialog open without mutating relationship, and close leaves prior valid choice intact, addressing the earlier reset issue.

If you have tests around this, consider asserting:

• selecting valid -> value set
• selecting partner -> dialog opens and value unchanged
• closing dialog -> value remains the prior valid option

Also applies to: 110-120

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx (2)

62-65: Consider simplifying the error check.

The !selectedRelationship condition appears redundant since errors?.relationship should already be truthy when the required field is empty (per Formik validation). Simplifying to just check touched?.relationship && errors?.relationship would align with standard Formik error handling patterns.

 const isRelationshipError = Boolean(
-    touched?.relationship &&
-        (errors?.relationship || !selectedRelationship),
+    touched?.relationship && errors?.relationship,
 );

---

130-160: Use classes instead of inline styles for consistency.

Lines 135 and 144 have inline styles that duplicate the dialogBodyText and dialogActions styles already defined in the eligibilityStepStyles object. Use the classes prop for consistency with the rest of the component.

 <DialogContent>
     <Typography
         variant="body1"
-        style={{ textAlign: 'center', fontSize: '16px' }}
+        className={classes.dialogBodyText}
     >
         You are not eligible to file a claim for this location.
         Only the owner, manager, authorized employee, or a
         parent company representative of the production location
         can submit a claim. Please ask the production location
         to claim directly.
     </Typography>
 </DialogContent>
-<DialogActions style={{ justifyContent: 'center' }}>
+<DialogActions className={classes.dialogActions}>
     <Button
         variant="contained"

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between eb69a29 and a2e4b32.

📒 Files selected for processing (1)

• src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-10-24T13:01:46.846Z

Learnt from: vlad-shapik
PR: opensupplyhub/open-supply-hub#775
File: src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep.jsx:88-109
Timestamp: 2025-10-24T13:01:46.846Z
Learning: In the InitialClaimFlow ClaimForm steps (src/react/src/components/InitialClaimFlow/ClaimForm/Steps/), optional TextField components intentionally do not include the onBlur={handleBlur} handler, while required fields do include it. This is expected behavior for the claim form validation UX.

Applied to files:

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

🧬 Code graph analysis (1)

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx (4)

src/react/src/components/InitialClaimFlow/ClaimForm/hooks.js (1)

• handleBlur (112-114)

src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx (1)

• mapStateToProps (352-398)

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/styles.js (1)

• eligibilityStepStyles (3-94)

src/react/src/components/InitialClaimFlow/HOCs/withScrollReset.jsx (1)

• withScrollReset (5-19)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Cursor Bugbot

🔇 Additional comments (5)

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx (5)

1-18: LGTM!

All imports are properly used throughout the component.

---

20-43: LGTM!

The relationship options are well-defined with clear, descriptive labels that properly communicate the requirements for each relationship type.

---

67-74: LGTM!

Event handlers are correctly implemented. The ineligible dialog close handler appropriately preserves any previously selected valid relationship value.

---

76-127: LGTM!

The account info display provides good fallback text, and the relationship selector correctly implements:

• Accessibility attributes (aria-label, id, name)
• Blur handling for required field validation (consistent with project patterns per learnings)
• Ineligible option handling that preserves valid selections

Based on learnings

---

165-196: LGTM!

PropTypes are comprehensive and cover all used props. The Redux mapping correctly extracts user authentication data with appropriate optional chaining for safety.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx (1)

106-136: Consider using the defined styles from styles.js.

The dialog implementation is functionally correct, but lines 111 and 120 use inline styles that duplicate dialogBodyText and dialogActions styles already defined in the imported eligibilityStepStyles. Using the defined classes would improve consistency.

Apply this diff to use the defined styles:

                 <DialogContent>
                     <Typography
                         variant="body1"
-                        style={{ textAlign: 'center', fontSize: '16px' }}
+                        className={classes.dialogBodyText}
                     >
                         You are not eligible to file a claim for this location.
                         Only the owner, manager, authorized employee, or a
                         parent company representative of the production location
                         can submit a claim. Please ask the production location
                         to claim directly.
                     </Typography>
                 </DialogContent>
-                <DialogActions style={{ justifyContent: 'center' }}>
+                <DialogActions className={classes.dialogActions}>
                     <Button

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a2e4b32 and 5ec4498.

📒 Files selected for processing (2)

• src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx (1 hunks)
• src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/constants.js (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📚 Learning: 2025-10-24T13:01:46.846Z

Learnt from: vlad-shapik
PR: opensupplyhub/open-supply-hub#775
File: src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep.jsx:88-109
Timestamp: 2025-10-24T13:01:46.846Z
Learning: In the InitialClaimFlow ClaimForm steps (src/react/src/components/InitialClaimFlow/ClaimForm/Steps/), optional TextField components intentionally do not include the onBlur={handleBlur} handler, while required fields do include it. This is expected behavior for the claim form validation UX.

Applied to files:

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

📚 Learning: 2025-10-24T12:42:48.886Z

Learnt from: vlad-shapik
PR: opensupplyhub/open-supply-hub#775
File: src/react/src/components/InitialClaimFlow/ClaimForm/Stepper/Stepper.jsx:43-45
Timestamp: 2025-10-24T12:42:48.886Z
Learning: In the InitialClaimFlow ClaimForm Stepper component (src/react/src/components/InitialClaimFlow/ClaimForm/Stepper/Stepper.jsx), the stepper intentionally uses `index < currentStep` for the `isClickable` check rather than `completedSteps.includes(index)` to prevent users from jumping forward to completed future steps when navigating back, enforcing a linear backward-only navigation pattern.

Applied to files:

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

🧬 Code graph analysis (1)

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx (4)

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/constants.js (1)

• RELATIONSHIP_OPTIONS (1-24)

src/react/src/components/InitialClaimFlow/ClaimForm/hooks.js (1)

• handleBlur (112-114)

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/styles.js (1)

• eligibilityStepStyles (3-94)

src/react/src/components/InitialClaimFlow/HOCs/withScrollReset.jsx (1)

• withScrollReset (5-19)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Cursor Bugbot

🔇 Additional comments (7)

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/constants.js (1)

1-26: LGTM!

The relationship options are well-defined with clear, user-friendly labels. The structure is consistent and covers the various relationship types needed for claim eligibility determination.

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx (6)

1-19: LGTM!

All imports are properly organized and utilized within the component.

---

31-41: LGTM!

The state management and validation logic are correctly implemented. The error detection properly handles the required relationship field by checking both validation errors and empty selections only when the field has been touched.

---

43-50: LGTM!

Event handlers are correctly implemented. The handleCloseIneligibleDialog preserves the previously selected valid relationship (as discussed in past reviews), and navigation logic is straightforward.

---

55-73: LGTM!

Account information display is well-structured with appropriate fallback values for missing data.

---

75-103: LGTM!

The relationship selection is properly implemented with:

• Accessibility support via aria-label
• Correct onBlur handling for validation (as per learnings for required fields)
• Logic that preserves valid selections when ineligible options are chosen
• Proper error styling integration

---

141-172: LGTM!

PropTypes are comprehensive and properly defined (past review feedback addressed). The Redux connection and HOC composition are correctly implemented. The mapStateToProps appropriately extracts user data from the auth state.

[roman-stolar]

LGTM

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (4)

src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx (4)

58-66: Simplify icon resolution (optional).
Current approach works. To reduce indirection:

• Option A: freeze the mapping to avoid accidental mutation.
• Option B: compute the component inline where used and drop the helper.

Example (no behavior change):

const iconMapping = Object.freeze({ Security, People, Language, Business });

Or:

const Icon = iconMapping[STEP_ICONS[activeStep]] || Security;
// then render: <Icon />

---

250-255: Drop the IIFE for rendering the icon (optional).
Inline element creation is simpler and avoids allocating a function each render.

Apply this diff:

-                            {(() => {
-                                const IconName = getIconComponent(
-                                    STEP_ICONS[activeStep],
-                                );
-                                return <IconName />;
-                            })()}
+                            {React.createElement(
+                                getIconComponent(STEP_ICONS[activeStep]),
+                            )}

---

206-216: Ensure Formik errors populate immediately on validation failure.
After marking fields touched, explicitly trigger validation and set errors from Yup so messages render without relying on internal timing.

Apply this diff:

-        claimForm.setTouched({ ...claimForm.touched, ...touchedFields });
+        claimForm.setTouched(
+            { ...claimForm.touched, ...touchedFields },
+            true,
+        );

         // Validate only the current step's fields, not the entire form.
         try {
             await schema.validate(claimForm.values, { abortEarly: false });
             // If validation passes, proceed to next step.
             markComplete(activeStep);
             const nextStepIndex = getNextStep(activeStep);
             setStep(nextStepIndex);
-        } catch (validationErrors) {
-            // Validation failed for current step, stay on this step.
-            // Errors will be displayed via Formik's error state.
+        } catch (err) {
+            // Validation failed; surface Yup errors in Formik immediately.
+            if (err && Array.isArray(err.inner)) {
+                const fieldErrors = err.inner.reduce((acc, e) => {
+                    if (e.path && !acc[e.path]) acc[e.path] = e.message;
+                    return acc;
+                }, {});
+                claimForm.setErrors({ ...claimForm.errors, ...fieldErrors });
+            }
+            // Stay on this step.
         }

Also applies to: 198-205

---

125-129: Placeholder console/alert — remove or guard before merge.
Avoid shipping noisy logs/UI alerts; consider feature flagging or wrapping with process.env.NODE_ENV !== 'production'.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6f16db4 and a5cbeaa.

📒 Files selected for processing (3)

• src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx (6 hunks)
• src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx (1 hunks)
• src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/styles.js (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/styles.js
• src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx

🧰 Additional context used

🧠 Learnings (2)

📚 Learning: 2025-10-24T13:01:46.846Z

Learnt from: vlad-shapik
PR: opensupplyhub/open-supply-hub#775
File: src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep.jsx:88-109
Timestamp: 2025-10-24T13:01:46.846Z
Learning: In the InitialClaimFlow ClaimForm steps (src/react/src/components/InitialClaimFlow/ClaimForm/Steps/), optional TextField components intentionally do not include the onBlur={handleBlur} handler, while required fields do include it. This is expected behavior for the claim form validation UX.

Applied to files:

• src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx

📚 Learning: 2025-10-24T12:42:48.886Z

Learnt from: vlad-shapik
PR: opensupplyhub/open-supply-hub#775
File: src/react/src/components/InitialClaimFlow/ClaimForm/Stepper/Stepper.jsx:43-45
Timestamp: 2025-10-24T12:42:48.886Z
Learning: In the InitialClaimFlow ClaimForm Stepper component (src/react/src/components/InitialClaimFlow/ClaimForm/Stepper/Stepper.jsx), the stepper intentionally uses `index < currentStep` for the `isClickable` check rather than `completedSteps.includes(index)` to prevent users from jumping forward to completed future steps when navigating back, enforcing a linear backward-only navigation pattern.

Applied to files:

• src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx

🧬 Code graph analysis (1)

src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx (2)

src/react/src/components/InitialClaimFlow/ClaimForm/hooks.js (3)

• useClaimForm (67-140)
• useClaimForm (67-140)
• handleBlur (112-114)

src/react/src/components/InitialClaimFlow/ClaimForm/constants.js (2)

• STEP_ICONS (42-47)
• STEP_ICONS (42-47)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (14)

• GitHub Check: run-fe-code-quality
• GitHub Check: run-countries-code-quality
• GitHub Check: run-integration-test-code-quality
• GitHub Check: run-eslint-linter-and-prettier-formatter
• GitHub Check: run-contricleaner-code-quality
• GitHub Check: run-django-code-quality
• GitHub Check: get-base-branch-countries-cov
• GitHub Check: get-base-branch-fe-cov
• GitHub Check: get-base-branch-django-cov
• GitHub Check: run-flake8-linter
• GitHub Check: run-bash-script-linter
• GitHub Check: run-dd-code-quality
• GitHub Check: get-base-branch-contricleaner-cov
• GitHub Check: get-base-branch-dd-cov

🔇 Additional comments (6)

src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx (6)

10-13: Icon imports look correct for MUI v3.
All four icons resolve to valid components and match usage below.

---

16-16: Updated EligibilityStep path — verify test/mocks reflect new location.
Looks right; confirm unit tests and any Jest moduleNameMapper entries use Steps/EligibilityStep/EligibilityStep.

---

40-40: STEP_ICONS integration — ensure keys match imported icon names.
If a mismatch occurs, getIconComponent falls back to Security; verify this is intentional.

---

131-137: Plumbing handleBlur from the hook is good.
Matches our form UX pattern: required fields attach onBlur, optional fields do not. Based on learnings.

---

248-248: Style rename to titleStyles — LGTM.
Matches the new styles API.

---

264-264: Passing handleBlur to StepComponent — LGTM.
Step components should attach it only for required fields. Based on learnings.

[cursor]

Bug: Stale State in Tests Masks Component Bugs

The test's defaultPreloadedState still uses old field names (position, yearsAtCompany) that were removed from the ClaimFormReducer. The reducer now initializes formData with relationship: null instead. This causes the test to use stale state that doesn't match the actual component's data structure, potentially masking bugs or causing tests to behave unexpectedly.

src/react/src/__tests__/components/ClaimForm.test.js#L51-L59

open-supply-hub/src/react/src/__tests__/components/ClaimForm.test.js

Lines 51 to 59 in 022e6c3

	formData: {
	position: '',
	yearsAtCompany: '',
	contactEmail: '',
	contactPhone: '',
	businessName: '',
	businessWebsite: '',
	numberOfWorkers: '',
	additionalNotes: '',

 

---

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
2 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx (1)

35-35: Prefer optional chaining.

The expression can be simplified using modern JavaScript syntax.

Apply this diff:

-    const selectedRelationship = (formData && formData.relationship) || null;
+    const selectedRelationship = formData?.relationship || null;

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3555489 and 022e6c3.

📒 Files selected for processing (2)

• src/react/src/__tests__/components/EligibilityStep.test.js (1 hunks)
• src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/react/src/tests/components/EligibilityStep.test.js

🧰 Additional context used

🧠 Learnings (2)

📚 Learning: 2025-10-24T13:01:46.846Z

Learnt from: vlad-shapik
PR: opensupplyhub/open-supply-hub#775
File: src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep.jsx:88-109
Timestamp: 2025-10-24T13:01:46.846Z
Learning: In the InitialClaimFlow ClaimForm steps (src/react/src/components/InitialClaimFlow/ClaimForm/Steps/), optional TextField components intentionally do not include the onBlur={handleBlur} handler, while required fields do include it. This is expected behavior for the claim form validation UX.

Applied to files:

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

📚 Learning: 2025-10-24T12:42:48.886Z

Learnt from: vlad-shapik
PR: opensupplyhub/open-supply-hub#775
File: src/react/src/components/InitialClaimFlow/ClaimForm/Stepper/Stepper.jsx:43-45
Timestamp: 2025-10-24T12:42:48.886Z
Learning: In the InitialClaimFlow ClaimForm Stepper component (src/react/src/components/InitialClaimFlow/ClaimForm/Stepper/Stepper.jsx), the stepper intentionally uses `index < currentStep` for the `isClickable` check rather than `completedSteps.includes(index)` to prevent users from jumping forward to completed future steps when navigating back, enforcing a linear backward-only navigation pattern.

Applied to files:

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

🧬 Code graph analysis (1)

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx (5)

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/constants.js (1)

• RELATIONSHIP_OPTIONS (1-24)

src/react/src/components/InitialClaimFlow/ClaimForm/hooks.js (1)

• handleBlur (112-114)

src/react/src/components/Contribute/InputErrorText.jsx (1)

• InputErrorText (8-15)

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/styles.js (1)

• eligibilityStepStyles (3-97)

src/react/src/components/InitialClaimFlow/HOCs/withScrollReset.jsx (1)

• withScrollReset (5-19)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (14)

• GitHub Check: Cursor Bugbot
• GitHub Check: run-eslint-linter-and-prettier-formatter
• GitHub Check: run-contricleaner-code-quality
• GitHub Check: run-flake8-linter
• GitHub Check: run-dd-code-quality
• GitHub Check: run-countries-code-quality
• GitHub Check: get-base-branch-contricleaner-cov
• GitHub Check: get-base-branch-countries-cov
• GitHub Check: get-base-branch-dd-cov
• GitHub Check: run-integration-test-code-quality
• GitHub Check: run-django-code-quality
• GitHub Check: get-base-branch-django-cov
• GitHub Check: run-fe-code-quality
• GitHub Check: get-base-branch-fe-cov

🔇 Additional comments (3)

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep/EligibilityStep.jsx (3)

1-21: LGTM!

The imports are well-organized and all dependencies are properly included.

---

53-110: LGTM!

The form rendering logic is well-implemented:

• Account information displays with proper fallbacks
• The onBlur handler is correctly applied to the required field (Based on learnings)
• Error validation and display logic is consistent with the form's validation pattern
• The onChange handler properly handles ineligible selections by opening a dialog while preserving any previously valid selection

---

147-178: LGTM!

The PropTypes definitions, default props, and Redux integration are well-structured. The HOC composition order (connect → withStyles → withScrollReset) is appropriate.

[vlad-shapik]

LGTM
Nice work💥

[roman-stolar]

Re-Approved