update: support phone label text (#10979)

Co-authored-by: Copilot <[email protected]>
Co-authored-by: Rafael Meneses <[email protected]>

Author: 3 people

changelog/update-support-phone-input-label-text-in-test-mode

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+update: label text on the support phone number in test mode

client/settings/support-phone-input/__tests__/support-phone-input.test.js

@@ -110,58 +110,33 @@ describe( 'SupportPhoneInput', () => {
 			container.querySelector( '.components-notice.is-error' )
 		).toBeNull();
 
-		fireEvent.change(
-			screen.getByLabelText(
-				'Support phone number (+1 0000000000 can be used for test accounts)'
-			),
-			{
-				target: { value: '+6580000000' },
-			}
-		);
+		fireEvent.change( screen.getByLabelText( 'Support phone number' ), {
+			target: { value: '+6580000000' },
+		} );
 		expect(
 			container.querySelector( '.components-notice.is-error' )
 		).toBeNull();
-		fireEvent.change(
-			screen.getByLabelText(
-				'Support phone number (+1 0000000000 can be used for test accounts)'
-			),
-			{
-				target: { value: '+6580500000' },
-			}
-		);
+		fireEvent.change( screen.getByLabelText( 'Support phone number' ), {
+			target: { value: '+6580500000' },
+		} );
 		expect(
 			container.querySelector( '.components-notice.is-error' )
 		).toBeNull();
-		fireEvent.change(
-			screen.getByLabelText(
-				'Support phone number (+1 0000000000 can be used for test accounts)'
-			),
-			{
-				target: { value: '+6580700000' },
-			}
-		);
+		fireEvent.change( screen.getByLabelText( 'Support phone number' ), {
+			target: { value: '+6580700000' },
+		} );
 		expect(
 			container.querySelector( '.components-notice.is-error' )
 		).toBeNull();
-		fireEvent.change(
-			screen.getByLabelText(
-				'Support phone number (+1 0000000000 can be used for test accounts)'
-			),
-			{
-				target: { value: '+6580800000' },
-			}
-		);
+		fireEvent.change( screen.getByLabelText( 'Support phone number' ), {
+			target: { value: '+6580800000' },
+		} );
 		expect(
 			container.querySelector( '.components-notice.is-error' )
 		).toBeNull();
-		fireEvent.change(
-			screen.getByLabelText(
-				'Support phone number (+1 0000000000 can be used for test accounts)'
-			),
-			{
-				target: { value: '+6580900000' },
-			}
-		);
+		fireEvent.change( screen.getByLabelText( 'Support phone number' ), {
+			target: { value: '+6580900000' },
+		} );
 		expect(
 			container.querySelector( '.components-notice.is-error' )
 		).toBeNull();
@@ -179,38 +154,23 @@ describe( 'SupportPhoneInput', () => {
 			container.querySelector( '.components-notice.is-error' )
 		).toBeNull();
 
-		fireEvent.change(
-			screen.getByLabelText(
-				'Support phone number (+1 0000000000 can be used for test accounts)'
-			),
-			{
-				target: { value: '+85241234567' },
-			}
-		);
+		fireEvent.change( screen.getByLabelText( 'Support phone number' ), {
+			target: { value: '+85241234567' },
+		} );
 		expect(
 			container.querySelector( '.components-notice.is-error' )
 		).toBeNull();
 
-		fireEvent.change(
-			screen.getByLabelText(
-				'Support phone number (+1 0000000000 can be used for test accounts)'
-			),
-			{
-				target: { value: '+85271234567' },
-			}
-		);
+		fireEvent.change( screen.getByLabelText( 'Support phone number' ), {
+			target: { value: '+85271234567' },
+		} );
 		expect(
 			container.querySelector( '.components-notice.is-error' )
 		).toBeNull();
 
-		fireEvent.change(
-			screen.getByLabelText(
-				'Support phone number (+1 0000000000 can be used for test accounts)'
-			),
-			{
-				target: { value: '+85281234567' },
-			}
-		);
+		fireEvent.change( screen.getByLabelText( 'Support phone number' ), {
+			target: { value: '+85281234567' },
+		} );
 		expect(
 			container.querySelector( '.components-notice.is-error' )
 		).toBeNull();

client/settings/support-phone-input/index.js

@@ -54,13 +54,7 @@ const SupportPhoneInput = ( { setInputVallid } ) => {
 		}
 	}, [ supportPhoneError, setInputVallid ] );
 
-	let labelText = __( 'Support phone number', 'woocommerce-payments' );
-	if ( isTestModeOnboarding ) {
-		labelText += __(
-			' (+1 0000000000 can be used for test accounts)',
-			'woocommerce-payments'
-		);
-	}
+	const labelText = __( 'Support phone number', 'woocommerce-payments' );
 	return (
 		<>
 			{ supportPhoneError && (
@@ -70,10 +64,23 @@ const SupportPhoneInput = ( { setInputVallid } ) => {
 			) }
 			<BaseControl
 				className="settings__account-business-support-phone-input no-top-margin"
-				help={ __(
-					'This may be visible on receipts, invoices, and automated emails from your store.',
-					'woocommerce-payments'
-				) }
+				help={
+					<>
+						{ __(
+							'This may be visible on receipts, invoices, and automated emails from your store.',
+							'woocommerce-payments'
+						) }
+						{ isTestModeOnboarding && (
+							<>
+								<br />
+								{ __(
+									'(+1 0000000000 can be used for test accounts)',
+									'woocommerce-payments'
+								) }
+							</>
+						) }
+					</>
+				}
 				label={ labelText }
 				id="account-business-support-phone-input"
 				__nextHasNoMarginBottom