finance-shared 0.0.20 → 0.0.22

package/dist/finance-shared-library.es.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import i18next from "i18next";
 import { default as default2 } from "i18next";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Dialog as Dialog$1, DialogTitle, DialogContent as DialogContent$1, DialogContentText, DialogActions as DialogActions$1, Button as Button$1, Typography as Typography$1, IconButton as IconButton$1, Box as Box$1, Tooltip, Zoom, TextField as TextField$1, Paper as Paper$1, Grid as Grid$1, styled as styled$3, CircularProgress as CircularProgress$1, Autocomplete as Autocomplete$1, Badge, Checkbox as Checkbox$1, Chip as Chip$1, Divider, RadioGroup, FormControlLabel, Radio, Grid2, Popover as Popover$1 } from "@mui/material";
+import { Dialog as Dialog$1, DialogTitle, DialogContent as DialogContent$1, DialogContentText, DialogActions as DialogActions$1, Button as Button$1, Typography as Typography$1, IconButton as IconButton$1, Box as Box$1, Tooltip, Zoom, TextField as TextField$1, Paper as Paper$1, Grid as Grid$1, styled as styled$3, CircularProgress as CircularProgress$1, Autocomplete as Autocomplete$1, Badge, Checkbox as Checkbox$1, Chip as Chip$1, Divider, RadioGroup, FormControlLabel, Radio, Grid2, InputAdornment as InputAdornment$1, Popover as Popover$1 } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import * as React from "react";
 import React__default, { useState, isValidElement, cloneElement, Children, useEffect, memo, createElement, useRef, useCallback, useMemo, createContext, useContext } from "react";
@@ -13,6 +13,7 @@ import emStyled from "@emotion/styled";
 import { ThemeContext } from "@emotion/react";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
