refactor(mfa): derive invalid-code error from state

Author: dariusz-biela

src/components/MultifactorAuthentication/machine/mfaMachine.ts

@@ -14,7 +14,7 @@ import {CONST as COMMON_CONST} from 'expensify-common';
 import {assign, setup} from 'xstate';
 
 import type {MfaMachineEvent} from './machineEvents';
-import type {MfaContext, MfaTag} from './types';
+import type {MfaContext} from './types';
 
 import createActors from './mfaActors';
 
@@ -56,7 +56,6 @@ const MFAMachine = setup({
     types: {
         context: {} as MfaContext,
         events: {} as MfaMachineEvent,
-        tags: {} as MfaTag,
     },
     /* eslint-enable @typescript-eslint/no-unsafe-type-assertion */
     actors: createActors(),
@@ -238,7 +237,6 @@ const MFAMachine = setup({
                                 // (typing, a resend, a new submission) drops the error by
                                 // construction and nothing stale can outlive the screen.
                                 [MFA_STATE.INVALID_CODE]: {
-                                    tags: 'showsInvalidCodeError',
                                     on: {
                                         VALIDATE_CODE_CHANGED: MFA_STATE.AWAITING_INPUT,
                                     },

src/components/MultifactorAuthentication/machine/snapshotToState.ts

@@ -41,7 +41,13 @@ function snapshotToState(snapshot: MfaSnapshot): MfaState {
         ...snapshot.context,
         modalState: getModalState(snapshot),
         canResendValidateCode: snapshot.can({type: 'RESEND_VALIDATE_CODE'}),
-        showsInvalidCodeError: snapshot.hasTag('showsInvalidCodeError'),
+        showsInvalidCodeError: snapshot.matches({
+            [MFA_STATE.OPEN]: {
+                [MFA_STATE.MAGIC_CODE]: {
+                    [MFA_STATE.AWAITING_VALIDATE_CODE]: MFA_STATE.INVALID_CODE,
+                },
+            },
+        }),
     };
 }
 

src/components/MultifactorAuthentication/machine/types.ts

@@ -74,13 +74,6 @@ type MfaEvent =
     | {type: 'RESEND_VALIDATE_CODE'}
     | {type: 'VALIDATE_CODE_CHANGED'};
 
-/**
- * Tags the chart marks UI-facing conditions with. The view bridge reads them through `hasTag`
- * instead of matching a concrete state path, so a chart restructuring that moves the tagged state
- * does not break the bridge.
- */
-type MfaTag = 'showsInvalidCodeError';
-
 /** Describes the input the machine passes to the device-check actor. */
 type ValidateDeviceInput = {allowedAuthenticationMethods: AllowedAuthenticationMethods};
 
@@ -101,7 +94,6 @@ export type {
     MfaContext,
     MfaEvent,
     MfaModalState,
-    MfaTag,
     MultifactorAuthenticationInitEvent,
     ReadHasAcceptedSoftPromptInput,
     RequestRegistrationChallengeInput,

tests/unit/components/MultifactorAuthentication/machine/validateCodeTransition.test.ts

@@ -1,4 +1,5 @@
 import mfaMachine from '@components/MultifactorAuthentication/machine/mfaMachine';
+import snapshotToState from '@components/MultifactorAuthentication/machine/snapshotToState';
 import type {CheckLocalCredentialsInput, ValidateDeviceInput} from '@components/MultifactorAuthentication/machine/types';
 
 import type {MFAResult} from '@libs/MultifactorAuthentication/shared/MFAResult';
@@ -123,7 +124,7 @@ describe('MFA magic code and registration decision', () => {
 
         const result = actor.getSnapshot();
         expect(result.matches({[MFA_STATE.OPEN]: {[MFA_STATE.MAGIC_CODE]: {[MFA_STATE.AWAITING_VALIDATE_CODE]: MFA_STATE.AWAITING_INPUT}}})).toBe(true);
-        expect(result.hasTag('showsInvalidCodeError')).toBe(false);
+        expect(snapshotToState(result).showsInvalidCodeError).toBe(false);
         expect(requestValidateCodeActionMock).toHaveBeenCalledTimes(1);
 
         actor.stop();
@@ -183,7 +184,7 @@ describe('MFA magic code and registration decision', () => {
 
         const result = actor.getSnapshot();
         expect(result.matches({[MFA_STATE.OPEN]: {[MFA_STATE.MAGIC_CODE]: {[MFA_STATE.AWAITING_VALIDATE_CODE]: MFA_STATE.INVALID_CODE}}})).toBe(true);
-        expect(result.hasTag('showsInvalidCodeError')).toBe(true);
+        expect(snapshotToState(result).showsInvalidCodeError).toBe(true);
         expect(result.context.registrationChallenge).toBeUndefined();
         expect(result.context.error).toBeUndefined();
         expect(requestValidateCodeActionMock).not.toHaveBeenCalled();
@@ -198,14 +199,14 @@ describe('MFA magic code and registration decision', () => {
         actor.start();
         actor.send({type: 'VALIDATE_CODE_ENTERED', validateCode: MFA_TEST_VALIDATE_CODE});
         await waitForBatchedUpdates();
-        expect(actor.getSnapshot().hasTag('showsInvalidCodeError')).toBe(true);
+        expect(snapshotToState(actor.getSnapshot()).showsInvalidCodeError).toBe(true);
         actor.send({type: 'VALIDATE_CODE_ENTERED', validateCode: MFA_TEST_VALIDATE_CODE});
         await waitForBatchedUpdates();
 
         const result = actor.getSnapshot();
         expect(result.context.registrationChallenge).toBe(MFA_TEST_REGISTRATION_CHALLENGE);
         expect(result.context.validateCode).toBe(MFA_TEST_VALIDATE_CODE);
-        expect(result.hasTag('showsInvalidCodeError')).toBe(false);
+        expect(snapshotToState(result).showsInvalidCodeError).toBe(false);
 
         actor.stop();
     });
@@ -250,7 +251,7 @@ describe('MFA magic code and registration decision', () => {
 
         const result = actor.getSnapshot();
         expect(result.matches({[MFA_STATE.OPEN]: {[MFA_STATE.MAGIC_CODE]: {[MFA_STATE.AWAITING_VALIDATE_CODE]: MFA_STATE.AWAITING_INPUT}}})).toBe(true);
-        expect(result.hasTag('showsInvalidCodeError')).toBe(false);
+        expect(snapshotToState(result).showsInvalidCodeError).toBe(false);
 
         actor.stop();
     });