Merge pull request #267 from anqi20/branch-new-return-flow

Implement new return screen flow

components/SuccessBox.js

@@ -12,7 +12,11 @@ import { Icon } from "react-native-elements";
 import colors from "../assets/colors";
 import moment from "moment";
 import { globalStyles } from "../assets/globalStyles";
-import { useNavigation, StackActions } from "@react-navigation/native";
+import {
+  useNavigation,
+  StackActions,
+  CommonActions,
+} from "@react-navigation/native";
 import * as Animatable from "react-native-animatable";
 import { MaterialIcons } from "@expo/vector-icons";
 
@@ -23,6 +27,7 @@ export default function SuccessBox({
   location,
   numCoins,
   header,
+  isReturn,
 }) {
   const navigation = useNavigation();
 
@@ -188,7 +193,14 @@ export default function SuccessBox({
         <TouchableOpacity
           style={[globalStyles.button, { width: "100%", alignSelf: "center" }]}
           onPress={() => {
-            navigation.dispatch(StackActions.popToTop());
+            if (isReturn) {
+              // Ensures that previous state of initial screen is cleared
+              navigation.dispatch(
+                StackActions.replace("Temp Return Selection Screen")
+              );
+            } else {
+              navigation.dispatch(StackActions.popToTop());
+            }
             navigation.navigate("Home Screen");
           }}
         >

screens/borrow-screens/BorrowSuccessfulScreen.js

@@ -32,7 +32,10 @@ export default function BorrowSuccessfulScreen({ route, navigation }) {
       <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
         <Image
           source={require("../../assets/AppImages/borrowHeader.png")}
-          style={{ width: Dimensions.get("window").width+4, marginBottom: 50 }}
+          style={{
+            width: Dimensions.get("window").width + 4,
+            marginBottom: 50,
+          }}
         />
         <View style={{ alignSelf: "center" }}>
           <Animatable.Image
@@ -47,6 +50,7 @@ export default function BorrowSuccessfulScreen({ route, navigation }) {
           numContainers={numContainers}
           location={stall}
           header={"Successful!"}
+          isReturn={false}
         />
         <FooterText />
       </ScrollView>

screens/return-screens/ReturnClaimSuccess.js

@@ -5,7 +5,12 @@ import colors from "../../assets/colors";
 import { globalStyles } from "../../assets/globalStyles";
 import FooterText from "../../components/FooterText";
 import { UserContext } from "../../assets/UserContext";
-import { updateCoins, updateReturnData, addClaimToLogs, clearReturnLocation } from "./ReturnApi";
+import {
+  updateCoins,
+  updateReturnData,
+  addClaimToLogs,
+  clearReturnLocation,
+} from "./ReturnApi";
 import { useBackHandler } from "@react-native-community/hooks";
 import { backActionHandler } from "../BasicApi";
 
@@ -44,6 +49,7 @@ export default function ReturnClaimSuccess({ route }) {
           numContainers={numContainers}
           numCoins={coinsEarned}
           header={"Thank you for returning!"}
+          isReturn={true}
         />
         <FooterText />
       </ScrollView>

screens/return-screens/ReturnStack.js

@@ -14,10 +14,15 @@ export default function ReturnStack() {
   return (
     <Stack.Navigator options={{ gestureEnabled: false }}>
       <Stack.Screen
+        name="Temp Return Selection Screen"
+        component={TempReturnSelection}
+        options={{ headerShown: false, gestureEnabled: false }}
+      />
+      {/* <Stack.Screen
         name="Return QR Screen"
         component={ReturnQRScreen}
         options={{ headerShown: false }}
-      ></Stack.Screen>
+      ></Stack.Screen> */}
       <Stack.Screen
         name="Return Status Screen"
         component={ReturnStatusScreen}
@@ -43,11 +48,6 @@ export default function ReturnStack() {
         component={ReturnClaimSuccess}
         options={{ headerShown: false, gestureEnabled: false }}
       />
-      <Stack.Screen
-        name="Temp Return Selection Screen"
-        component={TempReturnSelection}
-        options={{ headerShown: false, gestureEnabled: false }}
-      />
     </Stack.Navigator>
   );
 }

screens/return-screens/TempReturnSelection.js

@@ -18,24 +18,31 @@ import { UserContext } from "../../assets/UserContext";
 import { useNavigation } from "@react-navigation/native";
 import { useBackHandler } from "@react-native-community/hooks";
 import { backActionHandler } from "../BasicApi";
-import { clearReturnLocation } from "./ReturnApi";
+import RNPickerSelect from "react-native-picker-select";
+import { useFocusEffect } from "@react-navigation/native";
 
-function ReturnClaim({ location }) {
+function ReturnClaim() {
   const [numCups, setCupNum] = useState(0);
   const [numContainers, setContainerNum] = useState(0);
   const [borrowedCup, setBorrowedCup] = useState(0);
   const [borrowedContainer, setBorrowedContainer] = useState(0);
-
-  // console.log(location);
+  const [location, setLocation] = useState("");
 
   const userData = useContext(UserContext);
   const uid = userData.id;
   const navigation = useNavigation();
 
-  useEffect(() => {
-    getBorrowedNum(uid, setBorrowedCup, setBorrowedContainer);
-    console.log("Setting up current user's borrowed items number");
-  }, []);
+  // useEffect(() => {
+  //   getBorrowedNum(uid, setBorrowedCup, setBorrowedContainer);
+  //   console.log("Setting up current user's borrowed items number");
+  // }, []);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      getBorrowedNum(uid, setBorrowedCup, setBorrowedContainer);
+      console.log("Updating return screen state");
+    }, [])
+  );
 
   function renderNextButton() {
     const [isPressed, setPress] = useState(false);
@@ -46,42 +53,38 @@ function ReturnClaim({ location }) {
 
     if (numContainers == 0 && numCups == 0) {
       return (
-        <View
-          style={{
-            justifyContent: "center",
-            alignItems: "center",
-            width: "100%",
-          }}
-        >
+        <View style={styles.errorView}>
           <TouchableOpacity
-            style={[
-              globalStyles.button,
-              {
-                width: "90%",
-                backgroundColor: colors.lightGrey,
-                marginBottom: 10,
-                height: 60,
-              },
-            ]}
+            style={[globalStyles.button, styles.errorButton]}
             onPress={changeState}
           >
-            <Text style={[globalStyles.buttonText, { textAlign: "center" }]}>
+            <Text style={[globalStyles.buttonText, styles.errorButtonText]}>
               I declare that I’m returning the above number of reusables
             </Text>
           </TouchableOpacity>
           {isPressed ? (
-            <Text
-              style={{
-                color: colors.red,
-                marginBottom: 20,
-                textAlign: "center",
-              }}
-            >
+            <Text style={styles.errorText}>
               Please select at least 1 item to proceed.
             </Text>
           ) : null}
         </View>
       );
+    } else if (location == "") {
+      return (
+        <View style={styles.errorView}>
+          <TouchableOpacity
+            style={[globalStyles.button, styles.errorButton]}
+            onPress={changeState}
+          >
+            <Text style={[globalStyles.buttonText, styles.errorButtonText]}>
+              I declare that I’m returning the above number of reusables
+            </Text>
+          </TouchableOpacity>
+          {isPressed ? (
+            <Text style={styles.errorText}>Please select your location.</Text>
+          ) : null}
+        </View>
+      );
     } else {
       return (
         <TouchableOpacity
@@ -91,8 +94,8 @@ function ReturnClaim({ location }) {
               width: "90%",
               marginBottom: 10,
               alignSelf: "center",
-              height: 60,
               backgroundColor: "coral",
+              height: 60,
             },
           ]}
           onPress={() =>
@@ -106,9 +109,10 @@ function ReturnClaim({ location }) {
           <Text
             style={[
               globalStyles.buttonText,
-              { textAlign: "center", color: "black" },
+              { textAlign: "center", marginHorizontal: 10, color: "black" },
             ]}
           >
+            {" "}
             I declare that I’m returning the above number of reusables
           </Text>
         </TouchableOpacity>
@@ -137,53 +141,61 @@ function ReturnClaim({ location }) {
         setCupNum={setCupNum}
         setContainerNum={setContainerNum}
       />
-      {renderNextButton()}
-      <TouchableOpacity
-        onPress={() => {
-          clearReturnLocation(uid);
-          navigation.popToTop();
-        }}
-        style={[
-          globalStyles.button,
-          { width: "90%", alignSelf: "center", marginBottom: 30 },
-        ]}
-      >
-        <Text style={globalStyles.buttonText}>Cancel</Text>
-      </TouchableOpacity>
+
+      <View style={styles.locationSelection}>
+        <Text style={{ fontSize: 18 }}>Location:</Text>
+        <View style={{ paddingHorizontal: 20 }}>
+          <RNPickerSelect
+            onValueChange={(location) => {
+              setLocation(location);
+              // console.log("Location: ", location);
+            }}
+            value={location}
+            items={locations}
+            placeholder={{
+              label: "Select location",
+              value: "",
+            }}
+            useNativeAndroidPickerStyle={false}
+            style={{
+              ...pickerSelectStyles,
+              placeholder: styles.dropdownPlaceholder,
+            }}
+          />
+        </View>
+      </View>
+
+      {renderNextButton(location)}
     </View>
   );
 }
 
-export default function TempReturnSelection({ navigation, route }) {
-  const { location } = route.params;
-  // console.log(location);
-
+export default function ReturnErrorScreen({ navigation, route }) {
   // Prevent back button action on Android
   useBackHandler(backActionHandler);
 
   return (
-    <ScrollView
-      style={{ backgroundColor: colors.white }}
-      showsVerticalScrollIndicator={false}
-    >
-      <View style={styles.container}>
-        <Image
-          source={require("../../assets/AppImages/returnHeader.png")}
-          style={{ width: Dimensions.get("window").width + 4 }}
-        />
-        <View style={styles.box}>
-          <ReturnClaim location={location} />
-        </View>
+    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+      <Image
+        source={require("../../assets/AppImages/returnHeader.png")}
+        style={{ width: Dimensions.get("window").width + 4 }}
+      />
+      <View style={styles.box}>
+        <ReturnClaim />
       </View>
     </ScrollView>
   );
 }
 
+const locations = [
+  { value: "ClaimE4", label: "E4" },
+  { value: "ClaimSDE4", label: "SDE4" },
+  { value: "ClaimTechnoEdge", label: "TechnoEdge" },
+];
+
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    alignItems: "center",
-    paddingHorizontal: 40,
+    backgroundColor: "white",
   },
   box: {
     borderWidth: 2,
@@ -214,4 +226,48 @@ const styles = StyleSheet.create({
     fontSize: 18,
     textAlign: "center",
   },
+  errorText: {
+    color: colors.red,
+    marginBottom: 20,
+    textAlign: "center",
+  },
+  errorButton: {
+    width: "90%",
+    backgroundColor: colors.lightGrey,
+    marginBottom: 10,
+    height: 60,
+  },
+  errorView: {
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+  },
+  errorButtonText: {
+    textAlign: "center",
+    marginHorizontal: 10,
+  },
+  locationSelection: {
+    flexDirection: "row",
+    marginHorizontal: 50,
+    marginBottom: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 10,
+    borderBottomWidth: 1.5,
+    borderColor: "#aeb3b8",
+  },
+  dropdownPlaceholder: {
+    color: colors.darkGrey,
+    fontSize: 18,
+  },
+});
+
+const pickerSelectStyles = StyleSheet.create({
+  inputIOS: {
+    color: colors.black,
+    fontSize: 18,
+  },
+  inputAndroid: {
+    color: colors.black,
+    fontSize: 18,
+  },
 });