Fix css and test

packages/js/onboarding/src/components/WCPayCard/WCPayCard.js

@@ -17,22 +17,19 @@ import WCPayBenefit1 from '../../images/wcpay-benefit-1';
 import WCPayBenefit2 from '../../images/wcpay-benefit-2';
 import WCPayBenefit3 from '../../images/wcpay-benefit-3';
 
-export const WCPayCardBody = ( {
-	heading,
-	children,
-	onLinkClick = () => {},
-} ) => (
+export const WCPayCardBody = ( { children, onLinkClick = () => {} } ) => (
 	<CardBody>
 		<div className="hstack">
 			<div className="vstack content-center flex-1">
-				{ heading && (
-					<Text
-						as="h1"
-						className="woocommerce-task-payment-wcpay__heading"
-					>
-						{ heading }
-					</Text>
-				) }
+				<Text
+					as="h1"
+					className="woocommerce-task-payment-wcpay__heading"
+				>
+					{ __(
+						'Accept payments and manage your business.',
+						'woocommerce'
+					) }
+				</Text>
 				<Text
 					className="woocommerce-task-payment-wcpay__description"
 					as="p"
@@ -72,8 +69,8 @@ export const WCPayCardBody = ( {
 				</Text>
 				<div>{ children }</div>
 			</div>
-			<div>
-				<WCPayHeroImage className="wcpay-hero-image" />
+			<div className="woocommerce-task-payment-wcpay__hero-image-container">
+				<WCPayHeroImage />
 			</div>
 		</div>
 	</CardBody>

packages/js/onboarding/src/components/WCPayCard/WCPayCard.scss

@@ -3,6 +3,7 @@
 		.vstack,
 		.hstack {
 			display: flex;
+
 			&.content-center {
 				justify-content: center;
 			}
@@ -24,9 +25,19 @@
 			flex-direction: row;
 		}
 
-		.wcpay-hero-image {
-			margin-right: -32px;
-			margin-bottom: -28px;
+		.woocommerce-task-payment-wcpay__hero-image-container {
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-end;
+
+			svg {
+				margin-right: -32px;
+				margin-bottom: -24px;
+			}
+
+			@media screen and (max-width: 600px) {
+				max-width: 200px;
+			}
 		}
 
 		.woocommerce-task-payment-wcpay__heading {
@@ -96,6 +107,7 @@
 			svg {
 				margin: 0 auto;
 			}
+
 			max-width: 170px;
 			text-align: center;
 			font-size: 15px;

plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/test/index.js

@@ -118,8 +118,10 @@ describe( 'PaymentGatewaySuggestions', () => {
 		expect( paymentTitles ).toEqual( [] );
 
 		expect(
-			container.getElementsByTagName( 'title' )[ 0 ].textContent
-		).toBe( 'WooCommerce Payments' );
+			container.getElementsByClassName(
+				'woocommerce-task-payment-wcpay'
+			)[ 0 ].textContent
+		).toContain( 'By using WooCommerce Payments' );
 	} );
 
 	test( 'should render all payment gateways if no WCPay', () => {