diff --git a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.external.component.jsx b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.external.component.jsx
new file mode 100644
index 000000000..46625f419
--- /dev/null
+++ b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.external.component.jsx
@@ -0,0 +1,79 @@
+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 {
+ getJobMedia,
+ toggleMediaSelected,
+} from "../../redux/media/media.actions";
+import { selectAllMedia } from "../../redux/media/media.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+ bodyshop: selectBodyshop,
+ allMedia: selectAllMedia,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+ getJobMedia: (id) => dispatch(getJobMedia(id)),
+
+ toggleMediaSelected: ({ jobid, filename }) =>
+ dispatch(toggleMediaSelected({ jobid, filename })),
+});
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(JobDocumentsLocalGalleryExternal);
+
+function JobDocumentsLocalGalleryExternal({
+ jobId,
+ externalMediaState,
+ getJobMedia,
+ toggleMediaSelected,
+ allMedia,
+}) {
+ const [galleryImages, setgalleryImages] = externalMediaState;
+ const { t } = useTranslation();
+
+ useEffect(() => {
+ if ( jobId) {
+ getJobMedia(jobId);
+ }
+ }, [jobId, getJobMedia]);
+
+ useEffect(() => {
+ let documents =
+ allMedia && allMedia[jobId]
+ ? allMedia[jobId].reduce((acc, val) => {
+ if (
+ val.type &&
+ val.type.mime &&
+ val.type.mime.startsWith("image")
+ ) {
+ acc.push(val);
+ }
+ return acc;
+ }, [])
+ : [];
+
+ setgalleryImages(documents);
+ }, [allMedia, jobId, setgalleryImages, t]);
+
+ return (
+
+ {
+ setgalleryImages(
+ galleryImages.map((g, idx) =>
+ index === idx ? { ...g, isSelected: !g.isSelected } : g
+ )
+ );
+ }}
+ />
+
+ );
+}