@acuteinfo/common-screens 1.0.0

package/dist/index.js

@@ -0,0 +1,1472 @@
+import 'regenerator-runtime/runtime';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { TextField, GradientButton, utilFunction, FullScreenLoader } from '@acuteinfo/common-base';
+import { useState, useRef, useEffect, Fragment, useMemo, useReducer } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { makeStyles } from '@mui/styles';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import { Container, Grid, InputAdornment, IconButton, CircularProgress, FormHelperText, Typography, Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import OTPInput, { ResendOTP } from 'otp-input-react';
+import IconButton$1 from '@mui/material/IconButton';
+import clsx from 'clsx';
+import { useSnackbar } from 'notistack';
+import FingerprintSharpIcon from '@mui/icons-material/FingerprintSharp';
+import CryptoJS from 'crypto-js';
+
+const useStyles = makeStyles((theme) => ({
+    wrapper: {
+        minHeight: "100vh",
+        boxShadow: "0 3px 6px rgba(0,0,0,0.03)",
+        // background: "#fff",
+        background: "var(--theme-color2)",
+    },
+    loginEmp: {
+        background: "#fff",
+        padding: theme.spacing(2, 4),
+        display: "flex",
+        maxWidth: "400px",
+        margin: "auto",
+        boxShadow: "0 0 20px rgba(0,0,0,0.06)",
+        borderRadius: "8px",
+        [theme.breakpoints.down("sm")]: {
+            width: "100%",
+        },
+    },
+    formWrap: {
+        marginTop: theme.spacing(2),
+    },
+    loginBtn: {
+        minWidth: "100% !important",
+        margin: theme.spacing(2, 0),
+        fontSize: "1rem",
+        padding: "10px .75rem",
+        background: "rgb(128,0,0)",
+        border: 0,
+        color: "#fff !important",
+        fontWeight: 600,
+        letterSpacing: "0.02857em",
+        boxShadow: "none",
+        textTransform: "capitalize",
+        alignSelf: "flex-end",
+        "&:hover": {
+            background: "#fedad8",
+            boxShadow: "none",
+        },
+    },
+    OTPTimer: {
+        marginTop: "10px",
+        color: theme.palette.primary.main,
+        fontWeight: 600,
+    },
+    resendLink: {
+        marginTop: "10px",
+        cursor: "pointer",
+        color: theme.palette.secondary.main,
+        fontWeight: 600,
+        fontSize: "0.875 rem",
+    },
+    logo: {
+        marginBottom: theme.spacing(1),
+    },
+    loginLeft: {
+        [theme.breakpoints.down("sm")]: {
+            display: "none",
+        },
+    },
+    loginRight: {
+        background: "#fff",
+        padding: theme.spacing(2, 4),
+        display: "flex",
+        maxWidth: "400px",
+        margin: "auto",
+        boxShadow: "0 0 20px rgba(0,0,0,0.06)",
+        borderRadius: "8px",
+        [theme.breakpoints.down("sm")]: {
+            width: "100%",
+        },
+        "& img": {
+            alignSelf: "center",
+        },
+    },
+    loginImg: {},
+    verifybutton: {
+        alignSelf: "center",
+        // marginBottom: "10px",
+        // marginTop: "10px",
+        padding: "5px",
+    },
+    otpButtons: {
+    // padding: "10px",
+    },
+    divflex: {
+        display: "flex",
+    },
+    otpinputpadding: {
+        "& input": {
+            marginRight: "25px !important",
+            border: "1.42444px solid var(--theme-color3)",
+            borderRadius: "10px",
+            width: "45px !important",
+            height: "45px !important",
+            marginBottom: "15px",
+            boxShadow: "0px 5.69775px 11.3955px rgba(66, 99, 199, 0.16)",
+        },
+    },
+    ibtnvisible: {
+        // padding: "7px !important",
+        // alignItems: "baseline",
+        marginBottom: "15px",
+    },
+    btnvisibleoff: {
+        display: "none",
+    },
+    OTPalignName: {
+        display: "flex",
+        alignItems: "center",
+        // justifyContent: "space-between",
+        marginBottom: "12px",
+        color: "#1C1C1C",
+        fonWeight: "400",
+        fontSize: "17px",
+        lineHeight: "33px",
+    },
+    resendOTPalign: {
+        color: "var(--theme-color3)",
+        fonWeight: "400",
+        fontSize: "17px",
+        lineHeight: "33px",
+        margin: "0 auto",
+        // marginTop: "15px",
+        // display: "block !important",
+    },
+    resendbtnLink: {
+        textDecoration: "underline",
+        color: "var(--theme-color3)",
+        cursor: "pointer",
+        "&:hover": {
+            textDecoration: "underline",
+            color: "var(--theme-color3)",
+        },
+    },
+    dialogTitleClass: {
+        background: "var(--theme-color5)",
+        padding: "6px 15px !important",
+        margin: "10px",
+        color: "var(--theme-color2)",
+        borderRadius: "4px",
+        "& h2": {
+            fontWeight: "500 !important",
+        },
+    },
+    lang_svg: {
+        marginRight: "10px",
+        width: "22px",
+        height: "22px",
+    },
+    dialogContent: {
+        padding: "0px 15px",
+        "& p": {
+            whiteSpace: "pre-wrap",
+            color: "black",
+            marginTop: "8px",
+            marginBottom: "6px",
+        },
+    },
+    button: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexDirection: "column",
+        margin: "6px",
+        background: "var(--theme-color1)",
+        "&:hover": {
+            background: "var(--theme-color1) !important",
+        },
+    },
+}));
+
+// import { Language_App } from "pages_audit/appBar/language";
+const UsernamePasswordField = ({ classes, loginState, verifyUsernamePassword, }) => {
+    const [input, setInput] = useState({ userName: "", password: "" });
+    const [showPasswordTime, setShowPasswordTime] = useState(0);
+    const showPassword = Date.now() < showPasswordTime;
+    const [, forceUpdate] = useState();
+    const timerRef = useRef(null);
+    const { t } = useTranslation();
+    useEffect(() => {
+        return () => clearTimeout(timerRef.current);
+    }, []);
+    const handleChange = (event) => {
+        const name = event.target.name;
+        const value = event.target.value;
+        if (name === "userName" && value) {
+            loginState.isUsernameError = false;
+        }
+        if (name === "password" && value) {
+            loginState.isPasswordError = false;
+        }
+        setInput((values) => ({ ...values, [name]: value }));
+    };
+    const inputRef = useRef(null);
+    const inputPassRef = useRef(null);
+    const inputButtonRef = useRef(null);
+    useEffect(() => {
+        let timeoutCd;
+        if (loginState.isUsernameError) {
+            timeoutCd = setTimeout(() => {
+                inputRef?.current?.focus?.();
+            }, 1000);
+        }
+        else if (loginState.isPasswordError) {
+            timeoutCd = setTimeout(() => {
+                inputPassRef?.current?.focus?.();
+            }, 1000);
+        }
+        return () => {
+            if (timeoutCd) {
+                clearTimeout(timeoutCd);
+            }
+        };
+    }, [loginState.isUsernameError, loginState.isPasswordError]);
+    useEffect(() => {
+        let timeoutCd;
+        if (loginState?.otpmodelClose ?? false) {
+            setInput((values) => ({ ...values, password: "" }));
+            timeoutCd = setTimeout(() => {
+                inputPassRef?.current?.focus?.();
+            }, 1500);
+        }
+        return () => {
+            if (timeoutCd) {
+                clearTimeout(timeoutCd);
+            }
+        };
+    }, [loginState.otpmodelClose]);
+    return (jsx(Fragment, { children: jsx(Container, { maxWidth: "xs", children: jsxs(Grid, { alignItems: "center", style: { paddingTop: "20px" }, children: [jsx("div", { style: {
+                            color: "#000000 !important",
+                            fontSize: "30px",
+                            fontWeight: "600",
+                            // fontFamily: "Poppins",
+                            alignItems: "center",
+                            fontStyle: "normal",
+                            lineHeight: "150%",
+                        }, children: jsx("h3", { children: t("SignIn") }) }), jsx("div", { className: "", style: {
+                            color: "#949597",
+                            fontSize: "16px",
+                            fontWeight: "400",
+                            // fontFamily: "Poppins",
+                            alignItems: "center",
+                            fontStyle: "normal",
+                            width: "360px",
+                        }, children: t("SignInWithUserIDandPassword") }), jsxs("div", { className: classes.formWrap, children: [jsx(TextField
+                            // variant="filled"
+                            // color="secondary"
+                            , { 
+                                // variant="filled"
+                                // color="secondary"
+                                autoFocus: true, label: t("UserID"), 
+                                // placeholder="User ID"
+                                placeholder: String(t("UserID")), style: {
+                                    marginTop: "10px",
+                                    marginBottom: "17px",
+                                }, fullWidth: true, type: "text", name: "userName", value: input.userName.trimStart() || "", onChange: handleChange, error: loginState.isUsernameError, helperText: loginState.isUsernameError
+                                    ? t(loginState.userMessageforusername)
+                                    : "", InputLabelProps: { shrink: true }, disabled: loginState.loading, autoComplete: "off", ref: inputRef, onKeyDown: (e) => {
+                                    if (e.key === "Enter") {
+                                        inputButtonRef?.current?.click?.();
+                                    }
+                                }, inputProps: {
+                                    maxLength: "16",
+                                } }), jsx("div", { style: {
+                                    display: "flex",
+                                    flexDirection: "row-reverse",
+                                    marginTop: "8px",
+                                }, children: jsx(TextField, { label: t("Password"), 
+                                    // variant="filled"
+                                    // color="secondary"
+                                    placeholder: String(t("EnterPassword")), InputLabelProps: {
+                                        shrink: true,
+                                    }, fullWidth: true, type: showPassword ? "text" : "password", name: "password", value: input.password, onChange: handleChange, error: loginState.isPasswordError, helperText: loginState.isPasswordError
+                                        ? t(loginState.userMessageforpassword)
+                                        : "", disabled: loginState.loading, ref: inputPassRef, onKeyDown: (e) => {
+                                        if (e.key === "Enter") {
+                                            inputButtonRef?.current?.click?.();
+                                        }
+                                    }, InputProps: {
+                                        endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(IconButton, { "aria-label": "toggle password visibility", onClick: () => {
+                                                    if (!showPassword) {
+                                                        setShowPasswordTime(Date.now() + 5000);
+                                                        timerRef.current = setTimeout(() => forceUpdate(Date.now()), 5000);
+                                                    }
+                                                    else if (showPassword)
+                                                        setShowPasswordTime(0);
+                                                }, onMouseDown: (e) => e.preventDefault(), disabled: loginState.loading, children: showPassword ? jsx(Visibility, {}) : jsx(VisibilityOff, {}) }) })),
+                                    }, inputProps: { maxLength: "16" } }, "employee") }), jsx("div", { style: { marginTop: "20px", display: "flex" }, children: jsx("div", { style: { flex: "auto", textAlign: "end" }, children: jsx("a", { href: "forgotpassword", style: { color: "var(--theme-color3)" }, children: t("ForgotPassword") }) }) }), jsx("div", { style: { marginTop: "20px", display: "flex" }, children: jsx("div", { style: {
+                                        flex: "auto",
+                                        textAlign: "center",
+                                        marginTop: "5px",
+                                        marginBottom: "17px",
+                                    }, children: jsx(GradientButton, { style: {
+                                            borderRadius: loginState.loading ? "50%" : "10px",
+                                            height: loginState.loading ? "40px" : "100%",
+                                            width: loginState.loading ? "0px" : "100%",
+                                            minWidth: loginState.loading ? "40px" : "80px",
+                                        }, fullWidth: true, disabled: loginState.loading, onClick: () => verifyUsernamePassword((input.userName || "").toLowerCase(), input.password), ref: inputButtonRef, children: loginState.loading ? (jsx(CircularProgress, { size: 25, thickness: 4.6 })) : (t("Next")) }) }) })] })] }) }) }));
+};
+
+const OTPModel = ({ classes, OTPResendRequest, open, handleClose, loginState, VerifyOTP, OTPError, setOTPError, previousStep, setNewRequestID = (id) => { }, otpresendCount = 0, resendFlag, }) => {
+    const [OTP, setOTP] = useState("");
+    const [showPasswordTime, setShowPasswordTime] = useState(0);
+    const showPassword = Date.now() < showPasswordTime;
+    const [, forceUpdate] = useState();
+    const timerRef = useRef(null);
+    useEffect(() => {
+        return () => clearTimeout(timerRef.current);
+    }, []);
+    const [btnshow, setbtnshow] = useState(false);
+    const inputButtonRef = useRef(null);
+    const [resendotpLoading, setResendotpLoading] = useState(false);
+    const { enqueueSnackbar } = useSnackbar();
+    const { t } = useTranslation();
+    // const renderButton = (buttonProps) => {
+    //   let { remainingTime, ...other } = buttonProps;
+    //   return resendotpLoading ? (
+    //     <a
+    //       remainingtime={remainingTime}
+    //       {...other}
+    //       className={clsx(
+    //         classes.resendbtnLink,
+    //         !btnshow && classes.btnvisibleoff
+    //       )}
+    //     >
+    //       {t("otp.ResendOTP")}
+    //     </a>
+    //   ) : null;
+    // };
+    const renderButton = (buttonProps) => {
+        let { remainingTime, ...other } = buttonProps;
+        return resendotpLoading ? (jsxs("a", { className: clsx(classes.resendbtnLink, !btnshow && classes.btnvisibleoff), style: { cursor: "wait" }, children: [t("otp.GetNewOTP"), " ", jsx(CircularProgress, { size: 20, color: "secondary" })] })) : (jsx("a", { remainingtime: remainingTime, ...other, className: clsx(classes.resendbtnLink, !btnshow && classes.btnvisibleoff), children: t("otp.GetNewOTP") }));
+    };
+    const ClickEventHandler = () => {
+        if (!Boolean(OTP) || OTP.length < 6) {
+            setOTPError("otp.EnterOTPDigit");
+        }
+        else {
+            setOTPError("");
+            VerifyOTP(OTP);
+        }
+    };
+    const handleResendClick = async () => {
+        setResendotpLoading(true);
+        const { status, data, message } = await OTPResendRequest(resendFlag === "FORGET_PW" || resendFlag === "FORGT_TOTP"
+            ? loginState?.requestCd
+            : loginState?.transactionID, loginState?.username, resendFlag, loginState.auth_data?.[0]?.company_ID, loginState.auth_data?.[0]?.branch_cd);
+        setResendotpLoading(false);
+        if (status === "0") {
+            setNewRequestID(data?.TRAN_CD);
+            setbtnshow(false);
+            enqueueSnackbar(message, { variant: "success" });
+        }
+        else {
+            enqueueSnackbar(message, { variant: "error" });
+        }
+    };
+    const handleCloseEvent = () => {
+        setOTPError("");
+        setOTP("");
+        handleClose("");
+    };
+    const renderTime = (remainingtime) => {
+        if (parseInt(remainingtime) === 0) {
+            setTimeout(() => {
+                setbtnshow(true);
+            }, 700);
+        }
+        return (jsxs("span", { className: clsx(btnshow && classes.btnvisibleoff), children: [t("otp.OtpExpired"), " ", remainingtime, " ", t("otp.second")] }));
+    };
+    useEffect(() => {
+        if (loginState?.otpmodelClose ?? false) {
+            handleCloseEvent();
+        }
+    }, [loginState.otpmodelClose]);
+    return (jsx(Fragment, { children: jsx(Container, { maxWidth: "sm", children: jsx(Grid, { alignItems: "center", marginTop: "4em", children: jsxs("div", { 
+                    // className={classes.formWrap}
+                    style: {
+                    // marginRight: "25px",
+                    // width: "100%",
+                    // position: "relative",
+                    // right: "42px",
+                    // bottom: "13px",
+                    }, children: [jsx("div", { style: {
+                                color: "#000000",
+                                fontSize: "30px",
+                                fontWeight: "600",
+                                // fontFamily: "Poppins",
+                                alignItems: "center",
+                                fontStyle: "normal",
+                                lineHeight: "150%",
+                                marginBottom: "10px",
+                            }, children: t("otp.OTPAuthentication") }), jsx("div", { style: {
+                                color: "#949597",
+                                fontSize: "16px",
+                                fontWeight: "400",
+                                alignItems: "center",
+                                fontStyle: "normal",
+                                lineHeight: "33px",
+                            }, children: t("otp.EnterOTP") }), jsxs("div", { className: classes.OTPalignName, children: [t("otp.Hello"), " ", loginState?.username
+                                    ? loginState.username.charAt(0).toUpperCase() +
+                                        loginState.username.slice(1)
+                                    : null, jsx(ResendOTP
+                                // onResendClick={() => setbtnshow(false)}
+                                , { 
+                                    // onResendClick={() => setbtnshow(false)}
+                                    onResendClick: handleResendClick, 
+                                    // onTimerComplete={() => setbtnshow(true)}
+                                    renderButton: renderButton, renderTime: renderTime, maxTime: loginState?.otpValidFor ?? 60, className: classes.resendOTPalign })] }), jsxs("div", { className: classes.divflex, onKeyDown: (e) => {
+                                if (e.key === "Enter") {
+                                    inputButtonRef?.current?.click?.();
+                                }
+                            }, children: [jsx(OTPInput, { value: OTP, onChange: setOTP, autoFocus: true, OTPLength: 6, otpType: "number", disabled: false, secure: !showPassword, className: classes.otpinputpadding }), jsx(IconButton$1, { "aria-label": "toggle password visibility", onClick: () => {
+                                        if (!showPassword) {
+                                            setShowPasswordTime(Date.now() + 5000);
+                                            timerRef.current = setTimeout(() => forceUpdate(Date.now()), 5000);
+                                        }
+                                        else if (showPassword)
+                                            setShowPasswordTime(0);
+                                    }, onMouseDown: (e) => e.preventDefault(), disabled: loginState.otploading, className: classes.ibtnvisible, children: showPassword ? jsx(Visibility, {}) : jsx(VisibilityOff, {}) })] }), Boolean(OTPError) ? (jsx(FormHelperText, { style: { color: "red" }, children: OTPError })) : null, jsxs("div", { style: {
+                                display: "flex",
+                                gap: "10px",
+                                margin: "42px 0 0 42px",
+                                width: "60%",
+                            }, children: [jsx(GradientButton
+                                // fullWidth
+                                , { 
+                                    // fullWidth
+                                    disabled: loginState.otploading, onClick: () => {
+                                        previousStep(false, "");
+                                    }, className: classes.otpButtons, 
+                                    // color={"var(--theme-color3) "}
+                                    sx: {
+                                        border: "var(--theme-color3)1px solid",
+                                        minWidth: "50%",
+                                        background: "var(--theme-color2)",
+                                        borderRadius: "10px",
+                                        "&:hover": {
+                                            background: "var(--theme-color2) !important",
+                                        },
+                                    }, children: t("otp.Back") }), jsx(GradientButton, { style: {
+                                        borderRadius: loginState.loading ? "50%" : "10px",
+                                        height: loginState.loading ? "40px" : "100%",
+                                        width: loginState.loading ? "0px" : "100%",
+                                        minWidth: loginState.loading ? "40px" : "80px",
+                                    }, fullWidth: true, disabled: loginState.loading, onClick: ClickEventHandler, ref: inputButtonRef, className: classes.otpButtons, children: loginState.loading ? (jsx(CircularProgress, { size: 25, thickness: 4.6 })) : (t("otp.VerifyOTP")) })] })] }) }) }) }));
+};
+const OTPModelForm = ({ classes, OTPResendRequest, handleClose, loginState, VerifyOTP, OTPError, setOTPError, resendFlag, setNewRequestID = (id) => { }, otpresendCount = 0, }) => {
+    const [OTP, setOTP] = useState("");
+    const [showPasswordTime, setShowPasswordTime] = useState(0);
+    const showPassword = Date.now() < showPasswordTime;
+    const [, forceUpdate] = useState();
+    const timerRef = useRef(null);
+    useEffect(() => {
+        return () => clearTimeout(timerRef.current);
+    }, []);
+    const [btnshow, setbtnshow] = useState(false);
+    const [resendotpLoading, setResendotpLoading] = useState(false);
+    const inputButtonRef = useRef(null);
+    const { enqueueSnackbar } = useSnackbar();
+    const { t } = useTranslation();
+    const renderButton = (buttonProps) => {
+        let { remainingTime, ...other } = buttonProps;
+        return resendotpLoading ? (jsxs("a", { className: clsx(classes.resendbtnLink, !btnshow && classes.btnvisibleoff), style: { cursor: "wait" }, children: [t("otp.GetNewOTP"), " ", jsx(CircularProgress, { size: 20, color: "secondary" })] })) : (jsx("a", { remainingtime: remainingTime, ...other, className: clsx(classes.resendbtnLink, !btnshow && classes.btnvisibleoff), children: t("otp.GetNewOTP") }));
+    };
+    const ClickEventHandler = () => {
+        if (!Boolean(OTP) || OTP.length < 6) {
+            setOTPError("otp.EnterOTPDigit");
+        }
+        else {
+            setOTPError("");
+            VerifyOTP(OTP);
+        }
+    };
+    const handleResendClick = async () => {
+        setResendotpLoading(true);
+        const { status, data, message } = await OTPResendRequest(resendFlag === "FORGET_PW"
+            ? loginState?.requestCd
+            : loginState?.transactionID, loginState?.username, resendFlag, loginState?.company_ID, loginState?.branch_cd);
+        setResendotpLoading(false);
+        if (status === "0") {
+            setNewRequestID(data?.TRAN_CD);
+            setbtnshow(false);
+            enqueueSnackbar(message, { variant: "success" });
+        }
+        else {
+            enqueueSnackbar(message, { variant: "error" });
+        }
+    };
+    const handleCloseEvent = () => {
+        setOTPError("");
+        setOTP("");
+        handleClose();
+    };
+    const renderTime = (remainingtime) => {
+        if (parseInt(remainingtime) === 0) {
+            setTimeout(() => {
+                setbtnshow(true);
+            }, 700);
+        }
+        return (jsxs("span", { className: clsx(btnshow && classes.btnvisibleoff), children: [t("otp.OtpExpired"), " ", remainingtime] }));
+    };
+    useEffect(() => {
+        if (loginState?.otpmodelClose ?? false) {
+            handleCloseEvent();
+        }
+    }, [loginState.otpmodelClose]);
+    return (jsx(Fragment, { children: jsx(Grid, { alignItems: "center", children: jsxs("div", { children: [jsx("div", { style: {
+                            color: "#000000",
+                            fontSize: "30px",
+                            fontWeight: "600",
+                            // fontFamily: "Poppins",
+                            alignItems: "center",
+                            fontStyle: "normal",
+                            lineHeight: "150%",
+                            marginBottom: "10px",
+                        }, children: t("otp.OTPAuthentication") }), jsxs("div", { className: classes.OTPalignName, children: [t("otp.Hello"), " ", loginState?.username
+                                ? loginState.username.charAt(0).toUpperCase() +
+                                    loginState.username.slice(1)
+                                : null, loginState.otploading ||
+                                otpresendCount >= 3 ||
+                                loginState?.auth_type === "TOTP" ? null : (jsx(ResendOTP, { onResendClick: handleResendClick, 
+                                // onTimerComplete={() => setbtnshow(true)}
+                                renderButton: renderButton, renderTime: renderTime, maxTime: loginState?.otpValidFor ?? 60, className: classes.resendOTPalign }))] }), jsxs("div", { className: classes.divflex, onKeyDown: (e) => {
+                            if (e.key === "Enter") {
+                                inputButtonRef?.current?.click?.();
+                            }
+                        }, children: [jsx(OTPInput, { value: OTP, onChange: setOTP, autoFocus: true, OTPLength: 6, otpType: "number", disabled: false, secure: !showPassword, className: classes.otpinputpadding }), jsx(IconButton$1, { "aria-label": "toggle password visibility", onClick: () => {
+                                    if (!showPassword) {
+                                        setShowPasswordTime(Date.now() + 5000);
+                                        timerRef.current = setTimeout(() => forceUpdate(Date.now()), 5000);
+                                    }
+                                    else if (showPassword)
+                                        setShowPasswordTime(0);
+                                }, onMouseDown: (e) => e.preventDefault(), disabled: loginState.otploading, className: classes.ibtnvisible, children: showPassword ? jsx(Visibility, {}) : jsx(VisibilityOff, {}) })] }), Boolean(OTPError) ? (jsx(FormHelperText, { style: { color: "red" }, children: OTPError })) : null, loginState?.auth_type === "TOTP" ? (jsx("div", { style: { flex: "auto" }, children: jsx("a", { href: "forgot-totp", style: { color: "var(--theme-color3)" }, children: "Forgot TOTP" }) })) : (jsx(Fragment$1, {})), jsxs("div", { style: {
+                            display: "flex",
+                            gap: "10px",
+                            margin: "42px 0 0 42px",
+                            width: "60%",
+                        }, children: [jsx(GradientButton, { fullWidth: true, disabled: loginState.otploading, onClick: handleCloseEvent, className: classes.otpButtons, 
+                                // starticon={"West"}
+                                // color={"var(--theme-color2) !important"}
+                                // rotateIcon="scale(1.4) rotateX(360deg)"
+                                style: {
+                                    border: "var(--theme-color3)1px solid",
+                                    color: "var(--theme-color2)",
+                                    // background: "var(--theme-color2)",
+                                    borderRadius: "10px",
+                                    minWidth: "48%",
+                                }, children: t("otp.Back") }), jsx(GradientButton, { style: {
+                                    borderRadius: loginState.otploading ? "50%" : "10px",
+                                    height: loginState.otploading ? "40px" : "100%",
+                                    width: loginState.otploading ? "0px" : "100%",
+                                    minWidth: loginState.otploading ? "40px" : "80px",
+                                }, 
+                                // fullWidth
+                                disabled: loginState.loading, onClick: ClickEventHandler, ref: inputButtonRef, className: classes.otpButtons, children: loginState.otploading ? (jsx(CircularProgress, { size: 25, thickness: 4.6 })) : (t("otp.VerifyOTP")) })] })] }) }) }));
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".spinner-wrap{position:relative}.spinner-item{animation:zoom 2s linear .75s infinite;border:1px solid #949597;border-radius:50%;height:250px;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:250px}.spinner-item--2{animation-delay:1.25s}.spinner-item--3{animation-delay:1.75s}@keyframes zoom{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}50%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) scale(.6)}}.image{height:50px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.progress{backdrop-filter:blur(2px) brightness(101%);border:1px solid #b0b0b0;border-radius:4px;box-shadow:0 0 3px #b0b0;margin:0 auto;width:20em}.bar{background:#4263c7;height:4px;width:65%}";
+styleInject(css_248z);
+
+const VerifyFinger = ({ classes, loginState, verifyFinger, previousStep, }) => {
+    const { t } = useTranslation();
+    return (jsx(Fragment, { children: jsx(Container, { maxWidth: "xs", children: jsxs(Grid, { alignItems: "center", children: [jsxs("div", { style: {
+                            marginRight: "25px",
+                            width: "102%",
+                            // marginBottom: "55px",
+                        }, children: [jsx("br", {}), jsx("div", { style: {
+                                    color: "#000000",
+                                    fontSize: "34px",
+                                    fontWeight: "600",
+                                    // fontFamily: "Poppins",
+                                    alignItems: "center",
+                                    fontStyle: "normal",
+                                    lineHeight: "150%",
+                                    marginBottom: "10px",
+                                }, children: t("Biometric.BiometrixAuthentication") }), jsx("div", { style: {
+                                    color: "#949597",
+                                    fontSize: "18px",
+                                    fontWeight: "400",
+                                    // fontFamily: "Poppins",
+                                    alignItems: "center",
+                                    fontStyle: "normal",
+                                    lineHeight: "33px",
+                                    // marginBottom: "10px",
+                                }, children: t("Biometric.Kindlyplaceyoufinger") }), jsx("br", {}), jsxs(Typography, { variant: "h5", style: { color: "#000000" }, children: [t("otp.Hello"), " ", "", ` ${loginState?.username
+                                        ? loginState.username.charAt(0).toUpperCase() +
+                                            loginState.username.slice(1)
+                                        : null}`] }), jsx("br", {}), jsx("div", { className: loginState?.isBiometricError
+                                    ? classes.eFingerUi
+                                    : classes.fingerUi, children: jsxs("div", { className: "spinner-wrap", children: [jsx(FingerprintSharpIcon, { sx: {
+                                                fontSize: "80px",
+                                                opacity: "0.4",
+                                                borderRadius: "50%",
+                                                display: "flex",
+                                                margin: "0 auto",
+                                                "&:after": {
+                                                    borderBottom: "2px solid #26A456",
+                                                },
+                                            }, className: loginState?.isBiometricError ? classes.FingerIcon : null, color: loginState?.isBiometricError ? "error" : "inherit" }), loginState?.isScanning ? (jsxs(Fragment$1, { children: [jsx("div", { className: "spinner-item", style: {
+                                                        border: loginState?.isScanning
+                                                            ? "1px solid #949597"
+                                                            : " 1px solid red",
+                                                    } }), jsx("div", { className: "spinner-item spinner-item--2", style: {
+                                                        border: loginState?.isScanning
+                                                            ? "1px solid #949597"
+                                                            : "1px solid red",
+                                                    } }), jsx("div", { className: "spinner-item spinner-item--3", style: {
+                                                        border: loginState?.isScanning
+                                                            ? "1px solid #949597"
+                                                            : "1px solid red",
+                                                    } })] })) : null] }) }), jsx("div", { className: classes.biometric, children: jsxs("div", { style: { marginTop: "50px" }, children: [jsx("div", { className: loginState.isScanning ? "progress" : "hide", children: jsx("div", { className: "bar", style: { width: loginState.isScanning ? "30%" : "0%" } }) }), jsx("h3", { style: {
+                                                display: "flex",
+                                                marginTop: "20px",
+                                                justifyContent: "space-around",
+                                                color: loginState?.isBiometricError
+                                                    ? "rgb(255 0 0 / 65%)"
+                                                    : "inherit",
+                                            }, children: loginState?.isBiometricError
+                                                ? loginState?.userMessage
+                                                : loginState?.loading
+                                                    ? t("Biometric.Loading")
+                                                    : loginState?.isScanning
+                                                        ? t("Biometric.Scanning")
+                                                        : null })] }) })] }), jsxs("div", { style: {
+                            display: "flex",
+                            justifyContent: "center",
+                            margin: "42px 0 0 42px",
+                            // margin: "38px 0 0 0",
+                            gap: "10px",
+                        }, children: [jsx(GradientButton, { fullWidth: true, disabled: loginState.loading, onClick: () => {
+                                    previousStep(false, "");
+                                }, className: classes.otpButtons, 
+                                // starticon={"West"}
+                                // rotateIcon="scale(1.4) rotateX(360deg)"
+                                // color={"var(--theme-color3) !important"}
+                                style: {
+                                    border: "var(--theme-color3)1px solid",
+                                    color: "var(--theme-color3)",
+                                    background: "var(--theme-color2)",
+                                    borderRadius: "10px",
+                                    minWidth: "48%",
+                                }, children: t("otp.Back") }), jsx(GradientButton, { style: {
+                                    borderRadius: loginState.loading ? "50%" : "10px",
+                                    height: loginState.loading ? "40px" : "100%",
+                                    width: loginState.loading ? "0px" : "100%",
+                                    minWidth: loginState.loading ? "40px" : "80px",
+                                    // width: loginState.loading ? "0px" : "90%",
+                                    // minWidth: loginState.loading ? "40px" : "80px",
+                                }, disabled: loginState.loading, onKeyDown: (e) => e.keyCode === 13 && verifyFinger, onClick: verifyFinger, className: classes.otpButtons, children: loginState.loading ? (jsx(CircularProgress, { size: 25, thickness: 4.6, style: { color: "#fff" } })) : (t("Biometric.Verify")) })] })] }) }) }));
+};
+
+const capture = async () => {
+    var MFS100Request = {
+        Quality: 60,
+        TimeOut: 10,
+    };
+    var jsondata = JSON.stringify(MFS100Request);
+    const rawResponse = await fetch("http://localhost:8004/mfs100/capture", {
+        method: "POST",
+        headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+        },
+        body: jsondata,
+    });
+    const content = await rawResponse.json();
+    return content;
+};
+
+const decryptString = (encryptString) => {
+    var secretKey = "SUPERACUTE@MKS";
+    var keyBytes = CryptoJS.PBKDF2(secretKey, "Ivan Medvedev", {
+        keySize: 48 / 4,
+        iterations: 1000,
+    });
+    console.log(keyBytes.toString());
+    // take first 32 bytes as key (like in C# code)
+    var key = new CryptoJS.lib.WordArray.init(keyBytes.words, 32);
+    // // skip first 32 bytes and take next 16 bytes as IV
+    var iv = new CryptoJS.lib.WordArray.init(keyBytes.words.splice(32 / 4), 16);
+    // console.log(key.toString());
+    //console.log(encryptString, CryptoJS.enc.Base64.parse(encryptString));
+    var dec = CryptoJS.AES.decrypt({
+        ciphertext: CryptoJS.enc.Base64.parse(CryptoJS.enc.Base64.parse(encryptString).toString(CryptoJS.enc.Utf8)),
+    }, key, {
+        iv: iv,
+    });
+    console.log("CryptoJS.AES.decrypt", dec);
+    return dec.toString(CryptoJS.enc.Utf8).split(String.fromCharCode(0)).join("");
+};
+const matchFinger = async (rows, captureFinger) => {
+    var promise = new Promise((resolve, reject) => {
+        //console.log("matchFinger", rows, typeof rows);
+        if (typeof rows === "string") {
+            rows = JSON.parse(rows);
+        }
+        rows.forEach(async (element, i) => {
+            try {
+                var galleryTemplate = decryptString(element.IMG_DATA);
+                var MFS100Request = {
+                    GalleryTemplate: galleryTemplate,
+                    ProbTemplate: captureFinger,
+                    BioType: "Iso",
+                };
+                var jsondata = JSON.stringify(MFS100Request);
+                await fetch("http://localhost:8004/mfs100/verify", {
+                    method: "POST",
+                    headers: {
+                        Accept: "application/json",
+                        "Content-Type": "application/json",
+                    },
+                    body: jsondata,
+                })
+                    .then((response) => response.json())
+                    .then((response) => {
+                    if (response?.ErrorCode === "0" && response["Status"]) {
+                        resolve({
+                            status: true,
+                            errorCode: "0",
+                            errorMessage: "",
+                            isError: false,
+                            sr_cd: element.SR_CD,
+                        });
+                        return;
+                    }
+                    if (rows.length === i + 1) {
+                        resolve({
+                            status: false,
+                            errorCode: response.ErrorCode,
+                            errorMessage: response.ErrorMessage,
+                            isError: false,
+                        });
+                        return;
+                    }
+                })
+                    .catch((reason) => {
+                    resolve({
+                        status: false,
+                        errorCode: "999",
+                        errorMessage: reason,
+                        isError: true,
+                    });
+                });
+            }
+            catch (err) {
+                console.log(err);
+                resolve({
+                    status: false,
+                    errorCode: "999",
+                    errorMessage: "Something went wrong!",
+                    isError: true,
+                });
+            }
+        });
+    });
+    return promise;
+};
+
+const BankDetails = ({ bannerDetails }) => {
+    const [loginImageURL, setLoginImageURL] = useState(null);
+    const urlObj = useRef(null);
+    const classes = useStyles();
+    useNavigate();
+    // let path = require("assets/sound/successSound.mp3").default;
+    // let audio = new Audio(path);
+    // useEffect(() => {
+    //   if (isLoggedIn()) {
+    //     navigate("/cbsenfinity", { replace: true });
+    //   }
+    // }, [navigate, isLoggedIn]);
+    const banner = useMemo(() => bannerDetails, []);
+    useEffect(() => {
+        if (Boolean(banner.bannerImg)) {
+            let blob = utilFunction.base64toBlob(banner.bannerImg);
+            urlObj.current =
+                typeof blob === "object" && Boolean(blob)
+                    ? URL.createObjectURL(blob)
+                    : "";
+            setLoginImageURL(urlObj.current);
+        }
+    }, [banner]);
+    return (jsx(Fragment$1, { children: jsxs(Grid, { item: true, xs: 6, md: 6, lg: 6, className: classes.loginLeft, children: [jsx(Grid, { item: true, xs: 12, md: 12, lg: 12, style: { height: "70vh" }, children: jsx("img", { alt: "", style: {
+                            width: "100%",
+                            height: "100%",
+                            objectFit: "cover",
+                            objectPosition: "center",
+                        }, src: Boolean(loginImageURL) ? loginImageURL : "" }) }), jsx(Grid, { item: true, xs: 12, md: 12, lg: 12, style: {
+                        height: "30vh",
+                        background: "var(--theme-color5)",
+                    }, children: jsxs(Container, { maxWidth: "sm", children: [jsxs("div", { className: "text", style: {
+                                    color: "white",
+                                    fontStyle: "normal",
+                                    fontSize: "35px",
+                                    paddingTop: "30px",
+                                }, children: [banner.bannerTitle ?? "", jsx("span", { style: { marginLeft: "8px", fontWeight: "900" } })] }), jsx("div", { style: {
+                                    lineHeight: "27px",
+                                    fontSize: "15px",
+                                    fontWeight: "500px",
+                                    letterSpacing: "0.02em",
+                                    color: "#ebedee",
+                                    maxWidth: "464px",
+                                }, children: banner.bannerNote ?? "" })] }) })] }) }));
+};
+
+const PasswordRotation = ({ classes, ResetPassword, open, username, accessToken, tokenType, handleClose, }) => {
+    const inputButtonRef = useRef(null);
+    const { enqueueSnackbar } = useSnackbar();
+    const { t } = useTranslation();
+    const [input, setInput] = useState({
+        userName: username,
+        oldpassword: "",
+        password: "",
+        confirmpassword: "",
+    });
+    const [pwdReset, setPasswordReset] = useState({
+        isError: false,
+        errorMessage: "",
+        isLoading: false,
+        isoldPwdError: false,
+        oldpassworderror: "",
+        isnewpwdError: false,
+        newpassworderror: "",
+        isconfirmnewpwdError: false,
+        confirmnewpassworderror: "",
+    });
+    const handleCloseEvent = () => {
+        handleClose("");
+    };
+    const ClickEventHandler = async () => {
+        let isError = false;
+        let setPwdData = {
+            isError: false,
+            errorMessage: "",
+            isLoading: false,
+            isoldPwdError: false,
+            oldpassworderror: "",
+            isnewpwdError: false,
+            newpassworderror: "",
+            isconfirmnewpwdError: false,
+            confirmnewpassworderror: "",
+        };
+        if (!Boolean(input.oldpassword)) {
+            setPwdData.isoldPwdError = true;
+            setPwdData.oldpassworderror = "Current Password is required.";
+            isError = true;
+        }
+        let pwdData = utilFunction.ValidatePassword(input.password);
+        if (Boolean(pwdData)) {
+            setPwdData.isnewpwdError = true;
+            setPwdData.newpassworderror = pwdData;
+            isError = true;
+        }
+        if (Boolean(input.oldpassword) &&
+            Boolean(input.password) &&
+            input.oldpassword === input.password) {
+            setPwdData.isnewpwdError = true;
+            setPwdData.newpassworderror =
+                "The new password cannot be the same as the old password";
+            isError = true;
+        }
+        if (!Boolean(input.confirmpassword)) {
+            setPwdData.isconfirmnewpwdError = true;
+            setPwdData.confirmnewpassworderror = "Confirm new password is required.";
+            isError = true;
+        }
+        else if (Boolean(input.password) &&
+            input.password !== input.confirmpassword) {
+            setPwdData.isconfirmnewpwdError = true;
+            setPwdData.confirmnewpassworderror =
+                "New Password and Confirm Password did not matched";
+            isError = true;
+        }
+        if (isError) {
+            setPasswordReset(setPwdData);
+        }
+        else {
+            setPasswordReset((values) => ({ ...values, isLoading: true }));
+            let response = await ResetPassword(input.userName, input.oldpassword, input.password, accessToken, tokenType);
+            setPasswordReset((values) => ({ ...values, isLoading: false }));
+            if (response.status === "0") {
+                enqueueSnackbar("Password successfully changed.", {
+                    variant: "success",
+                });
+                handleClose("0");
+            }
+            else {
+                setPasswordReset((values) => ({
+                    ...values,
+                    isError: true,
+                    errorMessage: response.message,
+                }));
+            }
+        }
+    };
+    const handleChange = (event) => {
+        const name = event.target.name;
+        let value = event.target.value;
+        if (name === "oldpassword" && Boolean(value)) {
+            setPasswordReset((values) => ({ ...values, isoldPwdError: false }));
+        }
+        else if (name === "password" && Boolean(value)) {
+            setPasswordReset((values) => ({ ...values, isnewpwdError: false }));
+        }
+        else if (name === "confirmpassword" && Boolean(value)) {
+            setPasswordReset((values) => ({
+                ...values,
+                isconfirmnewpwdError: false,
+            }));
+        }
+        setInput((values) => ({ ...values, [name]: value }));
+    };
+    return (jsx(Fragment, { children: jsx(Container, { maxWidth: "xs", children: jsxs(Grid, { alignItems: "center", children: [jsx("div", { style: {
+                            color: "#000000 !important",
+                            fontSize: "30px",
+                            fontWeight: "600",
+                            alignItems: "center",
+                            fontStyle: "normal",
+                        }, children: jsx("h3", { children: "Password Rotation" }) }), jsx("div", { className: "", style: {
+                            color: "#949597",
+                            fontSize: "18px",
+                            fontWeight: "400",
+                            alignItems: "center",
+                            fontStyle: "normal",
+                            width: "360px",
+                        }, children: "Please Verify OTP" }), jsxs("div", { className: classes.formWrap, children: [jsx(TextField, { label: "User ID", placeholder: "Enter User ID", fullWidth: true, type: "text", name: "userName", value: input.userName || "", onChange: handleChange, InputLabelProps: { shrink: true }, disabled: true, autoComplete: "off", inputProps: { maxLength: 16 }, style: { paddingBottom: "8px" } }), jsx(TextField, { autoFocus: true, label: "Current Password", placeholder: "Enter Current Password", fullWidth: true, type: "password", name: "oldpassword", value: input.oldpassword || "", onChange: handleChange, error: pwdReset.isoldPwdError, helperText: pwdReset.isoldPwdError ? t(pwdReset.oldpassworderror) : "", InputLabelProps: { shrink: true }, disabled: pwdReset.isLoading, autoComplete: "off", onKeyDown: (e) => {
+                                    if (e.key === "Enter") {
+                                        inputButtonRef?.current?.click?.();
+                                    }
+                                }, inputProps: { maxLength: 16 }, style: { paddingBottom: "8px" } }), jsx(TextField, { label: "New Password", placeholder: "Enter New Password", fullWidth: true, type: "password", name: "password", value: input.password || "", onChange: handleChange, error: pwdReset.isnewpwdError, helperText: pwdReset.isnewpwdError ? t(pwdReset.newpassworderror) : "", InputLabelProps: { shrink: true }, disabled: pwdReset.isLoading, autoComplete: "off", onKeyDown: (e) => {
+                                    if (e.key === "Enter") {
+                                        inputButtonRef?.current?.click?.();
+                                    }
+                                }, inputProps: { maxLength: 16 }, style: { paddingBottom: "8px" } }), jsx(TextField, { label: "Confirm New Password", placeholder: "Enter confirm new password", fullWidth: true, type: "password", name: "confirmpassword", value: input.confirmpassword || "", onChange: handleChange, error: pwdReset.isconfirmnewpwdError, helperText: pwdReset.isconfirmnewpwdError
+                                    ? t(pwdReset.confirmnewpassworderror)
+                                    : "", InputLabelProps: { shrink: true }, disabled: pwdReset.isLoading, autoComplete: "off", onKeyDown: (e) => {
+                                    if (e.key === "Enter") {
+                                        inputButtonRef?.current?.click?.();
+                                    }
+                                }, inputProps: { maxLength: 16 }, style: { paddingBottom: "8px" } }), pwdReset.isError ? (jsx(FormHelperText, { style: { color: "red" }, children: pwdReset.errorMessage })) : null] }), jsxs("div", { style: {
+                            display: "flex",
+                            gap: "10px",
+                            margin: "20px 0 0 10px",
+                            width: "94%",
+                        }, children: [jsx(GradientButton, { fullWidth: true, disabled: pwdReset.isLoading, onClick: handleCloseEvent, className: classes.otpButtons, style: {
+                                    border: "var(--theme-color3)1px solid",
+                                    color: "var(--theme-color3)",
+                                    // pebbackground: "var(--theme-color2)",
+                                    borderRadius: "10px",
+                                }, children: "Back" }), jsx(GradientButton, { style: {
+                                    borderRadius: pwdReset.isLoading ? "50%" : "10px",
+                                    height: pwdReset.isLoading ? "40px" : "100%",
+                                    width: pwdReset.isLoading ? "0px" : "100%",
+                                    minWidth: pwdReset.isLoading ? "40px" : "80px",
+                                }, fullWidth: true, disabled: pwdReset.isLoading, onClick: ClickEventHandler, ref: inputButtonRef, className: classes.otpButtons, children: pwdReset.isLoading ? (jsx(CircularProgress, { size: 25, thickness: 4.6 })) : ("Update") })] })] }) }) }));
+};
+
+const inititalState = {
+    username: "",
+    firstName: "",
+    lastName: "",
+    loading: false,
+    otploading: false,
+    isError: false,
+    isUsernameError: false,
+    isPasswordError: false,
+    userMessage: "",
+    OtpuserMessage: "",
+    userMessageforpassword: "",
+    userMessageforusername: "",
+    currentFlow: "username",
+    transactionID: "",
+    access_token: "",
+    token_type: "",
+    otpmodelClose: false,
+    authType: "",
+    isScanning: false,
+    auth_data: [],
+    company_ID: "",
+    Branch_CD: "",
+    auth_type: "O",
+    otpValidFor: 60,
+};
+const reducer = (state, action) => {
+    switch (action.type) {
+        case "inititateUserFingerVerification":
+        case "inititateOTPVerification": {
+            return {
+                ...state,
+                loading: true,
+                isError: false,
+                isUsernameError: false,
+                isPasswordError: false,
+                isOTPError: false,
+                isBiometricError: false,
+                userMessage: "",
+            };
+        }
+        case "inititateUserFingerScanner": {
+            return { ...state, isScanning: true, isBiometricError: false };
+        }
+        case "usernameandpasswordrequired": {
+            return {
+                ...state,
+                loading: false,
+                isError: true,
+                isUsernameError: true,
+                isPasswordError: true,
+                otploading: false,
+                userMessage: action?.payload?.error,
+                userMessageforpassword: action?.payload?.errorPassword,
+                userMessageforusername: action?.payload?.errorUsername,
+                username: "",
+                transactionID: "",
+            };
+        }
+        case "passwordVerificationFailure":
+            return {
+                ...state,
+                loading: false,
+                isError: true,
+                isUsernameError: false,
+                isPasswordError: true,
+                otploading: false,
+                userMessage: action?.payload?.error,
+                userMessageforpassword: action?.payload?.errorPassword,
+                username: "",
+                transactionID: "",
+            };
+        case "usernameVerificationFailure": {
+            return {
+                ...state,
+                loading: false,
+                isError: true,
+                isUsernameError: true,
+                isPasswordError: false,
+                otploading: false,
+                userMessage: action?.payload?.error,
+                userMessageforusername: action?.payload?.errorUsername,
+                username: "",
+                transactionID: "",
+            };
+        }
+        case "inititatePasswordVerification": {
+            return {
+                ...state,
+                loading: true,
+                isError: false,
+                isUsernameError: false,
+                isPasswordError: false,
+                otploading: false,
+                userMessage: "",
+                userMessageforusername: "",
+                userMessageforpassword: "",
+                username: "",
+                transactionID: "",
+                access_token: "",
+            };
+        }
+        case "passwordRotation": {
+            return {
+                ...state,
+                loading: false,
+                username: action?.payload?.username,
+                access_token: action?.payload?.access_token,
+                token_type: action?.payload?.token_type,
+            };
+        }
+        case "passwordRotationsuccess": {
+            return {
+                ...state,
+                loading: false,
+                otpmodelClose: Boolean(action?.payload?.otpmodelclose),
+            };
+        }
+        case "passwordVerificationSuccessful": {
+            return {
+                ...state,
+                loading: false,
+                otploading: false,
+                transactionID: action?.payload?.transactionID,
+                username: action?.payload?.username,
+                auth_type: action?.payload?.auth_type,
+                OtpuserMessage: "",
+                access_token: action?.payload?.access_token,
+                token_type: action?.payload?.token_type,
+                otpmodelClose: false,
+                currentFlow: "OTP",
+                authType: action?.payload?.authType,
+                auth_data: action?.payload?.auth_data,
+                otpValidFor: action?.payload?.otpValidFor,
+                company_ID: action?.paylod?.company_ID,
+            };
+        }
+        case "inititatebiometricVerification": {
+            return {
+                ...state,
+                loading: true,
+                otploading: true,
+                OtpuserMessage: "",
+                otpmodelClose: false,
+            };
+        }
+        case "biometricVerificationFailure":
+            return {
+                ...state,
+                loading: false,
+                isError: true,
+                isBiometricError: true,
+                userMessage: action?.payload?.error,
+                isScanning: false,
+            };
+        case "biometricVerificationSuccessful":
+            return {
+                ...state,
+                loading: false,
+                isError: false,
+                isBiometricError: false,
+                state: action.payload,
+                isScanning: false,
+            };
+        case "OTPVerificationComplate": {
+            return {
+                ...state,
+                loading: false,
+                otploading: false,
+                OtpuserMessage: "",
+            };
+        }
+        case "OTPVerificationFailed": {
+            return {
+                ...state,
+                loading: false,
+                otploading: false,
+                OtpuserMessage: action?.payload?.error,
+                otpmodelClose: Boolean(action?.payload?.otpmodelclose),
+            };
+        }
+        case "OTPResendSuccess": {
+            return {
+                ...state,
+                transactionID: action?.payload?.transactionID,
+            };
+        }
+        case "backToUsernameVerification": {
+            return {
+                ...inititalState,
+                isPasswordError: action?.payload?.isError,
+                userMessageforpassword: action?.payload?.errorMessage,
+            };
+        }
+        default: {
+            return state;
+        }
+    }
+};
+const AuthControllerWrapper = ({ bannerDetails, logoUrl, loading, loginFn, veirfyUsernameandPassword, verifyOTP, OTPResendRequest, ResetPassword, }) => {
+    // const { isLoggedIn, login } = useContext(AuthContext);
+    const classes = useStyles();
+    useNavigate();
+    const [loginState, dispath] = useReducer(reducer, inititalState);
+    const [openpwdreset, setOpenPwdReset] = useState(false);
+    const failureCount = useRef(0);
+    const [dashboardLogoURL, setDashboardLogoURL] = useState(null);
+    const urlObj = useRef(null);
+    const { t } = useTranslation();
+    const otpResendRef = useRef(1);
+    // useEffect(() => {
+    //   if (isLoggedIn()) {
+    //     navigate("/cbsenfinity", { replace: true });
+    //   }
+    // }, [navigate, isLoggedIn]);
+    // const {
+    //   data: imageData,
+    //   isLoading,
+    //   isFetching,
+    // } = useQuery<any, any>(["getLoginImageData"], () =>
+    //   API.getLoginImageData({ APP_TRAN_CD: "51" })
+    // );
+    // const imageDataString = JSON.stringify(imageData);
+    // localStorage.setItem("imageData", imageDataString);
+    // const imageDataFromStorage: any = localStorage.getItem("imageData");
+    useEffect(() => {
+        if (Boolean(logoUrl)) {
+            let blob = utilFunction.base64toBlob(logoUrl);
+            urlObj.current =
+                typeof blob === "object" && Boolean(blob)
+                    ? URL.createObjectURL(blob)
+                    : "";
+            setDashboardLogoURL(urlObj.current);
+        }
+    }, [logoUrl]);
+    // useEffect(() => {
+    //   GeneralAPI.setDocumentName("Enfinity");
+    // }, []);
+    const verifyUsernamePassword = async (username, password) => {
+        if (Boolean(username) && Boolean(password)) {
+            dispath({ type: "inititatePasswordVerification" });
+            const { status, data, message, responseType, access_token } = await veirfyUsernameandPassword(username, password);
+            if (status === "0" && responseType === "S") {
+                dispath({
+                    type: "passwordRotation",
+                    payload: {
+                        username: username,
+                        access_token: access_token?.access_token,
+                        token_type: access_token?.token_type,
+                    },
+                });
+                setOpenPwdReset(true);
+            }
+            else if (status === "0") {
+                dispath({
+                    type: "passwordVerificationSuccessful",
+                    payload: {
+                        transactionID: data?.REQUEST_CD,
+                        username: username,
+                        access_token: access_token?.access_token,
+                        token_type: access_token?.token_type,
+                        authType: data?.AUTH_TYPE,
+                        auth_data: [
+                            {
+                                company_ID: data?.BASE_COMP_CD ?? "",
+                                branch_cd: data?.BASE_BRANCH_CD,
+                            },
+                        ],
+                        otpValidFor: data?.OTP_VALID,
+                    },
+                });
+            }
+            else {
+                dispath({
+                    type: "passwordVerificationFailure",
+                    payload: { error: message, errorPassword: message },
+                });
+            }
+        }
+        else if (!Boolean(username) && !Boolean(password)) {
+            dispath({
+                type: "usernameandpasswordrequired",
+                payload: {
+                    error: "UsernamenandPasswordisRequired",
+                    errorUsername: "UsernameisRequired",
+                    errorPassword: "PasswordisRequired",
+                },
+            });
+        }
+        else if (!Boolean(username)) {
+            dispath({
+                type: "usernameVerificationFailure",
+                payload: {
+                    error: "UsernameisRequired",
+                    errorUsername: "UsernameisRequired",
+                },
+            });
+        }
+        else {
+            dispath({
+                type: "passwordVerificationFailure",
+                payload: {
+                    error: "PasswordisRequired",
+                    errorPassword: "PasswordisRequired",
+                },
+            });
+        }
+    };
+    const VerifyOTP = async (OTPNumber) => {
+        if (Boolean(OTPNumber) && OTPNumber.toString().length === 6) {
+            dispath({ type: "inititateOTPVerification" });
+            const { status, data, message } = await verifyOTP(loginState.transactionID, 
+            // loginState.app_transactionId,
+            loginState.username, OTPNumber, loginState.access_token, loginState.token_type, loginState.authType);
+            console.log("menuapierror", message);
+            if (status === "0") {
+                // try {
+                //   audio.play();
+                // } catch (error) {
+                //   console.log(error);
+                // }
+                dispath({ type: "OTPVerificationComplate" });
+                loginFn(data);
+            }
+            else if (status === "999") {
+                dispath({
+                    type: "OTPVerificationFailed",
+                    payload: { error: message, otpmodelclose: true },
+                });
+                // enqueueSnackbar(message, { variant: "error" });
+            }
+            else {
+                dispath({
+                    type: "OTPVerificationFailed",
+                    payload: { error: message, otpmodelclose: false },
+                });
+            }
+        }
+        else {
+            dispath({
+                type: "OTPVerificationFailed",
+                payload: { error: "Please enter a 6 digit OTP number" },
+            });
+        }
+    };
+    const handlePasswordRotationClose = (flag) => {
+        if (flag === "0") {
+            dispath({
+                type: "passwordRotationsuccess",
+                payload: { otpmodelclose: true },
+            });
+        }
+        setOpenPwdReset(false);
+    };
+    const changeUserName = (isError = false, errorMessage = "") => {
+        dispath({
+            type: "backToUsernameVerification",
+            payload: {
+                isError: isError,
+                errorMessage: errorMessage,
+            },
+        });
+    };
+    const verifyFinger = async () => {
+        try {
+            dispath({ type: "inititateUserFingerScanner" });
+            const fingerResponse = await capture();
+            if (fingerResponse?.ErrorCode === "0") {
+                dispath({ type: "inititateUserFingerVerification" });
+                const promise = await matchFinger(loginState.auth_data, fingerResponse.IsoTemplate);
+                if (promise.isError) {
+                    dispath({
+                        type: "biometricVerificationFailure",
+                        payload: {
+                            error: promise?.errorMessage ?? "Something went wrong.",
+                        },
+                    });
+                }
+                else {
+                    const { status, data, message } = await verifyOTP(loginState.transactionID, loginState.username, String(promise?.sr_cd ?? "0"), loginState.access_token, loginState.token_type, loginState.authType, promise.status ? "Y" : "N");
+                    if (status === "0" && promise.status) {
+                        dispath({ type: "biometricVerificationSuccessful" });
+                        loginFn(data);
+                    }
+                    else if (status === "0" && !promise.status) {
+                        failureCount.current = failureCount.current + 1;
+                        dispath({
+                            type: "biometricVerificationFailure",
+                            payload: {
+                                error: "Finger Not Match.Please Try Again",
+                            },
+                        });
+                        if (failureCount.current >= 3)
+                            changeUserName(true, "Finger Not Match.Please Try Again");
+                    }
+                    else if (status === "99") {
+                        dispath({
+                            type: "biometricVerificationFailure",
+                            payload: {
+                                error: message ?? "Finger Not Match.Please Try Again",
+                            },
+                        });
+                    }
+                    else if (status === "999") {
+                        dispath({
+                            type: "biometricVerificationFailure",
+                            payload: {
+                                error: message ?? "Finger Not Match.Please Try Again",
+                            },
+                        });
+                        changeUserName(true, message ?? "Finger Not Match.Please Try Again");
+                    }
+                    else {
+                        dispath({
+                            type: "biometricVerificationFailure",
+                            payload: {
+                                error: message ?? "Finger Not Match.Please Try Again",
+                            },
+                        });
+                    }
+                }
+            }
+            else {
+                dispath({
+                    type: "biometricVerificationFailure",
+                    payload: {
+                        error: fingerResponse?.ErrorMessage ?? t("Biometric.MFS100NotFound"),
+                    },
+                });
+            }
+        }
+        catch (e) {
+            dispath({
+                type: "biometricVerificationFailure",
+                payload: {
+                    error: e?.message ?? t("Biometric.Unknownerroroccured"),
+                },
+            });
+        }
+    };
+    return (jsx(Fragment$1, { children: loading ? (jsx(FullScreenLoader, {})) : (jsx(Fragment$1, { children: jsxs(Grid, { container: true, style: { height: "100vh", overflow: "hidden" }, children: [jsx(BankDetails, { bannerDetails: bannerDetails }), jsxs(Grid, { item: true, xs: 11, md: 6, lg: 6, sm: 6, children: [jsx(Grid, { container: true, direction: "row", justifyContent: "flex-end", alignItems: "center", padding: "25px", children: jsx(Tooltip, { describeChild: true, title: "Enfinity-CBS-UI-V1.0.17", children: jsx("img", { src: Boolean(dashboardLogoURL) ? dashboardLogoURL : "", alt: "Logo" }) }) }), openpwdreset ? (jsx(PasswordRotation, { classes: classes, ResetPassword: ResetPassword, open: openpwdreset, username: loginState.username, accessToken: loginState.access_token, tokenType: loginState.token_type, handleClose: handlePasswordRotationClose })) : (jsx(Fragment$1, { children: loginState.currentFlow === "username" ? (jsx(UsernamePasswordField, { classes: classes, loginState: loginState, verifyUsernamePassword: verifyUsernamePassword }, "username")) : (jsx(Fragment$1, { children: loginState.authType === "OTP" ? (jsx(OTPModel, { OTPResendRequest: OTPResendRequest, classes: classes, loginState: loginState, VerifyOTP: VerifyOTP, previousStep: changeUserName, OTPError: t(loginState?.OtpuserMessage ?? ""), setOTPError: (error) => {
+                                            dispath({
+                                                type: "OTPVerificationFailed",
+                                                payload: { error: error },
+                                            });
+                                        }, open: true, handleClose: changeUserName, resendFlag: "LOGIN", setNewRequestID: (newRequestID) => {
+                                            dispath({
+                                                type: "OTPResendSuccess",
+                                                payload: { transactionID: newRequestID },
+                                            });
+                                            otpResendRef.current = otpResendRef.current + 1;
+                                        }, otpresendCount: otpResendRef.current }, "otp")) : loginState.authType === "TOTP" ? (jsxs(Fragment$1, { children: [" ", jsx(OTPModelForm, { OTPResendRequest: OTPResendRequest, classes: classes, 
+                                                // handleClose={() => {}}
+                                                handleClose: changeUserName, loginState: loginState, VerifyOTP: VerifyOTP, OTPError: loginState?.OtpuserMessage ?? "", setOTPError: (error) => {
+                                                    dispath({
+                                                        type: "OTPVerificationFailed",
+                                                        payload: { error: error },
+                                                    });
+                                                }, resendFlag: "LOGIN", setNewRequestID: (newRequestID) => {
+                                                    dispath({
+                                                        type: "OTPResendSuccess",
+                                                        payload: { transactionID: newRequestID },
+                                                    });
+                                                    otpResendRef.current = otpResendRef.current + 1;
+                                                }, otpresendCount: otpResendRef.current }, "OTPForm")] })) : (jsx(VerifyFinger, { classes: classes, loginState: loginState, verifyFinger: verifyFinger, previousStep: changeUserName }, "biometric")) })) }))] })] }) })) }));
+};
+
+export { AuthControllerWrapper };
+//# sourceMappingURL=index.js.map