react-native-timacare 3.3.55 → 3.3.57-cccd

package/lib/commonjs/screens/SelectorStore.js.flow

@@ -1,7 +1,7 @@
 //@ts-nocheck
 import { observable, action, toJS } from 'mobx';
 import { Api } from '../services/api';
-import { Alert } from 'react-native';
+import { AlertGlobal } from '../components/ModalNotification/AlertGlobal';
 import { myLog } from '../utils/log';
 
 export enum Types {
@@ -70,7 +70,12 @@ class SelectorStore {
     } else {
       this.isLoading = false;
       this.isError = false;
-      Alert.alert('Lỗi', response.Messages);
+      AlertGlobal.show({
+        type: 'warning',
+        title: 'Lỗi',
+        message: response.Messages,
+        primaryText: 'Đóng',
+      });
     }
   }
 }

package/lib/commonjs/screens/SelectorStore.js.map

@@ -1 +1 @@
-{"version":3,"names":["_mobx","require","_api","_reactNative","_log","_class","_descriptor","_descriptor2","_descriptor3","Types","exports","SelectorStore","_classCallCheck2","default","_initializerDefineProperty2","_createClass2","key","value","getData","params","type","onSuccess","onFailure","response","_t","_t2","_regenerator","async","_context","prev","next","isLoading","data","Province","District","Ward","Reason","Job","Bank","awrap","Api","getInstance","getProvinces","sent","abrupt","getDistricts","getWards","loanPurpose","getJobs","getBanks","kind","isError","map","item","_extends2","name","text","myLog","Alert","alert","Messages","stop","Promise","_applyDecoratedDescriptor2","prototype","observable","configurable","enumerable","writable","initializer","action","Object","getOwnPropertyDescriptor","_default"],"sourceRoot":"../../../src","sources":["screens/SelectorStore.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_mobx","require","_api","_AlertGlobal","_log","_class","_descriptor","_descriptor2","_descriptor3","Types","exports","SelectorStore","_classCallCheck2","default","_initializerDefineProperty2","_createClass2","key","value","getData","params","type","onSuccess","onFailure","response","_t","_t2","_regenerator","async","_context","prev","next","isLoading","data","Province","District","Ward","Reason","Job","Bank","awrap","Api","getInstance","getProvinces","sent","abrupt","getDistricts","getWards","loanPurpose","getJobs","getBanks","kind","isError","map","item","_extends2","name","text","myLog","AlertGlobal","show","title","message","Messages","primaryText","stop","Promise","_applyDecoratedDescriptor2","prototype","observable","configurable","enumerable","writable","initializer","action","Object","getOwnPropertyDescriptor","_default"],"sourceRoot":"../../../src","sources":["screens/SelectorStore.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/screens/camera/CCCDCameraScreen.js

@@ -1,2 +1,2 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=CCCDCameraScreen;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeVisionCamera=require("react-native-vision-camera");var _icons=require("../../assets/icons");var _MText=require("../../components/MText");var _native=require("@react-navigation/native");var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _CommonStyles=require("../CommonStyles");var _reactNativePermissions=require("react-native-permissions");var _jsxFileName="/Users/tima/Tima/react-native-timacare/src/screens/camera/CCCDCameraScreen.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 _t2 in e)"default"!==_t2&&{}.hasOwnProperty.call(e,_t2)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,_t2))&&(i.get||i.set)?o(f,_t2,i):f[_t2]=e[_t2]);return f;})(e,t);}function CCCDCameraScreen(props){var _props$route2,_props$route2$params;var insets=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)();var navigation=(0,_native.useNavigation)();var isFocused=(0,_native.useIsFocused)();var myCamera=(0,_react.useRef)(null);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),passPermission=_useState2[0],setPassPermission=_useState2[1];var _useState3=(0,_react.useState)(false),_useState4=(0,_slicedToArray2.default)(_useState3,2),shouldRenderCamera=_useState4[0],setShouldRenderCamera=_useState4[1];var device=(0,_reactNativeVisionCamera.useCameraDevice)('back');var format=(0,_reactNativeVisionCamera.useCameraFormat)(device,[{photoResolution:{width:1280,height:720}}]);var takePicture=function _callee(){var _props$route,_props$route$params,data,_t;return _regenerator.default.async(function(_context){while(1)switch(_context.prev=_context.next){case 0:if(!(myCamera.current==null)){_context.next=1;break;}return _context.abrupt("return");case 1:_context.prev=1;_context.next=2;return _regenerator.default.awrap(myCamera.current.takePhoto({qualityPrioritization:'quality'}));case 2:data=_context.sent;navigation.goBack();if((_props$route=props.route)!=null&&(_props$route$params=_props$route.params)!=null&&_props$route$params.callback){props.route.params.callback('file://'+data.path);}_context.next=4;break;case 3:_context.prev=3;_t=_context["catch"](1);console.error(_t);case 4:case"end":return _context.stop();}},null,null,[[1,3]],Promise);};var _requestPermissions=function requestPermissions(){(0,_reactNativePermissions.request)(_reactNative.Platform.OS==='ios'?_reactNativePermissions.PERMISSIONS.IOS.CAMERA:_reactNativePermissions.PERMISSIONS.ANDROID.CAMERA).then(function(result){switch(result){case _reactNativePermissions.RESULTS.UNAVAILABLE:console.log('This feature is not available (on this device / in this context)');_reactNative.Alert.alert('Thông báo','Máy ảnh trên thiết bị không tương thích.\nVui lòng kiểm tra lại thiết bị!',[{text:'Đồng ý'}]);break;case _reactNativePermissions.RESULTS.DENIED:console.log('The permission has not been requested / is denied but requestable');_reactNative.Alert.alert('Thông báo','Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',[{text:'Đồng ý',onPress:function onPress(){if(_reactNative.Platform.OS==='ios'){(0,_reactNativePermissions.openSettings)();}else{_requestPermissions();}}}]);break;case _reactNativePermissions.RESULTS.LIMITED:console.log('The permission is limited: some actions are possible');_reactNative.Alert.alert('Thông báo','Quyền máy ảnh bị hạn chế. Vui lòng kiểm tra lại để tiếp tục!',[{text:'Đồng ý',onPress:function onPress(){if(_reactNative.Platform.OS==='ios'){(0,_reactNativePermissions.openSettings)();}else{_requestPermissions();}}}]);break;case _reactNativePermissions.RESULTS.GRANTED:console.log('The permission is granted');setPassPermission(true);break;case _reactNativePermissions.RESULTS.BLOCKED:console.log('The permission is denied and not requestable anymore');_reactNative.Alert.alert('Thông báo','Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',[{text:'Đồng ý',onPress:function onPress(){if(_reactNative.Platform.OS==='ios'){(0,_reactNativePermissions.openSettings)();}else{(0,_reactNativePermissions.openSettings)();}}}]);break;}});};(0,_react.useEffect)(function(){_requestPermissions();},[]);(0,_react.useEffect)(function(){var timeout;if(isFocused){timeout=setTimeout(function(){setShouldRenderCamera(true);},500);}else{setShouldRenderCamera(false);}return function(){return clearTimeout(timeout);};},[isFocused]);if(!passPermission&&!shouldRenderCamera){return _react.default.createElement(_reactNative.View,{style:_CommonStyles.commonStyles.fill,__self:this,__source:{fileName:_jsxFileName,lineNumber:160,columnNumber:7}},_react.default.createElement(_reactNative.ActivityIndicator,{size:"large",color:"#0000ff",__self:this,__source:{fileName:_jsxFileName,lineNumber:161,columnNumber:9}}));}return _react.default.createElement(_reactNative.View,{style:{flex:1,backgroundColor:'black'},pointerEvents:'box-none',__self:this,__source:{fileName:_jsxFileName,lineNumber:167,columnNumber:5}},_react.default.createElement(_reactNative.View,{style:[_CommonStyles.commonStyles.alignCenter,_CommonStyles.commonStyles.fill,_CommonStyles.commonStyles.justifyCenter,{position:'absolute',width:_reactNative.Dimensions.get('window').width,height:_reactNative.Dimensions.get('window').height}],__self:this,__source:{fileName:_jsxFileName,lineNumber:171,columnNumber:7}},device?_react.default.createElement(_reactNative.View,{style:$cameraFrame,__self:this,__source:{fileName:_jsxFileName,lineNumber:184,columnNumber:11}},_react.default.createElement(_reactNativeVisionCamera.Camera,{ref:myCamera,style:_reactNative.StyleSheet.absoluteFill,device:device,isActive:true,photo:true,format:format,__self:this,__source:{fileName:_jsxFileName,lineNumber:185,columnNumber:13}})):_react.default.createElement(_reactNative.ActivityIndicator,{__self:this,__source:{fileName:_jsxFileName,lineNumber:195,columnNumber:11}})),_react.default.createElement(_reactNative.View,{style:[$back,{top:insets.top+16}],__self:this,__source:{fileName:_jsxFileName,lineNumber:199,columnNumber:7}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:function onPress(){navigation.goBack();},style:{position:'absolute',left:0,width:48,height:48,zIndex:1000,alignItems:'center'},__self:this,__source:{fileName:_jsxFileName,lineNumber:200,columnNumber:9}},_react.default.createElement(_icons.IconBackWhite,{__self:this,__source:{fileName:_jsxFileName,lineNumber:213,columnNumber:11}})),_react.default.createElement(_MText.MText,{style:{textAlign:'center',zIndex:10,color:'#FFFFFF',fontSize:16},__self:this,__source:{fileName:_jsxFileName,lineNumber:215,columnNumber:9}},props!=null&&(_props$route2=props.route)!=null&&(_props$route2$params=_props$route2.params)!=null&&_props$route2$params.front?'Chụp CMND/ CCCD mặt trước':'Chụp CMND/ CCCD mặt sau')),_react.default.createElement(_reactNative.View,{style:{position:'absolute',bottom:insets.bottom,alignSelf:'center',flexDirection:'column',alignItems:'center'},__self:this,__source:{fileName:_jsxFileName,lineNumber:228,columnNumber:7}},_react.default.createElement(_MText.MText,{style:{color:'#fff',marginBottom:16,textAlign:'center',paddingHorizontal:24},__self:this,__source:{fileName:_jsxFileName,lineNumber:237,columnNumber:9}},"Vui l\xF2ng \u0111\u1EB7t gi\u1EA5y t\u1EDD n\u1EB1m v\u1EEBa khung h\xECnh ch\u1EEF nh\u1EADt, ch\u1EE5p \u0111\u1EE7 \xE1nh s\xE1ng v\xE0 r\xF5 n\xE9t."),_react.default.createElement(_reactNative.TouchableOpacity,{onPress:takePicture,__self:this,__source:{fileName:_jsxFileName,lineNumber:248,columnNumber:9}},_react.default.createElement(_icons.TakePhotoSvg,{__self:this,__source:{fileName:_jsxFileName,lineNumber:249,columnNumber:11}}))));}var overlayColor='rgba(22, 22, 22, 0.7)';var $back={position:'absolute',left:0,right:0};var $cameraFrame={width:_reactNative.Dimensions.get('window').width,height:260,overflow:'hidden',backgroundColor:'black'};var $overlay=(0,_extends2.default)({},_reactNative.StyleSheet.absoluteFillObject,{justifyContent:'center',alignItems:'center'});var $container={flex:1,backgroundColor:'#000'};var $row={flexDirection:'row',alignItems:'center'};var $darkOverlayTop={width:'100%',backgroundColor:overlayColor};var $darkOverlayBottom={width:'100%',backgroundColor:overlayColor};var $darkOverlaySide={backgroundColor:overlayColor};var $frameBorder={};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=CCCDCameraScreen;var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeVisionCamera=require("react-native-vision-camera");var _icons=require("../../assets/icons");var _MText=require("../../components/MText");var _AlertGlobal=require("../../components/ModalNotification/AlertGlobal");var _native=require("@react-navigation/native");var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _CommonStyles=require("../CommonStyles");var _reactNativePermissions=require("react-native-permissions");var _cameraCrop=require("../../utils/cameraCrop");var _jsxFileName="/Users/tima/Tima/react-native-timacare/src/screens/camera/CCCDCameraScreen.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 _t4 in e)"default"!==_t4&&{}.hasOwnProperty.call(e,_t4)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,_t4))&&(i.get||i.set)?o(f,_t4,i):f[_t4]=e[_t4]);return f;})(e,t);}var ORANGE='#F05123';var CARD_ASPECT_RATIO=85.6/54;var FRAME_ASPECT=CARD_ASPECT_RATIO;function CCCDCameraScreen(props){var _props$route2,_props$route2$params;var insets=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)();var navigation=(0,_native.useNavigation)();var isFocused=(0,_native.useIsFocused)();var myCamera=(0,_react.useRef)(null);var frameSize=(0,_react.useRef)({width:0,height:0});var focusTimer=(0,_react.useRef)(null);var takingRef=(0,_react.useRef)(false);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),passPermission=_useState2[0],setPassPermission=_useState2[1];var _useState3=(0,_react.useState)(false),_useState4=(0,_slicedToArray2.default)(_useState3,2),shouldRenderCamera=_useState4[0],setShouldRenderCamera=_useState4[1];var _useState5=(0,_react.useState)(null),_useState6=(0,_slicedToArray2.default)(_useState5,2),focusPoint=_useState6[0],setFocusPoint=_useState6[1];var devices=(0,_reactNativeVisionCamera.useCameraDevices)();var device=(0,_react.useMemo)(function(){return(0,_cameraCrop.pickClosestFocusDevice)(devices,'back');},[devices]);var focusAt=(0,_react.useCallback)(function _callee(x,y){var cam,_t;return _regenerator.default.async(function(_context){while(1)switch(_context.prev=_context.next){case 0:cam=myCamera.current;if(!(cam==null||!(device!=null&&device.supportsFocus))){_context.next=1;break;}return _context.abrupt("return");case 1:setFocusPoint({x:x,y:y});if(focusTimer.current)clearTimeout(focusTimer.current);focusTimer.current=setTimeout(function(){return setFocusPoint(null);},800);_context.prev=2;_context.next=3;return _regenerator.default.awrap(cam.focus({x:x,y:y}));case 3:_context.next=5;break;case 4:_context.prev=4;_t=_context["catch"](2);case 5:case"end":return _context.stop();}},null,null,[[2,4]],Promise);},[device]);var takePicture=function _callee2(){var _props$route,_props$route$params,_frameSize$current,fw,fh,data,uri,_t2,_t3;return _regenerator.default.async(function(_context2){while(1)switch(_context2.prev=_context2.next){case 0:if(!(myCamera.current==null||takingRef.current)){_context2.next=1;break;}return _context2.abrupt("return");case 1:takingRef.current=true;_context2.prev=2;_frameSize$current=frameSize.current,fw=_frameSize$current.width,fh=_frameSize$current.height;if(!(device!=null&&device.supportsFocus&&fw&&fh)){_context2.next=6;break;}_context2.prev=3;_context2.next=4;return _regenerator.default.awrap(myCamera.current.focus({x:fw/2,y:fh/2}));case 4:_context2.next=6;break;case 5:_context2.prev=5;_t2=_context2["catch"](3);case 6:_context2.next=7;return _regenerator.default.awrap(myCamera.current.takePhoto({qualityPrioritization:'quality'}));case 7:data=_context2.sent;_context2.next=8;return _regenerator.default.awrap((0,_cameraCrop.cropPhotoToAspect)(data,FRAME_ASPECT));case 8:uri=_context2.sent;navigation.goBack();if((_props$route=props.route)!=null&&(_props$route$params=_props$route.params)!=null&&_props$route$params.callback){props.route.params.callback(uri);}_context2.next=10;break;case 9:_context2.prev=9;_t3=_context2["catch"](2);console.error(_t3);takingRef.current=false;case 10:case"end":return _context2.stop();}},null,null,[[2,9],[3,5]],Promise);};var _requestPermissions=function requestPermissions(){(0,_reactNativePermissions.request)(_reactNative.Platform.OS==='ios'?_reactNativePermissions.PERMISSIONS.IOS.CAMERA:_reactNativePermissions.PERMISSIONS.ANDROID.CAMERA).then(function(result){switch(result){case _reactNativePermissions.RESULTS.UNAVAILABLE:console.log('This feature is not available (on this device / in this context)');_AlertGlobal.AlertGlobal.show({type:'warning',title:'Thông báo',message:'Máy ảnh trên thiết bị không tương thích.\nVui lòng kiểm tra lại thiết bị!',primaryText:'Đồng ý'});break;case _reactNativePermissions.RESULTS.DENIED:console.log('The permission has not been requested / is denied but requestable');_AlertGlobal.AlertGlobal.show({type:'warning',title:'Thông báo',message:'Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',primaryText:'Đồng ý',onPrimaryPress:function onPrimaryPress(){if(_reactNative.Platform.OS==='ios'){(0,_reactNativePermissions.openSettings)();}else{_requestPermissions();}}});break;case _reactNativePermissions.RESULTS.LIMITED:console.log('The permission is limited: some actions are possible');_AlertGlobal.AlertGlobal.show({type:'warning',title:'Thông báo',message:'Quyền máy ảnh bị hạn chế. Vui lòng kiểm tra lại để tiếp tục!',primaryText:'Đồng ý',onPrimaryPress:function onPrimaryPress(){if(_reactNative.Platform.OS==='ios'){(0,_reactNativePermissions.openSettings)();}else{_requestPermissions();}}});break;case _reactNativePermissions.RESULTS.GRANTED:console.log('The permission is granted');setPassPermission(true);break;case _reactNativePermissions.RESULTS.BLOCKED:console.log('The permission is denied and not requestable anymore');_AlertGlobal.AlertGlobal.show({type:'warning',title:'Thông báo',message:'Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',primaryText:'Đồng ý',onPrimaryPress:function onPrimaryPress(){if(_reactNative.Platform.OS==='ios'){(0,_reactNativePermissions.openSettings)();}else{(0,_reactNativePermissions.openSettings)();}}});break;}});};(0,_react.useEffect)(function(){_requestPermissions();return function(){if(focusTimer.current)clearTimeout(focusTimer.current);};},[]);(0,_react.useEffect)(function(){var timeout;if(isFocused){timeout=setTimeout(function(){setShouldRenderCamera(true);},500);}else{setShouldRenderCamera(false);}return function(){return clearTimeout(timeout);};},[isFocused]);if(!passPermission&&!shouldRenderCamera){return _react.default.createElement(_reactNative.View,{style:_CommonStyles.commonStyles.fill,__self:this,__source:{fileName:_jsxFileName,lineNumber:209,columnNumber:7}},_react.default.createElement(_reactNative.ActivityIndicator,{size:"large",color:"#0000ff",__self:this,__source:{fileName:_jsxFileName,lineNumber:210,columnNumber:9}}));}return _react.default.createElement(_reactNative.View,{style:styles.container,__self:this,__source:{fileName:_jsxFileName,lineNumber:216,columnNumber:5}},_react.default.createElement(_reactNative.View,{style:[styles.header,{paddingTop:insets.top+16}],__self:this,__source:{fileName:_jsxFileName,lineNumber:217,columnNumber:7}},_react.default.createElement(_reactNative.TouchableOpacity,{onPress:function onPress(){return navigation.goBack();},hitSlop:{top:12,bottom:12,left:12,right:12},__self:this,__source:{fileName:_jsxFileName,lineNumber:218,columnNumber:9}},_react.default.createElement(_icons.IconBack,{__self:this,__source:{fileName:_jsxFileName,lineNumber:222,columnNumber:11}})),_react.default.createElement(_reactNative.View,{style:styles.titleWrap,__self:this,__source:{fileName:_jsxFileName,lineNumber:224,columnNumber:9}},_react.default.createElement(_MText.MText,{style:styles.headerTitle,__self:this,__source:{fileName:_jsxFileName,lineNumber:225,columnNumber:11}},"CMND / CCCD"))),_react.default.createElement(_MText.MText,{style:styles.instruction,__self:this,__source:{fileName:_jsxFileName,lineNumber:229,columnNumber:7}},props!=null&&(_props$route2=props.route)!=null&&(_props$route2$params=_props$route2.params)!=null&&_props$route2$params.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){frameSize.current=e.nativeEvent.layout;},onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},onResponderRelease:function onResponderRelease(e){return focusAt(e.nativeEvent.locationX,e.nativeEvent.locationY);},__self:this,__source:{fileName:_jsxFileName,lineNumber:237,columnNumber:7}},device?_react.default.createElement(_reactNativeVisionCamera.Camera,{ref:myCamera,style:_reactNative.StyleSheet.absoluteFill,device:device,isActive:isFocused,photo:true,__self:this,__source:{fileName:_jsxFileName,lineNumber:248,columnNumber:11}}):null,_react.default.createElement(_reactNative.View,{style:[styles.corner,styles.cornerTL],__self:this,__source:{fileName:_jsxFileName,lineNumber:256,columnNumber:9}}),_react.default.createElement(_reactNative.View,{style:[styles.corner,styles.cornerTR],__self:this,__source:{fileName:_jsxFileName,lineNumber:257,columnNumber:9}}),_react.default.createElement(_reactNative.View,{style:[styles.corner,styles.cornerBL],__self:this,__source:{fileName:_jsxFileName,lineNumber:258,columnNumber:9}}),_react.default.createElement(_reactNative.View,{style:[styles.corner,styles.cornerBR],__self:this,__source:{fileName:_jsxFileName,lineNumber:259,columnNumber:9}}),focusPoint&&_react.default.createElement(_reactNative.View,{pointerEvents:"none",style:[styles.focusRing,{left:focusPoint.x-32,top:focusPoint.y-32}],__self:this,__source:{fileName:_jsxFileName,lineNumber:261,columnNumber:11}})),_react.default.createElement(_reactNative.View,{style:styles.spacer,__self:this,__source:{fileName:_jsxFileName,lineNumber:271,columnNumber:7}}),_react.default.createElement(_MText.MText,{style:[styles.hint,{marginTop:0,marginBottom:20}],__self:this,__source:{fileName:_jsxFileName,lineNumber:272,columnNumber:7}},"\u0110\u01B0a gi\u1EA5y t\u1EDD l\u1EA1i g\u1EA7n cho v\u1EEBa khung, ch\u1EA1m v\xE0o m\xE0n h\xECnh",'\n',"\u0111\u1EC3 l\u1EA5y n\xE9t n\u1EBFu \u1EA3nh b\u1ECB m\u1EDD."),_react.default.createElement(_reactNative.TouchableOpacity,{style:[styles.captureButton,{marginBottom:insets.bottom+24}],onPress:takePicture,__self:this,__source:{fileName:_jsxFileName,lineNumber:276,columnNumber:7}},_react.default.createElement(_icons.TakePhotoSvg,{__self:this,__source:{fileName:_jsxFileName,lineNumber:280,columnNumber:9}})));}var styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:'#FFFFFF'},header:{flexDirection:'row',alignItems:'center',paddingHorizontal:16,paddingTop:8},titleWrap:{flex:1,alignItems:'center',justifyContent:'center',marginRight:24},headerTitle:{color:'#333333',fontSize:16,fontWeight:'600'},instruction:{textAlign:'center',color:'#333333',fontSize:14,lineHeight:20,marginTop:20,marginBottom:28},photoFrame:{marginHorizontal:24,aspectRatio:CARD_ASPECT_RATIO,borderRadius:8,overflow:'hidden',backgroundColor:'#000000'},corner:{position:'absolute',width:26,height:26,borderColor:ORANGE},focusRing:{position:'absolute',width:64,height:64,borderRadius:8,borderWidth:1.5,borderColor:'#FFD54A'},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},hint:{textAlign:'center',color:'#555555',fontSize:13,lineHeight:19,marginTop:48},spacer:{flex:1},captureButton:{alignSelf:'center'}});
 //# sourceMappingURL=CCCDCameraScreen.js.map

package/lib/commonjs/screens/camera/CCCDCameraScreen.js.flow

@@ -1,9 +1,13 @@
 // @ts-nocheck
-import React, { useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   ActivityIndicator,
-  Alert,
-  Dimensions,
   Platform,
   StyleSheet,
   TouchableOpacity,
@@ -11,11 +15,11 @@ import {
 } from 'react-native';
 import {
   Camera as VisionCamera,
-  useCameraDevice,
-  useCameraFormat,
+  useCameraDevices,
 } from 'react-native-vision-camera';
-import { IconBackWhite, TakePhotoSvg } from '../../assets/icons';
+import { IconBack, TakePhotoSvg } from '../../assets/icons';
 import { MText } from '../../components/MText';
+import { AlertGlobal } from '../../components/ModalNotification/AlertGlobal';
 import { useNavigation, useIsFocused } from '@react-navigation/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { commonStyles } from '../CommonStyles';
@@ -25,31 +29,77 @@ import {
   RESULTS,
   openSettings,
 } from 'react-native-permissions';
+import {
+  cropPhotoToAspect,
+  pickClosestFocusDevice,
+} from '../../utils/cameraCrop';
+
+const ORANGE = '#F05123';
+// Thẻ CMND/CCCD theo chuẩn ID-1: 85.6mm x 54mm
+const CARD_ASPECT_RATIO = 85.6 / 54;
+// Cắt ảnh vừa đúng khung (khung dùng aspectRatio = CARD_ASPECT_RATIO)
+const FRAME_ASPECT = CARD_ASPECT_RATIO;
 
 export default function CCCDCameraScreen(props) {
   const insets = useSafeAreaInsets();
   const navigation = useNavigation();
   const isFocused = useIsFocused();
   const myCamera = useRef(null);
+  const frameSize = useRef({ width: 0, height: 0 });
+  const focusTimer = useRef(null);
+  const takingRef = useRef(false);
   const [passPermission, setPassPermission] = useState(false);
   const [shouldRenderCamera, setShouldRenderCamera] = useState(false);
-  const device = useCameraDevice('back');
-  const format = useCameraFormat(device, [
-    { photoResolution: { width: 1280, height: 720 } },
+  const [focusPoint, setFocusPoint] = useState(null);
+
+  // Chọn ống kính sau lấy nét gần nhất (macro) để chụp cận thẻ mà không mờ
+  const devices = useCameraDevices();
+  const device = useMemo(() => pickClosestFocusDevice(devices, 'back'), [
+    devices,
   ]);
 
+  // Lấy nét vào một điểm (toạ độ theo hệ của khung preview = camera view).
+  // Dùng cho chạm-để-lấy-nét và lấy nét giữa khung trước khi chụp -> tránh mờ
+  // khi đưa giấy tờ lại gần (camera không tự bám nét kịp).
+  const focusAt = useCallback(
+    async (x, y) => {
+      const cam = myCamera.current;
+      if (cam == null || !device?.supportsFocus) return;
+      setFocusPoint({ x, y });
+      if (focusTimer.current) clearTimeout(focusTimer.current);
+      focusTimer.current = setTimeout(() => setFocusPoint(null), 800);
+      try {
+        await cam.focus({ x, y });
+      } catch (e) {
+        // focus có thể lỗi nếu đang lấy nét dở hoặc điểm ngoài vùng -> bỏ qua
+      }
+    },
+    [device]
+  );
+
   const takePicture = async () => {
-    if (myCamera.current == null) return;
+    if (myCamera.current == null || takingRef.current) return;
+    takingRef.current = true;
     try {
+      // Lấy nét giữa khung trước khi chụp để tài liệu ở gần vẫn nét
+      const { width: fw, height: fh } = frameSize.current;
+      if (device?.supportsFocus && fw && fh) {
+        try {
+          await myCamera.current.focus({ x: fw / 2, y: fh / 2 });
+        } catch (e) {}
+      }
       const data = await myCamera.current.takePhoto({
         qualityPrioritization: 'quality',
       });
+      // Cắt ảnh vừa đúng khung preview (giữ nguyên logic điều hướng bên dưới)
+      const uri = await cropPhotoToAspect(data, FRAME_ASPECT);
       navigation.goBack();
       if (props.route?.params?.callback) {
-        props.route.params.callback('file://' + data.path);
+        props.route.params.callback(uri);
       }
     } catch (err) {
       console.error(err);
+      takingRef.current = false;
     }
   };
 
@@ -64,51 +114,49 @@ export default function CCCDCameraScreen(props) {
           console.log(
             'This feature is not available (on this device / in this context)'
           );
-          Alert.alert(
-            'Thông báo',
-            'Máy ảnh trên thiết bị không tương thích.\nVui lòng kiểm tra lại thiết bị!',
-            [{ text: 'Đồng ý' }]
-          );
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              'Máy ảnh trên thiết bị không tương thích.\nVui lòng kiểm tra lại thiết bị!',
+            primaryText: 'Đồng ý',
+          });
           break;
         case RESULTS.DENIED:
           console.log(
             'The permission has not been requested / is denied but requestable'
           );
-          Alert.alert(
-            'Thông báo',
-            'Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',
-            [
-              {
-                text: 'Đồng ý',
-                onPress: () => {
-                  if (Platform.OS === 'ios') {
-                    openSettings();
-                  } else {
-                    requestPermissions();
-                  }
-                },
-              },
-            ]
-          );
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              'Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',
+            primaryText: 'Đồng ý',
+            onPrimaryPress: () => {
+              if (Platform.OS === 'ios') {
+                openSettings();
+              } else {
+                requestPermissions();
+              }
+            },
+          });
           break;
         case RESULTS.LIMITED:
           console.log('The permission is limited: some actions are possible');
-          Alert.alert(
-            'Thông báo',
-            'Quyền máy ảnh bị hạn chế. Vui lòng kiểm tra lại để tiếp tục!',
-            [
-              {
-                text: 'Đồng ý',
-                onPress: () => {
-                  if (Platform.OS === 'ios') {
-                    openSettings();
-                  } else {
-                    requestPermissions();
-                  }
-                },
-              },
-            ]
-          );
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              'Quyền máy ảnh bị hạn chế. Vui lòng kiểm tra lại để tiếp tục!',
+            primaryText: 'Đồng ý',
+            onPrimaryPress: () => {
+              if (Platform.OS === 'ios') {
+                openSettings();
+              } else {
+                requestPermissions();
+              }
+            },
+          });
           break;
         case RESULTS.GRANTED:
           console.log('The permission is granted');
@@ -116,22 +164,20 @@ export default function CCCDCameraScreen(props) {
           break;
         case RESULTS.BLOCKED:
           console.log('The permission is denied and not requestable anymore');
-          Alert.alert(
-            'Thông báo',
-            'Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',
-            [
-              {
-                text: 'Đồng ý',
-                onPress: () => {
-                  if (Platform.OS === 'ios') {
-                    openSettings();
-                  } else {
-                    openSettings();
-                  }
-                },
-              },
-            ]
-          );
+          AlertGlobal.show({
+            type: 'warning',
+            title: 'Thông báo',
+            message:
+              'Bạn đã từ chối quyền máy ảnh. Vui lòng cấp quyền máy ảnh để tiếp tục!',
+            primaryText: 'Đồng ý',
+            onPrimaryPress: () => {
+              if (Platform.OS === 'ios') {
+                openSettings();
+              } else {
+                openSettings();
+              }
+            },
+          });
           break;
       }
     });
