[web] Remove SubscriptionFormatters, format subscription dates in the frontend (#36409)

* [web] Remove SubscriptionFormatters, format subscription dates in the frontend

Replace the server-formatted nextPaymentDueAt/nextPaymentDueDate/
trialEndsAtFormatted fields with the raw periodEnd date and format in
the React dashboard (same strings as before, English + UTC). Also
consolidate hand-rolled trial checks onto isInFreeTrial /
SubscriptionHelper.isInTrial.

* [web] Remove the now-unused dateformat dependency

* [web] Address review: payment-dates unit test, UTC dates in acceptance test

Add a dedicated unit test asserting the exact formatted strings from
formatPaymentDate/formatPaymentDateTime, and use explicit UTC timestamps
in the SubscriptionDashboard acceptance fixtures instead of
local-timezone Date constructors.

GitOrigin-RevId: 16ac4f1098b14ef9f1478d22cf39c1357ead7dea

services/web/test/frontend/features/subscription/components/dashboard/personal-subscription.test.tsx

@@ -22,6 +22,7 @@ import { reactivateSubscriptionUrl } from '../../../../../../frontend/js/feature
 import fetchMock from 'fetch-mock'
 import sinon from 'sinon'
 import { location } from '@/shared/components/location'
+import { formatPaymentDateTime } from '@/features/subscription/util/payment-dates'
 
 describe('<PersonalSubscription />', function () {
   afterEach(function () {
@@ -77,9 +78,12 @@ describe('<PersonalSubscription />', function () {
         'Your subscription has been canceled and will terminate on',
         { exact: false }
       )
-      screen.getByText(canceledSubscription.payment!.nextPaymentDueAt, {
-        exact: false,
-      })
+      screen.getByText(
+        formatPaymentDateTime(canceledSubscription.payment!.periodEnd)!,
+        {
+          exact: false,
+        }
+      )
 
       screen.getByText('No further payments will be taken.', { exact: false })
 

services/web/test/frontend/features/subscription/components/dashboard/states/active/active.test.tsx

@@ -27,6 +27,10 @@ import {
 } from '@/features/subscription/data/subscription-url'
 import { location } from '@/shared/components/location'
 import { MetaTag } from '@/utils/meta'
+import {
+  formatPaymentDate,
+  formatPaymentDateTime,
+} from '@/features/subscription/util/payment-dates'
 
 describe('<ActiveSubscription />', function () {
   let sendMBSpy: sinon.SinonSpy
@@ -75,7 +79,7 @@ describe('<ActiveSubscription />', function () {
     within(screen.getByTestId('renews-on')).getByText((_, el) =>
       Boolean(
         el?.textContent?.includes(
-          `Renews on ${subscription.payment.nextPaymentDueDate}`
+          `Renews on ${formatPaymentDate(subscription.payment.periodEnd)}`
         )
       )
     )
@@ -210,7 +214,7 @@ describe('<ActiveSubscription />', function () {
     within(screen.getByTestId('trial-ending')).getByText((_, el) =>
       Boolean(
         el?.textContent?.includes(
-          `You’re on a free trial which ends on ${trialSubscription.payment.trialEndsAtFormatted}`
+          `You’re on a free trial which ends on ${formatPaymentDateTime(trialSubscription.payment.trialEndsAt)}`
         )
       )
     )
@@ -288,7 +292,7 @@ describe('<ActiveSubscription />', function () {
         { exact: false }
       )
       const dates = screen.getAllByText(
-        annualActiveSubscription.payment.nextPaymentDueAt,
+        formatPaymentDate(annualActiveSubscription.payment.periodEnd)!,
         {
           exact: false,
         }
@@ -307,7 +311,10 @@ describe('<ActiveSubscription />', function () {
         { exact: false }
       )
       const dates = screen.getAllByText(
-        trialSubscription.payment.trialEndsAtFormatted!
+        formatPaymentDate(trialSubscription.payment.trialEndsAt)!,
+        {
+          exact: false,
+        }
       )
       expect(dates.length).to.equal(3)
       const button = screen.getByRole('button', {

services/web/test/frontend/features/subscription/components/successful-subscription/successful-subscription.test.tsx

@@ -9,6 +9,7 @@ import {
 } from '../../fixtures/subscriptions'
 import { ExposedSettings } from '../../../../../../types/exposed-settings'
 import { UserProvider } from '@/shared/context/user-context'
+import { formatPaymentDateTime } from '@/features/subscription/util/payment-dates'
 
 describe('successful subscription page', function () {
   it('renders the invoices link', function () {
@@ -122,7 +123,7 @@ describe('successful subscription page', function () {
           .getByText(/the next payment of/i)
           .textContent?.replace(/\xA0/g, ' ')
       ).to.equal(
-        `The next payment of ${annualActiveSubscriptionPro.payment.displayPrice} will be collected on ${annualActiveSubscriptionPro.payment.nextPaymentDueAt}.`
+        `The next payment of ${annualActiveSubscriptionPro.payment.displayPrice} will be collected on ${formatPaymentDateTime(annualActiveSubscriptionPro.payment.periodEnd)}.`
       )
       screen.getByText(/taxes may be added, depending on your billing address/i)