Apply User-Defined Date Formatting Settings to WP Admin React Components

changelog/fix-6567-user-set-date-and-time-formatting-arent-respected-in-react-components

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Apply User-Defined Date Formatting Settings to WP Admin React Components

client/capital/index.tsx

@@ -6,7 +6,6 @@
 import * as React from 'react';
 import { __, _n } from '@wordpress/i18n';
 import { TableCard } from '@woocommerce/components';
-import { dateI18n } from '@wordpress/date';
 
 /**
  * Internal dependencies.
@@ -25,6 +24,8 @@ import Chip from 'components/chip';
 import { useLoans } from 'wcpay/data';
 import { getAdminUrl } from 'wcpay/utils';
 import './style.scss';
+import { formatDateTimeFromString } from 'wcpay/utils/date-time';
+import DateFormatNotice from 'wcpay/components/date-format-notice';
 
 const columns = [
 	{
@@ -80,7 +81,7 @@ const getLoanStatusText = ( loan: CapitalLoan ) => {
 	return loan.fully_paid_at
 		? __( 'Paid off', 'woocommerce-payments' ) +
 				': ' +
-				dateI18n( 'M j, Y', loan.fully_paid_at )
+				formatDateTimeFromString( loan.fully_paid_at )
 		: __( 'Active', 'woocommerce-payments' );
 };
 
@@ -112,7 +113,9 @@ const getRowsData = ( loans: CapitalLoan[] ) =>
 		const data = {
 			paid_out_at: {
 				value: loan.paid_out_at,
-				display: clickable( dateI18n( 'M j, Y', loan.paid_out_at ) ),
+				display: clickable(
+					formatDateTimeFromString( loan.paid_out_at )
+				),
 			},
 			status: {
 				value: getLoanStatusText( loan ),
@@ -150,7 +153,7 @@ const getRowsData = ( loans: CapitalLoan[] ) =>
 				value: loan.first_paydown_at,
 				display: clickable(
 					loan.first_paydown_at
-						? dateI18n( 'M j, Y', loan.first_paydown_at )
+						? formatDateTimeFromString( loan.first_paydown_at )
 						: '-'
 				),
 			},
@@ -207,6 +210,7 @@ const CapitalPage = (): JSX.Element => {
 
 	return (
 		<Page>
+			<DateFormatNotice />
 			<TestModeNotice currentPage="loans" />
 
 			{ wcpaySettings.accountLoans.has_active_loan && (

client/capital/test/__snapshots__/index.test.tsx.snap

@@ -5,6 +5,54 @@ exports[`CapitalPage renders the TableCard component with loan data 1`] = `
   <div
     class=" woocommerce-payments-page"
   >
+    <div
+      class="date-format-notice wcpay-banner-notice is-info"
+    >
+      <svg
+        aria-hidden="true"
+        class="wcpay-banner-notice__icon"
+        focusable="false"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z"
+        />
+      </svg>
+      <div
+        class="wcpay-banner-notice__content"
+      >
+        The date and time formats now match your preferences. You can update them anytime in the 
+        <a
+          data-link-type="external"
+          href="/wp-admin/options-general.php"
+        >
+          settings
+        </a>
+        .
+      </div>
+      <button
+        aria-label="Dismiss this notice"
+        class="components-button wcpay-banner-notice__dismiss has-icon"
+        type="button"
+      >
+        <svg
+          class="gridicon gridicons-cross-small"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g>
+            <path
+              d="M17.705 7.705l-1.41-1.41L12 10.59 7.705 6.295l-1.41 1.41L10.59 12l-4.295 4.295 1.41 1.41L12 13.41l4.295 4.295 1.41-1.41L13.41 12l4.295-4.295z"
+            />
+          </g>
+        </svg>
+      </button>
+    </div>
     <div
       class="wcpay-banner-notice is-warning"
     >

client/capital/test/index.test.tsx

@@ -25,6 +25,7 @@ declare const global: {
 		accountLoans: {
 			has_active_loan: boolean;
 		};
+		dateFormat: string;
 	};
 };
 
@@ -37,6 +38,7 @@ describe( 'CapitalPage', () => {
 			},
 			accountLoans: { has_active_loan: true },
 			testMode: true,
+			dateFormat: 'M j, Y',
 		};
 	} );
 

client/components/account-status/account-fees/expiration-description.js

@@ -4,13 +4,12 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { dateI18n } from '@wordpress/date';
-import moment from 'moment';
 
 /**
  * Internal dependencies
  */
 import { formatCurrency } from 'multi-currency/interface/functions';
