@os1-platform/dispatch-mobile 2.1.2 → 2.1.3

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

@@ -0,0 +1,436 @@
+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';
+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';
+import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
+import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
+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';
+
+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);
+    }, [])
+  );
+
+  useLayoutEffect(() => {
+    props.navigation.setOptions({
+      title: props.title,
+      headerLeft: () => {
+        return (
+          <Icon
+            onPress={() => {
+              if (
+                props.taskMeta?.enableGoBack &&
+                hasGoBackConnector(props.applicableReasons)
+              )
+                setShowBackModal(true);
+              else props.navigation.goBack();
+            }}
+            name="arrow-back"
+            color={'black'}
+            size={25}
+            style={{
+              paddingRight: 15,
+              paddingTop: 5,
+            }}
+          />
+        );
+      },
+    });
+  }, [props.navigation, props.title]);
+
+  const retryConfig = parseRetryConfig(props.generationLogic?.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.generationLogic?.generateOnLoad)
+  );
+  const [retryCount, setRetryCount] = useState(0);
+
+  const [userInput, setUserInput] = useState({
+    captureInput: '',
+  });
+  const { captureInput: otpCode } = userInput;
+
+  const setOTPCode = (otpCode: string) => {
+    setUserInput({ ...userInput, captureInput: otpCode });
+  };
+
+  const [hasError, setHasError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const [snackBar, setSnackBar] = useState({
+    show: false,
+    type: SnackBarType.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
+                      )),
+                    });
+                  }
+                }
+              }
+            }}
+          >
+            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
+                )),
+              });
+            }}
+          >
+            Skip
+          </Button>
+        </View>
+      </View>
+    );
+  };
+
+  const renderRetryButton = () => {
+    const generationLogic = props.generationLogic;
+    const enableRetry = props.generationLogic?.enableRetry;
+
+    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();
+            }}
+          >{`${retryConfig.buttonTitle} ${timer ? `in ${timer}` : ''}`}</Button>
+        </View>
+      );
+    } else return null;
+  };
+
+  const renderErrorMessage = () => {
+    return errorMessage ? (
+      <Text style={styles.errorMessage}>{errorMessage}</Text>
+    ) : null;
+  };
+
+  const renderModal = () => {
+    return (
+      <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
+            )),
+          });
+          setShowBackModal(false);
+        }}
+        onFailure={() => setShowBackModal(false)}
+      />
+    );
+  };
+
+  if (sendOTP) {
+    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,
+              });
+            }}
+          />
+        </View>
+      </Provider>
+    );
+  }
+  if (!sendOTP) {
+    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}
+              otpCode={otpCode}
+              setOTPCode={setOTPCode}
+              hasError={hasError}
+              setHasError={setHasError}
+              setErrorMessage={setErrorMessage}
+            />
+            {renderErrorMessage()}
+            {renderRetryButton()}
+          </View>
+          {renderButtons()}
+          <SnackBarCustom
+            type={snackBar.type}
+            message={`${snackBar.message}`}
+            visible={snackBar.show}
+            onDismiss={() => {
+              setSnackBar({
+                show: false,
+                message: '',
+                type: SnackBarType.SUCCESS,
+              });
+            }}
+          />
+        </View>
+      </Provider>
+    );
+  }
+  return 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,
+  },
+});

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

