From 668dbe5bed155c68e0602a9f9dee384ef2ec38ef Mon Sep 17 00:00:00 2001
From: Antoine Bagnaud <contact@antoinebagnaud.me>
Date: Wed, 4 Sep 2024 17:33:29 +0200
Subject: [PATCH] feat: app fully functionnal

Need some style fix
---
 src/components/BarcodeCameraView.js           |  84 ++++---
 src/navigation/courier/SelectRange.js         |  33 ++-
 src/navigation/courier/barcode/Barcode.js     | 133 ++++++++++-
 .../courier/barcode/BarcodeIncident.js        | 212 ++++++++++++++++++
 .../courier/barcode/BarcodeReport.js          |  13 +-
 src/navigation/index.js                       |   2 +
 src/navigation/navigators/CourierNavigator.js |   4 +
 7 files changed, 426 insertions(+), 55 deletions(-)
 create mode 100644 src/navigation/courier/barcode/BarcodeIncident.js

diff --git a/src/components/BarcodeCameraView.js b/src/components/BarcodeCameraView.js
index a6292ddf1..08fb8fb74 100644
--- a/src/components/BarcodeCameraView.js
+++ b/src/components/BarcodeCameraView.js
@@ -6,6 +6,7 @@ import _ from 'lodash';
 import { Icon } from 'native-base';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import { TouchableOpacity } from 'react-native-gesture-handler';
