Customer Home: Promote Free Photo Library (#39506)

Promotes the Free Photo Library in the Customer Home with a video demonstrating how to use it and a link to the support document on it

client/my-sites/customer-home/free-photo-library-card/index.jsx

@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import React, { Fragment, useState } from 'react';
+import { useTranslate } from 'i18n-calypso';
+import { Button, Card, Dialog } from '@automattic/components';
+import { isDesktop } from '@automattic/viewport';
+
+/**
+ * Internal dependencies
+ */
+import CardHeading from 'components/card-heading';
+import { localizeUrl } from 'lib/i18n-utils';
+
+/**
+ * Style dependencies
+ */
+import './style.scss';
+
+/**
+ * Image dependencies
+ */
+import freePhotoLibraryThumbnail from 'assets/images/customer-home/free-photo-library-thumbnail.png';
+import freePhotoLibraryVideoPrompt from 'assets/images/customer-home/free-photo-library-video-prompt.png';
+
+const FreePhotoLibraryCard = () => {
+	const [ showDialog, setShowDialog ] = useState( false );
+	const translate = useTranslate();
+
+	const toggleDialog = () => setShowDialog( ! showDialog );
+
+	return (
+		<Fragment>
+			<Dialog additionalClassNames="free-photo-library-card__dialog" isVisible={ showDialog }>
+				<video
+					className="free-photo-library-card__demonstration-video"
+					controls
+					muted
+					autoPlay
+					poster={ freePhotoLibraryThumbnail }
+				>
+					<source
+						src="https://wpcom.files.wordpress.com/2020/02/free-photo-library-demonstration.mp4"
+						type="video/mp4"
+					/>
+				</video>
+				<div className="free-photo-library-card__dialog-close">
+					<Button onClick={ toggleDialog }>{ translate( 'Close' ) }</Button>
+				</div>
+			</Dialog>
+			<Card className="free-photo-library-card">
+				{ isDesktop() && (
+					<button onClick={ toggleDialog }>
+						<img
+							className="free-photo-library-card__demonstration-image"
+							src={ freePhotoLibraryVideoPrompt }
+							alt={ translate( 'Free Photo Library demonstration' ) }
+						/>
+					</button>
+				) }
+				<CardHeading>{ translate( 'Over 40,000 Free Photos' ) }</CardHeading>
+				<p className="free-photo-library-card__text customer-home__card-subheader">
+					{ translate(
+						'The WordPress.com Free Photo Library integrates ' +
+							'your site with beautiful copyright-free photos to ' +
+							'create stunning designs.'
+					) }
+				</p>
+				<Button href={ localizeUrl( 'https://support.wordpress.com/free-photo-library/' ) }>
+					{ translate( 'Learn more' ) }
+				</Button>
+			</Card>
+		</Fragment>
+	);
+};
+
+export default FreePhotoLibraryCard;

client/my-sites/customer-home/free-photo-library-card/style.scss

@@ -0,0 +1,26 @@
+.free-photo-library-card {
+	.free-photo-library-card__demonstration-image {
+		cursor: pointer;
+		margin-bottom: 12px;
+		width: 100%;
+	}
+
+	.button {
+		float: right;
+	}
+}
+
+.free-photo-library-card__dialog-close {
+	margin-top: 12px;
+	text-align: right;
+}
+
+.free-photo-library-card__demonstration-video {
+	max-height: 600px;
+	max-width: 800px;
+	width: 100%;
+
+	&:focus {
+		outline: none;
+	}
+}

client/my-sites/customer-home/main.jsx

@@ -59,6 +59,7 @@ import QueryCanonicalTheme from 'components/data/query-canonical-theme';
 import GoMobileCard from 'my-sites/customer-home/go-mobile-card';
 import WelcomeBanner from './welcome-banner';
 import StatsCard from './stats-card';
+import FreePhotoLibraryCard from './free-photo-library-card';
 import isEligibleForDotcomChecklist from 'state/selectors/is-eligible-for-dotcom-checklist';
 
 /**
@@ -575,6 +576,7 @@ class Home extends Component {
 						</Card>
 					) }
 					{ ! siteIsUnlaunched && <StatsCard /> }
+					{ <FreePhotoLibraryCard /> }
 					{ ! siteIsUnlaunched && isChecklistComplete && (
 						<Card className="customer-home__grow-earn">
 							<CardHeading>{ translate( 'Grow & Earn' ) }</CardHeading>