Fix "Choose Your Theme" task header (#41293)

plugins/woocommerce-admin/client/task-lists/fills/appearance.js

@@ -6,7 +6,7 @@ import { WooOnboardingTaskListItem } from '@woocommerce/onboarding';
 import { registerPlugin } from '@wordpress/plugins';
 import { getAdminLink } from '@woocommerce/settings';
 
-const useAppearanceClick = () => {
+export const useAppearanceClick = () => {
 	const onClick = () => {
 		window.location = getAdminLink(
 			'theme-install.php?browse=block-themes'

plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-headers/appearance.js

@@ -1,16 +1,24 @@
 /**
  * External dependencies
  */
-import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import TimerImage from './timer.svg';
 import { WC_ASSET_URL } from '../../../../utils/admin-settings';
+import { useAppearanceClick } from '../../../fills/appearance';
+
+const AppearanceHeader = ( { task } ) => {
+	const { onClick } = useAppearanceClick();
+
+	const taskTitle = task.title;
+	const taskDescription = task.content;
+	const taskCta = task.actionLabel;
+	const taskTime = task.time;
 
-const AppearanceHeader = ( { task, goToTask } ) => {
 	return (
 		<div className="woocommerce-task-header__contents-container">
 			<img
@@ -22,25 +30,18 @@ const AppearanceHeader = ( { task, goToTask } ) => {
 				className="svg-background"
 			/>
 			<div className="woocommerce-task-header__contents">
-				<h1>{ __( 'Make your store stand out', 'woocommerce' ) }</h1>
-				<p>
-					{ __(
-						'Add your logo, create a homepage, and start designing your store.',
-						'woocommerce'
-					) }
-				</p>
+				<h1>{ taskTitle }</h1>
+				<p>{ taskDescription }</p>
 				<Button
 					isSecondary={ task.isComplete }
 					isPrimary={ ! task.isComplete }
-					onClick={ goToTask }
+					onClick={ onClick }
 				>
-					{ task.isComplete
-						? __( 'Modify choices', 'woocommerce' )
-						: __( 'Personalize', 'woocommerce' ) }
+					{ taskCta }
 				</Button>
 				<p className="woocommerce-task-header__timer">
 					<img src={ TimerImage } alt="Timer" />{ ' ' }
-					<span>{ task.time }</span>
+					<span>{ taskTime }</span>
 				</p>
 			</div>
 		</div>

plugins/woocommerce/changelog/fix-appearance-task-header

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix "Choose Your Theme" task header