IO-134 Limit shop uploads based on plan.

client/src/components/documents-upload/documents-upload.component.jsx

@@ -1,14 +1,15 @@
 import { UploadOutlined } from "@ant-design/icons";
-import { Upload } from "antd";
-import React from "react";
+import { notification, Progress, Result, Space, Upload } from "antd";
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
+import formatBytes from "../../utils/formatbytes";
 import { handleUpload } from "./documents-upload.utility";
-
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   bodyshop: selectBodyshop,
@@ -22,10 +23,46 @@ export function DocumentsUploadComponent({
   tagsArray,
   billId,
   callbackAfterUpload,
+  totalSize,
 }) {
+  const { t } = useTranslation();
+
+  const pct = useMemo(() => {
+    return parseInt(
+      (totalSize / ((bodyshop && bodyshop.jobsizelimit) || 1)) * 100
+    );
+  }, [bodyshop, totalSize]);
+
+  if (pct > 100)
+    return (
+      <Result
+        status="error"
+        title={t("documents.labels.storageexceeded_title")}
+        subTitle={t("documents.labels.storageexceeded")}
+      ></Result>
+    );
+
   return (
     <Upload.Dragger
       multiple={true}
+      beforeUpload={(file, fileList) => {
+        const newFiles = fileList.reduce((acc, val) => acc + val.size, 0);
+        const shouldStopUpload =
+          (totalSize + newFiles) / ((bodyshop && bodyshop.jobsizelimit) || 1) >=
+          1;
+
+        //Check to see if old files plus newly uploaded ones will be too much.
+        if (shouldStopUpload) {
+          notification.open({
+            key: "cannotuploaddocuments",
+            type: "error",
+            message: t("documents.labels.upload_limitexceeded_title"),
+            description: t("documents.labels.upload_limitexceeded"),
+          });
+          return Upload.LIST_IGNORE;
+        }
+        return true;
+      }}
       customRequest={(ev) =>
         handleUpload(ev, {
           bodyshop: bodyshop,
@@ -39,11 +76,6 @@ export function DocumentsUploadComponent({
       accept="audio/*, video/*, image/*, .pdf, .doc, .docx, .xls, .xlsx"
       // showUploadList={false}
     >
-      {
-        // <Button type="primary">
-        //       <UploadOutlined />
-        //     </Button>
-      }
       {children || (
         <>
           <p className="ant-upload-drag-icon">
@@ -52,6 +84,16 @@ export function DocumentsUploadComponent({
           <p className="ant-upload-text">
             Click or drag files to this area to upload.
           </p>
+          <Space wrap className="ant-upload-text">
+            <Progress type="dashboard" percent={pct} size="small" />
+            <span>
+              {t("documents.labels.usage", {
+                percent: pct,
+                used: formatBytes(totalSize),
+                total: formatBytes(bodyshop && bodyshop.jobsizelimit),
+              })}
+            </span>
+          </Space>
         </>
       )}
     </Upload.Dragger>