@elice/material-assignment 1.240718.3 → 1.240719.0

package/es/components/material-assignment/MaterialAssignmentContent.js

@@ -1,3 +1,5 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React from 'react';
 import { config, getOrgMaterialAssignmentGet, getOrgMaterialAssignmentGradeList, getOrgMaterialAssignmentGradeResultGet, getOrgMaterialAssignmentSubmissionGet } from '@elice/api-client';
 import { Text, Button, Spinner, Vspace, InfoTable, TableNext, Hspace } from '@elice/blocks';
@@ -11,56 +13,77 @@ import MaterialAssignmentContainer from '../shared/MaterialAssignmentContainer.j
 import { DARK_TEXT_TERTIARY_COLOR } from './constants/color.js';
 import MaterialAssignmentUploadModal from './MaterialAssignmentUploadModal.js';
 
-const GRADE_LIST_COUNT = 20;
-const StyledSubmittedText = styled(Text).withConfig({
+var GRADE_LIST_COUNT = 20;
+var StyledSubmittedText = styled(Text).withConfig({
   componentId: "sc-1panlbq-0"
 })(["color:", ";"], colors.green[400]);
-const StyledNoSubmittedText = styled(Text).withConfig({
+var StyledNoSubmittedText = styled(Text).withConfig({
   componentId: "sc-1panlbq-1"
 })(["color:", ";"], colors.orange[400]);
-const StyledTableHeaderCell = styled.td.withConfig({
+var StyledTableHeaderCell = styled.td.withConfig({
   componentId: "sc-1panlbq-2"
 })(["color:", " !important;"], DARK_TEXT_TERTIARY_COLOR);
-const StyledTotalPointText = styled(Text).withConfig({
+var StyledTotalPointText = styled(Text).withConfig({
   componentId: "sc-1panlbq-3"
 })(["color:", ";"], DARK_TEXT_TERTIARY_COLOR);
-const StyledUploadButton = styled(Button).withConfig({
+var StyledUploadButton = styled(Button).withConfig({
   componentId: "sc-1panlbq-4"
 })(["background-color:", ";border-color:", ";"], base.color.primary6, base.color.primary6);
-const MaterialAssignmentContent = ({
-  materialAssignmentId,
-  userId
-}) => {
-  const isReady = useMaterialConfigApiClientUpdate(config.init);
-  const intl = useRawEliceIntl();
-  const {
-    materialAssignment,
-    materialLecturePage,
-    status: assignmentGetStatus,
-    refetch: doGetOrgMaterialAssignmentGet
-  } = useMaterialFetchRaw(enums.LectureMaterialType.Assignment, React.useCallback(signal => getOrgMaterialAssignmentGet({
-    materialAssignmentId
-  }, {
-    signal
-  }), [materialAssignmentId]), isReady);
-  const [assignmentGradeListGetStatus, setAssignmentGradeListGetStatus] = React.useState('idle');
-  const [assignmentGradeResultGetStatus, setAssignmentGradeResultGetStatus] = React.useState('idle');
-  const [assignmentSubmissionGetStatus, setAssignmentSubmissionGetStatus] = React.useState('idle');
-  const [materialAssignmentSubmission, setMaterialAssignmentSubmission] = React.useState();
-  const [materialAssignmentGradeResult, setMaterialAssignmentGradeResult] = React.useState();
-  const [materialAssignmentGradeList, setMaterialAssignmentGradeList] = React.useState();
+var MaterialAssignmentContent = function MaterialAssignmentContent(_ref) {
+  var materialAssignmentId = _ref.materialAssignmentId,
+    userId = _ref.userId;
+  var isReady = useMaterialConfigApiClientUpdate(config.init);
+  var intl = useRawEliceIntl();
+  var _useMaterialFetchRaw = useMaterialFetchRaw(enums.LectureMaterialType.Assignment, React.useCallback(function (signal) {
+      return getOrgMaterialAssignmentGet({
+        materialAssignmentId: materialAssignmentId
+      }, {
+        signal: signal
+      });
+    }, [materialAssignmentId]), isReady),
+    materialAssignment = _useMaterialFetchRaw.materialAssignment,
+    materialLecturePage = _useMaterialFetchRaw.materialLecturePage,
+    assignmentGetStatus = _useMaterialFetchRaw.status,
+    doGetOrgMaterialAssignmentGet = _useMaterialFetchRaw.refetch;
+  var _React$useState = React.useState('idle'),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    assignmentGradeListGetStatus = _React$useState2[0],
+    setAssignmentGradeListGetStatus = _React$useState2[1];
+  var _React$useState3 = React.useState('idle'),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    assignmentGradeResultGetStatus = _React$useState4[0],
+    setAssignmentGradeResultGetStatus = _React$useState4[1];
+  var _React$useState5 = React.useState('idle'),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    assignmentSubmissionGetStatus = _React$useState6[0],
+    setAssignmentSubmissionGetStatus = _React$useState6[1];
+  var _React$useState7 = React.useState(),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    materialAssignmentSubmission = _React$useState8[0],
+    setMaterialAssignmentSubmission = _React$useState8[1];
+  var _React$useState9 = React.useState(),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    materialAssignmentGradeResult = _React$useState10[0],
+    setMaterialAssignmentGradeResult = _React$useState10[1];
+  var _React$useState11 = React.useState(),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    materialAssignmentGradeList = _React$useState12[0],
+    setMaterialAssignmentGradeList = _React$useState12[1];
   /** Is confirm modal visible? */
-  const [showAssignmentSubmitModal, setShowAssignmentSubmitModal] = React.useState(false);
-  const isAssignmentSubmitted = Boolean(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.lastAssignmentSubmissionId);
-  const isAssignmentClosed = materialAssignment && Boolean(materialAssignment.closeDatetime < Date.now());
-  const isAssignmentResultVisible = Boolean(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.scoreFinalizedDatetime);
+  var _React$useState13 = React.useState(false),
+    _React$useState14 = _slicedToArray(_React$useState13, 2),
+    showAssignmentSubmitModal = _React$useState14[0],
+    setShowAssignmentSubmitModal = _React$useState14[1];
+  var isAssignmentSubmitted = Boolean(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.lastAssignmentSubmissionId);
+  var isAssignmentClosed = materialAssignment && Boolean(materialAssignment.closeDatetime < Date.now());
+  var isAssignmentResultVisible = Boolean(materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.scoreFinalizedDatetime);
   //
   //
   //
   /**
    * When Grade_result exist, a comment list is called.
    */
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (!isReady) {
       return;
     }
@@ -71,17 +94,16 @@ const MaterialAssignmentContent = ({
     getOrgMaterialAssignmentGradeList({
       offset: 0,
       count: GRADE_LIST_COUNT,
-      materialAssignmentId,
+      materialAssignmentId: materialAssignmentId,
       filterConditions: {
-        userId
+        userId: userId
       }
-    }).then(({
-      materialAssignmentGrades,
-      materialAssignmentGradeCount
-    }) => {
+    }).then(function (_ref2) {
+      var materialAssignmentGrades = _ref2.materialAssignmentGrades;
+        _ref2.materialAssignmentGradeCount;
       setAssignmentGradeListGetStatus('resolved');
       setMaterialAssignmentGradeList(materialAssignmentGrades);
-    }).catch(error => {
+    }).catch(function (error) {
       console.error(error);
       setAssignmentGradeListGetStatus('rejected');
     });
@@ -89,7 +111,7 @@ const MaterialAssignmentContent = ({
   /**
    * When Grade_result exist, a score is called.
    */
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (!isReady) {
       return;
     }
@@ -98,14 +120,13 @@ const MaterialAssignmentContent = ({
     }
     setAssignmentGradeResultGetStatus('pending');
     getOrgMaterialAssignmentGradeResultGet({
-      materialAssignmentId,
-      userId
-    }).then(({
-      materialAssignmentGradeResult
-    }) => {
+      materialAssignmentId: materialAssignmentId,
+      userId: userId
+    }).then(function (_ref3) {
+      var materialAssignmentGradeResult = _ref3.materialAssignmentGradeResult;
       setAssignmentGradeResultGetStatus('resolved');
       setMaterialAssignmentGradeResult(materialAssignmentGradeResult);
-    }).catch(error => {
+    }).catch(function (error) {
       console.error(error);
       setAssignmentGradeResultGetStatus('rejected');
     });
@@ -113,7 +134,7 @@ const MaterialAssignmentContent = ({
   /**
    * Get information on the assignment submitted
    */
-  React.useEffect(() => {
+  React.useEffect(function () {
     var _a;
     if (!isReady) {
       return;
@@ -126,157 +147,206 @@ const MaterialAssignmentContent = ({
     setAssignmentSubmissionGetStatus('pending');
     getOrgMaterialAssignmentSubmissionGet({
       materialAssignmentSubmissionId: (_a = materialAssignment === null || materialAssignment === void 0 ? void 0 : materialAssignment.lastAssignmentSubmissionId) !== null && _a !== void 0 ? _a : 0
-    }).then(({
-      materialAssignmentSubmission
-    }) => {
+    }).then(function (_ref4) {
+      var materialAssignmentSubmission = _ref4.materialAssignmentSubmission;
       setAssignmentSubmissionGetStatus('resolved');
       setMaterialAssignmentSubmission(materialAssignmentSubmission);
-    }).catch(error => {
+    }).catch(function (error) {
       console.error(error);
       setAssignmentSubmissionGetStatus('rejected');
       setMaterialAssignmentSubmission(undefined);
     });
   }, [isAssignmentSubmitted, isReady, materialAssignment]);
   if (assignmentGetStatus === 'pending' || assignmentGradeListGetStatus === 'pending' || assignmentGradeResultGetStatus === 'pending' || assignmentSubmissionGetStatus === 'pending') {
-    return React.createElement(Spinner, null);
+    return jsx(Spinner, {});
   }
   if (!materialAssignment || assignmentGetStatus === 'rejected') {
-    return React.createElement(Text, {
-      role: "white"
-    }, intl.formatMessage({
-      id: 'materialAssignment.error'
-    }));
+    return jsx(Text, {
+      role: "white",
+      children: intl.formatMessage({
+        id: 'materialAssignment.error'
+      })
+    });
   }
   /**
    *
    */
-  const renderAssignmentInfo = () => {
+  var renderAssignmentInfo = function renderAssignmentInfo() {
     var _a;
-    const assignmentFilename = decodeURIComponent((materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.assignmentFileUrl) && new URL(materialAssignmentSubmission.assignmentFileUrl).pathname.split('/').pop() || '');
-    const renderAssignmentStatus = () => {
+    var assignmentFilename = decodeURIComponent((materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.assignmentFileUrl) && new URL(materialAssignmentSubmission.assignmentFileUrl).pathname.split('/').pop() || '');
+    var renderAssignmentStatus = function renderAssignmentStatus() {
       if (!isAssignmentSubmitted && isAssignmentClosed) {
-        return React.createElement(Text, {
+        return jsx(Text, {
           bold: true,
           role: "danger",
-          size: "small"
-        }, intl.formatMessage({
-          id: 'materialAssignment.status.deadlineExpired'
-        }));
+          size: "small",
+          children: intl.formatMessage({
+            id: 'materialAssignment.status.deadlineExpired'
+          })
+        });
       }
       if (isAssignmentResultVisible) {
-        return React.createElement(Text, {
+        return jsx(Text, {
           bold: true,
           role: "lightpurple",
-          size: "small"
-        }, intl.formatMessage({
-          id: 'materialAssignment.status.graded'
-        }));
+          size: "small",
+          children: intl.formatMessage({
+            id: 'materialAssignment.status.graded'
+          })
+        });
       }
       if (isAssignmentSubmitted) {
-        return React.createElement(StyledSubmittedText, {
+        return jsx(StyledSubmittedText, {
           bold: true,
           role: "success",
-          size: "small"
-        }, intl.formatMessage({
-          id: 'materialAssignment.status.submitted'
-        }));
+          size: "small",
+          children: intl.formatMessage({
+            id: 'materialAssignment.status.submitted'
+          })
+        });
       }
-      return React.createElement(StyledNoSubmittedText, {
+      return jsx(StyledNoSubmittedText, {
         bold: true,
         role: "warning",
-        size: "small"
-      }, intl.formatMessage({
-        id: 'materialAssignment.status.noSubmitted'
-      }));
+        size: "small",
+        children: intl.formatMessage({
+          id: 'materialAssignment.status.noSubmitted'
+        })
+      });
     };
-    const renderAssignmentScore = () => {
+    var renderAssignmentScore = function renderAssignmentScore() {
       var _a;
-      return React.createElement(React.Fragment, null, React.createElement(Text, {
-        bold: true,
-        role: "white",
-        size: "small"
-      }, intl.formatMessage({
-        id: 'materialAssignment.table.column.score'
-      }, {
-        score: (_a = materialAssignmentGradeResult === null || materialAssignmentGradeResult === void 0 ? void 0 : materialAssignmentGradeResult.score) !== null && _a !== void 0 ? _a : '--'
-      })), React.createElement(Hspace, {
-        width: 0.25
-      }));
+      return jsxs(Fragment, {
+        children: [jsx(Text, {
+          bold: true,
+          role: "white",
+          size: "small",
+          children: intl.formatMessage({
+            id: 'materialAssignment.table.column.score'
+          }, {
+            score: (_a = materialAssignmentGradeResult === null || materialAssignmentGradeResult === void 0 ? void 0 : materialAssignmentGradeResult.score) !== null && _a !== void 0 ? _a : '--'
+          })
+        }), jsx(Hspace, {
+          width: 0.25
+        })]
+      });
     };
-    const renderAssignmentAttachment = () => {
+    var renderAssignmentAttachment = function renderAssignmentAttachment() {
       if (materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.assignmentFileUrl) {
-        return React.createElement("a", {
+        return jsx("a", {
           href: materialAssignmentSubmission.assignmentFileUrl,
           download: assignmentFilename,
           target: "_blank",
-          rel: "noopener noreferrer"
-        }, React.createElement(Text, {
-          hoverable: true,
-          underline: true,
-          role: "white",
-          size: "small"
-        }, assignmentFilename));
+          rel: "noopener noreferrer",
+          children: jsx(Text, {
+            hoverable: true,
+            underline: true,
+            role: "white",
+            size: "small",
+            children: assignmentFilename
+          })
+        });
       }
       if (materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.assignmentUrl) {
-        return React.createElement("a", {
+        return jsx("a", {
           href: materialAssignmentSubmission.assignmentUrl,
           target: "_blank",
-          rel: "noopener noreferrer"
-        }, React.createElement(Text, {
-          hoverable: true,
-          underline: true,
-          role: "white",
-          size: "small"
-        }, materialAssignmentSubmission.assignmentUrl));
+          rel: "noopener noreferrer",
+          children: jsx(Text, {
+            hoverable: true,
+            underline: true,
+            role: "white",
+            size: "small",
+            children: materialAssignmentSubmission.assignmentUrl
+          })
+        });
       }
       return '--';
     };
-    return React.createElement(InfoTable, {
-      dark: true
-    }, React.createElement("tbody", null, React.createElement("tr", null, React.createElement(StyledTableHeaderCell, {
-      style: {
-        width: '19%'
-      }
-    }, intl.formatMessage({
-      id: 'materialAssignment.table.column.status'
-    })), React.createElement("td", null, renderAssignmentStatus())), React.createElement("tr", null, React.createElement(StyledTableHeaderCell, null, intl.formatMessage({
-      id: 'materialAssignment.table.column.deadlineDatetime'
-    })), React.createElement("td", null, intl.formatDate(materialAssignment.closeDatetime, {
-      dateStyle: 'medium',
-      timeStyle: 'short'
-    }))), React.createElement("tr", null, React.createElement(StyledTableHeaderCell, null, intl.formatMessage({
-      id: 'materialAssignment.table.column.lastSubmitDatetime'
-    })), React.createElement("td", null, (materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.createdDatetime) ? intl.formatDate(materialAssignmentSubmission.createdDatetime, {
-      dateStyle: 'medium',
-      timeStyle: 'short'
-    }) : '--')), React.createElement("tr", null, React.createElement(StyledTableHeaderCell, null, intl.formatMessage({
-      id: 'materialAssignment.table.column.uploadedFile'
-    })), React.createElement("td", null, React.createElement("div", null, renderAssignmentAttachment(), React.createElement(Vspace, {
-      height: 0.75
-    }), React.createElement(StyledUploadButton, {
-      size: "tiny",
-      role: "lightpurple",
-      disabled: [isAssignmentResultVisible, !materialAssignment.isResubmitEnabled && isAssignmentSubmitted, isAssignmentClosed].some(Boolean),
-      onClick: () => setShowAssignmentSubmitModal(true)
-    }, intl.formatMessage({
-      id: 'materialAssignment.button.upload'
-    }))))), React.createElement("tr", null, React.createElement(StyledTableHeaderCell, null, intl.formatMessage({
-      id: 'materialAssignment.table.column.assignmentScore'
-    })), React.createElement("td", null, renderAssignmentScore(), React.createElement(StyledTotalPointText, {
-      role: "navy4",
-      size: "small"
-    }, intl.formatMessage({
-      id: 'materialAssignment.table.column.totalPoint'
-    }, {
-      point: (_a = materialLecturePage === null || materialLecturePage === void 0 ? void 0 : materialLecturePage.point) !== null && _a !== void 0 ? _a : '--'
-    }))))));
+    return jsx(InfoTable, {
+      dark: true,
+      children: jsxs("tbody", {
+        children: [jsxs("tr", {
+          children: [jsx(StyledTableHeaderCell, {
+            style: {
+              width: '19%'
+            },
+            children: intl.formatMessage({
+              id: 'materialAssignment.table.column.status'
+            })
+          }), jsx("td", {
+            children: renderAssignmentStatus()
+          })]
+        }), jsxs("tr", {
+          children: [jsx(StyledTableHeaderCell, {
+            children: intl.formatMessage({
+              id: 'materialAssignment.table.column.deadlineDatetime'
+            })
+          }), jsx("td", {
+            children: intl.formatDate(materialAssignment.closeDatetime, {
+              dateStyle: 'medium',
+              timeStyle: 'short'
+            })
+          })]
+        }), jsxs("tr", {
+          children: [jsx(StyledTableHeaderCell, {
+            children: intl.formatMessage({
+              id: 'materialAssignment.table.column.lastSubmitDatetime'
+            })
+          }), jsx("td", {
+            children: (materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.createdDatetime) ? intl.formatDate(materialAssignmentSubmission.createdDatetime, {
+              dateStyle: 'medium',
+              timeStyle: 'short'
+            }) : '--'
+          })]
+        }), jsxs("tr", {
+          children: [jsx(StyledTableHeaderCell, {
+            children: intl.formatMessage({
+              id: 'materialAssignment.table.column.uploadedFile'
+            })
+          }), jsx("td", {
+            children: jsxs("div", {
+              children: [renderAssignmentAttachment(), jsx(Vspace, {
+                height: 0.75
+              }), jsx(StyledUploadButton, {
+                size: "tiny",
+                role: "lightpurple",
+                disabled: [isAssignmentResultVisible, !materialAssignment.isResubmitEnabled && isAssignmentSubmitted, isAssignmentClosed].some(Boolean),
+                onClick: function onClick() {
+                  return setShowAssignmentSubmitModal(true);
+                },
+                children: intl.formatMessage({
+                  id: 'materialAssignment.button.upload'
+                })
+              })]
+            })
+          })]
+        }), jsxs("tr", {
+          children: [jsx(StyledTableHeaderCell, {
+            children: intl.formatMessage({
+              id: 'materialAssignment.table.column.assignmentScore'
+            })
+          }), jsxs("td", {
+            children: [renderAssignmentScore(), jsx(StyledTotalPointText, {
+              role: "navy4",
+              size: "small",
+              children: intl.formatMessage({
+                id: 'materialAssignment.table.column.totalPoint'
+              }, {
+                point: (_a = materialLecturePage === null || materialLecturePage === void 0 ? void 0 : materialLecturePage.point) !== null && _a !== void 0 ? _a : '--'
+              })
+            })]
+          })]
+        })]
+      })
+    });
   };
   /**
    *
    */
-  const renderAssignmentFeedback = () => {
+  var renderAssignmentFeedback = function renderAssignmentFeedback() {
     var _a;
-    const tableColumns = [{
+    var tableColumns = [{
       Header: intl.formatMessage({
         id: 'materialAssignment.table.header.index'
       }),
@@ -288,15 +358,20 @@ const MaterialAssignmentContent = ({
       }),
       accessor: 'feedback'
     }];
-    const tableData = (_a = materialAssignmentGradeList === null || materialAssignmentGradeList === void 0 ? void 0 : materialAssignmentGradeList.filter(grade => grade.comment.length).map((grade, index) => ({
-      index: index + 1,
-      feedback: React.createElement(Text, {
-        preWrap: true,
-        size: "small",
-        role: "navy1"
-      }, grade.comment)
-    }))) !== null && _a !== void 0 ? _a : [];
-    return React.createElement(TableNext, {
+    var tableData = (_a = materialAssignmentGradeList === null || materialAssignmentGradeList === void 0 ? void 0 : materialAssignmentGradeList.filter(function (grade) {
+      return grade.comment.length;
+    }).map(function (grade, index) {
+      return {
+        index: index + 1,
+        feedback: jsx(Text, {
+          preWrap: true,
+          size: "small",
+          role: "navy1",
+          children: grade.comment
+        })
+      };
+    })) !== null && _a !== void 0 ? _a : [];
+    return jsx(TableNext, {
       dark: true,
       columns: tableColumns,
       data: tableData,
@@ -308,47 +383,54 @@ const MaterialAssignmentContent = ({
   /**
    *
    */
-  const renderAssignmentUploadModal = () => {
+  var renderAssignmentUploadModal = function renderAssignmentUploadModal() {
     if (!showAssignmentSubmitModal) {
       return null;
     }
-    return React.createElement(MaterialAssignmentUploadModal, {
+    return jsx(MaterialAssignmentUploadModal, {
       materialAssignment: materialAssignment,
-      onClose: () => setShowAssignmentSubmitModal(false),
+      onClose: function onClose() {
+        return setShowAssignmentSubmitModal(false);
+      },
       onSubmitCallback: doGetOrgMaterialAssignmentGet
     });
   };
-  return React.createElement(MaterialAssignmentContainer, {
-    title: materialAssignment.title
-  }, React.createElement(Text, {
-    bold: true,
-    block: true,
-    role: "white"
-  }, intl.formatMessage({
-    id: 'materialAssignment.label.general'
-  })), React.createElement(Text, {
-    role: "navy3",
-    size: "tiny"
-  }, intl.formatMessage({
-    id: 'materialAssignment.description.general'
-  })), React.createElement(Vspace, {
-    height: 0.75
-  }), renderAssignmentInfo(), React.createElement(Vspace, {
-    height: 1.5
-  }), React.createElement(Text, {
-    bold: true,
-    block: true,
-    role: "white"
-  }, intl.formatMessage({
-    id: 'materialAssignment.label.feedback'
-  })), React.createElement(Text, {
-    role: "navy3",
-    size: "tiny"
-  }, intl.formatMessage({
-    id: 'materialAssignment.description.feedback'
-  })), React.createElement(Vspace, {
-    height: 0.75
-  }), renderAssignmentFeedback(), renderAssignmentUploadModal());
+  return jsxs(MaterialAssignmentContainer, {
+    title: materialAssignment.title,
+    children: [jsx(Text, {
+      bold: true,
+      block: true,
+      role: "white",
+      children: intl.formatMessage({
+        id: 'materialAssignment.label.general'
+      })
+    }), jsx(Text, {
+      role: "navy3",
+      size: "tiny",
+      children: intl.formatMessage({
+        id: 'materialAssignment.description.general'
+      })
+    }), jsx(Vspace, {
+      height: 0.75
+    }), renderAssignmentInfo(), jsx(Vspace, {
+      height: 1.5
+    }), jsx(Text, {
+      bold: true,
+      block: true,
+      role: "white",
+      children: intl.formatMessage({
+        id: 'materialAssignment.label.feedback'
+      })
+    }), jsx(Text, {
+      role: "navy3",
+      size: "tiny",
+      children: intl.formatMessage({
+        id: 'materialAssignment.description.feedback'
+      })
+    }), jsx(Vspace, {
+      height: 0.75
+    }), renderAssignmentFeedback(), renderAssignmentUploadModal()]
+  });
 };
 
 export { MaterialAssignmentContent as default };