Sites Dashboard: Implement survey (#98218)

client/components/survey-modal/index.jsx

@@ -17,6 +17,7 @@ const SurveyModal = ( {
 	heading,
 	title,
 	surveyImage,
+	surveyImageAlt,
 	description,
 	dismissText,
 	confirmText,
@@ -90,22 +91,19 @@ const SurveyModal = ( {
 
 				{ surveyImage && (
 					<div className="modal-survey-notice__popup-img">
-						<img src={ surveyImage } alt={ heading } />
+						<img src={ surveyImage } alt={ heading || surveyImageAlt } />
 					</div>
 				) }
 
 				<div className="modal-survey-notice__popup-content">
 					{ title && <div className="modal-survey-notice__popup-content-title">{ title }</div> }
 					<div className="modal-survey-notice__popup-content-description">{ description }</div>
 					<div className="modal-survey-notice__popup-content-buttons">
-						<Button
-							className="modal-survey-notice__popup-content-buttons-cancel"
-							onClick={ onClose }
-						>
+						<Button variant="tertiary" onClick={ onClose }>
 							{ dismissText }
 						</Button>
 						<Button
-							className="modal-survey-notice__popup-content-buttons-ok"
+							variant="primary"
 							href={ href.toString() }
 							target="_blank"
 							rel="noopener noreferrer"
@@ -128,6 +126,7 @@ SurveyModal.propTypes = {
 	heading: PropTypes.string,
 	title: PropTypes.string,
 	surveyImage: PropTypes.string,
+	surveyImageAlt: PropTypes.string,
 	description: PropTypes.string.isRequired,
 	dismissText: PropTypes.string.isRequired,
 	confirmText: PropTypes.string.isRequired,

client/components/survey-modal/style.scss

@@ -1,7 +1,9 @@
+@import "@automattic/typography/styles/variables";
+
 .modal-survey-notice {
 	position: fixed;
-	left: 0;
-	top: 0;
+	inset-block-start: 0;
+	inset-inline-start: 0;
 	height: 100%;
 	width: 100%;
 	z-index: 1000;
@@ -10,23 +12,26 @@
 		background: var(--studio-black);
 		opacity: 0.2;
 		position: absolute;
-		left: 0;
-		top: 0;
+		inset-block-start: 0;
+		inset-inline-start: 0;
 		width: 100%;
 		height: 100%;
 		cursor: default;
 	}
 
-
 	.modal-survey-notice__popup {
 		position: absolute;
-		right: 25px;
-		bottom: 25px;
-		width: 416px;
+		inset-block-end: 32px;
+		inset-inline-end: 32px;
+		width: 430px;
 		max-width: calc(100% - 50px);
 		z-index: 2;
-		border-radius: 4px 4px 0 0;
-		box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.04), 0 3px 8px 0 rgba(0, 0, 0, 0.12);
+		border-radius: 8px; /* stylelint-disable-line scales/radii */
+		box-shadow:
+			0 5px 15px 0 rgba(0, 0, 0, 0.08),
+			0 15px 27px 0 rgba(0, 0, 0, 0.07),
+			0 30px 36px 0 rgba(0, 0, 0, 0.04),
+			0 50px 43px 0 rgba(0, 0, 0, 0.02);
 		overflow: hidden;
 
 		.modal-survey-notice__popup-head {
@@ -40,76 +45,62 @@
 
 			.modal-survey-notice__popup-head-title {
 				color: var(--studio-white);
-				font-size: rem(14px);
+				font-size: rem(13px);
 				font-weight: 500;
 				line-height: 20px;
-				letter-spacing: -0.15px;
 			}
-
 		}
 
 		.modal-survey-notice__popup-head-close svg {
 			fill: var(--studio-white);
 		}
 
 		> .modal-survey-notice__popup-head-close {
+			padding: 8px;
 			position: absolute;
-			right: 8px;
-			top: 8px;
+			inset-block-start: 4px;
+			inset-inline-end: 0;
+			z-index: 1;
 		}
 
 		.modal-survey-notice__popup-img {
-			background: #0675c4;
-			display: flex;
-			align-items: center;
-			justify-content: center;
+			background: var(--color-accent);
+			height: 270px;
+			overflow: hidden;
+			position: relative;
 
 			img {
-				width: 100%;
 				display: block;
+				inset-block-start: 42px;
+				inset-inline-start: 32px;
+				position: absolute;
+				width: 100%;
 			}
 		}
 
 		.modal-survey-notice__popup-content {
-			padding: 1rem;
+			padding: 24px 32px;
 			background: var(--studio-white);
 
 			.modal-survey-notice__popup-content-title {
-				font-size: rem(16px);
+				font-size: $font-title-small;
 				font-weight: 500;
 				line-height: 24px;
-				letter-spacing: -0.32px;
-				padding-bottom: 8px;
+				margin-bottom: 16px;
+				text-wrap: balance;
 			}
 
 			.modal-survey-notice__popup-content-description {
-				font-size: rem(14px);
+				font-size: rem(13px);
 				line-height: 20px;
-				letter-spacing: -0.15px;
-				padding-bottom: 18px;
+				margin-bottom: 16px;
+				text-wrap: pretty;
 			}
 
 			.modal-survey-notice__popup-content-buttons {
 				display: flex;
+				gap: 8px;
 				justify-content: flex-end;
-
-				.modal-survey-notice__popup-content-buttons-ok {
-					padding: 8px 14px;
-					background: var(--studio-blue-50);
-					color: var(--studio-white);
-					font-size: rem(14px);
-					line-height: 20px;
-					letter-spacing: -0.15px;
-				}
-
-				.modal-survey-notice__popup-content-buttons-cancel {
-					padding: 8px 14px;
-					color: var(--studio-blue-50);
-					text-align: center;
-					font-size: rem(14px);
-					line-height: 20px;
-					letter-spacing: -0.15px;
-				}
 			}
 		}
 	}

client/sites/components/sites-dashboard-survey/index.tsx

@@ -0,0 +1,42 @@
+import { isEnabled } from '@automattic/calypso-config';
+import { useIsEnglishLocale } from '@automattic/i18n-utils';
+import ReactDOM from 'react-dom';
+import SurveyModal from 'calypso/components/survey-modal';
+import { useSelector } from 'calypso/state';
+import { getCurrentUserId } from 'calypso/state/current-user/selectors';
+import { isEligibleForProductSampling } from 'calypso/utils';
+import surveySitesDashboardImage from './assets/images/survey-sites-dashboard.svg';
+
+const SitesDashboardSurvey = () => {
+	const isEnglishLocale = useIsEnglishLocale();
+	const userId = useSelector( getCurrentUserId );
+
+	const urlParams = new URLSearchParams( window.location.search );
+	const isEligibleSurvey =
+		isEnabled( 'sites/dashboard-survey' ) &&
+		isEnglishLocale &&
+		userId &&
+		( isEligibleForProductSampling( userId, 15 ) || urlParams.has( 'show_survey' ) );
+
+	if ( ! isEligibleSurvey ) {
+		return null;
+	}
+
+	return ReactDOM.createPortal(
+		<SurveyModal
+			name="survey-sites-dashboard"
+			eventName="calypso_survey_sites_dashboard"
+			title="Shape the Future of WordPress.com"
+			description="Got a minute? We’d love to get your feedback on some upcoming changes to the WordPress.com dashboard."
+			surveyImage={ surveySitesDashboardImage }
+			surveyImageAlt="WordPress.com dashboard"
+			url="https://wordpressdotcom.crowdsignal.net/wordpress-com-dashboard-feedback"
+			dismissText="No thanks"
+			confirmText="Take survey"
+			showOverlay={ false }
+		/>,
+		document.body
+	);
+};
+
+export default SitesDashboardSurvey;

client/sites/components/sites-dashboard.tsx

@@ -48,6 +48,7 @@ import { DOTCOM_OVERVIEW, FEATURE_TO_ROUTE_MAP, OVERVIEW } from './site-preview-
 import DotcomPreviewPane from './site-preview-pane/dotcom-preview-pane';
 import SitesDashboardBannersManager from './sites-dashboard-banners-manager';
 import SitesDashboardHeader from './sites-dashboard-header';
+import SitesDashboardSurvey from './sites-dashboard-survey';
 import DotcomSitesDataViews, { useSiteStatusGroups } from './sites-dataviews';
 import { getSitesPagination } from './sites-dataviews/utils';
 import type { View } from '@wordpress/dataviews';
@@ -451,6 +452,8 @@ const SitesDashboard = ( {
 					<GuidedTour defaultTourId="siteManagementTour" />
 				</GuidedTourContextProvider>
 			) }
+
+			<SitesDashboardSurvey />
 		</Layout>
 	);
 };

config/development.json

@@ -214,6 +214,7 @@
 		"signup/social-first": true,
 		"site-indicator": true,
 		"site-profiler/metrics": true,
+		"sites/dashboard-survey": true,
 		"ssr/prefetch-timebox": false,
 		"stats/empty-module-traffic": true,
 		"stats/empty-module-v2": true,

config/wpcalypso.json

@@ -178,6 +178,7 @@
 		"signup/social-first": true,
 		"site-indicator": true,
 		"site-profiler/metrics": true,
+		"sites/dashboard-survey": true,
 		"ssr/prefetch-timebox": true,
 		"stats/empty-module-traffic": true,
 		"stats/empty-module-v2": true,