@os1-platform/dispatch-mobile 3.0.4 → 3.1.1

package/lib/module/components/executiontasks/validateOTP/ValidateOTPET.js

@@ -1,354 +1,544 @@
-import { View, Text, StyleSheet, BackHandler, Platform } from 'react-native';
-import React, { useState, useLayoutEffect } from 'react';
-import { Button, Provider } from 'react-native-paper';
-import { SvgXml } from 'react-native-svg';
-import OTPInput from './sub-components/OTPInput';
-import useTimer from '../../../utils/hooks/useTimer';
-import { CommonStyles, Fonts } from '../../../styles/executionTasks/CommonStyles';
-import { generateOTP, parseRetryConfig } from './utils';
-import { checkForValidation } from './utils';
-import { ERROR_GENERATING_OTP, INVALID_OTP, INVALID_OTP_LENGTH, mobileSVG } from './constants';
-import { EntityCode, ExecutionTaskID } from '../../../models/execTasks/ETConfig';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react-native/no-inline-styles */
+// External Libraries
+import React, { useState, useLayoutEffect, useEffect, useContext } from 'react';
+import { View, Text, Platform } from 'react-native';
+
+// UI Libraries and Icons
+import { ActivityIndicator, Button, Portal, Provider } from 'react-native-paper';
+
+// Utility Functions and Hooks
 import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
+import { hasGoBackConnector } from '../../../components/utils';
+import { countType, generateOTP, getCount, parseResendConfig, updateResendCount, updateRetryCount, VALIDATE_OTP_SCREENS, verifyOTP } from './utils';
+
+// Dispatch Codes and Models
 import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
-import SnackBarCustom, { SnackBarType } from '../../../components/widgets/SnackBarCustom';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import { EntityCode, ExecutionTaskID } from '../../../models/execTasks/ETConfig';
+import { ValidateOTPContext } from '../../../utils/context/valdiateOTPContext';
+
+// Schema and Types
+import { InputType, OtpDeliveryMethodTypes, ValidationType } from './ValidateOTPSchema';
+
+// Constants
 import { GO_BACK_EVENT_CODE } from '../../../constants/constants';
-import { hasGoBackConnector } from '../../../components/utils';
+import { ERROR_GENERATING_OTP, ERROR_VALIDATE_OTP, INVALID_OTP, INVALID_OTP_LENGTH, INVALID_OTP_ONE_ATTEMPT_LEFT, OTP_SENT_SUCCESSFULLY, UNABLE_TO_SEND_OTP } from './constants';
+
+// Components
+import SnackBarCustom, { SnackBarType } from '../../../components/widgets/SnackBarCustom';
 import GoBackModal from '../../../components/widgets/GoBackModal';
