fix(project): show all dates in a localized format

jwplayer · Jun 1, 2023 · 5022cdb · 5022cdb
1 parent dedcade
commit 5022cdb
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 31 deletions.
diff --git 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 = ({
                 <p>
                   <strong>{getTitle(activeSubscription.period)}</strong> <br />
                   {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) })}
                 </p>
                 {!isGrantedSubscription && (
                   <p className={styles.price}>
@@ -193,7 +193,7 @@ const Payment = ({
                   <p>
                     {transaction.transactionId}
                     <br />
-                    {formatDate(transaction.transactionDate)}
+                    {formatLocalizedDate(new Date(transaction.transactionDate * 1000), i18n.language)}
                   </p>
                   {canShowReceipts && (
                     <IconButton aria-label={t('user:payment.show_receipt')} onClick={() => !isLoading && onShowReceiptClick(transaction.transactionId)}>

diff --git a/src/components/Payment/__snapshots__/Payment.test.tsx.snap b/src/components/Payment/__snapshots__/Payment.test.tsx.snap
@@ -79,7 +79,7 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
         <p>
           T712014024
           <br />
-          5/5/2021
+          May 5, 2021
         </p>
       </div>
     </div>
@@ -102,7 +102,7 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
         <p>
           T177974068
           <br />
-          5/5/2021
+          May 5, 2021
         </p>
       </div>
     </div>
@@ -125,7 +125,7 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
         <p>
           T996601696
           <br />
-          5/5/2021
+          May 5, 2021
         </p>
       </div>
     </div>

diff --git 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<Props> = ({ subscription, customer, error, submitting, onConfirm, onClose }: Props) => {
-  const { t } = useTranslation('account');
+  const { t, i18n } = useTranslation('account');
 
   return (
     <div>
@@ -29,7 +29,7 @@ const RenewSubscriptionForm: React.FC<Props> = ({ subscription, customer, error,
       <div className={styles.infoBox}>
         <p>
           <strong>{subscription.offerTitle}</strong> <br />
-          {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) })}
         </p>
         <p className={styles.price}>
           <strong>{formatPrice(subscription.nextPaymentPrice, subscription.nextPaymentCurrency, customer.country)}</strong>

diff --git 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<Props> = ({ 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
@@ -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 (
     <React.Fragment>
       {cancelled ? (
-        <SubscriptionCancelled expiresDate={formatDate(subscription.expiresAt)} onClose={closeHandler} />
+        <SubscriptionCancelled expiresDate={formatLocalizedDate(new Date(subscription.expiresAt * 1000), i18n.language)} onClose={closeHandler} />
       ) : (
         <CancelSubscriptionForm onConfirm={cancelSubscriptionConfirmHandler} onCancel={closeHandler} submitting={submitting} error={error} />
       )}

diff --git 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`] = `
             <p>
               11232
               <br />
-              7/16/2022
+              July 16, 2022
             </p>
           </div>
         </div>
@@ -772,7 +772,7 @@ exports[`User Component tests > Payments Page 1`] = `
             <p>
               11234
               <br />
-              11/9/2022
+              November 9, 2022
             </p>
           </div>
         </div>

diff --git 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
@@ -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) {