diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/backups.jsx b/projects/plugins/jetpack/_inc/client/at-a-glance/backups.jsx
index cbca7ecd8d003..776e54c546b3c 100644
--- a/projects/plugins/jetpack/_inc/client/at-a-glance/backups.jsx
+++ b/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 (
+
+ );
+ }
+
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+ }
+
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 ? (
-
- ) : (
-
- ),
+ overrideContent: this.getJetpackBackupBanner(),
} );
}
@@ -334,6 +385,7 @@ export default connect(
hasConnectedOwner: hasConnectedOwner( state ),
isFetchingSite: isFetchingSiteData( state ),
hasBackupPlan: siteHasBackupPlan( state ),
+ partnerCoupon: getPartnerCoupon( state ),
};
},
dispatch => ( {
diff --git a/projects/plugins/jetpack/_inc/client/components/banner/index.jsx b/projects/plugins/jetpack/_inc/client/components/banner/index.jsx
index 56ac78f103090..824591392a97b 100644
--- a/projects/plugins/jetpack/_inc/client/components/banner/index.jsx
+++ b/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,12 +69,12 @@ 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,
@@ -80,9 +82,10 @@ class Banner extends Component {
is_connection_owner: this.props.isConnectionOwner ? 'yes' : 'no',
...eventFeatureProp,
...pathProp,
+ ...eventProps,
};
- analytics.tracks.recordJetpackClick( eventProps );
+ analytics.tracks.recordJetpackClick( clickEventProps );
}
};
diff --git a/projects/plugins/jetpack/changelog/add-partner-coupon-variation-of-backup-banner-card b/projects/plugins/jetpack/changelog/add-partner-coupon-variation-of-backup-banner-card
new file mode 100644
index 0000000000000..5043a69212e6f
--- /dev/null
+++ b/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
diff --git a/projects/plugins/jetpack/to-test.md b/projects/plugins/jetpack/to-test.md
index 4cc713b368232..ae2046649fdd7 100644
--- a/projects/plugins/jetpack/to-test.md
+++ b/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:
+
+
+
+Screenshot 2) No backup product, partner coupon available:
+
+
+
+Screenshot 3) Backup product active, partner coupon status is irrelevant:
+
+
+
**Thank you for all your help!**