feat: page modules generic component, test, adjusting formik inputs

src/actions/page-template-actions.js

@@ -12,6 +12,7 @@
  * */
 
 import T from "i18n-react/dist/i18n-react";
+import moment from "moment-timezone";
 import {
   getRequest,
   putRequest,
@@ -27,7 +28,8 @@ import { getAccessTokenSafely } from "../utils/methods";
 import {
   DEFAULT_CURRENT_PAGE,
   DEFAULT_ORDER_DIR,
-  DEFAULT_PER_PAGE
+  DEFAULT_PER_PAGE,
+  PAGES_MODULE_KINDS
 } from "../utils/constants";
 import { snackbarErrorHandler, snackbarSuccessHandler } from "./base-actions";
 
@@ -143,7 +145,16 @@ export const resetPageTemplateForm = () => (dispatch) => {
 const normalizeEntity = (entity) => {
   const normalizedEntity = { ...entity };
 
-  normalizedEntity.modules = [];
+  normalizedEntity.modules = entity.modules.map((module) => {
+    const normalizedModule = { ...module };
+
+    if (module.kind === PAGES_MODULE_KINDS.MEDIA && module.upload_deadline) {
+      normalizedModule.upload_deadline = moment(module.upload_deadline).unix();
+    }
+    delete normalizedModule._tempId;
+
+    return normalizedModule;
+  });
 
   return normalizedEntity;
 };

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

@@ -5,7 +5,7 @@ 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, ...props }) => {
   const [field, meta, helpers] = useField(name);
   return (
     <LocalizationProvider dateAdapter={AdapterMoment}>
@@ -18,10 +18,12 @@ const MuiFormikDatepicker = ({ name, label }) => {
             label,
             error: meta.touched && Boolean(meta.error),
             helperText: meta.touched && meta.error,
-            fullWidth: true,
-            margin: "normal"
+            fullWidth: true
           }
         }}
+        margin="normal"
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
       />
     </LocalizationProvider>
   );

src/components/mui/formik-inputs/mui-formik-radio-group.js

@@ -10,13 +10,19 @@ import {
 } from "@mui/material";
 import { useField } from "formik";
 
