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>

client/src/components/documents-upload/documents-upload.utility.js

@@ -134,6 +134,7 @@ export const uploadToCloudinary = async (
           type: fileType,
           extension: extension,
           bodyshopid: bodyshop.id,
+          size: file.size || cloudinaryUploadResponse.data.bytes,
         },
       ],
     },

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -16,6 +16,8 @@ function JobsDocumentsComponent({
   refetch,
   billId,
   billsCallback,
+  totalSize,
+  bodyshop,
 }) {
   const [galleryImages, setgalleryImages] = useState({ images: [], other: [] });
   const { t } = useTranslation();
@@ -104,7 +106,7 @@ function JobsDocumentsComponent({
   }, [data, setgalleryImages, t]);
 
   return (
-    <div className="clea rfix">
+    <div>
       <Row gutter={[16, 16]}>
         <Col span={24}>
           <Space wrap>
@@ -126,6 +128,7 @@ function JobsDocumentsComponent({
           <Card>
             <DocumentsUploadComponent
               jobId={jobId}
+              totalSize={totalSize}
               billId={billId}
               callbackAfterUpload={billsCallback || refetch}
             />

client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx

@@ -23,6 +23,7 @@ export default function JobsDocumentsContainer({
   return (
     <JobDocuments
       data={(data && data.documents) || documentsList || []}
+      totalSize={data && data.documents_aggregate.aggregate.sum.size}
       billId={billId}
       jobId={jobId}
       refetch={refetch}

client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx

@@ -34,6 +34,15 @@ export function TechClockOffButton({
     (e) => e.id === technician && technician.id
   )[0];
 
+  console.log(
+    "emps :>> ",
+    emps,
+    "e",
+    bodyshop && bodyshop.employees,
+    "tech",
+    technician
+  );
+
   const handleFinish = async (values) => {
     logImEXEvent("tech_clock_out_job");