@os1-platform/dispatch-mobile 3.0.4 → 3.1.1

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

@@ -0,0 +1,216 @@
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { FC, useEffect, useLayoutEffect } from 'react';
+import { BackHandler, Text, View } from 'react-native';
+import { useFocusEffect } from '@react-navigation/native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+
+// Components
+import OTPInput from '../sub-components/OTPInput';
+import { ResendOTPButton } from '../sub-components/ResendOTPButton';
+
+// Styles
+import styles from '../ValidateOtpStyles';
+
+// Utilities
+import { maskContact } from '../../../../utils/ExecTaskUtils';
+import { resendOTP, updateResendCount, VALIDATE_OTP_SCREENS } from '../utils';
+import useResendOtpTimer from '../../../../utils/hooks/useTimer';
+
+// Types
+import { ValidateOTPInput } from '../ValidateOTPSchema';
+import { SnackBarType } from '../../../../components/widgets/SnackBarCustom';
+import { ERROR_RESEND_OTP, OTP_SENT_SUCCESSFULLY } from '../constants';
+
+// Analytics
+import { fireEventWithScreenName } from '../../../../analytics/sentry/SentryAnalyticsUtils';
+import {
+  ScreenNameSdkConstants,
+  SentryEventNameSdkConstants,
+  SeverityLevelValue,
+} from '../../../../analytics/sentry/SentrySdkConstants';
+
+export const OTPView: FC<ValidateOTPInput> = (props) => {
+  const { formattedTime, timer, resetTimer } = useResendOtpTimer(
+    props.resendConfig?.enableDelay
+  );
+
+  const handleBackPress = () => {
+    if (props.doorstepOTP && props.isContactVisited) {
+      props.setCurrentScreen(VALIDATE_OTP_SCREENS.CONTACT_LIST);
+    } else {
+      props.handleBackNavigation();
+    }
+    props.setOTPCode('');
+    return true;
+  };
+
+  const handleResendOtp = async () => {
+    const payload = {
+      refId: props.refId,
+      meta: {
+        orderIds: props.orderData?.map((order) => order?.displayInfo?.orderId),
+      },
+      ...(props.doorstepOTP && {
+        contactInfo: {
+          id: props.selectedContact.id,
+          mode: props.selectedContact.mode,
+          type: props.selectedContact.type,
+          index: props.selectedContact.index,
+        },
+      }),
+    };
+    try {
+      // if (props.doorstepOTP && !props.isContactVisited) {
+      //   props.setCurrentScreen(VALIDATE_OTP_SCREENS.CONTACT_LIST);// required may be in future
+      // } else {
+      props.setOTPCode('');
+      // Attempt to resend OTP
+      const response = await resendOTP(payload, {
+        ...props,
+        domain: props.domain,
+      });
+
+      if (!response?.status || !response) {
+        props.setSnackBar({
+          show: true,
+          message: response?.data?.result?.message || ERROR_RESEND_OTP,
+          type: SnackBarType.OTP_FAILED,
+        });
+        return;
+      } else {
+        const resendCountValue =
+          Number(
+            response?.data?.result?.resendCount ||
+              response?.additionalInfo?.resendCount
+          ) || props.resendCount + 1;
+
+        props.setResendCount(resendCountValue);
+        await updateResendCount(resendCountValue);
+
+        props.setSnackBar({
+          show: true,
+          message: OTP_SENT_SUCCESSFULLY,
+          type: SnackBarType.OTP_SUCCESS,
+        });
+
+        // Reset the timer
+        resetTimer();
+      }
+      const cta = props.resendConfig.buttonTitle;
+      fireEventWithScreenName({
+        severityLevel: SeverityLevelValue.LOG,
+        eventName: SentryEventNameSdkConstants.BUTTON_CLICKED,
+        screenName: ScreenNameSdkConstants.VALIDATE_OTP_ET_SCREEN,
+        cta: cta,
+      });
+      // }
+    } catch (error) {
+      console.error('Error during OTP generation or timer reset:', error);
+      props.setSnackBar({
+        show: true,
+        message: ERROR_RESEND_OTP,
+        type: SnackBarType.OTP_FAILED,
+      });
+    }
+    return;
+  };
+
+  // *reset timer on render
+  useEffect(() => {
+    resetTimer();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Handle back-button click
+  useFocusEffect(
+    React.useCallback(() => {
+      BackHandler.addEventListener('hardwareBackPress', handleBackPress);
+      return () =>
+        BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+  );
+
+  useLayoutEffect(() => {
+    props.navigation.setOptions({
+      title: props.title,
+      headerLeft: () => {
+        return (
+          <Icon
+            onPress={() => {
+              handleBackPress();
+              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,
+            }}
+          />
+        );
+      },
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // *render error message for OTP input
+  const renderErrorMessage = () => {
+    return props.errorMessage ? (
+      <Text style={styles.errorMessage}>{props.errorMessage}</Text>
+    ) : null;
+  };
+
+  // *render retry button
+  const renderRetryButton = () => {
+    const enableRetry = props.resendOTP.enableResends;
+
+    if (enableRetry) {
+      return (
+        <ResendOTPButton
+          {...props}
+          formattedTime={formattedTime}
+          handleResendOtp={handleResendOtp}
+          timer={timer}
+        />
+      );
+    } else return null;
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View style={styles.titleContainer}>
+        <Text style={styles.titleText}>
+          {props?.validateMessage?.toString()?.length > 0
+            ? props.validateMessage
+            : 'Enter OTP received by consignee'}
+        </Text>
+      </View>
+      <View style={styles.otpContainer}>
+        <Text style={styles.otpTextMsg}>
+          OTP sent to{' '}
+          {props?.selectedContact?.value &&
+            maskContact(props?.selectedContact?.value)}
+        </Text>
+        <OTPInput
+          input={props.otpInputConfig}
+          otpCode={props.otpCode}
+          setOTPCode={props.setOTPCode}
+          hasError={props.hasError}
+          setHasError={props.setHasError}
+          setErrorMessage={props.setErrorMessage}
+        />
+        {renderErrorMessage()}
+        {renderRetryButton()}
+      </View>
+    </View>
+  );
+};

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

@@ -0,0 +1,124 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react-native/no-inline-styles */
+import React, { FC, useEffect, useLayoutEffect } from 'react';
+import { Text, View } from 'react-native';
+
+// Styles
+import styles from '../ValidateOtpStyles';
+
+// Components
+import FastImage from 'react-native-fast-image';
+
+// Utilities
+import { getBaseETResponse } from '../../../../utils/ExecTaskUtils';
+import { getEventCodeByET } from '../../../../manager/dispatchCodes/EventCodeContainer';
+import { RETRY_LIMIT_REACHED_CODE } from '../../../../constants/constants';
+
+// Types
+import {
+  BaseEventCodes,
+  EntityCode,
+  ExecutionTaskID,
+} from '../../../../models/execTasks/ETConfig';
+
+const DefaultSubmitTimeout = 3000;
+
+const VerificationComplete: FC<any> = (props) => {
+  // TO hide header for modal screen
+  useLayoutEffect(() => {
+    props.navigation.setOptions({
+      headerShown: false,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const sendSuccessOutput = async () => {
+    const _etOutput = await getBaseETResponse(
+      EntityCode.VALIDATE_OTP_ET,
+      true,
+      getEventCodeByET(
+        ExecutionTaskID.VALIDATE_OTP_ET,
+        true,
+        props.applicableReasons?.success
+      ),
+      '',
+      props.mergedObjectiveId,
+      ExecutionTaskID.VALIDATE_OTP_ET
+    );
+    setTimeout(async () => {
+      props.onSubmitET({
+        ..._etOutput,
+        retryCount: props.retryCount,
+      });
+    }, DefaultSubmitTimeout);
+  };
+
+  const sendFailedOutput = async () => {
+    const _etOutput = await getBaseETResponse(
+      EntityCode.VALIDATE_OTP_ET,
+      false,
+      BaseEventCodes.ENTITY_FAILURE,
+      RETRY_LIMIT_REACHED_CODE,
+      props.mergedObjectiveId,
+      ExecutionTaskID.VALIDATE_OTP_ET
+    );
+    setTimeout(async () => {
+      props.onSubmitET({
+        ..._etOutput,
+        retryCount: props.retryCount,
+      });
+    }, DefaultSubmitTimeout);
+  };
+
+  useEffect(() => {
+    props.setLoading(false);
+    if (props.success) {
+      sendSuccessOutput();
+    } else {
+      sendFailedOutput();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const renderSuccessCard = () => {
+    return (
+      <>
+        <FastImage
+          source={require('../../../../icons/icSuccess.gif')}
+          style={{ height: 116, width: 116 }} // Use consistent dimensions here
+          resizeMode="contain" // Ensures the GIF is displayed properly without distortion
+        />
+        <Text style={styles.otpResponseText}>OTP verified successfully!</Text>
+      </>
+    );
+  };
+
+  const renderFailedCard = () => {
+    return (
+      <>
+        <FastImage
+          source={require('../../../../icons/icFailed.gif')}
+          style={{ height: 116, width: 116 }} // Use consistent dimensions here
+          resizeMode="contain" // Ensures the GIF is displayed properly without distortion
+        />
+        <Text style={styles.otpResponseText}>OTP verification Failed!</Text>
+      </>
+    );
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+        }}
+      >
+        <View style={styles.responseCard}>
+          {props.success ? renderSuccessCard() : renderFailedCard()}
+        </View>
+      </View>
+    </View>
+  );
+};
+export default VerificationComplete;

package/src/components/executiontasks/validateOTP/constants.ts

@@ -1,7 +1,13 @@
-export const INVALID_OTP = `Wrong or expired OTP. Please try again.`;
+export const INVALID_OTP = `Entered incorrect OTP. <length> attempts left.`;
+export const INVALID_OTP_ONE_ATTEMPT_LEFT = `OTP verification failed! Please enter the correct OTP within 1 attempt.`;
 export const INVALID_OTP_LENGTH = `OTP should be of length <length>`;
 export const INVALID_REGEX = `Invalid OTP entered. Must match the expected pattern.`;
-export const ERROR_GENERATING_OTP = `Error occured while Generating OTP`;
+export const ERROR_GENERATING_OTP = `Unable to send OTP. Please try again.`;
+export const UNABLE_TO_SEND_OTP = `Unable to send new OTP as maximum limit reached.`;
+export const ERROR_RESEND_OTP = 'Failed to resend OTP. Try again.';
+export const ERROR_VALIDATE_OTP = 'Failed to validate OTP. Try again.';
+export const OTP_SENT_SUCCESSFULLY = 'OTP sent to the customer!';
+export const OTP_VERIFIED_SUCCESSFULLY = 'OTP verified successfully!';
 export const mobileSVG = `<svg width="164" height="164" viewBox="0 0 164 164" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <mask id="mask0_3391_199849" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="164" height="164">
 <rect width="164" height="164" fill="url(#pattern0)"/>
@@ -19,6 +25,7 @@ export const mobileSVG = `<svg width="164" height="164" viewBox="0 0 164 164" fi
 `;
 export const DEFAULT_RETRY_CONFIG = {
   buttonTitle: 'Resend OTP',
-  delay: 10,
-  maxAttempt: 3,
+  enableResends: true,
+  enableDelay: 60,
+  maxResends: 5,
 };

package/src/components/executiontasks/validateOTP/sub-components/ContactCard.tsx

@@ -0,0 +1,72 @@
+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+// Styles
+import styles from '../ValidateOtpStyles';
+
+// Types
+import { ContactTypes } from '../ValidateOTPSchema';
+
+// Icons
+import { RadioCheckedIcon, RadioUncheckedIcon } from '../../../../icons';
+
+// Utilities
+import { isNotNullOrEmpty, truncateOrderId } from '../utils';
+import { sHeight } from '../../../../components/utils/Scale';
+import { maskContact } from '../../../../utils/ExecTaskUtils';
+
+interface ContactCardPropType {
+  handleSelectContact: (contactDetails: ContactTypes) => void;
+  contactDetails: ContactTypes;
+}
+export const ContactCard = (props: ContactCardPropType) => {
+  const { handleSelectContact, contactDetails } = props;
+  return (
+    <TouchableOpacity
+      activeOpacity={0.75}
+      style={[
+        styles.contactCard,
+        contactDetails?.isSelected && styles.selectedCard,
+      ]}
+      onPress={() => handleSelectContact(contactDetails)}
+    >
+      <View style={[styles.rowContainer]}>
+        {contactDetails?.isSelected ? (
+          <RadioCheckedIcon style={[styles.radioIcon]} />
+        ) : (
+          <RadioUncheckedIcon style={[styles.radioIcon]} />
+        )}
+        <View style={styles.columnContainer}>
+          {/* Contact */}
+          <View style={[styles.rowContainer, { marginBottom: 8 }]}>
+            <Text style={[styles.contactTitle, { padding: 0, margin: 0 }]}>
+              {contactDetails?.value && maskContact(contactDetails?.value)}
+            </Text>
+          </View>
+          {isNotNullOrEmpty(contactDetails?.orderId) && (
+            <View style={styles.rowContainer}>
+              <Text style={[styles.titleText, styles.contactLabel]}>
+                Order ID
+              </Text>
+              <Text style={[styles.titleText, styles.contactText]}>
+                {contactDetails?.orderId &&
+                  truncateOrderId(contactDetails?.orderId)}
+              </Text>
+            </View>
+          )}
+          {isNotNullOrEmpty(contactDetails?.orderFrom) && (
+            <View style={[styles.rowContainer, { marginTop: sHeight(4) }]}>
+              <Text style={[styles.titleText, styles.contactLabel]}>
+                Order From
+              </Text>
+              <Text style={[styles.titleText, styles.contactText]}>
+                {contactDetails?.orderFrom}
+              </Text>
+            </View>
+          )}
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};

package/src/components/executiontasks/validateOTP/sub-components/OTPInput.tsx

@@ -1,11 +1,13 @@
-import { StyleSheet, Pressable, Keyboard, Platform } from 'react-native';
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// External imports
 import React, { useEffect } from 'react';
+import { StyleSheet, Pressable, Keyboard, Platform } from 'react-native';
+
+// Internal imports
 import SplitTextInput from '../../../widgets/SplitTextInput';
 import { Fonts } from '../../../../styles/executionTasks/CommonStyles';
 import { InputType, CaptureInput } from '../ValidateOTPSchema';
 import { INVALID_REGEX } from '../constants';
-import { ScreenNameSdkConstants, SentryEventNameSdkConstants, SeverityLevelValue } from '../../../../analytics/sentry/SentrySdkConstants';
-import { fireEventWithScreenName } from '../../../../analytics/sentry/SentryAnalyticsUtils';
 
 export interface OTPInputProps {
   input: CaptureInput;
@@ -17,9 +19,11 @@ export interface OTPInputProps {
 }
 
 const OTPInput = (props: OTPInputProps) => {
-  const maximumCodeLength = props.input.length;
+  const maximumCodeLength = props.input.length || 6;
   const keyboardType =
-    props.input.inputType === InputType.NUMBER ? 'number-pad' : 'default';
+    props.input.inputType === InputType.NUMBER || InputType.NUMERIC
+      ? 'number-pad'
+      : 'default';
 
   useEffect(() => {
     if (
@@ -33,7 +37,7 @@ const OTPInput = (props: OTPInputProps) => {
       if (hasError) props.setErrorMessage(INVALID_REGEX);
       else props.setErrorMessage('');
     }
-  }, [props.otpCode]);
+  }, [maximumCodeLength, props, props.otpCode]);
 
   return (
     <>
@@ -68,7 +72,9 @@ const styles = StyleSheet.create({
         ? Fonts.IBMPlexSans_400Regular
         : 'IBMPlexSans-Regular',
     color: '#3D445C',
-    fontSize: 20,
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '400',
     textAlign: 'center',
   },
   errorMessage: {

package/src/components/executiontasks/validateOTP/sub-components/ResendOTPButton.tsx

@@ -0,0 +1,86 @@
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+// Styles
+import styles from '../ValidateOtpStyles';
+
+// Types
+import { ResendOTPConfigType } from '../ValidateOTPSchema';
+
+// Icons
+import { InfoExclamatoryDarkIcon } from '../../../../icons';
+
+interface ResendOTPButtonPropType {
+  timer: number;
+  resendConfig: ResendOTPConfigType;
+  resendCount: number;
+  formattedTime: string;
+  handleResendOtp: () => void;
+  resendOTP?: any;
+}
+
+export const ResendOTPButton = (props: ResendOTPButtonPropType) => {
+  const { timer, resendConfig, formattedTime, handleResendOtp, resendCount } =
+    props;
+  const enableRetry = props?.resendOTP?.enableResends;
+  return (
+    <View>
+      {resendCount >= resendConfig.maxResends ? (
+        <View>
+          <TouchableOpacity disabled onPress={handleResendOtp}>
+            <Text
+              style={[
+                styles.resendOtpMsg,
+                styles.resendOtpBtn,
+                {
+                  color: '#E0E3EB',
+                },
+              ]}
+            >
+              {resendConfig.buttonTitle}
+            </Text>
+          </TouchableOpacity>
+
+          <View style={styles.maxLimitReachBox}>
+            <InfoExclamatoryDarkIcon
+              height={22}
+              width={22}
+              style={{ padding: 4 }}
+              fill={'#525B7A'}
+            />
+            <Text style={styles.maxLimitReachText}>
+              Maximum resend limit reached.
+            </Text>
+          </View>
+        </View>
+      ) : Number(timer) !== 0 ? (
+        <Text style={styles.resendOtpMsg}>
+          {`${resendConfig.buttonTitle} ${timer ? `in ${formattedTime}` : ''}`}
+        </Text>
+      ) : (
+        <TouchableOpacity
+          disabled={
+            Boolean(timer) ||
+            resendCount >= resendConfig.maxResends ||
+            !enableRetry
+          }
+          onPress={handleResendOtp}
+        >
+          <Text
+            style={[
+              styles.resendOtpMsg,
+              styles.resendOtpBtn,
+              !enableRetry && {
+                color: '#E0E3EB',
+              },
+            ]}
+          >
+            {resendConfig.buttonTitle}
+          </Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};