@os1-platform/dispatch-mobile 3.0.4 → 3.1.1

package/src/components/executiontasks/validateOTP/ValidateOTPET.tsx

@@ -1,264 +1,467 @@
-import { View, Text, StyleSheet, BackHandler, Platform } from 'react-native';
-import React, { useState, useLayoutEffect } from 'react';
-import { Button, Modal, Portal, Provider } from 'react-native-paper';
-import { SvgXml } from 'react-native-svg';
-import OTPInput from './sub-components/OTPInput';
-import type { ValidateOTPInput } from './ValidateOTPSchema';
-import useTimer from '../../../utils/hooks/useTimer';
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react-native/no-inline-styles */
+// External Libraries
+import React, {
+  useState,
+  useLayoutEffect,
+  useEffect,
+  FC,
+  useContext,
+} from 'react';
+import { View, Text, Platform } from 'react-native';
+
+// UI Libraries and Icons
 import {
-  CommonStyles,
-  Fonts,
-} from '../../../styles/executionTasks/CommonStyles';
-import { generateOTP, parseRetryConfig } from './utils';
-import { checkForValidation } from './utils';
+  ActivityIndicator,
+  Button,
+  Portal,
+  Provider,
+} from 'react-native-paper';
+
+// Utility Functions and Hooks
+import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
+import { hasGoBackConnector } from '../../../components/utils';
 import {
-  ERROR_GENERATING_OTP,
-  INVALID_OTP,
-  INVALID_OTP_LENGTH,
-  mobileSVG,
-} from './constants';
+  countType,
+  generateOTP,
+  getCount,
+  parseResendConfig,
+  updateResendCount,
+  updateRetryCount,
+  VALIDATE_OTP_SCREENS,
+  verifyOTP,
+} from './utils';
+
+// Dispatch Codes and Models
+import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
 import {
   EntityCode,
   ExecutionTaskID,
 } from '../../../models/execTasks/ETConfig';
-import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
-import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
+import { ValidateOTPContext } from '../../../utils/context/valdiateOTPContext';
+
+// Schema and Types
+import {
+  ContactTypes,
+  InputType,
+  OtpDeliveryMethodTypes,
+  OtpInputConfigType,
+  ResendOTPConfigType,
+  SetSnackBarType,
+  ValidationType,
+  type ValidateOTPInput,
+} from './ValidateOTPSchema';
+
+// Constants
+import { GO_BACK_EVENT_CODE } from '../../../constants/constants';
+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 Icon from 'react-native-vector-icons/MaterialIcons';
-import { GO_BACK_EVENT_CODE } from '../../../constants/constants';
-import { hasGoBackConnector } from '../../../components/utils';
 import GoBackModal from '../../../components/widgets/GoBackModal';
-import { useFocusEffect } from '@react-navigation/native';
-import { ScreenNameSdkConstants, SentryEventNameSdkConstants, SeverityLevelValue } from '../../../analytics/sentry/SentrySdkConstants';
-import { fireEventWithScreenName } from '../../../analytics/sentry/SentryAnalyticsUtils';
+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';
 
