@os1-platform/dispatch-mobile 3.0.3 → 3.1.0

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import type {
   HTTPRequestBody,
   PathParams,
@@ -8,6 +9,7 @@ import type {
   BaseETResponse,
 } from '../../../models/execTasks/ETBaseModels';
 import type { Headers, HTTPMethod } from '../httpRequest/HttpRequestETSchema';
+import { SnackBarType } from 'src/components/widgets/SnackBarCustom';
 
 export interface API {
   uri: string;
@@ -17,8 +19,10 @@ export interface API {
   requestBody?: HTTPRequestBody;
   queryParams?: QueryParams[];
   pathParams?: PathParams[];
-  responseJsonLogic: object;
-  errorJsonLogic: object;
+  responseJsonPath: string | object;
+  errorJsonPath: string | object;
+  errorJsonLogic?: object | string;
+  responseJsonLogic?: object | string;
 }
 
 export type ValidationRegex = string; // Regex to validate strings
@@ -39,6 +43,7 @@ export interface GenerationLogic {
 export enum InputType {
   STRING = 'string',
   NUMBER = 'number',
+  NUMERIC = 'numeric',
 }
 
 export interface CaptureInput {
@@ -58,11 +63,191 @@ export interface Validation {
   logic: Logic;
 }
 
-export type ValidateOTPInput = BaseETRequest & {
-  generationLogic?: GenerationLogic;
-  captureInput: CaptureInput;
-  validation: Validation;
-  onSubmitET: (validateOTPOutput: ValidateOTPOutput) => void;
+export enum OtpDeliveryMethodTypes {
+  PHONE = 'Phone',
+  EMAIL = 'Email',
+  BOTH = 'Both',
+}
+export interface ResendOTPConfigType {
+  buttonTitle?: string;
+  enableResends: boolean;
+  enableDelay: number;
+  maxResends: number;
+}
+
+export type GenerateOtpPayloadType = {
+  refId: string;
+  jobId: string;
+  objectiveId: string;
+  contactInfo: {
+    id: string; // Unique identifier for the contact (e.g., secure:1)
+    mode: 'PHONE' | 'EMAIL' | string; // Indicates whether it's a phone or email
+    type: 'PRIMARY' | 'SECONDARY' | string; // Indicates whether it's the primary or secondary contact
+    index: number; // Index of the contact in its respective array};
+  };
+  pathParams?: PathParams[];
+  meta: string | object;
 };
 
-export type ValidateOTPOutput = BaseETResponse;
+export interface ResendOTPPayloadType {
+  refId: string;
+  meta: string | object;
+  contactInfo?: {
+    id: string; // Unique identifier for the contact (e.g., secure:1)
+    mode: 'PHONE' | 'EMAIL' | string; // Indicates whether it's a phone or email
+    type: 'PRIMARY' | 'SECONDARY' | string; // Indicates whether it's the primary or secondary contact
+    index: number; // Index of the contact in its respective array};
+  };
+}
+
+export type ResponseType = {
+  status: boolean;
+  data: {
+    result: {
+      resendCount: number;
+      retryCount: number;
+      message: string;
+    };
+  };
+};
+
+export type ErrorResponseType = {
+  code: string;
+  description: string;
+  additionalInfo: {
+    resendCount: number;
+    retryCount: number;
+    message: string;
+  };
+};
+
+export type PhoneType = {
+  number: string | null; // Can be null if missing
+  countryCode: string | null; // Can be null if missing
+  isMobile: boolean | null; // Can be null if missing
+  muteNotif: boolean | null; // Explicitly nullable
+  areaCode?: string | null;
+};
+
+export type EmailType = {
+  id: string | null; // Can be null if missing
+  muteNotif: boolean | null; // Explicitly nullable
+};
+
+export type EmailAndPhoneResponse = {
+  id: string; // Always present
+  name: string; // Always present, but defaults to 'Unknown' if missing
+  phone: PhoneType; // Always present, but fields inside can be null
+  email: string | null; // Can be null if no email is provided
+  additionalPhone: PhoneType[] | null; // Can be null if no additional phones are provided
+  primaryEmail: EmailType | null; // Can be null if no primary email is provided
+  additionalEmail: EmailType[] | null; // Can be null if no additional emails are provided
+};
+
+export interface ContactType {
+  id: string; // Unique identifier for the contact (e.g., secure:1)
+  mode: 'PHONE' | 'EMAIL' | string; // Indicates whether it's a phone or email
+  type: 'PRIMARY' | 'SECONDARY' | string; // Indicates whether it's the primary or secondary contact
+  index: number; // Index of the contact in its respective array
+  value: string; // Actual phone number or email address
+  orderId?: string | undefined | null; // Optional order ID associated with the contact
+}
+
+export type ContactTypes = ContactType & {
+  orderFrom?: string; // Optional source from which the order came
+  contactId?: string; // Optional contact ID, might be different from `id`
+  isSelected?: boolean; // Optional flag indicating if the contact is selected
+};
+export interface OtpInputConfigType {
+  inputType: InputType;
+  length: number;
+  validationRegex: string;
+}
+
+export interface SetSnackBarType {
+  show: boolean;
+  message: string;
+  type: SnackBarType;
+}
+
+export type OTPViewPropTypes = BaseETRequest & {
+  errorMessage: string;
+  handleBackNavigation: () => void;
+  setCurrentScreen: (screen: string) => void;
+  setPrevScreen: (screen: string) => void;
+  isContactVisited: boolean;
+  selectedContact: ContactTypes;
+  otpInputConfig: OtpInputConfigType;
+  otpCode: string;
+  setOTPCode: (otp: string) => void;
+  hasError: boolean;
+  setHasError: (value: boolean) => void;
+  setErrorMessage: (screen: string) => void;
+  loading: boolean;
+  setLoading: (value: boolean) => void;
+  setSnackBar: (values: SetSnackBarType) => void;
+  resendConfig: ResendOTPConfigType; // Config for retry of OTP
+  resendCount: number;
+  setResendCount: React.Dispatch<React.SetStateAction<number>>;
+  domain: string;
+};
+
+export type ContactListViewPropTypes = BaseETRequest & {
+  handleBackNavigation: () => boolean;
+  handleSelectContact: (contactDetails: ContactTypes) => void;
+  contactList: ContactTypes[];
+  setIsContactVisited: (value: boolean) => void;
+  domain: string;
+};
+
+export type OTP_CONFIG_TYPE = 'OS1 Configured API' | 'Custom';
+
+export enum ValidationType {
+  ONLINE = 'Online (from API)',
+  OFFLINE = 'Offline (from Job)',
+}
+
+export type OTP_VALIDATION_TYPE =
+  | ValidationType.OFFLINE
+  | ValidationType.ONLINE;
+
+export type ValidateOTPInput = BaseETRequest &
+  OTPViewPropTypes &
+  ContactListViewPropTypes & {
+    generationLogic?: GenerationLogic;
+    captureInput: CaptureInput;
+    validation: Validation;
+    onSubmitET: (validateOTPOutput: ValidateOTPOutput) => void;
+    otpLength: number;
+    inputType: InputType;
+    generateMessage: string;
+    validateMessage: string;
+    allowCancel?: boolean;
+    restrictCancel?: boolean;
+    allowBack?: boolean;
+    doorstepOTP: boolean;
+    otpDeliveryMethod: OtpDeliveryMethodTypes;
+    resendOTP: ResendOTPConfigType;
+    contacts: ContactType[] | any[];
+    otpConfig: OTP_CONFIG_TYPE;
+    resendApi: API;
+    otpGeneration: API;
+    validationApi: API;
+    offlineOtpValue: string | number;
+    showSummary: boolean;
+    verifyFor: string;
+    validateFor: string;
+    jobId: string;
+    orderData: any[];
+    workflowId: string;
+    refId: string;
+    maxRetries: number;
+    otpValidation: OTP_VALIDATION_TYPE;
+    progressGroup: string;
+    reattemptId: number;
+    isSelfLoop: boolean;
+  };
+
+export type ValidateOTPOutput = BaseETResponse & {
+  retryCount: number;
+};

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

@@ -0,0 +1,298 @@
+import { Platform, StyleSheet } from 'react-native';
+import { Fonts } from '../../../styles/executionTasks/CommonStyles';
+import { sHeight, sWidth } from '../../../components/utils/Scale';
+const styles = StyleSheet.create({
+  bottomView: {
+    padding: 16,
+    gap: 16,
+    flexDirection: 'row-reverse',
+    justifyContent: 'space-evenly',
+    backgroundColor: 'white',
+    borderTopWidth: 1,
+    borderColor: '#DDE3F9',
+  },
+  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',
+  },
+  retryButton: {
+    alignItems: 'flex-start',
+    marginVertical: 10,
+  },
+  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,
+  },
+  // new design
+  titleContainer: {
+    backgroundColor: '#ECF0FF',
+    padding: 16,
+  },
+  titleText: {
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    fontWeight: '400',
+    fontSize: 16,
+    lineHeight: 28,
+    color: '#3D445C',
+  },
+  contactListContainer: {
+    marginTop: sHeight(24),
+    gap: 16,
+    marginHorizontal: sWidth(16),
+    flex: 1,
+  },
+  headingTitle: {
+    lineHeight: 24,
+  },
+  contactCard: {
+    paddingHorizontal: sWidth(16),
+    paddingVertical: sWidth(12),
+    gap: 8,
+    borderRadius: 8,
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: '#E0E7FF',
+    marginBottom: sHeight(16),
+    // Shadow styling for iOS
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 6,
+
+    // Elevation for Android
+    elevation: 2,
+  },
+  selectedCard: {
+    borderWidth: 1,
+    borderColor: '#5B80F7',
+  },
+  columnContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignContent: 'center',
+    flex: 1,
+  },
+  rowContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignContent: 'center',
+    gap: 8,
+    flex: 1,
+    marginBottom: sHeight(4),
+  },
+  contactTitle: {
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_500Medium
+        : 'IBMPlexSans-Regular',
+    fontWeight: '500',
+    fontSize: 14,
+    lineHeight: 20,
+    color: '#3D445C',
+  },
+  contactLabel: {
+    color: '#A3AAC2',
+    lineHeight: 20,
+    fontSize: 14,
+  },
+  contactText: {
+    lineHeight: 20,
+    fontSize: 14,
+  },
+  radioIcon: {
+    height: sHeight(17),
+    width: sWidth(17),
+    marginTop: sHeight(2),
+  },
+  contactList: {
+    paddingBottom: sHeight(100),
+  },
+  otpContainer: {
+    marginTop: 24,
+    marginHorizontal: 16,
+    padding: 16,
+    gap: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#E0E7FF',
+    backgroundColor: '#FFF',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.1,
+    shadowRadius: 6,
+    elevation: 3, // Required for shadow on Android
+  },
+  otpTextMsg: {
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_500Medium
+        : 'IBMPlexSans-Regular',
+    fontWeight: '500',
+    fontSize: 16,
+    lineHeight: 24,
+    color: '#3D445C',
+  },
+  resendOtpMsg: {
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    fontWeight: '400',
+    fontSize: 16,
+    lineHeight: 24,
+    color: '#A3AAC2',
+  },
+  resendOtpBtn: {
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_500Medium
+        : 'IBMPlexSans-Regular',
+    fontWeight: '500',
+    fontSize: 16,
+    lineHeight: 24,
+    color: '#5B80F7',
+  },
+  errorMessage: {
+    color: '#DC2626',
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    fontWeight: '400',
+    fontSize: 12,
+    lineHeight: 16,
+  },
+  maxLimitReachBox: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 8,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    marginTop: sHeight(4),
+  },
+  maxLimitReachText: {
+    color: '#3D445C',
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    fontWeight: '400',
+    fontSize: 14,
+    marginTop: -2,
+    lineHeight: 20,
+  },
+  responseCard: {
+    paddingVertical: sHeight(40),
+    gap: 16,
+    alignContent: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 16,
+    borderColor: '#DDE3F9',
+    borderWidth: 1,
+    backgroundColor: '#fff',
+    marginHorizontal: 33, // Keeps horizontal margins
+  },
+  loadingCard: {
+    paddingVertical: sHeight(32),
+    paddingHorizontal: sHeight(16),
+    gap: 16,
+    alignItems: 'center', // Center the GIF horizontally
+    justifyContent: 'center', // Center the GIF vertically
+    borderRadius: 16,
+    borderColor: '#DDE3F9',
+    borderWidth: 1,
+    backgroundColor: '#fff',
+    marginHorizontal: 33,
+  },
+  otpResponseText: {
+    color: '#3D445C',
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_500Medium
+        : 'IBMPlexSans-Regular',
+    fontWeight: '500',
+    fontSize: 18,
+    lineHeight: 18,
+  },
+  loadingText: {
+    color: '#3D445C',
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    fontWeight: '400',
+    fontSize: 16,
+    lineHeight: 18,
+    letterSpacing: 0.25,
+  },
+  mainBtnStyles: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+    borderRadius: 8,
+    width: '100%',
+    backgroundColor: 'white',
+  },
+  disableBtn: {
+    borderWidth: 1,
+    borderColor: '#F9F9FB',
+  },
+  cancelBtnText: {
+    fontSize: 14,
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_600SemiBold
+        : 'IBMPlexSans-Regular',
+    textAlign: 'center',
+    fontWeight: '600',
+  },
+  activeBtnText: {
+    fontSize: 14,
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_500Medium
+        : 'IBMPlexSans-Regular',
+    fontWeight: '500',
+    color: '#fff',
+    textAlign: 'center',
+  },
+});
+
+export default styles;

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

