Small UX fixes on UTM modal (#96248)

* normalize vertical spacing * add confirmation on copy * disable copy button when there is no url to copy
Automattic · Nov 12, 2024 · e240997 · e240997
1 parent b4fcf8a
commit e240997
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 15 deletions.
diff --git a/client/my-sites/stats/stats-module-utm-builder/stats-module-utm-builder-form.tsx b/client/my-sites/stats/stats-module-utm-builder/stats-module-utm-builder-form.tsx
@@ -1,4 +1,6 @@
 import { FormLabel } from '@automattic/components';
+import { Icon, check } from '@wordpress/icons';
+import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import React, { useEffect, useRef, useState } from 'react';
 import FormFieldset from 'calypso/components/forms/form-fieldset';
@@ -24,6 +26,56 @@ type UtmKeyType = ( typeof utmKeys )[ number ];
 type inputValuesType = Record< UtmKeyType, string >;
 type formLabelsType = Record< UtmKeyType, { label: string; placeholder: string } >;
 
+const useConfirmationMessage = ( visibleDuration = 2000, fadeOutDuration = 500 ) => {
+	const [ showConfirmation, setShowConfirmation ] = useState( false );
+	const [ fadeOut, setFadeOut ] = useState( false );
+	const timeoutRef = useRef< NodeJS.Timeout | null >( null );
+
+	useEffect( () => {
+		return () => {
+			if ( timeoutRef.current ) {
+				clearTimeout( timeoutRef.current );
+			}
+		};
+	}, [] );
+
+	const triggerConfirmation = () => {
+		if ( timeoutRef.current ) {
+			clearTimeout( timeoutRef.current );
+		}
+
+		setFadeOut( false );
+		setShowConfirmation( true );
+
+		timeoutRef.current = setTimeout( () => {
+			setFadeOut( true );
+
+			timeoutRef.current = setTimeout( () => {
+				setShowConfirmation( false );
+			}, fadeOutDuration );
+		}, visibleDuration );
+	};
+
+	return { showConfirmation, fadeOut, triggerConfirmation };
+};
+
+const CopyConfirmation = ( { show, fadeOut }: { show: boolean; fadeOut: boolean } ) => {
+	const translate = useTranslate();
+
+	return (
+		show && (
+			<div
+				className={ clsx( 'stats-utm-builder__copy-confirmation', {
+					'fade-out': fadeOut,
+				} ) }
+			>
+				<Icon size={ 24 } icon={ check } />
+				{ translate( 'Copied' ) }
+			</div>
+		)
+	);
+};
+
 const InputField: React.FC< InputFieldProps > = ( {
 	id,
 	label,
@@ -59,6 +111,7 @@ const UtmBuilder: React.FC = () => {
 	} );
 	// Focus the initial input field when rendered.
 	const initialInputReference = useRef< HTMLInputElement >( null );
+	const { showConfirmation, fadeOut, triggerConfirmation } = useConfirmationMessage();
 
 	useEffect( () => {
 		initialInputReference.current!.focus();
@@ -104,10 +157,17 @@ const UtmBuilder: React.FC = () => {
 				campaignString ? `${ url.includes( '?' ) ? '&' : '?' }${ campaignString }` : ''
 		  }`;
 
+	const handleCopy = () => {
+		if ( url ) {
+			navigator.clipboard.writeText( utmString );
+			triggerConfirmation();
+		}
+	};
+
 	return (
 		<>
 			<form onSubmit={ handleSubmit }>
-				<FormFieldset>
+				<FormFieldset className="stats-utm-builder__form-fieldset">
 					<InputField
 						id="url"
 						name="url"
@@ -135,14 +195,17 @@ const UtmBuilder: React.FC = () => {
 				<div className="stats-utm-builder__label">{ translate( 'Your URL to share' ) }</div>
 				<div className="stats-utm-builder__url">{ utmString }</div>
 			</div>
-			<StatsButton
-				primary
-				onClick={ () => {
-					navigator.clipboard.writeText( utmString );
-				} }
-			>
-				{ translate( 'Copy to clipboard' ) }
-			</StatsButton>
+			<div className="stats-utm-builder__copy-area">
+				<StatsButton
+					className="stats-utm-builder__copy-button"
+					primary
+					onClick={ handleCopy }
+					disabled={ ! url }
+				>
+					{ translate( 'Copy to clipboard' ) }
+				</StatsButton>
+				<CopyConfirmation show={ showConfirmation } fadeOut={ fadeOut } />
+			</div>
 		</>
 	);
 };

diff --git a/client/my-sites/stats/stats-module-utm-builder/style.scss b/client/my-sites/stats/stats-module-utm-builder/style.scss
@@ -39,15 +39,45 @@ $modal-content-padding: 32px;
 	flex: 1 0 55%;
 	padding: 0 32px 0 0;
 	width: 500px;
+	display: flex;
+	flex-direction: column;
+	gap: $stats-utm-builder-vertical-spacing;
 
 	@media (max-width: $break-small) {
 		padding: 0;
 		flex: 1 auto;
 	}
 }
 
+.stats-utm-builder__form-fieldset {
+	margin-bottom: 0;
+}
+
+.stats-utm-builder__copy-area {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.stats-utm-builder__copy-button {
+	align-self: baseline;
+}
+
+.stats-utm-builder__copy-confirmation {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	color: $studio-jetpack-green-50;
+	fill: $studio-jetpack-green-50;
+	opacity: 1;
+	transition: opacity 0.5s ease;
+
+	&.fade-out {
+		opacity: 0;
+	}
+}
+
 .stats-utm-builder__url {
-	margin: 8px 0;
 	background-color: $studio-gray-0;
 	border: 1px solid var(--color-neutral-10);
 	padding: 6px;
@@ -87,18 +117,18 @@ $modal-content-padding: 32px;
 	}
 }
 
-.stats-utm-builder__description {
-	padding: 0 0 $stats-utm-builder-vertical-spacing 0;
-}
-
 .stats-utm-builder__form-field {
-	margin-bottom: 12px;
 	max-width: 700px;
+
+	& + .stats-utm-builder__form-field {
+		margin-top: 12px;
+	}
 }
 
 .stats-utm-builder__label {
 	font-family: $font-sf-pro-text;
 	font-weight: 600;
+	margin-bottom: 5px;
 }
 
 .stats-utm-builder__help-section-parameter {