[Jetpack App Migration] Update App Banner Branding

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 );

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;
 }

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: '',
 			};
 	}
 }

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",
@@ -246,6 +247,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",