@os1-platform/dispatch-mobile 2.1.2 → 2.1.3

package/src/components/executiontasks/imageCapture/ImageCapture.tsx

@@ -0,0 +1,457 @@
+import React, { useCallback, useEffect, useState, useLayoutEffect } from 'react';
+import { BackHandler, FlatList, Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import * as CaptureUtils from './CaptureUtils';
+import { getCaptureOutput } from './CaptureUtils';
+import { showToast } from '../../widgets/Toaster';
+import SdkColors, { ColorTheme } from '../../../styles/SdkColors';
+import Icon from 'react-native-vector-icons/Feather';
+import Iconn from 'react-native-vector-icons/MaterialIcons';
+import { CommonStyles, Fonts } from '../../../styles/executionTasks/CommonStyles';
+import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
+import { EntityCode, ExecutionTaskID } from '../../../models/execTasks/ETConfig';
+import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
+import { GO_BACK_EVENT_CODE } from '../../../constants/constants';
+import { Button, Provider } from 'react-native-paper';
+import Logger, { LOG_TYPE } from '../../../utils/Logger';
+import { hasGoBackConnector } from '../../../components/utils';
+import GoBackModal from '../../../components/widgets/GoBackModal';
+import { useFocusEffect } from '@react-navigation/native';
+import Circle from "./circle-xmark.svg"
+
+import CameraIcon from "./camera.svg"
+
+const ImageCapture = (props: any) => {
+  let numberOfImagesToCapture: any;
+  if (props.captureMode == "SINGLE") {
+    numberOfImagesToCapture = 1;
+  } else if (props.captureMode === 'MULTI' && props.captureCountLimit && props.captureCountLimit > 0) {
+    numberOfImagesToCapture = props.captureCountLimit;
+  }
+
+  const [images, setImages] = useState([]);
+  const [imagesDummy, setImagesDummy] = useState<any[]>([]);
+  const [showCapture, setShowCapture] = useState(true);
+  const [disableProceed, setDisableProceed] = useState(false);
+  const [showBackModal, setShowBackModal] = useState(false);
+  const [buttonProceed, setButtonProceed] = useState(false);
+  const [numColumns, setNumColumns] = useState(numberOfImagesToCapture <= 2 ? 1 : 2);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      const onBackPress = () => {
+        if (
+          props.taskMeta?.enableGoBack &&
+          hasGoBackConnector(props.applicableReasons)
+        ) {
+          setShowBackModal(true);
+          return true;
+        } else {
+          props.navigation.goBack();
+          return true;
+        }
+      };
+      BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () =>
+        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+    }, [])
+  );
+
+  useLayoutEffect(() => {
+    props.navigation.setOptions({
+      title: props.title,
+      headerLeft: () => {
+        return (
+          <Iconn
+            onPress={() => {
+              if (
+                props.taskMeta?.enableGoBack &&
+                hasGoBackConnector(props.applicableReasons)
+              )
+                setShowBackModal(true);
+              else props.navigation.goBack();
+            }}
+            name="arrow-back"
+            color={'black'}
+            size={25}
+            style={{
+              paddingRight: 15,
+              paddingTop: 5,
+            }}
+          />
+        );
+      },
+    });
+  }, [props.navigation, props.title]);
+
+  useEffect(() => {
+
+    if (images.length === 0) {
+      let arr: any = [];
+      for (let i = 0; i < numberOfImagesToCapture; i++) {
+        arr.push({ path: '' });
+      }
+      setImages(arr);
+    }
+  }, [images]);
+
+
+  interface ImageItemProps {
+    item: { path: string };
+    index: number;
+    onPress: () => void;
+  }
+
+  const ImageItem: React.FC<ImageItemProps> = ({ item, index, onPress }) => {
+
+    return (
+      <View
+        style={{
+          width: numColumns == 2 ? '43%' : '88%',
+          height: numColumns == 2 ? 160 : numberOfImagesToCapture == 1 ? 336 : 180,
+          backgroundColor: 'white',
+          alignItems: 'center',
+          alignSelf: 'center',
+          borderWidth: 1,
+          borderColor: '#A3AAC2',
+          borderStyle: 'dashed',
+          borderRadius: 3,
+          marginTop: '6%',
+          marginStart: numColumns == 2 ? 17 : numberOfImagesToCapture == 1 ? 0 : 0,
+        }}
+      >
+        <View
+          style={{
+            alignItems: 'center',
+            width: '80%',
+            height: '98%',
+            borderRadius: 3,
+          }}
+        >
+          {imagesDummy?.length > index && imagesDummy[index]?.path ? null : (
+  <TouchableOpacity
+  onPress={onPress}>
+<View
+style={{
+  marginTop:
+  numColumns === 2 ? '32%' : numberOfImagesToCapture === 1 ? '50%' : '20%',
+}}
+>
+<CameraIcon />
+</View>
+</TouchableOpacity>
+           
+          )}
+          <Button
+            onPress={() => captureImage(index)}
+            uppercase={false}
+            labelStyle={[
+              {
+                fontFamily: Fonts.IBMPlexSans_500Medium,
+                fontStyle: 'normal',
+                fontWeight: 'normal',
+                fontSize: 14,
+                letterSpacing: 0.25,
+                color: '#5B80F7',
+              },
+            ]}
+          >
+            {imagesDummy?.length > index && imagesDummy[index]?.path ? null : 'Click Photo'}
+          </Button>
+          <Image
+            source={{
+              uri: imagesDummy?.length > index ? imagesDummy[index]?.path : item?.path,
+            }}
+            style={{
+              height: numColumns == 2 ? '75%' : numberOfImagesToCapture == 1 ? '85%' : '85%',
+              width: numColumns == 2 ? '105%' : '118%',
+              borderRadius: 10,
+              bottom:
+                numColumns == 2 ? '6%' : numberOfImagesToCapture == 1 ? '2%' : '11%',
+            }}
+          />
+          <TouchableOpacity
+            onPress={onPress}
+            style={{
+              position: 'absolute',
+              top: numColumns == 2 ? '17%' : '9%',
+              marginRight: '2%',
+            }}
+          >
+            {imagesDummy?.length > index && imagesDummy[index]?.path && (
+              <View
+                style={{
+                  width: 25,
+                  height: 25,
+                  backgroundColor: 'white',
+                  borderRadius: 15,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  marginLeft: numColumns == 2 ? '78%' : '96%',
+                }}
+              >
+                <Circle />
+              </View>
+            )}
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  };
+
+  const renderModal = () => {
+    return (
+      <GoBackModal
+        showModal={showBackModal}
+        setShowModal={setShowBackModal}
+        onSuccess={async () => {
+          props.onSubmitET({
+            ...(await getBaseETResponse(
+              EntityCode.IMAGE_CAPTURE,
+              false,
+              GO_BACK_EVENT_CODE,
+              '',
+              props.mergedObjectiveId,
+              ExecutionTaskID.IMAGE_CAPTURE
+            )),
+          });
+          setShowBackModal(false);
+        }}
+        onFailure={() => setShowBackModal(false)}
+      />
+    );
+  };
+
+  const handleSubmit = async () => {
+    try {
+      setDisableProceed(true);
+      let imagesArray = imagesDummy.filter(item => item != null && item.path != null && item.path.length != 0);
+      console.log('imagesArray:', JSON.stringify(imagesArray));
+
+      if (imagesArray.length > 0) {
+        props.onSubmitET(await getCaptureOutput(imagesArray, props));
+      } else {
+        showToast('No Images captured');
+      }
+    } catch (error: any) {
+      setDisableProceed(false);
+      showToast(error.message);
+    } finally {
+      setDisableProceed(false);
+    }
+  };
+
+  // useEffect(() => {
+  //   if (props.captureMode === 'SINGLE') {
+  //     if (images.length > 0) {
+  //       setShowCapture(false);
+  //     } else setShowCapture(true);
+  //   } else if (
+  //     props.captureMode === 'MULTI' &&
+  //     props.captureCountLimit &&
+  //     props.captureCountLimit > 0
+  //   ) {
+  //     if (images.length === CaptureUtils.getMaxImagesCount(props)) {
+  //       setShowCapture(false);
+  //     } else setShowCapture(true);
+  //   } else {
+  //     if (images.length > 0) {
+  //       setShowCapture(true);
+  //     }
+  //   }
+  // }, [images, props, showCapture]);
+
+  const captureImage = useCallback(async (index) => {
+    //   // if (!showCapture) {
+    //   //   showToast(`Max Image Limit reached`);
+    //   //   return;
+    //   // }
+    // console.log("captureImage", CaptureUtils);
+    let imageDataResponse = await CaptureUtils.captureImage(
+      props.resolution.breadth,
+      props.resolution.length,
+      props.fileSizeLimit
+    );
+
+    if (imageDataResponse != null) {
+      setButtonProceed(true);
+
+      let imgArray = [];
+      imgArray = imagesDummy;
+      imgArray[index] = {
+        id: CaptureUtils.getImagesFileName(),
+        // @ts-ignore
+        path: imageDataResponse.uri,
+        url: '',
+        timestamp: Date.now(),
+      };
+      setImagesDummy([...imgArray])
+      console.log("images211:", JSON.stringify(imgArray));
+
+    }
+  }, [props.resolution.breadth, props.resolution.length, props.fileSizeLimit]);
+
+
+  const deleteImage = async (index: any) => {
+    let imageDummyArray = [];
+    imageDummyArray = imagesDummy
+    imageDummyArray[index].path = ""
+    setImagesDummy([...imageDummyArray])
+
+    let initialProceedValue = false;
+    for (let i = 0; i < imageDummyArray.length; i++) {
+      if (imageDummyArray[i]?.path) {
+        initialProceedValue = true
+      }
+    }
+    setButtonProceed(initialProceedValue);
+
+    try {
+      // setImagesDummy(filteredImages);
+      // setButtonProceed(false);
+    } catch (err: any) {
+      Logger.getInstance().logEvent('deleteImageError', err.message, LOG_TYPE.SDK_ERROR);
+      console.error("Error updating state after deletion:", err);
+    }
+  };
+
+  const renderItem = ({ item, index }: { item: any; index: any }) => {
+    return (
+      <ImageItem
+        item={item}
+        index={index}
+        onPress={async () => {
+          await deleteImage(index);
+        }}
+      />
+    );
+  };
+
+  return (
+    <Provider>
+      {renderModal()}
+      <View style={CommonStyles.mainContainer}>
+        {props.message && (
+          <View style={styles.etMessageView}>
+            <Text style={styles.etMessage}>
+              Take a photo of the shipments. Please ensure the items are clearly visible.
+            </Text>
+          </View>
+        )}
+        <View
+          style={{
+            backgroundColor: 'white',
+            width: 360,
+            height: numColumns == 2 ? '82%' : numberOfImagesToCapture == 1 ? '63%' : '70%',
+            alignSelf: 'center',
+            marginTop: '5%',
+            borderRadius: 7,
+            borderColor: '#E0E3EB',
+            borderWidth: 0.5,
+          }}
+        >
+          <FlatList
+            data={images}
+            numColumns={numColumns}
+            renderItem={renderItem}
+            keyExtractor={(item) => item?.id}
+            contentContainerStyle={{ paddingBottom: '30%' }}
+          />
+        </View>
+        <View style={styles.bottomButtons}>
+          {(props.isSelfLoop == false) && <Button
+            style={[CommonStyles.cancelButton, { flexGrow: 1, marginStart: '3%' }]}
+            mode="outlined"
+            labelStyle={[CommonStyles.cancelButtonLabel, { textTransform: 'capitalize' }]}
+            onPress={async () => {
+              props.onSubmitET({
+                ...(await getBaseETResponse(
+                  EntityCode.IMAGE_CAPTURE,
+                  false,
+                  getEventCodeByET(ExecutionTaskID.IMAGE_CAPTURE, false, props.applicableReasons?.failure),
+                  '',
+                  props.mergedObjectiveId,
+                  ExecutionTaskID.IMAGE_CAPTURE
+                )),
+              });
+            }}
+          >
+            Cancel
+          </Button>
+          }
+          <Button
+            labelStyle={{
+              color: buttonProceed ? '#ffff' : '#A3AAC2',
+              fontFamily: Fonts.IBMPlexSans_500Medium,
+              fontSize: 14,
+              lineHeight: 20,
+              textAlign: 'center',
+              textTransform: 'capitalize',
+            }}
+            style={{
+              flexGrow: 1,
+              marginHorizontal: '3%',
+              backgroundColor: buttonProceed ? '#5B80F7' : '#E0E3EB',
+            }}
+            disabled={!buttonProceed}
+            mode="contained"
+            onPress={async () => {
+              await handleSubmit();
+            }}
+          >
+            Proceed
+          </Button>
+        </View>
+      </View>
+    </Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+
+  imageEtContainer: {
+    display: 'flex',
+    marginStart: 16,
+    marginEnd: 16,
+    borderWidth: 1,
+    borderColor: '#A3AAC2',
+    padding: 10,
+    marginTop: 15,
+    borderStyle: 'dashed',
+    backgroundColor: '#FFFFFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 370,
+    borderRadius: 5
+  },
+
+  bottomButtons: {
+    width: "100%",
+    justifyContent: "space-between",
+    flexDirection: 'row',
+    backgroundColor: "white",
+    paddingVertical: 12,
+    bottom: 0,
+    position: "absolute",
+    borderTopColor: "#A3AAC2",
+    borderTopWidth: 0.5
+  },
+  etMessage: {
+    // textAlign: 'center',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    fontSize: 16,
+    display: 'flex',
+    alignItems: 'center',
+    color: '#000000',
+    fontFamily: Fonts.IBMPlexSans_400Regular
+  },
+  etMessageView: {
+    marginTop: 17,
+    paddingStart: 17,
+    paddingTop: 15,
+    paddingBottom: 15,
+    backgroundColor: '#ffffff'
+  }
+});
+
+export default ImageCapture;