+import { VisibilityOff, Visibility } from "@mui/icons-material";
 const confirmDialog$1 = { "cancel": "Cancel", "ok": "Ok", "confirm": "Confirm", "delete": "Delete", "save": "Save", "yes": "Yes", "no": "No" };
 const en$1 = {
   confirmDialog: confirmDialog$1
@@ -91,7 +92,16 @@ const locale$3 = {
   DURATION: "Duration",
   STAMP_DUTY: "Stamp Duty",
   LEGAL_FEES: "Legal Fees",
-  MONTHS: "Months"
+  MONTHS: "Months",
+  ENTER_SIGNING_OTP: "Enter OTP",
+  ENTER_SIGNING_OTP_DESC: "Enter the OTP sent to your registered mobile number to confirm signing.",
+  ENTER_SIGNING_PIN: "Enter PIN",
+  ENTER_SIGNING_PIN_DESC: "Enter your PIN to confirm signing.",
+  OTP: "OTP",
+  PIN: "PIN",
+  RESEND_OTP: "Resend OTP",
+  RESEND_OTP_IN: "Resend OTP in {{seconds}}s",
+  VERIFY_AND_SIGN: "Verify & Sign"
 };
 const locale$2 = {
   CHANGE_DETECT_TITLE: "Adakah anda pasti mahu membuang perubahan?",
@@ -160,7 +170,16 @@ const locale$2 = {
   DURATION: "Tempoh",
   STAMP_DUTY: "Duti Setem",
   LEGAL_FEES: "Yuran Guaman",
-  MONTHS: "Bulan"
+  MONTHS: "Bulan",
+  ENTER_SIGNING_OTP: "Masukkan OTP",
+  ENTER_SIGNING_OTP_DESC: "Masukkan OTP yang dihantar ke nombor telefon berdaftar anda untuk mengesahkan tandatangan.",
+  ENTER_SIGNING_PIN: "Masukkan PIN",
+  ENTER_SIGNING_PIN_DESC: "Masukkan PIN anda untuk mengesahkan tandatangan.",
+  OTP: "OTP",
+  PIN: "PIN",
+  RESEND_OTP: "Hantar Semula OTP",
+  RESEND_OTP_IN: "Hantar semula OTP dalam {{seconds}}s",
+  VERIFY_AND_SIGN: "Sahkan & Tandatangan"
 };
 i18next.addResourceBundle("en", "Dialog", locale$3);
 i18next.addResourceBundle("ms", "Dialog", locale$2);
@@ -5856,11 +5875,14 @@ function CustomDialog({
   content,
   size,
   maxWidth: maxWidth2,
-  hideCloseIcon = false
+  hideCloseIcon = false,
+  disableBackdropClose = false,
+  disableEscapeKeyDown = false,
+  closeIconDisabled = false
 }) {
   const dialogSize = maxWidth2 !== void 0 ? maxWidth2 : size || "md";
   const handleClose = (_event, reason) => {
-    if (hideCloseIcon && reason && reason === "backdropClick") return;
+    if (reason === "backdropClick" && (hideCloseIcon || disableBackdropClose)) return;
     onClose();
   };
   return /* @__PURE__ */ jsxs(
@@ -5870,6 +5892,7 @@ function CustomDialog({
       onClose: handleClose,
       maxWidth: dialogSize,
       fullWidth: true,
+      disableEscapeKeyDown,
       children: [
         /* @__PURE__ */ jsxs(DialogTitle, { children: [
           content.title,
@@ -5879,6 +5902,7 @@ function CustomDialog({
             {
               "aria-label": "close",
               onClick: onClose,
+              disabled: closeIconDisabled,
               sx: {
                 position: "absolute",
                 right: 8,
@@ -10396,13 +10420,30 @@ const DigitalProcessSignature = (request_data) => async (dispatch) => {
       }
       dispatch(setDocumentSignJPDF(""));
       dispatch(setSignedDocumentJPDF(response.result));
+      return true;
     }
+    return false;
   } catch (error) {
     dispatch(showMessage({ message: error.message, variant: "error" }));
+    return false;
   } finally {
     dispatch(setIsProcessSignatureLoading(false));
   }
 };
+const RequestSigningOtp = (financeApplicationId) => async (dispatch) => {
+  try {
+    dispatch(setIsRequestSigningOtpLoading(true));
+    await api.post(`/v1/DigitalSignature/RequestSigningOtp`, {
+      FinanceApplicationId: financeApplicationId
+    });
+    return true;
+  } catch (error) {
+    dispatch(showMessage({ message: error.message, variant: "error" }));
+    return false;
+  } finally {
+    dispatch(setIsRequestSigningOtpLoading(false));
+  }
+};
 const generateFromJPDF = (financeApplicationId) => async (dispatch) => {
   dispatch(setDocumentSignJPDFLoading(true));
   try {
@@ -10441,6 +10482,7 @@ const setIsChangeStatusDialogOpen = (value) => setLoadingState$1("isChangeStatus
 const setIsUserChangeStatusFormLoading = (value) => setLoadingState$1("isUserChangeStatusFormLoading", value);
 const setIsDocumentSignatureDialogOpen = (value) => setLoadingState$1("isDocumentSignatureDialogOpen", value);
 const setIsProcessSignatureLoading = (value) => setLoadingState$1("isProcessSignatureLoading", value);
+const setIsRequestSigningOtpLoading = (value) => setLoadingState$1("isRequestSigningOtpLoading", value);
 const setDocumentSignJPDFLoading = (value) => setLoadingState$1("isDocumentSignJPDFLoading", value);
 const setIsPdfDialogOpen = (value) => setLoadingState$1("isPdfDialogOpen", value);
 const setIsPopoverOpen = (value) => setLoadingState$1("isPopoverOpen", value);
@@ -10456,6 +10498,7 @@ const getIsChangeStatusDialogOpen = getLoadingStateFactory("isChangeStatusDialog
 const getIsUserChangeStatusFormLoading = getLoadingStateFactory("isUserChangeStatusFormLoading");
 const getIsDocumentSignatureDialogOpen = getLoadingStateFactory("isDocumentSignatureDialogOpen");
 const getIsProcessSignatureLoading = getLoadingStateFactory("isProcessSignatureLoading");
+const getIsRequestSigningOtpLoading = getLoadingStateFactory("isRequestSigningOtpLoading");
 const getDocumentSignJPDFLoading = getLoadingStateFactory("isDocumentSignJPDFLoading");
 const getIsPdfDialogOpen = getLoadingStateFactory("isPdfDialogOpen");
 const getIsPopoverOpen = getLoadingStateFactory("isPopoverOpen");
@@ -10495,6 +10538,7 @@ const initialState$1 = {
     isUserChangeStatusFormLoading: false,
     isDocumentSignatureDialogOpen: false,
     isProcessSignatureLoading: false,
+    isRequestSigningOtpLoading: false,
     isDocumentSignJPDFLoading: false,
     isPdfDialogOpen: false,
     isPopoverOpen: false
@@ -17730,6 +17774,10 @@ const loginUserRoles = {
   SuperAdmin: "super-admin"
 };
 const IMAGE_TYPES = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"];
+const AuthFactorMode = {
+  OTP: "OTP",
+  PIN: "PIN"
+};
 dayjs.extend(customParseFormat);
 function decodeUrlAndGetFileType(url) {
   try {
@@ -25928,6 +25976,13 @@ const PDFPreviewForTheSignature = ({
     applicationDetailsData
   );
   const [isTermsConfirmed, setIsTermsConfirmed] = useState(false);
+  const isMobileWebView = (() => {
+    try {
+      return localStorage.getItem("isMobileView") === "true";
+    } catch {
+      return false;
+    }
+  })();
   return /* @__PURE__ */ jsx(Dialog$1, { open, onClose, maxWidth: "lg", fullWidth: true, ...props, children: /* @__PURE__ */ jsxs(DialogContent$1, { className: "p-0", children: [
     !pdfOnly && (dialogTitle || financeCalculation) && /* @__PURE__ */ jsxs("div", { className: "px-16 pt-12 pb-16", children: [
       dialogTitle && /* @__PURE__ */ jsx(Typography$1, { variant: "h6", className: "font-semibold mb-12", children: dialogTitle }),
@@ -26000,7 +26055,21 @@ const PDFPreviewForTheSignature = ({
         ] }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "px-16 py-12", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "px-16 py-12", children: isMobileWebView ? (
+      // The embedded app WebView has no native PDF plugin, so a plain
+      // <embed> renders blank there. Route through Google's viewer
+      // instead, which fetches and rasterizes the PDF itself — regular
+      // browsers (desktop and mobile) keep the native <embed> below.
+      /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          src: `https://docs.google.com/viewer?embedded=true&url=${encodeURIComponent(filePath)}`,
+          width: "100%",
+          style: { height: pdfOnly ? "85vh" : "70vh", border: "none" },
+          title: "PDF preview"
+        }
+      )
+    ) : /* @__PURE__ */ jsx(
       "embed",
       {
         src: filePath,
@@ -26043,6 +26112,122 @@ const PDFPreviewForTheSignature = ({
     ) }) })
   ] }) });
 };
+const OTP_LENGTH = 6;
+const MAX_PIN_LENGTH = 12;
+const RESEND_SECONDS = 30;
+const AuthFactorStep = ({
+  open,
+  mode,
+  loading = false,
+  error,
+  onClose,
+  onSubmit,
+  onResendOtp,
+  resendLoading = false,
+  ColoredSubmitButton
+}) => {
+  const { t: t2 } = useTranslation("Dialog");
+  const [value, setValue] = useState("");
+  const [secondsLeft, setSecondsLeft] = useState(RESEND_SECONDS);
+  const [showValue, setShowValue] = useState(false);
+  useEffect(() => {
+    if (!open) return;
+    setValue("");
+    setSecondsLeft(RESEND_SECONDS);
+    setShowValue(false);
+  }, [open, mode]);
+  useEffect(() => {
+    if (mode !== AuthFactorMode.OTP || !open || secondsLeft <= 0) return;
+    const timer = setTimeout(() => setSecondsLeft((s4) => s4 - 1), 1e3);
+    return () => clearTimeout(timer);
+  }, [mode, open, secondsLeft]);
+  const handleChange = (newValue) => {
+    const digitsOnly = newValue.replace(/\D/g, "");
+    setValue(digitsOnly.slice(0, mode === AuthFactorMode.OTP ? OTP_LENGTH : MAX_PIN_LENGTH));
+  };
+  const handleResend = () => {
+    setSecondsLeft(RESEND_SECONDS);
+    onResendOtp == null ? void 0 : onResendOtp();
+  };
+  const isValueValid = mode === AuthFactorMode.OTP ? value.length === OTP_LENGTH : value.length > 0;
+  return /* @__PURE__ */ jsx(
+    CustomDialog,
+    {
+      open,
+      onClose,
+      maxWidth: "xs",
+      disableBackdropClose: true,
+      disableEscapeKeyDown: true,
+      closeIconDisabled: loading,
+      content: {
+        title: mode === AuthFactorMode.OTP ? t2("ENTER_SIGNING_OTP") : t2("ENTER_SIGNING_PIN"),
+        description: mode === AuthFactorMode.OTP ? t2("ENTER_SIGNING_OTP_DESC") : t2("ENTER_SIGNING_PIN_DESC"),
+        component: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-16", children: [
+          /* @__PURE__ */ jsx(
+            CommonTextField,
+            {
+              autoFocus: true,
+              label: mode === AuthFactorMode.OTP ? t2("OTP") : t2("PIN"),
+              type: mode === AuthFactorMode.PIN && !showValue ? "password" : "text",
+              inputMode: "numeric",
+              value,
+              onChange: handleChange,
+              error: !!error,
+              helperText: error,
+              isTextUpperCase: false,
+              fullWidth: true,
+              InputProps: mode === AuthFactorMode.PIN ? {
+                endAdornment: /* @__PURE__ */ jsx(InputAdornment$1, { position: "end", children: /* @__PURE__ */ jsx(
+                  IconButton$1,
+                  {
+                    onClick: () => setShowValue((s4) => !s4),
+                    edge: "end",
+                    tabIndex: -1,
+                    children: showValue ? /* @__PURE__ */ jsx(VisibilityOff, { fontSize: "small" }) : /* @__PURE__ */ jsx(Visibility, { fontSize: "small" })
+                  }
+                ) })
+              } : void 0,
+              "data-test-id": "auth-factor-input"
+            }
+          ),
+          mode === AuthFactorMode.OTP && /* @__PURE__ */ jsx(Box$1, { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+            ColoredSubmitButton,
+            {
+              variant: "text",
+              onClick: handleResend,
+              disabled: secondsLeft > 0 || resendLoading,
+              isLoading: resendLoading,
+              text: secondsLeft > 0 ? t2("RESEND_OTP_IN", { seconds: secondsLeft }) : t2("RESEND_OTP")
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-10", children: [
+            /* @__PURE__ */ jsx(
+              ColoredSubmitButton,
+              {
+                variant: "outlined",
+                onClick: onClose,
+                disabled: loading,
+                className: "rounded-6",
+                text: t2("CANCEL")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColoredSubmitButton,
+              {
+                variant: "contained",
+                onClick: () => onSubmit(value),
+                disabled: !isValueValid || loading,
+                isLoading: loading,
+                className: "rounded-6",
+                text: t2("VERIFY_AND_SIGN")
+              }
+            )
+          ] })
+        ] })
+      }
+    }
+  );
+};
 i18next.addResourceBundle("en", "Dialog", locale$3);
 i18next.addResourceBundle("ms", "Dialog", locale$2);
 function DocumentSigningDialog({
@@ -26052,30 +26237,66 @@ function DocumentSigningDialog({
   ColoredSubmitButton,
   financeCalculation,
   showConfirmCheckbox = false,
-  showTitle = true
+  showTitle = true,
+  requireAuthFactor = false,
+  isOfficer
 }) {
   const { t: t2 } = useTranslation("Dialog");
   const open = useSelector(getIsDocumentSignatureDialogOpen);
   const documentSignJPDF = useSelector(getDocumentSignJPDF);
   const signedDocumentJPDF = useSelector(getSignedDocumentJPDF);
   const isProcessSignatureLoading = useSelector(getIsProcessSignatureLoading);
+  const isRequestSigningOtpLoading = useSelector(getIsRequestSigningOtpLoading);
   const activeFinanceDetail = useSelector(getActiveFinanceDetail);
   const dispatch = useDispatch();
+  const [authFactorOpen, setAuthFactorOpen] = useState(false);
+  const getSignatureRole = () => {
+    if (loginUserDetail.data.slug === loginUserRoles.Admin) {
+      return digitalSignatureRole.Admin;
+    }
+    if (loginUserDetail.data.slug === loginUserRoles.Lawyer) {
+      return digitalSignatureRole.Lawyer;
+    }
+    return digitalSignatureRole.User;
+  };
   const onClose = () => {
+    setAuthFactorOpen(false);
     dispatch(setIsDocumentSignatureDialogOpen(false));
   };
   const handleButtonClick = () => {
-    let signatureRole = digitalSignatureRole.User;
-    if (loginUserDetail.data.slug === loginUserRoles.Admin) {
-      signatureRole = digitalSignatureRole.Admin;
-    } else if (loginUserDetail.data.slug === loginUserRoles.Lawyer) {
-      signatureRole = digitalSignatureRole.Lawyer;
+    if (!requireAuthFactor) {
+      const request_data = {
+        FinanceApplicationId: financeDetail.id,
+        SignatureRole: getSignatureRole()
+      };
+      dispatch(DigitalProcessSignature(request_data));
+      return;
+    }
+    if (isOfficer) {
+      setAuthFactorOpen(true);
+      return;
     }
+    dispatch(RequestSigningOtp(financeDetail.id)).then((success) => {
+      if (success) {
+        setAuthFactorOpen(true);
+      }
+    });
+  };
+  const handleAuthFactorClose = () => {
+    setAuthFactorOpen(false);
+  };
+  const handleAuthFactorSubmit = async (authFactorValue) => {
     const request_data = {
       FinanceApplicationId: financeDetail.id,
-      SignatureRole: signatureRole
+      AuthFactor: authFactorValue
     };
-    dispatch(DigitalProcessSignature(request_data));
+    const success = await dispatch(DigitalProcessSignature(request_data));
+    if (success) {
+      setAuthFactorOpen(false);
+    }
+  };
+  const handleResendOtp = () => {
+    dispatch(RequestSigningOtp(financeDetail.id));
   };
   const handleClose = (_event, reason) => {
     if (reason && reason === "backdropClick") return;
@@ -26094,11 +26315,13 @@ function DocumentSigningDialog({
     }
   };
   const handlePDFPreviewClose = () => {
+    setAuthFactorOpen(false);
     dispatch(setDocumentSignJPDF(""));
     dispatch(setActiveFinanceDetail(null));
     dispatch(setIsDocumentSignatureDialogOpen(false));
   };
   const handleSignedPDFClose = () => {
+    setAuthFactorOpen(false);
     dispatch(setSignedDocumentJPDF(""));
     dispatch(setActiveFinanceDetail(null));
     dispatch(setIsDocumentSignatureDialogOpen(false));
@@ -26166,7 +26389,7 @@ function DocumentSigningDialog({
         {
           filePath: signedDocumentJPDF || documentSignJPDF,
           open: !!(signedDocumentJPDF || documentSignJPDF),
-          isButtonLoading: isProcessSignatureLoading,
+          isButtonLoading: isProcessSignatureLoading || isRequestSigningOtpLoading,
           onClose: signedDocumentJPDF ? handleSignedPDFClose : handlePDFPreviewClose,
           bottomButtonLabel: t2("SIGN_DOCUMENT"),
           onConfirm: handleButtonClick,
@@ -26180,6 +26403,19 @@ function DocumentSigningDialog({
           showConfirmCheckbox,
           pdfOnly: !!signedDocumentJPDF
         }
+      ),
+      requireAuthFactor && /* @__PURE__ */ jsx(
+        AuthFactorStep,
+        {
+          open: authFactorOpen,
+          mode: isOfficer ? AuthFactorMode.PIN : AuthFactorMode.OTP,
+          loading: isProcessSignatureLoading,
+          onClose: handleAuthFactorClose,
+          onSubmit: handleAuthFactorSubmit,
+          onResendOtp: isOfficer ? void 0 : handleResendOtp,
+          resendLoading: isRequestSigningOtpLoading,
+          ColoredSubmitButton
+        }
       )
     ] })
   ] }) }) });
@@ -46686,9 +46922,9 @@ const useDesktopPicker = (_ref) => {
     additionalViewProps: {},
     wrapperVariant: "desktop"
   }));
-  const InputAdornment$1 = (_slots$inputAdornment = slots.inputAdornment) != null ? _slots$inputAdornment : InputAdornment;
+  const InputAdornment$12 = (_slots$inputAdornment = slots.inputAdornment) != null ? _slots$inputAdornment : InputAdornment;
   const _useSlotProps = useSlotProps({
-    elementType: InputAdornment$1,
+    elementType: InputAdornment$12,
     externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.inputAdornment,
     additionalProps: {
       position: "end"
@@ -46731,7 +46967,7 @@ const useDesktopPicker = (_ref) => {
   if (hasUIView) {
     fieldProps.InputProps = _extends({}, fieldProps.InputProps, {
       ref: containerRef,
-      [`${inputAdornmentProps.position}Adornment`]: /* @__PURE__ */ jsx(InputAdornment$1, _extends({}, inputAdornmentProps, {
+      [`${inputAdornmentProps.position}Adornment`]: /* @__PURE__ */ jsx(InputAdornment$12, _extends({}, inputAdornmentProps, {
         children: /* @__PURE__ */ jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
           children: /* @__PURE__ */ jsx(OpenPickerIcon, _extends({}, innerSlotProps == null ? void 0 : innerSlotProps.openPickerIcon))
         }))