Add payment activity widget emoji survey

changelog/add-8197-overview-survey

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add User Satisfaction Survey for Payments Overview Widget

client/components/payment-activity/index.tsx

@@ -4,19 +4,23 @@
 import * as React from 'react';
 import { Card, CardBody, CardHeader } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import interpolateComponents from '@automattic/interpolate-components';
 
 /**
  * Internal dependencies
  */
 
 import EmptyStateAsset from 'assets/images/payment-activity-empty-state.svg?asset';
-import interpolateComponents from '@automattic/interpolate-components';
 import PaymentActivityData from './payment-activity-data';
+import Survey from './survey';
+import { WcPayOverviewSurveyContextProvider } from './survey/context';
 import './style.scss';
 
 const PaymentActivity: React.FC = () => {
 	const { lifetimeTPV } = wcpaySettings;
 	const hasAtLeastOnePayment = lifetimeTPV > 0;
+	const isOverviewSurveySubmitted =
+		wcpaySettings.isOverviewSurveySubmitted ?? false;
 
 	return (
 		<Card>
@@ -50,6 +54,12 @@ const PaymentActivity: React.FC = () => {
 					</div>
 				) }
 			</CardBody>
+
+			{ ! isOverviewSurveySubmitted && hasAtLeastOnePayment && (
+				<WcPayOverviewSurveyContextProvider>
+					<Survey />
+				</WcPayOverviewSurveyContextProvider>
+			) }
 		</Card>
 	);
 };

client/components/payment-activity/survey/context.tsx

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import React, { createContext, useState, useCallback, useContext } from 'react';
+import apiFetch from '@wordpress/api-fetch';
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { NAMESPACE } from 'data/constants';
+import type { OverviewSurveyFields } from './types';
+
+type ResponseStatus = 'pending' | 'resolved' | 'error';
+
+const useContextValue = ( initialState: OverviewSurveyFields = {} ) => {
+	const [ surveySubmitted, setSurveySubmitted ] = useState( false );
+	const [ responseStatus, setResponseStatus ] = useState< ResponseStatus >(
+		'resolved'
+	);
+	const [ surveyAnswers, setSurveyAnswers ] = useState( initialState );
+
+	const { createErrorNotice } = useDispatch( 'core/notices' );
+
+	const submitSurvey = useCallback(
+		async ( answers: OverviewSurveyFields ) => {
+			setResponseStatus( 'pending' );
+			try {
+				await apiFetch( {
+					path: `${ NAMESPACE }/upe_survey/payments-overview`,
+					method: 'POST',
+					data: answers,
+				} );
+				setSurveySubmitted( true );
+				setResponseStatus( 'resolved' );
+			} catch ( e ) {
+				setResponseStatus( 'error' );
+				setSurveySubmitted( false );
+				createErrorNotice(
+					__(
+						'An error occurred while submitting the survey. Please try again.',
+						'woocommerce-payments'
+					)
+				);
+			}
+		},
+		[ setResponseStatus, setSurveySubmitted, createErrorNotice ]
+	);
+
+	return {
+		setSurveySubmitted: submitSurvey,
+		responseStatus,
+		surveySubmitted,
+		surveyAnswers,
+		setSurveyAnswers,
+	};
+};
+
+type ContextValue = ReturnType< typeof useContextValue >;
+
+const WcPayOverviewSurveyContext = createContext< ContextValue | null >( null );
+
+export const WcPayOverviewSurveyContextProvider: React.FC< {
+	initialData?: OverviewSurveyFields;
+} > = ( { children, initialData } ) => {
+	return (
+		<WcPayOverviewSurveyContext.Provider
+			value={ useContextValue( initialData ) }
+		>
+			{ children }
+		</WcPayOverviewSurveyContext.Provider>
+	);
+};
+
+export const useOverviewSurveyContext = (): ContextValue => {
+	const context = useContext( WcPayOverviewSurveyContext );
+	if ( ! context ) {
+		throw new Error( 'An error occurred when using survey context' );
+	}
+	return context;
+};
+
+export default WcPayOverviewSurveyContext;

client/components/payment-activity/survey/emoticon.tsx

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import type { Rating } from './types';
+
+const emoticons: Record< Rating, React.ReactElement > = {
+	'very-unhappy': <>&#128542;</>,
+	unhappy: <>&#129764;</>,
+	neutral: <>&#128529;</>,
+	happy: <>&#128578;</>,
+	'very-happy': <>&#128525;</>,
+};
+
+interface Props {
+	rating: Rating;
+	onClick: ( event: React.MouseEvent< HTMLButtonElement > ) => void;
+	disabled: boolean;
+	isSelected: boolean;
+}
+
+const Emoticon: React.FC< Props > = ( {
+	rating,
+	onClick,
+	disabled,
+	isSelected,
+} ) => {
+	return (
+		<button
+			disabled={ disabled }
+			type="button"
+			onClick={ onClick }
+			className={ classNames( 'components-button', 'has-icon', {
+				selected: isSelected,
+			} ) }
+		>
+			<span role="img" aria-label={ rating }>
+				{ emoticons[ rating ] }
+			</span>
+		</button>
+	);
+};
+
+export default Emoticon;

