@os1-platform/dispatch-mobile 2.1.2 → 2.1.4

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

@@ -0,0 +1,238 @@
+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>
+              {(props.isSelfLoop == false) && <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',
+  },
+});

package/src/components/executiontasks/payments/completePayment/CompletePaymentSchema.ts

@@ -0,0 +1,24 @@
+/**
+ * Amount
+ */
+import type {
+  BaseETRequest,
+  BaseETResponse,
+} from '../../../../models/execTasks/ETBaseModels';
+import type { ETAmount } from '../init/InitPaymentSchema';
+
+export type CompletePaymentInput = BaseETRequest & {
+  isSelfLoop: boolean;
+  paymentMode: string;
+  expectedAmount: ETAmount;
+  collectedAmount: ETAmount;
+  transactionId: string;
+  tenantTransactionId: string; //todo Hardcode this value for SL ReleaseD
+  onSubmitET: (etOut: CompletePaymentOutput) => void;
+};
+
+export type CompletePaymentOutput = BaseETResponse & {
+  tenantTransactionId: string; // must be equal to transaction ID for SL release
+  paymentMode: string;
+  collectedAmount: ETAmount;
+};

package/src/components/executiontasks/payments/init/InitPaymentET.tsx

@@ -0,0 +1,246 @@
+import type { InitPaymentInput } from './InitPaymentSchema';
+import React, { useEffect, useState, useLayoutEffect } from 'react';
+import { FlatList, Text, View } from 'react-native';
+import { isEmptyOrBlank } from '../../../../utils/utils';
+import { getPaymentValue, getUniqueTransactionID } from '../PaymentUtils';
+import { getBaseETResponse } from '../../../../utils/ExecTaskUtils';
+import {
+  EntityCode,
+  ExecutionTaskID,
+} from '../../../../models/execTasks/ETConfig';
+import { getEventCodeByET } from '../../../../manager/dispatchCodes/EventCodeContainer';
+import { PaymentStyles } from '../PaymentStyles';
+import { CommonStyles } from '../../../../styles/executionTasks/CommonStyles';
+import { showToast } from '../../../widgets/Toaster';
+import {
+  Button,
+  Provider,
+  RadioButton,
+} from 'react-native-paper';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { GO_BACK_EVENT_CODE } from '../../../../constants/constants';
+import { hasGoBackConnector } from '../../../../components/utils';
+import GoBackModal from '../../../../components/widgets/GoBackModal';
+import { useFocusEffect } from '@react-navigation/native';
+import { BackHandler } from 'react-native';
+
+const styles = PaymentStyles;
+
+const footerMessage = (message?: string) => {
+  if (message)
+    return (
+      <View>
+        <Text style={styles.textStyle1}>MESSAGE</Text>
+        <Text style={styles.messageStyle}>{message}</Text>
+      </View>
+    );
+  else return null;
+};
+const InitPaymentET = (props: InitPaymentInput) => {
+  const [paymentMode, setPaymentMode] = useState('');
+  const [disableNext, setDisableNext] = 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.INIT_PAYMENT,
+              false,
+              GO_BACK_EVENT_CODE,
+              '',
+              props.mergedObjectiveId,
+              ExecutionTaskID.INIT_PAYMENT
+            )),
+          });
+          setShowBackModal(false);
+        }}
+        onFailure={() => setShowBackModal(false)}
+      />
+    );
+  };
+
+  useEffect(() => {
+    if (props.allowedModes && props.allowedModes.length === 1) {
+      setPaymentMode(props.allowedModes[0]);
+    }
+  }, [props.allowedModes]);
+  const renderItem = ({ item }: { item: string }) => {
+    return (
+      <View style={styles.reasonItemStyle}>
+        <RadioButton
+          color={'#5B80F7'}
+          value={item}
+          status={paymentMode === item ? 'checked' : 'unchecked'}
+          onPress={() => {
+            setPaymentMode(item);
+          }}
+        />
+        <Text
+          style={styles.reasonTextStyle}
+          onPress={() => {
+            setPaymentMode(item);
+          }}
+        >
+          {item}
+        </Text>
+      </View>
+    );
+  };
+
+  return (
+    <Provider>
+      {renderModal()}
+      <View style={CommonStyles.mainContainer}>
+        <Text style={styles.textStyle1}>AMOUNT</Text>
+        <Text style={styles.amountStyle}>
+          {props.amount.currencyCode +
+            ' ' +
+            getPaymentValue(
+              props.amount.value,
+              props.amount.minorUnit
+            ).toLocaleString()}
+        </Text>
+        <Text style={styles.textStyle1}>OPTIONS TO COLLECT PAYMENT</Text>
+        <View style={{ flex: 1 }}>
+          <FlatList
+            data={props.allowedModes}
+            renderItem={renderItem}
+            keyExtractor={(item) => item}
+            ListFooterComponent={footerMessage(props.message)}
+          />
+        </View>
+        <View style={{ justifyContent: 'flex-end', marginBottom: 10 }}>
+          <View
+            style={{
+              flexDirection: 'row',
+              marginStart: 10,
+              marginEnd: 10,
+            }}
+          >
+            {(props.isSelfLoop == false) && <Button
+              style={[
+                CommonStyles.cancelButton,
+                {
+                  marginEnd: 5,
+                  flex: 1,
+                },
+              ]}
+              labelStyle={CommonStyles.cancelButtonLabel}
+              mode={'outlined'}
+              onPress={async () => {
+                props.onSubmitET({
+                  paymentMode: paymentMode,
+                  transactionId: getUniqueTransactionID(props.amount.value),
+                  ...(await getBaseETResponse(
+                    EntityCode.INIT_PAYMENT,
+                    false,
+                    getEventCodeByET(
+                      ExecutionTaskID.INIT_PAYMENT,
+                      false,
+                      props.applicableReasons?.failure
+                    ),
+                    '',
+                    props.mergedObjectiveId,
+                    ExecutionTaskID.INIT_PAYMENT
+                  )),
+                });
+              }}
+            >
+              Cancel
+            </Button>
+            }
+            <Button
+              disabled={disableNext}
+              style={[
+                CommonStyles.nextButton,
+                {
+                  flex: 1,
+                  marginStart: 5,
+                },
+              ]}
+              labelStyle={CommonStyles.nextButtonLabel}
+              mode={'contained'}
+              onPress={async () => {
+                if (!isEmptyOrBlank(paymentMode)) {
+                  setDisableNext(true);
+                  props.onSubmitET({
+                    paymentMode: paymentMode,
+                    transactionId: getUniqueTransactionID(props.amount.value),
+                    ...(await getBaseETResponse(
+                      EntityCode.INIT_PAYMENT,
+                      true,
+                      getEventCodeByET(
+                        ExecutionTaskID.INIT_PAYMENT,
+                        true,
+                        props.applicableReasons?.success
+                      ),
+                      '',
+                      props.mergedObjectiveId,
+                      ExecutionTaskID.INIT_PAYMENT
+                    )),
+                  });
+                } else showToast('No payment mode selected');
+              }}
+            >
+              Collect
+            </Button>
+          </View>
+        </View>
+      </View>
+    </Provider>
+  );
+};
+export default InitPaymentET;

package/src/components/executiontasks/payments/init/InitPaymentSchema.ts

@@ -0,0 +1,38 @@
+/**
+ * Amount to be collected
+ */
+import type {
+  BaseETRequest,
+  BaseETResponse,
+} from '../../../../models/execTasks/ETBaseModels';
+/**
+ * List of allowed Modes
+ */
+
+export type AllowedModes = 'CASH' | 'UPI' | 'PAYMENT_LINK';
+
+export type InitPaymentInput = BaseETRequest & {
+  isSelfLoop: boolean;
+  amount: ETAmount;
+  allowedModes: string[];
+  onSubmitET: (output: InitPaymentOutput) => void;
+};
+/**
+ * Amount to be collected (ISO 4217)
+ */
+export interface ETAmount {
+  value: number;
+  currencyCode: string;
+  minorUnit?: number;
+}
+
+export type InitPaymentOutput = BaseETResponse & {
+  /**
+   * Unique transaction id
+   */
+  transactionId?: string;
+  /**
+   * Payment mode selected by user
+   */
+  paymentMode?: string;
+};