A4A: Update Migration Banner offer date & content (#99080)

Automattic · Jan 31, 2025 · e149270 · e149270
1 parent a38e4b1
commit e149270
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 59 deletions.
diff --git a/client/a8c-for-agencies/components/a4a-migration-offer-v3/index.tsx b/client/a8c-for-agencies/components/a4a-migration-offer-v3/index.tsx
@@ -47,7 +47,7 @@ const MigrationOfferV3 = ( { isExpanded, onToggleView }: Props ) => {
 				<h3 className="a4a-migration-offer-v3__title">
 					<span>
 						{ translate(
-							'{{b}}Limited time offer:{{/b}} Migrate your sites to Pressable or WordPress.com and earn up to $10,000!',
+							'{{b}}Limited time offer:{{/b}} Migrate your sites to Pressable or WordPress.com and earn up to $10,000!*',
 							{
 								components: {
 									b: <b />,
@@ -66,15 +66,23 @@ const MigrationOfferV3 = ( { isExpanded, onToggleView }: Props ) => {
 						<SimpleList
 							items={ [
 								translate(
-									"{{b}}WP Engine customers:{{/b}} You will receive $100 per site, up to $10,000. You will also get credited for the remaining time on your WP Engine contract, so you won't have to pay twice.",
+									'{{b}}All migrations:{{/b}} Your first month of hosting will be free when you migrate twenty or more sites to us from any host.',
 									{
 										components: {
 											b: <b />,
 										},
 									}
 								),
 								translate(
-									'{{b}}For any other host:{{/b}} You will receive $100 per site migrated up to a maximum of $3,000.',
+									"{{b}}WP Engine customers:{{/b}} You will receive $100 per successful site migration up to $10,000. If you have an existing contract, we'll host your site(s) for free until your existing WP Engine contract ends.",
+									{
+										components: {
+											b: <b />,
+										},
+									}
+								),
+								translate(
+									'{{b}}For any other host:{{/b}} You will receive $100 per successful site migration, up to $3,000.',
 									{
 										components: {
 											b: <b />,
@@ -104,9 +112,9 @@ const MigrationOfferV3 = ( { isExpanded, onToggleView }: Props ) => {
 							</Button>
 
 							<span className="a4a-migration-offer-v3__body-actions-footnote">
-								{ translate( '* offer valid until %(endDate)s', {
+								{ translate( '*Offer valid until %(endDate)s', {
 									args: {
-										endDate: new Date( '2025-01-31T00:00:00' ).toLocaleDateString(
+										endDate: new Date( '2025-07-31T00:00:00' ).toLocaleDateString(
 											translate.localeSlug,
 											{
 												year: 'numeric',

diff --git a/client/a8c-for-agencies/components/a4a-migration-offer-v3/style.scss b/client/a8c-for-agencies/components/a4a-migration-offer-v3/style.scss
@@ -55,7 +55,7 @@
 	flex-direction: column;
 
 	.simple-list {
-		max-width: 800px;
+		max-width: 850px;
 		margin-block-start: 24px;
 		margin-inline-start: 16px;
 	}

diff --git a/...s/sections/migrations/primary/migrations-overview-v2/sections/migrations-banner/index.tsx b/...s/sections/migrations/primary/migrations-overview-v2/sections/migrations-banner/index.tsx
@@ -1,22 +1,14 @@
-import { Button, Card } from '@wordpress/components';
 import { useTranslate } from 'i18n-calypso';
-import { CONTACT_URL_FOR_MIGRATION_OFFER_HASH_FRAGMENT } from 'calypso/a8c-for-agencies/components/a4a-contact-support-widget';
+import { useState } from 'react';
+import MigrationOfferV3 from 'calypso/a8c-for-agencies/components/a4a-migration-offer-v3';
 import PageSection from 'calypso/a8c-for-agencies/components/page-section';
 import { BackgroundType5 } from 'calypso/a8c-for-agencies/components/page-section/backgrounds';
-import SimpleList from 'calypso/a8c-for-agencies/components/simple-list';
-import MigrationIcon from 'calypso/assets/images/a8c-for-agencies/migration-icon.svg';
-import { useDispatch } from 'calypso/state';
-import { recordTracksEvent } from 'calypso/state/analytics/actions';
 
 import './style.scss';
 
 export default function MigrationsBanner() {
 	const translate = useTranslate();
-	const dispatch = useDispatch();
-
-	const onMigrateSiteClick = () => {
-		dispatch( recordTracksEvent( 'calypso_a8c_migration_banner_migrate_site_click' ) );
-	};
+	const [ isMigrationOfferExpanded, setIsMigrationOfferExpanded ] = useState( true );
 
 	return (
 		<PageSection
@@ -30,48 +22,10 @@ export default function MigrationsBanner() {
 			) }
 			background={ BackgroundType5 }
 		>
-			<Card className="migrations-banner">
-				<div className="migrations-banner__main">
-					<h2 className="migrations-banner__title">
-						<img className="migrations-banner__icon" src={ MigrationIcon } alt="" />
-						{ translate(
-							'Limited time offer: Migrate your sites to Pressable or WordPress.com and earn up to $10,000!'
-						) }
-					</h2>
-
-					<div className="migration-banner__content">
-						<SimpleList
-							items={ [
-								translate(
-									'{{b}}WP Engine customers:{{/b}} You will receive $100 per site, up to $10,000. You will also get credited for the remaining time on your WP Engine contract, so you won’t have to pay twice.',
-									{
-										components: {
-											b: <b />,
-										},
-									}
-								),
-								translate(
-									'{{b}}For any other host:{{/b}} will receive $100 per site migrated up to a maximum of $3,000.',
-									{
-										components: {
-											b: <b />,
-										},
-									}
-								),
-							] }
-						/>
-
-						<Button
-							className="migrations-banner__cta-button"
-							variant="secondary"
-							onClick={ onMigrateSiteClick }
-							href={ CONTACT_URL_FOR_MIGRATION_OFFER_HASH_FRAGMENT }
-						>
-							{ translate( 'Migrate your sites' ) }
-						</Button>
-					</div>
-				</div>
-			</Card>
+			<MigrationOfferV3
+				isExpanded={ isMigrationOfferExpanded }
+				onToggleView={ () => setIsMigrationOfferExpanded( ( prev ) => ! prev ) }
+			/>
 		</PageSection>
 	);
 }