[Jetpack App Migration] Update App Banner Branding (#67013)

This PR updates the app banners that are displayed in the Reader, Notifications, Stats, and editor via the mobile web. References to the WordPress app are updated to Jetpack, and the opportunity has also been taken to update the banner's design.
Automattic · Sep 5, 2022 · d093244 · d093244
1 parent f64034f
commit d093244
Show file tree

Hide file tree

Showing 14 changed files with 9,719 additions and 13 deletions.
diff --git a/client/blocks/app-banner/index.jsx b/client/blocks/app-banner/index.jsx
@@ -1,9 +1,12 @@
+import config from '@automattic/calypso-config';
 import { Button, Card } from '@automattic/components';
+import { compose } from '@wordpress/compose';
 import classNames from 'classnames';
-import { localize } from 'i18n-calypso';
+import { localize, withRtl } from 'i18n-calypso';
 import { get } from 'lodash';
+import lottie from 'lottie-web/build/player/lottie_light';
 import PropTypes from 'prop-types';
-import { Component } from 'react';
+import { Component, useEffect } from 'react';
 import ReactDom from 'react-dom';
 import { connect } from 'react-redux';
 import TrackComponentView from 'calypso/lib/analytics/track-component-view';
@@ -121,16 +124,22 @@ export class AppBanner extends Component {
 		const { currentRoute, currentSection } = this.props;
 
 		if ( this.isAndroid() ) {
+			const displayJetpackAppBranding = config.isEnabled( 'jetpack/app-branding' );
+			const scheme = displayJetpackAppBranding ? 'jetpack' : 'wordpress';
+			const packageName = displayJetpackAppBranding
+				? 'com.jetpack.android'
+				: 'org.wordpress.android';
+
 			//TODO: update when section deep links are available.
 			switch ( currentSection ) {
 				case GUTENBERG:
-					return 'intent://post/#Intent;scheme=wordpress;package=org.wordpress.android;end';
+					return `intent://post/#Intent;scheme=${ scheme };package=${ packageName };end`;
 				case NOTES:
-					return 'intent://notifications/#Intent;scheme=wordpress;package=org.wordpress.android;end';
+					return `intent://notifications/#Intent;scheme=${ scheme };package=${ packageName };end`;
 				case READER:
-					return 'intent://read/#Intent;scheme=wordpress;package=org.wordpress.android;end';
+					return `intent://read/#Intent;scheme=${ scheme };package=${ packageName };end`;
 				case STATS:
-					return 'intent://stats/#Intent;scheme=wordpress;package=org.wordpress.android;end';
+					return `intent://stats/#Intent;scheme=${ scheme };package=${ packageName };end`;
 			}
 		}
 
@@ -141,12 +150,51 @@ export class AppBanner extends Component {
 		return null;
 	}
 
-	render() {
-		const { translate, currentSection } = this.props;
-		if ( ! this.props.shouldDisplayAppBanner || this.state.isDraftPostModalShown ) {
-			return null;
-		}
+	getJetpackAppBanner = ( { translate, currentSection, isRtl } ) => {
+		const { title, copy, icon } = getAppBannerData( translate, currentSection, isRtl );
 
+		return (
+			<div className={ classNames( 'app-banner-overlay' ) } ref={ this.preventNotificationsClose }>
+				<Card
+					className={ classNames( 'app-banner', 'is-compact', currentSection, 'jetpack' ) }
+					ref={ this.preventNotificationsClose }
+				>
+					<TrackComponentView
+						eventName="calypso_mobile_app_banner_impression"
+						eventProperties={ {
+							page: currentSection,
+						} }
+						statGroup="calypso_mobile_app_banner"
+						statName="impression"
+					/>
+					<BannerIcon icon={ icon } />
+					<div className="app-banner__text-content jetpack">
+						<div className="app-banner__title jetpack">
+							<span> { title } </span>
+						</div>
+						<div className="app-banner__copy jetpack">
+							<span> { copy } </span>
+						</div>
+					</div>
+					<div className="app-banner__buttons jetpack">
+						<Button
+							primary
+							className="app-banner__open-button jetpack"
+							onClick={ this.openApp }
+							href={ this.getDeepLink() }
+						>
+							{ translate( 'Open in the Jetpack app' ) }
+						</Button>
+						<Button className="app-banner__no-thanks-button jetpack" onClick={ this.dismiss }>
+							{ translate( 'Continue in browser' ) }
+						</Button>
+					</div>
+				</Card>
+			</div>
+		);
+	};
+
+	getWordpressAppBanner = ( { translate, currentSection } ) => {
 		const { title, copy } = getAppBannerData( translate, currentSection );
 
 		return (
@@ -190,9 +238,36 @@ export class AppBanner extends Component {
 				</Card>
 			</div>
 		);
+	};
+
+	render() {
+		if ( ! this.props.shouldDisplayAppBanner || this.state.isDraftPostModalShown ) {
+			return null;
+		}
+
+		const displayJetpackAppBranding = config.isEnabled( 'jetpack/app-branding' );
+
+		return displayJetpackAppBranding
+			? this.getJetpackAppBanner( this.props )
+			: this.getWordpressAppBanner( this.props );
 	}
 }
 
+function BannerIcon( { icon } ) {
+	useEffect( () => {
+		const animation = lottie.loadAnimation( {
+			container: document.querySelector( '.app-banner__icon' ),
+			renderer: 'svg',
+			loop: false,
+			autoplay: true,
+			path: icon,
+		} );
+		return () => animation.destroy();
+	}, [ icon ] );
+
+	return <div className="app-banner__icon"></div>;
+}
+
 export function getiOSDeepLink( currentRoute, currentSection ) {
 	const baseURI = 'https://apps.wordpress.com/get?campaign=calypso-open-in-app';
 	const fragment = buildDeepLinkFragment( currentRoute, currentSection );
@@ -274,4 +349,8 @@ const mapDispatchToProps = {
 	dismissAppBanner,
 };
 
-export default connect( mapStateToProps, mapDispatchToProps )( localize( AppBanner ) );
+export default compose(
+	connect( mapStateToProps, mapDispatchToProps ),
+	withRtl,
+	localize
+)( AppBanner );
diff --git a/client/blocks/app-banner/style.scss b/client/blocks/app-banner/style.scss
@@ -30,6 +30,12 @@ body.app-banner-is-visible {
 	margin-bottom: 0;
 	box-shadow: 3px -2px 24px 4px rgba( 0, 0, 0, 0.29 );
 	overflow: hidden;
+
+	&.jetpack {
+		color: var( --color-neutral-100 );
+		padding: 30px 24px;
+		text-align: center;
+	}
 }
 
 .app-banner__circle {
@@ -63,21 +69,50 @@ body.app-banner-is-visible {
 	}
 }
 
+.app-banner__icon {
+	height: 50px;
+	width: 93px;
+	margin: auto;
+}
+
 .app-banner__text-content {
 	width: 100%;
+
+	&.jetpack {
+		letter-spacing: -0.4px;
+		margin: 30px auto 0;
+	}
 }
 
 .app-banner__title {
 	/* stylelint-disable-next-line */
 	font-size: rem( 22px ); //typography-exception
 	font-family: $brand-serif;
 	line-height: 30px;
+
+	&.jetpack {
+		/* stylelint-disable-next-line */
+		font-size: rem( 28px ); //typography-exception
+		font-weight: bold;
+		max-width: 18em;
+		margin-left: auto;
+		margin-right: auto;
+	}
 }
 
 .app-banner__copy {
 	margin-top: 12px;
 	/* stylelint-disable-next-line */
 	font-size: rem( 15px ); //typography-exception
+
+	&.jetpack {
+		/* stylelint-disable-next-line */
+		font-size: rem( 16px ); //typography-exception
+		line-height: 21px;
+		max-width: 18em;
+		margin-left: auto;
+		margin-right: auto;
+	}
 }
 
 .app-banner__buttons {
@@ -90,10 +125,25 @@ body.app-banner-is-visible {
 	border: 0;
 	border-radius: 4px; /* stylelint-disable-line */
 	margin-right: 10px;
+
+	&.jetpack {
+		background-color: var( --color-jetpack );
+	}
 }
 
 .button.app-banner__no-thanks-button {
 	background: none;
 	border: 0;
 	color: var( --color-text-subtle );
+
+	&.jetpack {
+		color: var( --color-text );
+	}
+}
+
+.button.jetpack {
+	width: 100%;
+	max-width: 366px;
+	margin: auto;
+	display: block;
 }
diff --git a/client/blocks/app-banner/utils.js b/client/blocks/app-banner/utils.js
@@ -13,36 +13,41 @@ export const ONE_MONTH_IN_MILLISECONDS = 2419200000; // 28 days
 export const TWO_WEEKS_IN_MILLISECONDS = 1209600000;
 export const ONE_DAY_IN_MILLISECONDS = 86400000;
 
-export function getAppBannerData( translate, sectionName ) {
+export function getAppBannerData( translate, sectionName, isRTL ) {
 	switch ( sectionName ) {
 		case GUTENBERG:
 			return {
 				title: translate( 'Rich mobile publishing.' ),
 				copy: translate(
 					'A streamlined editor with faster, simpler image uploading? Check and mate.'
 				),
+				icon: `/calypso/animations/app-promo/wp-to-jp${ isRTL ? '-rtl' : '' }.json`,
 			};
 		case NOTES:
 			return {
 				title: translate( 'Watch engagement happening.' ),
 				copy: translate(
 					'Is your new post a hit? With push notifications, see reactions as they roll in.'
 				),
+				icon: `/calypso/animations/app-promo/jp-notifications${ isRTL ? '-rtl' : '' }.json`,
 			};
 		case READER:
 			return {
 				title: translate( 'Read posts, even offline.' ),
 				copy: translate( 'Catch up with new posts on the go or save them to read offline.' ),
+				icon: `/calypso/animations/app-promo/jp-reader${ isRTL ? '-rtl' : '' }.json`,
 			};
 		case STATS:
 			return {
 				title: translate( 'Stats at your fingertips.' ),
 				copy: translate( 'See your real-time stats anytime, anywhere.' ),
+				icon: `/calypso/animations/app-promo/jp-stats${ isRTL ? '-rtl' : '' }.json`,
 			};
 		default:
 			return {
 				title: '',
 				copy: '',
+				icon: '',
 			};
 	}
 }

diff --git a/package.json b/package.json
@@ -191,6 +191,7 @@
 		"i18n-calypso": "workspace:^",
 		"i18n-calypso-cli": "workspace:^",
 		"lodash": "^4.17.21",
+		"lottie-web": "^5.9.6",
 		"photon": "workspace:^",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
@@ -247,6 +248,7 @@
 		"gzip-size": "^6.0.0",
 		"husky": "^7.0.4",
 		"jest": "^27.3.1",
+		"jest-canvas-mock": "^2.4.0",
 		"jest-environment-jsdom": "^27.3.1",
 		"jest-teamcity": "^1.9.0",
 		"loader-utils": "^1.2.3",