react-native-timacare 3.3.56-alert → 3.3.58-cccd

package/lib/commonjs/screens/NFC/ScanMRZ.js

@@ -0,0 +1,2 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.computeCropRegion=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));var _mobxReactLite=require("mobx-react-lite");var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeMrzScanner=require("react-native-mrz-scanner");var _reactNativeVisionCamera=require("react-native-vision-camera");var _reactNativeImageManipulator=_interopRequireDefault(require("@oguzhnatly/react-native-image-manipulator"));var _reactNativeImageCropPicker=_interopRequireDefault(require("react-native-image-crop-picker"));var _reactNativeImagePicker=require("react-native-image-picker");var _AlertGlobal=require("../../components/ModalNotification/AlertGlobal");var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _native=require("@react-navigation/native");var _icons=require("../../assets/icons");var _svgs=require("../../assets/svgs");var _MText=require("../../components/MText");var _this=this,_jsxFileName="/Users/tima/Tima/react-native-timacare/src/screens/NFC/ScanMRZ.tsx";function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap(),n=new WeakMap();return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f);}for(var _t3 in e)"default"!==_t3&&{}.hasOwnProperty.call(e,_t3)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,_t3))&&(i.get||i.set)?o(f,_t3,i):f[_t3]=e[_t3]);return f;})(e,t);}var NFCReader=_reactNative.NativeModules.NFCReader;var ORANGE='#F05123';var CARD_ASPECT_RATIO=85.6/54;var getNfcStatus=function _callee(){var status,_t;return _regenerator.default.async(function(_context){while(1)switch(_context.prev=_context.next){case 0:if(!(_reactNative.Platform.OS==='ios')){_context.next=1;break;}return _context.abrupt("return",{supported:true,enabled:true});case 1:_context.prev=1;_context.next=2;return _regenerator.default.awrap(NFCReader==null?void 0:NFCReader.getNfcStatus==null?void 0:NFCReader.getNfcStatus());case 2:status=_context.sent;return _context.abrupt("return",{supported:!!(status!=null&&status.supported),enabled:!!(status!=null&&status.enabled)});case 3:_context.prev=3;_t=_context["catch"](1);return _context.abrupt("return",{supported:false,enabled:false});case 4:case"end":return _context.stop();}},null,null,[[1,3]],Promise);};var promptEnableNfc=function promptEnableNfc(){_AlertGlobal.AlertGlobal.show({type:'warning',title:'NFC đang tắt',message:'Thiết bị của bạn hỗ trợ NFC nhưng đang tắt. Vui lòng bật NFC để đọc thông tin thẻ CCCD.',primaryText:'Mở cài đặt',secondaryText:'Để sau',onPrimaryPress:function onPrimaryPress(){_reactNative.Linking.sendIntent('android.settings.NFC_SETTINGS').catch(function(){});}});};var getImageSize=function getImageSize(uri){return new Promise(function(resolve,reject){_reactNative.Image.getSize(uri,function(width,height){return resolve({width:width,height:height});},reject);});};var computeCropRegion=exports.computeCropRegion=function computeCropRegion(photoW,photoH,frameW,frameH){var rotated=photoW>photoH!==frameW>frameH;var w=rotated?photoH:photoW;var h=rotated?photoW:photoH;var scale=Math.max(frameW/w,frameH/h);var cropW=Math.min(w,Math.round(frameW/scale));var cropH=Math.min(h,Math.round(frameH/scale));var cropX=Math.max(0,Math.round((w-cropW)/2));var cropY=Math.max(0,Math.round((h-cropH)/2));return rotated?{originX:cropY,originY:cropX,width:cropH,height:cropW}:{originX:cropX,originY:cropY,width:cropW,height:cropH};};var ScanMRZ=function ScanMRZ(props){var _props$route$params$i,_props$route,_props$route$params,_props$route2,_props$route2$params;var insets=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)();var navigation=(0,_native.useNavigation)();var isFocused=(0,_native.useIsFocused)();var scannerRef=(0,_react.useRef)(null);var cameraRef=(0,_react.useRef)(null);var frameLayout=(0,_react.useRef)({width:0,height:0});var _useState=(0,_react.useState)((_props$route$params$i=(_props$route=props.route)==null?void 0:(_props$route$params=_props$route.params)==null?void 0:_props$route$params.initialMode)!=null?_props$route$params$i:null),_useState2=(0,_slicedToArray2.default)(_useState,2),mode=_useState2[0],setMode=_useState2[1];var _useState3=(0,_react.useState)(true),_useState4=(0,_slicedToArray2.default)(_useState3,2),autoCapture=_useState4[0],setAutoCapture=_useState4[1];var _useState5=(0,_react.useState)(_reactNative.Platform.OS==='ios'),_useState6=(0,_slicedToArray2.default)(_useState5,2),hasPermission=_useState6[0],setHasPermission=_useState6[1];var _useState7=(0,_react.useState)(false),_useState8=(0,_slicedToArray2.default)(_useState7,2),cameraReady=_useState8[0],setCameraReady=_useState8[1];var _useState9=(0,_react.useState)(false),_useState0=(0,_slicedToArray2.default)(_useState9,2),taking=_useState0[0],setTaking=_useState0[1];var _useState1=(0,_react.useState)(null),_useState10=(0,_slicedToArray2.default)(_useState1,2),captured=_useState10[0],setCaptured=_useState10[1];var device=(0,_reactNativeVisionCamera.useCameraDevice)('back');var format=(0,_reactNativeVisionCamera.useCameraFormat)(device,[{photoResolution:{width:1280,height:720}}]);var front=((_props$route2=props.route)==null?void 0:(_props$route2$params=_props$route2.params)==null?void 0:_props$route2$params.front)!==false;(0,_react.useEffect)(function(){if(_reactNative.Platform.OS==='android'){_reactNative.PermissionsAndroid.request(_reactNative.PermissionsAndroid.PERMISSIONS.CAMERA,{title:'Quyền camera',message:'Ứng dụng cần camera để quét chuỗi ký tự trên mặt sau thẻ CCCD.',buttonPositive:'Đồng ý',buttonNegative:'Từ chối'}).then(function(status){return setHasPermission(status===_reactNative.PermissionsAndroid.RESULTS.GRANTED);});}},[]);(0,_react.useEffect)(function(){var _props$route3,_props$route3$params;if((_props$route3=props.route)!=null&&(_props$route3$params=_props$route3.params)!=null&&_props$route3$params.initialMode)return;getNfcStatus().then(function(_ref){var supported=_ref.supported,enabled=_ref.enabled;setMode(supported?'nfc':'photo');if(supported&&!enabled){promptEnableNfc();}});},[]);var switchToNfc=function _callee2(){var _await$getNfcStatus,supported,enabled;return _regenerator.default.async(function(_context2){while(1)switch(_context2.prev=_context2.next){case 0:setMode('nfc');_context2.next=1;return _regenerator.default.awrap(getNfcStatus());case 1:_await$getNfcStatus=_context2.sent;supported=_await$getNfcStatus.supported;enabled=_await$getNfcStatus.enabled;if(supported&&!enabled){promptEnableNfc();}case 2:case"end":return _context2.stop();}},null,null,null,Promise);};(0,_react.useEffect)(function(){setCameraReady(false);var timeout=setTimeout(function(){return setCameraReady(true);},500);return function(){return clearTimeout(timeout);};},[mode]);var handleDetected=(0,_react.useCallback)(function(result){var _result$idNumber;_reactNative.Alert.alert('Đã đọc MRZ',["H\u1ECD t\xEAn: "+result.fullName,"S\u1ED1 \u0111\u1ECBnh danh: "+((_result$idNumber=result.idNumber)!=null?_result$idNumber:result.documentNumber),"Ng\xE0y sinh: "+result.dateOfBirth,"H\u1EBFt h\u1EA1n: "+result.dateOfExpiry,"H\u1EE3p l\u1EC7: "+(result.valid?'Có':'Không')].join('\n'),[{text:'Quét lại',onPress:function onPress(){var _scannerRef$current;return(_scannerRef$current=scannerRef.current)==null?void 0:_scannerRef$current.resume();}}]);},[]);var handleError=(0,_react.useCallback)(function(error){_AlertGlobal.AlertGlobal.show({type:'warning',title:'Thông báo',message:error==null?void 0:error.message});},[]);var cropToFrame=function _callee3(uri){var _frameLayout$current,frameW,frameH,_await$getImageSize,photoW,photoH,crop,result;return _regenerator.default.async(function(_context3){while(1)switch(_context3.prev=_context3.next){case 0:_frameLayout$current=frameLayout.current,frameW=_frameLayout$current.width,frameH=_frameLayout$current.height;if(!(!frameW||!frameH)){_context3.next=1;break;}return _context3.abrupt("return",uri);case 1:_context3.next=2;return _regenerator.default.awrap(getImageSize(uri));case 2:_await$getImageSize=_context3.sent;photoW=_await$getImageSize.width;photoH=_await$getImageSize.height;crop=computeCropRegion(photoW,photoH,frameW,frameH);console.log('CCCD crop region',{photoW:photoW,photoH:photoH,frameW:frameW,frameH:frameH,crop:crop});_context3.next=3;return _regenerator.default.awrap(_reactNativeImageManipulator.default.manipulate(uri,[{crop:crop}],{compress:0.9,format:'jpeg'}));case 3:result=_context3.sent;return _context3.abrupt("return",result.uri);case 4:case"end":return _context3.stop();}},null,null,null,Promise);};var takePicture=function _callee4(){var photo,uri,cropped,_t2;return _regenerator.default.async(function(_context4){while(1)switch(_context4.prev=_context4.next){case 0:if(!(cameraRef.current==null||taking)){_context4.next=1;break;}return _context4.abrupt("return");case 1:setTaking(true);_context4.prev=2;_context4.next=3;return _regenerator.default.awrap(cameraRef.current.takePhoto({qualityPrioritization:'quality'}));case 3:photo=_context4.sent;uri='file://'+photo.path;_context4.next=4;return _regenerator.default.awrap(cropToFrame(uri));case 4:cropped=_context4.sent;setCaptured(cropped);_context4.next=6;break;case 5:_context4.prev=5;_t2=_context4["catch"](2);console.error(_t2);_AlertGlobal.AlertGlobal.show({type:'warning',title:'Thông báo',message:'Không chụp được ảnh. Vui lòng thử lại.'});case 6:_context4.prev=6;setTaking(false);return _context4.finish(6);case 7:case"end":return _context4.stop();}},null,null,[[2,5,6,7]],Promise);};var pickImageFromGallery=function _callee5(){var _result$assets,_result$assets$,result;return _regenerator.default.async(function(_context5){while(1)switch(_context5.prev=_context5.next){case 0:if(!(_reactNative.Platform.OS==='android')){_context5.next=2;break;}_context5.next=1;return _regenerator.default.awrap((0,_reactNativeImagePicker.launchImageLibrary)({mediaType:'photo'}));case 1:result=_context5.sent;if((_result$assets=result.assets)!=null&&(_result$assets$=_result$assets[0])!=null&&_result$assets$.uri){setCaptured(result.assets[0].uri);}_context5.next=3;break;case 2:_reactNativeImageCropPicker.default.openPicker({}).then(function(image){if(image!=null&&image.path){setCaptured('file://'+image.path);}});case 3:case"end":return _context5.stop();}},null,null,null,Promise);};var usePhoto=function usePhoto(){var _props$route$params$o,_props$route4,_props$route4$params,_props$route5,_props$route5$params;var callback=(_props$route$params$o=(_props$route4=props.route)==null?void 0:(_props$route4$params=_props$route4.params)==null?void 0:_props$route4$params.onCaptured)!=null?_props$route$params$o:(_props$route5=props.route)==null?void 0:(_props$route5$params=_props$route5.params)==null?void 0:_props$route5$params.callback;if(callback){navigation.goBack();callback(captured);}else{_AlertGlobal.AlertGlobal.show({type:'success',title:'Đã chụp ảnh',message:captured});}};return _react.default.createElement(_reactNative.View,{style:styles.container,__self:_this,__source:{fileName:_jsxFileName,lineNumber:253,columnNumber:5}},_react.default.createElement(_reactNative.View,{style:[styles.header,{paddingTop:insets.top+16}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:254,columnNumber:7}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:function onPress(){navigation.goBack();},hitSlop:{top:12,bottom:12,left:12,right:12},__self:_this,__source:{fileName:_jsxFileName,lineNumber:255,columnNumber:9}},_react.default.createElement(_icons.IconBack,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:261,columnNumber:11}})),_react.default.createElement(_reactNative.View,{style:styles.tabs,__self:_this,__source:{fileName:_jsxFileName,lineNumber:263,columnNumber:9}},_react.default.createElement(_reactNative.TouchableOpacity,{style:[styles.tab,mode==='photo'?styles.tabActive:styles.tabInactive],onPress:function onPress(){return setMode('photo');},__self:_this,__source:{fileName:_jsxFileName,lineNumber:264,columnNumber:11}},_react.default.createElement(_MText.MText,{style:mode==='photo'?styles.tabTextActive:styles.tabTextInactive,__self:_this,__source:{fileName:_jsxFileName,lineNumber:271,columnNumber:13}},"Ch\u1EE5p CCCD")),_react.default.createElement(_reactNative.TouchableOpacity,{style:[styles.tab,mode==='nfc'?styles.tabActive:styles.tabInactive],onPress:switchToNfc,__self:_this,__source:{fileName:_jsxFileName,lineNumber:279,columnNumber:11}},_react.default.createElement(_MText.MText,{style:mode==='nfc'?styles.tabTextActive:styles.tabTextInactive,__self:_this,__source:{fileName:_jsxFileName,lineNumber:286,columnNumber:13}},"\u0110\u1ECDc NFC")))),mode==='nfc'?_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_MText.MText,{style:styles.instruction,__self:_this,__source:{fileName:_jsxFileName,lineNumber:299,columnNumber:11}},"D\xF9ng camera \u0111\u1EC3 qu\xE9t chu\u1ED7i k\xFD t\u1EF1 m\u1EB7t sau th\u1EBB",'\n',"CCCD g\u1EAFn ch\xEDp \u1EDF ph\xEDa d\u01B0\u1EDBi"),_react.default.createElement(_reactNative.View,{style:styles.cameraWrap,__self:_this,__source:{fileName:_jsxFileName,lineNumber:304,columnNumber:11}},hasPermission&&cameraReady&&isFocused&&_react.default.createElement(_reactNativeMrzScanner.MrzScannerView,{ref:scannerRef,style:_reactNative.StyleSheet.absoluteFill,autoCapture:autoCapture,onMrzDetected:handleDetected,onError:handleError,__self:_this,__source:{fileName:_jsxFileName,lineNumber:306,columnNumber:15}}),_react.default.createElement(_reactNative.View,{style:[styles.corner,styles.cornerTL],__self:_this,__source:{fileName:_jsxFileName,lineNumber:314,columnNumber:13}}),_react.default.createElement(_reactNative.View,{style:[styles.corner,styles.cornerTR],__self:_this,__source:{fileName:_jsxFileName,lineNumber:315,columnNumber:13}}),_react.default.createElement(_reactNative.View,{style:[styles.corner,styles.cornerBL],__self:_this,__source:{fileName:_jsxFileName,lineNumber:316,columnNumber:13}}),_react.default.createElement(_reactNative.View,{style:[styles.corner,styles.cornerBR],__self:_this,__source:{fileName:_jsxFileName,lineNumber:317,columnNumber:13}})),_react.default.createElement(_reactNative.TouchableOpacity,{style:styles.checkboxRow,onPress:function onPress(){return setAutoCapture(function(v){return!v;});},activeOpacity:0.7,__self:_this,__source:{fileName:_jsxFileName,lineNumber:320,columnNumber:11}},_react.default.createElement(_reactNative.Text,{style:styles.checkboxLabel,__self:_this,__source:{fileName:_jsxFileName,lineNumber:325,columnNumber:13}},"Ch\u1EE5p t\u1EF1 \u0111\u1ED9ng"),_react.default.createElement(_reactNative.View,{style:[styles.checkbox,autoCapture&&styles.checkboxChecked],__self:_this,__source:{fileName:_jsxFileName,lineNumber:326,columnNumber:13}},autoCapture&&_react.default.createElement(_reactNative.Text,{style:styles.checkmark,__self:_this,__source:{fileName:_jsxFileName,lineNumber:329,columnNumber:31}},"\u2713"))),_react.default.createElement(_MText.MText,{style:styles.hint,__self:_this,__source:{fileName:_jsxFileName,lineNumber:333,columnNumber:11}},"Vui l\xF2ng \u0111\u1EB7t chu\u1ED7i k\xED t\u1EF1 n\u1EB1m v\u1EEBa khung",'\n',"h\xECnh ch\u1EEF nh\u1EADt, ch\u1EE5p \u0111\u1EE7 \xE1nh s\xE1ng v\xE0 r\xF5 n\xE9t.")):mode==='photo'?_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_MText.MText,{style:styles.instruction,__self:_this,__source:{fileName:_jsxFileName,lineNumber:340,columnNumber:11}},front?'Chụp CMND/ CCCD mặt trước':'Chụp CMND/ CCCD mặt sau'),_react.default.createElement(_reactNative.View,{style:styles.photoFrame,onLayout:function onLayout(e){frameLayout.current=e.nativeEvent.layout;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:344,columnNumber:11}},captured?_react.default.createElement(_reactNative.Image,{source:{uri:captured},style:_reactNative.StyleSheet.absoluteFill,resizeMode:"cover",__self:_this,__source:{fileName:_jsxFileName,lineNumber:351,columnNumber:15}}):hasPermission&&cameraReady&&device?_react.default.createElement(_reactNativeVisionCamera.Camera,{ref:cameraRef,style:_reactNative.StyleSheet.absoluteFill,device:device,isActive:isFocused&&mode==='photo'&&!captured,photo:true,format:format,__self:_this,__source:{fileName:_jsxFileName,lineNumber:357,columnNumber:15}}):null,_react.default.createElement(_reactNative.View,{style:[styles.corner,styles.cornerTL],__self:_this,__source:{fileName:_jsxFileName,lineNumber:366,columnNumber:13}}),_react.default.createElement(_reactNative.View,{style:[styles.corner,styles.cornerTR],__self:_this,__source:{fileName:_jsxFileName,lineNumber:367,columnNumber:13}}),_react.default.createElement(_reactNative.View,{style:[styles.corner,styles.cornerBL],__self:_this,__source:{fileName:_jsxFileName,lineNumber:368,columnNumber:13}}),_react.default.createElement(_reactNative.View,{style:[styles.corner,styles.cornerBR],__self:_this,__source:{fileName:_jsxFileName,lineNumber:369,columnNumber:13}})),captured?_react.default.createElement(_reactNative.View,{style:styles.previewActions,__self:_this,__source:{fileName:_jsxFileName,lineNumber:373,columnNumber:13}},_react.default.createElement(_reactNative.TouchableOpacity,{style:styles.retakeButton,onPress:function onPress(){return setCaptured(null);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:374,columnNumber:15}},_react.default.createElement(_MText.MText,{style:styles.retakeText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:378,columnNumber:17}},"Ch\u1EE5p l\u1EA1i")),_react.default.createElement(_reactNative.TouchableOpacity,{style:styles.useButton,onPress:usePhoto,__self:_this,__source:{fileName:_jsxFileName,lineNumber:380,columnNumber:15}},_react.default.createElement(_MText.MText,{style:styles.useText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:381,columnNumber:17}},"D\xF9ng \u1EA3nh n\xE0y"))):_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_reactNative.TouchableOpacity,{style:styles.galleryButton,onPress:pickImageFromGallery,__self:_this,__source:{fileName:_jsxFileName,lineNumber:386,columnNumber:15}},_react.default.createElement(_svgs.IconUpload,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:390,columnNumber:17}}),_react.default.createElement(_MText.MText,{style:styles.galleryText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:391,columnNumber:17}},"T\u1EA3i \u1EA3nh t\u1EEB th\u01B0 vi\u1EC7n")),_react.default.createElement(_reactNative.View,{style:styles.spacer,__self:_this,__source:{fileName:_jsxFileName,lineNumber:393,columnNumber:15}}),_react.default.createElement(_MText.MText,{style:[styles.hint,{marginTop:0,marginBottom:20}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:394,columnNumber:15}},"Vui l\xF2ng \u0111\u1EB7t gi\u1EA5y t\u1EDD n\u1EB1m v\u1EEBa khung h\xECnh ch\u1EEF nh\u1EADt,",'\n',"ch\u1EE5p \u0111\u1EE7 \xE1nh s\xE1ng v\xE0 r\xF5 n\xE9t."),_react.default.createElement(_reactNative.TouchableOpacity,{style:[styles.captureButton,{marginBottom:insets.bottom+24}],onPress:takePicture,disabled:taking,__self:_this,__source:{fileName:_jsxFileName,lineNumber:398,columnNumber:15}},_react.default.createElement(_icons.TakePhotoSvg,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:406,columnNumber:17}})))):null);};var _default=exports.default=(0,_mobxReactLite.observer)(ScanMRZ);var styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:'#FFFFFF'},header:{flexDirection:'row',alignItems:'center',paddingHorizontal:16,paddingTop:8},tabs:{flex:1,flexDirection:'row',justifyContent:'center',gap:8},tab:{paddingHorizontal:14,paddingVertical:7,borderRadius:8},tabInactive:{backgroundColor:'#F1F1F1'},tabActive:{backgroundColor:ORANGE},tabTextInactive:{color:'#555555',fontSize:13,fontWeight:'500'},tabTextActive:{color:'#FFFFFF',fontSize:13,fontWeight:'600'},instruction:{textAlign:'center',color:'#333333',fontSize:14,lineHeight:20,marginTop:20,marginBottom:28},cameraWrap:{marginHorizontal:16,height:220,borderRadius:8,overflow:'hidden',backgroundColor:'#000000'},photoFrame:{marginHorizontal:24,aspectRatio:CARD_ASPECT_RATIO,borderRadius:8,overflow:'hidden',backgroundColor:'#000000'},corner:{position:'absolute',width:26,height:26,borderColor:ORANGE},cornerTL:{top:0,left:0,borderTopWidth:4,borderLeftWidth:4,borderTopLeftRadius:8},cornerTR:{top:0,right:0,borderTopWidth:4,borderRightWidth:4,borderTopRightRadius:8},cornerBL:{bottom:0,left:0,borderBottomWidth:4,borderLeftWidth:4,borderBottomLeftRadius:8},cornerBR:{bottom:0,right:0,borderBottomWidth:4,borderRightWidth:4,borderBottomRightRadius:8},checkboxRow:{flexDirection:'row',alignItems:'center',justifyContent:'center',marginTop:24,gap:8},checkboxLabel:{fontSize:14,color:'#333333'},checkbox:{width:20,height:20,borderRadius:4,borderWidth:1.5,borderColor:'#BBBBBB',alignItems:'center',justifyContent:'center'},checkboxChecked:{backgroundColor:'#22A45D',borderColor:'#22A45D'},checkmark:{color:'#FFFFFF',fontSize:13,fontWeight:'700'},hint:{textAlign:'center',color:'#555555',fontSize:13,lineHeight:19,marginTop:48},galleryButton:{alignSelf:'center',flexDirection:'row',alignItems:'center',gap:8,marginTop:20,paddingHorizontal:14,paddingVertical:8,borderRadius:8,borderWidth:1,borderColor:ORANGE,backgroundColor:'#FFFFFF'},galleryText:{color:'#333333',fontSize:13},spacer:{flex:1},captureButton:{alignSelf:'center'},previewActions:{flexDirection:'row',gap:12,marginTop:24,marginHorizontal:24},retakeButton:{flex:1,height:40,borderRadius:20,borderWidth:1,borderColor:ORANGE,alignItems:'center',justifyContent:'center'},retakeText:{color:ORANGE,fontSize:14,fontWeight:'600'},useButton:{flex:1,height:40,borderRadius:20,backgroundColor:ORANGE,alignItems:'center',justifyContent:'center'},useText:{color:'#FFFFFF',fontSize:14,fontWeight:'600'}});
+//# sourceMappingURL=ScanMRZ.js.map

