From a1e4f3827d6bc25602c9a3dc1ab915677666effe Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Thu, 5 May 2022 15:46:58 -0700
Subject: [PATCH] Uploads and viewing from bills.

---
 bodyshop_translations.babel                   | 23 ++++-
 .../bill-detail-edit.container.jsx            | 44 +++++----
 .../bill-enter-modal.container.jsx            | 41 ++++++---
 .../documents-local-upload.component.jsx      |  4 +
 .../documents-local-upload.utility.js         | 15 ++-
 .../jobs-documents-gallery.component.jsx      |  4 +-
 ...jobs-documents-local-gallery.container.jsx | 60 +++++++++---
 ...ments-local-gallery.reassign.component.jsx | 92 +++++++++++++++++++
 .../temporary-docs.component.jsx              | 21 ++++-
 client/src/redux/media/media.actions.js       | 16 ++++
 client/src/redux/media/media.reducer.js       | 12 ++-
 client/src/redux/media/media.sagas.js         | 46 +++++++++-
 client/src/redux/media/media.types.js         |  2 +
 client/src/redux/user/user.reducer.js         | 10 +-
 client/src/translations/en_us/common.json     |  1 +
 client/src/translations/es/common.json        |  1 +
 client/src/translations/fr/common.json        |  1 +
 17 files changed, 341 insertions(+), 52 deletions(-)
 create mode 100644 client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.reassign.component.jsx

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index a7de63bcb..53a04fe72 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.7.1">
+<babeledit_project be_version="2.7.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -13211,6 +13211,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>openinexplorer</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>reassign_limitexceeded</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx b/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
index c8eb78281..9bbca0a60 100644
--- a/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
+++ b/client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
@@ -12,27 +12,29 @@ import moment from "moment";
 import queryString from "query-string";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation, useHistory } from "react-router-dom";