-import { useFocusEffect } from '@react-navigation/native';
+import ConfirmCancelModal from '../../../components/widgets/ConfirmCancelModal';
+import { OTPView } from './components/OTPView';
+import { ContactListView } from './components/ContactListView';
+import VerificationComplete from './components/VerificationComplete';
+import ProgressDialog from '../../widgets/ProgressDialog';
+
+// Styles
+import styles from './ValidateOtpStyles';
+import { CommonStyles, Fonts } from '../../../styles/executionTasks/CommonStyles';
+
+// Analytics
 import { ScreenNameSdkConstants, SentryEventNameSdkConstants, SeverityLevelValue } from '../../../analytics/sentry/SentrySdkConstants';
 import { fireEventWithScreenName } from '../../../analytics/sentry/SentryAnalyticsUtils';
 const ValidateOTPET = props => {
-  var _props$generationLogi, _props$generationLogi2;
-  const [showBackModal, setShowBackModal] = useState(false);
+  var _validateConfigContex;
+  const {
+    contacts,
+    navigation
+  } = props;
+  // Context
+  const validateConfigContext = useContext(ValidateOTPContext);
+  const domain = (validateConfigContext === null || validateConfigContext === void 0 || (_validateConfigContex = validateConfigContext.sdkConfig) === null || _validateConfigContex === void 0 ? void 0 : _validateConfigContex.validateOtpDomain) ?? '';
 
-  // Handle back-button click
-  useFocusEffect(React.useCallback(() => {
-    const onBackPress = () => {
-      var _props$taskMeta;
-      if ((_props$taskMeta = props.taskMeta) !== null && _props$taskMeta !== void 0 && _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 /*#__PURE__*/React.createElement(Icon, {
-          onPress: () => {
-            var _props$taskMeta2;
-            if ((_props$taskMeta2 = props.taskMeta) !== null && _props$taskMeta2 !== void 0 && _props$taskMeta2.enableGoBack && hasGoBackConnector(props.applicableReasons)) setShowBackModal(true);else props.navigation.goBack();
-            const cta = 'Arrow Back';
-            fireEventWithScreenName({
-              severityLevel: SeverityLevelValue.LOG,
-              eventName: SentryEventNameSdkConstants.BUTTON_CLICKED,
-              screenName: ScreenNameSdkConstants.VALIDATE_OTP_ET_SCREEN,
-              cta: cta
-            });
-          },
-          name: "arrow-back",
-          color: 'black',
-          size: 25,
-          style: {
-            paddingRight: 15,
-            paddingTop: 5
-          }
-        });
-      }
-    });
-  }, [props.navigation, props.title]);
-  const retryConfig = parseRetryConfig((_props$generationLogi = props.generationLogic) === null || _props$generationLogi === void 0 ? void 0 : _props$generationLogi.retryConfig);
-  const initialMinute = Math.floor(retryConfig.delay / 60);
-  const initialSeconds = parseInt((retryConfig.delay % 60).toFixed(0));
-  const [timer, resetTimer] = useTimer({
-    initialMinute,
-    initialSeconds
-  });
-  const [sendOTP, setSendOTP] = useState(Boolean((_props$generationLogi2 = props.generationLogic) === null || _props$generationLogi2 === void 0 ? void 0 : _props$generationLogi2.generateOnLoad));
-  const [retryCount, setRetryCount] = useState(0);
+  // Configurations
+  const resendConfig = parseResendConfig(props.resendOTP);
+  const otpInputConfig = {
+    inputType: props.inputType || InputType.NUMBER,
+    length: props.otpLength || 6,
+    validationRegex: `^[0-9]+$`
+  };
+
+  // State: Contact Management
+  const [contactList, setContactList] = useState(contacts);
+  const [selectedContact, setSelectedContact] = useState(contactList[0] || null);
+  const [isContactVisited, setIsContactVisited] = useState(props.doorstepOTP);
+
+  // State: OTP Handling
   const [userInput, setUserInput] = useState({
     captureInput: ''
   });
   const {
     captureInput: otpCode
   } = userInput;
-  const setOTPCode = otpCode => {
+  const setOTPCode = code => {
     setUserInput({
       ...userInput,
-      captureInput: otpCode
+      captureInput: code
     });
   };
+  const [retryCount, setRetryCount] = useState(0);
+  const [resendCount, setResendCount] = useState(0);
+  const [disableProceedBtn, setDisableProceedBtn] = useState(false);
+
+  // State: UI and Navigation
+  const [showBackModal, setShowBackModal] = useState(false);
+  const [showCancelModal, setShowCancelModal] = useState(false);
+  const [loading, setLoading] = useState(false);
   const [hasError, setHasError] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [shouldNavigateBack, setShouldNavigateBack] = useState(false);
+  const [currentScreen, setCurrentScreen] = useState(props.doorstepOTP ? VALIDATE_OTP_SCREENS.CONTACT_LIST : VALIDATE_OTP_SCREENS.OTP_VIEW);
+
+  // State: SnackBar
   const [snackBar, setSnackBar] = useState({
     show: false,
-    type: SnackBarType.SUCCESS,
+    type: SnackBarType.OTP_SUCCESS,
     message: ''
   });
-  const renderButtons = () => {
-    return /*#__PURE__*/React.createElement(View, {
-      style: styles.bottomView
-    }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Button, {
-      style: [CommonStyles.nextButton, {
-        width: 165,
-        marginStart: 10
-      }],
-      labelStyle: CommonStyles.nextButtonLabel,
-      mode: 'contained',
-      uppercase: false,
-      onPress: async () => {
-        var _props$generationLogi3;
-        // send OTP Generation using props
-        if (sendOTP && props.generationLogic && (_props$generationLogi3 = props.generationLogic) !== null && _props$generationLogi3 !== void 0 && _props$generationLogi3.generateOnLoad) {
-          const response = await generateOTP(props.generationLogic.api);
-          resetTimer();
-          if (response) setSendOTP(false);else setSnackBar({
+  useEffect(() => {
+    const fetchCounts = async () => {
+      // eslint-disable-next-line no-shadow
+      const retryCount = await getCount(countType.RETRY);
+      // eslint-disable-next-line no-shadow
+      const resendCount = await getCount(countType.RESEND);
+      setRetryCount(retryCount);
+      setResendCount(resendCount);
+    };
+    fetchCounts();
+  }, []);
+
+  // TO hide header for modal screen
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      // headerShown: loading ? false : true,
+      headerStyle: {
+        display: loading ? 'none' : 'flex' // Hide the header by setting its display to 'none'
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loading]);
+  useEffect(() => {
+    if (currentScreen === VALIDATE_OTP_SCREENS.OTP_VIEW) {
+      setDisableProceedBtn((otpCode === null || otpCode === void 0 ? void 0 : otpCode.length) !== otpInputConfig.length || !selectedContact || hasError);
+    } else {
+      setDisableProceedBtn(!selectedContact);
+    }
+  }, [currentScreen, hasError, otpCode === null || otpCode === void 0 ? void 0 : otpCode.length, otpInputConfig.length, selectedContact]);
+  useEffect(() => {
+    if (!contacts) return;
+
+    // Filter contacts based on the delivery method, or use all contacts if BOTH
+    const filteredContacts = contacts.filter(contact => {
+      var _contact$mode, _props$otpDeliveryMet;
+      return props.otpDeliveryMethod === OtpDeliveryMethodTypes.BOTH ? true : ((_contact$mode = contact.mode) === null || _contact$mode === void 0 ? void 0 : _contact$mode.toLowerCase()) === ((_props$otpDeliveryMet = props.otpDeliveryMethod) === null || _props$otpDeliveryMet === void 0 ? void 0 : _props$otpDeliveryMet.toLowerCase());
+    }).map((contact, index) => ({
+      ...contact,
+      isSelected: index === 0 // Select the first contact by default
+    }));
+
+    // Update the state with the filtered contacts
+    setContactList(filteredContacts);
+    if (props.doorstepOTP) {
+      setSelectedContact(filteredContacts[0]);
+    }
+  }, [contacts, props.doorstepOTP, props.otpDeliveryMethod]);
+
+  // Monitor shouldNavigateBack to trigger navigation if set
+  useEffect(() => {
+    if (shouldNavigateBack) {
+      navigation.goBack();
+      setOTPCode('');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigation, shouldNavigateBack]);
+  const handleBackNavigation = () => {
+    var _props$taskMeta;
+    if ((_props$taskMeta = props.taskMeta) !== null && _props$taskMeta !== void 0 && _props$taskMeta.enableGoBack && hasGoBackConnector(props.applicableReasons)) {
+      setShowBackModal(true);
+    } else {
+      setShouldNavigateBack(true);
+    }
+    return true;
+  };
+  const onProceedCancel = async () => {
+    var _props$applicableReas;
+    // Cancel the ET
+    props.onSubmitET({
+      ...(await getBaseETResponse(EntityCode.VALIDATE_OTP_ET, false, getEventCodeByET(ExecutionTaskID.VALIDATE_OTP_ET, false, (_props$applicableReas = props.applicableReasons) === null || _props$applicableReas === void 0 ? void 0 : _props$applicableReas.failure), '', props.mergedObjectiveId, ExecutionTaskID.VALIDATE_OTP_ET)),
+      retryCount: retryCount
+    });
+    const cta = 'Cancel';
+    fireEventWithScreenName({
+      severityLevel: SeverityLevelValue.LOG,
+      eventName: SentryEventNameSdkConstants.BUTTON_CLICKED,
+      screenName: ScreenNameSdkConstants.VALIDATE_OTP_ET_SCREEN,
+      cta: cta
+    });
+  };
+  const handleContactListProceed = async () => {
+    try {
+      var _props$orderData$, _props$orderData, _response$data3, _response$additionalI;
+      setSnackBar({
+        show: false,
+        message: '',
+        type: SnackBarType.OTP_SUCCESS
+      });
+      setLoading(true);
+      const payload = {
+        jobId: (_props$orderData$ = props.orderData[0]) === null || _props$orderData$ === void 0 ? void 0 : _props$orderData$.jobId,
+        refId: props.refId,
+        objectiveId: props.workflowId,
+        contactInfo: {
+          id: selectedContact.id,
+          mode: selectedContact.mode,
+          type: selectedContact.type,
+          index: selectedContact.index
+        },
+        meta: {
+          orderIds: (_props$orderData = props.orderData) === null || _props$orderData === void 0 ? void 0 : _props$orderData.map(order => {
+            var _order$displayInfo;
+            return order === null || order === void 0 || (_order$displayInfo = order.displayInfo) === null || _order$displayInfo === void 0 ? void 0 : _order$displayInfo.orderId;
+          })
+        }
+      };
+      const response = await generateOTP(payload, {
+        ...props,
+        domain
+      });
+      if (!(response !== null && response !== void 0 && response.status)) {
+        if (!response.status && (response === null || response === void 0 ? void 0 : response.code) === '101080001017') {
+          var _response$data;
+          setCurrentScreen(VALIDATE_OTP_SCREENS.OTP_VIEW);
+          setLoading(false);
+          setSnackBar({
             show: true,
-            message: ERROR_GENERATING_OTP,
-            type: SnackBarType.FAILURE
+            message: (response === null || response === void 0 || (_response$data = response.data) === null || _response$data === void 0 || (_response$data = _response$data.result) === null || _response$data === void 0 ? void 0 : _response$data.message) || UNABLE_TO_SEND_OTP,
+            type: SnackBarType.OTP_FAILED
+          });
+        } else {
+          var _response$data2;
+          setLoading(false);
+          setSnackBar({
+            show: true,
+            message: (response === null || response === void 0 || (_response$data2 = response.data) === null || _response$data2 === void 0 || (_response$data2 = _response$data2.result) === null || _response$data2 === void 0 ? void 0 : _response$data2.message) || ERROR_GENERATING_OTP,
+            type: SnackBarType.OTP_FAILED
           });
         }
-        // check for Validation
-        else if (!sendOTP) {
-          if (otpCode.length < props.captureInput.length) {
-            setSnackBar({
-              show: true,
-              message: INVALID_OTP_LENGTH.replace('<length>', `${props.captureInput.length}`),
-              type: SnackBarType.FAILURE
-            });
-          } else {
-            const isValid = await checkForValidation(otpCode, props.validation, {
-              userInput
-            });
-            if (!isValid) {
-              setErrorMessage(INVALID_OTP);
-              setHasError(true);
-            } else {
-              var _props$applicableReas;
-              props.onSubmitET({
-                ...(await getBaseETResponse(EntityCode.VALIDATE_OTP_ET, true, getEventCodeByET(ExecutionTaskID.VALIDATE_OTP_ET, true, (_props$applicableReas = props.applicableReasons) === null || _props$applicableReas === void 0 ? void 0 : _props$applicableReas.success), '', props.mergedObjectiveId, ExecutionTaskID.VALIDATE_OTP_ET))
-              });
-            }
-          }
-        }
-        const cta = 'Proceed';
-        fireEventWithScreenName({
-          severityLevel: SeverityLevelValue.LOG,
-          eventName: SentryEventNameSdkConstants.BUTTON_CLICKED,
-          screenName: ScreenNameSdkConstants.VALIDATE_OTP_ET_SCREEN,
-          cta: cta
+        return;
+      }
+      const resendCountValue = Number((response === null || response === void 0 || (_response$data3 = response.data) === null || _response$data3 === void 0 || (_response$data3 = _response$data3.result) === null || _response$data3 === void 0 ? void 0 : _response$data3.resendCount) || (response === null || response === void 0 || (_response$additionalI = response.additionalInfo) === null || _response$additionalI === void 0 ? void 0 : _response$additionalI.resendOTP)) || 0;
+      setResendCount(resendCountValue);
+      await updateResendCount(resendCountValue);
+      setCurrentScreen(VALIDATE_OTP_SCREENS.OTP_VIEW);
+      setLoading(false);
+      setSnackBar({
+        show: true,
+        message: OTP_SENT_SUCCESSFULLY,
+        type: SnackBarType.OTP_SUCCESS
+      });
+    } catch (error) {
+      setLoading(false);
+      console.error('Error in handleContactListProceed:', error);
+      setSnackBar({
+        show: true,
+        message: ERROR_GENERATING_OTP,
+        type: SnackBarType.OTP_FAILED
+      });
+    }
+  };
+  const handleOTPViewProceed = async () => {
+    var _props$otpValidation, _ValidationType$ONLIN, _response$result, _response$additionalI2;
+    if (otpCode.length < props.otpLength) {
+      // Show error if OTP length is invalid
+      setSnackBar({
+        show: true,
+        message: INVALID_OTP_LENGTH.replace('<length>', `${props.otpLength}`),
+        type: SnackBarType.OTP_FAILED
+      });
+      return;
+    }
+    const payload = {
+      refId: props.refId,
+      otp: otpCode
+    };
+    const isOnlineValidation = props !== null && props !== void 0 && props.otpValidation ? (props === null || props === void 0 || (_props$otpValidation = props.otpValidation) === null || _props$otpValidation === void 0 || (_props$otpValidation = _props$otpValidation.toString()) === null || _props$otpValidation === void 0 ? void 0 : _props$otpValidation.toLowerCase()) === ((_ValidationType$ONLIN = ValidationType.ONLINE) === null || _ValidationType$ONLIN === void 0 || (_ValidationType$ONLIN = _ValidationType$ONLIN.toString()) === null || _ValidationType$ONLIN === void 0 ? void 0 : _ValidationType$ONLIN.toLowerCase()) : true;
+    const response = isOnlineValidation ? await verifyOTP(payload, {
+      ...props,
+      domain
+    }) : otpCode === props.offlineOtpValue;
+    const retryCountValue = Number((response === null || response === void 0 || (_response$result = response.result) === null || _response$result === void 0 ? void 0 : _response$result.retryCount) || (response === null || response === void 0 || (_response$additionalI2 = response.additionalInfo) === null || _response$additionalI2 === void 0 ? void 0 : _response$additionalI2.retryCount)) || retryCount + 1;
+    if (response === false || (response === null || response === void 0 ? void 0 : response.status) === false || !response) {
+      setOTPCode('');
+      setRetryCount(retryCountValue);
+      await updateRetryCount(retryCountValue);
+      if (props.maxRetries - retryCountValue === 1) {
+        setSnackBar({
+          show: true,
+          message: INVALID_OTP_ONE_ATTEMPT_LEFT,
+          type: SnackBarType.OTP_FAILED
+        });
+      } else if (retryCountValue >= props.maxRetries) {
+        setSuccess(false);
+        setSnackBar({
+          show: false,
+          message: '',
+          type: SnackBarType.OTP_SUCCESS
+        });
+        setLoading(true);
+        setTimeout(() => {
+          setCurrentScreen(VALIDATE_OTP_SCREENS.VERIFICATION_COMPLETE);
+          setLoading(false);
+        }, 1000);
+      } else {
+        setSnackBar({
+          show: true,
+          message: INVALID_OTP.replace('<length>', `${props.maxRetries - retryCountValue}`),
+          type: SnackBarType.OTP_FAILED
         });
       }
-    }, "Proceed")), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Button, {
-      style: [CommonStyles.cancelButton, {
-        width: 165,
-        marginEnd: 10
-      }],
-      labelStyle: CommonStyles.cancelButtonLabel,
-      mode: 'outlined',
-      uppercase: false,
-      onPress: async () => {
-        var _props$applicableReas2;
-        // Cancel the ET
-        props.onSubmitET({
-          ...(await getBaseETResponse(EntityCode.VALIDATE_OTP_ET, false, getEventCodeByET(ExecutionTaskID.VALIDATE_OTP_ET, false, (_props$applicableReas2 = props.applicableReasons) === null || _props$applicableReas2 === void 0 ? void 0 : _props$applicableReas2.failure), '', props.mergedObjectiveId, ExecutionTaskID.VALIDATE_OTP_ET))
+    } else {
+      setSuccess(true);
+      setSnackBar({
+        show: false,
+        message: '',
+        type: SnackBarType.OTP_SUCCESS
+      });
+      setLoading(true);
+      setTimeout(() => {
+        setCurrentScreen(VALIDATE_OTP_SCREENS.VERIFICATION_COMPLETE);
+        setLoading(false);
+      }, 1000);
+    }
+  };
+  const onProceed = async () => {
+    try {
+      if (currentScreen === VALIDATE_OTP_SCREENS.CONTACT_LIST) {
+        handleContactListProceed();
+      } else {
+        handleOTPViewProceed();
+      }
+      const cta = 'Proceed';
+      fireEventWithScreenName({
+        severityLevel: SeverityLevelValue.LOG,
+        eventName: SentryEventNameSdkConstants.BUTTON_CLICKED,
+        screenName: ScreenNameSdkConstants.VALIDATE_OTP_ET_SCREEN,
+        cta: cta
+      });
+    } catch (error) {
+      setLoading(false);
+      if (currentScreen === VALIDATE_OTP_SCREENS.CONTACT_LIST) {
+        setSnackBar({
+          show: true,
+          message: ERROR_GENERATING_OTP,
+          type: SnackBarType.OTP_FAILED
         });
-        const cta = 'Skip';
-        fireEventWithScreenName({
-          severityLevel: SeverityLevelValue.LOG,
-          eventName: SentryEventNameSdkConstants.BUTTON_CLICKED,
-          screenName: ScreenNameSdkConstants.VALIDATE_OTP_ET_SCREEN,
-          cta: cta
+      }
+      if (currentScreen === VALIDATE_OTP_SCREENS.OTP_VIEW) {
+        setSnackBar({
+          show: true,
+          message: ERROR_VALIDATE_OTP,
+          type: SnackBarType.OTP_FAILED
         });
       }
-    }, "Skip")));
+    }
+    return;
   };
-  const renderRetryButton = () => {
-    var _props$generationLogi4;
-    const generationLogic = props.generationLogic;
-    const enableRetry = (_props$generationLogi4 = props.generationLogic) === null || _props$generationLogi4 === void 0 ? void 0 : _props$generationLogi4.enableRetry;
-    if (generationLogic && enableRetry) {
-      return /*#__PURE__*/React.createElement(View, {
-        style: styles.retryButton
-      }, /*#__PURE__*/React.createElement(Button, {
-        disabled: Boolean(timer) || retryCount === retryConfig.maxAttempt,
-        uppercase: false,
-        onPress: async () => {
-          setOTPCode('');
-          setRetryCount(retryCount => retryCount + 1);
-          await generateOTP(generationLogic.api);
-          resetTimer();
-          const cta = retryConfig.buttonTitle;
-          fireEventWithScreenName({
-            severityLevel: SeverityLevelValue.LOG,
-            eventName: SentryEventNameSdkConstants.BUTTON_CLICKED,
-            screenName: ScreenNameSdkConstants.VALIDATE_OTP_ET_SCREEN,
-            cta: cta
-          });
-        }
-      }, `${retryConfig.buttonTitle} ${timer ? `in ${timer}` : ''}`));
-    } else return null;
+  const onCancelET = () => {
+    setShowCancelModal(true);
   };
-  const renderErrorMessage = () => {
-    return errorMessage ? /*#__PURE__*/React.createElement(Text, {
-      style: styles.errorMessage
-    }, errorMessage) : null;
+  const handleSelectContact = contactDetails => {
+    setSelectedContact(contactDetails);
+    setContactList(prevContactList => prevContactList.map(contact => ({
+      ...contact,
+      isSelected: (contact === null || contact === void 0 ? void 0 : contact.value) === contactDetails.value
+    })));
   };
-  const renderModal = () => {
+
+  // *Rendering components*
+  const renderGoBackModal = () => {
     return /*#__PURE__*/React.createElement(GoBackModal, {
       showModal: showBackModal,
       setShowModal: setShowBackModal,
       onSuccess: async () => {
         props.onSubmitET({
-          ...(await getBaseETResponse(EntityCode.VALIDATE_OTP_ET, false, GO_BACK_EVENT_CODE, '', props.mergedObjectiveId, ExecutionTaskID.VALIDATE_OTP_ET))
+          ...(await getBaseETResponse(EntityCode.VALIDATE_OTP_ET, false, GO_BACK_EVENT_CODE, '', props.mergedObjectiveId, ExecutionTaskID.VALIDATE_OTP_ET)),
+          retryCount: retryCount
         });
         setShowBackModal(false);
       },
       onFailure: () => setShowBackModal(false)
     });
   };
-  if (sendOTP) {
-    return /*#__PURE__*/React.createElement(Provider, null, /*#__PURE__*/React.createElement(View, {
-      style: CommonStyles.mainContainer
-    }, renderModal(), /*#__PURE__*/React.createElement(View, {
+  const renderCancelModal = () => {
+    return /*#__PURE__*/React.createElement(ConfirmCancelModal, {
+      showModal: showCancelModal,
+      setShowModal: setShowCancelModal,
+      onSuccess: () => {
+        onProceedCancel();
+        setShowCancelModal(false);
+      },
+      onFailure: () => setShowCancelModal(false)
+    });
+  };
+  const renderButtons = () => {
+    if (loading || currentScreen === VALIDATE_OTP_SCREENS.VERIFICATION_COMPLETE) return null;
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.bottomView
+    }, /*#__PURE__*/React.createElement(Button, {
+      style: [styles.mainBtnStyles, CommonStyles.nextButton, {
+        borderRadius: 6
+      }, disableProceedBtn && {
+        backgroundColor: '#E0E3EB'
+      }],
+      labelStyle: [CommonStyles.nextButtonLabel, styles.activeBtnText, disableProceedBtn && disableProceedBtn && {
+        color: '#A3AAC2'
+      }],
+      mode: 'contained',
+      uppercase: false,
+      disabled: disableProceedBtn,
+      onPress: onProceed
+    }, "Proceed"), props.restrictCancel === true || props.allowCancel === false ? null : props.isSelfLoop == false && /*#__PURE__*/React.createElement(Button, {
+      style: [styles.mainBtnStyles, CommonStyles.cancelButton, {
+        borderRadius: 4
+      }],
+      labelStyle: [CommonStyles.cancelButtonLabel, styles.cancelBtnText],
+      mode: 'outlined',
+      uppercase: false,
+      onPress: onCancelET
+    }, "Cancel"));
+  };
+  const renderLoadingCard = () => {
+    return /*#__PURE__*/React.createElement(View, {
       style: {
         flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginHorizontal: 18
+        justifyContent: 'center'
       }
     }, /*#__PURE__*/React.createElement(View, {
+      style: styles.loadingCard
+    }, /*#__PURE__*/React.createElement(ActivityIndicator, {
+      size: "small",
+      color: "rgba(107, 142, 255, 1)"
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: styles.loadingText
+    }, "Loading")));
+  };
+  const renderSnackBar = () => {
+    if (!snackBar.show) return null; // Show snackbar only when `snackBar.show` is true
+    return /*#__PURE__*/React.createElement(View, {
       style: {
-        marginBottom: 16
-      }
-    }, Platform.OS === 'android' && /*#__PURE__*/React.createElement(SvgXml, {
-      xml: mobileSVG
-    })), /*#__PURE__*/React.createElement(View, {
-      style: {
-        marginTop: 16
-      }
-    }, /*#__PURE__*/React.createElement(Text, {
-      style: styles.titleText
-    }, "Do you want to proceed to OTP verification? This will send a verification code to your consignee."))), renderButtons(), /*#__PURE__*/React.createElement(SnackBarCustom, {
-      type: snackBar.type,
-      message: `${snackBar.message}`,
-      visible: snackBar.show,
-      onDismiss: () => {
-        setSnackBar({
-          show: false,
-          message: '',
-          type: SnackBarType.SUCCESS
-        });
+        marginHorizontal: 6
       }
-    })));
-  }
-  if (!sendOTP) {
-    var _props$captureInput;
-    return /*#__PURE__*/React.createElement(Provider, null, /*#__PURE__*/React.createElement(View, {
-      style: CommonStyles.mainContainer
-    }, renderModal(), /*#__PURE__*/React.createElement(View, {
-      style: styles.otpContainer
-    }, /*#__PURE__*/React.createElement(View, {
-      style: styles.otpTitle
-    }, /*#__PURE__*/React.createElement(Text, null, "Enter the ", (_props$captureInput = props.captureInput) === null || _props$captureInput === void 0 ? void 0 : _props$captureInput.length, " digit OTP sent to the consignee to confirm order completion")), /*#__PURE__*/React.createElement(OTPInput, {
-      input: props.captureInput,
-      otpCode: otpCode,
-      setOTPCode: setOTPCode,
-      hasError: hasError,
-      setHasError: setHasError,
-      setErrorMessage: setErrorMessage
-    }), renderErrorMessage(), renderRetryButton()), renderButtons(), /*#__PURE__*/React.createElement(SnackBarCustom, {
+    }, /*#__PURE__*/React.createElement(SnackBarCustom, {
+      duration: 2000,
       type: snackBar.type,
+      customBottom: 80,
       message: `${snackBar.message}`,
       visible: snackBar.show,
       onDismiss: () => {
         setSnackBar({
           show: false,
           message: '',
-          type: SnackBarType.SUCCESS
+          type: SnackBarType.OTP_SUCCESS
         });
       }
-    })));
-  }
-  return null;
+    }));
+  };
+  const renderContent = () => {
+    // if (loading) {
+    //   return renderLoadingCard;
+    // }
+
+    if (currentScreen === VALIDATE_OTP_SCREENS.VERIFICATION_COMPLETE) {
+      return /*#__PURE__*/React.createElement(VerificationComplete, _extends({}, props, {
+        setLoading: setLoading,
+        success: success,
+        retryCount: retryCount
+      }));
+    }
+    if (currentScreen === VALIDATE_OTP_SCREENS.CONTACT_LIST) {
+      return /*#__PURE__*/React.createElement(ContactListView, _extends({}, props, {
+        setIsContactVisited: setIsContactVisited,
+        handleSelectContact: handleSelectContact,
+        handleBackNavigation: handleBackNavigation,
+        contactList: contactList,
+        domain: domain
+      }));
+    }
+    if (currentScreen === VALIDATE_OTP_SCREENS.OTP_VIEW) {
+      return /*#__PURE__*/React.createElement(OTPView, _extends({}, props, {
+        isContactVisited: isContactVisited,
+        otpCode: otpCode,
+        otpInputConfig: otpInputConfig,
+        selectedContact: selectedContact,
+        setCurrentScreen: setCurrentScreen,
+        setErrorMessage: setErrorMessage,
+        setSnackBar: setSnackBar,
+        errorMessage: errorMessage,
+        setHasError: setHasError,
+        setOTPCode: setOTPCode,
+        setLoading: setLoading,
+        handleBackNavigation: handleBackNavigation,
+        hasError: hasError,
+        doorstepOTP: props.doorstepOTP,
+        setResendCount: setResendCount,
+        resendCount: resendCount,
+        resendConfig: resendConfig,
+        domain: domain
+      }));
+    }
+    return null;
+  };
+  return /*#__PURE__*/React.createElement(Provider, null, /*#__PURE__*/React.createElement(Portal, null, loading ? /*#__PURE__*/React.createElement(ProgressDialog, {
+    customModalContentStyle: {
+      paddingVertical: 32
+    },
+    visible: loading,
+    label: "Loading",
+    labelStyle: {
+      fontWeight: '400',
+      marginTop: 16,
+      fontFamily: Platform.OS === 'android' ? Fonts.IBMPlexSans_400Regular : 'IBMPlexSans-Regular',
+      color: '#525B7A',
+      letterSpacing: 0.25
+    }
+  }) : currentScreen === VALIDATE_OTP_SCREENS.VERIFICATION_COMPLETE ? /*#__PURE__*/React.createElement(View, {
+    style: [CommonStyles.mainContainer]
+  }, /*#__PURE__*/React.createElement(VerificationComplete, _extends({}, props, {
+    setLoading: setLoading,
+    success: success,
+    retryCount: retryCount
+  }))) : currentScreen === VALIDATE_OTP_SCREENS.CONTACT_LIST ? /*#__PURE__*/React.createElement(View, {
+    style: [CommonStyles.mainContainer]
+  }, renderGoBackModal(), renderCancelModal(), /*#__PURE__*/React.createElement(ContactListView, _extends({}, props, {
+    setIsContactVisited: setIsContactVisited,
+    handleSelectContact: handleSelectContact,
+    handleBackNavigation: handleBackNavigation,
+    contactList: contactList,
+    domain: domain
+  })), renderButtons(), renderSnackBar()) : currentScreen === VALIDATE_OTP_SCREENS.OTP_VIEW ? /*#__PURE__*/React.createElement(View, {
+    style: [CommonStyles.mainContainer]
+  }, renderGoBackModal(), renderCancelModal(), /*#__PURE__*/React.createElement(OTPView, _extends({}, props, {
+    isContactVisited: isContactVisited,
+    otpCode: otpCode,
+    otpInputConfig: otpInputConfig,
+    selectedContact: selectedContact,
+    setCurrentScreen: setCurrentScreen,
+    setErrorMessage: setErrorMessage,
+    setSnackBar: setSnackBar,
+    errorMessage: errorMessage,
+    setHasError: setHasError,
+    setOTPCode: setOTPCode,
+    setLoading: setLoading,
+    handleBackNavigation: handleBackNavigation,
+    hasError: hasError,
+    doorstepOTP: props.doorstepOTP,
+    setResendCount: setResendCount,
+    resendCount: resendCount,
+    resendConfig: resendConfig,
+    domain: domain
+  })), renderButtons(), renderSnackBar()) : null));
 };
 export default ValidateOTPET;
-const styles = StyleSheet.create({
-  bottomView: {
-    flexDirection: 'row-reverse',
-    justifyContent: 'space-evenly',
-    padding: 16,
-    backgroundColor: 'white'
-  },
-  titleText: {
-    justifyContent: 'center',
-    fontFamily: Platform.OS === 'android' ? Fonts.IBMPlexSans_400Regular : 'IBMPlexSans-Regular',
-    fontStyle: 'normal',
-    fontSize: 16,
-    lineHeight: 20,
-    letterSpacing: 0.25,
-    textAlign: 'center',
-    color: '#3D445C',
-    marginBottom: 10
-  },
-  otpTitle: {
-    marginTop: 10,
-    marginBottom: 20,
-    fontFamily: Platform.OS === 'android' ? Fonts.IBMPlexSans_400Regular : 'IBMPlexSans-Regular',
-    fontStyle: 'normal',
-    fontSize: 16,
-    lineHeight: 20,
-    letterSpacing: 0.25,
-    color: '#3D445C',
-    alignItems: 'center'
-  },
-  otpContainer: {
-    marginTop: 20,
-    marginBottom: 40,
-    marginHorizontal: 10,
-    flex: 1
-  },
-  retryButton: {
-    alignItems: 'flex-start',
-    marginVertical: 10
-  },
-  errorMessage: {
-    marginTop: 16,
-    marginHorizontal: 10,
-    color: '#DC2626',
-    fontFamily: Platform.OS === 'android' ? Fonts.IBMPlexSans_400Regular : 'IBMPlexSans-Regular',
-    fontSize: 12,
-    lineHeight: 16
-  },
-  subText: {
-    justifyContent: 'center',
-    fontFamily: Platform.OS === 'android' ? Fonts.IBMPlexSans_400Regular : 'IBMPlexSans-Regular',
-    fontStyle: 'normal',
-    fontSize: 14,
-    letterSpacing: 0.25,
-    lineHeight: 20,
-    textAlign: 'center',
-    color: '#000000',
-    marginBottom: 10
-  },
-  modalContent: {
-    marginStart: 60,
-    marginEnd: 60,
-    flex: 1,
-    marginBottom: 60
-  },
-  modalView: {
-    backgroundColor: 'white',
-    padding: 15,
-    borderRadius: 9
-  }
-});
 //# sourceMappingURL=ValidateOTPET.js.map