@os1-platform/dispatch-mobile 2.1.2 → 2.1.3

package/src/components/executiontasks/display/DisplayModalET.tsx

@@ -0,0 +1,174 @@
+import type { DisplayETInput } from './DisplaySchema';
+import { Image, Platform, StyleSheet, View } from 'react-native';
+import React, { useCallback, useState } from 'react';
+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 {
+  CommonStyles,
+  DeliverPickupStyles,
+  Fonts,
+} from '../../../styles/executionTasks/CommonStyles';
+
+const DisplayModalET = (props: DisplayETInput) => {
+  const [modalVisible, setModalVisible] = useState(props.showDialog);
+  const sendEtOutput = useCallback(
+    async (success: boolean) => {
+      setModalVisible(false);
+      const _appRC = success
+        ? props.applicableReasons?.success
+        : props.applicableReasons?.failure;
+      props.onSubmit({
+        ...(await getBaseETResponse(
+          EntityCode.DISPLAY,
+          success,
+          getEventCodeByET(ExecutionTaskID.DISPLAY, success, _appRC),
+          '',
+          props.mergedObjectiveId,
+          ExecutionTaskID.DISPLAY
+        )),
+      });
+    },
+    [props]
+  );
+
+  return (
+    <Provider>
+      <Portal>
+        <View style={DeliverPickupStyles.mainContainer}>
+          <Modal
+            dismissable={false}
+            visible={modalVisible}
+            contentContainerStyle={DeliverPickupStyles.modalContent}
+          >
+            <View style={DeliverPickupStyles.modalView}>
+              {props.displayType === 'WARNING' && (
+                <Title style={styles.warningTitle}>{props.title}!</Title>
+              )}
+              {props.displayType === 'ALERT' && (
+                <Title style={styles.alertTitle}>{props.title}</Title>
+              )}
+              {props.displayType === 'MESSAGE' && (
+                <Title style={styles.messageTitle}>{props.title}</Title>
+              )}
+              {props.text && (
+                <Paragraph style={styles.messageText}>{props.text}</Paragraph>
+              )}
+              {props.message && (
+                <Text style={[styles.messageText]}>{props.message}</Text>
+              )}
+              {props.image && (
+                <View style={styles.imageView}>
+                  <Image
+                    source={{
+                      width: 200,
+                      height: 300,
+                      uri: props.image,
+                    }}
+                  />
+                </View>
+              )}
+              <View style={styles.buttons}>
+                <Button
+                  mode={'outlined'}
+                  uppercase={false}
+                  labelStyle={CommonStyles.nextButtonLabel}
+                  style={[
+                    CommonStyles.nextButton,
+                    {
+                      marginBottom: 5,
+                    },
+                  ]}
+                  onPress={async () => {
+                    await sendEtOutput(true);
+                  }}
+                  testID="primary"
+                >
+                  {props.positiveBtn}
+                </Button>
+                {props.negativeBtn && (
+                  <Button
+                    uppercase={false}
+                    mode={'outlined'}
+                    labelStyle={CommonStyles.cancelButtonLabel}
+                    style={[CommonStyles.cancelButton, { marginTop: 5 }]}
+                    onPress={async () => {
+                      await sendEtOutput(false);
+                    }}
+                    testID="secondary"
+                  >
+                    {props.negativeBtn}
+                  </Button>
+                )}
+              </View>
+            </View>
+          </Modal>
+        </View>
+      </Portal>
+    </Provider>
+  );
+};
+
+export default DisplayModalET;
+
+const styles = StyleSheet.create({
+  warningTitle: {
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_600SemiBold
+        : 'IBMPlexSans-SemiBold',
+    marginTop: 0,
+    marginBottom: 15,
+    textAlign: 'center',
+    color: '#856404',
+  },
+  messageTitle: {
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_600SemiBold
+        : 'IBMPlexSans-SemiBold',
+    marginTop: 0,
+    marginBottom: 15,
+    textAlign: 'center',
+    color: '#000000',
+  },
+  alertTitle: {
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_600SemiBold
+        : 'IBMPlexSans-SemiBold',
+    marginTop: 0,
+    marginBottom: 15,
+    textAlign: 'center',
+    color: 'red',
+  },
+  messageText: {
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    marginTop: 20,
+    fontSize: 16,
+    textAlign: 'center',
+    color: '#004085',
+  },
+  buttons: {
+    marginTop: 25,
+    flexDirection: 'column',
+  },
+  imageView: {
+    padding: 10,
+  },
+});

