chore: display cropped selfie (#201)

ios/Podfile.lock

@@ -17,6 +17,12 @@ PODS:
     - ZXingObjC/PDF417
   - EXCamera (13.6.0):
     - ExpoModulesCore
+  - EXFaceDetector (12.4.0):
+    - ExpoModulesCore
+    - GoogleMLKit/FaceDetection (= 4.0.0)
+    - MLKitCommon (= 9.0.0)
+    - MLKitFaceDetection (= 3.0.0)
+    - MLKitVision (= 5.0.0)
   - EXFileSystem (15.4.2):
     - ExpoModulesCore
   - EXImageLoader (4.3.0):
@@ -224,10 +230,27 @@ PODS:
     - GoogleUtilities/Environment (~> 7.7)
     - nanopb (< 2.30910.0, >= 2.30908.0)
     - PromisesObjC (< 3.0, >= 1.2)
+  - GoogleMLKit/FaceDetection (4.0.0):
+    - GoogleMLKit/MLKitCore
+    - MLKitFaceDetection (~> 3.0.0)
+  - GoogleMLKit/MLKitCore (4.0.0):
+    - MLKitCommon (~> 9.0.0)
   - GoogleSignIn (7.0.0):
     - AppAuth (~> 1.5)
     - GTMAppAuth (< 3.0, >= 1.3)
     - GTMSessionFetcher/Core (< 4.0, >= 1.1)
+  - GoogleToolboxForMac/DebugUtils (2.3.2):
+    - GoogleToolboxForMac/Defines (= 2.3.2)
+  - GoogleToolboxForMac/Defines (2.3.2)
+  - GoogleToolboxForMac/Logger (2.3.2):
+    - GoogleToolboxForMac/Defines (= 2.3.2)
+  - "GoogleToolboxForMac/NSData+zlib (2.3.2)":
+    - GoogleToolboxForMac/Defines (= 2.3.2)
+  - "GoogleToolboxForMac/NSDictionary+URLArguments (2.3.2)":
+    - GoogleToolboxForMac/DebugUtils (= 2.3.2)
+    - GoogleToolboxForMac/Defines (= 2.3.2)
+    - "GoogleToolboxForMac/NSString+URLArguments (= 2.3.2)"
+  - "GoogleToolboxForMac/NSString+URLArguments (2.3.2)"
   - GoogleUtilities (7.11.5):
     - GoogleUtilities/AppDelegateSwizzler (= 7.11.5)
     - GoogleUtilities/Environment (= 7.11.5)
@@ -261,10 +284,12 @@ PODS:
     - GoogleUtilities/MethodSwizzler
   - GoogleUtilities/UserDefaults (7.11.5):
     - GoogleUtilities/Logger
+  - GoogleUtilitiesComponents (1.1.0):
+    - GoogleUtilities/Logger
   - GTMAppAuth (2.0.0):
     - AppAuth/Core (~> 1.6)
     - GTMSessionFetcher/Core (< 4.0, >= 1.5)
-  - GTMSessionFetcher/Core (3.1.1)
+  - GTMSessionFetcher/Core (2.3.0)
   - hermes-engine (0.72.3):
     - hermes-engine/Pre-built (= 0.72.3)
   - hermes-engine/Pre-built (0.72.3)
@@ -273,6 +298,24 @@ PODS:
   - lottie-react-native (6.3.1):
     - lottie-ios (~> 4.3.0)
     - React-Core
+  - MLImage (1.0.0-beta4)
+  - MLKitCommon (9.0.0):
+    - GoogleDataTransport (~> 9.0)
+    - GoogleToolboxForMac/Logger (~> 2.1)
+    - "GoogleToolboxForMac/NSData+zlib (~> 2.1)"
+    - "GoogleToolboxForMac/NSDictionary+URLArguments (~> 2.1)"
+    - GoogleUtilities/UserDefaults (~> 7.0)
+    - GoogleUtilitiesComponents (~> 1.0)
+    - GTMSessionFetcher/Core (< 3.0, >= 1.1)
+  - MLKitFaceDetection (3.0.0):
+    - MLKitCommon (~> 9.0)
+    - MLKitVision (~> 5.0)
+  - MLKitVision (5.0.0):
+    - GoogleToolboxForMac/Logger (~> 2.1)
+    - "GoogleToolboxForMac/NSData+zlib (~> 2.1)"
+    - GTMSessionFetcher/Core (< 3.0, >= 1.1)
+    - MLImage (= 1.0.0-beta4)
+    - MLKitCommon (~> 9.0)
   - MoEngage-iOS-SDK (9.4.1)
   - MoEngageInApp (4.4.0):
     - MoEngage-iOS-SDK (< 9.5.0, >= 9.4.0)
@@ -873,6 +916,7 @@ DEPENDENCIES:
   - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
   - EXBarCodeScanner (from `../node_modules/expo-barcode-scanner/ios`)
   - EXCamera (from `../node_modules/expo-camera/ios`)
+  - EXFaceDetector (from `../node_modules/expo-face-detector/ios`)
   - EXFileSystem (from `../node_modules/expo-file-system/ios`)
   - EXImageLoader (from `../node_modules/expo-image-loader/ios`)
   - Expo (from `../node_modules/expo`)
@@ -1022,12 +1066,19 @@ SPEC REPOS:
     - fmt
     - GoogleAppMeasurement
     - GoogleDataTransport
+    - GoogleMLKit
     - GoogleSignIn
+    - GoogleToolboxForMac
     - GoogleUtilities
+    - GoogleUtilitiesComponents
     - GTMAppAuth
     - GTMSessionFetcher
     - libevent
     - lottie-ios
+    - MLImage
+    - MLKitCommon
+    - MLKitFaceDetection
+    - MLKitVision
     - MoEngage-iOS-SDK
     - MoEngageInApp
     - MoEngagePluginBase
@@ -1053,6 +1104,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/expo-barcode-scanner/ios"
   EXCamera:
     :path: "../node_modules/expo-camera/ios"
+  EXFaceDetector:
+    :path: "../node_modules/expo-face-detector/ios"
   EXFileSystem:
     :path: "../node_modules/expo-file-system/ios"
   EXImageLoader:
@@ -1239,6 +1292,7 @@ SPEC CHECKSUMS:
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   EXBarCodeScanner: 44783bf0be375ab18a838dcfef29dd648397000a
   EXCamera: 2dc2bd2828bca4e283018a0b5a84aec6639ff0b4
+  EXFaceDetector: 2a950a570efa39a4724930abb65052ebba1128ea
   EXFileSystem: d7f59869885cfeab3ac771e2a8d0f5ed98cd3fdb
   EXImageLoader: 34b214f9387e98f3c73989f15d8d5b399c9ab3f7
   Expo: d5956de70d4076190861f6730b93e75478b6faf8
@@ -1278,14 +1332,21 @@ SPEC CHECKSUMS:
   glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   GoogleAppMeasurement: d3dabccdb336fc0ae44b633c8abaa26559893cd9
   GoogleDataTransport: 54dee9d48d14580407f8f5fbf2f496e92437a2f2
+  GoogleMLKit: 2bd0dc6253c4d4f227aad460f69215a504b2980e
   GoogleSignIn: b232380cf495a429b8095d3178a8d5855b42e842
+  GoogleToolboxForMac: 8bef7c7c5cf7291c687cf5354f39f9db6399ad34
   GoogleUtilities: 13e2c67ede716b8741c7989e26893d151b2b2084
+  GoogleUtilitiesComponents: 679b2c881db3b615a2777504623df6122dd20afe
   GTMAppAuth: 99fb010047ba3973b7026e45393f51f27ab965ae
-  GTMSessionFetcher: e8647203b65cee28c5f73d0f473d096653945e72
+  GTMSessionFetcher: 3a63d75eecd6aa32c2fc79f578064e1214dfdec2
   hermes-engine: 10fbd3f62405c41ea07e71973ea61e1878d07322
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   lottie-ios: 25e7b2675dad5c3ddad369ac9baab03560c5bfdd
   lottie-react-native: c9f1db4f4124dcce9f8159e65d8dc6e8bcb11fb4
+  MLImage: 7bb7c4264164ade9bf64f679b40fb29c8f33ee9b
+  MLKitCommon: c1b791c3e667091918d91bda4bba69a91011e390
+  MLKitFaceDetection: 4981488f71ea8ed718cda692a29ab562637d9ae5
+  MLKitVision: 8baa5f46ee3352614169b85250574fde38c36f49
   MoEngage-iOS-SDK: b7af14646f44852527ba7420e52ff8bb56b7077d
   MoEngageInApp: 94f24b0b1a83ec247dc998f31b08124b09fcab96
   MoEngagePluginBase: e865f388c39d0cf2c7847610876e63b0e5e31c22

package.json

@@ -59,6 +59,7 @@
     "expo": "^49.0.0",
     "expo-barcode-scanner": "^12.5.3",
     "expo-camera": "^13.6.0",
+    "expo-face-detector": "12.4.0",
     "expo-haptics": "12.6.0",
     "exponential-backoff": "^3.1.0",
     "ffmpeg-kit-react-native": "6.0.0",

patches/expo-face-detector+12.4.0.patch

@@ -0,0 +1,19 @@
+diff --git a/node_modules/expo-face-detector/ios/EXFaceDetector.podspec b/node_modules/expo-face-detector/ios/EXFaceDetector.podspec
+index ed661e3..9cf6103 100644
+--- a/node_modules/expo-face-detector/ios/EXFaceDetector.podspec
++++ b/node_modules/expo-face-detector/ios/EXFaceDetector.podspec
+@@ -19,10 +19,10 @@ Pod::Spec.new do |s|
+   # even though `GoogleMLKit/FaceDetection` depends on all `MLKit*` references below
+   # framework generation code (prebuilds) cannot locate them properly, so these are defined explicitly
+   # TODO: research why xcodegen fails to detect dependencies of dependencies (resulted .xcodeproj is missing them)
+-  s.dependency 'GoogleMLKit/FaceDetection', '2.6.0'
+-  s.dependency 'MLKitFaceDetection', '1.5.0'
+-  s.dependency 'MLKitCommon', '5.0.0'
+-  s.dependency 'MLKitVision', '3.0.0'
++  s.dependency 'GoogleMLKit/FaceDetection', '4.0.0'
++  s.dependency 'MLKitFaceDetection', '3.0.0'
++  s.dependency 'MLKitCommon', '9.0.0'
++  s.dependency 'MLKitVision', '5.0.0'
+
+   if !$ExpoUseSources&.include?(package['name']) && ENV['EXPO_USE_SOURCE'].to_i == 0 && File.exist?("#{s.name}.xcframework") && Gem::Version.new(Pod::VERSION) >= Gem::Version.new('1.10.0')
+     s.source_files = "#{s.name}/**/*.h"

src/api/auth/types.ts

@@ -20,7 +20,12 @@ type AchievementsConfig = {
   achievements?: {enabled: boolean};
 };
 
+type FaceDetectionConfig = {
+  'face-detection'?: {enabled: boolean};
+};
+
 export type AuthConfig = AuthCodeConfig &
   FaceAuthConfig &
   TeamConfig &
-  AchievementsConfig;
+  AchievementsConfig &
+  FaceDetectionConfig;

src/assets/images/index.ts

@@ -68,6 +68,7 @@ export const Images = {
     placeholder1: require('./badges/placeholder1.png'),
     placeholder2: require('./badges/placeholder2.png'),
     faceAuth: require('./badges/face_auth.png'),
+    cameraPermission: require('./badges/camera_permission.png'),
   },
   phone: {
     confirmPhoneNumber: require('./phone/confirmPhoneNumber.png'),

src/screens/FaceRecognitionFlow/EmotionsAuthCameraFeed/components/GatherEmotionsStep/index.tsx

@@ -52,7 +52,7 @@ export function GatherEmotionsStep({
 }: Props) {
   const cameraRef = useRef<Camera>(null);
   const [isCameraReady, setIsCameraReady] = useState(false);
-  const isDeviceAngleAllowed = useIsDeviceAngleAllowed();
+  const isDeviceAngleAllowed = useIsDeviceAngleAllowed(isCameraReady);
   const emotions = useSelector(emotionsAuthEmotionsSelector);
   const session = useSelector(emotionsAuthSessionSelector);
   const emotionsAuthNextEmotionIndex = useSelector(

src/screens/FaceRecognitionFlow/FaceAuthCameraFeed/components/TakeSelfieStep/index.tsx

@@ -23,7 +23,7 @@ type Props = {
 export function TakeSelfieStep({onPictureTaken}: Props) {
   const cameraRef = useRef<Camera>(null);
   const [isCameraReady, setIsCameraReady] = useState(false);
-  const isDeviceAngleAllowed = useIsDeviceAngleAllowed();
+  const isDeviceAngleAllowed = useIsDeviceAngleAllowed(isCameraReady);
 
   const takePicture = async () => {
     if (cameraRef.current) {

src/screens/FaceRecognitionFlow/components/CameraFeed/CameraFeed.tsx

@@ -2,6 +2,7 @@
 
 import {commonStyles, windowWidth} from '@constants/styles';
 import {useCameraPermissions} from '@hooks/useCameraPermissions';
+import {CameraPermissionNotice} from '@screens/FaceRecognitionFlow/components/CameraPermissionNotice';
 import {FaceAuthOverlay} from '@screens/FaceRecognitionFlow/components/FaceAuthOverlay';
 import {FaceRecognitionActions} from '@store/modules/FaceRecognition/actions';
 import {cameraRatioSelector} from '@store/modules/FaceRecognition/selectors';
@@ -64,7 +65,9 @@ export const CameraFeed = React.forwardRef(
           <FaceAuthOverlay />
         </Camera>
       </View>
-    ) : null;
+    ) : (
+      <CameraPermissionNotice />
+    );
   },
 );
 export const cameraStyles = StyleSheet.create({

src/screens/FaceRecognitionFlow/components/CameraPermissionNotice/index.tsx

@@ -0,0 +1,68 @@
+// SPDX-License-Identifier: ice License 1.0
+
+import {COLORS} from '@constants/colors';
+import {Images} from '@images';
+import {PopUpButton} from '@screens/Modals/PopUp/components/PopUpButton';
+import {t} from '@translations/i18n';
+import {font} from '@utils/styles';
+import React from 'react';
+import {Image, Linking, ScrollView, StyleSheet, Text, View} from 'react-native';
+import {rem} from 'rn-units';
+
+export function CameraPermissionNotice() {
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}>
+      <View style={styles.imageContainer}>
+        <Image source={Images.badges.cameraPermission} />
+      </View>
+      <Text style={styles.title}>{t('face_auth.camera_permission.title')}</Text>
+      <Text style={styles.description}>
+        {t('face_auth.camera_permission.description')}
+      </Text>
+      <View style={styles.footerContainer}>
+        <PopUpButton
+          text={t('face_auth.camera_permission.action')}
+          style={styles.button}
+          onPress={() => Linking.openSettings()}
+        />
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.white,
+  },
+  contentContainer: {
+    flexGrow: 1,
+    backgroundColor: COLORS.white,
+  },
+  imageContainer: {
+    alignSelf: 'center',
+    paddingTop: rem(88),
+  },
+  title: {
+    paddingTop: rem(10),
+    ...font(24, 34, 'black', 'primaryDark', 'center'),
+  },
+  description: {
+    paddingTop: rem(16),
+    paddingHorizontal: rem(48),
+    ...font(14, 20, 'medium', 'secondary', 'center'),
+  },
+  footerContainer: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    paddingHorizontal: rem(80),
+  },
+  button: {
+    height: rem(40),
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

src/screens/FaceRecognitionFlow/hooks/useIsDeviceAngleAllowed.tsx

@@ -20,7 +20,7 @@ const THRESHOLD =
     ? -Math.sin(DEVICE_Y_ALLOWED_ROTATION_RADIANS)
     : GRAVITY - DEVICE_Y_ALLOWED_ROTATION_RADIANS;
 
-export const useIsDeviceAngleAllowed = () => {
+export const useIsDeviceAngleAllowed = (isReady: boolean) => {
   const [isAllowed, setIsAllowed] = useState<boolean>(true);
 
   useEffect(() => {
@@ -44,14 +44,14 @@ export const useIsDeviceAngleAllowed = () => {
   }, []);
 
   useEffect(() => {
-    if (!isAllowed) {
+    if (!isAllowed && isReady) {
       const interval = setInterval(
         hapticFeedback,
         DEVICE_ANGLE_WARNING_FEEDBACK_INTERVAL_MS,
       );
       return () => clearInterval(interval);
     }
-  }, [isAllowed]);
+  }, [isAllowed, isReady]);
 
   return isAllowed;
 };

src/store/modules/Account/selectors/index.ts

@@ -82,3 +82,6 @@ export const isTeamEnabledSelector = (state: RootState) =>
 
 export const isAchievementsEnabledSelector = (state: RootState) =>
   !!state.account.authConfig?.achievements?.enabled;
+
+export const isFaceDetectionEnabledSelector = (state: RootState) =>
+  !!state.account.authConfig?.['face-detection']?.enabled;