upload receipt functionality

Author: Kashishjain04

.env

@@ -8,6 +8,8 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
+.env
+src/firebase.js
 
 # macOS
 .DS_Store

.gitignore

@@ -18,6 +18,7 @@
     "expo-app-loading": "^1.1.2",
     "expo-file-system": "~11.1.3",
     "expo-google-app-auth": "^8.2.2",
+    "expo-image-picker": "~10.2.2",
     "expo-media-library": "~12.1.2",
     "expo-status-bar": "~1.0.4",
     "firebase": "8.2.3",

package.json

@@ -25,19 +25,23 @@ const AddCustomerModal = ({ visible, setVisible, fun }) => {
   };
   return (
     <Modal
-      // style={tw`h-full w-full  z-50 justify-center`}
-      animationType="slide"
+      animationType="fade"
       transparent={true}
       visible={visible}
       onRequestClose={() => setVisible(false)}
     >
-      <View
+      <TouchableOpacity
+        onPress={() => setVisible(false)}
         style={[
           tw`h-full w-full absolute justify-center items-center`,
           { backgroundColor: "rgba(0,0,0,0.6)" },
         ]}
       >
-        <View style={tw`w-11/12 rounded-lg bg-white`}>
+        <TouchableOpacity
+          onPress={null}
+          activeOpacity={1}
+          style={tw`w-11/12 rounded-lg bg-white z-20`}
+        >
           <TouchableOpacity
             style={tw`absolute right-4 top-4 z-10`}
             onPress={() => setVisible(false)}
@@ -78,8 +82,8 @@ const AddCustomerModal = ({ visible, setVisible, fun }) => {
           <View style={tw`mx-4 my-2 mb-4`}>
             <Button onPress={submitHandler} title="Submit" />
           </View>
-        </View>
-      </View>
+        </TouchableOpacity>
+      </TouchableOpacity>
     </Modal>
   );
 };

src/components/AddCustomerModal.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   View,
   Text,
@@ -10,12 +10,26 @@ import {
 } from "react-native";
 import { Icon } from "react-native-elements";
 import tw from "tailwind-react-native-classnames";
+import * as ImagePicker from "expo-image-picker";
 
