@authme/identity-verification 2.8.24 → 2.8.26

package/index.js

@@ -7,7 +7,7 @@ import 'core-js/modules/es.promise.js';
 import { getTranslateInstance, EventListenerService, TrackingEvent, generateStatus, StatusDescription, AuthmeError, ErrorCode, Feature, StatusEvent, StatusView, StatusAction, setRequestLoggingFunc, setAccessToken, getCustomerState } from '@authme/core';
 import { EAuthMeFASServiceStatus, EAuthMeIDCardAntiFraudStage as EAuthMeIDCardAntiFraudStage$1, EAuthMeCardClass as EAuthMeCardClass$1, AuthmeFunctionModule, MlEngine, EngineModule, EAuthMeEngineReturnCode, AuthmeEngineModuleBase } from '@authme/engine';
 import { IdRecognitionCardType, CountryCode, EAuthMeCardClass, EAuthMeIDCardAntiFraudStatus, EAuthMeIDCardAntiFraudStage, thicknessDefaultConfig, mapCardtypeToAuthmeClass, getRecognitionColumnOrder, cardTypeTitle, cardTypeConfirmTitle, cardTypeHeader, EAuthMeCardOCRStatus, EAuthMeMRZServiceStatus, saveExtraDoc, initScanDocumentResourceBase64, MRZService, option, themeUI, initScan, initScanDocument, ResourceImageType, uploadFrameBase64, finishScanDocument, CardOCR, IdCardAntiFraudService, twoWayAuthmeCardClassMap, RecognitionFileType, recognizeBase64, getCardSubTypes, getCardTypes, confirmScan } from '@authme/id-recognition';
-import { getCssVariable, RGBToLottieColor, colorToRGB, Storage, useState, uiThemeText, uiThemeHint, clearCanvas, getImageData, isMobile, hidePopup, showPopup, waitTime, TIME_UNIT, AuthmeError as AuthmeError$1, ErrorCode as ErrorCode$1, uiThemeButton, uiThemeSmallButton, requestCamera, showElement, asyncOnLineShowErrorMessage, getCanvasSize, startSpinner, stopSpinner, themeConfigDefault, fontWeight, hideElement, dataURItoBlob, showErrorMessage, checkOnlineStatus, dropMenu, hideErrorMessage, UintArrayToBlob, isIphone14proOrProMax, cropByRatio, switchCamera, asyncShowPopup, retryPromiseWithCondition, asyncShowErrorMessage, uploadModal, backgroundRequest, debugTools, RUN_FUNCTION_NAME, STORAGE_KEY, splitResult, DEVICE_TYPE, combineResult, startLoadingSDK, stopLoadingSDK } from '@authme/util';
+import { getCssVariable, RGBToLottieColor, colorToRGB, Storage, useState, uiThemeText, uiThemeHint, clearCanvas, getImageData, isMobile, hidePopup, showPopup, waitTime, TIME_UNIT, AuthmeError as AuthmeError$1, ErrorCode as ErrorCode$1, uiThemeButton, uiThemeSmallButton, requestCamera, showElement, asyncOnLineShowErrorMessage, getCanvasSize, startSpinner, stopSpinner, themeConfigDefault, uiThemeDirection, fontWeight, hideElement, dataURItoBlob, showErrorMessage, checkOnlineStatus, dropMenu, hideErrorMessage, UintArrayToBlob, isIphone14proOrProMax, cropByRatio, switchCamera, asyncShowPopup, retryPromiseWithCondition, asyncShowErrorMessage, uploadModal, backgroundRequest, debugTools, RUN_FUNCTION_NAME, STORAGE_KEY, splitResult, DEVICE_TYPE, combineResult, startLoadingSDK, stopLoadingSDK } from '@authme/util';
 import { mergeMap, animationFrames, filter, tap, map, from, catchError, EMPTY, of, merge, fromEvent, concatAll, takeUntil, Subject, defer, throttleTime, switchMap, raceWith, concatMap, throwError, finalize, timer, Observable, take, interval, mapTo, firstValueFrom, shareReplay, switchMapTo, takeWhile as takeWhile$1, race } from 'rxjs';
 import 'core-js/modules/es.regexp.to-string.js';
 import { FasRecognitionResult, EAuthMeFASServiceStage, FasService, LivenessAPI, EAuthMeMouthStatus, LivenessResultStatus } from '@authme/liveness';
