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,7 @@ import Chip from 'components/chip';
 import { useLoans } from 'wcpay/data';
 import { getAdminUrl } from 'wcpay/utils';
 import './style.scss';
+import { formatUserDateTime } from 'wcpay/utils/date-time';
 
 const columns = [
 	{
@@ -80,7 +80,7 @@ const getLoanStatusText = ( loan: CapitalLoan ) => {
 	return loan.fully_paid_at
 		? __( 'Paid off', 'woocommerce-payments' ) +
 				': ' +
-				dateI18n( 'M j, Y', loan.fully_paid_at )
+				formatUserDateTime( loan.fully_paid_at )
 		: __( 'Active', 'woocommerce-payments' );
 };
 
@@ -112,7 +112,7 @@ 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( formatUserDateTime( loan.paid_out_at ) ),
 			},
 			status: {
 				value: getLoanStatusText( loan ),
@@ -150,7 +150,7 @@ const getRowsData = ( loans: CapitalLoan[] ) =>
 				value: loan.first_paydown_at,
 				display: clickable(
 					loan.first_paydown_at
-						? dateI18n( 'M j, Y', loan.first_paydown_at )
+						? formatUserDateTime( loan.first_paydown_at )
 						: '-'
 				),
 			},

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,13 @@
  * 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 { formatUserDateTime } from 'wcpay/utils/date-time';
 
 const ExpirationDescription = ( {
 	feeData: { volume_allowance: volumeAllowance, end_time: endTime, ...rest },
@@ -26,7 +26,7 @@ const ExpirationDescription = ( {
 				'woocommerce-payments'
 			),
 			formatCurrency( volumeAllowance, currencyCode ),
-			dateI18n( 'F j, Y', moment( endTime ).toISOString() )
+			formatUserDateTime( moment( endTime ).toISOString() )
 		);
 	} else if ( volumeAllowance ) {
 		description = sprintf(
@@ -44,7 +44,7 @@ const ExpirationDescription = ( {
 				'Discounted base fee expires on %1$s.',
 				'woocommerce-payments'
 			),
-			dateI18n( 'F j, Y', moment( endTime ).toISOString() )
+			formatUserDateTime( moment( endTime ).toISOString() )
 		);
 	} 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 { formatUserDateTime } from 'wcpay/utils/date-time';
 
 const Block = ( {
 	title,
@@ -210,12 +210,12 @@ const ActiveLoanSummary = (): JSX.Element => {
 								'Repaid this period (until %s)',
 								'woocommerce-payments'
 							),
-							dateI18n(
-								'M j, Y',
+							formatUserDateTime(
 								new Date(
 									details.current_repayment_interval.due_at *
 										1000
-								)
+								),
+								{ useGmt: true }
 							)
 						) }
 					>
@@ -251,9 +251,9 @@ const ActiveLoanSummary = (): JSX.Element => {
 					<Block
 						title={ __( 'Loan disbursed', 'woocommerce-payments' ) }
 					>
-						{ dateI18n(
-							'M j, Y',
-							new Date( details.advance_paid_out_at * 1000 )
+						{ formatUserDateTime(
+							new Date( details.advance_paid_out_at * 1000 ),
+							{ useGmt: true }
 						) }
 					</Block>
 					<Block
@@ -278,9 +278,9 @@ const ActiveLoanSummary = (): JSX.Element => {
 					<Block
 						title={ __( 'First paydown', 'woocommerce-payments' ) }
 					>
-						{ dateI18n(
-							'M j, Y',
-							new Date( details.repayments_begin_at * 1000 )
+						{ formatUserDateTime(
+							new Date( details.repayments_begin_at * 1000 ),
+							{ useGmt: true }
 						) }
 					</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

@@ -34,6 +34,7 @@ describe( 'Active loan summary', () => {
 					precision: 2,
 				},
 			},
+			dateFormat: 'M j, Y',
 		};
 	} );
 	afterEach( () => {

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

@@ -68,6 +68,7 @@ declare const global: {
 		connect: {
 			country: string;
 		};
+		dateFormat: string;
 	};
 };
 
@@ -231,6 +232,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 { formatUserDateTime } from 'wcpay/utils/date-time';
 
 const DisputedOrderNoticeHandler = ( { chargeId, onDisableOrderRefund } ) => {
 	const { data: charge } = useCharge( chargeId );
@@ -131,7 +131,7 @@ const UrgentDisputeNoticeBody = ( {
 		formatString,
 		formattedAmount,
 		reasons[ disputeReason ].display,
-		dateI18n( 'M j, Y', dueBy.local().toISOString() )
+		formatUserDateTime( dueBy.local().toISOString() )
 	);
 
 	let suffix = sprintf(
@@ -182,7 +182,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() )
+		formatUserDateTime( dueBy.local().toISOString() )
 	);
 
 	return (

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

@@ -36,6 +36,7 @@ describe( 'DisputedOrderNoticeHandler', () => {
 			connect: {
 				country: 'US',
 			},
+			dateFormat: 'M j, Y',
 		};
 		useCharge.mockReturnValue( { data: mockCharge } );
 	} );

client/deposits/details/index.tsx

@@ -4,7 +4,6 @@
  * External dependencies
  */
 import React from 'react';
-import { dateI18n } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
 import moment from 'moment';
 import {
@@ -40,6 +39,7 @@ import {
 } from 'multi-currency/interface/functions';
 import { displayStatus } from '../strings';
 import './style.scss';
+import { formatUserDateTime } from 'wcpay/utils/date-time';
 
 /**
  * Renders the deposit status indicator UI, re-purposing the OrderStatus component from @woocommerce/components.
@@ -111,11 +111,9 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( {
 			key="depositDate"
 			label={
 				`${ depositDateLabel }: ` +
-				dateI18n(
-					'M j, Y',
-					moment.utc( deposit.date ).toISOString(),
-					true // TODO Change call to gmdateI18n and remove this deprecated param once WP 5.4 support ends.
-				)
+				formatUserDateTime( moment.utc( deposit.date ).toISOString(), {
+					useGmt: true,
+				} )
 			}
 			value={ <Status status={ deposit.status } /> }
 			detail={ deposit.bankAccount }

client/deposits/details/test/index.tsx

@@ -32,6 +32,7 @@ declare const global: {
 		connect: {
 			country: string;
 		};
+		dateFormat: string;
 	};
 	wcSettings: { countries: Record< string, string > };
 };
@@ -54,6 +55,7 @@ describe( 'Deposit overview', () => {
 					precision: 2,
 				},
 			},
+			dateFormat: 'M j, Y',
 		};
 	} );
 

client/deposits/list/index.tsx

@@ -7,7 +7,6 @@ import { DepositsTableHeader } from 'wcpay/types/deposits';
 import React, { useState } from 'react';
 import { recordEvent } from 'tracks';
 import { useMemo } from '@wordpress/element';
-import { dateI18n } from '@wordpress/date';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import moment from 'moment';
 import { TableCard, Link } from '@woocommerce/components';
@@ -48,6 +47,7 @@ import { ReportingExportLanguageHook } from 'wcpay/settings/reporting-settings/i
 
 import './style.scss';
 import { parseInt } from 'lodash';
+import { formatUserDateTime } from 'wcpay/utils/date-time';
 
 const getColumns = ( sortByDate?: boolean ): DepositsTableHeader[] => [
 	{
@@ -135,10 +135,11 @@ export const DepositsList = (): JSX.Element => {
 				href={ getDetailsURL( deposit.id, 'deposits' ) }
 				onClick={ () => recordEvent( 'wcpay_deposits_row_click' ) }
 			>
-				{ dateI18n(
-					'M j, Y',
+				{ formatUserDateTime(
 					moment.utc( deposit.date ).toISOString(),
-					true // TODO Change call to gmdateI18n and remove this deprecated param once WP 5.4 support ends.
+					{
+						useGmt: true,
+					}
 				) }
 			</Link>
 		);
@@ -328,10 +329,9 @@ export const DepositsList = (): JSX.Element => {
 				row[ 0 ],
 				{
 					...row[ 1 ],
-					value: dateI18n(
-						'Y-m-d',
+					value: formatUserDateTime(
 						moment.utc( row[ 1 ].value ).toISOString(),
-						true
+						{ useGmt: true }
 					),
 				},
 				...row.slice( 2 ),

client/deposits/list/test/__snapshots__/index.tsx.snap

@@ -345,7 +345,7 @@ exports[`Deposits list renders correctly a single deposit 1`] = `
                       data-link-type="wc-admin"
                       href="admin.php?page=wc-admin&path=%2Fpayments%2Fdeposits%2Fdetails&id=po_mock1"
                     >
-                      Jan 2, 2020
+                      Jan 2 2020
                     </a>
                   </td>
                   <td
@@ -432,7 +432,7 @@ exports[`Deposits list renders correctly a single deposit 1`] = `
                       data-link-type="wc-admin"
                       href="admin.php?page=wc-admin&path=%2Fpayments%2Fdeposits%2Fdetails&id=po_mock2"
                     >
-                      Jan 3, 2020
+                      Jan 3 2020
                     </a>
                   </td>
                   <td
@@ -894,7 +894,7 @@ exports[`Deposits list renders correctly with multiple currencies 1`] = `
                       data-link-type="wc-admin"
                       href="admin.php?page=wc-admin&path=%2Fpayments%2Fdeposits%2Fdetails&id=po_mock1"
                     >
-                      Jan 2, 2020
+                      Jan 2 2020
                     </a>
                   </td>
                   <td
@@ -981,7 +981,7 @@ exports[`Deposits list renders correctly with multiple currencies 1`] = `
                       data-link-type="wc-admin"
                       href="admin.php?page=wc-admin&path=%2Fpayments%2Fdeposits%2Fdetails&id=po_mock2"
                     >
-                      Jan 3, 2020
+                      Jan 3 2020
                     </a>
                   </td>
                   <td

client/deposits/list/test/index.tsx

@@ -19,7 +19,7 @@ import {
 	useDepositsSummary,
 	useReportingExportLanguage,
 } from 'wcpay/data';
-import { formatDate, getUnformattedAmount } from 'wcpay/utils/test-utils';
+import { getUnformattedAmount } from 'wcpay/utils/test-utils';
 import {
 	CachedDeposit,
 	CachedDeposits,
@@ -76,6 +76,7 @@ declare const global: {
 		reporting?: {
 			exportModalDismissed: boolean;
 		};
+		dateFormat: string;
 	};
 };
 
@@ -141,6 +142,7 @@ describe( 'Deposits list', () => {
 			reporting: {
 				exportModalDismissed: true,
 			},
+			dateFormat: 'M j Y',
 		};
 	} );
 
@@ -308,7 +310,7 @@ describe( 'Deposits list', () => {
 			// 2. The indexOf check in amount's expect is because the amount in CSV may not contain
 			//    trailing zeros as in the display amount.
 			//
-			expect( formatDate( csvFirstDeposit[ 1 ], 'M j, Y' ) ).toBe(
+			expect( csvFirstDeposit[ 1 ].replace( /^"|"$/g, '' ) ).toBe(
 				displayFirstDeposit[ 0 ]
 			); // date
 			expect( csvFirstDeposit[ 2 ] ).toBe( displayFirstDeposit[ 1 ] ); // type