Jetpack plugin: add Jetpack partner coupon banner on My Page

projects/plugins/jetpack/_inc/client/my-plan/index.jsx

@@ -20,6 +20,7 @@ import { getSiteConnectionStatus } from 'state/connection';
 
 import MyPlanHeader from './my-plan-header';
 import MyPlanBody from './my-plan-body';
+import MyPlanPartnerCoupon from './my-plan-partner-coupon';
 
 export function MyPlan( props ) {
 	let sitePlan = props.sitePlan.product_slug || '',
@@ -34,6 +35,7 @@ export function MyPlan( props ) {
 	return (
 		<React.Fragment>
 			<QuerySite />
+			<MyPlanPartnerCoupon siteRawUrl={ props.siteRawUrl } />
 			<MyPlanHeader
 				activeProducts={ props.activeProducts }
 				plan={ sitePlan }

projects/plugins/jetpack/_inc/client/my-plan/my-plan-banner/index.jsx

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import React, { useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import analytics from 'lib/analytics';
+import MyPlanCard from '../my-plan-card';
+import { imagePath } from 'constants/urls';
+
+/**
+ * Import styles
+ */
+import './style.scss';
+
+const MyPlanBanner = props => {
+	const { productSlug, action, title, tagLine, trackingId } = props;
+
+	useEffect( () => {
+		analytics.tracks.recordEvent( 'jetpack_my_plan_banner_view', {
+			type: trackingId,
+		} );
+	}, [ trackingId ] );
+
+	const trackActionClick = useCallback( () => {
+		analytics.tracks.recordJetpackClick( {
+			target: trackingId,
+			feature: 'my-plan-banner',
+			page: 'my-plan',
+		} );
+	}, [ trackingId ] );
+
+	return (
+		<div className="jp-my-plan-banner">
+			<div
+				className="jp-my-plan-banner__card dops-card"
+				style={ { backgroundImage: `url(${ imagePath }jetpack-banner-gradient.png)` } }
+			>
+				<MyPlanCard
+					productSlug={ productSlug }
+					action={ React.cloneElement( action, { onClick: trackActionClick } ) }
+					title={ title }
+					tagLine={ tagLine }
+				/>
+			</div>
+		</div>
+	);
+};
+
+MyPlanBanner.propTypes = {
+	productSlug: PropTypes.string.isRequired,
+	trackingId: PropTypes.string.isRequired,
+	action: PropTypes.element.isRequired,
+	tagLine: PropTypes.oneOfType( [ PropTypes.string, PropTypes.node, PropTypes.element ] ),
+	title: PropTypes.oneOfType( [ PropTypes.string, PropTypes.node, PropTypes.element ] ),
+};
+
+export default MyPlanBanner;

projects/plugins/jetpack/_inc/client/my-plan/my-plan-banner/style.scss

@@ -0,0 +1,17 @@
+@import '../../scss/calypso-colors';
+
+.jp-my-plan-banner__card {
+	background-color: $white;
+	background-position: 100%;
+	background-size: 50% 100%;
+	background-repeat: no-repeat;
+}
+
+.jp-my-plan-banner .my-plan-card__icon {
+	margin-top: 8px;
+	margin-bottom: 8px;
+}
+
+.jp-my-plan-banner .my-plan-card__header {
+	align-self: center;
+}

projects/plugins/jetpack/_inc/client/my-plan/my-plan-partner-coupon/index.jsx

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Button from 'components/button';
+import MyPlanBanner from '../my-plan-banner';
+import { getPartnerCoupon } from 'state/initial-state';
+
+const MyPlanPartnerCoupon = ( { partnerCoupon, siteRawUrl } ) => {
+	if ( 'object' !== typeof partnerCoupon ) {
+		return null;
+	}
+
+	const redeemButton = (
+		<Button
+			primary
+			href={ getRedirectUrl( 'jetpack-plugin-partner-coupon-checkout', {
+				path: partnerCoupon.product.slug,
+				site: siteRawUrl,
+				query: `coupon=${ partnerCoupon.coupon_code }`,
+			} ) }
+		>
+			{ __( 'Redeem', 'jetpack' ) }
+		</Button>
+	);
+
+	return (
+		<MyPlanBanner
+			productSlug={ partnerCoupon.product.slug }
+			action={ redeemButton }
+			title={ sprintf(
+				/* translators: %s: Jetpack product or plan name. */
+				__( 'Get %s free for one year!', 'jetpack' ),
+				partnerCoupon.product.title
+			) }
+			tagLine={ sprintf(
+				/* translators: %1$s: the name of a Jetpack partner, %2$s: the name of a Jetpack product or plan. */
+				__(
+					'Redeem your %1$s coupon to get started with %2$s for free the first year!',
+					'jetpack'
+				),
+				partnerCoupon.partner.name,
+				partnerCoupon.product.title
+			) }
+			trackingId="jetpack-partner-coupon"
+		/>
+	);
+};
+
+MyPlanPartnerCoupon.propTypes = {
+	partnerCoupon: PropTypes.oneOfType( [ PropTypes.object, PropTypes.bool ] ).isRequired,
+	siteRawUrl: PropTypes.string.isRequired,
+};
+
+export default connect( state => ( {
+	partnerCoupon: getPartnerCoupon( state ),
+} ) )( MyPlanPartnerCoupon );

projects/plugins/jetpack/changelog/add-my-plans-partner-coupon-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Added Jetpack Partner Coupon banner on My Plan page