@authme/identity-verification 2.8.2 → 2.8.4

package/index.cjs

@@ -32,6 +32,8 @@ require('core-js/modules/es.typed-array.fill.js');
 require('core-js/modules/es.typed-array.set.js');
 require('core-js/modules/es.typed-array.sort.js');
 require('core-js/modules/es.typed-array.to-locale-string.js');
+require('core-js/modules/es.string.pad-start.js');
+require('core-js/modules/es.regexp.constructor.js');
 require('core-js/modules/es.typed-array.uint8-array.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -104,7 +106,7 @@ const defaultLivenessConfig = {
   active: true,
   icon: DEFAULT_ICON_URI,
   // showIntroPage: false,
-  headerMode: 1,
+  headerMode: 0,
   showCloseButton: true,
   subtitle: null,
   uploadFullFrame: false,
@@ -120,7 +122,7 @@ const defaultIdRecognitionConfig = {
   needOCR: true,
   displayResultPage: false,
   showStatement: true,
-  headerMode: 1,
+  headerMode: 0,
   blockFraud: false,
   showCloseButton: true,
   disableTutorial: false,
@@ -27549,7 +27551,7 @@ const renderBasicUI = userConfig => {
   // header container
   const header = document.createElement('div');
   header.classList.add('authme-header');
-  if (userConfig.headerMode) {
+  if (userConfig.headerMode === 0 || userConfig.headerMode) {
     header.classList.add(`headerMode${userConfig.headerMode}`);
   }
   // header Title
@@ -27923,7 +27925,9 @@ const limitFPS = fps => {
 };
 const sendFrame = (canvasSizeInfo, canvas, video, frameCallback, fps, bas64Format, imageType, cardType, flags, type) => source$ => {
   let received = true;
-  const ctx = canvas.getContext('2d');
+  const ctx = canvas.getContext('2d', {
+    willReadFrequently: true
+  });
   return source$.pipe(rxjs.mergeMap(() => rxjs.animationFrames().pipe(limitFPS(fps), rxjs.filter(() => received && !(flags === null || flags === void 0 ? void 0 : flags.animating)), rxjs.tap(() => received = false), rxjs.tap(() => util.clearCanvas(canvas)), rxjs.map(() => util.getImageData(canvas, ctx, video, canvasSizeInfo, bas64Format, imageType)), rxjs.mergeMap(imageData => rxjs.from(frameCallback(imageData.data, imageData.base64, cardType, type)).pipe(rxjs.catchError(e => {
     // send to fast, ignore
     if (e instanceof core.AuthmeError && e.code === core.ErrorCode.RECOGNITION_NOT_AVAILABLE) {
@@ -28086,6 +28090,72 @@ const modal = arg => {
   authmeContainer.appendChild(domModal);
 };
 
+const popupView = arg => {
+  const authmeContainer = document.querySelector('.authme-container');
+  if (!authmeContainer) {
+    console.error('modal: authmeContainer not found');
+    return;
+  }
+  const uiThemeConfig = util.Storage.getItem('themeConfig');
+  function removePopview() {
+    var _a;
+    (_a = document.querySelector('.video-container__popupview')) === null || _a === void 0 ? void 0 : _a.remove();
+  }
+  const domPopupView = document.createElement('div');
+  const domPopupViewContainer = document.createElement('div');
+  const domTitleContainer = document.createElement('div');
+  const domTitle = document.createElement('div');
+  const domContentContainer = document.createElement('div');
+  const domContent = document.createElement('div');
+  const domFooterContainer = document.createElement('div');
+  const domConfirm = document.createElement('div');
+  const domCancel = document.createElement('div');
+  domPopupView.classList.add('video-container__popupview');
+  domPopupViewContainer.classList.add('video-container__popupview-container');
+  domTitleContainer.classList.add('video-container__popupview-title-container');
+  domTitle.classList.add('video-container__popupview-title');
+  domContentContainer.classList.add('video-container__popupview-content-container');
+  domContent.classList.add('video-container__popupview-content');
+  domFooterContainer.classList.add('video-container__popupview-footer-container');
+  domConfirm.classList.add('video-container__popupview-confirm');
+  domCancel.classList.add('video-container__popupview-cancel');
+  domPopupViewContainer.style.backgroundColor = uiThemeConfig.popupView.backgroundColor;
+  domPopupViewContainer.style.borderRadius = `${uiThemeConfig.popupView.cornerRadius}px`;
+  util.uiThemeText(domTitle, uiThemeConfig.titleOne);
+  util.uiThemeText(domContent, uiThemeConfig.bodyTwo);
+  util.uiThemeSmallButton(domConfirm, uiThemeConfig.smallermMajorButton);
+  if (arg.cancel) {
+    util.uiThemeSmallButton(domCancel, uiThemeConfig.smallerMinorButton);
+    domCancel.innerHTML = arg.cancel;
+    domCancel.addEventListener('click', () => __awaiter(void 0, void 0, void 0, function* () {
+      if (arg.onCancel) {
+        arg.onCancel();
+      }
+      removePopview();
+    }));
+  }
+  domConfirm.addEventListener('click', () => __awaiter(void 0, void 0, void 0, function* () {
+    if (arg.onConfirm) {
+      arg.onConfirm();
+    }
+    removePopview();
+  }));
+  domTitle.innerHTML = arg.title;
+  domContent.innerHTML = arg.content;
+  domConfirm.innerHTML = arg.confirm;
+  domPopupViewContainer.appendChild(domTitleContainer);
+  domTitleContainer.appendChild(domTitle);
+  domPopupViewContainer.appendChild(domContentContainer);
+  domContentContainer.appendChild(domContent);
+  domPopupViewContainer.appendChild(domFooterContainer);
+  if (arg.cancel) {
+    domFooterContainer.appendChild(domCancel);
+  }
+  domFooterContainer.appendChild(domConfirm);
+  domPopupView.appendChild(domPopupViewContainer);
+  authmeContainer.appendChild(domPopupView);
+};
+
 function startLiveness(config) {
   return __awaiter(this, void 0, void 0, function* () {
     const translateService = core.getTranslateInstance();
@@ -28147,18 +28217,43 @@ function startLiveness(config) {
     };
     const canvas = document.createElement('canvas');
     let uiThemeConfig = util.themeConfigDefault;
-    let sdkFlowTimeout;
+    // let sdkFlowTimeout: NodeJS.Timeout;
+    let sdkFlowTimeout = null;
     const timeout$ = new rxjs.Subject();
+    // function makeSDKFlowTimeout(expiredIn: number) {
+    //   return setTimeout(async () => {
+    //     asyncShowErrorMessage(
+    //       translateService.translate('sdk.general.error.timeout.content'),
+    //       false
+    //     );
+    //     await waitTime(3 * TIME_UNIT.SECOND);
+    //     timeout$.next({
+    //       isSuccess: false as const,
+    //       code: `${ErrorCode.ID_RECOGNITION_TIMEOUT}`,
+    //       message: new AuthmeError(ErrorCode.ID_RECOGNITION_TIMEOUT).message,
+    //     });
+    //   }, expiredIn * TIME_UNIT.SECOND);
+    // }
     function makeSDKFlowTimeout(expiredIn) {
-      return setTimeout(() => __awaiter(this, void 0, void 0, function* () {
-        util.asyncShowErrorMessage(translateService.translate('sdk.general.error.timeout.content'), false);
-        yield util.waitTime(3 * util.TIME_UNIT.SECOND);
+      return rxjs.timer(expiredIn * util.TIME_UNIT.SECOND).pipe(rxjs.switchMap(() => new rxjs.Observable(observer => {
+        config.onDestroy();
+        popupView({
+          title: translateService.translate('sdk.general.error.timeout.title'),
+          content: translateService.translate('sdk.general.error.timeout.content'),
+          confirm: translateService.translate('sdk.general.confirm'),
+          onConfirm: () => {
+            observer.next(true);
+            observer.complete();
+          }
+        });
+      }))).subscribe(() => {
         timeout$.next({
           isSuccess: false,
           code: `${core.ErrorCode.ID_RECOGNITION_TIMEOUT}`,
-          message: new core.AuthmeError(core.ErrorCode.ID_RECOGNITION_TIMEOUT).message
+          message: new core.AuthmeError(core.ErrorCode.ID_RECOGNITION_TIMEOUT).message,
+          data: {}
         });
-      }), expiredIn * util.TIME_UNIT.SECOND);
+      });
     }
     function initOptions() {
       return __awaiter(this, void 0, void 0, function* () {
@@ -28291,7 +28386,7 @@ function startLiveness(config) {
       }
     };
     // Register Event
-    rxjs.fromEvent(window, 'offline').pipe(rxjs.switchMap(() => util.asyncOnLineShowErrorMessage(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'), true)), rxjs.takeUntil(unsubscribe$)).subscribe();
+    rxjs.fromEvent(window, 'offline').pipe(rxjs.switchMap(() => util.asyncOnLineShowErrorMessage(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'), false)), rxjs.takeUntil(unsubscribe$)).subscribe();
     rxjs.fromEvent(window, 'resize').pipe(rxjs.throttleTime(100), rxjs.switchMap(() => util.getCanvasSize(uiComponentBasic.video)), rxjs.tap(canvasSizeInfo => {
       config.setFrameSize(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight);
       const maskHeight = window.outerHeight * 0.48;
@@ -28418,7 +28513,7 @@ function startLiveness(config) {
         isSuccess: true
       });
     }), rxjs.raceWith(timeout$) // 確保 timeout 之後一定會有失敗結果
-    )))), rxjs.switchMap(resp => window.navigator.onLine ? rxjs.of(resp) : rxjs.from(util.asyncOnLineShowErrorMessage(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'), true)).pipe(rxjs.map(() => resp))), rxjs.tap(res => {
+    )))), rxjs.switchMap(resp => window.navigator.onLine ? rxjs.of(resp) : rxjs.from(util.asyncOnLineShowErrorMessage(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'), false)).pipe(rxjs.map(() => resp))), rxjs.tap(res => {
       // console.log('res', res);
       if (res.isSuccess) {
         sendStatusDescription$2(core.StatusDescription.UploadingStart);
@@ -28536,7 +28631,11 @@ function startLiveness(config) {
         } finally {
           uiComponentBasic.video.srcObject = null;
         }
-        if (sdkFlowTimeout) clearTimeout(sdkFlowTimeout);
+        // if (sdkFlowTimeout) clearTimeout(sdkFlowTimeout);
+        if (sdkFlowTimeout) {
+          sdkFlowTimeout.unsubscribe();
+          sdkFlowTimeout = null;
+        }
         eventListenerService$2.stop();
         uiComponentBasic.container.remove();
         unsubscribe$.next();
@@ -28671,7 +28770,6 @@ const renderCameraSwitch = config => {
 };
 const renderOCRUI = config => {
   const uiThemeConfig = util.Storage.getItem('themeConfig');
-  console.log('uiThemeConfig', uiThemeConfig);
   const translateService = core.getTranslateInstance();
   const createTextPanel = () => {
     const ele = document.createElement('div');
@@ -29826,7 +29924,9 @@ const imageDataToBase64 = (data, width, height, mimeType = 'image/png') => {
   const canvas = document.createElement('canvas');
   canvas.width = width;
   canvas.height = height;
-  const ctx = canvas.getContext('2d');
+  const ctx = canvas.getContext('2d', {
+    willReadFrequently: true
+  });
   // 2. 建立 ImageData，填充像素數據
   const imgData = ctx.createImageData(width, height);
   imgData.data.set(new Uint8ClampedArray(data)); // 確保格式正確
@@ -29838,7 +29938,9 @@ const videoToBase64 = (video, sizeInfo) => __awaiter(void 0, void 0, void 0, fun
   const canvas = document.createElement('canvas');
   canvas.width = sizeInfo.canvasWidth;
   canvas.height = sizeInfo.canvasHeight;
-  const ctx = canvas.getContext('2d');
+  const ctx = canvas.getContext('2d', {
+    willReadFrequently: true
+  });
   if (!ctx) {
     throw new Error('Failed to get 2d context from canvas');
   }
@@ -29887,7 +29989,7 @@ const modifiedData2Result = modifiedResult => {
 
 const translateService = core.getTranslateInstance();
 // TODO 處理參數
-const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCardPoints, setCardBorderColor, statusText, canvasSizeInfo$, showVideoElement, config, cardRotateByStage, getCardBorderPoint, setBorderType, setBorderSuccess, scanAnimationContainer, successAnimationContainer, frameImage, frameText, facingMode, ocrEngineConfig, sdkFlowTimeout = undefined, makeSDKFlowTimeout, image, video, retryBtn, completeBtn, confirmImageContainer, confrimContainer) => {
+const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCardPoints, setCardBorderColor, statusText, canvasSizeInfo$, showVideoElement, config, cardRotateByStage, getCardBorderPoint, setBorderType, setBorderSuccess, scanAnimationContainer, successAnimationContainer, frameImage, frameText, facingMode, ocrEngineConfig, sdkFlowTimeout = null, makeSDKFlowTimeout, image, video, retryBtn, completeBtn, confirmImageContainer, confrimContainer) => {
   const videoToCanvas = (sizeInfo, data) => {
     const ctx2 = image.getContext('2d');
     image.width = sizeInfo.canvasWidth;
@@ -29975,7 +30077,7 @@ const startThickness = (type, cardType, cardTypeConfig, setHintTextLocale, setCa
         break;
       case idRecognition.EAuthMeIDCardAntiFraudStatus.Error:
         statusText.textContent = translateService.translate('sdk.general.error.alert.serverError');
-        util.showErrorMessage(translateService.translate('sdk.general.error.alert.serverError'), true);
+        util.showErrorMessage(translateService.translate('sdk.general.error.alert.serverError'), false);
         sendStatusDescription$1(core.StatusDescription.Error);
         break;
       case idRecognition.EAuthMeIDCardAntiFraudStatus.NeedDeformationFrontal:
@@ -30254,7 +30356,6 @@ const toast = arg => {
 };
 
 const confirmPopup = arg => {
-  console.log('confirmPopup', arg);
   const authmeContainer = document.querySelector('.authme-container');
   if (!authmeContainer) {
     console.error('confirmPopup: authmeContainer not found');
@@ -30446,6 +30547,343 @@ const fraudScanIntroPage = arg => {
   authmeContainer.appendChild(domModal);
 };
 
+const ocrResultModal = arg => {
+  let modifiedDetails = {};
+  const authmeContainer = document.querySelector('.authme-container');
+  if (!authmeContainer) {
+    console.error('modal: authmeContainer not found');
+    return;
+  }
+  const translateService = core.getTranslateInstance();
+  const uiThemeConfig = util.Storage.getItem('themeConfig');
+  function removeOcrResultModal() {
+    var _a;
+    (_a = document.querySelector('.video-container__ocrResultModal')) === null || _a === void 0 ? void 0 : _a.remove();
+  }
+  function formatTime(seconds) {
+    const m = Math.floor(seconds % 3600 / 60);
+    const s = seconds % 60;
+    return [m, s].map(unit => String(unit).padStart(2, '0')).join(':');
+  }
+  function groupInput({
+    name,
+    label,
+    value
+  }) {
+    const domGroupItem = document.createElement('div');
+    domGroupItem.classList.add('video-container__ocrResultModal-group-item');
+    domGroupItem.id = name;
+    const domLabel = document.createElement('label');
+    const domInput = document.createElement('input');
+    const domError = document.createElement('div');
+    domLabel.classList.add('video-container__ocrResultModal-label');
+    domInput.classList.add('video-container__ocrResultModal-input');
+    domError.classList.add('video-container__ocrResultModal-error');
+    domError.classList.add('hidden');
+    domLabel.innerText = `${label}`;
+    domInput.type = 'text';
+    domInput.value = value;
+    domError.innerText = `${label}格式不符`;
+    domInput.addEventListener('input', () => {
+      validateFields() ? btnConfirmStatus(false) : btnConfirmStatus(true);
+      // btnConfirmStatus(Object.values(validateMap).some((i: any) => i.validate === false));
+    });
+
+    domGroupItem.appendChild(domLabel);
+    domGroupItem.appendChild(domInput);
+    domGroupItem.appendChild(domError);
+    return domGroupItem;
+  }
+  function groupDropMenu({
+    name,
+    label,
+    value,
+    selections
+  }) {
+    const domGroupItem = document.createElement('div');
+    domGroupItem.classList.add('video-container__ocrResultModal-group-item');
+    domGroupItem.id = name;
+    const domLabel = document.createElement('label');
+    domLabel.classList.add('video-container__ocrResultModal-label');
+    domLabel.innerText = `${label}`;
+    const domDropMenu = document.createElement('div');
+    domDropMenu.classList.add('drop_menu_container');
+    const domDropMenuTitle = document.createElement('div');
+    domDropMenuTitle.classList.add('drop_menu_title');
+    domDropMenuTitle.setAttribute('data-value', value);
+    domDropMenuTitle.innerHTML = `<span class="ellipsis">${selections.find(i => i.value === value) ? selections.find(i => i.value === value).name : '請選擇'}</span>
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 7L10.07 14L17 7" stroke="#343434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+    const domError = document.createElement('div');
+    domError.classList.add('video-container__ocrResultModal-error');
+    domError.classList.add('hidden');
+    domError.innerText = `${label}格式不符`;
+    let domDropMenuCancel = null;
+    if (window.innerWidth < 1440) {
+      // mobile
+      domDropMenuCancel = document.createElement('div');
+      domDropMenuCancel.classList.add('drop_menu_cancel');
+      domDropMenuCancel.innerText = arg.cancelText;
+    }
+    const domDropMenuulSection = document.createElement('section');
+    domDropMenuulSection.classList.add('drop_menu_ul_section');
+    const domDropMenuUlContainer = document.createElement('div');
+    domDropMenuUlContainer.classList.add('drop_menu_ul_container');
+    const domDropMenuUl = document.createElement('ul');
+    domDropMenuulSection.classList.add('hide');
+    selections.forEach(selection => {
+      const domDropMenuLi = document.createElement('li');
+      domDropMenuLi.classList.add('drop_menu_item');
+      if (selection.value === value) {
+        domDropMenuLi.classList.add('active');
+      }
+      domDropMenuLi.setAttribute('data-value', selection.value);
+      domDropMenuLi.innerHTML = `<span>${selection.name}</span>`;
+      domDropMenuUl.appendChild(domDropMenuLi);
+    });
+    domDropMenu.appendChild(domDropMenuTitle);
+    domDropMenuUlContainer.appendChild(domDropMenuUl);
+    if (domDropMenuCancel) {
+      domDropMenuUlContainer.appendChild(domDropMenuCancel);
+    }
+    domDropMenuulSection.appendChild(domDropMenuUlContainer);
+    domDropMenu.appendChild(domDropMenuulSection);
+    util.dropMenu(domDropMenu, dom => {
+      domDropMenuTitle.setAttribute('data-value', dom.getAttribute('data-value'));
+      validateFields() ? btnConfirmStatus(false) : btnConfirmStatus(true);
+    });
+    domGroupItem.appendChild(domLabel);
+    domGroupItem.appendChild(domDropMenu);
+    domGroupItem.appendChild(domError);
+    return domGroupItem;
+  }
+  function formatDate(dateString, format) {
+    // 解析日期字串為 Date 物件
+    const date = new Date(dateString);
+    const year = date.getFullYear(); // 取得年份
+    const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 取得月份並補齊兩位
+    const day = date.getDate().toString().padStart(2, '0'); // 取得日期並補齊兩位
+    // 根據傳入的 format 來替換字串
+    return format.replace('YYYY', year.toString()) // 替換 "YYYY" 為年份
+    .replace('yyyy', year.toString()) // 替換 "yyyy" 為年份
+    .replace('MM', month) // 替換 "MM" 為月份
+    .replace('dd', day) // 替換 "dd" 為日期
+    .replace('yyyy', year.toString()); // 處理 "yyyy" 格式
+  }
+
+  function isValidDateFormat(dateStr) {
+    const regex = /^\d{4}\/(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01])$/;
+    return regex.test(dateStr);
+  }
+  function checkModifiedData() {
+    const items = domModal.querySelectorAll('.video-container__ocrResultModal-group-item');
+    items.forEach(item => {
+      const input = item.querySelector('input');
+      if (input) {
+        const key = item.id;
+        const value = input.value;
+        let valueOrigin = arg.items.find(i => i.name === key).value;
+        const dateFormat = arg.items.find(i => i.name === key).dateFormat;
+        if (dateFormat) {
+          valueOrigin = formatDate(valueOrigin, dateFormat);
+        }
+        modifiedDetails[key] = {
+          isModified: value !== valueOrigin ? true : false,
+          value
+        };
+      } else if (item.querySelector('.drop_menu_title')) {
+        // drop menu
+        const key = item.id;
+        const value = item.querySelector('.drop_menu_title').getAttribute('data-value');
+        const valueOrigin = arg.items.find(i => i.name === key).value;
+        modifiedDetails[key] = {
+          isModified: value !== valueOrigin ? true : false,
+          value
+        };
+      }
+    });
+  }
+  function btnConfirmStatus(flag) {
+    domConfirm.disabled = flag;
+    util.uiThemeButton(domConfirm, uiThemeConfig.majorButton, flag);
+  }
+  function validateFields() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    for (const key in validateMap) {
+      const item = validateMap[key];
+      const domItem = domModal.querySelector(`#${key}`);
+      if (domItem) {
+        const input = domItem.querySelector('input');
+        if (input && item.regex) {
+          if (item.regex.test(input.value)) {
+            item.validate = true;
+            (_a = domItem.querySelector('.video-container__ocrResultModal-input')) === null || _a === void 0 ? void 0 : _a.classList.remove('error');
+            (_b = domItem.querySelector('.video-container__ocrResultModal-error')) === null || _b === void 0 ? void 0 : _b.classList.add('hidden');
+          } else {
+            item.validate = false;
+            (_c = domItem.querySelector('.video-container__ocrResultModal-input')) === null || _c === void 0 ? void 0 : _c.classList.add('error');
+            (_d = domItem.querySelector('.video-container__ocrResultModal-error')) === null || _d === void 0 ? void 0 : _d.classList.remove('hidden');
+          }
+        } else if (item.regex) {
+          // drop menu
+          const domDropMenu = domItem.querySelector('.drop_menu_title');
+          if (domDropMenu) {
+            if (domDropMenu.getAttribute('data-value') !== '') {
+              item.validate = true;
+              domDropMenu.classList.remove('error');
+              (_e = domItem.querySelector('.video-container__ocrResultModal-error')) === null || _e === void 0 ? void 0 : _e.classList.add('hidden');
+            } else {
+              item.validate = false;
+              domDropMenu.classList.add('error');
+              (_f = domItem.querySelector('.video-container__ocrResultModal-error')) === null || _f === void 0 ? void 0 : _f.classList.remove('hidden');
+            }
+          }
+        } else if (input && item.dateFormat) {
+          if (isValidDateFormat(input.value)) {
+            // if (item.dateFormat.test(input.value)) {
+            item.validate = true;
+            (_g = domItem.querySelector('.video-container__ocrResultModal-input')) === null || _g === void 0 ? void 0 : _g.classList.remove('error');
+            (_h = domItem.querySelector('.video-container__ocrResultModal-error')) === null || _h === void 0 ? void 0 : _h.classList.add('hidden');
+          } else {
+            item.validate = false;
+            (_j = domItem.querySelector('.video-container__ocrResultModal-input')) === null || _j === void 0 ? void 0 : _j.classList.add('error');
+            (_k = domItem.querySelector('.video-container__ocrResultModal-error')) === null || _k === void 0 ? void 0 : _k.classList.remove('hidden');
+          }
+        }
+      }
+    }
+    const isPass = Object.values(validateMap).every(item => item.validate === true);
+    return isPass;
+  }
+  modifiedDetails = arg.items.reduce((acc, item) => {
+    acc[item.name] = {
+      isModified: false,
+      value: item.value
+    };
+    return acc;
+  }, {});
+  let timer = Math.floor((arg.countDownTime - new Date().getTime()) / 1000);
+  const validateMap = {};
+  const domModal = document.createElement('div');
+  const domHeaderContainer = document.createElement('div');
+  const domBodyContainer = document.createElement('div');
+  const domBody = document.createElement('div');
+  const domTitle = document.createElement('div');
+  const domSubtitle = document.createElement('div');
+  const domFooterContainer = document.createElement('div');
+  const domCountDownContainer = document.createElement('div');
+  const domCountDown = document.createElement('div');
+  const domHint = document.createElement('div');
+  const domClose = document.createElement('div');
+  const domConfirm = document.createElement('button');
+  domModal.classList.add('video-container__ocrResultModal');
+  domHeaderContainer.classList.add('video-container__ocrResultModal-header-container');
+  domBodyContainer.classList.add('video-container__ocrResultModal-body-container');
+  domBody.classList.add('video-container__ocrResultModal-body');
+  domTitle.classList.add('video-container__ocrResultModal-title');
+  domSubtitle.classList.add('video-container__ocrResultModal-subtitle');
+  domFooterContainer.classList.add('video-container__ocrResultModal-footer-container');
+  domCountDownContainer.classList.add('video-container__ocrResultModal-countdown-container');
+  domCountDown.classList.add('video-container__ocrResultModal-countdown');
+  domHint.classList.add('video-container__ocrResultModal-hint');
+  domClose.classList.add('video-container__ocrResultModal-close');
+  domConfirm.classList.add('video-container__ocrResultModal-confirm');
+  btnConfirmStatus(true);
+  // uiThemeButton(domConfirm, uiThemeConfig.majorButton);
+  util.uiThemeText(domTitle, uiThemeConfig.resultTitle);
+  util.uiThemeText(domSubtitle, uiThemeConfig.resultBody);
+  domTitle.innerText = arg.title;
+  domSubtitle.innerText = arg.subtitle;
+  domHint.innerHTML = arg.hintText;
+  domCountDownContainer.innerHTML = `${arg.countDown1Text} <span class="video-container__ocrResultModal-countdown" style="color: ${uiThemeConfig.resultTime};font-size:${uiThemeConfig.fontSize}px;font-weight:${util.fontWeight[uiThemeConfig.textWeight]}"> ${formatTime(timer)} </span> ${arg.countDown2Text}`;
+  domConfirm.innerText = arg.confirmText;
+  domClose.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.1943 6.41714C19.6393 5.97216 19.6393 5.2507 19.1943 4.80571C18.7493 4.36073 18.0278 4.36073 17.5829 4.80571L12 10.3886L6.41714 4.80572C5.97216 4.36073 5.2507 4.36073 4.80571 4.80571C4.36073 5.2507 4.36073 5.97216 4.80571 6.41714L10.3886 12L4.80571 17.5829C4.36073 18.0278 4.36073 18.7493 4.80571 19.1943C5.2507 19.6393 5.97216 19.6393 6.41714 19.1943L12 13.6114L17.5829 19.1943C18.0278 19.6393 18.7493 19.6393 19.1943 19.1943C19.6393 18.7493 19.6393 18.0278 19.1943 17.5829L13.6114 12L19.1943 6.41714Z" fill="${uiThemeConfig.nonEkycCloseButton.contentColor}" fill-opacity="${uiThemeConfig.nonEkycCloseButton.contentOpacity}" /></svg>`;
+  const countdownInterval = setInterval(() => {
+    timer -= 1;
+    const countdownEl = domModal.querySelector('.video-container__ocrResultModal-countdown');
+    if (countdownEl) {
+      countdownEl.innerHTML = formatTime(timer);
+    }
+    if (timer <= 0) {
+      clearInterval(countdownInterval);
+    }
+  }, 1000);
+  // form start
+  arg.items.sort((a, b) => {
+    var _a, _b;
+    return ((_a = a.order) !== null && _a !== void 0 ? _a : Infinity) - ((_b = b.order) !== null && _b !== void 0 ? _b : Infinity);
+  });
+  arg.items.forEach(item => {
+    // init validateMap
+    if (item.regex) {
+      validateMap[item.name] = {
+        validate: false,
+        regex: new RegExp(item.regex.slice(1, -1))
+      };
+    } else if (item.selections) {
+      validateMap[item.name] = {
+        validate: false,
+        regex: /\S+/
+      };
+    } else if (item.dateFormat) {
+      validateMap[item.name] = {
+        validate: false,
+        dateFormat: new RegExp(item.dateFormat.slice(1, -1))
+      };
+    }
+    // init UI
+    if (!item.hidden) {
+      if (item.selections) {
+        const domDropMenu = groupDropMenu({
+          name: item.name,
+          label: item.name === 'issueReason' ? translateService.translate('sdk.ocr.verify.result.issueType') : translateService.translate(`sdk.ocr.verify.result.${item.name}`),
+          value: item.value,
+          selections: item.selections
+        });
+        domBody.appendChild(domDropMenu);
+      } else {
+        const domGroupItem = groupInput({
+          name: item.name,
+          label: item.name === 'issueReason' ? translateService.translate('sdk.ocr.verify.result.issueType') : translateService.translate(`sdk.ocr.verify.result.${item.name}`),
+          value: item.dateFormat ? formatDate(item.value, item.dateFormat) : item.value
+        });
+        domBody.appendChild(domGroupItem);
+      }
+    }
+  });
+  // form end
+  domHeaderContainer.appendChild(domTitle);
+  domHeaderContainer.appendChild(domSubtitle);
+  domModal.appendChild(domHeaderContainer);
+  domModal.appendChild(domClose);
+  domModal.appendChild(domBodyContainer);
+  // domBodyContainer.appendChild(domTitle);
+  // domBodyContainer.appendChild(domSubtitle);
+  domBodyContainer.appendChild(domBody);
+  domModal.appendChild(domFooterContainer);
+  domFooterContainer.appendChild(domCountDownContainer);
+  domFooterContainer.appendChild(domHint);
+  domFooterContainer.appendChild(domConfirm);
+  authmeContainer.appendChild(domModal);
+  validateFields() ? btnConfirmStatus(false) : btnConfirmStatus(true);
+  return new Promise(resolve => {
+    domClose.addEventListener('click', () => __awaiter(void 0, void 0, void 0, function* () {
+      if (arg.onClose) {
+        yield arg.onClose();
+      }
+      removeOcrResultModal();
+      resolve('close');
+    }));
+    domConfirm.addEventListener('click', () => __awaiter(void 0, void 0, void 0, function* () {
+      checkModifiedData();
+      if (arg.onConfirm) {
+        yield arg.onConfirm(modifiedDetails);
+      }
+      removeOcrResultModal();
+      resolve(modifiedDetails);
+    }));
+  });
+};
+
 const initEvenTrackingStatus = ocrConfig => {
   setFeature$1(ocrConfig.needAntiFraud ? core.Feature.OCRFraud : core.Feature.OCR);
 };
@@ -30454,7 +30892,9 @@ function startOCR(config) {
   return __awaiter(this, void 0, void 0, function* () {
     const translateService = core.getTranslateInstance();
     const timeout$ = new rxjs.Subject();
-    let sdkFlowTimeout;
+    // let sdkFlowTimeout: NodeJS.Timeout;
+    let sdkFlowTimeout = null;
+    let countDownTime = 0;
     let deviceMetas;
     // anti fraud
     let currentAntiFraudStage;
@@ -30667,17 +31107,41 @@ function startOCR(config) {
         return data;
       };
     })();
+    // function makeSDKFlowTimeout(expiredIn: number) {
+    //   return setTimeout(async () => {
+    //     asyncShowErrorMessage(
+    //       translateService.translate('sdk.general.error.timeout.content'),
+    //       false
+    //     );
+    //     await waitTime(3 * TIME_UNIT.SECOND);
+    //     timeout$.next({
+    //       isSuccess: false as const,
+    //       code: `${ErrorCode.ID_RECOGNITION_TIMEOUT}`,
+    //       message: new AuthmeError(ErrorCode.ID_RECOGNITION_TIMEOUT).message,
+    //       data: {},
+    //     });
+    //   }, expiredIn * TIME_UNIT.SECOND);
+    // }
     function makeSDKFlowTimeout(expiredIn) {
-      return setTimeout(() => __awaiter(this, void 0, void 0, function* () {
-        util.asyncShowErrorMessage(translateService.translate('sdk.general.error.timeout.content'), false);
-        yield util.waitTime(3 * util.TIME_UNIT.SECOND);
+      return rxjs.timer(expiredIn * util.TIME_UNIT.SECOND).pipe(rxjs.switchMap(() => new rxjs.Observable(observer => {
+        config.onDestroy();
+        popupView({
+          title: translateService.translate('sdk.general.error.timeout.title'),
+          content: translateService.translate('sdk.general.error.timeout.content'),
+          confirm: translateService.translate('sdk.general.confirm'),
+          onConfirm: () => {
+            observer.next(true);
+            observer.complete();
+          }
+        });
+      }))).subscribe(() => {
         timeout$.next({
           isSuccess: false,
           code: `${core.ErrorCode.ID_RECOGNITION_TIMEOUT}`,
           message: new core.AuthmeError(core.ErrorCode.ID_RECOGNITION_TIMEOUT).message,
           data: {}
         });
-      }), expiredIn * util.TIME_UNIT.SECOND);
+      });
     }
     function startAntiFraud(type, cardType) {
       const animateInterval = 2 * util.TIME_UNIT.SECOND;
@@ -30738,7 +31202,7 @@ function startOCR(config) {
             break;
           case idRecognition.EAuthMeIDCardAntiFraudStatus.Error:
             uiComponentOCR.statusText.textContent = translateService.translate('sdk.general.error.alert.serverError');
-            util.showErrorMessage(translateService.translate('sdk.general.error.alert.serverError'), true);
+            util.showErrorMessage(translateService.translate('sdk.general.error.alert.serverError'), false);
             sendStatusDescription$1(core.StatusDescription.Error);
             break;
           case idRecognition.EAuthMeIDCardAntiFraudStatus.NeedDeformationFrontal:
@@ -30813,6 +31277,7 @@ function startOCR(config) {
           buttonDisable$(cardMatchROI);
         }
         if (ocrEngineConfig.expiredIn && !sdkFlowTimeout) {
+          countDownTime = new Date().getTime() + ocrEngineConfig.expiredIn * util.TIME_UNIT.SECOND;
           sdkFlowTimeout = makeSDKFlowTimeout(ocrEngineConfig.expiredIn);
         }
       })), sendFrame(canvasSizeInfo, uiComponentOCR.image, uiComponentBasic.video, config.onAntiFraudFrame, ocrEngineConfig.fraudMaxFps, false, 'jpg', undefined), rxjs.map(x => x.result), rxjs.tap(x => {
@@ -31050,7 +31515,9 @@ function startOCR(config) {
       let ocrSendFrameAnimation = false;
       const handleOcrSendFrame = (canvasSizeInfo, canvas, video, frameCallback, fps, bas64Format, imageType, cardType, type) => source$ => {
         let received = true;
-        const ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext('2d', {
+          willReadFrequently: true
+        });
         return source$.pipe(rxjs.mergeMap(() => rxjs.animationFrames().pipe(limitFPS(fps), rxjs.filter(() => received && !ocrSendFrameAnimation), rxjs.tap(() => received = false), rxjs.tap(() => util.clearCanvas(canvas)), rxjs.map(() => util.getImageData(canvas, ctx, video, canvasSizeInfo, bas64Format, imageType)), rxjs.mergeMap(imageData => rxjs.from(frameCallback(imageData.data, imageData.base64, cardType, type)).pipe(rxjs.catchError(e => {
           // send to fast, ignore
           if (e instanceof core.AuthmeError && e.code === core.ErrorCode.RECOGNITION_NOT_AVAILABLE) {
@@ -31118,6 +31585,7 @@ function startOCR(config) {
         return init(retry).pipe(rxjs.tap(() => {
           setStatusView(core.StatusView.Running);
           if (ocrEngineConfig.expiredIn && !sdkFlowTimeout) {
+            countDownTime = new Date().getTime() + ocrEngineConfig.expiredIn * util.TIME_UNIT.SECOND;
             sdkFlowTimeout = makeSDKFlowTimeout(ocrEngineConfig.expiredIn);
           }
         }), rxjs.switchMap(canvasSizeInfo => {
@@ -31308,26 +31776,66 @@ function startOCR(config) {
       }), rxjs.switchMap(() => config.onSuccess()), rxjs.tap(() => {
         setStatusEvent$1(cardClassResultMapping(config.acceptTypes[config.acceptTypes.length - 1]));
         util.stopSpinner();
-        uiComponentBasic.container.style.display = 'none';
+        // only for TWN IDCard handle ocr result page
+        if (config.cardTypes[0].includes(idRecognition.IdRecognitionCardType.IDCard) && config.cardTypes[0].includes(idRecognition.CountryCode.TWN)) ; else {
+          uiComponentBasic.container.style.display = 'none';
+        }
       }), rxjs.concatMap(result => __awaiter(this, void 0, void 0, function* () {
         setStatusView(core.StatusView.Confirm);
         let modifiedData = result2ModifiedData(result.details);
         if (config.ocrConfig.displayResultPage) {
-          modifiedData = yield renderConfirmUI({
-            cardType: config.ocrConfig.type,
-            items: {
-              columns: Object.keys(result.details).sort((a, b) => {
-                const aScore = idRecognition.getRecognitionColumnOrder(a);
-                const bScore = idRecognition.getRecognitionColumnOrder(b);
-                return aScore - bScore || a.localeCompare(b);
-              }),
-              details: result.details
-            },
-            options: {
-              headerIcon: config.ocrConfig.icon,
-              translate: key => translateService.translate(key)
+          // only for TWN IDCard
+          if (config.cardTypes[0].includes(idRecognition.IdRecognitionCardType.IDCard) && config.cardTypes[0].includes(idRecognition.CountryCode.TWN)) {
+            const keyMapping = {
+              [idRecognition.IdRecognitionCardType.IDCard]: 'idCard',
+              [idRecognition.IdRecognitionCardType.DriverLicense]: 'driverLicense',
+              [idRecognition.IdRecognitionCardType.HealthCard]: 'HealthCard',
+              [idRecognition.IdRecognitionCardType.ResidentCard]: 'residentCard',
+              [idRecognition.IdRecognitionCardType.Passport]: 'passport'
+            };
+            const res = yield ocrResultModal({
+              title: `${'請確認'}${translateService.translate(config.ocrConfig.type ? `sdk.ocr.verify.result.title.${keyMapping[config.ocrConfig.type]}` : '')}`,
+              subtitle: '若資料有錯誤，可點擊內容進行修改',
+              items: result.ocrResultFilds,
+              confirmText: translateService.translate('sdk.general.confirm'),
+              hintText: '逾時將自動轉跳至選單頁並無法保存此次紀錄',
+              countDown1Text: '請在',
+              countDown2Text: '內完成確認',
+              countDownTime,
+              cancelText: translateService.translate('sdk.general.cancel'),
+              onConfirm: result => {
+                modifiedData = result;
+              },
+              onClose: () => {
+                // console.log('onClose');
+              }
+            });
+            if (res === 'close') {
+              const cancelResultObj = {
+                isSuccess: false,
+                code: `${core.ErrorCode.USER_CANCEL}`,
+                message: new core.AuthmeError(core.ErrorCode.USER_CANCEL).message,
+                data: {}
+              };
+              return cancelResultObj;
             }
-          });
+          } else {
+            modifiedData = yield renderConfirmUI({
+              cardType: config.ocrConfig.type,
+              items: {
+                columns: Object.keys(result.details).sort((a, b) => {
+                  const aScore = idRecognition.getRecognitionColumnOrder(a);
+                  const bScore = idRecognition.getRecognitionColumnOrder(b);
+                  return aScore - bScore || a.localeCompare(b);
+                }),
+                details: result.details
+              },
+              options: {
+                headerIcon: config.ocrConfig.icon,
+                translate: key => translateService.translate(key)
+              }
+            });
+          }
         }
         flags.onConfirm = true;
         util.Storage.setItem('scanId', result.scanId);
@@ -31374,7 +31882,7 @@ function startOCR(config) {
       const detectScreenResizeError$ = handleScreenResizeError$(detectScreenResize$(), unsubscribe$, () => !flags.onConfirm);
       return rxjs.merge(flow$, cancel$, detectScreenResizeError$, timeout$).pipe(rxjs.take(1));
     }
-    rxjs.fromEvent(window, 'offline').pipe(rxjs.switchMap(() => util.asyncOnLineShowErrorMessage(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'), true)), rxjs.takeUntil(unsubscribe$)).subscribe();
+    rxjs.fromEvent(window, 'offline').pipe(rxjs.switchMap(() => util.asyncOnLineShowErrorMessage(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'), false)), rxjs.takeUntil(unsubscribe$)).subscribe();
     // resize
     rxjs.fromEvent(window, 'resize').pipe(rxjs.switchMapTo(util.getCanvasSize(uiComponentBasic.video)), rxjs.switchMap(canvasSizeInfo => config.setFrameSize(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight, getCardBorderPoint())), rxjs.tap(() => {
       uiComponentOCR.scanAnimationContainer.style.width = `${cardSizeInfo.width + scanPadding}px`;
@@ -31756,7 +32264,12 @@ function startOCR(config) {
           uiComponentBasic.video.srcObject = null;
         }
         yield config.onDestroy();
-        if (sdkFlowTimeout) clearTimeout(sdkFlowTimeout);
+        // if (sdkFlowTimeout) clearTimeout(sdkFlowTimeout);
+        if (sdkFlowTimeout) {
+          sdkFlowTimeout.unsubscribe();
+          sdkFlowTimeout = null;
+        }
+        countDownTime = 0;
         eventListenerService$1.stop();
         util.hidePopup();
         uiComponentBasic.container.remove();
@@ -31965,7 +32478,7 @@ function startExtra(config) {
     util.stopSpinner();
     util.showElement(uiComponentBasic.videoContainer);
   }));
-  rxjs.fromEvent(window, 'offline').pipe(rxjs.switchMap(() => util.asyncOnLineShowErrorMessage(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'), true)), rxjs.takeUntil(unsubscribe$)).subscribe();
+  rxjs.fromEvent(window, 'offline').pipe(rxjs.switchMap(() => util.asyncOnLineShowErrorMessage(translateService.translate('sdk.general.error.alert.offline'), translateService.translate('sdk.general.error.retry'), false)), rxjs.takeUntil(unsubscribe$)).subscribe();
   rxjs.fromEvent(window, 'resize').pipe(rxjs.throttleTime(100), rxjs.switchMap(() => util.getCanvasSize(uiComponentBasic.video)), rxjs.takeUntil(unsubscribe$)).subscribe();
   rxjs.fromEvent(uiComponentBasic.pictureIcon, 'click').pipe(rxjs.switchMap(() => util.getCanvasSize(uiComponentBasic.video)), rxjs.switchMap(canvasSizeInfo => rxjs.from(checkConfirmImage(canvasSizeInfo)).pipe(rxjs.switchMap(needRetry => needRetry ? rxjs.of(true) : rxjs.from(config.confirmImage(canvasSizeInfo.canvasWidth, canvasSizeInfo.canvasHeight, imageData, canvas)).pipe(rxjs.map(confirmResp => !confirmResp))), rxjs.tap(() => {
     if (config.extraConfig.border == 'none') {
@@ -32077,7 +32590,7 @@ function startExtra(config) {
 
 function SendRequestWithRetry$3(promiseFactory) {
   return util.retryPromiseWithCondition(promiseFactory, () => __awaiter(this, void 0, void 0, function* () {
-    return util.asyncShowErrorMessage(core.getTranslateInstance().translate('sdk.general.error.alert.serverError'), true);
+    return util.asyncShowErrorMessage(core.getTranslateInstance().translate('sdk.general.error.alert.serverError'), false);
   }));
 }
 class ExtraModule {
@@ -32139,7 +32652,7 @@ class ExtraModule {
 
 function SendRequestWithRetry$2(promiseFactory) {
   return util.retryPromiseWithCondition(promiseFactory, () => __awaiter(this, void 0, void 0, function* () {
-    return util.asyncShowErrorMessage(core.getTranslateInstance().translate('sdk.general.error.alert.serverError'), true);
+    return util.asyncShowErrorMessage(core.getTranslateInstance().translate('sdk.general.error.alert.serverError'), false);
   }));
 }
 class LivenessVerifyModule {
@@ -32250,7 +32763,9 @@ class LivenessVerifyModule {
             const result = yield this.fasService.recognition(data);
             if (this.canvas) {
               const debugData = yield (_c = this.fasService) === null || _c === void 0 ? void 0 : _c.getDebugImageData(data);
-              const ctx = this.canvas.getContext('2d');
+              const ctx = this.canvas.getContext('2d', {
+                willReadFrequently: true
+              });
               this.canvas.width = frameWidth;
               this.canvas.height = frameHeight;
               ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -32497,7 +33012,9 @@ class LivenessModule {
             const result = yield this.fasService.recognition(data);
             if (this.canvas) {
               const debugData = yield (_b = this.fasService) === null || _b === void 0 ? void 0 : _b.getDebugImageData(data);
-              const ctx = this.canvas.getContext('2d');
+              const ctx = this.canvas.getContext('2d', {
+                willReadFrequently: true
+              });
               this.canvas.width = frameWidth;
               this.canvas.height = frameHeight;
               ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -32863,7 +33380,7 @@ function initFrameView(cardPoints, scanId, faceMode, scanView, cardType, cardTyp
 
 function SendRequestWithRetry$1(promiseFactory) {
   return util.retryPromiseWithCondition(promiseFactory, () => __awaiter(this, void 0, void 0, function* () {
-    return util.asyncShowErrorMessage(core.getTranslateInstance().translate('sdk.general.error.alert.serverError'), true);
+    return util.asyncShowErrorMessage(core.getTranslateInstance().translate('sdk.general.error.alert.serverError'), false);
   }));
 }
 class MRZModule {
@@ -32995,7 +33512,9 @@ class MRZModule {
             const mrzResult = yield this.mrzService.recognition(data);
             if (this.canvas) {
               const debugData = yield (_d = this.mrzService) === null || _d === void 0 ? void 0 : _d.getDebugImageData(data);
-              const ctx = this.canvas.getContext('2d');
+              const ctx = this.canvas.getContext('2d', {
+                willReadFrequently: true
+              });
               this.canvas.width = frameWidth;
               this.canvas.height = frameHeight;
               ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -33156,7 +33675,8 @@ class MRZModule {
             yield util.waitTime(1000);
             return {
               scanId: scanId,
-              details: latestTField !== null && latestTField !== void 0 ? latestTField : {}
+              details: latestTField !== null && latestTField !== void 0 ? latestTField : {},
+              ocrResultFilds: []
             };
           }),
           onDestroy: () => __awaiter(this, void 0, void 0, function* () {
@@ -33216,7 +33736,9 @@ function SendRequestWithRetry(promiseFactory, options = {}) {
     var _a, _b, _c;
     const errorParams = (options === null || options === void 0 ? void 0 : options.onErrorHandler) ? options === null || options === void 0 ? void 0 : options.onErrorHandler(e) : {};
     util.stopSpinner();
-    return util.asyncShowErrorMessage(core.getTranslateInstance().translate((_a = errorParams === null || errorParams === void 0 ? void 0 : errorParams.errorText) !== null && _a !== void 0 ? _a : 'sdk.general.error.alert.serverError'), errorParams.showRetryButton, {
+    return util.asyncShowErrorMessage(core.getTranslateInstance().translate((_a = errorParams === null || errorParams === void 0 ? void 0 : errorParams.errorText) !== null && _a !== void 0 ? _a : 'sdk.general.error.alert.serverError'),
+    // errorParams.showRetryButton,
+    false, {
       callback: errorParams === null || errorParams === void 0 ? void 0 : errorParams.onButtonClick,
       buttonText: core.getTranslateInstance().translate((_b = errorParams === null || errorParams === void 0 ? void 0 : errorParams.buttonText) !== null && _b !== void 0 ? _b : 'sdk.general.error.retry'),
       titleText: core.getTranslateInstance().translate((_c = errorParams === null || errorParams === void 0 ? void 0 : errorParams.titleText) !== null && _c !== void 0 ? _c : ''),
@@ -33407,6 +33929,7 @@ class OCRModule {
       let backImage = null;
       let frontCropImage = null;
       let backCropImage = null;
+      let ocrResultFilds = [];
       const {
         getDebugLogsLength,
         modifyDeubgLog,
@@ -33497,7 +34020,6 @@ class OCRModule {
           ocrConfig: config,
           getOptionConfig: () => __awaiter(this, void 0, void 0, function* () {
             const res = yield idRecognition.option();
-            console.log('themeId:', res.themeId);
             const themeId = res.themeId;
             if (!themeId) {
               return {};
@@ -33827,13 +34349,13 @@ class OCRModule {
                 border: {
                   enable: uiThemeConfig.scanFrame.isEnabled,
                   type: uiThemeConfig.scanFrame.style,
-                  color: uiThemeConfig.scanFrame.scanFrame.undetectedColor,
-                  opacity: uiThemeConfig.scanFrame.scanFrame.opacity
+                  color: uiThemeConfig.scanFrame.undetectedColor,
+                  opacity: uiThemeConfig.scanFrame.opacity
                 },
                 success: {
                   enable: uiThemeConfig.scanFrame.isEnabled,
                   color: uiThemeConfig.scanFrame.detectedColor,
-                  opacity: uiThemeConfig.scanFrame.scanFrame.opacity
+                  opacity: uiThemeConfig.scanFrame.opacity
                 },
                 content: scanView ? resp.scanView.content : [],
                 line: {
@@ -33928,7 +34450,9 @@ class OCRModule {
             }
             if (this.canvas) {
               const debugData = yield (_f = this.antiFraudInstance) === null || _f === void 0 ? void 0 : _f.getDebugImageData(data);
-              const ctx = this.canvas.getContext('2d');
+              const ctx = this.canvas.getContext('2d', {
+                willReadFrequently: true
+              });
               this.canvas.width = frameWidth;
               this.canvas.height = frameHeight;
               ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -34055,7 +34579,9 @@ class OCRModule {
             });
             if (this.canvas) {
               const debugData = yield _service === null || _service === void 0 ? void 0 : _service.getDebugImageData(data);
-              const ctx = this.canvas.getContext('2d');
+              const ctx = this.canvas.getContext('2d', {
+                willReadFrequently: true
+              });
               this.canvas.width = frameWidth;
               this.canvas.height = frameHeight;
               ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -34094,7 +34620,6 @@ class OCRModule {
               // downloadImage(image, `${frameIndex}-${docInfos[type as EAuthMeCardClass].docId}-${new Date().getTime().toString()}.jpg`)
               frameIndex++;
               util.backgroundRequest(() => __awaiter(this, void 0, void 0, function* () {
-                console.log('recognition', docInfos[cardType !== null && cardType !== void 0 ? cardType : ''].docId);
                 if (docInfos[eClass].docId === '') {
                   console.warn('didnt find docid, retry');
                   return false;
@@ -34253,7 +34778,7 @@ class OCRModule {
                 throw 'recognition failed';
               }
               result = unionMerge(result, resp && resp.details || {});
-              yield SendRequestWithRetry(() => __awaiter(this, void 0, void 0, function* () {
+              const res = yield SendRequestWithRetry(() => __awaiter(this, void 0, void 0, function* () {
                 const postData = {
                   scanDocumentId: docId,
                   details: resp === null || resp === void 0 ? void 0 : resp.details,
@@ -34274,7 +34799,11 @@ class OCRModule {
               //   needFraudOption ? this.fraudResult : null
               // )
               );
-
+              // ocrResultFilds = res.fields.concat(ocrResultFilds);
+              ocrResultFilds = ocrResultFilds.map(item1 => {
+                const item2 = res.fields.find(item => item.name === item1.name);
+                return item2 ? Object.assign(Object.assign({}, item1), item2) : item1;
+              }).concat(res.fields.filter(item2 => !ocrResultFilds.some(item1 => item1.name === item2.name)));
               delete docInfos[option.cardType];
               return true;
             } catch (error) {
@@ -34450,7 +34979,9 @@ class OCRModule {
             }
             if (this.canvas) {
               const debugData = yield (_j = this.antiFraudInstance) === null || _j === void 0 ? void 0 : _j.getDebugImageData(data);
-              const ctx = this.canvas.getContext('2d');
+              const ctx = this.canvas.getContext('2d', {
+                willReadFrequently: true
+              });
               this.canvas.width = frameWidth;
               this.canvas.height = frameHeight;
               ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -34597,7 +35128,8 @@ class OCRModule {
               frontImage,
               backImage,
               frontCropImage,
-              backCropImage
+              backCropImage,
+              ocrResultFilds
             };
           }),
           onDestroy: () => __awaiter(this, void 0, void 0, function* () {
@@ -34659,7 +35191,7 @@ function renderCardTypeAndCountryConfig(config) {
     currentCardTypeAndCountry = Object.assign(Object.assign({}, currentCardTypeAndCountry), {
       country
     });
-    countrySelectDropdownText.innerText = translate(`sdk.home.selectCountry.${country}`);
+    countrySelectDropdownText.innerText = translate(`sdk.general.country.${country}`);
   };
   const dropdownSwitch = switchTarget => {
     const closeDropdown = () => {
@@ -34696,7 +35228,7 @@ function renderCardTypeAndCountryConfig(config) {
         <label class="country-select-label">${translate('sdk.home.selectCountry')}</label>
         <div class="country-select-dropdown">
           <div class="country-select-dropdown-frame">
-            <div class="country-select-dropdown-text">${translate(`sdk.home.selectCountry.${config.defaultCountry}`)}</div>
+            <div class="country-select-dropdown-text">${translate(`sdk.general.country.${config.defaultCountry}`)}</div>
             <div class="country-select-dropdown-icon"></div>
           </div>
           <div class="dropdown-country-list"></div>
@@ -34727,7 +35259,7 @@ function renderCardTypeAndCountryConfig(config) {
       countryDom.classList.add('dropdown-country-list-item');
       countryDom.innerHTML = `
           <div class="dropdown-country-list-item-frame">
-            <div class="dropdown-country-list-item-text">${translate(`sdk.home.selectCountry.${country}`)}</div>
+            <div class="dropdown-country-list-item-text">${translate(`sdk.general.country.${country}`)}</div>
           </div>
           `;
       countryDom.addEventListener('click', event => {
@@ -35114,8 +35646,8 @@ class AuthmeIdentityVerification extends engine.AuthmeFunctionModule {
 }
 
 var name = "authme/sdk";
-var version$1 = "2.8.2";
-var date = "2025-02-26T06:47:43+0000";
+var version$1 = "2.8.4";
+var date = "2025-03-13T06:47:53+0000";
 var packageInfo = {
 	name: name,
 	version: version$1,