@@ -9917,7 +9917,8 @@ const scan = params => {
   const [r, g, b] = lottieColor.map(c => parseFloat(c.toFixed(3)));
   const lottieColorGradient = authmeScannningGradient ? RGBToLottieColor(colorToRGB(authmeScannningGradient)) : [];
   const [rGradient, gGradient, bGradient] = lottieColorGradient.map(c => parseFloat(c.toFixed(3)));
-  const opacity = (params === null || params === void 0 ? void 0 : params.opacity) ? params.opacity * 100 : 40;
+  // const opacity = params?.opacity ? params.opacity * 100 : 40;
+  const opacity = 0;
   const lottieGradient = [0, rGradient, gGradient, bGradient, 0.5, r, g, b, 1, r, g, b, 0, 0.03, 0.5, 0.515, 1, 1];
   return {
     v: '5.9.2',
@@ -28856,6 +28857,7 @@ const renderBasicUI = userConfig => {
   video.playsInline = true;
   video.loop = true;
   video.setAttribute('webkit-playsinline', '');
+  video.setAttribute('poster', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAABmJLR0QA/wD/AP+gvaeTAAADKUlEQVR4nO3UMQEAIAzAsIF/zyBjRxMFvXpm5g1A0N0OANhigECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkfVV0C319akPEAAAAASUVORK5CYII=');
   const lottieScreen = document.createElement('div');
   lottieScreen.classList.add('lottie-screen');
   const pictureIcon = document.createElement('div');
@@ -29102,7 +29104,6 @@ const renderLivenessUI = config => {
   };
   const createTextTitle = () => {
     const ele = document.createElement('div');
-    ele.classList.add('text-title');
     return ele;
   };
   const createTextHint = () => {
@@ -29128,12 +29129,8 @@ const renderLivenessUI = config => {
   faceMask.style.setProperty('--authme-liveness-scanner-error-border-width', `${uiThemeConfig.livenessErrorScanFrame.borderWidth}px`);
   // text panel
   const titleTextPanel = createTextPanel();
-  titleTextPanel.classList.add('title');
   const titleText = createTextTitle();
-  //由於setStatusTop會與titile font size 相關，所以直接在這邊用innerStyle修改，避免未來CSS污染導致setStatusTop失效
-  titleText.style.fontSize = `${MASK_STYLE.TITLE_TEXT_FONT_SIZE}px`;
   const statusTextPanel = createTextPanel();
-  statusTextPanel.classList.add('status');
   const statusText = createTextHint();
   titleTextPanel.appendChild(titleText);
   statusTextPanel.appendChild(statusText);
@@ -29141,22 +29138,16 @@ const renderLivenessUI = config => {
   config.videoContainer.appendChild(statusTextPanel);
   //Statement
   const statementContainer = document.createElement('div');
-  statementContainer.classList.add('statement');
   uiThemeText(statementContainer, uiThemeConfig.bodyThreeDarkMode);
   statementContainer.textContent = translateService.translate('sdk.general.footer');
   if (uiThemeConfig.isStatementEnabled) {
     config.videoContainer.appendChild(statementContainer);
   }
   uiThemeText(titleText, uiThemeConfig.titleThree);
-  uiThemeHint(statusText, uiThemeConfig.hint);
+  uiThemeHint(statusText, uiThemeConfig.hint, '15vh');
   // Set init text
   titleText.textContent = translateService.translate('sdk.liveness.detection.step');
   statusText.textContent = translateService.translate('sdk.general.verify.error.noFace');
-  setStatusTextTop({
-    maskHeight,
-    statusTextPanel,
-    titleTextPanel
-  });
   return {
     statusText,
     faceMask,
@@ -29164,18 +29155,6 @@ const renderLivenessUI = config => {
     statusTextPanel
   };
 };
-const setStatusTextTop = params => {
-  const {
-    maskHeight,
-    maskTop,
-    titleTextPanel,
-    statusTextPanel
-  } = params;
-  const _maskTop = maskTop !== null && maskTop !== void 0 ? maskTop : window.innerHeight / 2 - maskHeight / 2;
-  const _maskBotton = _maskTop + maskHeight;
-  titleTextPanel.style.top = `${_maskTop - MASK_STYLE.MASK_TITLE_MARGIN - MASK_STYLE.TITLE_TEXT_FONT_SIZE}px`;
-  statusTextPanel.style.top = `${_maskBotton + MASK_STYLE.MASK_TITLE_MARGIN + 60}px`;
-};
 
 const limitFPS = fps => {
   let now = Date.now();
@@ -29796,12 +29775,6 @@ function startLiveness(config) {
         height: ellipseHeight,
         axisProduct: ellipseWidthRate * ellipseHeightRate
       };
-      setStatusTextTop({
-        maskTop: window.innerHeight * fTop,
-        maskHeight: window.innerHeight * (fBottom - fTop),
-        titleTextPanel: uiComponentLiveness.titleTextPanel,
-        statusTextPanel: uiComponentLiveness.statusTextPanel
-      });
     })).pipe(switchMap(() => of(null).pipe(
     // 明確建立一個 Observable 作為輸入
     sendFrame(canvasSizeInfo, canvas, uiComponentBasic.video, config.onFrame, livenessConfig.fasMaxFps, true, 'all', undefined, frameFlags), tap(({
@@ -30112,19 +30085,25 @@ const renderOCRUI = config => {
   config.container.classList.add('ocr-container');
   // Text
   const titleTextPanel = createTextPanel();
-  titleTextPanel.classList.add('title');
   const titleText = document.createElement('span');
-  titleText.classList.add('title-text');
   titleTextPanel.appendChild(titleText);
   const hintText = document.createElement('div');
-  hintText.classList.add('hint-text');
   const statusTextPanel = createTextPanel();
-  statusTextPanel.classList.add('status');
   const statusText = document.createElement('span');
-  statusText.classList.add('status-text');
   statusTextPanel.appendChild(statusText);
+  const directionTextPanel = createTextPanel();
+  directionTextPanel.classList.add('direction-panel');
+  const directionText = document.createElement('span');
+  directionText.classList.add('status-text');
+  directionText.textContent = '';
+  const directionIcon = document.createElement('span');
+  directionIcon.classList.add('direction-icon');
+  // Put icon and text as siblings in directionTextPanel
+  directionTextPanel.appendChild(directionIcon);
+  directionTextPanel.appendChild(directionText);
   uiThemeText(titleText, uiThemeConfig.titleOneDarkMode);
   uiThemeHint(statusText, uiThemeConfig.hint);
+  uiThemeDirection(directionTextPanel, uiThemeConfig.fraudScanHintText);
   //Statement
   const statementContainer = document.createElement('div');
   statementContainer.classList.add('statement');
@@ -30158,6 +30137,7 @@ const renderOCRUI = config => {
     config.videoContainer.appendChild(statementContainer);
   }
   config.videoContainer.appendChild(statusTextPanel);
+  config.videoContainer.appendChild(directionTextPanel);
   config.videoContainer.appendChild(scanAnimationContainer);
   config.videoContainer.appendChild(successContainer);
   config.videoContainer.appendChild(arrowAnimationContainer);
@@ -30165,14 +30145,15 @@ const renderOCRUI = config => {
   // Anti-fraud Instruction
   const lottieMask = document.createElement('div');
   lottieMask.classList.add('lottie-mask');
+  lottieMask.style.opacity = uiThemeConfig.fraudAnimationLoadingPage.backgroundOpacity;
   const antiFraudInstructionContainer = document.createElement('div');
   antiFraudInstructionContainer.classList.add('anti-fraud-instruction-container');
+  const antiFraudInstructionAnimationContainer = document.createElement('div');
+  antiFraudInstructionAnimationContainer.classList.add('anti-fraud-instruction-animation-container');
   const instructionText = document.createElement('div');
   instructionText.classList.add('anti-fraud-instruction-container__text');
   instructionText.textContent = translateService.translate('sdk.guard.verify.guide.fraudDescribe');
   uiThemeText(instructionText, uiThemeConfig.titleOneDarkMode);
-  const antiFraudInstructionAnimationContainer = document.createElement('div');
-  antiFraudInstructionAnimationContainer.classList.add('anti-fraud-instruction-animation-container');
   const btnContainer = document.createElement('div');
   btnContainer.classList.add('btn-container');
   const confirmBtn = document.createElement('button');
@@ -30226,6 +30207,9 @@ const renderOCRUI = config => {
     titleText,
     hintText,
     statusText,
+    directionTextPanel,
+    directionText,
+    directionIcon,
     statusTextPanel,
     lottieMask,
     arrowAnimationContainer,
@@ -30383,11 +30367,13 @@ function mirrorPoints(points) {
   }));
 }
 const renderOCRMask = params => {
+  const uiThemeConfig = Storage.getItem('themeConfig');
   let newCardPoints;
-  let borderColor = '';
-  let borderOpacity = OcrFrame.borderOpacity;
-  let borderColorSuccess = '';
-  let borderOpacitySuccess = OcrFrame.successOpacity;
+  let borderColor = uiThemeConfig.scanFrame.undetectedColor;
+  let borderOpacity = uiThemeConfig.scanFrame.opacity;
+  let borderColorSuccess = uiThemeConfig.scanFrame.detectedColor;
+  let borderOpacitySuccess = uiThemeConfig.scanFrame.opacity;
+  const strokeWidth = uiThemeConfig.scanFrame.width;
   const {
     cardPoints,
     container
@@ -30405,7 +30391,7 @@ const renderOCRMask = params => {
   svg.style.position = 'absolute';
   svg.style.top = '0';
   svg.style.left = '0';
-  svg.style.boxShadow = 'rgba(0, 0, 0, 0.65) 0 0 0 2000px';
+  svg.style.boxShadow = 'rgba(0, 0, 0, 1) 0 0 0 2000px';
   // 創建遮罩
   const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
   const mask = document.createElementNS('http://www.w3.org/2000/svg', 'mask');
@@ -30431,6 +30417,13 @@ const renderOCRMask = params => {
   pathOfFrame.setAttribute('fill', 'none');
   pathOfFrame.setAttribute('stroke', OcrFrame.borderColor);
   pathOfFrame.setAttribute('stroke-width', '3');
+  // Create a border path that matches the mask exactly
+  const borderPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  borderPath.setAttribute('id', 'authme-border-path');
+  borderPath.setAttribute('stroke', borderColor);
+  borderPath.setAttribute('stroke-width', strokeWidth);
+  borderPath.setAttribute('fill', 'none');
+  borderPath.setAttribute('stroke-opacity', borderOpacity.toString());
   const setBorderType = params => {
     var _a;
     const _mirrored = (_a = params.mirrored) !== null && _a !== void 0 ? _a : false;
@@ -30500,6 +30493,8 @@ const renderOCRMask = params => {
   maskedRect.setAttribute('fill', 'rgba(0, 0, 0, 0.65)');
   maskedRect.setAttribute('mask', 'url(#hole)');
   svg.appendChild(maskedRect);
+  // Add the border path that matches the mask
+  svg.appendChild(borderPath);
   // 添加SVG到容器
   container.appendChild(svg);
   const setCardPoints = (_newCardPoints, antiFraud = false, _mirrored = false) => {
@@ -30536,39 +30531,9 @@ const renderOCRMask = params => {
       });
       return `${acc} ${command} ${_x2 - radius * v.unitVector.x},${_y2 - radius * v.unitVector.y} A 10,10 0 0, ${_mirrored ? '0' : '1'} ${_x2 + radius * vNext.unitVector.x},${_y2 + radius * vNext.unitVector.y}`;
     }, '') + ' Z'; // 結尾加上'Z'來關閉路徑
-    newCardPoints.reduce((acc, {
-      x,
-      y
-    }, index) => {
-      var _a, _b;
-      const lineRotio = 2;
-      const previosPoint = (_a = newCardPoints[index - 1]) !== null && _a !== void 0 ? _a : newCardPoints[newCardPoints.length - 1];
-      const nextPoint = (_b = newCardPoints[index + 1]) !== null && _b !== void 0 ? _b : newCardPoints[0];
-      const windowWidth = container.offsetWidth;
-      const windowHeight = container.offsetHeight;
-      const _x1 = windowWidth * previosPoint.x;
-      const _y1 = windowHeight * previosPoint.y;
-      const _x2 = windowWidth * x;
-      const _y2 = windowHeight * y;
-      const _x3 = windowWidth * nextPoint.x;
-      const _y3 = windowHeight * nextPoint.y;
-      const v = new Vector({
-        x: _x1,
-        y: _y1
-      }, {
-        x: _x2,
-        y: _y2
-      });
-      const vNext = new Vector({
-        x: _x2,
-        y: _y2
-      }, {
-        x: _x3,
-        y: _y3
-      });
-      return `${acc} M ${_x2 - lineRotio * radius * v.unitVector.x},${_y2 - lineRotio * radius * v.unitVector.y} L ${_x2 - radius * v.unitVector.x}, ${_y2 - radius * v.unitVector.y} A 10, 10 0 0, ${_mirrored ? '0' : '1'} ${_x2 + radius * vNext.unitVector.x},${_y2 + radius * vNext.unitVector.y} L ${_x2 + lineRotio * radius * vNext.unitVector.x},${_y2 + lineRotio * radius * vNext.unitVector.y} `;
-    }, '');
     path.setAttribute('d', d);
+    // Set the same path for the border to match the mask exactly
+    borderPath.setAttribute('d', d);
     if (antiFraud) {
       setBorderType({
         type: borderType,
@@ -30596,6 +30561,8 @@ const renderOCRMask = params => {
     if (borderType === 'bordered') {
       rectOfFrame.setAttribute('stroke', color);
       rectOfFrame.setAttribute('stroke-opacity', opacity.toString());
+      borderPath.setAttribute('stroke', color);
+      borderPath.setAttribute('stroke-opacity', opacity.toString());
     } else {
       pathOfFrame.setAttribute('stroke', color);
       pathOfFrame.setAttribute('stroke-opacity', opacity.toString());
@@ -32492,6 +32459,9 @@ function startOCR(config) {
       hintText: document.createElement('div'),
       statusText: document.createElement('div'),
       statusTextPanel: document.createElement('div'),
+      directionText: document.createElement('div'),
+      directionIcon: document.createElement('div'),
+      directionTextPanel: document.createElement('div'),
       lottieMask: document.createElement('div'),
       arrowAnimationContainer: document.createElement('div'),
       scanAnimationContainer: document.createElement('div'),
@@ -32558,7 +32528,6 @@ function startOCR(config) {
     let rotateCard;
     let getIsRotateCardAnimating;
     let stopAnimate;
-    setHintTextLocale();
     setCorrectViewHeight();
     let countdownCaptureTimer;
     let toastManualCapture = null;
@@ -32630,6 +32599,7 @@ function startOCR(config) {
     function startAntiFraud(type, cardType) {
       const animateInterval = 2 * TIME_UNIT.SECOND;
       const nextAnimateInterval = 6 * TIME_UNIT.SECOND;
+      let eStage = null;
       let needDeformationCount = 0;
       setStatusEvent$1(StatusEvent.TWID);
       setStatusView(StatusView.Init);
@@ -32727,6 +32697,10 @@ function startOCR(config) {
             stopAnimate();
             previosAntiFraudAnimateTime = Date.now();
             uiComponentOCRMask.setCardBorderColor('pass');
+            // Add 2 second delay before moving to next stage
+            setTimeout(() => {
+              console.log('Stage pass delay completed, ready for next direction');
+            }, 2000);
             break;
           case EAuthMeIDCardAntiFraudStatus.Pass:
             uiComponentOCRMask.setCardBorderColor('pass');
@@ -32768,7 +32742,10 @@ function startOCR(config) {
       })), sendFrame(canvasSizeInfo, uiComponentOCR.image, uiComponentBasic.video, config.onAntiFraudFrame, ocrEngineConfig.fraudMaxFps, false, 'jpg', undefined), map(x => x.result), tap(x => {
         applyTextByResult(x);
         cardRotateByStage(x.eStage);
-        cardRotateTextProcess(x.eStage);
+        if (isTutorialFinish) {
+          cardRotateTextProcess(x.eStage, eStage != x.eStage);
+          eStage = x.eStage;
+        }
         if (x.eStage !== currentAntiFraudStage) {
           needDeformationCount = 0;
           previosAntiFraudAnimateTime = 0;
@@ -32826,8 +32803,6 @@ function startOCR(config) {
         x,
         y
       })), config.ocrConfig.needAntiFraud);
-      setHintTextLocale();
-      // }
       const applyTextByResult = result => {
         uiComponentOCR.statusText.classList.add('non-empty');
         switch (result.eStatus) {
@@ -32858,6 +32833,11 @@ function startOCR(config) {
             uiComponentOCRMask.setCardBorderColor('error');
             blurCount++;
             break;
+          case EAuthMeCardOCRStatus.Motion:
+            uiComponentOCR.statusText.textContent = translateService.translate('sdk.general.verify.error.motion');
+            sendStatusDescription$1(StatusDescription.Motion);
+            uiComponentOCRMask.setCardBorderColor('error');
+            break;
           case EAuthMeMRZServiceStatus.RecogFailed:
           case EAuthMeMRZServiceStatus.WrongCardType:
             uiComponentOCR.statusText.textContent = translateService.translate('sdk.general.verify.error.wrongCardType');
@@ -32927,8 +32907,8 @@ function startOCR(config) {
         if (!confirmBtns || !(confirmBtns === null || confirmBtns === void 0 ? void 0 : confirmBtns.buttonRetry) || !(confirmBtns === null || confirmBtns === void 0 ? void 0 : confirmBtns.buttonNext)) {
           throw new AuthmeError(ErrorCode.SDK_INTERNAL_ERROR, 'confirmBtns is null');
         }
-        const retryEvents = fromEvent(confirmBtns.buttonRetry, 'click').pipe(mapTo(true));
-        const confirmEvents = fromEvent(confirmBtns.buttonNext, 'click').pipe(mapTo(false));
+        const retryEvents = fromEvent(confirmBtns.buttonRetry, 'click').pipe(map(() => true));
+        const confirmEvents = fromEvent(confirmBtns.buttonNext, 'click').pipe(map(() => false));
         const allEvents$ = merge(retryEvents, confirmEvents);
         return yield firstValueFrom(allEvents$.pipe());
         // showElement(uiComponentOCR.confirmImageContainer);
@@ -32982,7 +32962,7 @@ function startOCR(config) {
           }), switchMap(needRetry => {
             if (needRetry) {
               ocrSendFrameAnimation = false;
-              return recognition(true).pipe(map(() => true));
+              return recognition(true).pipe(map(() => false));
             } else {
               hideElement(captureBtn);
               // hideElement(uiComponentOCR.confirmImageContainer);
@@ -33426,13 +33406,16 @@ function startOCR(config) {
             yield finishTutorial(point);
             return;
           }))));
-          countdownTimer(3);
-          uiComponentOCR.confirmBtn.disabled = false;
+          countdownTimer(uiThemeConfig.fraudAnimationLoadingPage.countdownTime);
+          uiComponentOCR.confirmBtn.disabled = true;
           function countdownTimer(countdown) {
             return __awaiter(this, void 0, void 0, function* () {
               if (countdown <= 0 && !isTutorialFinish) {
                 uiComponentOCR.confirmBtn.innerText = translateService.translate('sdk.guard.verify.guide.start');
-                yield finishTutorial(point);
+                uiComponentOCR.confirmBtn.disabled = false;
+                if (uiThemeConfig.fraudAnimationLoadingPage.isAutoTapEnabled) {
+                  yield finishTutorial(point);
+                }
                 return;
               }
               uiComponentOCR.confirmBtn.innerText = `${translateService.translate('sdk.guard.verify.guide.start')} (${countdown})`;
@@ -33704,7 +33687,6 @@ function startOCR(config) {
         if (!cardMatchROI || cardMatchROI.length == 0) throw new AuthmeError(ErrorCode.SDK_INTERNAL_ERROR, 'getCardMatchROI is null');
         uiComponentOCRMask.setCardBorderColor('error');
         uiComponentOCRMask.setCardPoints(cardMatchROI, config.ocrConfig.needAntiFraud, facingMode === 'front');
-        setHintTextLocale();
         currentAntiFraudStage = stage;
         if (uiThemeConfig.fraudScanHint.isEnabled && (isTutorialFinish && !getIsRotateCardAnimating() || mandatoryRotate)) {
           yield stopAnimate();
@@ -33712,19 +33694,69 @@ function startOCR(config) {
         }
       });
     }
-    function cardRotateTextProcess(stage) {
+    function cardRotateTextProcess(stage, showDirection = false) {
+      // Clear any existing text and icon first
+      uiComponentOCR.directionIcon.innerHTML = '';
+      // Helper function to set up direction display
+      const setupDirectionDisplay = (direction, translationKey, iconOnRight = false) => {
+        const arrow = createDirectionArrow(direction);
+        console.log(`DEBUG: Created ${direction} arrow SVG:`, arrow);
+        uiComponentOCR.directionIcon.appendChild(arrow);
+        // Set text
+        uiComponentOCR.directionText.textContent = translateService.translate(translationKey);
+        console.log('DEBUG: Direction text set to:', uiComponentOCR.directionText.textContent);
+        // Re-order elements based on direction
+        if (iconOnRight) {
+          // Text first, then icon
+          uiComponentOCR.directionTextPanel.appendChild(uiComponentOCR.directionText);
+          uiComponentOCR.directionTextPanel.appendChild(uiComponentOCR.directionIcon);
+        } else {
+          // Icon first, then text
+          uiComponentOCR.directionTextPanel.appendChild(uiComponentOCR.directionIcon);
+          uiComponentOCR.directionTextPanel.appendChild(uiComponentOCR.directionText);
+        }
+        if (showDirection) {
+          uiComponentOCR.directionTextPanel.style.display = 'flex';
+          // Set timer to hide panel after 2 seconds (for any direction)
+          setTimeout(() => {
+            uiComponentOCR.directionTextPanel.style.display = 'none';
+          }, 2000);
+        }
+        // Set top text
+        setTopText(translateService.translate('sdk.guard.verify.guide.idCardFlip'));
+      };
+      // Create direction arrow using embedded SVG content
+      const createDirectionArrow = direction => {
+        const container = document.createElement('div');
+        const svgContent = {
+          left: `<svg width="72" height="72" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.6768 31.1478C36.2223 32.1083 37.4431 32.4447 38.4036 31.8993C39.3641 31.3538 39.7005 30.133 39.155 29.1725L37.4159 30.1601L35.6768 31.1478ZM1.16989 17.0763C0.388844 17.8573 0.388844 19.1237 1.16989 19.9047L13.8978 32.6326C14.6789 33.4137 15.9452 33.4137 16.7262 32.6326C17.5073 31.8516 17.5073 30.5853 16.7262 29.8042L5.41253 18.4905L16.7262 7.1768C17.5073 6.39575 17.5073 5.12942 16.7262 4.34837C15.9452 3.56732 14.6789 3.56732 13.8978 4.34837L1.16989 17.0763ZM37.4159 30.1601L39.155 29.1725C34.775 21.46 29.0347 18.217 22.5604 16.9896C19.3956 16.3896 16.0872 16.2747 12.7603 16.2999C11.0948 16.3125 9.39768 16.3609 7.70512 16.4052C6.00456 16.4497 4.30124 16.4905 2.58411 16.4905V18.4905V20.4905C4.35894 20.4905 6.10892 20.4484 7.80987 20.4038C9.5188 20.3591 11.1714 20.3121 12.7906 20.2998C16.0333 20.2752 19.0348 20.3924 21.8153 20.9196C27.2316 21.9464 31.9232 24.5383 35.6768 31.1478L37.4159 30.1601Z" fill="#4AD396"/>
+</svg>`,
+          right: `<svg width="72" height="72" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.844991 29.1725C0.29952 30.133 0.635957 31.3538 1.59644 31.8993C2.55693 32.4447 3.77775 32.1083 4.32322 31.1478L2.58411 30.1601L0.844991 29.1725ZM38.8301 19.9047C39.6112 19.1237 39.6112 17.8573 38.8301 17.0763L26.1022 4.34837C25.3212 3.56732 24.0548 3.56732 23.2738 4.34837C22.4927 5.12942 22.4927 6.39575 23.2738 7.1768L34.5875 18.4905L23.2738 29.8042C22.4927 30.5853 22.4927 31.8516 23.2738 32.6326C24.0548 33.4137 25.3212 33.4137 26.1022 32.6326L38.8301 19.9047ZM2.58411 30.1601L4.32322 31.1478C8.07682 24.5383 12.7684 21.9464 18.1847 20.9196C20.9652 20.3924 23.9667 20.2752 27.2094 20.2998C28.8287 20.3121 30.4812 20.3591 32.1902 20.4038C33.8911 20.4484 35.6411 20.4905 37.4159 20.4905V18.4905V16.4905C35.6988 16.4905 33.9955 16.4497 32.2949 16.4052C30.6023 16.3609 28.9052 16.3125 27.2397 16.2999C23.9128 16.2747 20.6044 16.3896 17.4396 16.9896C10.9653 18.217 5.225 21.46 0.844991 29.1725L2.58411 30.1601Z" fill="#4AD396"/>
+</svg>`,
+          up: `<svg width="72" height="72" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.1478 35.6768C32.1083 36.2223 32.4447 37.4431 31.8993 38.4036C31.3538 39.3641 30.133 39.7005 29.1725 39.155L30.1601 37.4159L31.1478 35.6768ZM17.0763 1.16989C17.8573 0.388844 19.1237 0.388844 19.9047 1.16989L32.6326 13.8978C33.4137 14.6789 33.4137 15.9452 32.6326 16.7262C31.8516 17.5073 30.5853 17.5073 29.8042 16.7262L18.4905 5.41253L7.1768 16.7262C6.39575 17.5073 5.12942 17.5073 4.34837 16.7262C3.56733 15.9452 3.56733 14.6789 4.34837 13.8978L17.0763 1.16989ZM30.1601 37.4159L29.1725 39.155C21.46 34.775 18.217 29.0347 16.9896 22.5604C16.3896 19.3956 16.2747 16.0872 16.2999 12.7603C16.3125 11.0948 16.3609 9.39768 16.4052 7.70512C16.4497 6.00456 16.4905 4.30124 16.4905 2.58411L18.4905 2.58411L20.4905 2.58411C20.4905 4.35894 20.4484 6.10892 20.4038 7.80987C20.3591 9.5188 20.3121 11.1714 20.2998 12.7906C20.2752 16.0333 20.3924 19.0348 20.9196 21.8153C21.9465 27.2316 24.5383 31.9232 31.1478 35.6768L30.1601 37.4159Z" fill="#4AD396"/>
+</svg>`,
+          down: `<svg width="72" height="72" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.0559 0.844991C14.0954 0.299519 12.8746 0.635956 12.3291 1.59644C11.7837 2.55693 12.1201 3.77775 13.0806 4.32322L14.0683 2.58411L15.0559 0.844991ZM24.3237 38.8301C25.1047 39.6112 26.371 39.6112 27.1521 38.8301L39.88 26.1022C40.6611 25.3212 40.6611 24.0548 39.88 23.2738C39.099 22.4927 37.8326 22.4927 37.0516 23.2738L25.7379 34.5875L14.4242 23.2738C13.6431 22.4927 12.3768 22.4927 11.5957 23.2738C10.8147 24.0548 10.8147 25.3212 11.5957 26.1022L24.3237 38.8301ZM14.0683 2.58411L13.0806 4.32322C19.6901 8.07682 22.2819 12.7684 23.3088 18.1847C23.836 20.9652 23.9531 23.9667 23.9286 27.2094C23.9163 28.8287 23.8693 30.4812 23.8246 32.1902C23.78 33.8911 23.7379 35.6411 23.7379 37.4159L25.7379 37.4159L27.7379 37.4159C27.7379 35.6988 27.7786 33.9955 27.8232 32.2949C27.8675 30.6023 27.9159 28.9052 27.9285 27.2397C27.9537 23.9128 27.8388 20.6044 27.2388 17.4396C26.0113 10.9653 22.7684 5.225 15.0559 0.844991L14.0683 2.58411Z" fill="#4AD396"/>
+</svg>`
+        };
+        container.innerHTML = svgContent[direction];
+        return container;
+      };
       switch (stage) {
         case EAuthMeIDCardAntiFraudStage.Left:
-          facingMode === 'front' ? setTopText(translateService.translate('sdk.guard.verify.guide.idCardFlip')) : setTopText(translateService.translate('sdk.guard.verify.guide.idCardFlip'));
+          setupDirectionDisplay('left', 'sdk.guard.verify.guide.idCardFlip.left');
           break;
         case EAuthMeIDCardAntiFraudStage.Right:
-          facingMode === 'front' ? setTopText(translateService.translate('sdk.guard.verify.guide.idCardFlip')) : setTopText(translateService.translate('sdk.guard.verify.guide.idCardFlip'));
+          setupDirectionDisplay('right', 'sdk.guard.verify.guide.idCardFlip.right', true);
           break;
         case EAuthMeIDCardAntiFraudStage.Up:
-          setTopText(translateService.translate('sdk.guard.verify.guide.idCardFlip'));
+          setupDirectionDisplay('up', 'sdk.guard.verify.guide.idCardFlip.up');
           break;
         case EAuthMeIDCardAntiFraudStage.Down:
-          setTopText(translateService.translate('sdk.guard.verify.guide.idCardFlip'));
+          setupDirectionDisplay('down', 'sdk.guard.verify.guide.idCardFlip.down', true);
           break;
       }
     }
@@ -34386,7 +34418,7 @@ class LivenessVerifyModule {
   }
 }
 
-function handleUploadError$1(error) {
+function handleUploadError$1(_error) {
   return new Promise(resolve => {
     uploadModal({
       type: 'error',
@@ -34450,6 +34482,7 @@ class LivenessModule {
       try {
         const result = yield firstValueFrom(yield startLiveness({
           getOptionConfig: () => __awaiter(this, void 0, void 0, function* () {
+            console.log('config.deviceType', config.deviceType);
             const res = yield LivenessAPI.IdentityVerification.option(config.deviceType);
             const themeId = res.themeId;
             if (!themeId) {
@@ -34585,7 +34618,7 @@ class LivenessModule {
             // );
             yield handleUpload(id, frameList, resultList, meta, config, shouldEncrypt, encryptDataBase64);
             // upload finish view
-            const successView = uploadModal({
+            uploadModal({
               type: 'success',
               titleSuccess: getTranslateInstance().translate('sdk.general.successUpload')
             });
@@ -37164,7 +37197,7 @@ class AuthmeIdentityVerification extends AuthmeFunctionModule {
   getCustomerState(arg) {
     return __awaiter(this, void 0, void 0, function* () {
       const paramsDefault = {
-        waitingTime: 3,
+        waitingTime: 60,
         retryTimes: 2
       };
       if (arg === null || arg === void 0 ? void 0 : arg.retryTimes) {
@@ -37213,8 +37246,8 @@ class AuthmeIdentityVerification extends AuthmeFunctionModule {
 }
 
 var name = "authme/sdk";
-var version$1 = "2.8.24";
-var date = "2025-07-31T06:39:41+0000";
+var version$1 = "2.8.26";
+var date = "2025-09-30T03:00:07+0000";
 var packageInfo = {
 	name: name,
 	version: version$1,

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@authme/identity-verification",
-  "version": "2.8.24",
+  "version": "2.8.26",
   "peerDependencies": {
     "core-js": "^3.6.0",
     "lottie-web": "^5.9.2",
     "rxjs": "^7.4.0",
-    "@authme/core": "2.8.24",
-    "@authme/engine": "2.8.24",
-    "@authme/id-recognition": "2.8.24",
-    "@authme/liveness": "2.8.24",
-    "@authme/util": "2.8.24"
+    "@authme/core": "2.8.26",
+    "@authme/engine": "2.8.26",
+    "@authme/id-recognition": "2.8.26",
+    "@authme/liveness": "2.8.26",
+    "@authme/util": "2.8.26"
   },
   "module": "./index.js",
   "main": "./index.cjs",

package/src/lib/ui/ocr.ui.d.ts

@@ -69,6 +69,9 @@ export declare const renderOCRUI: (config: {
     titleText: HTMLSpanElement;
     hintText: HTMLDivElement;
     statusText: HTMLSpanElement;
+    directionTextPanel: HTMLDivElement;
+    directionText: HTMLSpanElement;
+    directionIcon: HTMLSpanElement;
     statusTextPanel: HTMLDivElement;
     lottieMask: HTMLDivElement;
     arrowAnimationContainer: HTMLDivElement;