@@ -0,0 +1,68 @@
+import type {
+  HTTPRequestBody,
+  PathParams,
+  QueryParams,
+} from '../../../utils/ApiUtils';
+import type {
+  BaseETRequest,
+  BaseETResponse,
+} from '../../../models/execTasks/ETBaseModels';
+import type { Headers, HTTPMethod } from '../httpRequest/HttpRequestETSchema';
+
+export interface API {
+  uri: string;
+  timeout?: number;
+  httpMethod: HTTPMethod;
+  headers?: Headers[];
+  requestBody?: HTTPRequestBody;
+  queryParams?: QueryParams[];
+  pathParams?: PathParams[];
+  responseJsonLogic: object;
+  errorJsonLogic: object;
+}
+
+export type ValidationRegex = string; // Regex to validate strings
+
+export interface RetryConfig {
+  buttonTitle: string; // Button Title if retry is enabled
+  maxAttempt: number; // Number of attempts allowed
+  delay: number; // Delay in enabling resend again
+}
+
+export interface GenerationLogic {
+  generateOnLoad: boolean; // Need to generate to OTP
+  enableRetry: boolean; // Need to enable retry
+  api: API; // base API to generate OTP
+  retryConfig?: RetryConfig; // Config for retry of OTP
+}
+
+export enum InputType {
+  STRING = 'string',
+  NUMBER = 'number',
+}
+
+export interface CaptureInput {
+  inputType: InputType; // Type of input to be captured
+  length: number; // Max length of OTP
+  validationRegex?: ValidationRegex; // Need to validate the input
+}
+
+export interface Value {
+  value: string;
+}
+
+export type Logic = { api: API } | { value: Value };
+
+export interface Validation {
+  selectedIndex: number;
+  logic: Logic;
+}
+
+export type ValidateOTPInput = BaseETRequest & {
+  generationLogic?: GenerationLogic;
+  captureInput: CaptureInput;
+  validation: Validation;
+  onSubmitET: (validateOTPOutput: ValidateOTPOutput) => void;
+};
+
+export type ValidateOTPOutput = BaseETResponse;

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

@@ -0,0 +1,24 @@
+export const INVALID_OTP = `Wrong or expired OTP. Please try again.`;
+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 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)"/>
+</mask>
+<g mask="url(#mask0_3391_199849)">
+<rect x="-28" y="-29" width="221" height="221" fill="#5B80F7"/>
+</g>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_3391_199849" transform="scale(0.0078125)"/>
+</pattern>
+<image id="image0_3391_199849" width="128" height="128" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
+`;
+export const DEFAULT_RETRY_CONFIG = {
+  buttonTitle: 'Resend OTP',
+  delay: 10,
+  maxAttempt: 3,
+};

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

@@ -0,0 +1,83 @@
+import { StyleSheet, Pressable, Keyboard, Platform } from 'react-native';
+import React, { useEffect } from 'react';
+import SplitTextInput from '../../../widgets/SplitTextInput';
+import { Fonts } from '../../../../styles/executionTasks/CommonStyles';
+import { InputType, CaptureInput } from '../ValidateOTPSchema';
+import { INVALID_REGEX } from '../constants';
+
+export interface OTPInputProps {
+  input: CaptureInput;
+  otpCode: string;
+  setOTPCode: (otpCode: string) => void;
+  hasError: boolean;
+  setHasError: (hasError: boolean) => void;
+  setErrorMessage: (errorMessage: string) => void;
+}
+
+const OTPInput = (props: OTPInputProps) => {
+  const maximumCodeLength = props.input.length;
+  const keyboardType =
+    props.input.inputType === InputType.NUMBER ? 'number-pad' : 'default';
+
+  useEffect(() => {
+    if (
+      props.input.validationRegex &&
+      props.otpCode.length === maximumCodeLength
+    ) {
+      const regex = new RegExp(props.input.validationRegex);
+      const hasError = !regex.test(props.otpCode);
+
+      props.setHasError(hasError);
+      if (hasError) props.setErrorMessage(INVALID_REGEX);
+      else props.setErrorMessage('');
+    }
+  }, [props.otpCode]);
+
+  return (
+    <>
+      <Pressable onPress={Keyboard.dismiss}>
+        <SplitTextInput
+          styles={styles.text}
+          value={props.otpCode}
+          onChange={(text) => {
+            if (props.input.validationRegex) {
+            }
+            if (props.hasError) {
+              props.setErrorMessage('');
+              props.setHasError(false);
+            }
+            props.setOTPCode(text);
+          }}
+          maxLength={maximumCodeLength}
+          keyboardType={keyboardType}
+          hasError={props.hasError}
+        />
+      </Pressable>
+    </>
+  );
+};
+
+export default OTPInput;
+
+const styles = StyleSheet.create({
+  text: {
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    color: '#3D445C',
+    fontSize: 20,
+    textAlign: 'center',
+  },
+  errorMessage: {
+    marginTop: 16,
+    marginHorizontal: 10,
+    color: '#DC2626',
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    fontSize: 12,
+    lineHeight: 16,
+  },
+});