@os1-platform/dispatch-mobile 2.1.21 → 2.1.23

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

@@ -0,0 +1,273 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react-native/no-inline-styles */
+import React, { useState, useLayoutEffect, useEffect, useContext } from 'react';
+import { getBaseETResponse } from '../../../../utils/ExecTaskUtils';
+import { getEventCodeByET } from '../../../../manager/dispatchCodes/EventCodeContainer';
+import {
+  EntityCode,
+  ExecutionTaskID,
+} from '../../../../models/execTasks/ETConfig';
+import { Button, Modal, Portal, Provider, Text } from 'react-native-paper';
+import { Platform, StyleSheet, View } from 'react-native';
+import {
+  CommonStyles,
+  DeliverPickupStyles,
+  Fonts,
+} from '../../../../styles/executionTasks/CommonStyles';
+import { PAYMENT_SUCCESS_DEFAULT_TIMEOUT } from '../../../../constants/constants';
+import { useFocusEffect } from '@react-navigation/native';
+import { BackHandler } from 'react-native';
+import FailureCloseIcon from '../../../../icons/FailureCloseIcon';
+import SuccessCompleteIcon from '../../../../icons/SuccessCompleteIcon';
+import {
+  CollectPaymentInput,
+  CollectPaymentOutput,
+  PAYMENT_SCREEN,
+} from '../CollectPaymentSchema';
+import { PaymentContext } from '../../../../utils/context/paymentContext';
+import {
+  PAYMENT_SELECTION_SHARED_PREF_KEY,
+  getSharedPrefPaymentSelection,
+} from '../PaymentUtils';
+import Storage from '../../../../utils/storage';
+
+let storage = Storage.getInstance();
+
+const CompletePayment = (props: CollectPaymentInput & CollectPaymentOutput) => {
+  const paymentConfigContext = useContext(PaymentContext);
+
+  const [disableProceed, setDisableProceed] = useState(false);
+  const [showModal, setShowModal] = useState<boolean>(true);
+
+  // TO hide header for modal screen
+  useLayoutEffect(() => {
+    props.navigation.setOptions({
+      headerShown: false,
+    });
+  }, [props.navigation]);
+
+  // Handle back-button click
+  useFocusEffect(
+    React.useCallback(() => {
+      const onBackPress = () => {
+        return false;
+      };
+      BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () =>
+        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+    }, [])
+  );
+
+  // useLayoutEffect(() => {
+  //   props.navigation.setOptions({
+  //     title: 'Payment Complete',
+  //     headerShown: false,
+  //   });
+  // }, [props.navigation, props.title]);
+
+  useEffect(() => {
+    if (props.success) {
+      // setTimeout(() => {
+      sendOutput();
+      // }, 3000);
+    }
+  }, [props.success]);
+
+  const sendOutput = () => {
+    setTimeout(async () => {
+      const previousSelectedModes = await getSharedPrefPaymentSelection(
+        props.refId,
+        storage
+      );
+      let etOutput: CollectPaymentOutput = {
+        paymentMode: props.paymentMode,
+        collectedAmount: props.collectedAmount,
+        refId: props.refId,
+        ...(await getBaseETResponse(
+          EntityCode.COLLECT_PAYMENT_ET,
+          props.success,
+          getEventCodeByET(
+            ExecutionTaskID.COLLECT_PAYMENT_ET,
+            props.success,
+            props.applicableReasons?.success
+          ),
+          '',
+          props.mergedObjectiveId,
+          ExecutionTaskID.COLLECT_PAYMENT_ET
+        )),
+      };
+      if (previousSelectedModes) {
+        etOutput.paymentMeta = {
+          previousSelectedModes,
+        };
+      }
+      if (props.success) {
+        setShowModal(false);
+      }
+      setDisableProceed(true);
+      props.onSubmitET(etOutput);
+      storage.removeSharedItem(PAYMENT_SELECTION_SHARED_PREF_KEY + props.refId);
+    }, paymentConfigContext?.sdkConfig?.paymentSuccessTimeout || PAYMENT_SUCCESS_DEFAULT_TIMEOUT);
+  };
+
+  return (
+    <Provider>
+      <Portal>
+        <View style={DeliverPickupStyles.mainContainer}>
+          <Modal
+            dismissable={false}
+            visible={showModal}
+            contentContainerStyle={DeliverPickupStyles.modalContent}
+          >
+            <View style={DeliverPickupStyles.modalView}>
+              {props.success ? (
+                <View
+                  style={{
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    paddingVertical: 30,
+                  }}
+                >
+                  <SuccessCompleteIcon />
+                  <Text style={[CommonStyles.titleText, { marginTop: 20 }]}>
+                    Payment Received!
+                  </Text>
+                </View>
+              ) : (
+                <>
+                  <View
+                    style={{
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                      paddingVertical: 30,
+                    }}
+                  >
+                    <FailureCloseIcon />
+                    <Text style={[CommonStyles.titleText, { marginTop: 20 }]}>
+                      Payment Failed!
+                    </Text>
+                  </View>
+                  <Button
+                    disabled={disableProceed}
+                    mode={'contained'}
+                    uppercase={false}
+                    labelStyle={CommonStyles.nextButtonLabel}
+                    style={[
+                      CommonStyles.nextButton,
+                      {
+                        marginTop: 20,
+                      },
+                    ]}
+                    onPress={async () => {
+                      let etOutput: CollectPaymentOutput & {
+                        screen: PAYMENT_SCREEN;
+                        contactDetails?: string;
+                        sourceScreen: PAYMENT_SCREEN;
+                      } = {
+                        paymentMode: props.paymentMode,
+                        collectedAmount: props.collectedAmount,
+                        refId: props.refId,
+                        screen: PAYMENT_SCREEN.INIT,
+                        sourceScreen: PAYMENT_SCREEN.COMPLETE,
+                        ...(await getBaseETResponse(
+                          EntityCode.COLLECT_PAYMENT_ET,
+                          false,
+                          getEventCodeByET(
+                            ExecutionTaskID.COLLECT_PAYMENT_ET,
+                            false,
+                            props.applicableReasons?.failure
+                          ),
+                          '',
+                          props.mergedObjectiveId,
+                          ExecutionTaskID.COLLECT_PAYMENT_ET
+                        )),
+                      };
+                      storage.removeSharedItem(
+                        PAYMENT_SELECTION_SHARED_PREF_KEY + props.refId
+                      );
+                      setDisableProceed(true);
+                      props.next(etOutput);
+                    }}
+                  >
+                    Try again
+                  </Button>
+                  <Button
+                    labelStyle={[
+                      CommonStyles.cancelButtonLabel,
+                      { color: '#3D445C' },
+                    ]}
+                    style={[CommonStyles.cancelButton, { marginTop: 10 }]}
+                    mode={'outlined'}
+                    onPress={async () => {
+                      const previousSelectedModes =
+                        await getSharedPrefPaymentSelection(
+                          props.refId,
+                          storage
+                        );
+                      let etOutput: CollectPaymentOutput = {
+                        paymentMode: props.paymentMode,
+                        collectedAmount: props.collectedAmount,
+                        refId: props.refId,
+                        ...(await getBaseETResponse(
+                          EntityCode.COLLECT_PAYMENT_ET,
+                          false,
+                          getEventCodeByET(
+                            ExecutionTaskID.COLLECT_PAYMENT_ET,
+                            false,
+                            props.applicableReasons?.failure
+                          ),
+                          '',
+                          props.mergedObjectiveId,
+                          ExecutionTaskID.COLLECT_PAYMENT_ET
+                        )),
+                      };
+                      if (previousSelectedModes) {
+                        etOutput.paymentMeta = {
+                          previousSelectedModes,
+                        };
+                      }
+                      setDisableProceed(true);
+                      props.onSubmitET(etOutput);
+                      storage.removeSharedItem(
+                        PAYMENT_SELECTION_SHARED_PREF_KEY + props.refId
+                      );
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                </>
+              )}
+            </View>
+          </Modal>
+        </View>
+      </Portal>
+    </Provider>
+  );
+};
+export default CompletePayment;
+
+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',
+  },
+});