86b7gvthp - Feature: add asterisks to mandatory fields and change title on update form

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

@@ -5,8 +5,9 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
 import { useField } from "formik";
 
-const MuiFormikDatepicker = ({ name, label }) => {
+const MuiFormikDatepicker = ({ name, label, required }) => {
   const [field, meta, helpers] = useField(name);
+  const requiredLabel = `${label} *`;
   return (
     <LocalizationProvider dateAdapter={AdapterMoment}>
       <DatePicker
@@ -15,7 +16,7 @@ const MuiFormikDatepicker = ({ name, label }) => {
         slotProps={{
           textField: {
             name,
-            label,
+            label: required ? requiredLabel : label,
             error: meta.touched && Boolean(meta.error),
             helperText: meta.touched && meta.error,
             fullWidth: true,
@@ -29,7 +30,8 @@ const MuiFormikDatepicker = ({ name, label }) => {
 
 MuiFormikDatepicker.propTypes = {
   name: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired
+  label: PropTypes.string.isRequired,
+  required: PropTypes.bool
 };
 
 export default MuiFormikDatepicker;

src/i18n/en.json

@@ -2505,7 +2505,10 @@
       "apply": "Apply"
     },
     "form_template_popup": {
-      "title": "Create New Form Template",
+      "title": {
+        "new": "Create New Form Template",
+        "edit": "Edit Form"
+      },
       "code": "Code",
       "name": "Name",
       "sponsorship": "Always apply to",

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

@@ -116,6 +116,7 @@ const FormTemplateForm = ({
                 label={T.translate(
                   "sponsor_forms.form_template_popup.opens_at"
                 )}
+                required
               />
             </Grid2>
             <Grid2 size={4}>
@@ -124,6 +125,7 @@ const FormTemplateForm = ({
                 label={T.translate(
                   "sponsor_forms.form_template_popup.expires_at"
                 )}
+                required
               />
             </Grid2>
             <Grid2 size={12}>

src/pages/sponsors/sponsor-forms-list-page/components/form-template/form-template-popup.js

@@ -28,7 +28,8 @@ const FormTemplatePopup = ({
   getSponsorships,
   resetFormTemplate,
   saveFormTemplate,
-  updateFormTemplate
+  updateFormTemplate,
+  edit
 }) => {
   useEffect(() => {
     getSponsorships(1, MAX_PER_PAGE);
@@ -63,7 +64,11 @@ const FormTemplatePopup = ({
         component="div"
       >
         <Typography variant="h5">
-          {T.translate("sponsor_forms.form_template_popup.title")}
+          {T.translate(
+            edit
+              ? "sponsor_forms.form_template_popup.title.edit"
+              : "sponsor_forms.form_template_popup.title.new"
+          )}
         </Typography>
         <IconButton size="large" sx={{ p: 0 }} onClick={handleClose}>
           <CloseIcon fontSize="large" />
@@ -82,7 +87,8 @@ const FormTemplatePopup = ({
 
 FormTemplatePopup.propTypes = {
   open: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired,
+  edit: PropTypes.bool.isRequired
 };
 
 const mapStateToProps = ({ sponsorFormsListState, currentSummitState }) => ({

src/pages/sponsors/sponsor-forms-list-page/index.js

@@ -89,7 +89,7 @@ const SponsorFormsListPage = ({
 
   const handleRowEdit = (row) => {
     getSponsorForm(row.id).then(() => {
-      setOpenPopup("new");
+      setOpenPopup("edit");
     });
   };
 
@@ -250,8 +250,9 @@ const SponsorFormsListPage = ({
         onClose={() => setOpenPopup(null)}
       />
       <FormTemplatePopup
-        open={openPopup === "new"}
+        open={openPopup === "new" || openPopup === "edit"}
         onClose={() => setOpenPopup(null)}
+        edit={openPopup === "edit"}
       />
     </div>
   );