package/src/components/executiontasks/display/DisplaySchema.ts

@@ -0,0 +1,29 @@
+import type {
+  BaseETRequest,
+  BaseETResponse,
+} from '../../../models/execTasks/ETBaseModels';
+
+/**
+ * Type of display
+ */
+export type DisplayType = 'ALERT' | 'WARNING' | 'MESSAGE';
+/**
+ * Text to be displayed
+ */
+export type DisplayText = string;
+/**
+ * Url of image to be displayed
+ */
+export type DisplayImageURL = string;
+
+export type DisplayETInput = BaseETRequest & {
+  showDialog: boolean;
+  displayType: DisplayType;
+  text?: DisplayText;
+  image?: DisplayImageURL;
+  positiveBtn: string;
+  negativeBtn?: string;
+  onSubmit: (displayOutput: DisplayETOutput) => void;
+};
+
+export type DisplayETOutput = BaseETResponse;

package/src/components/executiontasks/doodle/SignatureET.tsx

@@ -0,0 +1,325 @@
+import React, { useRef, useState, useLayoutEffect } from 'react';
+import {
+  BackHandler,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import type { SignatureInput } from './SignatureSchema';
+import { Button, Provider } from 'react-native-paper';
+import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
+import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
+import {
+  EntityCode,
+  ExecutionTaskID,
+} from '../../../models/execTasks/ETConfig';
+import { showToast } from '../../widgets/Toaster';
+import DispatchSdkCache from '../../../manager/sdk/DispatchSdkCache';
+import {
+  CommonStyles,
+  Fonts,
+} from '../../../styles/executionTasks/CommonStyles';
+import { insertDocumentInDB } from '../../../utils/SyncManagerUtils';
+import SignatureCapture from '../../../native/signature/SignatureCapture';
+import SdkColors, { ColorTheme } from '../../../styles/SdkColors';
+import {
+  DEFAULT_SIGN_ET_MESSAGE,
+  GO_BACK_EVENT_CODE,
+} from '../../../constants/constants';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { hasGoBackConnector } from '../../../components/utils';
+import GoBackModal from '../../../components/widgets/GoBackModal';
+import { useFocusEffect } from '@react-navigation/native';
+import { getStr } from '../../../locale/util';
+import Str from '../../../locale/Str';
+
+const SignatureET = (props: SignatureInput) => {
+  const signatureViewRef = useRef<any>();
+  const [dragged, setDragged] = useState(0);
+  const dragRef = useRef<number>(0);
+  const [showBackModal, setShowBackModal] = useState(false);
+  const [buttonProceed, setButtonProceed] = useState(false);
+
+  // Handle back-button click when scanList was being viewed
+  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({
+      headerTitle: () => (
+        <View style={{ flexDirection: 'row', alignItems: 'center', marginRight: "50%" }}>
+          <Icon
+            onPress={() => {
+              if (props.taskMeta?.enableGoBack && props.applicableReasons) {
+                setShowBackModal(true);
+              } else {
+                props.navigation.goBack();
+              }
+            }}
+            name="arrow-back"
+            color="black"
+            size={22}
+            style={{ paddingRight: 6 }}
+          />
+          <Text style={{ fontSize: 16, fontFamily: Fonts.IBMPlexSans_500Medium, lineHeight: 24 }}>{props.title}</Text>
+        </View>
+      ),
+    });
+  }, [props.navigation, props.title]);
+
+  const renderModal = () => {
+    return (
+      <GoBackModal
+        showModal={showBackModal}
+        setShowModal={setShowBackModal}
+        onSuccess={async () => {
+          props.onSubmitET({
+            ...(await getBaseETResponse(
+              EntityCode.DOODLE,
+              false,
+              GO_BACK_EVENT_CODE,
+              '',
+              props.mergedObjectiveId,
+              ExecutionTaskID.DOODLE
+            )),
+          });
+          setShowBackModal(false);
+        }}
+        onFailure={() => setShowBackModal(false)}
+      />
+    );
+  };
+
+  async function saveAndSubmit(cancel: boolean, image: string) {
+    if (cancel) {
+      props.onSubmitET({
+        ...(await getBaseETResponse(
+          EntityCode.DOODLE,
+          false,
+          getEventCodeByET(
+            ExecutionTaskID.DOODLE,
+            false,
+            props.applicableReasons?.failure
+          ),
+          '',
+          props.mergedObjectiveId,
+          ExecutionTaskID.DOODLE
+        )),
+      });
+    } else {
+      if (image != null) {
+        const fileName = `SIG_${Date.now().toString()}.jpg`;
+        const folderName =
+          (await DispatchSdkCache.getInstance().getKeyFromCache(
+            DispatchSdkCache.KEYS.FMS_FOLDER
+          )) ?? 'NULL';
+        let insertID = await insertDocumentInDB(
+          fileName,
+          folderName,
+          // JSON.stringify(props.jobIDs),
+          // JSON.stringify(props.objRefs),
+          image,
+          props.title ?? 'Signature',
+          null
+        );
+        if (insertID) {
+          props.onSubmitET({
+            url: '',
+            file: {
+              folder: folderName,
+              name: fileName,
+            },
+            ...(await getBaseETResponse(
+              EntityCode.DOODLE,
+              true,
+              getEventCodeByET(
+                ExecutionTaskID.DOODLE,
+                true,
+                props.applicableReasons?.success
+              ),
+              '',
+              props.mergedObjectiveId,
+              ExecutionTaskID.DOODLE
+            )),
+          });
+        } else {
+          showToast('Failed to save signature');
+        }
+      } else {
+        showToast('Please enter signature!');
+      }
+    }
+  }
+
+  return (
+    <Provider>
+      {renderModal()}
+      <View style={styles.mainContainer}>
+        <View style={styles.doodleView}>
+          <View style={{ paddingVertical: 20, marginTop: 20, backgroundColor: "#FFF" }}>
+            <Text style={styles.messageText}>
+              {props.message || DEFAULT_SIGN_ET_MESSAGE}
+            </Text>
+          </View>
+          <View style={styles.horizontalLine} />
+          <View>
+            {/* <Text style={styles.messageText2}>{'Received by'}</Text> */}
+            <TouchableOpacity
+              onPress={() => {
+                if (Platform.OS === 'android') {
+                  setDragged(0);
+                } else {
+                  dragRef.current = 0;
+                }
+                signatureViewRef.current?.resetImage();
+              }}
+            >
+              <Text style={styles.clearBtn}>{''}</Text>
+            </TouchableOpacity>
+          </View>
+          <View style={{ height: 470, width: 310, borderWidth: 1, borderColor: "#E0E3EB", alignSelf: "center", borderRadius: 10, overflow: 'hidden' }}>
+            <SignatureCapture
+              ref={signatureViewRef}
+              rotateClockwise={false}
+              square={false}
+              viewMode={'PORTRAIT'}
+              showBorder={false}
+              showNativeButtons={false}
+              showTitleLabel={false}
+              maxSize={Math.max(
+                props.resolution.length,
+                props.resolution.breadth
+              )}
+              minStrokeWidth={8}
+              maxStrokeWidth={6}
+              strokeColor={props.penColor ?? 'black'}
+              backgroundColor={'white'}
+              style={{ flex: 1, borderColor: 'transparent', borderWidth: 1 }}
+              onSaveEvent={async (result) => {
+                if (Platform.OS === 'android') {
+                  if (dragged > 0) {
+                    await saveAndSubmit(false, result.encoded);
+                  } else {
+                    showToast('Please enter signature');
+                  }
+                } else {
+                  if (dragRef.current > 0) {
+                    await saveAndSubmit(false, result.encoded);
+                  } else {
+                    showToast('Please enter signature');
+                  }
+                }
+              }}
+              onDragEvent={(drag) => {
+                if (drag.dragged) {
+                  if (Platform.OS === 'android') {
+                    setButtonProceed(true)
+                    setDragged((prevState) => prevState + 1);
+                  } else {
+                    setButtonProceed(true)
+                    dragRef.current = dragRef.current + 1;
+                  }
+                }
+              }}
+            />
+          </View>
+        </View>
+        <View style={{ backgroundColor: '#DDDDDD', width: '100%', height: 1 }} />
+        <View style={styles.bottomButtons}>
+          {(props.isSelfLoop == false) && <Button
+            style={[CommonStyles.cancelButton, { flex: 1, marginEnd: 7 }]}
+            labelStyle={CommonStyles.cancelButtonLabel}
+            mode={'outlined'}
+            onPress={async () => {
+              await saveAndSubmit(true, '');
+            }}>{getStr(Str.skip)}
+          </Button>
+          }
+          <Button
+            labelStyle={{
+              color: buttonProceed ? "#ffff" : "#A3AAC2",
+              fontFamily: Fonts.IBMPlexSans_500Medium,
+              fontSize: 14,
+              lineHeight: 20,
+              textAlign: 'center',
+              textTransform: 'capitalize'
+            }}
+            style={[CommonStyles.nextButton, { flex: 1, marginStart: 8, backgroundColor: buttonProceed ? "#5B80F7" : "#E0E3EB" }]}
+            mode={'contained'}
+            onPress={async () => signatureViewRef.current?.saveImage()}
+          >
+            Proceed
+          </Button>
+        </View>
+      </View>
+    </Provider>
+  );
+};
+const styles = StyleSheet.create({
+  horizontalLine: {
+    marginTop: 13,
+  },
+  doodleView: {
+    flex: 1,
+    // padding: 20,
+  },
+  mainContainer: {
+    flex: 1,
+    backgroundColor: '#F9F9F9',
+  },
+  bottomButtons: {
+    justifyContent: 'flex-end',
+    flexDirection: 'row',
+    marginStart: 14,
+    marginEnd: 14,
+    backgroundColor: "white",
+    paddingVertical: 12,
+  },
+  clearBtn: {
+    color: SdkColors[ColorTheme.LIGHT].primaryButton,
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_600SemiBold
+        : 'IBMPlexSans-SemiBold',
+    fontSize: 15,
+    justifyContent: 'flex-end',
+    textAlign: 'right',
+  },
+  messageText: {
+    fontSize: 16,
+    lineHeight: 20,
+    color: '#111',
+    fontFamily: Platform.OS === 'android' ? Fonts.IBMPlexSans_400Regular : 'IBMPlexSans-Regular',
+    marginStart: 20
+  },
+  messageText2: {
+    flex: 1,
+    fontSize: 16,
+    lineHeight: 20,
+    color: '#999999',
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+  },
+});
+export default SignatureET;

