diff --git a/src/components/Payment/Payment.tsx b/src/components/Payment/Payment.tsx index 6a836e80d..1be771f2c 100644 --- a/src/components/Payment/Payment.tsx +++ b/src/components/Payment/Payment.tsx @@ -12,7 +12,7 @@ import TextField from '#components/TextField/TextField'; import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay'; import Button from '#components/Button/Button'; import type { Customer } from '#types/account'; -import { formatDate, formatPrice } from '#src/utils/formatting'; +import { formatLocalizedDate, formatPrice } from '#src/utils/formatting'; import { addQueryParam } from '#src/utils/location'; import type { PaymentDetail, Subscription, Transaction } from '#types/subscription'; import type { AccessModel } from '#types/Config'; @@ -57,7 +57,7 @@ const Payment = ({ onUpgradeSubscriptionClick, offerSwitchesAvailable, }: Props): JSX.Element => { - const { t } = useTranslation(['user', 'account']); + const { t, i18n } = useTranslation(['user', 'account']); const hiddenTransactionsCount = transactions ? transactions?.length - VISIBLE_TRANSACTIONS : 0; const hasMoreTransactions = hiddenTransactionsCount > 0; const navigate = useNavigate(); @@ -108,8 +108,8 @@ const Payment = ({

{getTitle(activeSubscription.period)}
{activeSubscription.status === 'active' && !isGrantedSubscription - ? t('user:payment.next_billing_date_on', { date: formatDate(activeSubscription.expiresAt) }) - : t('user:payment.subscription_expires_on', { date: formatDate(activeSubscription.expiresAt) })} + ? t('user:payment.next_billing_date_on', { date: formatLocalizedDate(new Date(activeSubscription.expiresAt * 1000), i18n.language) }) + : t('user:payment.subscription_expires_on', { date: formatLocalizedDate(new Date(activeSubscription.expiresAt), i18n.language) })}