client/components/payment-activity/survey/index.tsx

@@ -0,0 +1,199 @@
+/** @format **/
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { HorizontalRule } from '@wordpress/primitives';
+import { Button, CardFooter, TextareaControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { createInterpolateElement, useState } from '@wordpress/element';
+import { Icon, closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies.
+ */
+import type { Rating } from './types';
+import { useOverviewSurveyContext } from './context';
+import Emoticon from './emoticon';
+import './style.scss';
+
+const Survey: React.FC = () => {
+	const {
+		responseStatus,
+		surveySubmitted,
+		surveyAnswers,
+		setSurveyAnswers,
+		setSurveySubmitted,
+	} = useOverviewSurveyContext();
+
+	const [ showComponent, setShowComponent ] = useState( true );
+
+	const currentRating = surveyAnswers.rating;
+	const ratingWithComment: Rating[] = [
+		'very-unhappy',
+		'unhappy',
+		'neutral',
+	];
+	const ratings: Rating[] = [
+		'very-unhappy',
+		'unhappy',
+		'neutral',
+		'happy',
+		'very-happy',
+	];
+	const showComment =
+		currentRating && ratingWithComment.includes( currentRating );
+	const disableForm = 'pending' === responseStatus;
+
+	const setReviewRating = function ( value?: Rating ) {
+		const answers = {
+			...surveyAnswers,
+			rating: value,
+		};
+		setSurveyAnswers( answers );
+
+		// If the user selects a rating that does not require a comment, submit the survey immediately.
+		if ( value && ! ratingWithComment.includes( value ) ) {
+			setSurveySubmitted( answers );
+		}
+	};
+
+	if ( ! showComponent ) {
+		return null;
+	}
+
+	if ( surveySubmitted ) {
+		return (
+			<CardFooter size="small">
+				<div className="wcpay-payments-activity__survey">
+					<div className="survey_container">
+						<span role="img" aria-label="Thank you!">
+							🙌
+						</span>
+						{ __(
+							'We appreciate your feedback!',
+							'woocommerce-payments'
+						) }
+					</div>
+
+					<div className="close_container">
+						<button
+							type="button"
+							className="components-button has-icon"
+							aria-label="Close dialog"
+							onClick={ () => {
+								setShowComponent( false );
+							} }
+						>
+							<Icon icon={ closeSmall } size={ 28 } />
+						</button>
+					</div>
+				</div>
+			</CardFooter>
+		);
+	}
+
+	return (
+		<CardFooter size="small">
+			<div className="wcpay-payments-activity__survey">
+				<div className="survey_container">
+					{ __(
+						'Are those metrics helpful?',
+						'woocommerce-payments'
+					) }
+
+					<div className="survey_container__emoticons">
+						{ ratings.map( ( rating ) => (
+							<Emoticon
+								key={ rating }
+								disabled={ disableForm }
+								rating={ rating }
+								onClick={ () => setReviewRating( rating ) }
+								isSelected={ rating === currentRating }
+							/>
+						) ) }
+					</div>
+				</div>
+
+				{ showComment && (
+					<>
+						<div className="close_container">
+							<button
+								type="button"
+								className="components-button has-icon"
+								aria-label="Close dialog"
+								onClick={ () => {
+									setReviewRating( undefined );
+								} }
+								disabled={ disableForm }
+							>
+								<Icon icon={ closeSmall } size={ 28 } />
+							</button>
+						</div>
+
+						<HorizontalRule />
+
+						<div className="comment_container">
+							<TextareaControl
+								label={ __(
+									'Why do you feel that way? (optional)',
+									'woocommerce-payments'
+								) }
+								onChange={ ( text ) => {
+									setSurveyAnswers( ( prev ) => ( {
+										...prev,
+										comments: text,
+									} ) );
+								} }
+								value={ surveyAnswers.comments ?? '' }
+								readOnly={ disableForm }
+							/>
+							<p className="comment_container__disclaimer">
+								{ createInterpolateElement(
+									__(
+										'Your feedback will be only be shared with WooCommerce and treated pursuant to our <a>privacy policy</a>.',
+										'woocommerce-payments'
+									),
+									{
+										a: (
+											// eslint-disable-next-line jsx-a11y/anchor-has-content
+											<a
+												href="https://automattic.com/privacy/"
+												target="_blank"
+												rel="noreferrer"
+											/>
+										),
+									}
+								) }
+							</p>
+						</div>
+
+						<div className="wcpay-confirmation-modal__footer">
+							<Button
+								variant={ 'tertiary' }
+								disabled={ disableForm }
+								onClick={ () => {
+									setReviewRating( undefined );
+								} }
+							>
+								{ __( 'Cancel', 'woocommerce-payments' ) }
+							</Button>
+							<Button
+								variant={ 'primary' }
+								isBusy={ disableForm }
+								disabled={ disableForm }
+								onClick={ () =>
+									setSurveySubmitted( surveyAnswers )
+								}
+							>
+								{ __( 'Send', 'woocommerce-payments' ) }
+							</Button>
+						</div>
+					</>
+				) }
+			</div>
+		</CardFooter>
+	);
+};
+export default Survey;