-const MuiFormikRadioGroup = ({ name, label, options, ...props }) => {
+const MuiFormikRadioGroup = ({
+  name,
+  label,
+  margin = "normal",
+  options,
+  ...props
+}) => {
   const [field, meta] = useField({ name });
 
   return (
     <FormControl
       fullWidth
-      margin="normal"
+      margin={margin}
       error={meta.touched && Boolean(meta.error)}
     >
       {label && <FormLabel id="radio-group-label">{label}</FormLabel>}
@@ -56,6 +62,7 @@ const MuiFormikRadioGroup = ({ name, label, options, ...props }) => {
 MuiFormikRadioGroup.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.string,
+  margin: PropTypes.string,
   options: PropTypes.array.isRequired
 };
 

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

@@ -5,26 +5,38 @@ import {
   FormHelperText,
   FormControl,
   InputAdornment,
-  IconButton
+  IconButton,
+  InputLabel
 } from "@mui/material";
 import ClearIcon from "@mui/icons-material/Clear";
 import { useField } from "formik";
 
-const MuiFormikSelect = ({ name, children, isClearable, ...rest }) => {
+const MuiFormikSelect = ({ name, label, children, isClearable, ...rest }) => {
   const [field, meta, helpers] = useField(name);
 
   const handleClear = (ev) => {
     ev.stopPropagation();
     helpers.setValue("");
   };
 
+  const hasValue =
+    field.value !== "" && field.value !== undefined && field.value !== null;
+
   return (
     <FormControl fullWidth error={meta.touched && Boolean(meta.error)}>
+      {label && (
+        <InputLabel htmlFor={name} id={`${name}-label`} shrink={hasValue}>
+          {label}
+        </InputLabel>
+      )}
       <Select
         name={name}
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...field}
+        labelId={`${name}-label`}
+        label={label}
         displayEmpty
+        notched={hasValue}
         endAdornment={
           isClearable && field.value ? (
             <InputAdornment position="end" sx={{ mr: 2 }}>

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

@@ -10,45 +10,94 @@ import {
   MAX_INVENTORY_IMAGES_UPLOAD_QTY
 } from "../../../utils/constants";
 
-const MuiFormikUpload = ({ id, name, onImageDeleted }) => {
+const MuiFormikUpload = ({ id, name, onImageDeleted, singleFile = false }) => {
   const [field, meta, helpers] = useField(name);
 
   console.log("images: ", field.value);
 
   const mediaType = {
     max_size: MAX_INVENTORY_IMAGE_UPLOAD_SIZE,
-    max_uploads_qty: MAX_INVENTORY_IMAGES_UPLOAD_QTY,
+    max_uploads_qty: singleFile ? 1 : MAX_INVENTORY_IMAGES_UPLOAD_QTY,
     type: {
       allowed_extensions: ALLOWED_INVENTORY_IMAGE_FORMATS
     }
   };
 
-  const getInputValue = () =>
-    field.value?.length > 0
+  const getInputValue = () => {
+    if (singleFile) {
+      if (!field.value || Object.keys(field.value).length === 0) {
+        return [];
+      }
+      return [
+        {
+          ...field.value,
+          filename:
+            field.value.file_name ??
+            field.value.filename ??
+            field.value.file_path
+        }
+      ];
+    }
+    return field.value?.length > 0
       ? field.value.map((img) => ({
           ...img,
           filename: img.filename ?? img.file_path ?? img.file_url
         }))
       : [];
+  };
+
+  const buildFileObject = (response) => {
+    const file = {};
+
+    if (response.id !== undefined) file.id = response.id;
+    if (response.name) file.file_name = response.name;
+    if (response.md5) file.md5 = response.md5;
+    if (response.mime_type) file.mime_type = response.mime_type;
+    if (response.source_bucket) file.bucket = response.source_bucket;
+    if (response.path && response.name)
+      file.file_path = `${response.path}${response.name}`;
+
+    return file;
+  };
 
   const handleUploadComplete = (response) => {
     if (response) {
-      const image = {
-        file_path: `${response.path}${response.name}`,
-        filename: response.name
-      };
-      helpers.setValue([...field.value, image]);
+      console.log("CHJECK RESPONSE", response);
+      const image = buildFileObject(response);
+      if (singleFile) {
+        helpers.setValue(image);
+      } else {
+        helpers.setValue([...(field.value || []), image]);
+      }
       helpers.setTouched(true);
     }
   };
 
   const handleRemove = (imageFile) => {
-    const updated = field.value.filter((i) => i.filename !== imageFile.name);
-    helpers.setValue(updated);
+    if (singleFile) {
+      if (onImageDeleted && field.value?.id) {
+        onImageDeleted(field.value.id);
+      }
+      helpers.setValue(null);
+    } else {
+      const updated = (field.value || []).filter(
+        (i) => i.filename !== imageFile.name
+      );
+      helpers.setValue(updated);
+      if (onImageDeleted) {
+        onImageDeleted(imageFile.id);
+      }
+    }
+  };
 
-    if (onImageDeleted) {
-      onImageDeleted(imageFile.id);
+  const canAddMore = () => {
+    if (singleFile) {
+      return !field.value || Object.keys(field.value).length === 0;
     }
+    return (
+      mediaType.is_editable ||
+      (field.value?.length || 0) < mediaType.max_uploads_qty
+    );
   };
 
   return (
@@ -66,18 +115,16 @@ const MuiFormikUpload = ({ id, name, onImageDeleted }) => {
         postUrl={`${window.FILE_UPLOAD_API_BASE_URL}/api/v1/files/upload`}
         djsConfig={{ withCredentials: true }}
         maxFiles={mediaType.max_uploads_qty}
-        canAdd={
-          mediaType.is_editable ||
-          (field.value?.length || 0) < mediaType.max_uploads_qty
-        }
+        canAdd={canAddMore()}
         parallelChunkUploads
       />
     </>
   );
 };
 
 MuiFormikUpload.propTypes = {
-  name: PropTypes.string.isRequired
+  name: PropTypes.string.isRequired,
+  singleFile: PropTypes.bool
 };
 
 export default MuiFormikUpload;

src/i18n/en.json

@@ -3873,6 +3873,8 @@
     "alert_info": "You can create or archive Pages from the list. To edit a Page click on the item's Edit botton.",
     "code": "Code",
     "name": "Name",
+    "sponsorship": "Always apply to",
+    "all_tiers": "All Tiers",
     "info_mod": "Info Mod",
     "upload_mod": "Upload Mod",
     "download_mod": "Download Mod",
@@ -3885,7 +3887,8 @@
     "add_form_template": "New Form",
     "add_using_global_template": "Using Global Template",
     "placeholders": {
-      "search": "Search"
+      "search": "Search",
+      "sponsorship_type": "Always apply to"
     },
     "page_crud": {
       "title": "Create New Page",
@@ -3895,7 +3898,21 @@
       "no_modules": "No modules added yet.",
       "save": "Save Page",
       "page_saved": "Page saved successfully.",
-      "page_created": "Page created successfully."
+      "page_created": "Page created successfully.",
+      "info_module": "Info Module",
+      "info_content": "Info Content",
+      "document_module": "Document Download Module",
+      "document_name": "Document Name",
+      "description": "Description",
+      "external_url": "External URL",
+      "upload_file": "Upload File",
+      "text_input": "Text input",
+      "media_module": "Media Request Module",
+      "name": "Name",
+      "upload_deadline": "Upload Deadline",
+      "max_file_size": "Max File Size (MB)",
+      "allowed_formats": "Allowed Formats",
+      "module_remove_warning": "Are you sure you want to delete {name}"
     }
   }
 }