Fix issues and react warnings for verification code components

js/src/components/app-button/index.js

@@ -49,15 +49,20 @@ const AppButton = ( props ) => {
 		onClick( ...args );
 	};
 
-	const text = [];
 	const classes = [ 'app-button', className ];
+	let text;
 
 	if ( loading ) {
-		text.push( <Spinner /> );
+		text = <Spinner />;
 	}
 
 	if ( passedInText ) {
-		text.push( passedInText );
+		text = (
+			<>
+				{ loading && <Spinner /> }
+				{ passedInText }
+			</>
+		);
 
 		if ( rest.icon ) {
 			classes.push( 'app-button--icon-with-text' );
@@ -71,7 +76,7 @@ const AppButton = ( props ) => {
 		<Button
 			className={ classnames( ...classes ) }
 			disabled={ disabled || loading }
-			text={ text.length ? text : undefined }
+			text={ text }
 			onClick={ handleClick }
 			{ ...rest }
 		/>

js/src/components/contact-information/phone-number-card/phone-number-card.js

@@ -13,6 +13,7 @@ import AccountCard, { APPEARANCE } from '.~/components/account-card';
 import AppButton from '.~/components/app-button';
 import AppSpinner from '.~/components/app-spinner';
 import EditPhoneNumberContent from './edit-phone-number-content';
+import VerifyPhoneNumberContent from './verify-phone-number-content';
 import './phone-number-card.scss';
 
 const noop = () => {};
@@ -22,6 +23,62 @@ const basePhoneNumberCardProps = {
 	appearance: APPEARANCE.PHONE,
 };
 
+// TODO: remove <DemoVerifyPhoneNumberCard> before merging PR.
+export function DemoVerifyPhoneNumberCard() {
+	const display = '+1 213 373 4253';
+	const [ unverifiedPhoneNumber, setUnverifiedPhoneNumber ] = useState(
+		null
+	);
+
+	const cardContent = unverifiedPhoneNumber ? (
+		<>
+			<CardDivider />
+			<VerifyPhoneNumberContent
+				{ ...unverifiedPhoneNumber }
+				onPhoneNumberVerified={ () => {
+					// eslint-disable-next-line no-console
+					console.log( 'onPhoneNumberVerified' );
+					setUnverifiedPhoneNumber( null );
+				} }
+			/>
+		</>
+	) : null;
+
+	const indicator = (
+		<AppButton
+			isSecondary
+			text={ unverifiedPhoneNumber ? 'Edit' : 'Send verification code' }
+			onClick={ () => {
+				if ( unverifiedPhoneNumber ) {
+					setUnverifiedPhoneNumber( null );
+				} else {
+					setUnverifiedPhoneNumber( {
+						verificationMethod: 'SMS',
+						country: 'US',
+						number: '+12133734253',
+						display,
+					} );
+				}
+			} }
+		/>
+	);
+
+	return (
+		<section className="wcdl-section">
+			<header />
+			<div className="wcdl-section__body">
+				<AccountCard
+					{ ...basePhoneNumberCardProps }
+					description={ display }
+					indicator={ indicator }
+				>
+					{ cardContent }
+				</AccountCard>
+			</div>
+		</section>
+	);
+}
+
 /**
  * @typedef { import(".~/hooks/useGoogleMCPhoneNumber").PhoneNumber } PhoneNumber
  * @typedef { import("./edit-phone-number-content").onPhoneNumberChange } onPhoneNumberChange

js/src/components/contact-information/phone-number-card/verification-code-control.js

@@ -56,13 +56,13 @@ export default function VerificationCodeControl( {
 	};
 
 	const handleKeyDown = ( e ) => {
-		const { dataset, selectionStart, value } = e.target;
+		const { dataset, selectionStart, selectionEnd, value } = e.target;
 		const idx = Number( dataset.idx );
 
 		switch ( e.keyCode ) {
 			case KEY_CODE_LEFT:
 			case KEY_CODE_BACKSPACE:
-				if ( selectionStart === 0 ) {
+				if ( selectionStart === 0 && selectionEnd === 0 ) {
 					maybeMoveFocus( idx - 1 );
 				}
 				break;
@@ -103,18 +103,38 @@ export default function VerificationCodeControl( {
 		}
 	};
 
-	useEffect( () => {
-		maybeMoveFocus( 0 );
-	}, [] );
-
 	useEffect( () => {
 		inputsRef.current.forEach( ( el ) => ( el.value = '' ) );
-		maybeMoveFocus( 0 );
 
 		setDigits( initDigits );
 		onCodeChangeRef.current( toCallbackData( initDigits ) );
 	}, [ resetNeedle ] );
 
+	/**
+	 * Since the <InputControl> has an internal state management that always controls the actual `value` prop the <input>,
+	 * the <InputControl> is forced to be a controlled input.
+	 * When using it, it's always necessary to specify `value` prop from the below <AppInputControl>
+	 * to avoid the warning - A component is changing an uncontrolled input to be controlled.
+	 *
+	 * @see https://github.com/WordPress/gutenberg/blob/%40wordpress/components%4012.0.8/packages/components/src/input-control/input-field.js#L47-L68
+	 * @see https://github.com/WordPress/gutenberg/blob/%40wordpress/components%4012.0.8/packages/components/src/input-control/input-field.js#L115-L118
+	 *
+	 * But after specifying the `value` prop,
+	 * the synchronization of external and internal `value` state will depend on whether the input is focused.
+	 * It'd sync external to internal only if the input is not focused.
+	 * So here we await the `digits` is reset back to `initDigits` by above useEffect and sync to internal value,
+	 * then move the focus calling after the synchronization tick finished.
+	 *
+	 * @see https://github.com/WordPress/gutenberg/blob/%40wordpress/components%4012.0.8/packages/components/src/input-control/input-field.js#L73-L90
+	 *
+	 * And it's also used for the first time focus after this component being mounted.
+	 */
+	useEffect( () => {
+		if ( digits === initDigits ) {
+			maybeMoveFocus( 0 );
+		}
+	}, [ resetNeedle, digits ] );
+
 	return (
 		<Flex
 			className="gla-verification-code-control"

js/src/components/contact-information/phone-number-card/verify-phone-number-content.js

@@ -14,6 +14,7 @@ import { Notice, Flex } from '@wordpress/components';
 /**
  * Internal dependencies
  */
+import useIsMounted from '.~/hooks/useIsMounted';
 import useCountdown from './useCountdown';
 import Section from '.~/wcdl/section';
 import Subsection from '.~/wcdl/subsection';
@@ -108,6 +109,7 @@ export default function VerifyPhoneNumberContent( {
 	display,
 	onPhoneNumberVerified,
 } ) {
+	const isMounted = useIsMounted();
 	const [ method, setMethod ] = useState( verificationMethod );
 	const { second, callCount, startCountdown } = useCountdown( method );
 	const [ verification, setVerification ] = useState( null );
@@ -134,10 +136,12 @@ export default function VerifyPhoneNumberContent( {
 				verificationIdRef.current[ method ] = id;
 			} )
 			.catch( () => {
-				startCountdown( 0 );
+				if ( isMounted() ) {
+					startCountdown( 0 );
+				}
 				// TODO: [full-contact-info] add error handling.
 			} );
-	}, [ country, number, method, startCountdown ] );
+	}, [ country, number, method, startCountdown, isMounted ] );
 
 	const handleVerifyClick = () => {
 		setError( null );
@@ -150,8 +154,10 @@ export default function VerifyPhoneNumberContent( {
 			} )
 			.catch( ( e ) => {
 				// TODO: [full-contact-info] align to the real error data structure.
-				setError( e );
-				setVerifying( false );
+				if ( isMounted() ) {
+					setError( e );
+					setVerifying( false );
+				}
 			} );
 	};
 

js/src/hooks/useIsMounted.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { useEffect, useCallback, useRef } from '@wordpress/element';
+
+/**
+ * Returns a function to check whether the caller component is mounted or unmounted.
+ * Usually, it's used to avoid the warning - Can't perform a React state update on an unmounted component.
+ *
+ * @return {() => boolean} A function returns a boolean indicates the caller component is mounted or unmounted.
+ */
+export default function useIsMounted() {
+	const mountedRef = useRef( false );
+	useEffect( () => {
+		mountedRef.current = true;
+		return () => {
+			mountedRef.current = false;
+		};
+	}, [] );
+	return useCallback( () => mountedRef.current, [] );
+}

js/src/settings/index.js

@@ -15,6 +15,7 @@ import DisconnectAccounts from './disconnect-accounts';
 import ReconnectAccounts from './reconnect-accounts';
 import EditContactInformation from './edit-contact-information';
 import './index.scss';
+import { DemoVerifyPhoneNumberCard } from '.~/components/contact-information/phone-number-card/phone-number-card';
 
 const Settings = () => {
 	const { subpath } = getQuery();
@@ -42,6 +43,7 @@ const Settings = () => {
 	return (
 		<div className="gla-settings">
 			<NavigationClassic />
+			<DemoVerifyPhoneNumberCard />
 			<DisconnectAccounts />
 			<ContactInformationPreview />
 		</div>