+import { formatDateTimeFromString } from 'wcpay/utils/date-time';
 
 const ExpirationDescription = ( {
 	feeData: { volume_allowance: volumeAllowance, end_time: endTime, ...rest },
@@ -26,7 +25,7 @@ const ExpirationDescription = ( {
 				'woocommerce-payments'
 			),
 			formatCurrency( volumeAllowance, currencyCode ),
-			dateI18n( 'F j, Y', moment( endTime ).toISOString() )
+			formatDateTimeFromString( endTime )
 		);
 	} else if ( volumeAllowance ) {
 		description = sprintf(
@@ -44,7 +43,7 @@ const ExpirationDescription = ( {
 				'Discounted base fee expires on %1$s.',
 				'woocommerce-payments'
 			),
-			dateI18n( 'F j, Y', moment( endTime ).toISOString() )
+			formatDateTimeFromString( endTime )
 		);
 	} else {
 		return null;

client/components/account-status/account-fees/test/index.js

@@ -46,6 +46,7 @@ describe( 'AccountFees', () => {
 					precision: 2,
 				},
 			},
+			dateFormat: 'F j, Y',
 		};
 	} );
 

client/components/active-loan-summary/index.tsx

@@ -13,7 +13,6 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { dateI18n } from '@wordpress/date';
 
 /**
  * Internal dependencies.
@@ -24,6 +23,7 @@ import { useActiveLoanSummary } from 'wcpay/data';
 import { getAdminUrl } from 'wcpay/utils';
 
 import './style.scss';
+import { formatDateTimeFromTimestamp } from 'wcpay/utils/date-time';
 
 const Block = ( {
 	title,
@@ -210,12 +210,8 @@ const ActiveLoanSummary = (): JSX.Element => {
 								'Repaid this period (until %s)',
 								'woocommerce-payments'
 							),
-							dateI18n(
-								'M j, Y',
-								new Date(
-									details.current_repayment_interval.due_at *
-										1000
-								)
+							formatDateTimeFromTimestamp(
+								details.current_repayment_interval.due_at
 							)
 						) }
 					>
@@ -251,9 +247,8 @@ const ActiveLoanSummary = (): JSX.Element => {
 					<Block
 						title={ __( 'Loan disbursed', 'woocommerce-payments' ) }
 					>
-						{ dateI18n(
-							'M j, Y',
-							new Date( details.advance_paid_out_at * 1000 )
+						{ formatDateTimeFromTimestamp(
+							details.advance_paid_out_at
 						) }
 					</Block>
 					<Block
@@ -278,9 +273,8 @@ const ActiveLoanSummary = (): JSX.Element => {
 					<Block
 						title={ __( 'First paydown', 'woocommerce-payments' ) }
 					>
-						{ dateI18n(
-							'M j, Y',
-							new Date( details.repayments_begin_at * 1000 )
+						{ formatDateTimeFromTimestamp(
+							details.repayments_begin_at
 						) }
 					</Block>
 				</Flex>

client/components/active-loan-summary/test/__snapshots__/index.js.snap

@@ -74,7 +74,7 @@ exports[`Active loan summary renders correctly 1`] = `
             <div
               class="wcpay-loan-summary-block__title"
             >
-              Repaid this period (until Feb 14, 2022)
+              Repaid this period (until Feb 15, 2022)
             </div>
             <div
               class="wcpay-loan-summary-block__value"

client/components/active-loan-summary/test/index.js

@@ -14,6 +14,15 @@ jest.mock( 'wcpay/data', () => ( {
 	useActiveLoanSummary: jest.fn(),
 } ) );
 
+// Mock dateI18n
+jest.mock( '@wordpress/date', () => ( {
+	dateI18n: jest.fn( ( format, date ) => {
+		return jest
+			.requireActual( '@wordpress/date' )
+			.dateI18n( format, date, 'UTC' ); // Ensure UTC is used
+	} ),
+} ) );
+
 describe( 'Active loan summary', () => {
 	beforeEach( () => {
 		global.wcpaySettings = {
@@ -34,6 +43,7 @@ describe( 'Active loan summary', () => {
 					precision: 2,
 				},
 			},
+			dateFormat: 'M j, Y',
 		};
 	} );
 	afterEach( () => {

client/components/date-format-notice/index.tsx

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BannerNotice from 'components/banner-notice';
+import interpolateComponents from '@automattic/interpolate-components';
+import { Link } from '@woocommerce/components';
+import './style.scss';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const STORAGE_KEY = 'woopayments_date_format_notice_dismissed';
+
+const DateFormatNotice: React.FC = () => {
+	const [ isBannerVisible, setIsBannerVisible ] = useState( () => {
+		// Initialize state from localStorage
+		return localStorage.getItem( STORAGE_KEY ) !== 'true';
+	} );
+
+	const handleDismiss = () => {
+		setIsBannerVisible( false );
+		localStorage.setItem( STORAGE_KEY, 'true' );
+	};
+
+	const handleSettingsClick = () => {
+		handleDismiss();
+	};
+
+	if ( ! isBannerVisible ) {
+		return null;
+	}
+
+	return (
+		<BannerNotice
+			status="info"
+			icon={ true }
+			isDismissible={ true }
+			onRemove={ handleDismiss }
+			className="date-format-notice"
+		>
+			{ interpolateComponents( {
+				components: {
+					settingsLink: (
+						<Link
+							href={ '/wp-admin/options-general.php' }
+							onClick={ handleSettingsClick }
+							type="external"
+						/>
+					),
+				},
+				mixedString: __(
+					'The date and time formats now match your preferences. You can update them anytime in the {{settingsLink}}settings{{/settingsLink}}.',
+					'woocommerce-payments'
+				),
+			} ) }
+		</BannerNotice>
+	);
+};
+
+export default DateFormatNotice;

client/components/date-format-notice/style.scss

@@ -0,0 +1,5 @@
+.date-format-notice {
+	.wcpay-banner-notice__content {
+		align-self: center; // Align the content to the center of the notice and the icon.
+	}
+}

client/components/deposits-overview/test/index.tsx

@@ -68,6 +68,7 @@ declare const global: {
 		connect: {
 			country: string;
 		};
+		dateFormat: string;
 	};
 };
 
@@ -240,6 +241,7 @@ describe( 'Deposits Overview information', () => {
 					precision: 2,
 				},
 			},
+			dateFormat: 'F j, Y',
 		};
 		mockUseDepositIncludesLoan.mockReturnValue( {
 			includesFinancingPayout: false,

client/components/disputed-order-notice/index.js

@@ -1,7 +1,6 @@
 import moment from 'moment';
 import React, { useEffect } from 'react';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { dateI18n } from '@wordpress/date';
 import { createInterpolateElement } from '@wordpress/element';
 
 /**
@@ -20,6 +19,7 @@ import {
 import { useCharge } from 'wcpay/data';
 import { recordEvent } from 'tracks';
 import './style.scss';
+import { formatDateTimeFromString } from 'wcpay/utils/date-time';
 
 const DisputedOrderNoticeHandler = ( { chargeId, onDisableOrderRefund } ) => {
 	const { data: charge } = useCharge( chargeId );
@@ -84,8 +84,10 @@ const DisputedOrderNoticeHandler = ( { chargeId, onDisableOrderRefund } ) => {
 		return null;
 	}
 
-	const now = moment();
-	const dueBy = moment.unix( dispute.evidence_details?.due_by );
+	// Get current time in UTC for consistent timezone-independent comparison
+	const now = moment().utc();
+	// Parse the Unix timestamp as UTC since it's stored that way in the API
+	const dueBy = moment.unix( dispute.evidence_details?.due_by ).utc();
 
 	// If the dispute is due in the past, don't show notice.
 	if ( ! now.isBefore( dueBy ) ) {
@@ -131,7 +133,7 @@ const UrgentDisputeNoticeBody = ( {
 		formatString,
 		formattedAmount,
 		reasons[ disputeReason ].display,
-		dateI18n( 'M j, Y', dueBy.local().toISOString() )
+		formatDateTimeFromString( dueBy.toISOString() )
 	);
 
 	let suffix = sprintf(
@@ -182,7 +184,7 @@ const RegularDisputeNoticeBody = ( {
 	const suffix = sprintf(
 		// Translators: %1$s is the dispute due date.
 		__( 'Please respond before %1$s.', 'woocommerce-payments' ),
-		dateI18n( 'M j, Y', dueBy.local().toISOString() )
+		formatDateTimeFromString( dueBy.toISOString() )
 	);
 
 	return (