-const AddTransactionModal = ({ visible, setVisible, fun }) => {
+const AddTransactionModal = ({
+  visible,
+  setVisible,
+  fun,
+  transId,
+  storage,
+  setLoading,
+}) => {
   const [amt, setAmt] = useState(null),
     [desc, setDesc] = useState(""),
     ref1 = useRef(null),
-    ref2 = useRef(null);
+    ref2 = useRef(null),
+    [image, setImage] = useState(null);
+
+  useEffect(() => {
+    setLoading(true);
+    return setLoading(false);
+  }, []);
 
   const submitHandler = (isGiving) => {
     if (!amt || !desc) {
@@ -24,23 +38,74 @@ const AddTransactionModal = ({ visible, setVisible, fun }) => {
     if (amt < 1) {
       return Alert.alert("Amount must be grater than 0");
     }
-    fun(isGiving, Number(amt), desc);
+    if (image) {
+      uploadImage(isGiving);
+    } else {
+      fun(isGiving, Number(amt), desc, "");
+    }
+  };
+
+  const pickImage = async () => {
+    const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
+
+    if (!permission.granted) {
+      return Alert.alert("Permission to access camera roll is required");
+    }
+    const res = await ImagePicker.launchImageLibraryAsync({
+      quality: 0.5,
+      allowsEditing: true,
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+    });
+    setImage(res.uri || null);
+  };
+
+  const uploadImage = async (isGiving) => {
+    setLoading(true);
+    const fileName = image.substring(image.lastIndexOf("/")),
+      response = await fetch(image),
+      blob = await response.blob(),
+      storageRef = storage().ref(`receipts/${transId}-${fileName}`),
+      task = storageRef.put(blob);
+    task.on(
+      "state_changed",
+      function progress(snapshot) {},
+      function error(err) {
+        console.log(err);
+        setLoading(false);
+      },
+      function complete() {
+        storageRef
+          .getDownloadURL()
+          .then((url) => {
+            setLoading(false);
+            fun(isGiving, Number(amt), desc, url);
+          })
+          .catch((err) => {
+            setLoading(false);
+            console.log(err);
+          });
+      }
+    );
   };
   return (
     <Modal
-      // style={tw`h-full w-full  z-50 justify-center`}
-      animationType="slide"
+      animationType="fade"
       transparent={true}
       visible={visible}
       onRequestClose={() => setVisible(false)}
     >
-      <View
+      <TouchableOpacity
+        onPress={() => setVisible(false)}
         style={[
           tw`h-full w-full absolute justify-center items-center`,
           { backgroundColor: "rgba(0,0,0,0.6)" },
         ]}
       >
-        <View style={tw`w-11/12 rounded-lg bg-white`}>
+        <TouchableOpacity
+          onPress={null}
+          activeOpacity={1}
+          style={tw`w-11/12 rounded-lg bg-white`}
+        >
           <TouchableOpacity
             style={tw`absolute right-4 top-4 z-10`}
             onPress={() => setVisible(false)}
@@ -74,7 +139,10 @@ const AddTransactionModal = ({ visible, setVisible, fun }) => {
             value={desc}
             onChangeText={(text) => setDesc(text)}
           />
-          <View style={tw`flex-row items-center mx-4 mb-2`}>
+          <View style={tw`mx-4 my-2`}>
+            <Button onPress={pickImage} title="Add Receipt" />
+          </View>
+          <View style={tw`flex-row items-center mx-2 mb-2`}>
             <View style={tw`p-2 w-1/2`}>
               <Button
                 color="rgb(185,28,28)"
@@ -90,8 +158,8 @@ const AddTransactionModal = ({ visible, setVisible, fun }) => {
               />
             </View>
           </View>
-        </View>
-      </View>
+        </TouchableOpacity>
+      </TouchableOpacity>
     </Modal>
   );
 };

src/components/AddTransactionModal.js

@@ -1,7 +1,11 @@
 import React from "react";
 import { Image, StyleSheet, View } from "react-native";
 import tw from "tailwind-react-native-classnames";
-import { ANDROID_OAUTH_KEY, IOS_OAUTH_KEY } from "@env";
+import {
+  ANDROID_OAUTH_KEY,
+  IOS_OAUTH_KEY,
+  ANDROID_OAUTH_KEY_LOCAL,
+} from "@env";
 import * as Google from "expo-google-app-auth";
 import { GoogleSocialButton } from "react-native-social-buttons";
 import firebase from "../firebase";
@@ -15,7 +19,7 @@ const AuthScreen = () => {
     try {
       const res = await Google.logInAsync({
         androidStandaloneAppClientId: ANDROID_OAUTH_KEY,
-        androidClientId: ANDROID_OAUTH_KEY,
+        androidClientId: ANDROID_OAUTH_KEY_LOCAL,
         iosClientId: IOS_OAUTH_KEY,
         scopes: ["profile", "email"],
       });

src/firebase.js

@@ -19,7 +19,8 @@ import Loader from "../components/Loader";
 import AddButton from "../components/AddButton";
 import AddTransactionModal from "../components/AddTransactionModal";
 
-const db = firebase.firestore;
+const db = firebase.firestore,
+  storage = firebase.storage;
 
 const CustomerScreen = ({ route }) => {
   const { customerId, customerName } = route?.params,
@@ -92,7 +93,7 @@ const CustomerScreen = ({ route }) => {
     setGot(tGot);
   }, [trans]);
 
-  const addTransaction = (isGiving, amount, desc) => {
+  const addTransaction = (isGiving, amount, desc, url = "") => {
     setLoading(true);
     let amt = 0;
     if (isGiving) {
@@ -106,12 +107,12 @@ const CustomerScreen = ({ route }) => {
       timestamp: lastActivity,
       amount: amt,
       desc,
-      receipt: "",
+      receipt: url,
     });
     selfTransRef.set({
       timestamp: lastActivity,
       amount: -1 * amt,
-      receipt: "",
+      receipt: url,
       desc,
     });
     if (isGiving) {
@@ -156,6 +157,9 @@ const CustomerScreen = ({ route }) => {
           fun={addTransaction}
           visible={modalVisible}
           setVisible={setModalVisible}
+          transId={transRef?.id}
+          storage={storage}
+          setLoading={setLoading}
         />
       )}
       <FlatList

src/screens/AuthScreen.js

@@ -1,7 +1,10 @@
-export const formatNumber = (number) =>
-  new Intl.NumberFormat("en-IN", {
+export const formatNumber = (number) => {
+  const maximumFractionDigits = number % 1 === 0 ? 0 : 2;
+  return new Intl.NumberFormat("en-IN", {
     style: "currency",
     currency: "INR",
-    maximumSignificantDigits: 16,
+    minimumFractionDigits: 0,
+    maximumFractionDigits,
     signDisplay: false,
   }).format(number);
+};

src/screens/CustomerScreen.js

@@ -3665,6 +3665,16 @@ expo-google-app-auth@^8.2.2:
   dependencies:
     expo-app-auth "~10.2.2"
 
+expo-image-picker@~10.2.2:
+  version "10.2.2"
+  resolved "https://registry.yarnpkg.com/expo-image-picker/-/expo-image-picker-10.2.2.tgz#7501a13306029f672a165f53545ee5dc5f5dc009"
+  integrity sha512-LCssY/wy4Y/7YsxoUO7PvjqwtQ9L84hxP86RLPnRSUSZy7s+00wnHFctrrtQ0UO4yR2i7rKTMTpkBEP6NVHv2w==
+  dependencies:
+    "@expo/config-plugins" "^3.0.0"
+    expo-modules-core "~0.2.0"
+    expo-permissions "~12.1.1"
+    uuid "7.0.2"
+
 expo-keep-awake@~9.2.0:
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-9.2.0.tgz#9cbdcc8264c943ef29a58326236cd34267e98f43"
@@ -3694,6 +3704,13 @@ expo-modules-core@~0.2.0:
   resolved "https://registry.yarnpkg.com/expo-modules-core/-/expo-modules-core-0.2.0.tgz#68e5b6e53d0afbf8d131578831aed657589a2d42"
   integrity sha512-inpfZ5X/BaTtbj2wG9PA9AC0MN8VyId6KSRlVuEg7+ziurHBy/kKDFxpOddUokhwiln2uhoYPSStJjR/tKypdw==
 
+expo-permissions@~12.1.1:
+  version "12.1.1"
+  resolved "https://registry.yarnpkg.com/expo-permissions/-/expo-permissions-12.1.1.tgz#93fd8569d4106ff9dd66d67619cb69a0aa895482"
+  integrity sha512-fHBB4A/aWMcvdmDY79gpgQt0ufKG8F1gwTgO3+RjjudVe5kovNy5TeXdHrCa0MksFVKjktqLjJrgiBITJXjg+g==
+  dependencies:
+    expo-modules-core "~0.2.0"
+
 expo-splash-screen@~0.11.2:
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/expo-splash-screen/-/expo-splash-screen-0.11.2.tgz#70c69052981cc982d12030f2a1df5b35af7ee752"
@@ -7704,6 +7721,11 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
+uuid@7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.2.tgz#7ff5c203467e91f5e0d85cfcbaaf7d2ebbca9be6"
+  integrity sha512-vy9V/+pKG+5ZTYKf+VcphF5Oc6EFiu3W8Nv3P3zIh0EqVI80ZxOzuPfe9EHjkFNvf8+xuTHVeei4Drydlx4zjw==
+
 uuid@^3.3.2, uuid@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"