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) {