@os1-platform/dispatch-mobile 2.0.7 → 2.1.0

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

@@ -0,0 +1,363 @@
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  useLayoutEffect,
+} from 'react';
+import {
+  BackHandler,
+  FlatList,
+  Image,
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import type { CaptureInput, ImageData } from './CaptureSchema';
+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/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, Modal, Portal, 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';
+
+const ImageItem = ({ item, onPress }: { item: ImageData; onPress: any }) => (
+  <View style={{ marginEnd: 8 }}>
+    <Image source={{ uri: item.path }} style={styles.image} />
+    <Icon
+      onPress={onPress}
+      name="highlight-remove"
+      color={'red'}
+      size={32}
+      style={{
+        position: 'absolute',
+        right: 5,
+        top: 5,
+      }}
+    />
+  </View>
+);
+
+const ImageCapture = (props: CaptureInput) => {
+  const [images, setImages] = useState<Array<ImageData>>([]);
+  const [showCapture, setShowCapture] = useState(true);
+  const [disableProceed, setDisableProceed] = useState(false);
+  const [showBackModal, setShowBackModal] = useState(false);
+
+  // Handle back-button click
+  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 (
+          <Icon
+            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]);
+
+  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);
+      if (images.length > 0) {
+        if (
+          props.additionalMultiConfig?.minCaptureCount === 'N' &&
+          images.length < props.captureCount
+        ) {
+          showToast(
+            `Min ${props.captureCount} image(s) required to be captured.`
+          );
+          return;
+        }
+        if (
+          props.captureMode === 'MULTI' &&
+          props.captureCountLimit &&
+          props.captureCountLimit > 0 &&
+          images.length > CaptureUtils.getMaxImagesCount(props)
+        ) {
+          showToast(`Max ${props.captureCountLimit} image(s) allowed.`);
+          return;
+        }
+        props.onSubmitET(await getCaptureOutput(images, 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 () => {
+    if (!showCapture) {
+      showToast(`Max Image Limit reached`);
+      return;
+    }
+    let imageDataResponse = await CaptureUtils.captureImage(
+      props.resolution.breadth,
+      props.resolution.length,
+      props.fileSizeLimit
+    );
+    if (imageDataResponse != null) {
+      setImages((prevState) => {
+        return [
+          ...prevState,
+          {
+            id: CaptureUtils.getImagesFileName(), // @ts-ignore
+            path: imageDataResponse.uri,
+            url: '',
+            timestamp: Date.now(),
+          },
+        ];
+      });
+    }
+  }, [props, showCapture]);
+
+  const deleteImage = async (imageData: ImageData) => {
+    try {
+      let filteredImages = await CaptureUtils.deleteImage(imageData, images);
+      setImages(filteredImages);
+    } catch (err: any) {
+      Logger.getInstance().logEvent(
+        'deleteImageError',
+        err.message,
+        LOG_TYPE.SDK_ERROR
+      );
+      return;
+    }
+  };
+
+  const renderItem = ({ item }: { item: ImageData }) => {
+    return (
+      <ImageItem
+        item={item}
+        onPress={async () => {
+          await deleteImage(item);
+        }}
+      />
+    );
+  };
+  return (
+    <Provider>
+      {renderModal()}
+      <View style={CommonStyles.mainContainer}>
+        {props.message && (
+          <View style={styles.etMessageView}>
+            <Text style={styles.etMessage}>{props.message}</Text>
+          </View>
+        )}
+        <View style={styles.imageEtContainer}>
+          {images.length === 0 && (
+            <Icon name={'photo-camera'} size={24} color={'#666666'} />
+          )}
+          {images.length > 0 && (
+            <FlatList
+              horizontal
+              data={images}
+              renderItem={renderItem}
+              keyExtractor={(item) => item.id}
+            />
+          )}
+          <Button
+            onPress={() => captureImage()}
+            uppercase={false}
+            labelStyle={[
+              {
+                fontFamily:
+                  Platform.OS === 'android'
+                    ? Fonts.IBMPlexSans_400Regular
+                    : 'IBMPlexSans-Regular',
+                fontStyle: 'normal',
+                fontWeight: 'normal',
+                fontSize: 14,
+                alignItems: 'center',
+                textAlign: 'center',
+                letterSpacing: 0.25,
+                color: SdkColors[ColorTheme.LIGHT].primaryButton,
+              },
+            ]}
+          >
+            {images.length > 0 ? 'Click more' : 'Click Picture'}
+          </Button>
+        </View>
+        <View style={[CommonStyles.bottom, { marginStart: 10, marginEnd: 10 }]}>
+          <Button
+            disabled={disableProceed}
+            style={CommonStyles.nextButton}
+            mode="contained"
+            labelStyle={CommonStyles.nextButtonLabel}
+            onPress={async () => {
+              await handleSubmit();
+            }}
+          >
+            Proceed
+          </Button>
+          <Button
+            style={[CommonStyles.cancelButton, { marginTop: 10 }]}
+            mode="outlined"
+            labelStyle={CommonStyles.cancelButtonLabel}
+            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>
+        </View>
+      </View>
+    </Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+  imageEtContainer: {
+    display: 'flex',
+    marginStart: 16,
+    marginEnd: 16,
+    borderWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.1)',
+    padding: 10,
+    marginTop: 15,
+    borderStyle: 'dashed',
+    backgroundColor: '#FFFFFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 300,
+  },
+  image: {
+    height: 250,
+    width: 200,
+  },
+  etMessage: {
+    textAlign: 'center',
+    fontStyle: 'normal',
+    fontWeight: '600',
+    fontSize: 18,
+    display: 'flex',
+    alignItems: 'center',
+    letterSpacing: 0.25,
+    color: '#000000',
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_600SemiBold
+        : 'IBMPlexSans-SemiBold',
+  },
+  etMessageView: {
+    marginTop: 14,
+    paddingStart: 40,
+    paddingEnd: 40,
+    paddingTop: 15,
+    paddingBottom: 15,
+    backgroundColor: '#ffffff',
+  },
+});
+
+export default ImageCapture;

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);
+}

