@os1-platform/dispatch-mobile 2.1.21 → 2.1.23

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

@@ -0,0 +1,1352 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react-native/no-inline-styles */
+import {
+  BackHandler,
+  Image,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextStyle,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import React, {
+  useState,
+  useLayoutEffect,
+  useEffect,
+  useContext,
+  useCallback,
+  useRef,
+} from 'react';
+import {
+  getBaseETResponse,
+  onClickEvent,
+} from '../../../../utils/ExecTaskUtils';
+import { getEventCodeByET } from '../../../../manager/dispatchCodes/EventCodeContainer';
+import {
+  EntityCode,
+  ExecutionTaskID,
+} from '../../../../models/execTasks/ETConfig';
+import { PaymentStyles } from '../PaymentStyles';
+import {
+  CommonStyles,
+  Fonts,
+} from '../../../../styles/executionTasks/CommonStyles';
+import {
+  getPaymentDataMO,
+  getPaymentLink,
+  getPaymentType,
+  removeSharedPrefPaymentData,
+  setSharedPrefPaymentData,
+  setSharedPrefPaymentSelection,
+} from '../PaymentUtils';
+import {
+  ActivityIndicator,
+  Button,
+  Modal,
+  Portal,
+  Provider,
+} from 'react-native-paper';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { PAYMENT_NOTIFICATION } from '../../../../constants/constants';
+import { useFocusEffect } from '@react-navigation/native';
+import ProgressDialog from '../../../../components/widgets/ProgressDialog';
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import ModalWidget from '../../../../components/widgets/ModalWidget';
+import FailedIcon from '../../../../icons/FailedIcon';
+import EventListener from '../../../../events';
+import { RouteParams } from '../../../../ui/uiConfig/RouteParams';
+import {
+  CollectPaymentInput,
+  PaymentStatusResponse,
+  QrResponse,
+  notificationPaymentStatus,
+  ProcessPaymentInput,
+  sharedPrefPaymentDataInterface,
+  QR_REQUEST_BODY,
+  PaymentEventDataInterface,
+  STATUS,
+  PAYMENT_SCREEN,
+  SUB_STATUS,
+  TRANSACTION_TYPE,
+} from '../CollectPaymentSchema';
+import SnackBarCustom, {
+  SnackBarType,
+} from '../../../../components/widgets/SnackBarCustom';
+import Storage from '../../../../utils/storage';
+import { PaymentContext } from '../../../../utils/context/paymentContext';
+import { ENDPOINTS } from '../../../../constants/apiConstants';
+import { Timer } from '../../../../components/widgets/Timer';
+import { fireEventWithScreenName } from '../../../../analytics/sentry/SentryAnalyticsUtils';
+import {
+  ScreenNameSdkConstants,
+  SentryEventNameSdkConstants,
+  SeverityLevelValue,
+} from '../../../../analytics/sentry/SentrySdkConstants';
+import Logger, { LOG_TYPE } from '../../../../utils/Logger';
+
+const styles = PaymentStyles;
+let storage = Storage.getInstance();
+
+const ProcessPayment = (props: CollectPaymentInput & ProcessPaymentInput) => {
+  const paymentConfigContext = useContext(PaymentContext);
+  const [showGoBackModal, setGoBackModal] = useState(false);
+  const [showGoBackDisabledModal, setGoBackDisabledModal] = useState(false);
+  const [isRetryEnabled, setIsRetryEnabled] = useState(false);
+  const [backDisable, setBackDisable] = useState(true);
+
+  const timerRef: any = useRef();
+  const paymentRefId =
+    props.route.params[RouteParams.ROOT_META_DATA].paymentConfig?.paymentRefId;
+
+  const useTimer = (timerDuration: any, onTimerEnd?: () => void) => {
+    const [counter, setCounter] = useState(timerDuration);
+    const [hasTimerEnded, setHasTimerEnded] = useState(false);
+
+    useEffect(() => {
+      if (hasTimerEnded) return; // Stop if the timer has already ended
+
+      const interval = setInterval(() => {
+        if (counter > 0) {
+          setCounter((prev: any) => prev - 1);
+        } else if (counter === 0 && !hasTimerEnded) {
+          setBackDisable(false);
+          setHasTimerEnded(true); // Mark the timer as ended
+          onTimerEnd && onTimerEnd(); // Call the callback if provided
+          clearInterval(interval);
+        }
+      }, 1000);
+
+      return () => clearInterval(interval);
+    }, [counter, hasTimerEnded]);
+
+    // Function to reset the timer
+    const resetTimer = () => {
+      setCounter(timerDuration);
+      setHasTimerEnded(false);
+      setBackDisable(true);
+    };
+
+    return { counter, resetTimer };
+  };
+
+  const { counter } = useTimer(
+    paymentConfigContext?.sdkConfig?.etConfig?.goBackDisableTimer,
+    () => {
+      console.log('Timer ended!');
+      setBackDisable(false);
+    }
+  );
+
+  useEffect(() => {
+    EventListener.on(
+      PAYMENT_NOTIFICATION,
+      async (data: notificationPaymentStatus) => {
+        console.log('ProcessPayment:', 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 || props.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.PROCESS,
+            ...(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
+        ) {
+          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 || props.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.PROCESS,
+            ...(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);
+    };
+  }, []);
+
+  const onNext = async () => {
+    props.next({
+      paymentMode: props.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: PAYMENT_SCREEN.INIT,
+      sourceScreen: PAYMENT_SCREEN.PROCESS,
+      collectedAmount: {
+        value: props.expectedAmount,
+        currencyCode:
+          paymentConfigContext?.sdkConfig?.etConfig?.currencyCode || '',
+      },
+    });
+  };
+
+  // Handle back-button click
+  useFocusEffect(
+    useCallback(() => {
+      const onBackPress = () => {
+        // isRetryEnabled
+        //   ? onNext()
+        //   : backDisable
+        //   ? setGoBackDisabledModal(true)
+        //   : setGoBackModal(true);
+        isRetryEnabled ? onNext() : setGoBackModal(true);
+        return true;
+      };
+      BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () =>
+        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+    }, [isRetryEnabled, backDisable])
+  );
+
+  useLayoutEffect(() => {
+    props.navigation.setOptions({
+      headerShown: true,
+      title:
+        props.paymentMode === 'QR_CODE'
+          ? 'QR Code'
+          : props.paymentMode === 'PAYMENT_LINK'
+          ? 'Payment Confirmation'
+          : props.title,
+      headerLeft: () => {
+        return (
+          <Icon
+            onPress={() => {
+              // isRetryEnabled
+              //   ? onNext()
+              //   : backDisable
+              //   ? setGoBackDisabledModal(true)
+              //   : setGoBackModal(true);
+              isRetryEnabled ? onNext() : setGoBackModal(true);
+            }}
+            name="arrow-back"
+            color={'black'}
+            size={25}
+            style={{
+              paddingRight: 15,
+              paddingTop: 5,
+            }}
+          />
+        );
+      },
+    });
+  }, [backDisable, props.navigation, props.title, isRetryEnabled]);
+
+  return (
+    <Provider>
+      {/* <ModalWidget
+        modalStyle={{ paddingVertical: 24 }}
+        dismissable={false}
+        buttonStyle={{
+          alignSelf: 'center',
+          marginTop: 10,
+        }}
+        title={{ label: 'Payment Completed?', styles: { display: 'none' } }}
+        subTitle={{
+          label:
+            'Are you sure you want to go back and change the payment method? ',
+          styles: { textAlign: 'center' },
+        }}
+        showModal={showGoBackModal}
+        primaryButton={{
+          disabled: backDisable,
+          label: 'Yes, Wait for Completion',
+          onPress: () => {},
+          styles: {
+            display: 'none',
+          },
+          labelStyles: {
+            display: 'none',
+          },
+        }}
+        secondaryButton={{
+          label: 'No, Change Payment Mode',
+          onPress: () => {
+            onNext();
+          },
+          styles: { display: 'none' },
+          labelStyles: {
+            display: 'none',
+          },
+        }}
+        // renderAdditionalHeader={() => <FailedIcon />}
+      /> */}
+      <Portal>
+        <Modal
+          visible={showGoBackModal}
+          dismissable={false}
+          contentContainerStyle={[modalStyles.modalContent]}
+        >
+          <View
+            style={[
+              modalStyles.modalView,
+              { paddingVertical: 24, paddingHorizontal: 16 },
+            ]}
+          >
+            <View>
+              <Text style={[modalStyles.subTitleText, { textAlign: 'center' }]}>
+                Are you sure you want to go back and change the payment method?
+              </Text>
+            </View>
+
+            <View style={{ alignSelf: 'center', marginTop: 10 }}>
+              <>
+                <TouchableOpacity
+                  style={[
+                    CommonStyles.nextButton,
+                    {
+                      height: 35,
+                      borderRadius: 5,
+                      width: 240,
+                      marginBottom: 16,
+                    },
+                    counter !== 0 && {
+                      backgroundColor: '#E0E3EB',
+                      borderColor: '#F9F9FB',
+                    },
+                  ]}
+                  onPress={() => {
+                    onNext();
+                    fireEventWithScreenName({
+                      severityLevel: SeverityLevelValue.LOG,
+                      eventName: SentryEventNameSdkConstants.BUTTON_CLICKED,
+                      screenName: ScreenNameSdkConstants.MODEL_WIDGET_SCREEN,
+                      cta: 'Yes',
+                    });
+                  }}
+                  disabled={backDisable}
+                >
+                  <Text
+                    style={[
+                      CommonStyles.nextButtonLabel,
+                      {
+                        textAlignVertical: 'center',
+                        paddingVertical: 6,
+                        paddingHorizontal: 20,
+                      },
+                      counter !== 0 && {
+                        color: '#A3AAC2',
+                      },
+                    ]}
+                  >
+                    {`Yes ${counter > 0 ? '(' + counter + ' sec)' : ''}`}
+                  </Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={[
+                    CommonStyles.cancelButton,
+                    { height: 35, borderRadius: 5, width: 240 },
+                  ]}
+                  onPress={() => {
+                    setGoBackModal(false);
+                    fireEventWithScreenName({
+                      severityLevel: SeverityLevelValue.LOG,
+                      eventName: SentryEventNameSdkConstants.BUTTON_CLICKED,
+                      screenName: ScreenNameSdkConstants.MODEL_WIDGET_SCREEN,
+                      cta: 'Cancel',
+                    });
+                  }}
+                  disabled={false}
+                >
+                  <Text
+                    style={[
+                      CommonStyles.cancelButtonLabel,
+                      {
+                        textAlignVertical: 'center',
+                        paddingVertical: 6,
+                        paddingHorizontal: 20,
+                        color: '#3D445C',
+                      },
+                    ]}
+                  >
+                    {'Cancel'}
+                  </Text>
+                </TouchableOpacity>
+              </>
+            </View>
+          </View>
+        </Modal>
+      </Portal>
+      <ModalWidget
+        modalStyle={{ padding: 25 }}
+        dismissable={false}
+        buttonStyle={{
+          alignSelf: 'center',
+          marginTop: 10,
+        }}
+        title={{
+          label: '',
+          styles: { textAlign: 'center', display: 'none' },
+        }}
+        subTitle={{
+          // label:
+          //   'Payment is in progress, please wait until the payment is completed or timed out.',
+          label:
+            'Please wait for the timer to complete before navigating back.',
+          styles: { textAlign: 'center' },
+        }}
+        showModal={showGoBackDisabledModal}
+        primaryButton={{
+          label: 'OK',
+          onPress: () => {
+            setGoBackDisabledModal(false);
+          },
+          styles: {
+            height: 40,
+            borderRadius: 5,
+            width: 240,
+            marginBottom: 10,
+            marginTop: 24,
+            backgroundColor: 'white',
+            borderColor: '#5B80F7',
+            borderWidth: 1,
+          },
+          labelStyles: {
+            textAlignVertical: 'center',
+            paddingVertical: 8,
+            paddingHorizontal: 20,
+            fontSize: 14,
+            lineHeight: 20,
+            fontFamily: 'IBM Plex Sans',
+            color: '#5B80F7',
+            fontWeight: '700',
+          },
+        }}
+        secondaryButton={{
+          label: '',
+          onPress: () => {},
+          styles: { height: 35, borderRadius: 5, width: 240, display: 'none' },
+          labelStyles: {
+            textAlignVertical: 'center',
+          },
+        }}
+      />
+      <KeyboardAvoidingView style={CommonStyles.mainContainer}>
+        {props.paymentMode === 'QR_CODE' ? (
+          <RenderQR
+            {...props}
+            setBackDisable={setBackDisable}
+            showGoBackModal={showGoBackModal}
+            setIsRetryEnabled={(isEnabled) => {
+              setIsRetryEnabled(isEnabled);
+            }}
+          />
+        ) : (
+          <PaymentLink setBackDisable={setBackDisable} {...props} />
+        )}
+      </KeyboardAvoidingView>
+    </Provider>
+  );
+};
+export default ProcessPayment;
+
+const RenderQR = (
+  props: CollectPaymentInput &
+    ProcessPaymentInput & {
+      setBackDisable: (data: boolean) => void;
+      showGoBackModal: boolean;
+      setIsRetryEnabled: (showRetryModal: boolean) => void;
+    }
+) => {
+  const paymentConfigContext = useContext(PaymentContext);
+  const [qrData, setQrData] = useState<QrResponse | null>(null);
+  const [showStatusModal, setStatusModal] = useState(false);
+  const [showRetryModal, setRetryModal] = useState(false);
+  const [disableStatusBtn, setDisableStatusBtn] = useState(true);
+  const [fetchQR, setFetchQR] = useState(true);
+  const timerRef: any = useRef();
+  const statusTimerRef: any = useRef();
+  const paymentConfig =
+    props.route.params[RouteParams.ROOT_META_DATA].paymentConfig;
+  const paymentRefId = paymentConfig?.paymentRefId;
+
+  useEffect(() => {
+    props.setIsRetryEnabled(showRetryModal);
+  }, [showRetryModal]);
+
+  const sendClickEvent = (event: 'QR_CODE' | 'CHECK_STATUS') => {
+    onClickEvent(
+      event,
+      props.route.params[RouteParams.NEXT_STATES],
+      props.route.params[RouteParams.ROOT_META_DATA].customEventsData,
+      {
+        refId: paymentRefId,
+        money: {
+          amount: props.expectedAmount,
+          currency:
+            paymentConfigContext?.sdkConfig?.etConfig?.currencyCode || '',
+        },
+      }
+    );
+  };
+
+  const fetchQrCode = async () => {
+    sendClickEvent('QR_CODE');
+    setFetchQR(true);
+    let qrParams: QR_REQUEST_BODY = {
+      refId: paymentRefId,
+      appAbbr: paymentConfigContext?.sdkConfig.etConfig.appAbbr || '',
+      money: {
+        amount: props.expectedAmount,
+        currency: paymentConfigContext?.sdkConfig?.etConfig?.currencyCode || '',
+      },
+    };
+    if (paymentConfig?.userInfo) {
+      qrParams.userInfo = paymentConfig.userInfo;
+    }
+    try {
+      const paymentResp =
+        await paymentConfigContext?.networkInstance.requestPost(
+          ENDPOINTS.GENERATE_QR,
+          qrParams,
+          {
+            requestId: 'payment:' + paymentRefId,
+          }
+        );
+      // const paymentResp = {
+      //   data: {
+      //     data: {
+      //       qrCode:
+      //         'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOQAAADkCAYAAACIV4iNAAAAAklEQVR4AewaftIAAAxrSURBVO3BQY4cy5LAQDLR978yR0tfBZCoaineHzezP1hrXeFhrXWNh7XWNR7WWtd4WGtd42GtdY2HtdY1HtZa13hYa13jYa11jYe11jUe1lrXeFhrXeNhrXWNh7XWNR7WWtf44UMqf1PFb1KZKiaVNyp+k8pvqjhRmSomlaniRGWqOFGZKiaVv6niEw9rrWs8rLWu8bDWusYPX1bxTSrfpDJVTBWTyknFicpJxaTyiYo3VKaKSeUNlaliUpkqTlS+qeKbVL7pYa11jYe11jUe1lrX+OGXqbxR8YbKVDGpTBWTylQxVUwqJypTxRsVb6hMKicVJypTxaTymypOVL5J5Y2K3/Sw1rrGw1rrGg9rrWv88D+uYlKZKt6oOKn4JpWTikllqjipmFQmlZOKT6icVJxU/C95WGtd42GtdY2HtdY1fvgfo3JScaIyVZyoTBWTym9SOVF5o2JSeUNlqpgqTlROKv6XPay1rvGw1rrGw1rrGj/8soq/qeJEZaqYKk5UpoqTihOVNyreUJkqTlSmihOVE5VPqEwV31Rxk4e11jUe1lrXeFhrXeOHL1O5icpUMalMFZPKVDGpTBWTylRxUjGpnKhMFW+oTBWTylRxUjGpTBWTylQxqZyoTBUnKjd7WGtd42GtdY2HtdY1fvhQxU1UTlSmijdUpopJ5UTlmyreUDlReaPiDZWpYlL5por/koe11jUe1lrXeFhrXeOHD6lMFZPKN1VMFZPKScUnKiaVqWJS+SaVT1ScqEwVk8pUcVJxovKGylRxovJNFb/pYa11jYe11jUe1lrX+OEfq/hNFX+TyhsVk8pU8YbKVHGicqIyVXxTxaQyVZyofKJiUpkqJpWp4pse1lrXeFhrXeNhrXUN+4MPqEwVb6h8ouJEZar4JpWp4jepTBWTyknFGypTxTepnFRMKicV36TyRsUnHtZa13hYa13jYa11DfuDL1KZKr5JZaqYVKaKSWWqmFSmiknlpOJEZar4JpWTiknlN1VMKlPFpHJSMamcVEwqU8UbKlPFNz2sta7xsNa6xsNa6xo/fEjlRGWqmFSmikllqnhD5ZsqTlS+SeWNihOVqWJSOan4RMWkclLxL6n8TQ9rrWs8rLWu8bDWusYPH6o4UflExYnKVDGpTBUnFW+oTBWfUJkqTlQmlaliqviEylTxTRUnKlPFpDKpTBWTylTxLz2sta7xsNa6xsNa6xo//LKKT6icVEwqJyonFZPKGypvVEwVn6iYVE4qpooTlTdUpooTlZOKSeWkYlL5JpWp4hMPa61rPKy1rvGw1rrGD1+mMlVMKicqU8Wk8kbFJyr+JpWp4qRiUpkqPqHyhspUMamcVJyoTBWTyqQyVUwqJxWTym96WGtd42GtdY2HtdY17A++SOVfqphUPlHxhspUMamcVJyonFScqEwVk8pJxTepnFRMKlPF36RyUvGJh7XWNR7WWtd4WGtd44cPqfymiknljYo3VE5UpopPVJyovKEyVUwVJxWTyqQyVUwqU8WkclJxUnGi8kbFpDJVTBWTyjc9rLWu8bDWusbDWusaP3yo4kRlqphUpopJZaqYVCaVk4pvUnmjYlKZKk4q3lA5qZhUTipOKk4qJpVJZar4RMWJyhsqv+lhrXWNh7XWNR7WWtf44ctUpoqTipOKSeU3VfwmlTcqPlExqUwqU8WkcqIyVbxRMam8oTJVTCpTxUnFGxXf9LDWusbDWusaD2uta9gffEDljYo3VKaKSWWqeEPlpOITKv9SxaQyVbyhMlVMKicVk8pUMalMFZPKVPEJlTcqvulhrXWNh7XWNR7WWtewP/iAylRxE5Wp4g2VqeJEZap4Q2Wq+CaVqeJEZar4hMobFZPKVHGi8omKv+lhrXWNh7XWNR7WWtewP/iLVH5TxYnKVDGpvFFxojJVTCp/U8WJylQxqUwVk8onKiaVqWJSuUnFJx7WWtd4WGtd42GtdY0fPqTyRsWkMlW8ofJGxUnFpDJVvFExqUwVk8pJxRsqJyq/qWJSmSpOKiaVk4o3VKaKf+lhrXWNh7XWNR7WWtf44csqJpVPqEwVJyonFScqU8WJylRxUjGpfEJlqnij4kTlEyonKr9JZap4Q+WNik88rLWu8bDWusbDWusaP3yo4qRiUnmj4hMVk8pU8YbKJ1SmihOVk4pPqLxRMalMFW+oTBVvqJxUfKLib3pYa13jYa11jYe11jV++JDKVPEJlU9UTCpTxScqJpVJ5aRiUpkqTlS+qeINlU+onKh8QuU3qZxUfOJhrXWNh7XWNR7WWtf44UMVJyonFZ9Q+aaKT1RMKicVn6iYVKaKSeWNiqliUplUpoqTikllqphUpoo3VE5Upoqp4jc9rLWu8bDWusbDWusa9gcfUJkqJpWTiknljYpJ5aRiUpkqJpWTikllqnhDZaqYVE4qPqHyRsWkclIxqUwVJypvVJyoTBWTylTxmx7WWtd4WGtd42GtdQ37gy9SmSomlaliUpkqJpU3Kt5QmSomlZOKSeWbKiaVqWJSOak4UZkqPqFyUnGiMlVMKm9UTCpTxaQyVXzTw1rrGg9rrWs8rLWu8cOHVKaKN1ROVKaKSeUTKlPFJ1SmihOVqWJSmVROVKaKSeVEZaqYVKaKSWWqOKmYVD5RMalMFZPKVDGpnKhMFZ94WGtd42GtdY2HtdY1fvjHKj5R8YmKSWWqmComlROVT1ScqEwVk8o3VZxUTCpTxaTyRsWkclIxqUwVk8pUMalMFd/0sNa6xsNa6xoPa61r/PBlKlPFGypvVEwqn6g4UZkqJpWp4kTlROUTFScqU8WJyidUpooTlUnlpGJSmSpOKiaVqeI3Pay1rvGw1rrGw1rrGvYHX6TyTRUnKlPFJ1Smim9SmSreUHmjYlJ5o+JEZaqYVKaKE5VPVEwqJxWTyknFb3pYa13jYa11jYe11jXsD36Rym+qmFROKiaVT1RMKm9UTCrfVHGiMlVMKp+omFSmik+ofKLiDZWTik88rLWu8bDWusbDWusaP/xlFZPKScU3qbxR8YmKSeWk4kRlqvibKiaVqWJSeUNlqjip+ITKScVUMal808Na6xoPa61rPKy1rvHDl6lMFZ9QmSomlTcqvkllqnhD5Y2KSeUTFScVk8pUcVJxovKGylRxovJGxaTyNz2sta7xsNa6xsNa6xo/fEjlDZWpYlKZKiaVqWJSmSpOVD5RcaJyUjGpnKicVEwqn1D5JpVPVEwqU8UbFZPKVPE3Pay1rvGw1rrGw1rrGj98qGJSOal4Q2WqOKmYVE4qTlSmiknljYpJ5TdVTCpvVEwqJyonFZPKicpUcaLyN6lMFZ94WGtd42GtdY2HtdY17A++SOWNijdUTio+ofJGxaQyVbyhMlVMKlPFpPKbKk5U3qj4hMpU8V/2sNa6xsNa6xoPa61r2B98QOWNijdUpoo3VKaKSeWkYlJ5o2JS+ZcqTlSmikllqphUvqliUvmXKiaVqeITD2utazysta7xsNa6hv3Bf5jKScWkclLxhspUcaIyVUwqJxVvqEwVJyonFTdRmSreUJkqJpWTim96WGtd42GtdY2HtdY1fviQyt9UMVVMKpPKVDGpvKEyVbxRcVIxqZyoTBUnKv+SyknFpPIJlanijYpJZVKZKj7xsNa6xsNa6xoPa61r/PBlFd+kcqJyUnFSMalMFVPFpHJS8YbKGxVvVEwqJxUnKlPFpHJScVIxqbxR8V/ysNa6xsNa6xoPa61r/PDLVN6o+ETFpDJVnFRMKlPFScWJylQxVUwqk8o3VUwqk8pJxUnFicpUMam8ofIJlaliqphUvulhrXWNh7XWNR7WWtf44f8ZlaliUnmj4o2KT1ScqJyonFRMKicqU8UbFScVJypvVEwqb6hMFd/0sNa6xsNa6xoPa61r/PD/nMpUMalMKm9UTCpTxRsqJxWTylRxojJVTConKicVk8onKj5R8QmVqeITD2utazysta7xsNa6hv3BB1Smim9SmSpOVKaKSeWNiknlpOI3qXyi4g2Vk4pJZaqYVE4qPqFyUjGpnFScqEwVn3hYa13jYa11jYe11jV++DKVv0llqvhExTepTBWTylRxUjGpTBUnKlPFpHJScVJxUjGpTCpTxYnKVPFNKn/Tw1rrGg9rrWs8rLWuYX+w1rrCw1rrGg9rrWs8rLWu8bDWusbDWusaD2utazysta7xsNa6xsNa6xoPa61rPKy1rvGw1rrGw1rrGg9rrWs8rLWu8X9n7NsBSg3V4AAAAABJRU5ErkJggg==',
+      //     },
+      //   },
+      // };
+      setFetchQR(false);
+      const _qrData: QrResponse = paymentResp?.data;
+      console.log('_qrData: ', _qrData);
+
+      if (_qrData.data.qrCode) {
+        setQrData(_qrData);
+        setRetryModal(false);
+        await setSharedPrefPaymentData(
+          paymentRefId,
+          // props.mergedObjectiveId,
+          {
+            paymentMode: props.paymentMode,
+            amount: {
+              value: props.expectedAmount,
+              currencyCode:
+                paymentConfigContext?.sdkConfig?.etConfig?.currencyCode || '',
+            },
+            // refId: paymentRefId,
+            moIds: props.mergedObjectiveId,
+          },
+          storage
+        );
+        await setSharedPrefPaymentSelection(paymentRefId, 'QR_CODE', storage);
+      } else if (_qrData.data.status === STATUS.SUCCESS) {
+        props.next({
+          paymentMode: props.paymentMode,
+          collectedAmount: {
+            value: props.expectedAmount,
+            currencyCode:
+              paymentConfigContext?.sdkConfig?.etConfig?.currencyCode || '',
+          },
+          refId: paymentRefId,
+          screen: PAYMENT_SCREEN.COMPLETE,
+          sourceScreen: PAYMENT_SCREEN.PROCESS,
+          ...(await getBaseETResponse(
+            EntityCode.COLLECT_PAYMENT_ET,
+            true,
+            getEventCodeByET(
+              ExecutionTaskID.COLLECT_PAYMENT_ET,
+              true,
+              props.applicableReasons?.success
+            ),
+            '',
+            props.mergedObjectiveId,
+            ExecutionTaskID.COLLECT_PAYMENT_ET
+          )),
+        });
+      } else {
+        setRetryModal(true);
+      }
+    } catch (err: any) {
+      Logger.getInstance().logEvent(
+        '~ fetchQrCode triggered ',
+        JSON.stringify(err?.response?.data || err),
+        LOG_TYPE.SDK_ERROR
+      );
+      console.error('QR Gen: ', JSON.stringify(err?.response?.data || err));
+      setFetchQR(false);
+      setRetryModal(true);
+    }
+  };
+
+  useEffect(() => {
+    fetchQrCode();
+  }, []);
+
+  const checkStatus = async () => {
+    sendClickEvent('CHECK_STATUS');
+    setStatusModal(true);
+    try {
+      const paymentResp =
+        await paymentConfigContext?.networkInstance.requestGet(
+          ENDPOINTS.PAYMENT_STATUS + paymentRefId,
+          {
+            requestId: 'payment:' + paymentRefId,
+          },
+          {
+            appAbbr: paymentConfigContext.sdkConfig.etConfig.appAbbr,
+            latest: true,
+          }
+        );
+      const _ps: PaymentStatusResponse = paymentResp?.data;
+
+      console.log('_ps qr: ', _ps);
+
+      if (
+        _ps.data.meta?.totalCount &&
+        _ps?.data.transactions?.length &&
+        _ps?.data.transactions[0].status === STATUS.SUCCESS
+      ) {
+        props.next({
+          paymentMode:
+            getPaymentType(_ps?.data.transactions[0].txnType) ||
+            props.paymentMode,
+          collectedAmount: {
+            value:
+              _ps?.data.transactions[0].money.amount || props.expectedAmount,
+            currencyCode:
+              _ps?.data.transactions[0].money.currency ||
+              paymentConfigContext?.sdkConfig?.etConfig?.currencyCode ||
+              '',
+          },
+          refId: paymentRefId,
+          screen: PAYMENT_SCREEN.COMPLETE,
+          sourceScreen: PAYMENT_SCREEN.PROCESS,
+          ...(await getBaseETResponse(
+            EntityCode.COLLECT_PAYMENT_ET,
+            true,
+            getEventCodeByET(
+              ExecutionTaskID.COLLECT_PAYMENT_ET,
+              true,
+              props.applicableReasons?.success
+            ),
+            '',
+            props.mergedObjectiveId,
+            ExecutionTaskID.COLLECT_PAYMENT_ET
+          )),
+        });
+      } else if (
+        _ps.data.meta?.totalCount &&
+        _ps?.data.transactions?.length &&
+        _ps?.data.transactions[0].status === STATUS.FAILED
+      ) {
+        /* await storage.removeSharedItems(
+          props.mergedObjectiveId.map((_id) => PAYMENT_SHARED_PREF_KEY + _id)
+        ); */
+        await removeSharedPrefPaymentData(paymentRefId, storage);
+        props.next({
+          paymentMode:
+            getPaymentType(_ps?.data.transactions[0].txnType) ||
+            props.paymentMode,
+          collectedAmount: {
+            value:
+              _ps?.data.transactions[0].money.amount || props.expectedAmount,
+            currencyCode:
+              _ps?.data.transactions[0].money.currency ||
+              paymentConfigContext?.sdkConfig?.etConfig?.currencyCode ||
+              '',
+          },
+          refId: paymentRefId,
+          screen: PAYMENT_SCREEN.COMPLETE,
+          sourceScreen: PAYMENT_SCREEN.PROCESS,
+          ...(await getBaseETResponse(
+            EntityCode.COLLECT_PAYMENT_ET,
+            false,
+            getEventCodeByET(
+              ExecutionTaskID.COLLECT_PAYMENT_ET,
+              false,
+              props.applicableReasons?.failure
+            ),
+            '',
+            props.mergedObjectiveId,
+            ExecutionTaskID.COLLECT_PAYMENT_ET
+          )),
+        });
+      }
+      setStatusModal(false);
+      setDisableStatusBtn(true);
+    } catch (err: any) {
+      Logger.getInstance().logEvent(
+        '~ checkStatus triggered ',
+        JSON.stringify(err?.response?.data || err),
+        LOG_TYPE.SDK_ERROR
+      );
+      console.error('Get Status QR: ', err?.response?.data || err);
+      setStatusModal(false);
+    }
+  };
+
+  return (
+    <>
+      <ProgressDialog
+        customModalContentStyle={{ paddingVertical: 40 }}
+        visible={showStatusModal}
+        label="Please wait while we are checking the status"
+        labelStyle={{
+          fontWeight: '400',
+          marginTop: 16,
+          fontFamily:
+            Platform.OS === 'android'
+              ? Fonts.IBMPlexSans_400Regular
+              : 'IBMPlexSans-Regular',
+          color: '#525B7A',
+        }}
+      />
+      {/* {!props.showGoBackModal ? ( */}
+      {fetchQR ? (
+        <ProgressDialog
+          visible={qrData ? false : true}
+          customModalContentStyle={{ paddingVertical: 40 }}
+          label="Generating QR Code"
+          labelStyle={{
+            fontWeight: '400',
+            marginTop: 16,
+            fontFamily:
+              Platform.OS === 'android'
+                ? Fonts.IBMPlexSans_400Regular
+                : 'IBMPlexSans-Regular',
+            color: '#3D445C',
+          }}
+        />
+      ) : showRetryModal ? (
+        <View
+          style={[
+            CommonStyles.mainContainer,
+            { justifyContent: 'center', alignItems: 'center' },
+          ]}
+        >
+          <View style={styles.flexCenter}>
+            <FailedIcon />
+            <Text style={[CommonStyles.titleText, { marginTop: 20 }]}>
+              QR Code Fetching Failed!
+            </Text>
+            <Text
+              style={[
+                CommonStyles.subText,
+                { marginHorizontal: 20, color: '#525B7A' },
+              ]}
+            >
+              Due to a technical issue, we are unable to fetch the QR Code
+            </Text>
+            <Button
+              style={[
+                CommonStyles.nextButton,
+                {
+                  marginEnd: 5,
+                  marginTop: 5,
+                  paddingBottom: 3,
+                },
+              ]}
+              labelStyle={{
+                ...CommonStyles.nextButtonLabel,
+                textTransform: 'capitalize',
+                fontSize: 14,
+              }}
+              mode={'outlined'}
+              onPress={fetchQrCode}
+            >
+              Retry
+            </Button>
+          </View>
+        </View>
+      ) : (
+        <>
+          <ScrollView style={CommonStyles.mainContainer}>
+            <View style={CommonStyles.mainContainer}>
+              <View style={{ alignItems: 'center', paddingTop: 25 }}>
+                <Text style={[CommonStyles.titleText, { fontSize: 18 }]}>
+                  Scan to pay
+                </Text>
+                <Text
+                  style={[
+                    styles.textStyle1,
+                    { color: '#3D445C', marginTop: 12 },
+                  ]}
+                >
+                  Total payable amount
+                </Text>
+                <Text
+                  style={[
+                    CommonStyles.titleText,
+                    {
+                      paddingBottom: 20,
+                      fontWeight: 'bold',
+                    },
+                  ]}
+                >
+                  {paymentConfigContext?.sdkConfig?.etConfig?.currencyCode +
+                    ' ' +
+                    props.expectedAmount}
+                </Text>
+                <Image
+                  style={{
+                    width: 300,
+                    height: 300,
+                    backgroundColor: 'transparent',
+                  }}
+                  source={{
+                    uri: qrData?.data.qrCode,
+                  }}
+                />
+                <View style={{ marginTop: 24 }}>
+                  <ActivityIndicator
+                    size="small"
+                    color="rgba(107, 142, 255, 1)"
+                    style={{ marginBottom: 10 }}
+                  />
+                  {/* <Timer
+                    onTimerEnd={() => props.setBackDisable(false)}
+                    ref={timerRef}
+                    timer={
+                      paymentConfigContext?.sdkConfig?.etConfig
+                        ?.goBackDisableTimer
+                    }
+                  /> */}
+                  <Text style={CommonStyles.subText}>
+                    Waiting for the payment confirmation
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </ScrollView>
+          <View style={{ padding: 10, borderWidth: 1, borderColor: '#E0E3EB' }}>
+            <Text style={CommonStyles.subText}>
+              Customer payment successful?
+            </Text>
+            <View
+              style={{
+                flexDirection: 'row',
+                marginStart: 10,
+                marginEnd: 10,
+              }}
+            >
+              <Button
+                style={[
+                  CommonStyles.nextButton,
+                  {
+                    marginEnd: 5,
+                    flex: 1,
+                  },
+                  disableStatusBtn
+                    ? {
+                        backgroundColor: '#E0E3EB',
+                      }
+                    : {},
+                ]}
+                labelStyle={[
+                  CommonStyles.nextButtonLabel,
+                  { textTransform: 'capitalize' },
+                  disableStatusBtn ? { color: '#A3AAC2' } : {},
+                ]}
+                mode={'outlined'}
+                onPress={checkStatus}
+                disabled={disableStatusBtn}
+              >
+                {disableStatusBtn ? (
+                  <>
+                    {'Check Status ('}
+                    <Timer
+                      ref={statusTimerRef}
+                      singleValue={true}
+                      timer={5}
+                      onTimerEnd={() => setDisableStatusBtn(false)}
+                    />
+                    {' sec)'}
+                  </>
+                ) : (
+                  'Check Status'
+                )}
+              </Button>
+            </View>
+          </View>
+        </>
+      )}
+      {/* ) : null} */}
+    </>
+  );
+};
+
+const PaymentLink = (
+  props: CollectPaymentInput &
+    ProcessPaymentInput & {
+      setBackDisable: (data: boolean) => void;
+    }
+) => {
+  const paymentConfigContext = useContext(PaymentContext);
+  const [showStatusModal, setStatusModal] = useState(false);
+  const [disableStatusBtn, setDisableStatusBtn] = useState(true);
+  const [snackBar, setSnackBar] = useState({
+    show: false,
+    type: SnackBarType.SUCCESS,
+    message: '',
+  });
+  const [isTimerActive, setIsTimerActive] = useState(true);
+  const timerRef: any = useRef();
+  const statusTimerRef: any = useRef();
+
+  const paymentRefId =
+    props.route.params[RouteParams.ROOT_META_DATA].paymentConfig?.paymentRefId;
+
+  const sendClickEvent = (
+    event: 'SEND_LINK' | 'RESEND_LINK' | 'CHECK_STATUS'
+  ) => {
+    let param: PaymentEventDataInterface = {
+      refId: paymentRefId,
+      money: {
+        amount: props.expectedAmount,
+        currency: paymentConfigContext?.sdkConfig?.etConfig?.currencyCode || '',
+      },
+      contactDetails: props.contactDetails,
+      paymentLink: getPaymentLink(
+        paymentConfigContext?.sdkConfig.env || 'DEV',
+        paymentConfigContext?.sdkConfig.tenantID || '',
+        paymentConfigContext?.sdkConfig.etConfig.appAbbr || '',
+        paymentRefId
+      ),
+    };
+    if (event === 'CHECK_STATUS') {
+      delete param.contactDetails;
+      delete param.paymentLink;
+    }
+    onClickEvent(
+      event,
+      props.route.params[RouteParams.NEXT_STATES],
+      props.route.params[RouteParams.ROOT_META_DATA].customEventsData,
+      param
+    );
+  };
+
+  const sendPaymentLink = (event: 'SEND_LINK' | 'RESEND_LINK') => {
+    sendClickEvent(event);
+    setSnackBar({
+      show: true,
+      message: 'Payment link sent successfully!',
+      type: SnackBarType.SUCCESS,
+    });
+    if (event === 'RESEND_LINK') {
+      setDisableStatusBtn(true);
+      statusTimerRef?.current?.resetTimer();
+      timerRef?.current?.resetTimer();
+      setIsTimerActive(true);
+      props.setBackDisable(true);
+    }
+  };
+
+  useEffect(() => {
+    (async () => {
+      await setSharedPrefPaymentData(
+        paymentRefId,
+        // props.mergedObjectiveId,
+        {
+          paymentMode: props.paymentMode,
+          amount: {
+            value: props.expectedAmount,
+            currencyCode:
+              paymentConfigContext?.sdkConfig?.etConfig?.currencyCode || '',
+          },
+          // refId: paymentRefId,
+          moIds: props.mergedObjectiveId,
+        },
+        storage
+      );
+      await setSharedPrefPaymentSelection(
+        paymentRefId,
+        'PAYMENT_LINK',
+        storage
+      );
+      sendPaymentLink('SEND_LINK');
+    })();
+  }, []);
+
+  const checkStatus = async () => {
+    sendClickEvent('CHECK_STATUS');
+    try {
+      setStatusModal(true);
+      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.QRCODE,
+      //           appAbbr: 'testApp31',
+      //         },
+      //       ],
+      //     },
+      //   },
+      // };
+      const _ps: PaymentStatusResponse = paymentResp?.data;
+
+      console.log('_ps pl: ', JSON.stringify(_ps));
+
+      if (
+        _ps.data.meta?.totalCount &&
+        _ps?.data.transactions?.length &&
+        _ps?.data.transactions[0].status === STATUS.SUCCESS
+      ) {
+        props.next({
+          paymentMode:
+            getPaymentType(_ps?.data.transactions[0].txnType) ||
+            props.paymentMode,
+          collectedAmount: {
+            value:
+              _ps?.data.transactions[0].money.amount || props.expectedAmount,
+            currencyCode:
+              _ps?.data.transactions[0].money.currency ||
+              paymentConfigContext?.sdkConfig?.etConfig?.currencyCode ||
+              '',
+          },
+          refId: paymentRefId,
+          screen: PAYMENT_SCREEN.COMPLETE,
+          sourceScreen: PAYMENT_SCREEN.PROCESS,
+          ...(await getBaseETResponse(
+            EntityCode.COLLECT_PAYMENT_ET,
+            true,
+            getEventCodeByET(
+              ExecutionTaskID.COLLECT_PAYMENT_ET,
+              true,
+              props.applicableReasons?.success
+            ),
+            '',
+            props.mergedObjectiveId,
+            ExecutionTaskID.COLLECT_PAYMENT_ET
+          )),
+        });
+      } else if (
+        _ps.data.meta?.totalCount &&
+        _ps?.data.transactions?.length &&
+        _ps?.data.transactions[0].status === STATUS.FAILED
+      ) {
+        /* await storage.removeSharedItems(
+          props.mergedObjectiveId.map((_id) => PAYMENT_SHARED_PREF_KEY + _id)
+        ); */
+        await removeSharedPrefPaymentData(paymentRefId, storage);
+        props.next({
+          paymentMode:
+            getPaymentType(_ps?.data.transactions[0].txnType) ||
+            props.paymentMode,
+          collectedAmount: {
+            value:
+              _ps?.data.transactions[0].money.amount || props.expectedAmount,
+            currencyCode:
+              _ps?.data.transactions[0].money.currency ||
+              paymentConfigContext?.sdkConfig?.etConfig?.currencyCode ||
+              '',
+          },
+          refId: paymentRefId,
+          screen: PAYMENT_SCREEN.COMPLETE,
+          sourceScreen: PAYMENT_SCREEN.PROCESS,
+          ...(await getBaseETResponse(
+            EntityCode.COLLECT_PAYMENT_ET,
+            false,
+            getEventCodeByET(
+              ExecutionTaskID.COLLECT_PAYMENT_ET,
+              false,
+              props.applicableReasons?.failure
+            ),
+            '',
+            props.mergedObjectiveId,
+            ExecutionTaskID.COLLECT_PAYMENT_ET
+          )),
+        });
+      }
+      setStatusModal(false);
+      setDisableStatusBtn(true);
+    } catch (err: any) {
+      Logger.getInstance().logEvent(
+        '~ checkStatus1 triggered ',
+        JSON.stringify(err?.response?.data || err),
+        LOG_TYPE.SDK_ERROR
+      );
+      console.log('Check status pl: ', err?.response?.data || err);
+      setStatusModal(false);
+    }
+  };
+
+  return (
+    <>
+      <ProgressDialog
+        customModalContentStyle={{ paddingVertical: 40 }}
+        visible={showStatusModal}
+        label="Please wait while we are checking the payment status"
+        labelStyle={{
+          fontWeight: '400',
+          fontFamily:
+            Platform.OS === 'android'
+              ? Fonts.IBMPlexSans_400Regular
+              : 'IBMPlexSans-Regular',
+          color: '#3D445C',
+        }}
+      />
+      {
+        <>
+          <SnackBarCustom
+            type={snackBar.type}
+            message={`${snackBar.message}`}
+            visible={snackBar.show}
+            onDismiss={() => {
+              setSnackBar({
+                show: false,
+                message: '',
+                type: SnackBarType.SUCCESS,
+              });
+            }}
+            customTop={0}
+          />
+          <View
+            style={[
+              CommonStyles.mainContainer,
+              { justifyContent: 'center', alignItems: 'center' },
+            ]}
+          >
+            <View style={styles.flexCenter}>
+              {!isTimerActive ? (
+                <View style={[styles.paymentWaitIcon, { marginBottom: 20 }]}>
+                  <MaterialIcon
+                    size={64}
+                    name="clock-time-nine-outline"
+                    color="#3D445C"
+                  />
+                </View>
+              ) : (
+                <ActivityIndicator
+                  size="large"
+                  color="#3D445C"
+                  style={{ marginBottom: 20 }}
+                />
+              )}
+              <Timer
+                onTimerEnd={() => {
+                  setIsTimerActive(false);
+                  props.setBackDisable(false);
+                }}
+                ref={timerRef}
+                timer={
+                  paymentConfigContext?.sdkConfig?.etConfig?.goBackDisableTimer
+                }
+              />
+
+              <Text style={[CommonStyles.titleText]}>Waiting for payment!</Text>
+              <Text style={[CommonStyles.subText, { marginHorizontal: 30 }]}>
+                Please wait for the customer to make the payment
+              </Text>
+            </View>
+          </View>
+          <View style={{ padding: 10, borderWidth: 1, borderColor: '#E0E3EB' }}>
+            <View
+              style={{
+                flexDirection: 'row',
+                marginStart: 10,
+                marginEnd: 10,
+              }}
+            >
+              <Button
+                style={[
+                  CommonStyles.cancelButton,
+                  {
+                    marginEnd: 5,
+                    flex: 1,
+                  },
+                ]}
+                labelStyle={{
+                  ...CommonStyles.cancelButtonLabel,
+                  color: '#5B80F7',
+                  textTransform: 'capitalize',
+                  fontSize: 11,
+                }}
+                mode={'outlined'}
+                onPress={() => sendPaymentLink('RESEND_LINK')}
+              >
+                Resend Payment Link
+              </Button>
+              <Button
+                style={[
+                  CommonStyles.nextButton,
+                  {
+                    marginEnd: 5,
+                    flex: 1,
+                  },
+                  disableStatusBtn
+                    ? {
+                        backgroundColor: '#E0E3EB',
+                      }
+                    : {},
+                ]}
+                labelStyle={[
+                  CommonStyles.nextButtonLabel,
+                  { textTransform: 'capitalize' },
+                  disableStatusBtn ? { color: '#A3AAC2' } : {},
+                ]}
+                mode={'outlined'}
+                onPress={checkStatus}
+                disabled={disableStatusBtn}
+              >
+                {disableStatusBtn ? (
+                  <>
+                    {'Check Status ('}
+                    <Timer
+                      ref={statusTimerRef}
+                      singleValue={true}
+                      timer={5}
+                      onTimerEnd={() => setDisableStatusBtn(false)}
+                    />
+                    {' sec)'}
+                  </>
+                ) : (
+                  'Check Status'
+                )}
+              </Button>
+            </View>
+          </View>
+        </>
+      }
+    </>
+  );
+};
+
+interface StyleSheetType {
+  modalContent: ViewStyle;
+  modalView: ViewStyle;
+  titleText: TextStyle;
+  subTitleText: TextStyle;
+}
+
+const modalStyles = StyleSheet.create<StyleSheetType>({
+  modalContent: {
+    marginStart: 55,
+    marginEnd: 55,
+    marginBottom: 60,
+    flex: 1,
+  },
+  modalView: {
+    backgroundColor: 'white',
+    padding: 15,
+    borderRadius: 9,
+  },
+  titleText: {
+    justifyContent: 'center',
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_600SemiBold
+        : 'IBMPlexSans-SemiBold',
+    fontStyle: 'normal',
+    fontSize: 14,
+    lineHeight: 20,
+    textAlign: 'center',
+    color: '#111111',
+    marginBottom: 10,
+  },
+  subTitleText: {
+    justifyContent: 'center',
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    fontStyle: 'normal',
+    fontSize: 14,
+    lineHeight: 20,
+    color: '#000000',
+    marginBottom: 10,
+  },
+});