package/src/components/executiontasks/doodle/SignatureSchema.ts

@@ -0,0 +1,52 @@
+/**
+ * Length (in cm)
+ */
+import type {
+  BaseETRequest,
+  BaseETResponse,
+} from '../../../models/execTasks/ETBaseModels';
+
+export type Length = number;
+/**
+ * Breadth (in cm)
+ */
+export type Breadth = number;
+/**
+ * Maximum Size limit (in kb) of doodle image
+ */
+export type MaxFileSize = number;
+/**
+ * Pen colour hex code
+ */
+export type PenColor = string;
+/**
+ * Any manual instruction to display for the Operator
+ */
+export type Instruction = string;
+
+export type SignatureInput = BaseETRequest & {
+  resolution: Dimension;
+  fileSizeLimit: MaxFileSize;
+  penColor?: PenColor;
+  isSelfLoop: boolean;
+  onSubmitET: (value: SignatureOutput) => void;
+} & {
+  jobIDs: string[];
+  objRefs: string[];
+};
+/**
+ * Dimensions of doodle image
+ */
+export interface Dimension {
+  length: Length;
+  breadth: Breadth;
+}
+export interface SignatureBaseResponse {
+  /**
+   * Url of doodle image
+   */
+  url?: string;
+  file?: { folder: string; name: string };
+}
+
+export type SignatureOutput = BaseETResponse & SignatureBaseResponse;