package/src/components/executiontasks/imageCapture/camera.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 3.75H15.1875L14.8571 2.8707C14.4922 1.89648 13.5586 1.25 12.5156 1.25H8.48438C7.44141 1.25 6.51172 1.89492 6.14453 2.86914L5.8125 3.75H3C1.61914 3.75 0.5 4.87109 0.5 6.25V16.25C0.5 17.6309 1.61914 18.75 3 18.75H18C19.3809 18.75 20.5 17.6309 20.5 16.25V6.25C20.5 4.87109 19.3789 3.75 18 3.75ZM19.25 16.25C19.25 16.9375 18.6875 17.5 18 17.5H3C2.3125 17.5 1.75 16.9375 1.75 16.25V6.25C1.75 5.5625 2.3125 5 3 5H6.68164L7.31094 3.31328C7.49219 2.82422 7.92578 2.5 8.48047 2.5H12.5156C13.0375 2.5 13.5043 2.82426 13.6867 3.31328L14.3203 5H18C18.6875 5 19.25 5.5625 19.25 6.25V16.25ZM10.5 6.5625C7.91406 6.5625 5.8125 8.66406 5.8125 11.25C5.8125 13.8359 7.91211 15.9375 10.5 15.9375C13.0879 15.9375 15.1875 13.8379 15.1875 11.25C15.1875 8.66211 13.0898 6.5625 10.5 6.5625ZM10.5 14.6875C8.60547 14.6875 7.0625 13.1445 7.0625 11.25C7.0625 9.35547 8.60547 7.8125 10.5 7.8125C12.3945 7.8125 13.9375 9.35547 13.9375 11.25C13.9375 13.1445 12.3945 14.6875 10.5 14.6875Z" fill="#525B7A"/>
+</svg>