-const ValidateOTPET = (props: ValidateOTPInput) => {
-  const [showBackModal, setShowBackModal] = useState(false);
-
-  // Handle back-button click
-  useFocusEffect(
-    React.useCallback(() => {
-      const onBackPress = () => {
-        if (
-          props.taskMeta?.enableGoBack &&
-          hasGoBackConnector(props.applicableReasons)
-        ) {
-          setShowBackModal(true);
-          return true;
-        } else {
-          props.navigation.goBack();
-          return true;
-        }
-      };
-      BackHandler.addEventListener('hardwareBackPress', onBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
-    }, [])
-  );
+// Styles
+import styles from './ValidateOtpStyles';
+import {
+  CommonStyles,
+  Fonts,
+} from '../../../styles/executionTasks/CommonStyles';
 
-  useLayoutEffect(() => {
-    props.navigation.setOptions({
-      title: props.title,
-      headerLeft: () => {
-        return (
-          <Icon
-            onPress={() => {
-              if (
-                props.taskMeta?.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]);
+// Analytics
+import {
+  ScreenNameSdkConstants,
+  SentryEventNameSdkConstants,
+  SeverityLevelValue,
+} from '../../../analytics/sentry/SentrySdkConstants';
+import { fireEventWithScreenName } from '../../../analytics/sentry/SentryAnalyticsUtils';
 
-  const retryConfig = parseRetryConfig(props.generationLogic?.retryConfig);
+const ValidateOTPET: FC<ValidateOTPInput> = (props) => {
+  const { contacts, navigation } = props;
+  // Context
+  const validateConfigContext = useContext(ValidateOTPContext);
+  const domain = validateConfigContext?.sdkConfig?.validateOtpDomain ?? '';
 
-  const initialMinute = Math.floor(retryConfig.delay / 60);
-  const initialSeconds = parseInt((retryConfig.delay % 60).toFixed(0));
-  const [timer, resetTimer] = useTimer({
-    initialMinute,
-    initialSeconds,
-  });
+  // Configurations
+  const resendConfig: ResendOTPConfigType = parseResendConfig(props.resendOTP);
+  const otpInputConfig: OtpInputConfigType = {
+    inputType: props.inputType || InputType.NUMBER,
+    length: props.otpLength || 6,
+    validationRegex: `^[0-9]+$`,
+  };
 
-  const [sendOTP, setSendOTP] = useState(
-    Boolean(props.generationLogic?.generateOnLoad)
+  // State: Contact Management
+  const [contactList, setContactList] = useState<ContactTypes[]>(contacts);
+  const [selectedContact, setSelectedContact] = useState<ContactTypes>(
+    contactList[0] || null
+  );
+  const [isContactVisited, setIsContactVisited] = useState<boolean>(
+    props.doorstepOTP
   );
-  const [retryCount, setRetryCount] = useState(0);
 
+  // State: OTP Handling
   const [userInput, setUserInput] = useState({
     captureInput: '',
   });
   const { captureInput: otpCode } = userInput;
-
-  const setOTPCode = (otpCode: string) => {
-    setUserInput({ ...userInput, captureInput: otpCode });
+  const setOTPCode = (code: string) => {
+    setUserInput({ ...userInput, captureInput: code });
   };
+  const [retryCount, setRetryCount] = useState<number>(0);
+  const [resendCount, setResendCount] = useState<number>(0);
+  const [disableProceedBtn, setDisableProceedBtn] = useState(false);
 
-  const [hasError, setHasError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState('');
+  // State: UI and Navigation
+  const [showBackModal, setShowBackModal] = useState<boolean>(false);
+  const [showCancelModal, setShowCancelModal] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [hasError, setHasError] = useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = useState<string>('');
+  const [success, setSuccess] = useState<boolean>(false);
+  const [shouldNavigateBack, setShouldNavigateBack] = useState<boolean>(false);
+  const [currentScreen, setCurrentScreen] = useState<string>(
+    props.doorstepOTP
+      ? VALIDATE_OTP_SCREENS.CONTACT_LIST
+      : VALIDATE_OTP_SCREENS.OTP_VIEW
+  );
 
-  const [snackBar, setSnackBar] = useState({
+  // State: SnackBar
+  const [snackBar, setSnackBar] = useState<SetSnackBarType>({
     show: false,
-    type: SnackBarType.SUCCESS,
+    type: SnackBarType.OTP_SUCCESS,
     message: '',
   });
 
-  const renderButtons = () => {
-    return (
-      <View style={styles.bottomView}>
-        <View>
-          <Button
-            style={[CommonStyles.nextButton, { width: 165, marginStart: 10 }]}
-            labelStyle={CommonStyles.nextButtonLabel}
-            mode={'contained'}
-            uppercase={false}
-            onPress={async () => {
-              // send OTP Generation using props
-              if (
-                sendOTP &&
-                props.generationLogic &&
-                props.generationLogic?.generateOnLoad
-              ) {
-                const response = await generateOTP(props.generationLogic.api);
-                resetTimer();
-                if (response) setSendOTP(false);
-                else
-                  setSnackBar({
-                    show: true,
-                    message: ERROR_GENERATING_OTP,
-                    type: SnackBarType.FAILURE,
-                  });
-              }
-              // 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 {
-                    props.onSubmitET({
-                      ...(await getBaseETResponse(
-                        EntityCode.VALIDATE_OTP_ET,
-                        true,
-                        getEventCodeByET(
-                          ExecutionTaskID.VALIDATE_OTP_ET,
-                          true,
-                          props.applicableReasons?.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 });   
-  
-            }}
-          >
-            Proceed
-          </Button>
-        </View>
-        <View>
-          <Button
-            style={[CommonStyles.cancelButton, { width: 165, marginEnd: 10 }]}
-            labelStyle={CommonStyles.cancelButtonLabel}
-            mode={'outlined'}
-            uppercase={false}
-            onPress={async () => {
-              // Cancel the ET
-              props.onSubmitET({
-                ...(await getBaseETResponse(
-                  EntityCode.VALIDATE_OTP_ET,
-                  false,
-                  getEventCodeByET(
-                    ExecutionTaskID.VALIDATE_OTP_ET,
-                    false,
-                    props.applicableReasons?.failure
-                  ),
-                  '',
-                  props.mergedObjectiveId,
-                  ExecutionTaskID.VALIDATE_OTP_ET
-                )),
-              });
-              const cta = 'Skip';
-              fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.VALIDATE_OTP_ET_SCREEN, cta: cta });   
-  
-            }}
-          >
-            Skip
-          </Button>
-        </View>
-      </View>
-    );
-  };
+  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);
+    };
 
-  const renderRetryButton = () => {
-    const generationLogic = props.generationLogic;
-    const enableRetry = props.generationLogic?.enableRetry;
+    fetchCounts();
+  }, []);
 
-    if (generationLogic && enableRetry) {
-      return (
-        <View style={styles.retryButton}>
-          <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}` : ''}`}</Button>
-        </View>
+  // 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?.length !== otpInputConfig.length ||
+          !selectedContact ||
+          hasError
       );
-    } else return null;
+    } else {
+      setDisableProceedBtn(!selectedContact);
+    }
+  }, [
+    currentScreen,
+    hasError,
+    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) =>
+        props.otpDeliveryMethod === OtpDeliveryMethodTypes.BOTH
+          ? true
+          : contact.mode?.toLowerCase() ===
+            props.otpDeliveryMethod?.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 = () => {
+    if (
+      props.taskMeta?.enableGoBack &&
+      hasGoBackConnector(props.applicableReasons)
+    ) {
+      setShowBackModal(true);
+    } else {
+      setShouldNavigateBack(true);
+    }
+    return true;
   };
 
-  const renderErrorMessage = () => {
-    return errorMessage ? (
-      <Text style={styles.errorMessage}>{errorMessage}</Text>
-    ) : null;
+  const onProceedCancel = async () => {
+    // Cancel the ET
+    props.onSubmitET({
+      ...(await getBaseETResponse(
+        EntityCode.VALIDATE_OTP_ET,
+        false,
+        getEventCodeByET(
+          ExecutionTaskID.VALIDATE_OTP_ET,
+          false,
+          props.applicableReasons?.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 renderModal = () => {
+  const handleContactListProceed = async () => {
+    try {
+      setSnackBar({
+        show: false,
+        message: '',
+        type: SnackBarType.OTP_SUCCESS,
+      });
+      setLoading(true);
+
+      const payload = {
+        jobId: props.orderData[0]?.jobId,
+        refId: props.refId,
+        objectiveId: props.workflowId,
+        contactInfo: {
+          id: selectedContact.id,
+          mode: selectedContact.mode,
+          type: selectedContact.type,
+          index: selectedContact.index,
+        },
+        meta: {
+          orderIds: props.orderData?.map(
+            (order) => order?.displayInfo?.orderId
+          ),
+        },
+      };
+
+      const response = await generateOTP(payload, { ...props, domain });
+
+      if (!response?.status) {
+        if (!response.status && response?.code === '101080001017') {
+          setCurrentScreen(VALIDATE_OTP_SCREENS.OTP_VIEW);
+          setLoading(false);
+          setSnackBar({
+            show: true,
+            message: response?.data?.result?.message || UNABLE_TO_SEND_OTP,
+            type: SnackBarType.OTP_FAILED,
+          });
+        } else {
+          setLoading(false);
+          setSnackBar({
+            show: true,
+            message: response?.data?.result?.message || ERROR_GENERATING_OTP,
+            type: SnackBarType.OTP_FAILED,
+          });
+        }
+
+        return;
+      }
+
+      const resendCountValue =
+        Number(
+          response?.data?.result?.resendCount ||
+            response?.additionalInfo?.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 () => {
+    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?.otpValidation
+      ? props?.otpValidation?.toString()?.toLowerCase() ===
+        ValidationType.ONLINE?.toString()?.toLowerCase()
+      : true;
+
+    const response = isOnlineValidation
+      ? await verifyOTP(payload, { ...props, domain })
+      : otpCode === props.offlineOtpValue;
+
+    const retryCountValue =
+      Number(
+        response?.result?.retryCount || response?.additionalInfo?.retryCount
+      ) || retryCount + 1;
+
+    if (response === false || 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,
+        });
+      }
+    } 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,
+        });
+      }
+      if (currentScreen === VALIDATE_OTP_SCREENS.OTP_VIEW) {
+        setSnackBar({
+          show: true,
+          message: ERROR_VALIDATE_OTP,
+          type: SnackBarType.OTP_FAILED,
+        });
+      }
+    }
+
+    return;
+  };
+
+  const onCancelET = () => {
+    setShowCancelModal(true);
+  };
+
+  const handleSelectContact = (contactDetails: ContactTypes) => {
+    setSelectedContact(contactDetails);
+    setContactList((prevContactList) =>
+      prevContactList.map((contact: ContactTypes) => ({
+        ...contact,
+        isSelected: contact?.value === contactDetails.value,
+      }))
+    );
+  };
+
+  // *Rendering components*
+  const renderGoBackModal = () => {
     return (
       <GoBackModal
         showModal={showBackModal}
@@ -273,6 +476,7 @@ const ValidateOTPET = (props: ValidateOTPInput) => {
               props.mergedObjectiveId,
               ExecutionTaskID.VALIDATE_OTP_ET
             )),
+            retryCount: retryCount,
           });
           setShowBackModal(false);
         }}
@@ -281,170 +485,239 @@ const ValidateOTPET = (props: ValidateOTPInput) => {
     );
   };
 
-  if (sendOTP) {
+  const renderCancelModal = () => {
     return (
-      <Provider>
-        <View style={CommonStyles.mainContainer}>
-          {renderModal()}
-          <View
-            style={{
-              flex: 1,
-              justifyContent: 'center',
-              alignItems: 'center',
-              marginHorizontal: 18,
-            }}
-          >
-            <View style={{ marginBottom: 16 }}>
-             {Platform.OS === 'android' &&  <SvgXml xml={mobileSVG} /> }
-            </View>
-            <View style={{ marginTop: 16 }}>
-              <Text style={styles.titleText}>
-                Do you want to proceed to OTP verification? This will send a
-                verification code to your consignee.
-              </Text>
-            </View>
-          </View>
-          {renderButtons()}
-          <SnackBarCustom
-            type={snackBar.type}
-            message={`${snackBar.message}`}
-            visible={snackBar.show}
-            onDismiss={() => {
-              setSnackBar({
-                show: false,
-                message: '',
-                type: SnackBarType.SUCCESS,
-              });
-            }}
-          />
+      <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 (
+      <View style={styles.bottomView}>
+        <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
+        </Button>
+        {props.restrictCancel === true || props.allowCancel === false
+          ? null
+          : props.isSelfLoop == false && (
+              <Button
+                style={[
+                  styles.mainBtnStyles,
+                  CommonStyles.cancelButton,
+                  { borderRadius: 4 },
+                ]}
+                labelStyle={[
+                  CommonStyles.cancelButtonLabel,
+                  styles.cancelBtnText,
+                ]}
+                mode={'outlined'}
+                uppercase={false}
+                onPress={onCancelET}
+              >
+                Cancel
+              </Button>
+            )}
+      </View>
+    );
+  };
+
+  const renderLoadingCard = () => {
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+        }}
+      >
+        <View style={styles.loadingCard}>
+          <ActivityIndicator size="small" color="rgba(107, 142, 255, 1)" />
+          <Text style={styles.loadingText}>Loading</Text>
         </View>
-      </Provider>
+      </View>
     );
-  }
-  if (!sendOTP) {
+  };
+
+  const renderSnackBar = () => {
+    if (!snackBar.show) return null; // Show snackbar only when `snackBar.show` is true
     return (
-      <Provider>
-        <View style={CommonStyles.mainContainer}>
-          {renderModal()}
-          <View style={styles.otpContainer}>
-            <View style={styles.otpTitle}>
-              <Text>
-                Enter the {props.captureInput?.length} digit OTP sent to the
-                consignee to confirm order completion
-              </Text>
-            </View>
-            <OTPInput
-              input={props.captureInput}
+      <View style={{ marginHorizontal: 6 }}>
+        <SnackBarCustom
+          duration={2000}
+          type={snackBar.type}
+          customBottom={80}
+          message={`${snackBar.message}`}
+          visible={snackBar.show}
+          onDismiss={() => {
+            setSnackBar({
+              show: false,
+              message: '',
+              type: SnackBarType.OTP_SUCCESS,
+            });
+          }}
+        />
+      </View>
+    );
+  };
+
+  const renderContent = () => {
+    // if (loading) {
+    //   return renderLoadingCard;
+    // }
+
+    if (currentScreen === VALIDATE_OTP_SCREENS.VERIFICATION_COMPLETE) {
+      return (
+        <VerificationComplete
+          {...props}
+          setLoading={setLoading}
+          success={success}
+          retryCount={retryCount}
+        />
+      );
+    }
+
+    if (currentScreen === VALIDATE_OTP_SCREENS.CONTACT_LIST) {
+      return (
+        <ContactListView
+          {...props}
+          setIsContactVisited={setIsContactVisited}
+          handleSelectContact={handleSelectContact}
+          handleBackNavigation={handleBackNavigation}
+          contactList={contactList}
+          domain={domain}
+        />
+      );
+    }
+
+    if (currentScreen === VALIDATE_OTP_SCREENS.OTP_VIEW) {
+      return (
+        <OTPView
+          {...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 (
+    <Provider>
+      <Portal>
+        {loading ? (
+          <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 ? (
+          <View style={[CommonStyles.mainContainer]}>
+            <VerificationComplete
+              {...props}
+              setLoading={setLoading}
+              success={success}
+              retryCount={retryCount}
+            />
+          </View>
+        ) : currentScreen === VALIDATE_OTP_SCREENS.CONTACT_LIST ? (
+          <View style={[CommonStyles.mainContainer]}>
+            {renderGoBackModal()}
+            {renderCancelModal()}
+            <ContactListView
+              {...props}
+              setIsContactVisited={setIsContactVisited}
+              handleSelectContact={handleSelectContact}
+              handleBackNavigation={handleBackNavigation}
+              contactList={contactList}
+              domain={domain}
+            />
+            {renderButtons()}
+            {renderSnackBar()}
+          </View>
+        ) : currentScreen === VALIDATE_OTP_SCREENS.OTP_VIEW ? (
+          <View style={[CommonStyles.mainContainer]}>
+            {renderGoBackModal()}
+            {renderCancelModal()}
+            <OTPView
+              {...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}
-              setHasError={setHasError}
-              setErrorMessage={setErrorMessage}
+              doorstepOTP={props.doorstepOTP}
+              setResendCount={setResendCount}
+              resendCount={resendCount}
+              resendConfig={resendConfig}
+              domain={domain}
             />
-            {renderErrorMessage()}
-            {renderRetryButton()}
+            {renderButtons()}
+            {renderSnackBar()}
           </View>
-          {renderButtons()}
-          <SnackBarCustom
-            type={snackBar.type}
-            message={`${snackBar.message}`}
-            visible={snackBar.show}
-            onDismiss={() => {
-              setSnackBar({
-                show: false,
-                message: '',
-                type: SnackBarType.SUCCESS,
-              });
-            }}
-          />
-        </View>
-      </Provider>
-    );
-  }
-  return null;
+        ) : null}
+      </Portal>
+    </Provider>
+  );
 };
 
 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,
-  },
-});