Merge branch 'release/1.2.0'

android-keystore.md

@@ -0,0 +1,7 @@
+Saving Keystore to /Users/pfic/Documents/Development/imexmobile/imexmobile.jks
+Keystore credentials
+Keystore password: a8350e9998e94a9e84e5dd8743deeb8a
+Key alias: QHBmaWMvaW1leG1vYmlsZQ==
+Key password: 2db55c4fb1964e2e996271a2082133ee
+
+Path to Keystore: /Users/pfic/Documents/Development/imexmobile/imexmobile.jks

app.json

@@ -1,19 +1,20 @@
 {
   "expo": {
-    "name": "imexmobile",
+    "name": "ImEX Mobile",
     "slug": "imexmobile",
-    "version": "1.1.0.2",
+    "version": "1.2.3",
+    "extra": { "expover": "1" },
     "orientation": "default",
     "icon": "./assets/logo192noa.png",
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "com.imex.imexmobile",
-      "buildNumber": "1.1.0.2",
+      "buildNumber": "1.2.3",
       "googleServicesFile": "./GoogleService-Info.plist"
     },
     "android": {
       "package": "com.imex.imexmobile",
-      "versionCode": 1010002,
+      "versionCode": 1020300,
       "googleServicesFile": "./google-services.json"
     },
     "splash": {

babel-translations.babel

@@ -1299,6 +1299,27 @@
                                     <folder_node>
                                         <name>labels</name>
                                         <children>
+                                            <concept_node>
+                                                <name>converting</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>deleteafterupload</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -1425,6 +1446,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>storageused</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>temporarystorage</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -1446,6 +1488,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>uploading</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>
                                         </children>
                                     </folder_node>
                                     <folder_node>

components/job-documents/job-documents.component.jsx

@@ -10,9 +10,9 @@ import {
 import env from "../../env";
 import { DetermineFileType } from "../../util/document-upload.utility";
 import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
-
 export default function JobDocumentsComponent({ job, loading, refetch }) {
   const [previewVisible, setPreviewVisible] = useState(false);
+
   const [imgIndex, setImgIndex] = useState(0);
   const onRefresh = async () => {
     return refetch();
@@ -22,18 +22,17 @@ export default function JobDocumentsComponent({ job, loading, refetch }) {
     () =>
       job.documents.map((doc) => {
         return {
-          source: {
+          videoUrl:
-            uri: `${env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
+            DetermineFileType(doc.type) === "video" && GenerateSrcUrl(doc),
-              doc.type
+          source:
-            )}/upload/${doc.key}`,
+            DetermineFileType(doc.type) === "video"
-          },
+              ? { uri: GenerateThumbUrl(doc) }
+              : { uri: GenerateSrcUrl(doc) },
         };
       }),
     [job.documents]
   );
 
-  console.log(job.documents);
-
   return (
     <View style={{ flex: 1 }}>
       <FlatList
@@ -45,37 +44,26 @@ export default function JobDocumentsComponent({ job, loading, refetch }) {
         style={{ flex: 1 }}
         keyExtractor={(item) => item.id}
         renderItem={(object) => (
-          <View
+          <TouchableOpacity
-            style={{
+            style={{ flex: 1 / 4, aspectRatio: 1, margin: 4 }}
-              flex: 1,
+            onPress={async () => {
-              flexDirection: "column",
+              setImgIndex(object.index);
-              justifyContent: "center",
+              setPreviewVisible(true);
-              alignItems: "center",
-              margin: 5,
             }}
           >
-            <TouchableOpacity
+            <Image
-              onPress={() => {
+              style={{ flex: 1 }}
-                setImgIndex(object.index);
+              resizeMode="cover"
-                setPreviewVisible(true);
+              source={{
+                uri: GenerateThumbUrl(object.item),
+                aspectRatio: 1,
               }}
-            >
+            />
-              <Image
+          </TouchableOpacity>
-                source={{
-                  width: 100,
-                  height: 100,
-                  uri: `${
-                    env.REACT_APP_CLOUDINARY_ENDPOINT
-                  }/${DetermineFileType(object.item.type)}/upload/${
-                    env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS
-                  }/${object.item.key}`,
-                }}
-              />
-            </TouchableOpacity>
-          </View>
         )}
       />
       <Text>{job.documents.length}</Text>
+
       <MediaCacheOverlay
         photos={fullphotos}
         imgIndex={imgIndex}
@@ -86,3 +74,28 @@ export default function JobDocumentsComponent({ job, loading, refetch }) {
     </View>
   );
 }
+
+export const GenerateSrcUrl = (value) => {
+  let extension = value.extension;
+  if (extension && extension.toLowerCase().includes("heic")) extension = "jpg";
+
+  return `${env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
+    value.type
+  )}/upload/${value.key}${extension ? `.${extension}` : ""}`;
+};
+
+export const GenerateThumbUrl = (value) => {
+  let extension = value.extension;
+  if (extension && extension.includes("heic")) extension = "jpg";
+  else if (
+    DetermineFileType(value.type) !== "image" ||
+    (value.type && value.type.includes("application"))
+  )
+    extension = "jpg";
+
+  return `${env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
+    value.type
+  )}/upload/${env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}${
+    extension ? `.${extension}` : ""
+  }`;
+};

components/job-lines/job-lines.component.jsx

@@ -34,9 +34,6 @@ export default function JobLines({ job, loading, refetch }) {
           <DataTable.Title style={{ flex: 1 }}>
             {t("jobdetail.labels.lines_qty")}
           </DataTable.Title>
-          <DataTable.Title style={{ flex: 1 }}>
-            {t("jobdetail.labels.lines_price")}
-          </DataTable.Title>
         </DataTable.Header>
       </DataTable>
 

components/job-space-available/job-space-available.component.jsx

@@ -0,0 +1,44 @@
+import { useQuery } from "@apollo/client";
+import React from "react";
+import { ProgressBar } from "react-native-paper";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { GET_DOC_SIZE_TOTALS } from "../../graphql/documents.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { View, Text } from "react-native";
+import { useTranslation } from "react-i18next";
+import { formatBytes } from "../../util/document-upload.utility";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(JobSpaceAvailable);
+
+export function JobSpaceAvailable({ bodyshop, style, jobid }) {
+  const { t } = useTranslation();
+  const { data } = useQuery(GET_DOC_SIZE_TOTALS, {
+    variables: { jobId: jobid },
+    skip: !jobid,
+  });
+
+  if (!jobid || !data) return <></>;
+
+  const progress =
+    data.documents_aggregate.aggregate.sum.size /
+    ((bodyshop && bodyshop.jobsizelimit) || 1);
+
+  return (
+    <View style={{ margin: 10 }}>
+      <Text style={{ marginBottom: 5 }}>
+        {t("mediabrowser.labels.storageused", {
+          used: formatBytes(data.documents_aggregate.aggregate.sum.size),
+          total: formatBytes((bodyshop && bodyshop.jobsizelimit) || 1),
+          percent: Math.round(progress * 100),
+        })}
+      </Text>
+      <ProgressBar style={[style]} progress={progress} />
+    </View>
+  );
+}

components/media-cache-overlay/media-cache-overlay.component.jsx

@@ -1,7 +1,14 @@
 import { Ionicons } from "@expo/vector-icons";
-import React from "react";
+import { Video } from "expo-av";
-import { Modal, SafeAreaView, TouchableOpacity, View } from "react-native";
+import React, { useState } from "react";
+import {
+  Dimensions,
+  Modal,
+  SafeAreaView,
+  TouchableOpacity,
+} from "react-native";
 import Gallery from "react-native-image-gallery";
+
 export default function MediaCacheOverlay({
   photos,
   previewVisible,
@@ -9,6 +16,11 @@ export default function MediaCacheOverlay({
   imgIndex,
   setImgIndex,
 }) {
+  const [currentIndex, setcurrentIndex] = useState(0);
+  const [dragging, setDragging] = useState(false);
+
+  const videoRef = React.useRef(null);
+
   return (
     <Modal
       onDismiss={() => setPreviewVisible(false)}
@@ -17,7 +29,14 @@ export default function MediaCacheOverlay({
       transparent={false}
     >
       <SafeAreaView style={{ flex: 1, backgroundColor: "black" }}>
-        <Gallery initialPage={imgIndex} images={photos} />
+        <Gallery
+          initialPage={imgIndex}
+          images={photos}
+          onPageScroll={({ position }) => setcurrentIndex(position)}
+          onPageScrollStateChanged={(state) =>
+            state === "idle" ? setDragging(false) : setDragging(true)
+          }
+        />
         <TouchableOpacity
           style={{ position: "absolute" }}
           onPress={() => setPreviewVisible(false)}
@@ -29,7 +48,29 @@ export default function MediaCacheOverlay({
             style={{ margin: 20 }}
           />
         </TouchableOpacity>
+        {!dragging && photos[currentIndex] && photos[currentIndex].videoUrl && (
+          <TouchableOpacity
+            style={{
+              position: "absolute",
+              left: Dimensions.get("window").width / 2 - 32,
+              top: Dimensions.get("window").height / 2 - 32,
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+            onPress={async () => {
+              await videoRef.current.loadAsync(
+                { uri: photos[currentIndex].videoUrl },
+                {},
+                false
+              );
+              videoRef.current.presentFullscreenPlayer();
+            }}
+          >
+            <Ionicons name="play" size={64} color="white" />
+          </TouchableOpacity>
+        )}
       </SafeAreaView>
+      <Video ref={videoRef} useNativeControls />
     </Modal>
   );
 }

components/screen-main/screen-main.component.jsx

@@ -115,7 +115,7 @@ const BottomTabsNavigator = () => (
         } else if (route.name === "MoreTab") {
           iconName = "ios-settings";
         } else if (route.name === "MediaBrowserTab") {
-          iconName = "ios-photos";
+          iconName = "ios-camera";
         } else {
           //iconName = "customerservice";
         }

components/screen-media-browser/screen-media-browser.component.jsx

@@ -1,147 +1,38 @@
-import { useApolloClient } from "@apollo/client";
 import { Ionicons } from "@expo/vector-icons";
-//const limit = plimit(2);
-import * as FileSystem from "expo-file-system";
 import { AssetsSelector } from "expo-images-picker";
-import * as MediaLibrary from "expo-media-library";
-import _ from "lodash";
 import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Alert, StyleSheet, Text, View } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.analytics";
-import { GET_DOC_SIZE_TOTALS } from "../../graphql/documents.queries";
+import { selectCurrentCameraJobId } from "../../redux/app/app.selectors";
-import {
-  selectCurrentCameraJobId,
-  selectDeleteAfterUpload,
-} from "../../redux/app/app.selectors";
-import {
-  selectBodyshop,
-  selectCurrentUser,
-} from "../../redux/user/user.selectors";
-import { handleUpload } from "../../util/document-upload.utility";
 import CameraSelectJob from "../camera-select-job/camera-select-job.component";
+import JobSpaceAvailable from "../job-space-available/job-space-available.component";
 import UploadDeleteSwitch from "../upload-delete-switch/upload-delete-switch.component";
 import UploadProgress from "../upload-progress/upload-progress.component";
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser,
-  bodyshop: selectBodyshop,
   selectedCameraJobId: selectCurrentCameraJobId,
-  deleteAfterUpload: selectDeleteAfterUpload,
 });
 
-export function ImageBrowserScreen({
+export function ImageBrowserScreen({ selectedCameraJobId }) {
-  currentUser,
-  bodyshop,
-  selectedCameraJobId,
-  deleteAfterUpload,
-}) {
   const { t } = useTranslation();
-  const [uploads, setUploads] = useState({});
+  const [uploads, setUploads] = useState(null);
-
-  function handleOnProgress(uri, percent) {
-    setUploads((prevUploads) => ({ ...prevUploads, [uri]: { percent } }));
-  }
-
   const [tick, setTick] = useState(0);
   const forceRerender = useCallback(() => {
     setTick((tick) => tick + 1);
   }, []);
 
-  const client = useApolloClient();
+  const onDone = (data) => {
-  async function handleOnSuccess(uri, id) {
-    logImEXEvent("imexmobile_successful_upload");
-    setUploads((prevUploads) => _.omit(prevUploads, uri));
-  }
-
-  const onDone = async (data) => {
     logImEXEvent("imexmobile_upload_documents", { count: data.length });
-
+    if (data.length !== 0) setUploads(data);
-    //Validate to make sure the totals for the file sizes do not exceed the total on the job.
-
-    if (selectedCameraJobId !== "temp") {
-      const queryData = await client.query({
-        query: GET_DOC_SIZE_TOTALS,
-        fetchPolicy: "network-only",
-        variables: {
-          jobId: selectedCameraJobId,
-        },
-      });
-      const totalOfUploads = await data.reduce(async (acc, val) => {
-        //Get the size of the file based on URI.
-        const info = await FileSystem.getInfoAsync(val.uri, { size: true });
-        return (await acc) + info.size;
-      }, 0);
-
-      // console.log(
-      //   "Size of uploaded documents.",
-      //   queryData.data.documents_aggregate.aggregate.sum.size,
-      //   "Shop Limit",
-      //   bodyshop.jobsizelimit,
-      //   "Space remaining",
-      //   bodyshop.jobsizelimit -
-      //     queryData.data.documents_aggregate.aggregate.sum.size,
-      //   "Total of uploaded files",
-      //   totalOfUploads
-      // );
-
-      if (
-        bodyshop.jobsizelimit -
-          queryData.data.documents_aggregate.aggregate.sum.size <=
-        totalOfUploads
-      ) {
-        //No more room... abandon ship.
-        Alert.alert(
-          t("mediabrowser.labels.storageexceeded_title"),
-          t("mediabrowser.labels.storageexceeded")
-        );
-        return;
-      }
-    }
-
-    const ret = await Promise.all(
-      data.map(async (p) => {
-        let filename;
-        //Appears to work for android.
-        //iOS provides the filename, android doe snot.
-
-        filename = p.filename || p.uri.split("/").pop();
-        const result = await handleUpload(
-          {
-            //iOS provides the file name. Android does not.
-
-            filename,
-            mediaId: p.id,
-            onError: handleOnError,
-            onProgress: ({ percent }) => handleOnProgress(filename, percent),
-            onSuccess: () => handleOnSuccess(filename, p.id),
-          },
-          {
-            bodyshop: bodyshop,
-            jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
-            uploaded_by: currentUser.email,
-            photo: p,
-          }
-        );
-        return result;
-      })
-    );
-
-    if (deleteAfterUpload) {
-      try {
-        await MediaLibrary.deleteAssetsAsync(ret.map((r) => r.mediaId));
-      } catch (error) {
-        console.log("Unable to delete picture.", error);
-      }
-    }
-    forceRerender();
   };
 
   return (
     <View style={[styles.flex, styles.container]}>
       <CameraSelectJob />
+      <JobSpaceAvailable jobid={selectedCameraJobId} key={`${tick}-space`} />
       <UploadDeleteSwitch />
       {!selectedCameraJobId && (
         <View
@@ -159,14 +50,7 @@ export function ImageBrowserScreen({
           style={{ flex: 1 }}
           key={tick}
           options={{
-            // manipulate: {
-            //   //width: 512,
-            //   compress: 0.7,
-            //   base64: false,
-            //   saveTo: "jpeg",
-            // },
             assetsType: ["photo", "video"],
-            //maxSelections: 5,
             margin: 3,
             portraitCols: 4,
             landscapeCols: 6,
@@ -212,7 +96,7 @@ export function ImageBrowserScreen({
                       justifyContent: "center",
                     }}
                   >
-                    <Ionicons name="ios-photos" size={72} />
+                    <Ionicons name="ios-camera" size={72} />
                     <Text style={{ textAlign: "center", marginTop: 10 }}>
                       {t("mediabrowser.labels.nomedia")}
                     </Text>
@@ -223,7 +107,7 @@ export function ImageBrowserScreen({
           }}
         />
       )}
-      <UploadProgress uploads={uploads} setUploads={setUploads} />
+      <UploadProgress uploads={uploads} forceRerender={forceRerender} />
     </View>
   );
 }
@@ -245,9 +129,4 @@ const styles = StyleSheet.create({
   },
 });
 
-function handleOnError(...props) {
-  console.log("HandleOnError", props);
-  logImEXEvent("imexmobile_upload_documents_error", { props });
-}
-
 export default connect(mapStateToProps, null)(ImageBrowserScreen);

components/screen-settings/screen-settings.component.jsx

@@ -9,8 +9,6 @@ import * as Updates from "expo-updates";
 
 export default function ScreenSettingsComponent() {
   const { t } = useTranslation();
-
-  console.log(Constants.manifest);
   return (
     <View
       style={{
@@ -23,9 +21,10 @@ export default function ScreenSettingsComponent() {
     >
       <Title>
         {t("settings.labels.version", {
-          number: Constants.manifest.version,
+          number: `${Constants.manifest.version}-${Constants.manifest.extra.expover}`,
         })}
       </Title>
+
       <Text>{Updates.releaseChannel}</Text>
       <SignOutButton />
       <Button title="Purge State" onPress={() => purgeStoredState()} />

components/screen-sign-in/screen-sign-in.component.jsx

@@ -13,6 +13,7 @@ import {
 } from "../../redux/user/user.selectors";
 import SignInErrorAlertComponent from "../sign-in-error-alert/sign-in-error-alert.component";
 import Constants from "expo-constants";
+import * as Updates from "expo-updates";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -77,8 +78,8 @@ export function SignIn({ emailSignInStart, signingIn }) {
             <Text>
               {t("settings.labels.version", {
                 number: Constants.manifest.version,
-              })}{" "}
+              })}
-              {process.env.NODE_ENV || ""}
+              {`${process.env.NODE_ENV || ""} ${Updates.releaseChannel || ""}`}
             </Text>
           </View>
         )}

components/upload-progress/upload-progress.component.jsx

@@ -1,51 +1,293 @@
-import { Ionicons } from "@expo/vector-icons";
+import { useApolloClient } from "@apollo/client";
+import * as FileSystem from "expo-file-system";
+import * as MediaLibrary from "expo-media-library";
 import _ from "lodash";
-import React, { useMemo } from "react";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
+  ActivityIndicator,
+  Alert,
+  Modal,
   ScrollView,
   StyleSheet,
   Text,
-  TouchableOpacity,
   View,
 } from "react-native";
-import * as Progress from "react-native-progress";
+import { ProgressBar } from "react-native-paper";
-export default function UploadProgress({ uploads, setUploads }) {
+import { connect } from "react-redux";
-  const uploadKeys = useMemo(() => {
+import { createStructuredSelector } from "reselect";
-    if (uploads) return Object.keys(uploads);
+import { logImEXEvent } from "../../firebase/firebase.analytics";
-    return [];
+import { GET_DOC_SIZE_TOTALS } from "../../graphql/documents.queries";
+import {
+  selectCurrentCameraJobId,
+  selectDeleteAfterUpload,
+} from "../../redux/app/app.selectors";
+import {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../../redux/user/user.selectors";
+import { formatBytes, handleUpload } from "../../util/document-upload.utility";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop,
+  selectedCameraJobId: selectCurrentCameraJobId,
+  deleteAfterUpload: selectDeleteAfterUpload,
+});
+
+export default connect(mapStateToProps, null)(UploadProgress);
+
+export function UploadProgress({
+  currentUser,
+  bodyshop,
+  selectedCameraJobId,
+  deleteAfterUpload,
+  uploads,
+  forceRerender,
+}) {
+  const [progress, setProgress] = useState({
+    loading: false,
+    uploadInProgress: false,
+    speed: 0,
+    files: {}, //uri is the key, value is progress
+  });
+
+  let filesToDelete = [];
+  const client = useApolloClient();
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    //Set the state of uploads to do.
+
+    if (uploads) onDone(uploads);
   }, [uploads]);
 
+  //if (!uploads) return null;
+
+  function handleOnSuccess(id) {
+    logImEXEvent("imexmobile_successful_upload");
+    filesToDelete.push(id);
+    setProgress((progress) => ({
+      ...progress,
+      action: t("mediabrowser.labels.converting"),
+      files: {
+        ...progress.files,
+        [id]: {
+          ...progress.files[id],
+          action: t("mediabrowser.labels.converting"),
+        },
+      },
+      // });
+    }));
+  }
+
+  function handleOnProgress(uri, percent, loaded) {
+    setProgress((progress) => ({
+      ...progress,
+      speed: loaded - progress.files[uri].loaded,
+      action:
+        percent === 1
+          ? t("mediabrowser.labels.converting")
+          : t("mediabrowser.labels.uploading"),
+      files: {
+        ...progress.files,
+        [uri]: {
+          ...progress.files[uri],
+          percent,
+          action:
+            percent === 1
+              ? t("mediabrowser.labels.converting")
+              : t("mediabrowser.labels.uploading"),
+          loaded: loaded,
+        },
+      },
+    }));
+  }
+  function handleOnError(...props) {
+    logImEXEvent("imexmobile_upload_documents_error", { props });
+  }
+
+  const onDone = async (data) => {
+    //Validate to make sure the totals for the file sizes do not exceed the total on the job.
+    setProgress({
+      files: _.keyBy(data, "id"),
+      loading: true,
+      uploadInProgress: true,
+    });
+
+    if (selectedCameraJobId !== "temp") {
+      const queryData = await client.query({
+        query: GET_DOC_SIZE_TOTALS,
+        fetchPolicy: "network-only",
+        variables: {
+          jobId: selectedCameraJobId,
+        },
+      });
+      const totalOfUploads = await data.reduce(async (acc, val) => {
+        //Get the size of the file based on URI.
+        const info = await FileSystem.getInfoAsync(val.uri, { size: true });
+        return (await acc) + info.size;
+      }, 0);
+
+      if (
+        bodyshop.jobsizelimit -
+          queryData.data.documents_aggregate.aggregate.sum.size <=
+        totalOfUploads
+      ) {
+        //No more room... abandon ship.
+        setProgress((progress) => ({
+          ...progress,
+          speed: 0,
+          action: null,
+          loading: false,
+          uploadInProgress: false,
+        }));
+        Alert.alert(
+          t("mediabrowser.labels.storageexceeded_title"),
+          t("mediabrowser.labels.storageexceeded")
+        );
+        return;
+      }
+    }
+
+    //Sequentially await the proms.
+
+    for (var i = 0; i < data.length + 4; i = i + 4) {
+      let proms = [];
+      if (data[i]) {
+        proms.push(CreateUploadProm(data[i]));
+      }
+      if (data[i + 1]) {
+        proms.push(CreateUploadProm(data[i + 1]));
+      }
+      if (data[i + 2]) {
+        proms.push(CreateUploadProm(data[i + 2]));
+      }
+      if (data[i + 3]) {
+        proms.push(CreateUploadProm(data[i + 3]));
+      }
+
+      await Promise.all(proms);
+    }
+
+    if (deleteAfterUpload) {
+      try {
+        await MediaLibrary.deleteAssetsAsync(filesToDelete);
+      } catch (error) {
+        console.log("Unable to delete picture.", error);
+      }
+    }
+    filesToDelete = [];
+    setProgress({
+      loading: false,
+      speed: 0,
+      action: null,
+
+      uploadInProgress: false,
+      files: {}, //uri is the key, value is progress
+    });
+
+    forceRerender();
+  };
+
+  const CreateUploadProm = async (p) => {
+    let filename;
+    filename = p.filename || p.uri.split("/").pop();
+
+    await handleUpload(
+      {
+        filename,
+        mediaId: p.id,
+        onError: handleOnError,
+        onProgress: ({ percent, loaded }) =>
+          handleOnProgress(p.id, percent, loaded),
+        onSuccess: () => handleOnSuccess(p.id),
+      },
+      {
+        bodyshop: bodyshop,
+        jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
+        uploaded_by: currentUser.email,
+        photo: p,
+      }
+    );
+
+    //Set the state to mark that it's done.
+    setProgress((progress) => ({
+      ...progress,
+      action: null,
+      speed: 0,
+      files: {
+        ...progress.files,
+        [p.id]: {
+          ...progress.files[p.id],
+          action: null,
+        },
+      },
+    }));
+  };
+
   return (
-    <View style={styles.container}>
+    <Modal
-      <ScrollView>
+      visible={progress.uploadInProgress}
-        {uploadKeys.map((key) => (
+      animationType="slide"
-          <View key={key} style={styles.progressItem}>
+      transparent={true}
-            <Text style={styles.progressText}>{key}</Text>
+      onRequestClose={() => {
-            <View style={styles.progressBarContainer}>
+        Alert.alert("Modal has been closed.");
-              <Progress.Bar
+      }}
-                style={styles.progress}
+    >
-                height={10}
+      <View style={styles.modal}>
-                width={null}
+        {progress.loading && <ActivityIndicator />}
-                progress={uploads[key].percent}
+        {progress.action && (
-                color={uploads[key].percent === 1 ? "green" : "blue"}
+          <Text>{`${progress.action} ${
-              />
+            (progress.speed !== 0 || !progress.speed) &&
+            `- ${formatBytes(progress.speed)}/sec`
+          }`}</Text>
+        )}
+        <ScrollView contentContainerStyle={styles.centeredView}>
+          {Object.keys(progress.files).map((key) => (
+            <View key={progress.files[key].id} style={styles.progressItem}>
+              <Text style={styles.progressText}>
+                {progress.files[key].filename}
+              </Text>
+              <View style={styles.progressBarContainer}>
+                <ProgressBar
+                  progress={progress.files[key].percent}
+                  style={styles.progress}
+                  color={progress.files[key].percent === 1 ? "green" : "blue"}
+                />
+              </View>
             </View>
-            <TouchableOpacity
+          ))}
-              onPress={() =>
+        </ScrollView>
-                setUploads((prevUploads) => _.omit(prevUploads, key))
+      </View>
-              }
+    </Modal>
-            >
-              <Ionicons name="ios-close" size={32} />
-            </TouchableOpacity>
-          </View>
-        ))}
-      </ScrollView>
-    </View>
   );
 }
 const styles = StyleSheet.create({
-  container: {
+  modal: {
-    display: "flex",
+    flex: 1,
+    marginTop: 50,
+    marginBottom: 60,
+    marginLeft: 20,
+    marginRight: 20,
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 18,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  centeredView: {
+    flex: 1,
+    // justifyContent: "center",
+    // alignItems: "center",
+    marginTop: 22,
   },
   progressItem: {
     display: "flex",

env.js

@@ -9,7 +9,7 @@ const ENV = {
       "https://api.cloudinary.com/v1_1/bodyshop",
     REACT_APP_CLOUDINARY_ENDPOINT: "https://res.cloudinary.com/bodyshop",
     REACT_APP_CLOUDINARY_API_KEY: "473322739956866",
-    REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: "c_fill,f_auto,h_250,w_250",
+    REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: "c_fill,h_250,w_250",
     firebase: {
       apiKey: "AIzaSyBw7_GTy7GtQyfkIRPVrWHEGKfcqeyXw0c",
       authDomain: "imex-test.firebaseapp.com",
@@ -29,7 +29,7 @@ const ENV = {
       "https://api.cloudinary.com/v1_1/bodyshop",
     REACT_APP_CLOUDINARY_ENDPOINT: "https://res.cloudinary.com/bodyshop",
     REACT_APP_CLOUDINARY_API_KEY: "473322739956866",
-    REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: "h_200,w_200,c_thumb",
+    REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS: "c_fill,h_250,w_250",
     firebase: {
       apiKey: "AIzaSyDSezy-jGJreo7ulgpLdlpOwAOrgcaEkhU",
       authDomain: "imex-prod.firebaseapp.com",
@@ -56,7 +56,7 @@ function getEnvVars() {
   if (releaseChannel.indexOf("development") !== -1) return ENV.test;
 
   if (releaseChannel.indexOf("test") !== -1) return ENV.test;
-  if (releaseChannel.indexOf("default") !== -1) return ENV.prod;
+  if (releaseChannel.indexOf("default") !== -1) return ENV.test;
   else return ENV.prod;
 }
 

firebase/firebase.analytics.js

@@ -12,12 +12,6 @@ export const logImEXEvent = (eventName, additionalParams, stateProp = null) => {
     //   null,
     ...additionalParams,
   };
-  console.log(
-    "%c[Analytics]",
-    "background-color: green ;font-weight:bold;",
-    eventName,
-    eventParams
-  );
   Analytics.logEvent(eventName, eventParams);
 };
 

firebase/firebase.utils.js

@@ -1,9 +1,7 @@
-import * as firebase from "firebase/app";
+import firebase from "firebase/app";
 import "firebase/auth";
 import env from "../env";
 
-console.log(env.firebase);
-
 if (!firebase.apps.length) {
   firebase.initializeApp(env.firebase);
 }

graphql/documents.queries.js

@@ -27,15 +27,8 @@ export const GET_DOCUMENTS_BY_JOB = gql`
       key
       type
       takenat
-      bill {
+      extension
-        id
+      jobid
-        invoice_number
-        date
-        vendor {
-          id
-          name
-        }
-      }
     }
   }
 `;
@@ -47,6 +40,10 @@ export const INSERT_NEW_DOCUMENT = gql`
         id
         name
         key
+        type
+        takenat
+        extension
+        jobid
       }
     }
   }

graphql/jobs.queries.js

@@ -218,6 +218,7 @@ export const GET_JOB_BY_PK = gql`
         key
         created_at
         type
+        extension
       }
     }
   }

package.json

@@ -5,69 +5,75 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "eject": "expo eject"
+    "eject": "expo eject",
+    "release:test": "expo publish --release-channel test",
+    "release:production": "expo publish --release-channel production",
+    "build:ios:production": "expo build:ios --release-channel production",
+    "build:ios:test": "expo build:ios --release-channel test",
+    "build:android:production": "expo build:android --release-channel production",
+    "build:android:test": "expo build:android --release-channel test"
   },
   "dependencies": {
-    "@apollo/client": "^3.3.4",
+    "@apollo/client": "^3.3.19",
-    "@expo/vector-icons": "^10.2.0",
+    "@expo/vector-icons": "^12.0.0",
-    "@react-native-community/async-storage": "~1.12.0",
+    "@react-native-async-storage/async-storage": "^1.13.0",
+    "@react-native-community/art": "^1.2.0",
     "@react-native-community/masked-view": "0.1.10",
-    "@react-navigation/bottom-tabs": "^5.11.2",
+    "@react-navigation/bottom-tabs": "^5.11.11",
-    "@react-navigation/drawer": "^5.11.4",
+    "@react-navigation/drawer": "^5.12.5",
-    "@react-navigation/native": "^5.8.10",
+    "@react-navigation/native": "^5.9.4",
-    "@react-navigation/stack": "^5.12.8",
+    "@react-navigation/stack": "^5.14.5",
     "axios": "^0.21.0",
+    "cloudinary-core": "^2.11.4",
     "dinero.js": "^1.8.1",
-    "expo": "^40.0.0",
+    "expo": "^41.0.0",
-    "expo-app-loading": "^1.0.0",
+    "expo-app-loading": "^1.0.3",
-    "expo-av": "~8.7.0",
+    "expo-av": "~9.1.2",
-    "expo-camera": "~9.1.0",
+    "expo-camera": "~11.0.2",
-    "expo-file-system": "~9.3.0",
+    "expo-file-system": "~11.0.2",
-    "expo-firebase-analytics": "~2.6.0",
+    "expo-firebase-analytics": "~4.0.2",
-    "expo-font": "~8.4.0",
+    "expo-font": "~9.1.0",
     "expo-images-picker": "git+https://github.com/snaptsoft/expo-images-picker/",
-    "expo-localization": "~9.1.0",
+    "expo-localization": "~10.1.0",
-    "expo-media-library": "~10.0.0",
+    "expo-media-library": "~12.0.2",
-    "expo-permissions": "~10.0.0",
+    "expo-permissions": "~12.0.1",
-    "expo-status-bar": "~1.0.3",
+    "expo-status-bar": "~1.0.4",
-    "expo-video-thumbnails": "~4.4.0",
+    "expo-video-thumbnails": "~5.1.0",
-    "firebase": "7.9.0",
+    "firebase": "8.2.3",
-    "formik": "^2.2.5",
+    "formik": "^2.2.8",
     "graphql": "^15.4.0",
-    "i18next": "^19.8.4",
+    "i18next": "^20.3.1",
     "lodash": "^4.17.20",
-    "luxon": "^1.25.0",
+    "luxon": "^1.27.0",
-    "p-limit": "^3.1.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "react-i18next": "^11.8.2",
+    "react-i18next": "^11.10.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
-    "react-native-easy-grid": "^0.2.2",
+    "react-native-gesture-handler": "~1.10.2",
-    "react-native-gesture-handler": "~1.8.0",
     "react-native-image-gallery": "archriss/react-native-image-gallery#152/head",
     "react-native-indicators": "^0.17.0",
-    "react-native-pager-view": "^5.1.0",
+    "react-native-pager-view": "5.0.12",
-    "react-native-paper": "^4.7.2",
+    "react-native-paper": "^4.9.1",
     "react-native-progress": "^4.1.2",
-    "react-native-reanimated": "~1.13.0",
+    "react-native-reanimated": "~2.1.0",
-    "react-native-screens": "~2.15.0",
+    "react-native-screens": "~3.0.0",
     "react-native-tab-view": "3.0.1",
     "react-native-web": "~0.13.12",
-    "react-redux": "^7.2.2",
+    "react-redux": "^7.2.4",
-    "redux": "^4.0.5",
+    "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.1.3",
     "reselect": "^4.0.0",
-    "sentry-expo": "^3.1.3",
+    "sentry-expo": "^3.1.0",
     "subscriptions-transport-ws": "^0.9.18"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.13",
+    "@babel/core": "~7.9.0",
     "babel-preset-expo": "8.3.0",
-    "eslint": "^7.19.0",
+    "eslint": "^7.27.0",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-native": "^3.10.0"
+    "eslint-plugin-react-native": "^3.11.0"
   },
   "private": true
 }

redux/root.reducer.js

@@ -1,4 +1,4 @@
-import AsyncStorage from "@react-native-community/async-storage";
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { combineReducers } from "redux";
 import { persistReducer } from "redux-persist";
 import appReducer from "./app/app.reducer";

translations/en-US/common.json

@@ -89,13 +89,16 @@
 				"upload": "Upload"
 			},
 			"labels": {
+				"converting": "Converting",
 				"deleteafterupload": "Delete After Upload",
 				"nomedia": "Look's like there's no media on your device. Take some photos or videos and they will appear here.",
 				"selectjob": "--- Select a job ---",
 				"selectjobassetselector": "Please select a job to upload media. ",
 				"storageexceeded": "Unable to uploaded selected files because there is not sufficient space available on this job.",
 				"storageexceeded_title": "Unable to upload file(s)",
-				"temporarystorage": "* Temporary Storage *"
+				"storageused": "Storage Used: {{used}} / {{total}} ({{percent}}%)",
+				"temporarystorage": "* Temporary Storage *",
+				"uploading": "Uploading"
 			},
 			"titles": {
 				"mediabrowsertab": "Media Browser"

translations/es-MX/common.json

@@ -89,13 +89,16 @@
 				"upload": ""
 			},
 			"labels": {
+				"converting": "",
 				"deleteafterupload": "",
 				"nomedia": "",
 				"selectjob": "",
 				"selectjobassetselector": "",
 				"storageexceeded": "",
 				"storageexceeded_title": "",
-				"temporarystorage": ""
+				"storageused": "",
+				"temporarystorage": "",
+				"uploading": ""
 			},
 			"titles": {
 				"mediabrowsertab": ""

translations/fr-CA/common.json

@@ -89,13 +89,16 @@
 				"upload": ""
 			},
 			"labels": {
+				"converting": "",
 				"deleteafterupload": "",
 				"nomedia": "",
 				"selectjob": "",
 				"selectjobassetselector": "",
 				"storageexceeded": "",
 				"storageexceeded_title": "",
-				"temporarystorage": ""
+				"storageused": "",
+				"temporarystorage": "",
+				"uploading": ""
 			},
 			"titles": {
 				"mediabrowsertab": ""

translations/i18n.js

@@ -34,7 +34,7 @@ i18n.use(initReactI18next).init({
   // have a common namespace used around the full app
   //   ns: ["common"],
   //   defaultNS: "common",
-  debug: true,
+  //debug: true,
   // cache: {
   //   enabled: true
   // },

util/document-upload.utility.js

@@ -4,6 +4,7 @@ import { client } from "../graphql/client";
 import { INSERT_NEW_DOCUMENT } from "../graphql/documents.queries";
 import { axiosAuthInterceptorId } from "./CleanAxios";
 import * as MediaLibrary from "expo-media-library";
+import { gql } from "@apollo/client";
 
 //Context: currentUserEmail, bodyshop, jobid, invoiceid
 
@@ -16,15 +17,12 @@ export const handleUpload = async (ev, context) => {
   const { bodyshop, jobId } = context;
 
   const imageData = await MediaLibrary.getAssetInfoAsync(mediaId);
-
   const newFile = await (await fetch(imageData.localUri)).blob();
-
   let extension = imageData.localUri.split(".").pop();
-
   let key = `${bodyshop.id}/${jobId}/${(filename || newFile.data.name).replace(
     /\.[^/.]+$/,
     ""
-  )}`;
+  )}-${new Date().getTime()}`;
 
   const res = await uploadToCloudinary(
     key,
@@ -69,12 +67,14 @@ export const uploadToCloudinary = async (
     : "incoming_upload";
 
   //Get the signed url.
+
   let signedURLResponse;
   try {
     signedURLResponse = await axios.post(`${env.API_URL}/media/sign`, {
       public_id: public_id,
       tags: tags,
       timestamp: timestamp,
+
       upload_preset: upload_preset,
     });
   } catch (error) {
@@ -90,24 +90,23 @@ export const uploadToCloudinary = async (
   }
 
   //Build request to end to cloudinary.
+
   var signature = signedURLResponse.data;
   var options = {
     headers: { "X-Requested-With": "XMLHttpRequest" },
     onUploadProgress: (e) => {
-      if (onProgress) onProgress({ percent: e.loaded / e.total });
+      if (onProgress)
+        onProgress({ percent: e.loaded / e.total, loaded: e.loaded });
     },
   };
 
   const formData = new FormData();
-
   formData.append("file", {
     uri: imageData.localUri,
     type: fileType,
     name: file.data.name,
   });
-
   formData.append("upload_preset", upload_preset);
-
   formData.append("api_key", env.REACT_APP_CLOUDINARY_API_KEY);
   formData.append("public_id", public_id);
   formData.append("tags", tags);
@@ -145,6 +144,30 @@ export const uploadToCloudinary = async (
   //Insert the document with the matching key.
   const documentInsert = await client.mutate({
     mutation: INSERT_NEW_DOCUMENT,
+
+    update: (cache, { data }) => {
+      cache.modify({
+        fields: {
+          documents: (existingDocs = []) => {
+            const newDocRef = cache.writeFragment({
+              data: data.insert_documents.returning[0],
+              fragment: gql`
+                fragment newDoc on documents {
+                  id
+                  name
+                  key
+                  type
+                  takenat
+                  extension
+                  jobid
+                }
+              `,
+            });
+            return [...existingDocs, newDocRef];
+          },
+        },
+      });
+    },
     variables: {
       docInput: [
         {
@@ -190,6 +213,7 @@ export const uploadToCloudinary = async (
       mediaId,
     };
   }
+
   return { success: true, mediaId };
 };
 
@@ -202,3 +226,14 @@ export function DetermineFileType(filetype) {
 
   return "auto";
 }
+
+export function formatBytes(a, b = 2) {
+  if (0 === a || !a) return "0 Bytes";
+  const c = 0 > b ? 0 : b,
+    d = Math.floor(Math.log(a) / Math.log(1024));
+  return (
+    parseFloat((a / Math.pow(1024, d)).toFixed(c)) +
+    " " +
+    ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"][d]
+  );
+}