chore(liveness): update hold still text to show when matched (#4780)

* chore(liveness): update hold still text to show when matched

* Create blue-apes-own.md

.changeset/blue-apes-own.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react-liveness": patch
+---
+
+chore(liveness): update hold still text to show when matched

packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx

@@ -83,7 +83,6 @@ const showMatchIndicatorStates = [
   FaceMatchState.TOO_FAR,
   FaceMatchState.CANT_IDENTIFY,
   FaceMatchState.FACE_IDENTIFIED,
-  FaceMatchState.MATCHED,
 ];
 
 /**

packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/__tests__/LivenessCameraModule.test.tsx

@@ -327,7 +327,7 @@ describe('LivenessCameraModule', () => {
     const matchIndicator = cameraModule.getElementsByClassName(
       LivenessClassNames.MatchIndicator
     );
-    expect(matchIndicator).toHaveLength(1);
+    expect(matchIndicator).toHaveLength(0);
   });
 
   it('should not render MatchIndicator when isRecording and faceMatchState is TOO_MANY', async () => {

packages/react-liveness/src/components/FaceLivenessDetector/shared/Hint.tsx

@@ -162,18 +162,23 @@ export const Hint: React.FC<HintProps> = ({ hintDisplayText }) => {
       // During face matching, we want to only show the TOO_CLOSE or
       // TOO_FAR texts. If FaceMatchState matches TOO_CLOSE, we'll show
       // the TOO_CLOSE text, but for FACE_IDENTIFED, CANT_IDENTIFY, TOO_MANY
-      // we are defaulting to the TOO_FAR text (for now). For MATCHED state,
-      // we don't want to show any toasts.
+      // we are defaulting to the TOO_FAR text (for now).
+      let resultHintString = FaceMatchStateStringMap[FaceMatchState.TOO_FAR];
+      if (
+        faceMatchState === FaceMatchState.TOO_CLOSE ||
+        faceMatchState === FaceMatchState.MATCHED
+      ) {
+        resultHintString = FaceMatchStateStringMap[faceMatchState];
+      }
+
       return (
         <Toast
           size="large"
           variation={
             faceMatchState === FaceMatchState.TOO_CLOSE ? 'error' : 'primary'
           }
         >
-          {faceMatchState === FaceMatchState.TOO_CLOSE
-            ? FaceMatchStateStringMap[FaceMatchState.TOO_CLOSE]
-            : FaceMatchStateStringMap[FaceMatchState.TOO_FAR]}
+          {resultHintString}
         </Toast>
       );
     }

packages/react-liveness/src/components/FaceLivenessDetector/shared/__tests__/Hint.test.tsx

@@ -251,6 +251,18 @@ describe('Hint', () => {
     ).toBeInTheDocument();
   });
 
+  it('should render HOLD_STILL text if faceMatchState = MATCHED and recording', () => {
+    faceMatchState = FaceMatchState.MATCHED;
+    isRecording = true;
+    mockStateMatchesAndSelectors();
+
+    renderWithLivenessProvider(<Hint hintDisplayText={hintDisplayText} />);
+
+    expect(
+      screen.getByText(hintDisplayText.hintHoldFaceForFreshnessText)
+    ).toBeInTheDocument();
+  });
+
   it('should render TOO_FAR text if faceMatchState = CANT_IDENTIFY and recording', () => {
     faceMatchState = FaceMatchState.CANT_IDENTIFY;
     isRecording = true;