Jetpack At-a-glance: Replace Backup upgrade banner with a coupon redeem CTA when a partner coupon is detected

projects/plugins/jetpack/_inc/client/at-a-glance/backups.jsx

@@ -10,7 +10,7 @@ import { get, isEmpty, noop } from 'lodash';
  * WordPress dependencies
  */
 import { createInterpolateElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { getRedirectUrl } from '@automattic/jetpack-components';
 
 /**
@@ -38,7 +38,7 @@ import {
 import { isPluginInstalled } from 'state/site/plugins';
 import { getVaultPressData } from 'state/at-a-glance';
 import { hasConnectedOwner, isOfflineMode, connectUser } from 'state/connection';
-import { showBackups } from 'state/initial-state';
+import { getPartnerCoupon, showBackups } from 'state/initial-state';
 
 /**
  * Displays a card for Backups based on the props given.
@@ -102,6 +102,84 @@ class DashBackups extends Component {
 		} );
 	};
 
+	trackRedeemCouponButtonView = () => {
+		const { partnerCoupon } = this.props;
+
+		analytics.tracks.recordEvent( 'jetpack_wpa_aag_redeem_partner_coupon_button_view', {
+			feature: 'backups',
+			coupon_preset: partnerCoupon.preset,
+		} );
+	};
+
+	getJetpackBackupBanner() {
+		const { partnerCoupon, upgradeUrl, siteRawUrl, trackUpgradeButtonView } = this.props;
+
+		if ( this.props.hasConnectedOwner ) {
+			if ( partnerCoupon && 'jetpack_backup_daily' === partnerCoupon.product.slug ) {
+				const checkoutUrl = getRedirectUrl( 'jetpack-plugin-partner-coupon-checkout', {
+					path: partnerCoupon.product.slug,
+					site: siteRawUrl,
+					query: `coupon=${ partnerCoupon.coupon_code }`,
+				} );
+
+				return (
+					<JetpackBanner
+						callToAction={ __( 'Redeem', 'jetpack' ) }
+						title={ sprintf(
+							/* translators: %s: Name of a Jetpack product. */
+							__(
+								'Redeem your coupon and get started with %s for free the first year!',
+								'jetpack'
+							),
+							partnerCoupon.product.title
+						) }
+						disableHref="false"
+						href={ checkoutUrl }
+						eventFeature="backups"
+						path="dashboard"
+						eventProps={ {
+							type: 'redeem_partner_coupon',
+							coupon_preset: partnerCoupon.preset,
+						} }
+						plan={ getJetpackProductUpsellByFeature( FEATURE_SITE_BACKUPS_JETPACK ) }
+						trackBannerDisplay={ this.trackRedeemCouponButtonView }
+					/>
+				);
+			}
+
+			return (
+				<JetpackBanner
+					callToAction={ __( 'Upgrade', 'jetpack' ) }
+					title={ __(
+						'Never worry about losing your site – automatic backups keep your content safe.',
+						'jetpack'
+					) }
+					disableHref="false"
+					href={ upgradeUrl }
+					eventFeature="backups"
+					path="dashboard"
+					plan={ getJetpackProductUpsellByFeature( FEATURE_SITE_BACKUPS_JETPACK ) }
+					trackBannerDisplay={ trackUpgradeButtonView }
+				/>
+			);
+		}
+
+		return (
+			<JetpackBanner
+				callToAction={ __( 'Connect', 'jetpack' ) }
+				title={ __(
+					'Connect your WordPress.com account to upgrade and get automatic backups that keep your content safe.',
+					'jetpack'
+				) }
+				disableHref="false"
+				onClick={ this.props.connectUser }
+				eventFeature="backups"
+				path="dashboard"
+				plan={ getJetpackProductUpsellByFeature( FEATURE_SITE_BACKUPS_JETPACK ) }
+			/>
+		);
+	}
+
 	getVPContent() {
 		const {
 			sitePlan,
@@ -163,34 +241,7 @@ class DashBackups extends Component {
 			return renderCard( {
 				className: 'jp-dash-item__is-inactive',
 				status: 'no-pro-uninstalled-or-inactive',
-				overrideContent: this.props.hasConnectedOwner ? (
-					<JetpackBanner
-						callToAction={ __( 'Upgrade', 'jetpack' ) }
-						title={ __(
-							'Never worry about losing your site – automatic backups keep your content safe.',
-							'jetpack'
-						) }
-						disableHref="false"
-						href={ this.props.upgradeUrl }
-						eventFeature="backups"
-						path="dashboard"
-						plan={ getJetpackProductUpsellByFeature( FEATURE_SITE_BACKUPS_JETPACK ) }
-						trackBannerDisplay={ this.props.trackUpgradeButtonView }
-					/>
-				) : (
-					<JetpackBanner
-						callToAction={ __( 'Connect', 'jetpack' ) }
-						title={ __(
-							'Connect your WordPress.com account to upgrade and get automatic backups that keep your content safe.',
-							'jetpack'
-						) }
-						disableHref="false"
-						onClick={ this.props.connectUser }
-						eventFeature="backups"
-						path="dashboard"
-						plan={ getJetpackProductUpsellByFeature( FEATURE_SITE_BACKUPS_JETPACK ) }
-					/>
-				),
+				overrideContent: this.getJetpackBackupBanner(),
 			} );
 		}
 
@@ -334,6 +385,7 @@ export default connect(
 			hasConnectedOwner: hasConnectedOwner( state ),
 			isFetchingSite: isFetchingSiteData( state ),
 			hasBackupPlan: siteHasBackupPlan( state ),
+			partnerCoupon: getPartnerCoupon( state ),
 		};
 	},
 	dispatch => ( {

projects/plugins/jetpack/_inc/client/components/banner/index.jsx

@@ -33,6 +33,7 @@ class Banner extends Component {
 		currentVersion: PropTypes.string.isRequired,
 		description: PropTypes.node,
 		eventFeature: PropTypes.string,
+		eventProps: PropTypes.object,
 		feature: PropTypes.string, // PropTypes.oneOf( getValidFeatureKeys() ),
 		href: PropTypes.string,
 		icon: PropTypes.string,
@@ -50,6 +51,7 @@ class Banner extends Component {
 
 	static defaultProps = {
 		onClick: noop,
+		eventProps: {},
 	};
 
 	getHref() {
@@ -67,22 +69,23 @@ class Banner extends Component {
 	handleClick = () => {
 		this.props.onClick();
 
-		const { eventFeature, path, currentVersion } = this.props;
+		const { eventFeature, path, currentVersion, eventProps } = this.props;
 		if ( eventFeature || path ) {
 			const eventFeatureProp = eventFeature ? { feature: eventFeature } : {};
 			const pathProp = path ? { path } : {};
 
-			const eventProps = {
+			const clickEventProps = {
 				target: 'banner',
 				type: 'upgrade',
 				current_version: currentVersion,
 				is_user_wpcom_connected: this.props.isCurrentUserLinked ? 'yes' : 'no',
 				is_connection_owner: this.props.isConnectionOwner ? 'yes' : 'no',
 				...eventFeatureProp,
 				...pathProp,
+				...eventProps,
 			};
 
-			analytics.tracks.recordJetpackClick( eventProps );
+			analytics.tracks.recordJetpackClick( clickEventProps );
 		}
 	};
 

projects/plugins/jetpack/changelog/add-partner-coupon-variation-of-backup-banner-card

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+The Backup banner CTA on the At-a-Glance page will now be replaced with a "Redeem Coupon" CTA when a partner coupon is detected

projects/plugins/jetpack/to-test.md

@@ -35,4 +35,27 @@ We've fixed some issues with the Widget Visibility feature. Could you try the fo
 - Head to Appearance > Customize > Widgets and do the same thing.
 - Deactivate the Classic Widgets plugin, then head to Appearance > Widgets; you should see the Visibility button for legacy widgets, and the Visibility rules in the "Advanced" panel for each block.
 
+### At-a-glance Partner Coupon Redemption
+
+We've introduced a new callout to redeem a coupon that may have been provided by a partner.
+
+- Make sure Jetpack is activated and connected, has Jetpack Free as its plan, and has no other products.
+- Visit `/wp-admin/admin.php?page=jetpack#/dashboard` and confirm the Backup feature section shows what is visible in screenshot 1 below.
+- Visit `/wp-admin/?jetpack-partner-coupon=PARTNER_COUPON_CODE` to store a partner coupon code. Please reach out to team Avalon to get a coupon code.
+- Visit `/wp-admin/admin.php?page=jetpack#/dashboard` and confirm the Backup feature section shows what is visible in screenshot 2 below. Clicking on the Redeem button should redirect you to checkout with your partner coupon applied.
+- Purchase a product to your test site that provides backups.
+- Visit `/wp-admin/admin.php?page=jetpack#/dashboard` and confirm the Backup feature section shows what is visible in screenshot 3 below.
+
+Screenshot 1) No backup product, no partner coupon:
+
+![Screen Shot 2022-02-01 at 19 08 35](https://user-images.githubusercontent.com/22746396/152016113-1da5365c-3f54-40c9-b079-47e97767bd40.png)
+
+Screenshot 2) No backup product, partner coupon available:
+
+![Screen Shot 2022-02-01 at 19 03 52](https://user-images.githubusercontent.com/22746396/152016107-bf474b8b-2970-44f5-b11a-b5f997bb613c.png)
+
+Screenshot 3) Backup product active, partner coupon status is irrelevant:
+
+![Screen Shot 2022-02-01 at 18 57 18](https://user-images.githubusercontent.com/22746396/152016100-6fe4a8f5-4ac4-482e-9501-8ed7f216f592.png)
+
 **Thank you for all your help!**