86b7yv08q - chore: add validation rate inventory items

src/components/mui/formik-inputs/mui-formik-pricefield.js

@@ -3,6 +3,8 @@ import PropTypes from "prop-types";
 import { InputAdornment } from "@mui/material";
 import MuiFormikTextField from "./mui-formik-textfield";
 
+const BLOCKED_KEYS = ["e", "E", "+", "-"];
+
 const MuiFormikPriceField = ({ name, label, ...props }) => (
   <MuiFormikTextField
     name={name}
@@ -13,6 +15,12 @@ const MuiFormikPriceField = ({ name, label, ...props }) => (
         startAdornment: <InputAdornment position="start">$</InputAdornment>
       }
     }}
+    onKeyDown={(e) => {
+      if (BLOCKED_KEYS.includes(e.key)) {
+        e.nativeEvent.preventDefault();
+        e.nativeEvent.stopImmediatePropagation();
+      }
+    }}
     inputProps={{
       min: 0,
       inputMode: "decimal",

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

@@ -13,7 +13,11 @@ import {
 import T from "i18n-react";
 import * as yup from "yup";
 import { FormikProvider, useFormik } from "formik";
-import { addIssAfterDateFieldValidator } from "../../../../utils/yup";
+import {
+  addIssAfterDateFieldValidator,
+  numberValidation,
+  decimalValidation
+} from "../../../../utils/yup";
 import MuiFormikTextField from "../../../../components/mui/formik-inputs/mui-formik-textfield";
 import AdditionalInputList from "../../components/additional-input-list";
 import useScrollToError from "../../../../hooks/useScrollToError";
@@ -28,19 +32,6 @@ const buildInitialValues = (data) => {
 
 addIssAfterDateFieldValidator();
 
-const numberValidation = () =>
-  yup.number().typeError(T.translate("validation.number"));
-
-const decimalValidation = () =>
-  yup
-    .number()
-    .typeError(T.translate("validation.number"))
-    .min(0, T.translate("validation.number_positive"))
-    .test("max-decimals", T.translate("validation.two_decimals"), (value) => {
-      if (value === undefined || value === null) return true;
-      return /^\d+(\.\d{1,2})?$/.test(value.toString());
-    });
-
 const ItemForm = ({ initialValues, onSubmit }) => {
   const formik = useFormik({
     initialValues: buildInitialValues(initialValues),

src/pages/sponsors_inventory/popup/sponsor-inventory-popup.js

@@ -30,10 +30,12 @@ import {
 import showConfirmDialog from "../../../components/mui/showConfirmDialog";
 import MetaFieldValues from "./meta-field-values";
 import MuiFormikTextField from "../../../components/mui/formik-inputs/mui-formik-textfield";
+import MuiFormikPriceField from "../../../components/mui/formik-inputs/mui-formik-pricefield.js";
 import useScrollToError from "../../../hooks/useScrollToError";
 import MuiFormikSelect from "../../../components/mui/formik-inputs/mui-formik-select";
 import MuiFormikCheckbox from "../../../components/mui/formik-inputs/mui-formik-checkbox";
 import FormikTextEditor from "../../../components/inputs/formik-text-editor";
+import { numberValidation, decimalValidation } from "../../../utils/yup";
 
 const SponsorItemDialog = ({
   open,
@@ -44,19 +46,6 @@ const SponsorItemDialog = ({
   onMetaFieldTypeValueDeleted,
   entity: initialEntity
 }) => {
-  const numberValidation = () =>
-    yup.number().typeError(T.translate("validation.number"));
-
-  const decimalValidation = () =>
-    yup
-      .number()
-      .typeError(T.translate("validation.number"))
-      .min(0, T.translate("validation.number_positive"))
-      .test("max-decimals", T.translate("validation.two_decimals"), (value) => {
-        if (value === undefined || value === null) return true;
-        return /^\d+(\.\d{1,2})?$/.test(value.toString());
-      });
-
   const fieldTypesWithOptions = ["CheckBoxList", "ComboBox", "RadioButtonList"];
 
   const formik = useFormik({
@@ -312,32 +301,29 @@ const SponsorItemDialog = ({
                 <InputLabel htmlFor="early_bird_rate">
                   {T.translate("edit_inventory_item.early_bird_rate")}
                 </InputLabel>
-                <MuiFormikTextField
+                <MuiFormikPriceField
                   variant="outlined"
                   name="early_bird_rate"
-                  formik={formik}
                   fullWidth
                 />
               </Grid2>
               <Grid2 size={4}>
                 <InputLabel htmlFor="standard_rate">
                   {T.translate("edit_inventory_item.standard_rate")}
                 </InputLabel>
-                <MuiFormikTextField
+                <MuiFormikPriceField
                   variant="outlined"
                   name="standard_rate"
-                  formik={formik}
                   fullWidth
                 />
               </Grid2>
               <Grid2 size={4}>
                 <InputLabel htmlFor="onsite_rate">
                   {T.translate("edit_inventory_item.onsite_rate")}
                 </InputLabel>
-                <MuiFormikTextField
+                <MuiFormikPriceField
                   variant="outlined"
                   name="onsite_rate"
-                  formik={formik}
                   fullWidth
                 />
               </Grid2>

src/utils/yup.js

@@ -1,4 +1,5 @@
 import * as yup from "yup";
+import T from "i18n-react";
 
 export const addEmailListValidator = () => {
   yup.addMethod(yup.string, "emailList", function (errorMessage) {
@@ -36,3 +37,16 @@ export const addIssAfterDateFieldValidator = () => {
     });
   });
 };
+
+export const numberValidation = () =>
+  yup.number().typeError(T.translate("validation.number"));
+
+export const decimalValidation = () =>
+  yup
+    .number()
+    .typeError(T.translate("validation.number"))
+    .min(0, T.translate("validation.number_positive"))
+    .test("max-decimals", T.translate("validation.two_decimals"), (value) => {
+      if (value === undefined || value === null) return true;
+      return /^\d+(\.\d{1,2})?$/.test(value.toString());
+    });