+import { connect } from "react-redux";
+import { useHistory, useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
 import {
   DELETE_BILL_LINE,
   INSERT_NEW_BILL_LINES,
   UPDATE_BILL_LINE,
 } from "../../graphql/bill-lines.queries";
 import { QUERY_BILL_BY_PK, UPDATE_BILL } from "../../graphql/bills.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import AlertComponent from "../alert/alert.component";
 import BillFormContainer from "../bill-form/bill-form.container";
-import JobDocumentsGallery from "../jobs-documents-gallery/jobs-documents-gallery.container";
-import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
-import BillReeportButtonComponent from "../bill-reexport-button/bill-reexport-button.component";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { setModalContext } from "../../redux/modals/modals.actions";
-import { insertAuditTrail } from "../../redux/application/application.actions";
-import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import BillMarkExportedButton from "../bill-mark-exported-button/bill-mark-exported-button.component";
+import BillReeportButtonComponent from "../bill-reexport-button/bill-reexport-button.component";
+import JobDocumentsGallery from "../jobs-documents-gallery/jobs-documents-gallery.container";
+import JobsDocumentsLocalGallery from "../jobs-documents-local-gallery/jobs-documents-local-gallery.container";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
   setPartsOrderContext: (context) =>
@@ -49,6 +51,7 @@ export default connect(
 export function BillDetailEditcontainer({
   setPartsOrderContext,
   insertAuditTrail,
+  bodyshop,
 }) {
   const search = queryString.parse(useLocation().search);
   const history = useHistory();
@@ -265,12 +268,21 @@ export function BillDetailEditcontainer({
             layout="vertical"
           >
             <BillFormContainer form={form} billEdit disabled={exported} />
-            <JobDocumentsGallery
-              jobId={data ? data.bills_by_pk.jobid : null}
-              billId={search.billid}
-              documentsList={data ? data.bills_by_pk.documents : []}
-              billsCallback={refetch}
-            />
+
+            {bodyshop.uselocalmediaserver ? (
+              <JobsDocumentsLocalGallery
+                job={{ id: data ? data.bills_by_pk.jobid : null }}
+                invoice_number={data ? data.bills_by_pk.invoice_number : null}
+                vendorid={data ? data.bills_by_pk.vendorid : null}
+              />
+            ) : (
+              <JobDocumentsGallery
+                jobId={data ? data.bills_by_pk.jobid : null}
+                billId={search.billid}
+                documentsList={data ? data.bills_by_pk.documents : []}
+                billsCallback={refetch}
+              />
+            )}
           </Form>
         </>
       )}
diff --git a/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx b/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
index 5cd926785..bfadbcd37 100644
--- a/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
+++ b/client/src/components/bill-enter-modal/bill-enter-modal.container.jsx
@@ -24,6 +24,7 @@ import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import BillFormContainer from "../bill-form/bill-form.container";
 import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
 import { handleUpload } from "../documents-upload/documents-upload.utility";
+import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
 
 const mapStateToProps = createStructuredSelector({
   billEnterModal: selectBillEnterModal,
@@ -210,19 +211,33 @@ function BillEnterModalContainer({
     /////////////////////////
     if (upload && upload.length > 0) {
       //insert Each of the documents?
-      upload.forEach((u) => {
-        handleUpload(
-          { file: u.originFileObj },
-          {
-            bodyshop: bodyshop,
-            uploaded_by: currentUser.email,
-            jobId: values.jobid,
-            billId: billId,
-            tagsArray: null,
-            callback: null,
-          }
-        );
-      });
+
+      if (bodyshop.uselocalmediaserver) {
+        upload.forEach((u) => {
+          handleLocalUpload({
+            ev: { file: u.originFileObj },
+            context: {
+              jobid: values.jobid,
+              invoice_number: remainingValues.invoice_number,
+              vendorid: remainingValues.vendorid,
+            },
+          });
+        });
+      } else {
+        upload.forEach((u) => {
+          handleUpload(
+            { file: u.originFileObj },
+            {
+              bodyshop: bodyshop,
+              uploaded_by: currentUser.email,
+              jobId: values.jobid,
+              billId: billId,
+              tagsArray: null,
+              callback: null,
+            }
+          );
+        });
+      }
     }
     ///////////////////////////
     setLoading(false);
diff --git a/client/src/components/documents-local-upload/documents-local-upload.component.jsx b/client/src/components/documents-local-upload/documents-local-upload.component.jsx
index cd42f6667..c0051372f 100644
--- a/client/src/components/documents-local-upload/documents-local-upload.component.jsx
+++ b/client/src/components/documents-local-upload/documents-local-upload.component.jsx
@@ -20,6 +20,8 @@ export function DocumentsLocalUploadComponent({
   currentUser,
   bodyshop,
   job,
+  vendorid,
+  invoice_number,
   callbackAfterUpload,
 }) {
   const { t } = useTranslation();
@@ -45,6 +47,8 @@ export function DocumentsLocalUploadComponent({
           ev,
           context: {
             jobid: job.id,
+            vendorid,
+            invoice_number,
             callback: callbackAfterUpload,
           },
         })
diff --git a/client/src/components/documents-local-upload/documents-local-upload.utility.js b/client/src/components/documents-local-upload/documents-local-upload.utility.js
index 020425515..d7d0b289d 100644
--- a/client/src/components/documents-local-upload/documents-local-upload.utility.js
+++ b/client/src/components/documents-local-upload/documents-local-upload.utility.js
@@ -5,7 +5,7 @@ import normalizeUrl from "normalize-url";
 
 export const handleUpload = async ({ ev, context }) => {
   const { onError, onSuccess, onProgress, file } = ev;
-  const { jobid, callbackAfterUpload } = context;
+  const { jobid, invoice_number, vendorid, callbackAfterUpload } = context;
 
   var options = {
     headers: { "X-Requested-With": "XMLHttpRequest" },
@@ -17,11 +17,19 @@ export const handleUpload = async ({ ev, context }) => {
   const formData = new FormData();
 
   formData.append("jobid", jobid);
+  if (invoice_number) {
+    formData.append("invoice_number", invoice_number);
+    formData.append("vendorid", vendorid);
+  }
   formData.append("file", file);
   const bodyshop = store.getState().user.bodyshop;
 
   const imexMediaServerResponse = await cleanAxios.post(
-    normalizeUrl(`${bodyshop.localmediaserverhttp}/jobs/upload`),
+    normalizeUrl(
+      `${bodyshop.localmediaserverhttp}/${
+        invoice_number ? "bills" : "jobs"
+      }/upload`
+    ),
     formData,
     {
       ...options,
@@ -33,13 +41,14 @@ export const handleUpload = async ({ ev, context }) => {
       onError(imexMediaServerResponse.statusText);
     }
   } else {
-    onSuccess(file);
+    onSuccess && onSuccess(file);
     store.dispatch(
       addMediaForJob({
         jobid,
         media: imexMediaServerResponse.data.map((d) => {
           return {
             ...d,
+            selected: false,
             src: normalizeUrl(`${bodyshop.localmediaserverhttp}/${d.src}`),
             thumbnail: normalizeUrl(
               `${bodyshop.localmediaserverhttp}/${d.thumbnail}`
diff --git a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
index ce25fe6d8..dbc603660 100644
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
@@ -1,5 +1,5 @@
-import { FileExcelFilled, EditFilled, SyncOutlined } from "@ant-design/icons";
-import { Card, Col, Row, Space, Button } from "antd";
+import { EditFilled, FileExcelFilled, SyncOutlined } from "@ant-design/icons";
+import { Button, Card, Col, Row, Space } from "antd";
 import React, { useEffect, useState } from "react";
 import Gallery from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
diff --git a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx
index e67b53e77..a23a988ec 100644
--- a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx
+++ b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx
@@ -1,22 +1,35 @@
-import React, { useEffect } from "react";
 import { SyncOutlined } from "@ant-design/icons";
+import { Button, Card, Space } from "antd";
+import React, { useEffect } from "react";
+import Gallery from "react-grid-gallery";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import {
+  getBillMedia,
+  getJobMedia,
+  toggleMediaSelected,
+} from "../../redux/media/media.actions";
 import { selectAllMedia } from "../../redux/media/media.selectors";
-import { getJobMedia } from "../../redux/media/media.actions";
-import { Button, Card, Space } from "antd";
-import { useTranslation } from "react-i18next";
-import Gallery from "react-grid-gallery";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import DocumentsLocalUploadComponent from "../documents-local-upload/documents-local-upload.component";
-import { Link } from "react-router-dom";
+import JobsDocumentsLocalGalleryReassign from "./jobs-documents-local-gallery.reassign.component";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   allMedia: selectAllMedia,
 });
+
 const mapDispatchToProps = (dispatch) => ({
   getJobMedia: (id) => dispatch(getJobMedia(id)),
+  getBillMedia: ({ jobid, invoice_number }) => {
+    console.log(jobid);
+    dispatch(getBillMedia({ jobid, invoice_number }));
+  },
+  toggleMediaSelected: ({ jobid, filename }) =>
+    dispatch(toggleMediaSelected({ jobid, filename })),
 });
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps
@@ -24,23 +37,39 @@ export default connect(
 
 export function JobsDocumentsLocalGallery({
   bodyshop,
+  toggleMediaSelected,
   getJobMedia,
+  getBillMedia,
   allMedia,
   job,
+  invoice_number,
+  vendorid,
 }) {
   const { t } = useTranslation();
   useEffect(() => {
     if (job) {
-      getJobMedia(job.id);
+      if (invoice_number) {
+        getBillMedia({ jobid: job.id, invoice_number });
+      } else {
+        getJobMedia(job.id);
+      }
     }
-  }, [job, getJobMedia]);
+  }, [job, invoice_number, getJobMedia, getBillMedia]);
 
   return (
     <div>
       <Space wrap>
+        {JSON.stringify({ jobid: job.id, invoice_number, vendorid }, null, 4) ||
+          "NO JOB ID"}
         <Button
           onClick={() => {
-            getJobMedia(job.id);
+            if (job) {
+              if (invoice_number) {
+                getBillMedia({ jobid: job.id, invoice_number });
+              } else {
+                getJobMedia(job.id);
+              }
+            }
           }}
         >
           <SyncOutlined />
@@ -50,15 +79,22 @@ export function JobsDocumentsLocalGallery({
         >
           <Button>{t("documents.labels.openinexplorer")}</Button>
         </a>
+        <JobsDocumentsLocalGalleryReassign jobid={job.id} />
       </Space>
       <Card>
-        <DocumentsLocalUploadComponent job={job} />
+        <DocumentsLocalUploadComponent
+          job={job}
+          invoice_number={invoice_number}
+          vendorid={vendorid}
+        />
       </Card>
       <Card title={t("jobs.labels.documents-images")}>
         <Gallery
           images={(allMedia && allMedia[job.id]) || []}
-          enableImageSelection={false}
           backdropClosesModal={true}
+          onSelectImage={(index, image) => {
+            toggleMediaSelected({ jobid: job.id, filename: image.filename });
+          }}
           onClickImage={(props) => {
             window.open(
               props.target.src,
diff --git a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.reassign.component.jsx b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.reassign.component.jsx
new file mode 100644
index 000000000..c8f336d7c
--- /dev/null
+++ b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.reassign.component.jsx
@@ -0,0 +1,92 @@
+import { Button, Form, Popover, Space } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { getJobMedia } from "../../redux/media/media.actions";
+import { selectAllMedia } from "../../redux/media/media.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import cleanAxios from "../../utils/CleanAxios";
+import JobSearchSelect from "../job-search-select/job-search-select.component";
+
+const mapStateToProps = createStructuredSelector({
+  allMedia: selectAllMedia,
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  getJobMedia: (id) => dispatch(getJobMedia(id)),
+
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobsDocumentsLocalGalleryReassign);
+
+export function JobsDocumentsLocalGalleryReassign({
+  bodyshop,
+  jobid,
+  allMedia,
+  getJobMedia,
+}) {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleFinish = async ({ jobid: newJobid }) => {
+    setLoading(true);
+    const selectedDocuments = allMedia[jobid].filter((m) => m.isSelected);
+
+    await cleanAxios.post(`${bodyshop.localmediaserverhttp}/jobs/move`, {
+      from_jobid: jobid,
+      jobid: newJobid,
+      files: selectedDocuments.map((f) => f.filename),
+    });
+
+    getJobMedia(jobid);
+    setVisible(false);
+    setLoading(false);
+  };
+
+  const popContent = (
+    <div>
+      <Form onFinish={handleFinish} layout="vertical" form={form}>
+        <Form.Item
+          label={t("documents.labels.newjobid")}
+          style={{ width: "20rem" }}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={"jobid"}
+        >
+          <JobSearchSelect />
+        </Form.Item>
+      </Form>
+      <Space>
+        <Button type="primary" onClick={() => form.submit()}>
+          {t("general.actions.submit")}
+        </Button>
+        <Button onClick={() => setVisible(false)}>
+          {t("general.actions.cancel")}
+        </Button>
+      </Space>
+    </div>
+  );
+
+  return (
+    <Popover content={popContent} visible={visible}>
+      <Button
+        //disabled={selectedImages.length < 1}
+        onClick={() => setVisible(true)}
+        loading={loading}
+      >
+        {t("documents.actions.reassign")}
+      </Button>
+    </Popover>
+  );
+}
diff --git a/client/src/pages/temporary-docs/temporary-docs.component.jsx b/client/src/pages/temporary-docs/temporary-docs.component.jsx
index ccd4886e3..6ac4e6c03 100644
--- a/client/src/pages/temporary-docs/temporary-docs.component.jsx
+++ b/client/src/pages/temporary-docs/temporary-docs.component.jsx
@@ -5,15 +5,34 @@ import JobsDocumentsComponent from "../../components/jobs-documents-gallery/jobs
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import { QUERY_TEMPORARY_DOCS } from "../../graphql/documents.queries";
 
-export default function TemporaryDocsComponent() {
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import JobsDocumentsLocalGallery from "../../components/jobs-documents-local-gallery/jobs-documents-local-gallery.container";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TemporaryDocsComponent);
+
+export function TemporaryDocsComponent({ bodyshop }) {
   const { loading, error, data, refetch } = useQuery(QUERY_TEMPORARY_DOCS, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
+    skip: bodyshop.uselocalmediaserver,
   });
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
 
+  if (bodyshop.uselocalmediaserver) {
+    return <JobsDocumentsLocalGallery job={{ id: "temporary" }} />;
+  }
   return (
     <JobsDocumentsComponent
       data={data ? data.documents : []}
diff --git a/client/src/redux/media/media.actions.js b/client/src/redux/media/media.actions.js
index 48874c30e..09e660a9a 100644
--- a/client/src/redux/media/media.actions.js
+++ b/client/src/redux/media/media.actions.js
@@ -4,15 +4,31 @@ export const getJobMedia = (jobid) => ({
   type: MediaActionTypes.GET_MEDIA_FOR_JOB,
   payload: jobid,
 });
+
+export const getBillMedia = ({ jobid, invoice_number }) => {
+  console.log("in the action");
+  return {
+    type: MediaActionTypes.GET_MEDIA_FOR_BILL,
+    payload: { jobid, invoice_number },
+  };
+};
+
 export const setJobMedia = ({ jobid, media }) => ({
   type: MediaActionTypes.SET_MEDIA_FOR_JOB,
   payload: { jobid, media },
 });
+
 export const addMediaForJob = ({ jobid, media }) => ({
   type: MediaActionTypes.ADD_MEDIA_FOR_JOB,
   payload: { jobid, media },
 });
+
 export const getJobMediaError = ({ error, message }) => ({
   type: MediaActionTypes.GET_MEDIA_FOR_JOB_ERROR,
   payload: { error, message },
 });
+
+export const toggleMediaSelected = ({ jobid, filename }) => ({
+  type: MediaActionTypes.TOGGLE_MEDIA_SELECTED,
+  payload: { jobid, filename },
+});
diff --git a/client/src/redux/media/media.reducer.js b/client/src/redux/media/media.reducer.js
index 8e7761f88..47c52a0f9 100644
--- a/client/src/redux/media/media.reducer.js
+++ b/client/src/redux/media/media.reducer.js
@@ -12,10 +12,20 @@ const mediaReducer = (state = INITIAL_STATE, action) => {
       return {
         ...state,
         [action.payload.jobid]: [
-          ...state[action.payload.jobid],
+          ...(state[action.payload.jobid] ? state[action.payload.jobid] : []),
           ...(action.payload.media || []),
         ],
       };
+    case MediaActionTypes.TOGGLE_MEDIA_SELECTED:
+      return {
+        ...state,
+        [action.payload.jobid]: state[action.payload.jobid].map((p) => {
+          if (p.filename === action.payload.filename) {
+            p.isSelected = !p.isSelected;
+          }
+          return p;
+        }),
+      };
     default:
       return state;
   }
diff --git a/client/src/redux/media/media.sagas.js b/client/src/redux/media/media.sagas.js
index dcef73625..6ec037109 100644
--- a/client/src/redux/media/media.sagas.js
+++ b/client/src/redux/media/media.sagas.js
@@ -3,6 +3,7 @@ import { getJobMediaError, setJobMedia } from "./media.actions";
 import MediaActionTypes from "./media.types";
 import cleanAxios from "../../utils/CleanAxios";
 import normalizeUrl from "normalize-url";
+
 export function* onSetJobMedia() {
   yield takeLatest(MediaActionTypes.GET_MEDIA_FOR_JOB, getJobMedia);
 }
@@ -37,7 +38,7 @@ export function* getJobMedia({ payload: jobid }) {
                 thumbnail: normalizeUrl(
                   `${localmediaserverhttp}/${d.thumbnail}`
                 ),
-
+                isSelected: false,
                 key: idx,
               };
             }),
@@ -48,7 +49,48 @@ export function* getJobMedia({ payload: jobid }) {
                 thumbnail: normalizeUrl(
                   `${localmediaserverhttp}/${d.thumbnail}`
                 ),
+                isSelected: false,
+                key: idx,
+              };
+            }),
+          ],
+        })
+      );
+    }
+  } catch (error) {
+    yield put(getJobMediaError(error));
+  }
+}
+export function* onSetBillMedia() {
+  yield takeLatest(MediaActionTypes.GET_MEDIA_FOR_BILL, getBillMedia);
+}
+export function* getBillMedia({ payload: { jobid, invoice_number } }) {
+  try {
+    const localmediaserverhttp = (yield select(
+      (state) => state.user.bodyshop.localmediaserverhttp
+    )).trim();
 
+    if (localmediaserverhttp && localmediaserverhttp !== "") {
+      const documentsFetch = yield cleanAxios.post(
+        `${localmediaserverhttp}/bills/list`,
+        {
+          jobid,
+          invoice_number,
+        }
+      );
+
+      yield put(
+        setJobMedia({
+          jobid,
+          media: [
+            ...documentsFetch.data.map((d, idx) => {
+              return {
+                ...d,
+                src: normalizeUrl(`${localmediaserverhttp}/${d.src}`),
+                thumbnail: normalizeUrl(
+                  `${localmediaserverhttp}/${d.thumbnail}`
+                ),
+                isSelected: false,
                 key: idx,
               };
             }),
@@ -62,5 +104,5 @@ export function* getJobMedia({ payload: jobid }) {
 }
 
 export function* mediaSagas() {
-  yield all([call(onSetJobMedia)]);
+  yield all([call(onSetJobMedia), call(onSetBillMedia)]);
 }
diff --git a/client/src/redux/media/media.types.js b/client/src/redux/media/media.types.js
index aa3d7ba11..91eaf3d1c 100644
--- a/client/src/redux/media/media.types.js
+++ b/client/src/redux/media/media.types.js
@@ -3,8 +3,10 @@ const MediaActionTypes = {
   GET_MEDIA_FOR_JOB: "GET_MEDIA_FOR_JOB",
   GET_MEDIA_FOR_JOB_ERROR: "GET_MEDIA_FOR_JOB_ERROR",
   ADD_MEDIA_FOR_JOB: "ADD_MEDIA_FOR_JOB",
+  TOGGLE_MEDIA_SELECTED: "TOGGLE_MEDIA_SELECTED",
   POST_MEDIA_FOR_JOB: "POST_MEDIA_FOR_JOB",
   POST_MEDIA_FOR_JOB_SUCCESS: "POST_MEDIA_FOR_JOB_SUCCESS",
   POST_MEDIA_FOR_JOB_ERROR: "POST_MEDIA_FOR_JOB_ERROR",
+  GET_MEDIA_FOR_BILL: "GET_MEDIA_FOR_BILL",
 };
 export default MediaActionTypes;
diff --git a/client/src/redux/user/user.reducer.js b/client/src/redux/user/user.reducer.js
index 5f316d9e8..faaad23b5 100644
--- a/client/src/redux/user/user.reducer.js
+++ b/client/src/redux/user/user.reducer.js
@@ -97,7 +97,15 @@ const userReducer = (state = INITIAL_STATE, action) => {
       };
 
     case UserActionTypes.SET_SHOP_DETAILS:
-      return { ...state, bodyshop: action.payload };
+      return {
+        ...state,
+        bodyshop: {
+          uselocalmediaserver: true,
+          localmediaserverhttp: "http://localhost:8000", //TODO: ENSURE THAT THIS HAS BEEN REMOVED POST TESTING.
+          localmediaservernetwork: "\\localhost:8000", //TODO: ENSURE THAT THIS HAS BEEN REMOVED POST TESTING.
+          ...action.payload,
+        },
+      };
     case UserActionTypes.SIGN_IN_FAILURE:
     case UserActionTypes.SIGN_OUT_FAILURE:
     case UserActionTypes.EMAIL_SIGN_UP_FAILURE:
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index c57cb7cdb..64b844d57 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -822,6 +822,7 @@
 				"confirmdelete": "Are you sure you want to delete these documents. This CANNOT be undone.",
 				"doctype": "Document Type",
 				"newjobid": "Assign to Job",
+				"openinexplorer": "Open in Explorer",
 				"reassign_limitexceeded": "Reassigning all selected documents will exceed the job storage limit for your shop.  ",
 				"reassign_limitexceeded_title": "Unable to reassign document(s)",
 				"storageexceeded": "You've exceeded your storage limit for this job. Please remove documents, or increase your storage plan.",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index ac51a720e..38dfb4e94 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -822,6 +822,7 @@
 				"confirmdelete": "",
 				"doctype": "",
 				"newjobid": "",
+				"openinexplorer": "",
 				"reassign_limitexceeded": "",
 				"reassign_limitexceeded_title": "",
 				"storageexceeded": "",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 945381bdd..7048217a3 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -822,6 +822,7 @@
 				"confirmdelete": "",
 				"doctype": "",
 				"newjobid": "",
+				"openinexplorer": "",
 				"reassign_limitexceeded": "",
 				"reassign_limitexceeded_title": "",
 				"storageexceeded": "",