+import FocusHandler from './FocusHandler';
 
 function getBoxBoundaries(points) {
   const xs = points.map(point => point.x);
@@ -39,6 +40,11 @@ export default function BarcodeCameraView(props) {
   const [barcode, setBarcode] = useState(null);
   const [flash, setFlash] = useState(false);
 
+  //The hide behavior is a hack to force the camera to re-render
+  //if another camera is opened on modal. If we don't do this, the
+  //camera will not render.
+  const [hide, setHide] = useState(false);
+
   if (!hasPermission) {
     return (
       <View>
@@ -73,41 +79,53 @@ export default function BarcodeCameraView(props) {
   }, 200);
 
   return (
-    <CameraView
-      enableTorch={flash}
-      style={{
-        height: CameraHeight,
-        width: CameraWidth,
-        position: 'relative',
-      }}
-      onBarcodeScanned={onScanned}
-      barcodeScannerSettings={{
-        barcodeTypes: ['code128'],
-      }}>
-      <View
-        style={{
-          position: 'absolute',
-          borderColor: 'rgba(255, 0, 0, 0.6)',
-          borderBottomWidth: 1,
-          top: CameraHeight / 2,
-          left: PaddingHorizontal,
-          right: PaddingHorizontal,
+    <>
+      <FocusHandler
+        onFocus={() => {
+          setHide(false);
+        }}
+        onBlur={() => {
+          setHide(true);
         }}
       />
-      <View
-        style={{
-          position: 'absolute',
-          top: 10,
-          right: 10,
-        }}>
-        <TouchableOpacity onPress={() => setFlash(!flash)}>
-          <Icon
-            as={Ionicons}
-            name={flash ? 'flash-sharp' : 'flash-off-sharp'}
-            style={{ color: 'rgba(255, 255, 255, 0.6)' }}
+      {!hide && (
+        <CameraView
+          enableTorch={flash}
+          style={{
+            height: CameraHeight,
+            width: CameraWidth,
+            position: 'relative',
+          }}
+          onBarcodeScanned={onScanned}
+          barcodeScannerSettings={{
+            barcodeTypes: ['code128'],
+          }}>
+          <View
+            style={{
+              position: 'absolute',
+              borderColor: 'rgba(255, 0, 0, 0.6)',
+              borderBottomWidth: 1,
+              top: CameraHeight / 2,
+              left: PaddingHorizontal,
+              right: PaddingHorizontal,
+            }}
           />
-        </TouchableOpacity>
-      </View>
-    </CameraView>
+          <View
+            style={{
+              position: 'absolute',
+              top: 10,
+              right: 10,
+            }}>
+            <TouchableOpacity onPress={() => setFlash(!flash)}>
+              <Icon
+                as={Ionicons}
+                name={flash ? 'flash-sharp' : 'flash-off-sharp'}
+                style={{ color: 'rgba(255, 255, 255, 0.6)' }}
+              />
+            </TouchableOpacity>
+          </View>
+        </CameraView>
+      )}
+    </>
   );
 }
diff --git a/src/navigation/courier/SelectRange.js b/src/navigation/courier/SelectRange.js
index e3b4afaed..1a3e7b8f1 100644
--- a/src/navigation/courier/SelectRange.js
+++ b/src/navigation/courier/SelectRange.js
@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
-import { FormControl, Input, KeyboardAvoidingView, Button } from 'native-base';
+import { FormControl, Input, Button, ScrollView, View } from 'native-base';
 import { withTranslation } from 'react-i18next';
 import moment from 'moment';
 import DateTimePicker from 'react-native-modal-datetime-picker';
 
+import KeyboardAdjustView from '../../components/KeyboardAdjustView';
+
 function SelectRange({ t, route, navigation }) {
   const { after, before, navigateTo } = route.params;
   const [afterDate, setAfterDate] = useState(moment(after));
@@ -12,23 +14,36 @@ function SelectRange({ t, route, navigation }) {
   const [showAfterDatePicker, setShowAfterDatePicker] = useState(false);
   const [showBeforeDatePicker, setShowBeforeDatePicker] = useState(false);
 
+  const isAfterInvalid = afterDate?.isBefore(moment());
+  const isBeforeInvalid = beforeDate?.isBefore(afterDate);
+
   return (
-    <KeyboardAvoidingView p="4">
-      <FormControl>
+    <KeyboardAdjustView style={{flex: 1}} androidBehavior=''>
+      <ScrollView p="4" >
+      <FormControl isInvalid={isAfterInvalid}>
         <FormControl.Label>{t('TASK_FORM_DONE_AFTER_LABEL')}</FormControl.Label>
         <Input
-          onPressIn={() => setShowAfterDatePicker(true)}
+          onTouchStart={() => setShowAfterDatePicker(true)}
           value={afterDate.format('ll LT')}
         />
+      </FormControl>
+      <FormControl isInvalid={isBeforeInvalid}>
         <FormControl.Label>
           {t('TASK_FORM_DONE_BEFORE_LABEL')}
         </FormControl.Label>
         <Input
-          onPressIn={() => setShowBeforeDatePicker(true)}
+          onTouchStart={() => setShowBeforeDatePicker(true)}
           value={beforeDate.format('ll LT')}
         />
-        <Button
+      </FormControl>
+      </ScrollView>
+      <View p="4">
+        <Button mt="4"
           onPress={() => {
+            if (isAfterInvalid || isBeforeInvalid) {
+              return;
+            }
+
             navigation.navigate({
               name: navigateTo,
               params: {
@@ -39,12 +54,13 @@ function SelectRange({ t, route, navigation }) {
           }}>
           Reschedule
         </Button>
-      </FormControl>
+      </View>
 
       <DateTimePicker
         mode="datetime"
         isVisible={showAfterDatePicker}
         minimumDate={new Date()}
+        minuteInterval={15}
         onConfirm={date => setAfterDate(moment(date))}
         onCancel={() => setShowAfterDatePicker(false)}
       />
@@ -52,10 +68,11 @@ function SelectRange({ t, route, navigation }) {
         mode="datetime"
         isVisible={showBeforeDatePicker}
         minimumDate={afterDate.toDate()}
+        minuteInterval={15}
         onConfirm={date => setBeforeDate(moment(date))}
         onCancel={() => setShowBeforeDatePicker(false)}
       />
-    </KeyboardAvoidingView>
+    </KeyboardAdjustView>
   );
 }
 
diff --git a/src/navigation/courier/barcode/Barcode.js b/src/navigation/courier/barcode/Barcode.js
index 10252c95b..bfab6109b 100644
--- a/src/navigation/courier/barcode/Barcode.js
+++ b/src/navigation/courier/barcode/Barcode.js
@@ -1,13 +1,23 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
-import { ScrollView, StyleSheet, Text, View, Vibration } from 'react-native';
-import { Button, IconButton } from 'native-base';
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  Vibration,
+  Alert,
+} from 'react-native';
+import { Button, IconButton, TextArea } from 'native-base';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import BarcodeCameraView from '../../../components/BarcodeCameraView';
 
 import { CommonActions } from '@react-navigation/native';
 import NavigationHolder from '../../../NavigationHolder';
+import { assignTask } from '../../../redux/Dispatch/actions';
+import { unassignTask } from '../../../redux/Dispatch/actions';
+import Modal from "react-native-modal"
 
 async function _fetchBarcode(httpClient, barcode) {
   if (barcode) {
@@ -28,17 +38,108 @@ function TextSection({ title, value, variant = 'data' }) {
   );
 }
 
-function BarcodePage({ httpClient }) {
+function BarcodePage({ httpClient, user, assignTask, unassignTask }) {
   const [barcode, setBarcode] = useState(null);
   const [entity, setEntity] = useState(null);
+  const [clientAction, setClientAction] = useState(null);
+  const [showNoteModal, setShowNoteModal] = useState(false);
 
-  return (
+  const askUnassign = () => {
+    Alert.alert(
+      'Task already assigned',
+      'This task is already assigned to you',
+      [
+        {
+          text: 'Unassign',
+          onPress: () => {
+            unassignTask(entity.id, user.username);
+            setClientAction(null);
+          },
+        },
+        {
+          text: 'Ok',
+          onPress: () => {
+            setClientAction(null);
+          },
+        },
+      ],
+    );
+  };
+
+  const askAssign = () => {
+    Alert.alert(
+      'Task already assigned',
+      'This task is already assigned to another courier',
+      [
+        {
+          text: 'Assign to me',
+          onPress: () => {
+            assignTask(entity.id, user.username);
+            setClientAction(null);
+          },
+        },
+        {
+          text: 'Ok',
+          onPress: () => {
+            setClientAction(null);
+          },
+        },
+      ],
+    );
+  };
+
+  useEffect(() => {
+    return;
+    if (!clientAction) return;
+    switch (clientAction) {
+      case 'ask_unassign':
+        askUnassign();
+        break;
+      case 'ask_assign':
+        askAssign();
+        break;
+      default:
+        setClientAction(null);
+    }
+  }, [clientAction]);
+
+  useEffect(() => {
+    if (!entity) return;
+    if (!entity?.barcodes?.packages) return;
+    const packages = entity?.barcodes?.packages.reduce(
+      (acc, p) => acc + p.barcodes.length,
+      0,
+    );
+    if (packages > 1) {
+      const details = entity?.barcodes?.packages
+        .map(p => `${p.barcodes.length}x ${p.name}`)
+        .join('\n');
+      Alert.alert(
+        'Multiple packages',
+        `${packages} packages:\n\n${details}\n\nNo need to scan the other packages`,
+        [{ text: 'Ok' }],
+      );
+    }
+  }, [entity]);
+
+  return <>
+      <Modal isVisible={showNoteModal} onDismiss={() => setShowNoteModal(false)}>
+      <View style={{ flex: 1, backgroundColor: 'white', padding: 20, borderRadius: 5 }}>
+          <TextArea />
+          <Button onPress={() => setShowNoteModal(false)}>Save</Button>
+          </View>
+      </Modal>
     <View style={{ flex: 1 }}>
       <BarcodeCameraView
         onScanned={async code => {
-          const { entity } = await _fetchBarcode(httpClient, code);
+          if (clientAction) return;
+          const { entity, client_action } = await _fetchBarcode(
+            httpClient,
+            code,
+          );
           setBarcode(code);
           setEntity(entity);
+          setClientAction(client_action);
         }}
       />
       <ScrollView style={{ paddingHorizontal: 20, marginVertical: 20 }}>
@@ -48,7 +149,7 @@ function BarcodePage({ httpClient }) {
         <TextSection title="Phone" value={entity?.address?.telephone} />
         <TextSection title="Code" value={barcode} />
         <TextSection title="Comment" value={entity?.comments} variant="note" />
-        <Button variant="link">Add note</Button>
+        <Button onPress={() => setShowNoteModal(true)}>Add note</Button>
       </ScrollView>
       <View
         style={{
@@ -64,9 +165,11 @@ function BarcodePage({ httpClient }) {
           Finished
         </Button>
         <IconButton
-          onPress={() => NavigationHolder.dispatch(
-            CommonActions.navigate("CourierBarcodeReport", { entity } ),
-          )}
+          onPress={() =>
+            NavigationHolder.dispatch(
+              CommonActions.navigate('CourierBarcodeReport', { entity }),
+            )
+          }
           disabled={entity === null}
           _icon={{
             as: Ionicons,
@@ -76,7 +179,7 @@ function BarcodePage({ httpClient }) {
         />
       </View>
     </View>
-  );
+  </>;
 }
 
 const styles = StyleSheet.create({
@@ -96,11 +199,17 @@ const styles = StyleSheet.create({
 function mapStateToProps(state) {
   return {
     httpClient: state.app.httpClient,
+    user: state.app.user,
   };
 }
 
 function mapDispatchToProps(dispatch) {
-  return {};
+  return {
+    assignTask: (task_id, username) =>
+      dispatch(assignTask({ '@id': task_id }, username)),
+    unassignTask: (task_id, username) =>
+      dispatch(unassignTask({ '@id': task_id }, username)),
+  };
 }
 
 export default connect(
diff --git a/src/navigation/courier/barcode/BarcodeIncident.js b/src/navigation/courier/barcode/BarcodeIncident.js
new file mode 100644
index 000000000..d6befd3f2
--- /dev/null
+++ b/src/navigation/courier/barcode/BarcodeIncident.js
@@ -0,0 +1,212 @@
+import React, { useMemo, useState, useRef, useEffect } from 'react';
+import { Dimensions } from 'react-native';
+import { withTranslation } from 'react-i18next';
+import {
+  Button,
+  VStack,
+  Text,
+  Skeleton,
+  ScrollView,
+  HStack,
+  IconButton,
+  Icon,
+  TextArea,
+  View,
+  Image,
+  FormControl,
+  Stack,
+  Flex,
+} from 'native-base';
+import { connect } from 'react-redux';
+import { useQuery } from 'react-query';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { CameraView } from 'expo-camera/next';
+import { addPicture, reportIncident } from '../../../redux/Courier/taskActions';
+
+function BarcodeIncident({
+  route,
+  t,
+  navigation,
+  httpClient,
+  addPicture,
+  reportIncident,
+}) {
+  const { entity } = route.params;
+
+  const [selectedFailureReason, setFailureReason] = useState(null);
+  const [notes, setNotes] = useState(null);
+  const [enableCamera, setEnableCamera] = useState(false);
+  const camera = useRef(null);
+  const [pictures, setPictures] = useState([]);
+
+  const { width } = Dimensions.get('window');
+
+  useEffect(() => {
+    navigation.setOptions({ headerShown: !enableCamera });
+  }, [enableCamera]);
+
+  const { data, isSuccess, isError } = useQuery(
+    ['task', 'failure_reasons', entity.id],
+    async () => {
+      return await httpClient.get(`/api/tasks/${entity.id}/failure_reasons`);
+    },
+  );
+
+  const values = useMemo(() => {
+    if (!isSuccess || !data) {
+      return null;
+    }
+    return data['hydra:member'].map((value, index) => (
+      <Button
+        key={index}
+        colorScheme="dark"
+        size="lg"
+        onPress={() => setFailureReason(value.code)}>
+        {value.description}
+      </Button>
+    ));
+  }, [data, isSuccess]);
+
+  if (isError) {
+    return (
+      <Text p="4" color="red.500">
+        Failure reasons are not available
+      </Text>
+    );
+  }
+
+  // CAMERA VIEW MODE
+  if (enableCamera) {
+    const _takePicture = async () => {
+      const options = { quality: 0.35, base64: true };
+      const pictureOpts = await camera.current.takePictureAsync(options);
+      setPictures([...pictures, pictureOpts.uri]);
+      setEnableCamera(false);
+    };
+    return (
+      <View style={{ flex: 1, justifyContent: 'center' }}>
+        <CameraView ref={camera} style={{ flex: 1 }}>
+          <IconButton
+            my="2"
+            style={{ position: 'absolute', bottom: 0, width }}
+            icon={
+              <Icon
+                as={Ionicons}
+                color={'red.500'}
+                size="16"
+                name="disc-sharp"
+              />
+            }
+            onPress={_takePicture}
+          />
+        </CameraView>
+      </View>
+    );
+  }
+  // END
+
+  // DETAILS MODE
+  if (selectedFailureReason) {
+    return (
+      <ScrollView p="4">
+        <Stack space={2}>
+          <FormControl>
+            <FormControl.Label>{t('FAILURE_REASON')}</FormControl.Label>
+            <Button
+              variant="outline"
+              colorScheme="dark"
+              onPress={() => {
+                setFailureReason(null);
+                setNotes(null);
+              }}>
+              {
+                data['hydra:member'].find(r => r.code === selectedFailureReason)
+                  .description
+              }
+            </Button>
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>{t('NOTES')}</FormControl.Label>
+            <TextArea value={notes} onChangeText={setNotes} />
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>{t('PICTURES')}</FormControl.Label>
+            <Button
+              onPress={() => setEnableCamera(true)}
+              colorScheme="dark"
+              leftIcon={<Icon as={Ionicons} name="camera" />}>
+              {t('PHOTO_DISCLAIMER')}
+            </Button>
+            <Flex direction="row" flexWrap="wrap" justifyContent="space-around">
+              {pictures.map((picture, index) => (
+                <View
+                  key={index}
+                  style={{ width: width * 0.4, height: width * 0.4 }}
+                  py="2">
+                  <Image
+                    style={{ flex: 1, borderRadius: 5 }}
+                    source={{ uri: picture }}
+                    alt="picture"
+                  />
+                  <IconButton
+                    style={{ position: 'absolute', top: 5, right: 5 }}
+                    icon={<Icon as={Ionicons} name="close" />}
+                    onPress={() =>
+                      setPictures(pictures.filter((_p, i) => i !== index))
+                    }
+                  />
+                </View>
+              ))}
+            </Flex>
+          </FormControl>
+          <Button
+            onPress={() => {
+              pictures.forEach(picture => addPicture(picture));
+              reportIncident(entity.id, notes, selectedFailureReason, () =>
+                navigation.popToTop(),
+              );
+            }}>
+            <Text>{t('SUBMIT')}</Text>
+          </Button>
+        </Stack>
+      </ScrollView>
+    );
+  }
+  // END
+
+  // PICKER MODE
+  return (
+    <ScrollView p="4">
+      <Skeleton isLoaded={isSuccess}>
+        <VStack space={2}>{values}</VStack>
+      </Skeleton>
+    </ScrollView>
+  );
+  // END
+}
+
+function mapStateToProps(state) {
+  return {
+    httpClient: state.app.httpClient,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    addPicture: base64 => dispatch(addPicture(null, base64)),
+    reportIncident: (task_id, notes, failureReasonCode, onSuccess) =>
+      dispatch(
+        reportIncident(
+          { '@id': `/api/tasks/${task_id}` },
+          notes ?? '',
+          failureReasonCode,
+          onSuccess,
+        ),
+      ),
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(withTranslation()(BarcodeIncident));
diff --git a/src/navigation/courier/barcode/BarcodeReport.js b/src/navigation/courier/barcode/BarcodeReport.js
index 71877d4e5..f89e1c9e7 100644
--- a/src/navigation/courier/barcode/BarcodeReport.js
+++ b/src/navigation/courier/barcode/BarcodeReport.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { withTranslation } from 'react-i18next';
 import { Button, VStack, Text } from 'native-base';
+import { Alert } from 'react-native';
 
 function BarcodeReport({ route, t, navigation }) {
   const { entity } = route.params;
@@ -12,10 +13,18 @@ function BarcodeReport({ route, t, navigation }) {
       <Button
         colorScheme="dark"
         size="lg"
-        onPress={() => navigation.navigate('CourierUpdateParcel', { entity })}>
+        onPress={
+          // () => navigation.navigate('CourierUpdateParcel', { entity })
+          () => Alert.alert(null, 'Not yet supported, coming soon!')
+        }>
         {t('UPDATE_PARCEL_DETAILS')}
       </Button>
-      <Button colorScheme="yellow" size="lg">
+      <Button
+        colorScheme="yellow"
+        size="lg"
+        onPress={() =>
+          navigation.navigate('CourierReportIncident', { entity })
+        }>
         {t('REPORT_AN_INCIDENT')}
       </Button>
     </VStack>
diff --git a/src/navigation/index.js b/src/navigation/index.js
index 805970b9b..5dc1c635d 100644
--- a/src/navigation/index.js
+++ b/src/navigation/index.js
@@ -43,6 +43,7 @@ import CourierTaskListPage from './courier/TaskListPage';
 import CourierTasksPage from './courier/TasksPage';
 import CourierBarcodePage from './courier/barcode/Barcode';
 import CourierBarcodeReportPage from './courier/barcode/BarcodeReport';
+import CourierBarcodeIncidentPage from './courier/barcode/BarcodeIncident';
 import CourierUpdateParcelPage from './courier/UpdateParcel';
 import CourierSelectRangePage from './courier/SelectRange.js'
 
@@ -104,6 +105,7 @@ export default {
   CourierTasksPage,
   CourierBarcodePage,
   CourierBarcodeReportPage,
+  CourierBarcodeIncidentPage,
   CourierUpdateParcelPage,
   CourierSelectRangePage,
   CourierTaskListPage,
diff --git a/src/navigation/navigators/CourierNavigator.js b/src/navigation/navigators/CourierNavigator.js
index c46b4e616..4e9181847 100644
--- a/src/navigation/navigators/CourierNavigator.js
+++ b/src/navigation/navigators/CourierNavigator.js
@@ -132,6 +132,10 @@ const BarcodeNavigator = () => (
         component={screens.CourierBarcodeReportPage}
         options={{title:false}}
       />
+      <BarcodeStack.Screen
+        name="CourierReportIncident"
+        component={screens.CourierBarcodeIncidentPage}
+      />
       <BarcodeStack.Screen
         name="CourierUpdateParcel"
         component={screens.CourierUpdateParcelPage}