fix: fields for opens at and expires at on new form marked as mandatory

src/components/mui/__tests__/mui-formik-datepicker.test.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Formik, Form } from "formik";
+import "@testing-library/jest-dom";
+import MuiFormikDatepicker from "../formik-inputs/mui-formik-datepicker";
+
+const renderWithFormik = (props, initialValues = { test_date: null }) =>
+  render(
+    <Formik
+      initialValues={initialValues}
+      validate={(values) => {
+        const errors = {};
+        if (!values.test_date) {
+          errors.test_date = "This field is required";
+        }
+        return errors;
+      }}
+      onSubmit={jest.fn()}
+    >
+      <Form>
+        <MuiFormikDatepicker name="test_date" label="Test Date" {...props} />
+      </Form>
+    </Formik>
+  );
+
+describe("MuiFormikDatepicker", () => {
+  test("shows required marker in label", () => {
+    renderWithFormik({ required: true });
+
+    expect(screen.getByLabelText("Test Date *")).toBeInTheDocument();
+  });
+
+  test("shows validation error when blurring without value", async () => {
+    renderWithFormik({ required: true });
+
+    expect(
+      screen.queryByText("This field is required")
+    ).not.toBeInTheDocument();
+
+    const user = userEvent.setup();
+    const input = screen.getByLabelText("Test Date *");
+    await user.click(input);
+    await user.tab();
+
+    await waitFor(() => {
+      expect(screen.getByText("This field is required")).toBeInTheDocument();
+    });
+  });
+});

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

@@ -8,15 +8,21 @@ import { useField } from "formik";
 const MuiFormikDatepicker = ({ name, label, required, ...props }) => {
   const [field, meta, helpers] = useField(name);
   const requiredLabel = `${label} *`;
+  const handleBlur = () => {
+    helpers.setTouched(true, true);
+  };
+
   return (
     <LocalizationProvider dateAdapter={AdapterMoment}>
       <DatePicker
         value={field.value}
         onChange={helpers.setValue}
+        onClose={handleBlur}
         slotProps={{
           textField: {
             name,
             label: required ? requiredLabel : label,
+            onBlur: handleBlur,
             error: meta.touched && Boolean(meta.error),
             helperText: meta.touched && meta.error,
             fullWidth: true

src/pages/sponsors/sponsor-forms-tab/components/customized-form/customized-form.js

@@ -134,6 +134,7 @@ const CustomizedForm = ({
                 label={T.translate(
                   "edit_sponsor.forms_tab.customized_form.opens_at"
                 )}
+                required
               />
             </Grid2>
             <Grid2 size={4}>
@@ -142,6 +143,7 @@ const CustomizedForm = ({
                 label={T.translate(
                   "edit_sponsor.forms_tab.customized_form.expires_at"
                 )}
+                required
               />
             </Grid2>
             <Grid2 size={12}>