package/src/components/executiontasks/imageCapture/circle-xmark.svg

@@ -0,0 +1,5 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="FA-Icon/Light/circle-xmark">
+<path id="Vector" d="M11.0512 6.34874C10.8559 6.15381 10.5393 6.15381 10.3443 6.34874L8.69804 7.99239L7.05117 6.34874C6.85586 6.15381 6.53929 6.15381 6.34429 6.34874C6.14929 6.54367 6.14898 6.85961 6.34429 7.05423L7.99179 8.69727L6.34492 10.3409C6.14961 10.5359 6.14961 10.8518 6.34492 11.0464C6.54011 11.2412 6.85648 11.2415 7.05179 11.0464L8.69804 9.40214L10.3446 11.0455C10.5398 11.2403 10.8562 11.2405 11.0515 11.0455C11.2468 10.8506 11.2468 10.5346 11.0515 10.34L9.40429 8.69727L11.0509 7.05392C11.248 6.86024 11.248 6.54211 11.0512 6.34874ZM8.69804 0.712891C4.27929 0.712891 0.698044 4.28715 0.698044 8.69727C0.698044 13.1074 4.27929 16.6816 8.69804 16.6816C13.1168 16.6816 16.698 13.1074 16.698 8.69727C16.698 4.28715 13.1168 0.712891 8.69804 0.712891ZM8.69804 15.6836C4.83867 15.6836 1.69804 12.5491 1.69804 8.69727C1.69804 4.84543 4.83867 1.71094 8.69804 1.71094C12.5574 1.71094 15.698 4.84543 15.698 8.69727C15.698 12.5491 12.5574 15.6836 8.69804 15.6836Z" fill="#DC2626"/>
+</g>
+</svg>

