feat: sponsor media upload grids

Author: santipalenque

src/i18n/en.json

@@ -2487,6 +2487,7 @@
       "alert_info": "Here you can see the status of this Sponsor's Media Uploads. If an additional file upload is required, it must be requested from the specific page where it is needed.",
       "media_upload": "media upload",
       "sponsor_request": "Sponsor Specific Request",
+      "general_request": "General Media Request",
       "add_on": "Add-on",
       "max_size": "Max Size",
       "format": "Format",

src/pages/sponsors/sponsor-media-upload-tab/index.js

@@ -18,10 +18,10 @@ import { Box, Chip, IconButton } from "@mui/material";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import DownloadIcon from "@mui/icons-material/Download";
 import DeleteIcon from "@mui/icons-material/Delete";
-import EditIcon from "@mui/icons-material/Edit";
+import VisibilityIcon from "@mui/icons-material/Visibility";
 import {
-  getSponsorMURequests,
-  getGeneralMURequests
+  getGeneralMURequests,
+  getSponsorMURequests
 } from "../../../actions/sponsor-mu-actions";
 import CustomAlert from "../../../components/mui/custom-alert";
 import MuiTable from "../../../components/mui/table/mui-table";
@@ -102,6 +102,19 @@ const SponsorMediaUploadTab = ({
     const onDelete = isSponsor ? handleSponsorDelete : handleGeneralDelete;
     const onUpload = isSponsor ? handleSponsorUpload : handleGeneralUpload;
 
+    const getChipColor = (status) => {
+      switch (status) {
+        case SPONSOR_MEDIA_UPLOAD_STATUS.DEADLINE_ALERT:
+          return "warning";
+        case SPONSOR_MEDIA_UPLOAD_STATUS.DEADLINE_MISSED:
+          return "error";
+        case SPONSOR_MEDIA_UPLOAD_STATUS.COMPLETE:
+          return "success";
+        default:
+          return "default";
+      }
+    };
+
     return [
       {
         columnKey: "name",
@@ -131,11 +144,8 @@ const SponsorMediaUploadTab = ({
         sortable: true,
         render: (row) => (
           <Chip
-            color={
-              row.status === SPONSOR_MEDIA_UPLOAD_STATUS.PENDING
-                ? "warning"
-                : "success"
-            }
+            variant="outlined"
+            color={getChipColor(row.status)}
             label={row.status}
           />
         )
@@ -148,10 +158,10 @@ const SponsorMediaUploadTab = ({
         render: (row) => (
           <IconButton
             size="large"
-            disabled={!!row.file}
+            disabled={!row.media_upload}
             onClick={() => onView(row)}
           >
-            <EditIcon fontSize="large" />
+            <VisibilityIcon fontSize="large" />
           </IconButton>
         )
       },
@@ -163,7 +173,7 @@ const SponsorMediaUploadTab = ({
         render: (row) => (
           <IconButton
             size="large"
-            disabled={!!row.file}
+            disabled={!row.media_upload}
             onClick={() => onDownload(row)}
           >
             <DownloadIcon fontSize="large" />
@@ -176,7 +186,7 @@ const SponsorMediaUploadTab = ({
         width: 80,
         align: "center",
         render: (row) => {
-          if (row.file) {
+          if (row.media_upload) {
             return (
               <IconButton size="large" onClick={() => onDelete(row.id)}>
                 <DeleteIcon fontSize="large" />

src/reducers/sponsors/sponsor-page-mu-list-reducer.js

@@ -11,6 +11,7 @@
  * limitations under the License.
  * */
 
+import moment from "moment-timezone";
 import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";
 import { epochToMomentTimeZone } from "openstack-uicore-foundation/lib/utils/methods";
 import { SET_CURRENT_SUMMIT } from "../../actions/summit-actions";
@@ -20,6 +21,11 @@ import {
   REQUEST_GENERAL_MEDIA_UPLOADS,
   REQUEST_SPONSOR_MEDIA_UPLOADS
 } from "../../actions/sponsor-mu-actions";
+import { bytesToMb } from "../../utils/methods";
+import {
+  DEADLINE_ALERT_DAYS,
+  SPONSOR_MEDIA_UPLOAD_STATUS
+} from "../../utils/constants";
 
 const DEFAULT_STATE = {
   sponsorRequests: {
@@ -43,6 +49,39 @@ const DEFAULT_STATE = {
   summitTZ: ""
 };
 
+const mapMediaObject = (mediaObject, summitTZ) => {
+  const deadline = mediaObject.upload_deadline
+    ? epochToMomentTimeZone(mediaObject.upload_deadline, summitTZ)?.format(
+        "YYYY/MM/DD"
+      )
+    : "N/A";
+
+  let status = SPONSOR_MEDIA_UPLOAD_STATUS.COMPLETE;
+  if (!mediaObject.media_upload) {
+    if (mediaObject.upload_deadline < moment().unix()) {
+      status = SPONSOR_MEDIA_UPLOAD_STATUS.DEADLINE_MISSED;
+    } else if (
+      mediaObject.upload_deadline <
+      moment().add(DEADLINE_ALERT_DAYS, "days").unix()
+    ) {
+      status = SPONSOR_MEDIA_UPLOAD_STATUS.DEADLINE_ALERT;
+    } else {
+      status = SPONSOR_MEDIA_UPLOAD_STATUS.PENDING;
+    }
+  }
+
+  return {
+    id: mediaObject.id,
+    name: mediaObject.name,
+    add_on: mediaObject.add_ons.map((a) => a.name).join(", "),
+    max_size: `${bytesToMb(mediaObject.max_file_size)} MB`,
+    format: mediaObject.file_type?.allowed_extensions || "N/A",
+    media_upload: mediaObject.media_upload,
+    deadline,
+    status
+  };
+};
+
 const sponsorPageMUListReducer = (state = DEFAULT_STATE, action) => {
   const { type, payload } = action;
 
@@ -73,21 +112,9 @@ const sponsorPageMUListReducer = (state = DEFAULT_STATE, action) => {
         last_page: lastPage
       } = payload.response;
 
-      const requests = payload.response.data.map((a) => {
-        const expiresAt = a.expires_at
-          ? epochToMomentTimeZone(a.expires_at, state.summitTZ)?.format(
-              "YYYY/MM/DD"
-            )
-          : "N/A";
-
-        return {
-          id: a.id,
-          code: a.code,
-          name: a.name,
-          items_count: a.items_count,
-          expires_at: expiresAt
-        };
-      });
+      const requests = payload.response.data.map((a) =>
+        mapMediaObject(a, state.summitTZ)
+      );
 
       return {
         ...state,
@@ -122,21 +149,9 @@ const sponsorPageMUListReducer = (state = DEFAULT_STATE, action) => {
         last_page: lastPage
       } = payload.response;
 
-      const requests = payload.response.data.map((a) => {
-        const expiresAt = a.expires_at
-          ? epochToMomentTimeZone(a.expires_at, state.summitTZ)?.format(
-              "YYYY/MM/DD"
-            )
-          : "N/A";
-
-        return {
-          id: a.id,
-          code: a.code,
-          name: a.name,
-          items_count: a.items_count,
-          expires_at: expiresAt
-        };
-      });
+      const requests = payload.response.data.map((a) =>
+        mapMediaObject(a, state.summitTZ)
+      );
 
       return {
         ...state,

src/utils/constants.js

@@ -265,6 +265,12 @@ export const SPONSOR_USER_ASSIGNMENT_TYPE = {
 
 export const SPONSOR_MEDIA_UPLOAD_STATUS = {
   PENDING: "PENDING",
-  DEADLINE: "DEADLINE ALERT",
+  DEADLINE_ALERT: "DEADLINE ALERT",
+  DEADLINE_MISSED: "DEADLINE MISSED",
   COMPLETE: "COMPLETE"
 };
+
+// eslint-disable-next-line no-magic-numbers
+export const BYTES_IN_MEGABYTE = 1024 * 1024;
+
+export const DEADLINE_ALERT_DAYS = 3;

src/utils/methods.js

@@ -22,6 +22,7 @@ import * as Sentry from "@sentry/react";
 import T from "i18n-react/dist/i18n-react";
 import {
   BADGE_QR_MINIMUM_EXPECTED_FIELDS,
+  BYTES_IN_MEGABYTE,
   ERROR_CODE_401,
   ERROR_CODE_403,
   ERROR_CODE_412,
@@ -530,3 +531,6 @@ export const formatBadgeQR = (code, summit) => {
 
   return null;
 };
+
+// eslint-disable-next-line no-magic-numbers
+export const bytesToMb = (bytes) => (bytes / BYTES_IN_MEGABYTE).toFixed(2);