@@ -0,0 +1,109 @@
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { FC, useEffect, useLayoutEffect } from 'react';
+import { BackHandler, FlatList, Text, View } from 'react-native';
+import { useFocusEffect } from '@react-navigation/native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+
+// Styles
+import styles from '../ValidateOtpStyles';
+
+// Types
+import { ValidateOTPInput } from '../ValidateOTPSchema';
+
+// Sub-components
+import { ContactCard } from '../sub-components/ContactCard';
+
+// Analytics
+import { fireEventWithScreenName } from '../../../../analytics/sentry/SentryAnalyticsUtils';
+import {
+  ScreenNameSdkConstants,
+  SentryEventNameSdkConstants,
+  SeverityLevelValue,
+} from '../../../../analytics/sentry/SentrySdkConstants';
+
+export const ContactListView: FC<ValidateOTPInput> = (props) => {
+  useEffect(() => {
+    props.setIsContactVisited(true);
+  }, [props]);
+  // Handle back-button click
+  useFocusEffect(
+    React.useCallback(() => {
+      BackHandler.addEventListener(
+        'hardwareBackPress',
+        props.handleBackNavigation
+      );
+      return () =>
+        BackHandler.removeEventListener(
+          'hardwareBackPress',
+          props.handleBackNavigation
+        );
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+  );
+
+  useLayoutEffect(() => {
+    props.navigation.setOptions({
+      title: props.title,
+      headerLeft: () => {
+        return (
+          <Icon
+            onPress={() => {
+              props.handleBackNavigation();
+              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, props.title]);
+
+  // *render contact card
+  const renderItem = ({ item }: { item: any }) => {
+    return (
+      <ContactCard
+        handleSelectContact={props.handleSelectContact}
+        contactDetails={item}
+      />
+    );
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View style={styles.titleContainer}>
+        <Text style={styles.titleText}>
+          {props?.generateMessage?.toString()?.length > 0
+            ? props.generateMessage
+            : 'Proceed to OTP verification? A verification code will be sent to the customer'}
+        </Text>
+      </View>
+      <View style={styles.contactListContainer}>
+        <Text style={[styles.titleText, styles.headingTitle]}>
+          Select the contact to receive the OTP
+        </Text>
+        <FlatList
+          style={styles.contactList}
+          data={props.contactList}
+          showsVerticalScrollIndicator={false}
+          automaticallyAdjustKeyboardInsets={true}
+          nestedScrollEnabled
+          keyExtractor={(item: any) => item.value.toString()}
+          renderItem={renderItem}
+        />
+      </View>
+    </View>
+  );
+};