86b883b71 - Add Numeric Validation for Quantities Fields

[niko-exo]

ref: https://app.clickup.com/t/86b883b71

86b883b71 - Add Numeric Validation for Quantities Fields

Changelog

• Add MuiFormikQuantityField
• Unit tests
• Use new component on forms.
• Add validation helper

Links

86b883b71 - Add Numeric Validation for Quantities Fields

Evidence

Summary by CodeRabbit

Release Notes

• New Features
  • Quantity input fields now enforce numeric-only entry and automatically filter invalid characters
  • Enhanced numeric input handling applied to sponsor and inventory forms for improved data entry

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR introduces a new MuiFormikQuantityField component that wraps MuiFormikTextField for numeric-only inputs. The component blocks invalid numeric characters (e, E, +, -) via keyboard interception and enforces minimum value constraints. A corresponding quantityValidation validator is added, and the component is integrated into two sponsor-related forms.

Changes

Cohort / File(s)	Summary
New Quantity Field Component src/components/mui/formik-inputs/mui-formik-quantity-field.js	Introduces reusable numeric input component with key blocking for invalid characters (e, E, +, -), type="number", and min=0 constraint via inputProps. Forwards arbitrary props to underlying MuiFormikTextField.
Component Tests src/components/mui/__tests__/mui-formik-quantity-field.test.js	Adds test coverage verifying the component accepts numeric input and filters non-numeric characters (e.g., "123eEe45" → 12345) when submitted via Formik.
Validation Utility src/utils/yup.js	Exports new quantityValidation() function that validates positive numbers with required value enforcement using Yup schema.
Form Integration src/pages/sponsors-global/form-templates/sponsor-inventory-popup.js	Replaces three MuiFormikTextField fields (default_quantity, quantity_limit_per_sponsor, quantity_limit_per_show) with MuiFormikQuantityField.
Form Integration src/pages/sponsors/sponsor-form-item-list-page/components/sponsor-form-item-form.js	Replaces three quantity fields with MuiFormikQuantityField and updates default_quantity validation from positiveNumberValidation to quantityValidation.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• #746: Adds identical key-blocking logic for numeric inputs and introduces numeric validators in yup utilities
• #743: Modifies the same sponsor-form-item-form component's quantity field handling with different approach

Suggested reviewers

• smarcet

Poem

🐰 A field for numbers, shiny and clean,
No pesky letters e, E, between!
Quantities blocked from the sums that they foil,
One component to bind them all—no toil!

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add Numeric Validation for Quantities Fields' accurately describes the main objective of the pull request, which introduces numeric validation and a new MuiFormikQuantityField component for quantity inputs.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/components/mui/formik-inputs/mui-formik-quantity-field.js`:
- Around line 7-19: The onKeyDown filter in MuiFormikQuantityField prevents
blocked keys (BLOCKED_KEYS) but paste and drop can still inject
scientific-notation characters; update the MuiFormikQuantityField props passed
to MuiFormikTextField to add onPaste and onDrop handlers that inspect the
pasted/dropped string and if it contains any BLOCKED_KEYS characters or
scientific-notation patterns (e or E with optional sign) call preventDefault()
and stopImmediatePropagation(), otherwise allow the input; reference the
component name MuiFormikQuantityField, the child MuiFormikTextField and the
BLOCKED_KEYS constant when making the change.

In `@src/utils/yup.js`:
- Around line 56-61: The quantityValidation() schema currently uses
yup.number().positive() which rejects 0 and allows decimals, creating a mismatch
with the UI (min: 0) and other validators; replace its implementation to use the
shared positiveNumberValidation() helper (the same used by
quantity_limit_per_sponsor and quantity_limit_per_show) so it enforces integer
and min(0) semantics consistent with the UI and other validators; locate and
swap the body of quantityValidation to delegate to positiveNumberValidation() or
mirror its .integer().min(0) rules and reuse the existing translation keys for
error messages.

♻️ Duplicate comments (1)

src/pages/sponsors/sponsor-form-item-list-page/components/sponsor-form-item-form.js (1)

36-48: Use of quantityValidation inherits the validator semantics.

See the note on quantityValidation in src/utils/yup.js; the same 0/decimal vs integer concern applies here.

🧹 Nitpick comments (1)

src/pages/sponsors/sponsor-form-item-list-page/components/sponsor-form-item-form.js (1)

124-155: Avoid overriding MuiFormikQuantityField defaults.

Passing type and inputProps here overrides the component’s inputMode and duplicates its own defaults. Consider relying on the wrapper or explicitly merging inputProps.

♻️ Streamlined usage

               <MuiFormikQuantityField
                 name="quantity_limit_per_show"
                 label={T.translate(
                   "sponsor_form_item_list.edit_item.quantity_limit_per_show"
                 )}
                 fullWidth
-                type="number"
-                inputProps={{ min: 0 }}
               />
...
               <MuiFormikQuantityField
                 name="quantity_limit_per_sponsor"
                 label={T.translate(
                   "sponsor_form_item_list.edit_item.quantity_limit_per_sponsor"
                 )}
                 fullWidth
-                type="number"
-                inputProps={{ min: 0 }}
               />
...
               <MuiFormikQuantityField
                 name="default_quantity"
                 label={T.translate(
                   "sponsor_form_item_list.edit_item.default_quantity"
                 )}
                 fullWidth
-                type="number"
-                inputProps={{ min: 0 }}
                 required
               />

[smarcet]

@niko-exo please dont change the yup validation positiveNumberValidation is the correct one
the fields does not allows decimals

[smarcet]

@niko-exo please review comments