Added separate documents display for non-images. BOD-420

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

@@ -1,10 +1,11 @@
-import { Button, notification } from "antd";
+import { Button, notification, Popconfirm } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import axios from "axios";
 import { useMutation } from "@apollo/react-hooks";
 import { DELETE_DOCUMENT } from "../../graphql/documents.queries";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { QuestionCircleOutlined } from "@ant-design/icons";
 
 import { axiosAuthInterceptorId } from "../../App/App.container";
 //Context: currentUserEmail, bodyshop, jobid, invoiceid
@@ -18,7 +19,10 @@ export default function JobsDocumentsDeleteButton({
 }) {
   const { t } = useTranslation();
   const [deleteDocument] = useMutation(DELETE_DOCUMENT);
-  const imagesToDelete = galleryImages.filter((image) => image.isSelected);
+  const imagesToDelete = [
+    ...galleryImages.images.filter((image) => image.isSelected),
+    ...galleryImages.other.filter((image) => image.isSelected),
+  ];
   const [loading, setLoading] = useState(false);
   const handleDelete = () => {
     logImEXEvent("job_documents_delete", { count: imagesToDelete.length });
@@ -76,12 +80,18 @@ export default function JobsDocumentsDeleteButton({
   };
 
   return (
-    <Button
+    <Popconfirm
       disabled={imagesToDelete.length < 1}
-      loading={loading}
-      onClick={handleDelete}
+      icon={<QuestionCircleOutlined style={{ color: "red" }} />}
+      onConfirm={handleDelete}
+      title={t("documents.labels.confirmdelete")}
+      okText={t("general.actions.delete")}
+      okButtonProps={{ type: "danger" }}
+      cancelText={t("general.actions.cancel")}
     >
-      {t("documents.actions.delete")}
-    </Button>
+      <Button disabled={imagesToDelete.length < 1} loading={loading}>
+        {t("documents.actions.delete")}
+      </Button>
+    </Popconfirm>
   );
 }