diff --git a/client/components/date-format-notice/index.tsx b/client/components/date-format-notice/index.tsx index d7ded4fc1d5..45545d2f88e 100644 --- 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 ( - 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 + ), - 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' - ) } - + } ) } + ); }; diff --git a/client/overview/index.js b/client/overview/index.js index edb215993c7..0d56ad70893 100644 --- 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 && ( + { showTaskList && ( diff --git a/client/transactions/index.tsx b/client/transactions/index.tsx index 9350404a89e..507a972cd5a 100644 --- 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 ( - ) } + +
+
+
+
+ + + + + +
+
+ The date and time formats now match your preferences. You can update them anytime in the + + settings + + . +
+
+
+
+ +
+
+
+
+
+ + + + + +
+
+ The date and time formats now match your preferences. You can update them anytime in the + + settings + + . +
+
+
+
+ +
+
+
+
+
+ + + + + +
+
+ The date and time formats now match your preferences. You can update them anytime in the + + settings + + . +
+
+
+
+ +
+
+
+
+
+ + + + + +
+
+ The date and time formats now match your preferences. You can update them anytime in the + + settings + + . +
+
+
+
+ +
+
+
+
+
+ + + + + +
+
+ The date and time formats now match your preferences. You can update them anytime in the + + settings + + . +
+
+
+
+ +
+
+
+
+
+ + + + + +
+
+ The date and time formats now match your preferences. You can update them anytime in the + + settings + + . +
+
+
+
+ +