package/src/components/executiontasks/payments/completePayment/CompletePaymentET.tsx

@@ -0,0 +1,237 @@
+import React, { useState, useLayoutEffect } from 'react';
+import type {
+  CompletePaymentInput,
+  CompletePaymentOutput,
+} from './CompletePaymentSchema';
+import { getBaseETResponse } from '../../../../utils/ExecTaskUtils';
+import { getEventCodeByET } from '../../../../manager/dispatchCodes/EventCodeContainer';
+import {
+  EntityCode,
+  ExecutionTaskID,
+} from '../../../../models/execTasks/ETConfig';
+import {
+  Button,
+  Modal,
+  Paragraph,
+  Portal,
+  Provider,
+  Text,
+  Title,
+} from 'react-native-paper';
+import { Platform, StyleSheet, View } from 'react-native';
+import {
+  CommonStyles,
+  DeliverPickupStyles,
+  Fonts,
+} from '../../../../styles/executionTasks/CommonStyles';
+import { getPaymentValue } from '../PaymentUtils';
+import { PaymentStyles } from '../PaymentStyles';
+import { GO_BACK_EVENT_CODE } from '../../../../constants/constants';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import GoBackModal from '../../../../components/widgets/GoBackModal';
+import { hasGoBackConnector } from '../../../../components/utils';
+import { useFocusEffect } from '@react-navigation/native';
+import { BackHandler } from 'react-native';
+
+const CompletePaymentET = (props: CompletePaymentInput) => {
+  const [disableProceed, setDisableProceed] = useState(false);
+  const [showBackModal, setShowBackModal] = useState(false);
+
+  // Handle back-button click
+  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 (
+          <Icon
+            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]);
+
+  const renderModal = () => {
+    return (
+      <GoBackModal
+        showModal={showBackModal}
+        setShowModal={setShowBackModal}
+        onSuccess={async () => {
+          props.onSubmitET({
+            paymentMode: props.paymentMode,
+            collectedAmount: props.collectedAmount,
+            tenantTransactionId: props.tenantTransactionId,
+            ...(await getBaseETResponse(
+              EntityCode.COMPLETE_PAYMENT,
+              false,
+              GO_BACK_EVENT_CODE,
+              '',
+              props.mergedObjectiveId,
+              ExecutionTaskID.COMPLETE_PAYMENT
+            )),
+          });
+          setShowBackModal(false);
+        }}
+        onFailure={() => setShowBackModal(false)}
+      />
+    );
+  };
+
+  return (
+    <Provider>
+      {renderModal()}
+      <Portal>
+        <View style={DeliverPickupStyles.mainContainer}>
+          <Modal
+            dismissable={false}
+            visible={true}
+            contentContainerStyle={DeliverPickupStyles.modalContent}
+          >
+            <View style={DeliverPickupStyles.modalView}>
+              <Title style={[styles.title, { color: 'grey' }]}>
+                {props.title}
+              </Title>
+              <Paragraph style={PaymentStyles.amountStyle}>
+                {props.expectedAmount.currencyCode +
+                  ' ' +
+                  getPaymentValue(
+                    props.expectedAmount.value,
+                    props.expectedAmount.minorUnit
+                  ).toLocaleString()}
+              </Paragraph>
+              {props.message && (
+                <Text style={styles.message1}>{props.message}</Text>
+              )}
+              <Button
+                disabled={disableProceed}
+                mode={'contained'}
+                uppercase={false}
+                labelStyle={CommonStyles.nextButtonLabel}
+                style={[
+                  CommonStyles.nextButton,
+                  {
+                    marginTop: 20,
+                  },
+                ]}
+                onPress={async () => {
+                  let etOutput: CompletePaymentOutput = {
+                    paymentMode: props.paymentMode,
+                    collectedAmount: props.collectedAmount,
+                    tenantTransactionId: props.tenantTransactionId, // todo Hardcoded for SL Release and is only for CASH Payment Type
+                    ...(await getBaseETResponse(
+                      EntityCode.COMPLETE_PAYMENT,
+                      true,
+                      getEventCodeByET(
+                        ExecutionTaskID.COMPLETE_PAYMENT,
+                        true,
+                        props.applicableReasons?.success
+                      ),
+                      '',
+                      props.mergedObjectiveId,
+                      ExecutionTaskID.COMPLETE_PAYMENT
+                    )),
+                  };
+                  setDisableProceed(true);
+                  props.onSubmitET(etOutput);
+                }}
+              >
+                Continue
+              </Button>
+              <Button
+                labelStyle={CommonStyles.cancelButtonLabel}
+                style={[CommonStyles.cancelButton, { marginTop: 10 }]}
+                mode={'outlined'}
+                onPress={async () => {
+                  let etOutput: CompletePaymentOutput = {
+                    paymentMode: props.paymentMode,
+                    collectedAmount: props.collectedAmount,
+                    tenantTransactionId: props.tenantTransactionId, // todo Hardcoded for SL Release and is only for CASH Payment Type
+                    ...(await getBaseETResponse(
+                      EntityCode.COMPLETE_PAYMENT,
+                      false,
+                      getEventCodeByET(
+                        ExecutionTaskID.COMPLETE_PAYMENT,
+                        false,
+                        props.applicableReasons?.failure
+                      ),
+                      '',
+                      props.mergedObjectiveId,
+                      ExecutionTaskID.COMPLETE_PAYMENT
+                    )),
+                  };
+                  setDisableProceed(true);
+                  props.onSubmitET(etOutput);
+                }}
+              >
+                Cancel
+              </Button>
+            </View>
+          </Modal>
+        </View>
+      </Portal>
+    </Provider>
+  );
+};
+export default CompletePaymentET;
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 18,
+    fontStyle: 'normal',
+    fontWeight: '600',
+    lineHeight: 28,
+    textAlign: 'center',
+    color: '#111111',
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_600SemiBold
+        : 'IBMPlexSans-SemiBold',
+  },
+  message1: {
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 12,
+    lineHeight: 20,
+    textAlign: 'center',
+    color: '#111111',
+    marginTop: 12,
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+  },
+});