@os1-platform/dispatch-mobile 2.1.21 → 2.1.23

package/src/components/executiontasks/collectPayment/components/InitPayment.tsx

@@ -0,0 +1,658 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react-native/no-inline-styles */
+import React, { useEffect, useState, useLayoutEffect, useContext } from 'react';
+import { FlatList, Platform, Text, TouchableOpacity, View } from 'react-native';
+import { isEmptyOrBlank } from '../../../../utils/utils';
+import {
+  PAYMENT_SHARED_PREF_KEY,
+  getPaymentDataMO,
+  getPaymentType,
+  removeSharedPrefPaymentData,
+} 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,
+  Fonts,
+} 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,
+  PAYMENT_NOTIFICATION,
+} 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';
+import ProgressDialog from '../../../../components/widgets/ProgressDialog';
+import EventListener from '../../../../events';
+import {
+  AllowedModes,
+  CollectPaymentInput,
+  PAYMENT_SCREEN,
+  PaymentStatusResponse,
+  STATUS,
+  SUB_STATUS,
+  TRANSACTION_TYPE,
+  notificationPaymentStatus,
+  sharedPrefPaymentDataInterface,
+} from '../CollectPaymentSchema';
+import Storage from '../../../../utils/storage';
+import { PaymentContext } from '../../../../utils/context/paymentContext';
+import { ENDPOINTS } from '../../../../constants/apiConstants';
+import { RouteParams } from '../../../../ui/uiConfig/RouteParams';
+import Logger, { LOG_TYPE } from '../../../../utils/Logger';
+
+const styles = PaymentStyles;
+let storage = Storage.getInstance();
+
+const InitPayment = (props: CollectPaymentInput) => {
+  const paymentConfigContext = useContext(PaymentContext);
+  const [paymentStatus, setPaymentStatus] = useState<
+    PaymentStatusResponse | null | undefined
+  >(null);
+  const [paymentMode, setPaymentMode] = useState<AllowedModes>(
+    props.allowedModes[0]
+  );
+  const [disableNext, setDisableNext] = useState(false);
+  const [showBackModal, setShowBackModal] = useState(false);
+  const paymentRefId =
+    props.route.params[RouteParams.ROOT_META_DATA].paymentConfig?.paymentRefId;
+
+  const handleOnProceedClick = async () => {
+    if (!isEmptyOrBlank(paymentMode)) {
+      setDisableNext(true);
+      props.next({
+        paymentMode: paymentMode,
+        refId: paymentRefId,
+        ...(await getBaseETResponse(
+          EntityCode.COLLECT_PAYMENT_ET,
+          true,
+          getEventCodeByET(
+            ExecutionTaskID.COLLECT_PAYMENT_ET,
+            true,
+            props.applicableReasons?.success
+          ),
+          '',
+          props.mergedObjectiveId,
+          ExecutionTaskID.COLLECT_PAYMENT_ET
+        )),
+        screen:
+          paymentMode === 'QR_CODE'
+            ? PAYMENT_SCREEN.PROCESS
+            : paymentMode === 'PAYMENT_LINK'
+            ? PAYMENT_SCREEN.CONTACTS
+            : PAYMENT_SCREEN.COMPLETE,
+        sourceScreen: PAYMENT_SCREEN.INIT,
+        collectedAmount: {
+          value: props.expectedAmount,
+          currencyCode:
+            paymentConfigContext?.sdkConfig?.etConfig?.currencyCode || '',
+        },
+      });
+    } else showToast('No payment mode selected');
+  };
+
+  const handleOnCancelClick = async () => {
+    props.onSubmitET({
+      paymentMode: paymentMode,
+      refId: paymentRefId,
+      ...(await getBaseETResponse(
+        EntityCode.COLLECT_PAYMENT_ET,
+        false,
+        getEventCodeByET(
+          ExecutionTaskID.COLLECT_PAYMENT_ET,
+          false,
+          props.applicableReasons?.failure
+        ),
+        '',
+        props.mergedObjectiveId,
+        ExecutionTaskID.COLLECT_PAYMENT_ET
+      )),
+      collectedAmount: {
+        value: props.expectedAmount,
+        currencyCode:
+          paymentConfigContext?.sdkConfig?.etConfig?.currencyCode || '',
+      },
+    });
+  };
+
+  const getPaymentStatus = async (isProceed: boolean | null) => {
+    try {
+      let sharedPrefPaymentData: sharedPrefPaymentDataInterface | null = null;
+      const paymentResp =
+        await paymentConfigContext?.networkInstance.requestGet(
+          ENDPOINTS.PAYMENT_STATUS + paymentRefId,
+          {
+            requestId: 'payment:' + paymentRefId,
+          },
+          {
+            appAbbr: paymentConfigContext.sdkConfig.etConfig.appAbbr,
+            latest: true,
+          }
+        );
+      // const paymentResp = {
+      //   data: {
+      //     data: {
+      //       meta: { totalCount: 1 },
+      //       transactions: [
+      //         {
+      //           refId: paymentRefId,
+      //           status: STATUS.FAILED,
+      //           subStatus: SUB_STATUS.completed,
+      //           money: {
+      //             amount: 1000,
+      //             currency: 'INR',
+      //           },
+      //           txnId: '123',
+      //           txnType: TRANSACTION_TYPE.LINK,
+      //           appAbbr: 'testApp31',
+      //         },
+      //       ],
+      //     },
+      //   },
+      // };
+      const _ps: PaymentStatusResponse = paymentResp?.data;
+      console.log('INIT getPaymentStatus _ps: ', JSON.stringify(_ps));
+
+      sharedPrefPaymentData = await getPaymentDataMO(
+        props.mergedObjectiveId,
+        paymentRefId,
+        storage
+      );
+      /**
+       * TBD: For first time INIT Screen rendering, no data in shared Pref, meaning the payment was not initiated from mobile.
+       * For next time init screen rendering, refId should be associated with a MergedObjectiveId, if not then the payment won't be considered.
+       */
+      if (
+        _ps?.data.transactions?.length &&
+        (sharedPrefPaymentData ||
+          getPaymentType(_ps?.data.transactions[0].txnType)) &&
+        _ps.data.meta?.totalCount &&
+        _ps?.data.transactions[0].status === STATUS.SUCCESS
+      ) {
+        props.next({
+          paymentMode:
+            sharedPrefPaymentData?.paymentMode ||
+            getPaymentType(_ps?.data.transactions[0].txnType) ||
+            paymentMode,
+          collectedAmount: {
+            value:
+              sharedPrefPaymentData?.amount.value ||
+              _ps?.data.transactions[0].money.amount ||
+              props.expectedAmount,
+            currencyCode:
+              sharedPrefPaymentData?.amount.currencyCode ||
+              _ps?.data.transactions[0].money.currency ||
+              paymentConfigContext?.sdkConfig?.etConfig?.currencyCode ||
+              '',
+          },
+          refId: _ps.data.transactions[0].refId,
+          screen: PAYMENT_SCREEN.COMPLETE,
+          sourceScreen: PAYMENT_SCREEN.INIT,
+          ...(await getBaseETResponse(
+            EntityCode.COLLECT_PAYMENT_ET,
+            true,
+            getEventCodeByET(
+              ExecutionTaskID.COLLECT_PAYMENT_ET,
+              true,
+              props.applicableReasons?.success
+            ),
+            '',
+            props.mergedObjectiveId,
+            ExecutionTaskID.COLLECT_PAYMENT_ET
+          )),
+        });
+        setPaymentStatus(_ps);
+        return;
+      } else if (
+        sharedPrefPaymentData &&
+        _ps.data.meta?.totalCount &&
+        _ps?.data.transactions?.length &&
+        _ps?.data.transactions[0].status === STATUS.FAILED
+      ) {
+        /* const _sharedPrefPaymentData = JSON.parse(
+            JSON.stringify(sharedPrefPaymentData)
+          ); */
+        await removeSharedPrefPaymentData(paymentRefId, storage);
+        /*  await storage.removeSharedItems(
+          props.mergedObjectiveId.map((_id) => PAYMENT_SHARED_PREF_KEY + _id)
+        ); */
+      }
+
+      if (isProceed) await handleOnProceedClick();
+      else if (isProceed === false) await handleOnCancelClick();
+      setPaymentStatus(_ps);
+    } catch (err: any) {
+      Logger.getInstance().logEvent(
+        '~ getPaymentStatus triggered ',
+        JSON.stringify(err?.response?.data || err),
+        LOG_TYPE.SDK_ERROR
+      );
+      console.error('STATUS: ', err?.response?.data || err.message);
+      if (isProceed) await handleOnProceedClick();
+      else if (isProceed === false) await handleOnCancelClick();
+      setPaymentStatus(undefined);
+    }
+  };
+
+  useEffect(() => {
+    (async () => {
+      await getPaymentStatus(null);
+      // setPaymentStatus(false); // FOR TESTING payment status on click
+    })();
+
+    EventListener.on(
+      PAYMENT_NOTIFICATION,
+      async (data: notificationPaymentStatus) => {
+        console.log('InitPayment:', JSON.stringify(data));
+        let sharedPrefPaymentData: sharedPrefPaymentDataInterface | null = null;
+        if (
+          data &&
+          (data.status === STATUS.SUCCESS || data.status === STATUS.FAILED)
+        ) {
+          sharedPrefPaymentData = await getPaymentDataMO(
+            props.mergedObjectiveId,
+            data.refId,
+            storage
+          );
+        }
+        if (sharedPrefPaymentData && data && data.status === STATUS.SUCCESS) {
+          props.next({
+            paymentMode: sharedPrefPaymentData?.paymentMode || paymentMode,
+            collectedAmount: {
+              value:
+                sharedPrefPaymentData?.amount.value || props.expectedAmount,
+              currencyCode:
+                sharedPrefPaymentData?.amount.currencyCode ||
+                paymentConfigContext?.sdkConfig?.etConfig?.currencyCode ||
+                '',
+            },
+            refId: data.refId,
+            screen: PAYMENT_SCREEN.COMPLETE,
+            sourceScreen: PAYMENT_SCREEN.INIT,
+            ...(await getBaseETResponse(
+              EntityCode.COLLECT_PAYMENT_ET,
+              true,
+              getEventCodeByET(
+                ExecutionTaskID.COLLECT_PAYMENT_ET,
+                true,
+                props.applicableReasons?.success
+              ),
+              '',
+              props.mergedObjectiveId,
+              ExecutionTaskID.COLLECT_PAYMENT_ET
+            )),
+          });
+        } else if (
+          sharedPrefPaymentData &&
+          data &&
+          data.status === STATUS.FAILED /* &&
+        props.sourceScreen !== 'COMPLETE' */
+        ) {
+          /* const _sharedPrefPaymentData = JSON.parse(
+          JSON.stringify(sharedPrefPaymentData)
+        ); */
+          /* await storage.removeSharedItems(
+            props.mergedObjectiveId.map((_id) => PAYMENT_SHARED_PREF_KEY + _id)
+          ); */
+          await removeSharedPrefPaymentData(data.refId, storage);
+          /* props.next({
+          paymentMode: _sharedPrefPaymentData?.paymentMode || paymentMode,
+          collectedAmount: {
+            value: data.amount,
+            currencyCode:
+              _sharedPrefPaymentData?.amount.currencyCode ||
+              props.amount.currencyCode,
+            minorUnit:
+              _sharedPrefPaymentData?.amount.minorUnit ||
+              props.amount.minorUnit,
+          },
+          txnId: data.txnId,
+          refId: data.refId,
+          transactionSuccess: false,
+          screen: PAYMENT_SCREEN.COMPLETE,
+          sourceScreen: PAYMENT_SCREEN.INIT,
+          ...(await getBaseETResponse(
+            EntityCode.COLLECT_PAYMENT_ET,
+            false,
+            getEventCodeByET(
+              ExecutionTaskID.COLLECT_PAYMENT_ET,
+              false,
+              props.applicableReasons?.failure
+            ),
+            '',
+            props.mergedObjectiveId,
+            ExecutionTaskID.COLLECT_PAYMENT_ET
+          )),
+        }); */
+        }
+      }
+    );
+    return () => EventListener.remove(PAYMENT_NOTIFICATION);
+  }, []);
+
+  // Handle back-button click
+  useFocusEffect(
+    React.useCallback(() => {
+      const onBackPress = async () => {
+        let sharedPref = null;
+        // (async () => {
+        sharedPref = await storage.getSharedItem(
+          PAYMENT_SHARED_PREF_KEY + paymentRefId
+        );
+        // })();
+
+        const paymentInProgress =
+          /* props.mergedObjectiveId.some(
+            async (moId) =>
+              await storage.getSharedItem(PAYMENT_SHARED_PREF_KEY + moId)
+          ) */ sharedPref || false;
+        if (
+          props.taskMeta?.enableGoBack &&
+          hasGoBackConnector(props.applicableReasons) &&
+          !paymentInProgress
+        ) {
+          setShowBackModal(true);
+          return true;
+        } else {
+          props.navigation.goBack();
+          return true;
+        }
+      };
+      BackHandler.addEventListener('hardwareBackPress', () => {
+        onBackPress();
+        return true;
+      });
+      return () =>
+        BackHandler.removeEventListener('hardwareBackPress', () => {
+          onBackPress();
+          return true;
+        });
+    }, [])
+  );
+
+  useLayoutEffect(() => {
+    props.navigation.setOptions({
+      headerShown: true,
+      title: 'Choose Payment Method',
+      headerLeft: () => {
+        return (
+          <Icon
+            onPress={async () => {
+              const sharedPref = await storage.getSharedItem(
+                PAYMENT_SHARED_PREF_KEY + paymentRefId
+              );
+              const paymentInProgress =
+                /* props.mergedObjectiveId.some(
+                  async (moId) =>
+                    await storage.getSharedItem(PAYMENT_SHARED_PREF_KEY + moId)
+                ) */ sharedPref || false;
+
+              if (
+                props.taskMeta?.enableGoBack &&
+                hasGoBackConnector(props.applicableReasons) &&
+                !paymentInProgress
+              )
+                setShowBackModal(true);
+              else props.navigation.goBack();
+            }}
+            name="arrow-back"
+            color={'black'}
+            size={25}
+            style={{
+              paddingRight: 15,
+              paddingTop: 5,
+            }}
+          />
+        );
+      },
+    });
+  }, [props.navigation]);
+
+  useEffect(() => {
+    if (props.allowedModes && props.allowedModes.length > 0) {
+      setPaymentMode(props.allowedModes[0]);
+    }
+  }, [props.allowedModes]);
+
+  const renderModal = () => {
+    return (
+      <GoBackModal
+        showModal={showBackModal}
+        setShowModal={setShowBackModal}
+        onSuccess={async () => {
+          props.onSubmitET({
+            collectedAmount: {
+              value: props.expectedAmount,
+              currencyCode:
+                paymentConfigContext?.sdkConfig?.etConfig?.currencyCode || '',
+            },
+            paymentMode: paymentMode,
+            refId: paymentRefId,
+            ...(await getBaseETResponse(
+              EntityCode.COLLECT_PAYMENT_ET,
+              false,
+              GO_BACK_EVENT_CODE,
+              '',
+              props.mergedObjectiveId,
+              ExecutionTaskID.COLLECT_PAYMENT_ET
+            )),
+          });
+          setShowBackModal(false);
+        }}
+        onFailure={() => setShowBackModal(false)}
+      />
+    );
+  };
+
+  const renderItem = ({ item }: { item: AllowedModes }) => {
+    return (
+      <TouchableOpacity activeOpacity={1}
+      onPress={() => {
+        setPaymentMode(item);
+      }}
+        style={[
+          styles.reasonItemStyle,
+          { marginBottom: 4, paddingVertical: 8 },
+        ]}
+      >
+        <RadioButton
+          color={'#5B80F7'}
+          value={item}
+          status={paymentMode === item ? 'checked' : 'unchecked'}
+          onPress={() => {
+            setPaymentMode(item);
+          }}
+        />
+        <View style={{ display: 'flex', flexDirection: 'column' }}>
+          <Text
+            style={[
+              styles.reasonTextStyle,
+              {
+                fontWeight: 'bold',
+                paddingTop: 6,
+                fontSize: 14,
+                lineHeight: 20,
+                color: '#3D445C',
+              },
+            ]}
+            onPress={() => {
+              setPaymentMode(item);
+            }}
+          >
+            {item === 'CASH'
+              ? 'Cash'
+              : item === 'QR_CODE'
+              ? 'QR Code'
+              : item === 'PAYMENT_LINK'
+              ? 'Payment Link'
+              : item}
+          </Text>
+          {(item === 'QR_CODE' || item === 'PAYMENT_LINK') && (
+            <Text
+              style={[
+                styles.reasonTextStyle,
+                {
+                  fontWeight: '500',
+                  fontFamily: Fonts.IBMPlexSans_500Medium,
+                  paddingTop: 2,
+                  fontSize: 12,
+                  lineHeight: 16,
+                  color: '#525B7A',
+                },
+              ]}
+              onPress={() => {
+                setPaymentMode(item);
+              }}
+            >
+              {item === 'QR_CODE'
+                ? paymentConfigContext?.sdkConfig?.etConfig?.currencyCode ===
+                  'INR'
+                  ? 'UPI'
+                  : 'Scan to get a payment link'
+                : item === 'PAYMENT_LINK'
+                ? paymentConfigContext?.sdkConfig?.etConfig?.currencyCode ===
+                  'INR'
+                  ? props.plModes?.join(', ')
+                  : 'Credit / Debit Cards, Netbanking …'
+                : ''}
+            </Text>
+          )}
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <Provider>
+      {renderModal()}
+      {/* PAYMENT STATUS DIALOG */}
+      <ProgressDialog
+        customModalContentStyle={{ paddingVertical: 40 }}
+        visible={paymentStatus === null ? true : false}
+        label="Loading"
+        labelStyle={{
+          fontWeight: '400',
+          fontFamily:
+            Platform.OS === 'android'
+              ? Fonts.IBMPlexSans_400Regular
+              : 'IBMPlexSans-Regular',
+          marginTop: 16,
+          color: '#3D445C',
+        }}
+      />
+      {/* Payment method screen */}
+      {paymentStatus === null ? null : (
+        <View style={CommonStyles.mainContainer}>
+          <View
+            style={{
+              backgroundColor: 'white',
+              marginTop: 30,
+            }}
+          >
+            <Text
+              style={[
+                styles.amountStyle,
+                styles.textStyle1,
+                {
+                  paddingTop: 0,
+                  paddingBottom: 0,
+                  color: '#3D445C',
+                  margin: 0,
+                  fontSize: 16,
+                },
+              ]}
+            >
+              Collect at Delivery
+            </Text>
+            <Text style={[styles.amountStyle, { paddingTop: 0, fontSize: 24 }]}>
+              {paymentConfigContext?.sdkConfig?.etConfig?.currencyCode +
+                ' ' +
+                props.expectedAmount}
+            </Text>
+          </View>
+          <Text style={[styles.textStyle1, { paddingBottom: 12 }]}>
+            {'Select a payment option'.toUpperCase()}
+          </Text>
+          <View style={{ flex: 1 }}>
+            <FlatList
+              data={props.allowedModes}
+              renderItem={renderItem}
+              keyExtractor={(item) => item}
+            />
+          </View>
+          <View
+            style={{
+              justifyContent: 'flex-end',
+              // marginBottom: 10,
+              padding: 16,
+              // paddingTop: 10,
+              borderTopWidth: 1,
+              borderTopColor: '#E0E3EB',
+              elevation: 0.5,
+            }}
+          >
+            <View
+              style={{
+                flexDirection: 'row',
+                // marginStart: 10,
+                // marginEnd: 10,
+              }}
+            >
+              <Button
+                style={[
+                  CommonStyles.cancelButton,
+                  {
+                    marginEnd: 5,
+                    flex: 1,
+                  },
+                ]}
+                labelStyle={{
+                  ...CommonStyles.cancelButtonLabel,
+                  color: '#5B80F7',
+                  textTransform: 'capitalize',
+                }}
+                mode={'outlined'}
+                onPress={async () => {
+                  await getPaymentStatus(false);
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                disabled={disableNext}
+                style={[
+                  CommonStyles.nextButton,
+                  {
+                    flex: 1,
+                    marginStart: 5,
+                  },
+                ]}
+                labelStyle={{
+                  ...CommonStyles.nextButtonLabel,
+                  textTransform: 'capitalize',
+                }}
+                mode={'contained'}
+                onPress={async () => {
+                  // Check payment status every time when moving away from init screen
+                  await getPaymentStatus(true);
+                }}
+              >
+                Proceed
+              </Button>
+            </View>
+          </View>
+        </View>
+      )}
+    </Provider>
+  );
+};
+export default InitPayment;