@@ -139,6 +185,9 @@ export default function CCCDCameraScreen(props) {
 
   useEffect(() => {
     requestPermissions();
+    return () => {
+      if (focusTimer.current) clearTimeout(focusTimer.current);
+    };
   }, []);
 
   useEffect(() => {
@@ -164,138 +213,155 @@ export default function CCCDCameraScreen(props) {
   }
 
   return (
-    <View
-      style={{ flex: 1, backgroundColor: 'black' }}
-      pointerEvents={'box-none'}
-    >
-      <View
-        style={[
-          commonStyles.alignCenter,
-          commonStyles.fill,
-          commonStyles.justifyCenter,
-          {
-            position: 'absolute',
-            width: Dimensions.get('window').width,
-            height: Dimensions.get('window').height,
-          },
-        ]}
-      >
-        {device ? (
-          <View style={$cameraFrame}>
-            <VisionCamera
-              ref={myCamera}
-              style={StyleSheet.absoluteFill}
-              device={device}
-              isActive={true}
-              photo={true}
-              format={format}
-            />
-          </View>
-        ) : (
-          <ActivityIndicator />
-        )}
-      </View>
-
-      <View style={[$back, { top: insets.top + 16 }]}>
+    <View style={styles.container}>
+      <View style={[styles.header, { paddingTop: insets.top + 16 }]}>
         <TouchableOpacity
-          onPress={() => {
-            navigation.goBack();
-          }}
-          style={{
-            position: 'absolute',
-            left: 0,
-            width: 48,
-            height: 48,
-            zIndex: 1000,
-            alignItems: 'center',
-          }}
+          onPress={() => navigation.goBack()}
+          hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
         >
-          <IconBackWhite />
+          <IconBack />
         </TouchableOpacity>
-        <MText
-          style={{
-            textAlign: 'center',
-            zIndex: 10,
-            color: '#FFFFFF',
-            fontSize: 16,
-          }}
-        >
-          {props?.route?.params?.front
-            ? 'Chụp CMND/ CCCD mặt trước'
-            : 'Chụp CMND/ CCCD mặt sau'}
-        </MText>
+        <View style={styles.titleWrap}>
+          <MText style={styles.headerTitle}>CMND / CCCD</MText>
+        </View>
       </View>
+
+      <MText style={styles.instruction}>
+        {props?.route?.params?.front
+          ? 'Chụp CMND/ CCCD mặt trước'
+          : 'Chụp CMND/ CCCD mặt sau'}
+      </MText>
+
+      {/* Khung tỉ lệ thẻ: vùng nhìn thấy của preview = vùng sẽ crop.
+          Chạm vào khung để lấy nét thủ công. */}
       <View
-        style={{
-          position: 'absolute',
-          bottom: insets.bottom,
-          alignSelf: 'center',
-          flexDirection: 'column',
-          alignItems: 'center',
+        style={styles.photoFrame}
+        onLayout={(e) => {
+          frameSize.current = e.nativeEvent.layout;
         }}
+        onStartShouldSetResponder={() => true}
+        onResponderRelease={(e) =>
+          focusAt(e.nativeEvent.locationX, e.nativeEvent.locationY)
+        }
       >
-        <MText
-          style={{
-            color: '#fff',
-            marginBottom: 16,
-            textAlign: 'center',
-            paddingHorizontal: 24,
-          }}
-        >
-          Vui lòng đặt giấy tờ nằm vừa khung hình chữ nhật, chụp đủ ánh sáng và
-          rõ nét.
-        </MText>
-        <TouchableOpacity onPress={takePicture}>
-          <TakePhotoSvg />
-        </TouchableOpacity>
+        {device ? (
+          <VisionCamera
+            ref={myCamera}
+            style={StyleSheet.absoluteFill}
+            device={device}
+            isActive={isFocused}
+            photo={true}
+          />
+        ) : 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]} />
+        {focusPoint && (
+          <View
+            pointerEvents="none"
+            style={[
+              styles.focusRing,
+              { left: focusPoint.x - 32, top: focusPoint.y - 32 },
+            ]}
+          />
+        )}
       </View>
+
+      <View style={styles.spacer} />
+      <MText style={[styles.hint, { marginTop: 0, marginBottom: 20 }]}>
+        Đưa giấy tờ lại gần cho vừa khung, chạm vào màn hình{'\n'}để lấy nét nếu
+        ảnh bị mờ.
+      </MText>
+      <TouchableOpacity
+        style={[styles.captureButton, { marginBottom: insets.bottom + 24 }]}
+        onPress={takePicture}
+      >
+        <TakePhotoSvg />
+      </TouchableOpacity>
     </View>
   );
 }
 
-const overlayColor = 'rgba(22, 22, 22, 0.7)';
-const $back: ViewStyle = {
-  position: 'absolute',
-  left: 0,
-  right: 0,
-};
-
-const $cameraFrame: ViewStyle = {
-  width: Dimensions.get('window').width,
-  height: 260,
-  overflow: 'hidden',
-  backgroundColor: 'black',
-};
-
-const $overlay: ViewStyle = {
-  ...StyleSheet.absoluteFillObject,
-  justifyContent: 'center',
-  alignItems: 'center',
-};
-
-const $container: ViewStyle = {
-  flex: 1,
-  backgroundColor: '#000',
-};
-
-const $row: ViewStyle = {
-  flexDirection: 'row',
-  alignItems: 'center',
-};
-
-const $darkOverlayTop: ViewStyle = {
-  width: '100%',
-  backgroundColor: overlayColor,
-};
-
-const $darkOverlayBottom: ViewStyle = {
-  width: '100%',
-  backgroundColor: overlayColor,
-};
-const $darkOverlaySide: ViewStyle = {
-  backgroundColor: overlayColor,
-};
-const $frameBorder: ViewStyle = {
-  // borderColor: '#FDFDFD',
-  // borderWidth: 2,
-};
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#FFFFFF' },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingTop: 8,
+  },
+  titleWrap: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 24,
+  },
+  headerTitle: { color: '#333333', fontSize: 16, fontWeight: '600' },
+  instruction: {
+    textAlign: 'center',
+    color: '#333333',
+    fontSize: 14,
+    lineHeight: 20,
+    marginTop: 20,
+    marginBottom: 28,
+  },
+  photoFrame: {
+    marginHorizontal: 24,
+    aspectRatio: CARD_ASPECT_RATIO,
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#000000',
+  },
+  corner: {
+    position: 'absolute',
+    width: 26,
+    height: 26,
+    borderColor: ORANGE,
+  },
+  focusRing: {
+    position: 'absolute',
+    width: 64,
+    height: 64,
+    borderRadius: 8,
+    borderWidth: 1.5,
+    borderColor: '#FFD54A',
+  },
+  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,
+  },
+  hint: {
+    textAlign: 'center',
+    color: '#555555',
+    fontSize: 13,
+    lineHeight: 19,
+    marginTop: 48,
+  },
+  spacer: { flex: 1 },
+  captureButton: { alignSelf: 'center' },
+});