{!isGrantedSubscription && (

@@ -193,7 +193,7 @@ const Payment = ({

{transaction.transactionId}
- {formatDate(transaction.transactionDate)} + {formatLocalizedDate(new Date(transaction.transactionDate * 1000), i18n.language)}

{canShowReceipts && ( !isLoading && onShowReceiptClick(transaction.transactionId)}> diff --git a/src/components/Payment/__snapshots__/Payment.test.tsx.snap b/src/components/Payment/__snapshots__/Payment.test.tsx.snap index 0dfe717f0..edf98ba58 100644 --- a/src/components/Payment/__snapshots__/Payment.test.tsx.snap +++ b/src/components/Payment/__snapshots__/Payment.test.tsx.snap @@ -79,7 +79,7 @@ exports[` > renders and matches snapshot 1`] = `

T712014024
- 5/5/2021 + May 5, 2021

@@ -102,7 +102,7 @@ exports[` > renders and matches snapshot 1`] = `

T177974068
- 5/5/2021 + May 5, 2021

@@ -125,7 +125,7 @@ exports[` > renders and matches snapshot 1`] = `

T996601696
- 5/5/2021 + May 5, 2021

diff --git a/src/components/RenewSubscriptionForm/RenewSubscriptionForm.tsx b/src/components/RenewSubscriptionForm/RenewSubscriptionForm.tsx index 7ec680293..db04ae630 100644 --- a/src/components/RenewSubscriptionForm/RenewSubscriptionForm.tsx +++ b/src/components/RenewSubscriptionForm/RenewSubscriptionForm.tsx @@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'; import styles from './RenewSubscriptionForm.module.scss'; import Button from '#components/Button/Button'; -import { formatDate, formatPrice } from '#src/utils/formatting'; +import { formatLocalizedDate, formatPrice } from '#src/utils/formatting'; import FormFeedback from '#components/FormFeedback/FormFeedback'; import type { Customer } from '#types/account'; import type { Subscription } from '#types/subscription'; @@ -19,7 +19,7 @@ type Props = { }; const RenewSubscriptionForm: React.FC = ({ subscription, customer, error, submitting, onConfirm, onClose }: Props) => { - const { t } = useTranslation('account'); + const { t, i18n } = useTranslation('account'); return (
@@ -29,7 +29,7 @@ const RenewSubscriptionForm: React.FC = ({ subscription, customer, error,

{subscription.offerTitle}
- {t('renew_subscription.next_billing_date_on', { date: formatDate(subscription.expiresAt) })} + {t('renew_subscription.next_billing_date_on', { date: formatLocalizedDate(new Date(subscription.expiresAt * 1000), i18n.language) })}

{formatPrice(subscription.nextPaymentPrice, subscription.nextPaymentCurrency, customer.country)} diff --git a/src/components/SubscriptionRenewed/SubscriptionRenewed.tsx b/src/components/SubscriptionRenewed/SubscriptionRenewed.tsx index aecff7d01..0c09f0bcb 100644 --- a/src/components/SubscriptionRenewed/SubscriptionRenewed.tsx +++ b/src/components/SubscriptionRenewed/SubscriptionRenewed.tsx @@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'; import styles from './SubscriptionRenewed.module.scss'; import Button from '#components/Button/Button'; -import { formatDate, formatPrice } from '#src/utils/formatting'; +import { formatLocalizedDate, formatPrice } from '#src/utils/formatting'; import type { Subscription } from '#types/subscription'; import type { Customer } from '#types/account'; @@ -15,8 +15,8 @@ type Props = { }; const SubscriptionRenewed: React.FC = ({ onClose, customer, subscription }: Props) => { - const { t } = useTranslation('account'); - const date = formatDate(subscription.expiresAt); + const { t, i18n } = useTranslation('account'); + const date = formatLocalizedDate(new Date(subscription.expiresAt * 1000), i18n.language); const price = formatPrice(subscription.nextPaymentPrice, subscription.nextPaymentCurrency, customer.country); return ( diff --git a/src/containers/AccountModal/forms/CancelSubscription.tsx b/src/containers/AccountModal/forms/CancelSubscription.tsx index 36ad79576..4e6cc0d1e 100644 --- a/src/containers/AccountModal/forms/CancelSubscription.tsx +++ b/src/containers/AccountModal/forms/CancelSubscription.tsx @@ -6,12 +6,12 @@ import { useAccountStore } from '#src/stores/AccountStore'; import CancelSubscriptionForm from '#components/CancelSubscriptionForm/CancelSubscriptionForm'; import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay'; import SubscriptionCancelled from '#components/SubscriptionCancelled/SubscriptionCancelled'; -import { formatDate } from '#src/utils/formatting'; +import { formatLocalizedDate } from '#src/utils/formatting'; import { removeQueryParam } from '#src/utils/location'; import { updateSubscription } from '#src/stores/AccountController'; const CancelSubscription = () => { - const { t } = useTranslation('account'); + const { t, i18n } = useTranslation('account'); const navigate = useNavigate(); const location = useLocation(); const subscription = useAccountStore((s) => s.subscription); @@ -42,7 +42,7 @@ const CancelSubscription = () => { return ( {cancelled ? ( - + ) : ( )} diff --git a/src/pages/User/__snapshots__/User.test.tsx.snap b/src/pages/User/__snapshots__/User.test.tsx.snap index 52fa4aed5..01c9f83e0 100644 --- a/src/pages/User/__snapshots__/User.test.tsx.snap +++ b/src/pages/User/__snapshots__/User.test.tsx.snap @@ -749,7 +749,7 @@ exports[`User Component tests > Payments Page 1`] = `

11232
- 7/16/2022 + July 16, 2022

@@ -772,7 +772,7 @@ exports[`User Component tests > Payments Page 1`] = `

11234
- 11/9/2022 + November 9, 2022

diff --git a/src/utils/formatting.ts b/src/utils/formatting.ts index 9f1dbab98..e54c33a9d 100644 --- a/src/utils/formatting.ts +++ b/src/utils/formatting.ts @@ -78,12 +78,6 @@ export const episodeURL = (episode: PlaylistItem, seriesId?: string, play: boole seriesId, }); -export const formatDate = (dateString: number) => { - if (!dateString) return ''; - - return new Date(dateString * 1000).toLocaleDateString('en-US'); -}; - export const formatPrice = (price: number, currency: string, country: string) => { return new Intl.NumberFormat(country || undefined, { style: 'currency', @@ -135,10 +129,14 @@ export const formatVideoSchedule = (locale: string, scheduledStart?: Date, sched return `${formatLocalizedDateTime(scheduledStart, locale, ' • ')} - ${formatLocalizedTime(scheduledEnd, locale)}`; }; -export const formatLocalizedDate = (date: Date, locale: string) => - new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'long', year: 'numeric' }).format(date); +export const formatLocalizedDate = (date: Date, locale: string) => { + return new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'long', year: 'numeric' }).format(date); +}; -export const formatLocalizedTime = (date: Date, locale: string) => new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: 'numeric' }).format(date); +export const formatLocalizedTime = (date: Date, locale: string) => { + return new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: 'numeric' }).format(date); +}; -export const formatLocalizedDateTime = (date: Date, locale: string, separator = ' ') => - `${formatLocalizedDate(date, locale)}${separator}${formatLocalizedTime(date, locale)}`; +export const formatLocalizedDateTime = (date: Date, locale: string, separator = ' ') => { + return `${formatLocalizedDate(date, locale)}${separator}${formatLocalizedTime(date, locale)}`; +}; diff --git a/test-e2e/utils/payments.ts b/test-e2e/utils/payments.ts index 4b7ac50b8..e77baa831 100644 --- a/test-e2e/utils/payments.ts +++ b/test-e2e/utils/payments.ts @@ -32,7 +32,7 @@ export function addYear(date: Date) { } export function formatDate(date: Date) { - return date.toLocaleDateString(); + return date.toLocaleDateString('en-US', { day: 'numeric', month: 'long', hour: 'numeric' }); } export async function finishAndCheckSubscription(I: CodeceptJS.I, billingDate: Date, today: Date, yearlyPrice: string) {