@os1-platform/dispatch-mobile 2.0.8 → 2.1.0

package/src/components/executiontasks/dropCash/DropCashET.tsx

@@ -0,0 +1,145 @@
+import { KeyboardAvoidingView, ScrollView, Text, View } from 'react-native';
+import React, { useState } from 'react';
+import { Button, TextInput } from 'react-native-paper';
+import type { DropCashInput } from './DropCashSchema';
+import { PaymentStyles } from '../payments/PaymentStyles';
+import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
+import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
+import {
+  EntityCode,
+  ExecutionTaskID,
+} from '../../../models/execTasks/ETConfig';
+import { isEmptyOrBlank } from '../../../utils/utils';
+import { CommonStyles } from '../../../styles/executionTasks/CommonStyles';
+import { getPaymentValue } from '../payments/PaymentUtils';
+
+const styles = PaymentStyles;
+
+const DropCashET = (props: DropCashInput) => {
+  const [amountCollected, setAmountCollected] = useState('');
+  const [inputError, setInputError] = useState('');
+  const [disableNext, setDisableNext] = useState(false);
+
+  return (
+    <KeyboardAvoidingView style={CommonStyles.mainContainer}>
+      <ScrollView style={CommonStyles.mainContainer}>
+        <View style={CommonStyles.mainContainer}>
+          <Text style={styles.textStyle1}>AMOUNT TO DEPOSIT</Text>
+          <Text style={styles.amountStyle}>
+            {props.expectedAmount.currencyCode +
+              ' ' +
+              getPaymentValue(
+                props.expectedAmount.value,
+                props.expectedAmount.minorUnit
+              )}
+          </Text>
+          <View
+            style={{
+              marginTop: 20,
+              paddingTop: 10,
+              paddingStart: 20,
+              paddingEnd: 20,
+              backgroundColor: 'white',
+              paddingBottom: 40,
+            }}
+          >
+            <TextInput
+              multiline={false}
+              autoComplete={'off'}
+              label="Enter amount"
+              value={amountCollected}
+              mode={'outlined'}
+              error={!isEmptyOrBlank(inputError)}
+              selectionColor={'#6200EE'}
+              keyboardType={'numeric'}
+              onChangeText={(text) => {
+                setInputError('');
+                setAmountCollected(text);
+              }}
+            />
+            {!isEmptyOrBlank(inputError) && (
+              <Text style={{ color: '#B00020' }}>{inputError}</Text>
+            )}
+          </View>
+          {props.message && (
+            <View>
+              <Text style={styles.textStyle1}>MESSAGE</Text>
+              <Text style={styles.messageStyle}>{props.message}</Text>
+            </View>
+          )}
+        </View>
+      </ScrollView>
+      <View style={{ margin: 10 }}>
+        <View style={{ flexDirection: 'row' }}>
+          <Button
+            style={[CommonStyles.cancelButton, { flex: 1, marginEnd: 5 }]}
+            labelStyle={CommonStyles.cancelButtonLabel}
+            mode={'outlined'}
+            onPress={async () => {
+              props.onSubmitET({
+                ...(await getBaseETResponse(
+                  EntityCode.DELIVER_CASH,
+                  false,
+                  getEventCodeByET(
+                    ExecutionTaskID.DELIVER_CASH,
+                    false,
+                    props.applicableReasons?.failure
+                  ),
+                  '',
+                  props.mergedObjectiveId,
+                  ExecutionTaskID.DELIVER_CASH
+                )),
+              });
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            disabled={disableNext}
+            style={[CommonStyles.nextButton, { flex: 1, marginStart: 5 }]}
+            labelStyle={CommonStyles.nextButtonLabel}
+            mode={'contained'}
+            onPress={async () => {
+              if (
+                !isEmptyOrBlank(amountCollected) &&
+                !Number.isNaN(+amountCollected)
+              ) {
+                const calculatedValue = getPaymentValue(
+                  props.expectedAmount.value,
+                  props.expectedAmount.minorUnit
+                );
+                if (+amountCollected !== calculatedValue) {
+                  setInputError(`Amount should be equal to ${calculatedValue}`);
+                  return;
+                }
+                setDisableNext(true);
+                props.onSubmitET({
+                  amount: {
+                    value: props.expectedAmount.value,
+                    currencyCode: props.expectedAmount.currencyCode,
+                    minorUnit: props.expectedAmount.minorUnit,
+                  },
+                  ...(await getBaseETResponse(
+                    EntityCode.DELIVER_CASH,
+                    true,
+                    getEventCodeByET(
+                      ExecutionTaskID.DELIVER_CASH,
+                      true,
+                      props.applicableReasons?.success
+                    ),
+                    '',
+                    props.mergedObjectiveId,
+                    ExecutionTaskID.DELIVER_CASH
+                  )),
+                });
+              } else setInputError('Please enter valid amount.');
+            }}
+          >
+            Drop Cash
+          </Button>
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+};
+export default DropCashET;

package/src/components/executiontasks/dropCash/DropCashSchema.ts

@@ -0,0 +1,22 @@
+/**
+ * Amount to be collected
+ */
+import type {
+  BaseETRequest,
+  BaseETResponse,
+} from '../../../models/execTasks/ETBaseModels';
+import type { ETAmount } from '../payments/init/InitPaymentSchema';
+
+export type DropCashInput = BaseETRequest & {
+  expectedAmount: ETAmount;
+  confirmAmount?: boolean;
+  onSubmitET: (etOutput: DropCashOutput) => void;
+  confirmCustodyExchange?: boolean;
+};
+
+export type DropCashOutput = BaseETResponse & {
+  /**
+   * Amount collected (ISO 4217)
+   */
+  amount?: ETAmount;
+};

package/src/components/executiontasks/dropCash/SLDropCash.tsx

@@ -0,0 +1,286 @@
+import { Button, Modal, Portal, Provider, TextInput } from 'react-native-paper';
+import { Platform, Text, View } from 'react-native';
+import {
+  CommonStyles,
+  DeliverPickupStyles,
+  Fonts,
+} from '../../../styles/executionTasks/CommonStyles';
+import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
+import {
+  EntityCode,
+  ExecutionTaskID,
+} from '../../../models/execTasks/ETConfig';
+import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
+import React, { useState, useLayoutEffect, useEffect } from 'react';
+import { isEmptyOrBlank } from '../../../utils/utils';
+import type { DropCashInput } from './DropCashSchema';
+import { getPaymentValue } from '../payments/PaymentUtils';
+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 SLDropCash = (props: DropCashInput) => {
+  const [amountCollected, setAmountCollected] = useState(
+    props.confirmAmount
+      ? ''
+      : `${getPaymentValue(
+          props.expectedAmount.value,
+          props.expectedAmount.minorUnit
+        )}`
+  );
+  const [inputError, setInputError] = useState('');
+
+  const [disableNext, setDisableNext] = useState(false);
+  const [showBackModal, setShowBackModal] = useState(false);
+
+  useEffect(() => {
+    if (!props.confirmAmount)
+      setAmountCollected(
+        `${getPaymentValue(
+          props.expectedAmount.value,
+          props.expectedAmount.minorUnit
+        )}`
+      );
+  }, [props.expectedAmount]);
+
+  // 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({
+      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.DELIVER_CASH,
+              false,
+              GO_BACK_EVENT_CODE,
+              '',
+              props.mergedObjectiveId,
+              ExecutionTaskID.DELIVER_CASH
+            )),
+          });
+          setShowBackModal(false);
+        }}
+        onFailure={() => setShowBackModal(false)}
+      />
+    );
+  };
+
+  return (
+    <Provider>
+      {renderModal()}
+      <Portal>
+        <View style={DeliverPickupStyles.mainContainer}>
+          <Modal
+            visible={true}
+            dismissable={false}
+            contentContainerStyle={DeliverPickupStyles.modalContent}
+          >
+            <View style={DeliverPickupStyles.modalView}>
+              <Text style={DeliverPickupStyles.titleText}>{props.title}</Text>
+              <View
+                style={{
+                  marginTop: 15,
+                  marginBottom: 15,
+                  flexDirection: 'row',
+                }}
+              >
+                <Text
+                  style={{
+                    fontFamily:
+                      Platform.OS === 'android'
+                        ? Fonts.IBMPlexSans_400Regular
+                        : 'IBMPlexSans-Regular',
+                    fontStyle: 'normal',
+                    fontWeight: '400',
+                    fontSize: 14,
+                    flex: 1,
+                    textAlign: 'left',
+                    lineHeight: 28,
+                    color: '#111111',
+                  }}
+                >
+                  {props.confirmCustodyExchange
+                    ? 'Expected Cash'
+                    : 'Return Amount'}
+                </Text>
+                <Text
+                  style={{
+                    flex: 1,
+                    textAlign: 'right',
+                    fontSize: 14,
+                    lineHeight: 28,
+                    fontStyle: 'normal',
+                    color: '#111111',
+                    fontFamily:
+                      Platform.OS === 'android'
+                        ? Fonts.IBMPlexSans_600SemiBold
+                        : 'IBMPlexSans-SemiBold',
+                  }}
+                >
+                  {props.expectedAmount.currencyCode +
+                    ' ' +
+                    getPaymentValue(
+                      props.expectedAmount.value,
+                      props.expectedAmount.minorUnit
+                    )}
+                </Text>
+              </View>
+              {props.confirmAmount && (
+                <TextInput
+                  style={{
+                    fontSize: 14,
+                    lineHeight: 24,
+                    fontFamily:
+                      Platform.OS === 'android'
+                        ? Fonts.IBMPlexSans_400Regular
+                        : 'IBMPlexSans-Regular',
+                  }}
+                  multiline={false}
+                  autoComplete={'off'}
+                  label={`Enter Amount(in ${props.expectedAmount.currencyCode})`}
+                  value={amountCollected}
+                  mode={'outlined'}
+                  error={!isEmptyOrBlank(inputError)}
+                  selectionColor={'#6200EE'}
+                  keyboardType={'numeric'}
+                  onChangeText={(text) => {
+                    setInputError('');
+                    setAmountCollected(text);
+                  }}
+                />
+              )}
+              {!isEmptyOrBlank(inputError) && (
+                <Text style={{ color: '#B00020' }}>{inputError}</Text>
+              )}
+              <Button
+                disabled={disableNext}
+                style={[CommonStyles.nextButton, { marginTop: 20 }]}
+                labelStyle={CommonStyles.nextButtonLabel}
+                uppercase={false}
+                mode={'contained'}
+                onPress={async () => {
+                  if (
+                    !isEmptyOrBlank(amountCollected) &&
+                    !Number.isNaN(+amountCollected)
+                  ) {
+                    const calculatedValue = getPaymentValue(
+                      props.expectedAmount.value,
+                      props.expectedAmount.minorUnit
+                    );
+                    if (+amountCollected !== calculatedValue) {
+                      setInputError(
+                        `Amount should be equal to ${calculatedValue}`
+                      );
+                      return;
+                    }
+                    setDisableNext(true);
+                    props.onSubmitET({
+                      amount: {
+                        value: props.expectedAmount.value,
+                        currencyCode: props.expectedAmount.currencyCode,
+                        minorUnit: props.expectedAmount.minorUnit,
+                      },
+                      ...(await getBaseETResponse(
+                        EntityCode.DELIVER_CASH,
+                        true,
+                        getEventCodeByET(
+                          ExecutionTaskID.DELIVER_CASH,
+                          true,
+                          props.applicableReasons?.success
+                        ),
+                        '',
+                        props.mergedObjectiveId,
+                        ExecutionTaskID.DELIVER_CASH
+                      )),
+                    });
+                  } else setInputError('Please enter valid amount.');
+                }}
+              >
+                Confirm
+              </Button>
+              {!props.confirmCustodyExchange && (
+                <Button
+                  labelStyle={CommonStyles.cancelButtonLabel}
+                  style={[CommonStyles.cancelButton, { marginTop: 10 }]}
+                  mode={'outlined'}
+                  uppercase={false}
+                  onPress={async () => {
+                    props.onSubmitET({
+                      ...(await getBaseETResponse(
+                        EntityCode.DELIVER_CASH,
+                        false,
+                        getEventCodeByET(
+                          ExecutionTaskID.DELIVER_CASH,
+                          false,
+                          props.applicableReasons?.failure
+                        ),
+                        '',
+                        props.mergedObjectiveId,
+                        ExecutionTaskID.DELIVER_CASH
+                      )),
+                    });
+                  }}
+                >
+                  Cancel
+                </Button>
+              )}
+            </View>
+          </Modal>
+        </View>
+      </Portal>
+    </Provider>
+  );
+};
+export default SLDropCash;