Initial implementation of notice in transactions list and overview page

Automattic · Dec 4, 2024 · 0086c7c · 0086c7c
1 parent d167e34
commit 0086c7c
Show file tree

Hide file tree

Showing 5 changed files with 465 additions and 20 deletions.
diff --git a/client/components/date-format-notice/index.tsx b/client/components/date-format-notice/index.tsx
@@ -3,39 +3,62 @@
  */
 import React, { useState } from 'react';
 import { __ } from '@wordpress/i18n';
+import interpolateComponents from '@automattic/interpolate-components';
 
 /**
  * Internal dependencies
  */
-import BannerNotice from 'components/banner-notice';
+import InlineNotice from 'components/inline-notice';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const STORAGE_KEY = 'wcpay_date_format_notice_dismissed';
 
 const DateFormatNotice: React.FC = () => {
-	const [ isBannerVisible, setIsBannerVisible ] = useState( true );
+	const [ isNoticeVisible, setIsNoticeVisible ] = useState( () => {
+		// Initialize state from localStorage
+		return localStorage.getItem( STORAGE_KEY ) !== 'true';
+	} );
+
+	const handleDismiss = () => {
+		setIsNoticeVisible( false );
+		localStorage.setItem( STORAGE_KEY, 'true' );
+	};
+
+	const handleSettingsClick = () => {
+		// Optionally dismiss the notice when clicking settings
+		handleDismiss();
+	};
 
-	if ( ! isBannerVisible ) {
+	if ( ! isNoticeVisible ) {
 		return null;
 	}
 
 	return (
-		<BannerNotice
+		<InlineNotice
 			status="info"
+			icon={ true }
 			isDismissible={ true }
-			onRemove={ () => setIsBannerVisible( false ) }
-			actions={ [
-				{
-					label: __(
-						'Configure date settings',
-						'woocommerce-payments'
+			onRemove={ handleDismiss }
+		>
+			{ interpolateComponents( {
+				mixedString: __(
+					'The date and time formats now match your preferences. You can update them anytime in the {{settingsLink}}settings{{/settingsLink}}.',
+					'woocommerce-payments'
+				),
+				components: {
+					settingsLink: (
+						// eslint-disable-next-line jsx-a11y/anchor-has-content
+						<a
+							title={ __( 'Settings', 'woocommerce-payments' ) }
+							href="/wp-admin/options-general.php"
+							target="_blank"
+							rel="noreferrer"
+							onClick={ handleSettingsClick }
+						/>
 					),
-					url: '/wp-admin/options-general.php',
 				},
-			] }
-		>
-			{ __(
-				'The date and time formats now follow your preferences. You can customize these formats in the settings.',
-				'woocommerce-payments'
-			) }
-		</BannerNotice>
+			} ) }
+		</InlineNotice>
 	);
 };
 

diff --git a/client/overview/index.js b/client/overview/index.js
@@ -33,6 +33,7 @@ import SandboxModeSwitchToLiveNotice from 'wcpay/components/sandbox-mode-switch-
 import './style.scss';
 import BannerNotice from 'wcpay/components/banner-notice';
 import { PayoutsRenameNotice } from 'wcpay/deposits/rename-notice';
+import DateFormatNotice from 'wcpay/components/date-format-notice';
 
 const OverviewPageError = () => {
 	const queryParams = getQuery();
@@ -196,6 +197,7 @@ const OverviewPage = () => {
 			{ ! accountRejected && ! accountUnderReview && (
 				<ErrorBoundary>
 					<PayoutsRenameNotice />
+					<DateFormatNotice />
 					<Welcome />
 
 					{ showTaskList && (

diff --git a/client/transactions/index.tsx b/client/transactions/index.tsx
@@ -23,7 +23,6 @@ import {
 } from 'wcpay/data';
 import WCPaySettingsContext from '../settings/wcpay-settings-context';
 import BlockedList from './blocked';
-import DateFormatNotice from 'components/date-format-notice';
 
 declare const window: any;
 
@@ -108,7 +107,6 @@ export const TransactionsPage: React.FC = () => {
 	return (
 		<Page className="wcpay-transactions-page">
 			<TestModeNotice currentPage="transactions" />
-			<DateFormatNotice />
 			<TabPanel
 				activeClass="active-tab"
 				onSelect={ onTabSelected }

diff --git a/client/transactions/list/index.tsx b/client/transactions/list/index.tsx
@@ -69,6 +69,7 @@ import { HoverTooltip } from 'components/tooltip';
 import { PAYMENT_METHOD_TITLES } from 'wcpay/constants/payment-method';
 import { ReportingExportLanguageHook } from 'wcpay/settings/reporting-settings/interfaces';
 import { formatDateTimeFromString } from 'wcpay/utils/date-time';
+import DateFormatNotice from 'wcpay/components/date-format-notice';
 
 interface TransactionsListProps {
 	depositId?: string;
@@ -834,6 +835,7 @@ export const TransactionsList = (
 					customerCurrencies={ customerCurrencies }
 				/>
 			) }
+			<DateFormatNotice />
 			<TableCard
 				className="transactions-list woocommerce-report-table has-search"
 				title={ title }