package/lib/commonjs/screens/NFC/ScanMRZ.js.flow

@@ -0,0 +1,563 @@
+//@ts-nocheck
+import { observer } from 'mobx-react-lite';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Alert,
+  Image,
+  Linking,
+  NativeModules,
+  PermissionsAndroid,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {
+  MrzScannerView,
+  type MrzError,
+  type MrzResult,
+  type MrzScannerHandle,
+} from 'react-native-mrz-scanner';
+import {
+  Camera as VisionCamera,
+  useCameraDevice,
+  useCameraFormat,
+} from 'react-native-vision-camera';
+import RNImageManipulator from '@oguzhnatly/react-native-image-manipulator';
+import ImagePicker from 'react-native-image-crop-picker';
+import { launchImageLibrary } from 'react-native-image-picker';
+import { AlertGlobal } from '../../components/ModalNotification/AlertGlobal';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useIsFocused, useNavigation } from '@react-navigation/native';
+import { IconBack, TakePhotoSvg } from '../../assets/icons';
+import { IconUpload } from '../../assets/svgs';
+import { MText } from '../../components/MText';
+
+const { NFCReader } = NativeModules;
+
+const ORANGE = '#F05123';
+// Tỉ lệ thẻ CCCD/CMND theo chuẩn ID-1: 85.6mm x 54mm
+const CARD_ASPECT_RATIO = 85.6 / 54;
+
+// iPhone 7 trở lên (iOS 13+) đều có NFC và iOS không cho tắt NFC nên iOS
+// mặc định là hỗ trợ + đang bật. Android hỏi native module; máy không có
+// phần cứng NFC (hoặc app chủ chưa implement getNfcStatus) trả về false.
+const getNfcStatus = async () => {
+  if (Platform.OS === 'ios') return { supported: true, enabled: true };
+  try {
+    const status = await NFCReader?.getNfcStatus?.();
+    return { supported: !!status?.supported, enabled: !!status?.enabled };
+  } catch (e) {
+    return { supported: false, enabled: false };
+  }
+};
+
+const promptEnableNfc = () => {
+  AlertGlobal.show({
+    type: 'warning',
+    title: 'NFC đang tắt',
+    message:
+      'Thiết bị của bạn hỗ trợ NFC nhưng đang tắt. Vui lòng bật NFC để đọc thông tin thẻ CCCD.',
+    primaryText: 'Mở cài đặt',
+    secondaryText: 'Để sau',
+    onPrimaryPress: () => {
+      Linking.sendIntent('android.settings.NFC_SETTINGS').catch(() => {});
+    },
+  });
+};
+
+const getImageSize = (uri) =>
+  new Promise((resolve, reject) => {
+    Image.getSize(uri, (width, height) => resolve({ width, height }), reject);
+  });
+
+/**
+ * Tính vùng crop (pixel trên ảnh gốc) tương ứng với phần preview nhìn thấy
+ * trong khung. VisionCamera fill khung theo kiểu "cover": ảnh được scale để
+ * phủ kín khung rồi cắt phần thừa, nên vùng nhìn thấy là hình chữ nhật đồng
+ * dạng với khung và nằm chính giữa ảnh.
+ */
+export const computeCropRegion = (photoW, photoH, frameW, frameH) => {
+  // Ảnh lưu ngang nhưng khung dọc (hoặc ngược lại) -> tính trên hệ trục đã xoay 90°
+  const rotated = photoW > photoH !== frameW > frameH;
+  const w = rotated ? photoH : photoW;
+  const h = rotated ? photoW : photoH;
+
+  const scale = Math.max(frameW / w, frameH / h);
+  const cropW = Math.min(w, Math.round(frameW / scale));
+  const cropH = Math.min(h, Math.round(frameH / scale));
+  const cropX = Math.max(0, Math.round((w - cropW) / 2));
+  const cropY = Math.max(0, Math.round((h - cropH) / 2));
+
+  // Vùng crop luôn nằm chính giữa nên khi ảnh xoay 90° chỉ cần đảo trục
+  return rotated
+    ? { originX: cropY, originY: cropX, width: cropH, height: cropW }
+    : { originX: cropX, originY: cropY, width: cropW, height: cropH };
+};
+
+const ScanMRZ = (props: any) => {
+  const insets = useSafeAreaInsets();
+  const navigation = useNavigation();
+  const isFocused = useIsFocused();
+  const scannerRef = useRef<MrzScannerHandle>(null);
+  const cameraRef = useRef(null);
+  const frameLayout = useRef({ width: 0, height: 0 });
+  const [mode, setMode] = useState(props.route?.params?.initialMode ?? null);
+  const [autoCapture, setAutoCapture] = useState(true);
+  const [hasPermission, setHasPermission] = useState(Platform.OS === 'ios');
+  const [cameraReady, setCameraReady] = useState(false);
+  const [taking, setTaking] = useState(false);
+  const [captured, setCaptured] = useState(null);
+
+  const device = useCameraDevice('back');
+  const format = useCameraFormat(device, [
+    { photoResolution: { width: 1280, height: 720 } },
+  ]);
+
+  const front = props.route?.params?.front !== false;
+
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA, {
+        title: 'Quyền camera',
+        message:
+          'Ứng dụng cần camera để quét chuỗi ký tự trên mặt sau thẻ CCCD.',
+        buttonPositive: 'Đồng ý',
+        buttonNegative: 'Từ chối',
+      }).then((status) =>
+        setHasPermission(status === PermissionsAndroid.RESULTS.GRANTED)
+      );
+    }
+  }, []);
+
+  // Chưa chỉ định initialMode: thiết bị hỗ trợ NFC thì ưu tiên tab Đọc NFC,
+  // không hỗ trợ thì vào thẳng tab Chụp CCCD. Có NFC nhưng đang tắt thì vẫn
+  // vào tab NFC kèm nhắc bật NFC trong cài đặt.
+  useEffect(() => {
+    if (props.route?.params?.initialMode) return;
+    getNfcStatus().then(({ supported, enabled }) => {
+      setMode(supported ? 'nfc' : 'photo');
+      if (supported && !enabled) {
+        promptEnableNfc();
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Bấm tab Đọc NFC: check lại trạng thái vì người dùng có thể vừa tắt/bật NFC
+  const switchToNfc = async () => {
+    setMode('nfc');
+    const { supported, enabled } = await getNfcStatus();
+    if (supported && !enabled) {
+      promptEnableNfc();
+    }
+  };
+
+  // Đổi chế độ: gỡ camera cũ trước, chờ Android nhả camera rồi mới gắn camera mới
+  useEffect(() => {
+    setCameraReady(false);
+    const timeout = setTimeout(() => setCameraReady(true), 500);
+    return () => clearTimeout(timeout);
+  }, [mode]);
+
+  const handleDetected = useCallback((result: MrzResult) => {
+    Alert.alert(
+      'Đã đọc MRZ',
+      [
+        `Họ tên: ${result.fullName}`,
+        `Số định danh: ${result.idNumber ?? result.documentNumber}`,
+        `Ngày sinh: ${result.dateOfBirth}`,
+        `Hết hạn: ${result.dateOfExpiry}`,
+        `Hợp lệ: ${result.valid ? 'Có' : 'Không'}`,
+      ].join('\n'),
+      [{ text: 'Quét lại', onPress: () => scannerRef.current?.resume() }]
+    );
+  }, []);
+
+  const handleError = useCallback((error: MrzError) => {
+    AlertGlobal.show({
+      type: 'warning',
+      title: 'Thông báo',
+      message: error?.message,
+    });
+  }, []);
+
+  const cropToFrame = async (uri) => {
+    const { width: frameW, height: frameH } = frameLayout.current;
+    if (!frameW || !frameH) return uri;
+    const { width: photoW, height: photoH } = await getImageSize(uri);
+    const crop = computeCropRegion(photoW, photoH, frameW, frameH);
+    console.log('CCCD crop region', { photoW, photoH, frameW, frameH, crop });
+    const result = await RNImageManipulator.manipulate(uri, [{ crop }], {
+      compress: 0.9,
+      format: 'jpeg',
+    });
+    return result.uri;
+  };
+
+  const takePicture = async () => {
+    if (cameraRef.current == null || taking) return;
+    setTaking(true);
+    try {
+      const photo = await cameraRef.current.takePhoto({
+        qualityPrioritization: 'quality',
+      });
+      const uri = 'file://' + photo.path;
+      const cropped = await cropToFrame(uri);
+      setCaptured(cropped);
+    } catch (err) {
+      console.error(err);
+      AlertGlobal.show({
+        type: 'warning',
+        title: 'Thông báo',
+        message: 'Không chụp được ảnh. Vui lòng thử lại.',
+      });
+    } finally {
+      setTaking(false);
+    }
+  };
+
+  // Ảnh từ thư viện không đi qua preview nên không có toạ độ khung để crop
+  const pickImageFromGallery = async () => {
+    if (Platform.OS === 'android') {
+      const result = await launchImageLibrary({ mediaType: 'photo' });
+      if (result.assets?.[0]?.uri) {
+        setCaptured(result.assets[0].uri);
+      }
+    } else {
+      ImagePicker.openPicker({}).then((image) => {
+        if (image?.path) {
+          setCaptured('file://' + image.path);
+        }
+      });
+    }
+  };
+
+  const usePhoto = () => {
+    const callback =
+      props.route?.params?.onCaptured ?? props.route?.params?.callback;
+    if (callback) {
+      navigation.goBack();
+      callback(captured);
+    } else {
+      AlertGlobal.show({
+        type: 'success',
+        title: 'Đã chụp ảnh',
+        message: captured,
+      });
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.header, { paddingTop: insets.top + 16 }]}>
+        <TouchableOpacity
+          onPress={() => {
+            navigation.goBack();
+          }}
+          hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+        >
+          <IconBack />
+        </TouchableOpacity>
+        <View style={styles.tabs}>
+          <TouchableOpacity
+            style={[
+              styles.tab,
+              mode === 'photo' ? styles.tabActive : styles.tabInactive,
+            ]}
+            onPress={() => setMode('photo')}
+          >
+            <MText
+              style={
+                mode === 'photo' ? styles.tabTextActive : styles.tabTextInactive
+              }
+            >
+              Chụp CCCD
+            </MText>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[
+              styles.tab,
+              mode === 'nfc' ? styles.tabActive : styles.tabInactive,
+            ]}
+            onPress={switchToNfc}
+          >
+            <MText
+              style={
+                mode === 'nfc' ? styles.tabTextActive : styles.tabTextInactive
+              }
+            >
+              Đọc NFC
+            </MText>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {mode === 'nfc' ? (
+        <>
+          <MText style={styles.instruction}>
+            Dùng camera để quét chuỗi ký tự mặt sau thẻ{'\n'}CCCD gắn chíp ở
+            phía dưới
+          </MText>
+          {/* Khung camera + 4 góc cam */}
+          <View style={styles.cameraWrap}>
+            {hasPermission && cameraReady && isFocused && (
+              <MrzScannerView
+                ref={scannerRef}
+                style={StyleSheet.absoluteFill}
+                autoCapture={autoCapture}
+                onMrzDetected={handleDetected}
+                onError={handleError}
+              />
+            )}
+            <View style={[styles.corner, styles.cornerTL]} />
+            <View style={[styles.corner, styles.cornerTR]} />
+            <View style={[styles.corner, styles.cornerBL]} />
+            <View style={[styles.corner, styles.cornerBR]} />
+          </View>
+          {/* Checkbox chụp tự động */}
+          <TouchableOpacity
+            style={styles.checkboxRow}
+            onPress={() => setAutoCapture((v) => !v)}
+            activeOpacity={0.7}
+          >
+            <Text style={styles.checkboxLabel}>Chụp tự động</Text>
+            <View
+              style={[styles.checkbox, autoCapture && styles.checkboxChecked]}
+            >
+              {autoCapture && <Text style={styles.checkmark}>✓</Text>}
+            </View>
+          </TouchableOpacity>
+
+          <MText style={styles.hint}>
+            Vui lòng đặt chuỗi kí tự nằm vừa khung{'\n'}hình chữ nhật, chụp đủ
+            ánh sáng và rõ nét.
+          </MText>
+        </>
+      ) : mode === 'photo' ? (
+        <>
+          <MText style={styles.instruction}>
+            {front ? 'Chụp CMND/ CCCD mặt trước' : 'Chụp CMND/ CCCD mặt sau'}
+          </MText>
+          {/* Khung tỉ lệ thẻ CCCD: vùng nhìn thấy của preview = vùng sẽ crop */}
+          <View
+            style={styles.photoFrame}
+            onLayout={(e) => {
+              frameLayout.current = e.nativeEvent.layout;
+            }}
+          >
+            {captured ? (
+              <Image
+                source={{ uri: captured }}
+                style={StyleSheet.absoluteFill}
+                resizeMode="cover"
+              />
+            ) : hasPermission && cameraReady && device ? (
+              <VisionCamera
+                ref={cameraRef}
+                style={StyleSheet.absoluteFill}
+                device={device}
+                isActive={isFocused && mode === 'photo' && !captured}
+                photo={true}
+                format={format}
+              />
+            ) : null}
+            <View style={[styles.corner, styles.cornerTL]} />
+            <View style={[styles.corner, styles.cornerTR]} />
+            <View style={[styles.corner, styles.cornerBL]} />
+            <View style={[styles.corner, styles.cornerBR]} />
+          </View>
+
+          {captured ? (
+            <View style={styles.previewActions}>
+              <TouchableOpacity
+                style={styles.retakeButton}
+                onPress={() => setCaptured(null)}
+              >
+                <MText style={styles.retakeText}>Chụp lại</MText>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.useButton} onPress={usePhoto}>
+                <MText style={styles.useText}>Dùng ảnh này</MText>
+              </TouchableOpacity>
+            </View>
+          ) : (
+            <>
+              <TouchableOpacity
+                style={styles.galleryButton}
+                onPress={pickImageFromGallery}
+              >
+                <IconUpload />
+                <MText style={styles.galleryText}>Tải ảnh từ thư viện</MText>
+              </TouchableOpacity>
+              <View style={styles.spacer} />
+              <MText style={[styles.hint, { marginTop: 0, marginBottom: 20 }]}>
+                Vui lòng đặt giấy tờ nằm vừa khung hình chữ nhật,{'\n'}chụp đủ
+                ánh sáng và rõ nét.
+              </MText>
+              <TouchableOpacity
+                style={[
+                  styles.captureButton,
+                  { marginBottom: insets.bottom + 24 },
+                ]}
+                onPress={takePicture}
+                disabled={taking}
+              >
+                <TakePhotoSvg />
+              </TouchableOpacity>
+            </>
+          )}
+        </>
+      ) : null}
+    </View>
+  );
+};
+
+export default observer(ScanMRZ);
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#FFFFFF' },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingTop: 8,
+  },
+  tabs: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  tab: {
+    paddingHorizontal: 14,
+    paddingVertical: 7,
+    borderRadius: 8,
+  },
+  tabInactive: { backgroundColor: '#F1F1F1' },
+  tabActive: { backgroundColor: ORANGE },
+  tabTextInactive: { color: '#555555', fontSize: 13, fontWeight: '500' },
+  tabTextActive: { color: '#FFFFFF', fontSize: 13, fontWeight: '600' },
+  instruction: {
+    textAlign: 'center',
+    color: '#333333',
+    fontSize: 14,
+    lineHeight: 20,
+    marginTop: 20,
+    marginBottom: 28,
+  },
+  cameraWrap: {
+    marginHorizontal: 16,
+    height: 220,
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#000000',
+  },
+  photoFrame: {
+    marginHorizontal: 24,
+    aspectRatio: CARD_ASPECT_RATIO,
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#000000',
+  },
+  corner: {
+    position: 'absolute',
+    width: 26,
+    height: 26,
+    borderColor: ORANGE,
+  },
+  cornerTL: {
+    top: 0,
+    left: 0,
+    borderTopWidth: 4,
+    borderLeftWidth: 4,
+    borderTopLeftRadius: 8,
+  },
+  cornerTR: {
+    top: 0,
+    right: 0,
+    borderTopWidth: 4,
+    borderRightWidth: 4,
+    borderTopRightRadius: 8,
+  },
+  cornerBL: {
+    bottom: 0,
+    left: 0,
+    borderBottomWidth: 4,
+    borderLeftWidth: 4,
+    borderBottomLeftRadius: 8,
+  },
+  cornerBR: {
+    bottom: 0,
+    right: 0,
+    borderBottomWidth: 4,
+    borderRightWidth: 4,
+    borderBottomRightRadius: 8,
+  },
+  checkboxRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 24,
+    gap: 8,
+  },
+  checkboxLabel: { fontSize: 14, color: '#333333' },
+  checkbox: {
+    width: 20,
+    height: 20,
+    borderRadius: 4,
+    borderWidth: 1.5,
+    borderColor: '#BBBBBB',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkboxChecked: { backgroundColor: '#22A45D', borderColor: '#22A45D' },
+  checkmark: { color: '#FFFFFF', fontSize: 13, fontWeight: '700' },
+  hint: {
+    textAlign: 'center',
+    color: '#555555',
+    fontSize: 13,
+    lineHeight: 19,
+    marginTop: 48,
+  },
+  galleryButton: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginTop: 20,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: ORANGE,
+    backgroundColor: '#FFFFFF',
+  },
+  galleryText: { color: '#333333', fontSize: 13 },
+  spacer: { flex: 1 },
+  captureButton: { alignSelf: 'center' },
+  previewActions: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 24,
+    marginHorizontal: 24,
+  },
+  retakeButton: {
+    flex: 1,
+    height: 40,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: ORANGE,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  retakeText: { color: ORANGE, fontSize: 14, fontWeight: '600' },
+  useButton: {
+    flex: 1,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: ORANGE,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  useText: { color: '#FFFFFF', fontSize: 14, fontWeight: '600' },
+});