package/src/components/executiontasks/payments/PaymentStyles.ts

@@ -0,0 +1,93 @@
+import { Platform, StyleSheet } from 'react-native';
+import { Fonts } from '../../../styles/executionTasks/CommonStyles';
+
+export const PaymentStyles = StyleSheet.create({
+  amountStyle: {
+    fontSize: 18,
+    fontWeight: '600',
+    fontStyle: 'normal',
+    backgroundColor: 'white',
+    textAlign: 'center',
+    alignItems: 'center',
+    paddingTop: 25,
+    paddingBottom: 25,
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_600SemiBold
+        : 'IBMPlexSans-SemiBold',
+  },
+  messageStyle: {
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    backgroundColor: '#FFFFFF',
+    color: '#111111',
+    padding: 20,
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 14,
+  },
+  textStyle1: {
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    marginTop: 20,
+    marginStart: 20,
+    marginEnd: 20,
+    color: '#9D9D9D',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 14,
+  },
+  reasonTextStyle: {
+    flex: 1,
+    flexWrap: 'wrap',
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    fontStyle: 'normal',
+    fontSize: 14,
+    lineHeight: 21,
+    letterSpacing: 0.25,
+    textAlign: 'justify',
+    color: '#111111',
+  },
+
+  reasonItemStyle: {
+    flexDirection: 'row',
+    paddingTop: 10,
+    paddingStart: 20,
+    paddingEnd: 20,
+    backgroundColor: 'white',
+  },
+  heading: {
+    marginTop: 30,
+    marginStart: 25,
+    fontSize: 14,
+    lineHeight: 21,
+    letterSpacing: 0.25,
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    color: '#9D9D9D',
+  },
+  item: {
+    margin: 10,
+    padding: 15,
+    borderWidth: 0.2,
+  },
+  btn: {
+    width: 240,
+    borderRadius: 4,
+    backgroundColor: '#62d1bc',
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    marginVertical: 8,
+  },
+
+  loader: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+});

package/src/components/executiontasks/payments/PaymentUtils.ts

@@ -0,0 +1,7 @@
+export function getUniqueTransactionID(amt: number): string {
+  return `TID${Date.now().toString() + amt.toString()}`;
+}
+export function getPaymentValue(amt: number, minorUnit?: number): number {
+  if (!minorUnit) return amt;
+  return amt / Math.pow(10, minorUnit);
+}