Update text on site credentials page (#94722)

* Update text on credentials page * Update tests * Fix additional test case
Automattic · Sep 19, 2024 · 2190fff · 2190fff
1 parent 8e60f75
commit 2190fff
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 10 deletions.
diff --git a/...low/internals/steps-repository/site-migration-credentials/components/credentials-form.tsx b/...low/internals/steps-repository/site-migration-credentials/components/credentials-form.tsx
@@ -1,4 +1,5 @@
 import { Card } from '@automattic/components';
+import { useIsEnglishLocale } from '@automattic/i18n-utils';
 import { NextButton } from '@automattic/onboarding';
 import { useTranslate } from 'i18n-calypso';
 import { FC } from 'react';
@@ -20,6 +21,7 @@ interface CredentialsFormProps {
 
 export const CredentialsForm: FC< CredentialsFormProps > = ( { onSubmit, onSkip } ) => {
 	const translate = useTranslate();
+	const isEnglishLocale = useIsEnglishLocale();
 	const {
 		handleSubmit,
 		control,
@@ -83,7 +85,9 @@ export const CredentialsForm: FC< CredentialsFormProps > = ( { onSubmit, onSkip
 					onClick={ onSkip }
 					type="button"
 				>
-					{ translate( 'Skip, I need help providing access' ) }
+					{ isEnglishLocale
+						? translate( 'I need help, please contact me' )
+						: translate( 'Skip, I need help providing access' ) }
 				</button>
 			</div>
 		</form>

diff --git a/...w/internals/steps-repository/site-migration-credentials/components/site-address-field.tsx b/...w/internals/steps-repository/site-migration-credentials/components/site-address-field.tsx
@@ -1,5 +1,5 @@
 import { FormLabel } from '@automattic/components';
-import { useHasEnTranslation } from '@automattic/i18n-utils';
+import { useHasEnTranslation, useIsEnglishLocale } from '@automattic/i18n-utils';
 import { useTranslate } from 'i18n-calypso';
 import { Controller } from 'react-hook-form';
 import getValidationMessage from 'calypso/blocks/import/capture/url-validation-message-helper';
@@ -18,6 +18,7 @@ export const SiteAddressField: React.FC< Props > = ( {
 	importSiteQueryParam,
 } ) => {
 	const translate = useTranslate();
+	const isEnglishLocale = useIsEnglishLocale();
 	const hasEnTranslation = useHasEnTranslation();
 
 	const validateSiteAddress = ( siteAddress: string ) => {
@@ -33,7 +34,9 @@ export const SiteAddressField: React.FC< Props > = ( {
 
 	return (
 		<div className="site-migration-credentials__form-field">
-			<FormLabel htmlFor="site-address">{ translate( 'Site address' ) }</FormLabel>
+			<FormLabel htmlFor="site-address">
+				{ isEnglishLocale ? translate( 'Current site address' ) : translate( 'Site address' ) }
+			</FormLabel>
 			<Controller
 				control={ control }
 				name="siteAddress"

diff --git a/.../stepper/declarative-flow/internals/steps-repository/site-migration-credentials/index.tsx b/.../stepper/declarative-flow/internals/steps-repository/site-migration-credentials/index.tsx
@@ -1,3 +1,4 @@
+import { useIsEnglishLocale } from '@automattic/i18n-utils';
 import { StepContainer } from '@automattic/onboarding';
 import { useTranslate } from 'i18n-calypso';
 import DocumentHead from 'calypso/components/data/document-head';
@@ -9,6 +10,7 @@ import './style.scss';
 
 const SiteMigrationCredentials: Step = function ( { navigation } ) {
 	const translate = useTranslate();
+	const isEnglishLocale = useIsEnglishLocale();
 
 	const handleSubmit = () => {
 		return navigation.submit?.();
@@ -22,7 +24,13 @@ const SiteMigrationCredentials: Step = function ( { navigation } ) {
 
 	return (
 		<>
-			<DocumentHead title={ translate( 'Tell us about your site' ) } />
+			<DocumentHead
+				title={
+					isEnglishLocale
+						? translate( 'Tell us about your WordPress site' )
+						: translate( 'Tell us about your site' )
+				}
+			/>
 			<StepContainer
 				stepName="site-migration-credentials"
 				flowName="site-migration"
@@ -33,10 +41,20 @@ const SiteMigrationCredentials: Step = function ( { navigation } ) {
 				formattedHeader={
 					<FormattedHeader
 						id="site-migration-credentials-header"
-						headerText={ translate( 'Tell us about your site' ) }
-						subHeaderText={ translate(
-							'Please share the following details to access your site and start your migration.'
-						) }
+						headerText={
+							isEnglishLocale
+								? translate( 'Tell us about your WordPress site' )
+								: translate( 'Tell us about your site' )
+						}
+						subHeaderText={
+							isEnglishLocale
+								? translate(
+										'Please share the following details to access your site and start your migration to WordPress.com.'
+								  )
+								: translate(
+										'Please share the following details to access your site and start your migration.'
+								  )
+						}
 						align="center"
 					/>
 				}

diff --git a/...per/declarative-flow/internals/steps-repository/site-migration-credentials/test/index.tsx b/...per/declarative-flow/internals/steps-repository/site-migration-credentials/test/index.tsx
@@ -32,7 +32,7 @@ const messages = {
 const { getByRole, getByLabelText, getByTestId, getByText, findByText } = screen;
 
 const continueButton = () => getByRole( 'button', { name: /Continue/ } );
-const siteAddressInput = () => getByLabelText( 'Site address' );
+const siteAddressInput = () => getByLabelText( 'Current site address' );
 const usernameInput = () => getByLabelText( 'WordPress admin username' );
 const passwordInput = () => getByLabelText( 'Password' );
 const backupOption = () => getByRole( 'radio', { name: 'Backup file' } );
@@ -41,7 +41,7 @@ const backupFileInput = () => getByLabelText( 'Backup file location' );
 //TODO: it requires a testid because there is no accessible name, it is an issue with the component
 const specialInstructionsInput = () => getByTestId( 'special-instructions-textarea' );
 const specialInstructionsButton = () => getByRole( 'button', { name: 'Special instructions' } );
-const skipButton = () => getByRole( 'button', { name: /Skip, I need help providing access/ } );
+const skipButton = () => getByRole( 'button', { name: /I need help, please contact me/ } );
 
 const fillAllFields = async () => {
 	await userEvent.click( credentialsOption() );