Merge pull request #11494 from overleaf/jel-react-personal-subscription-dash-pt-3

[web] Continue migration of personal subscription dash to React

GitOrigin-RevId: 412301dad0a04fa6e7b8712ad919c4f67d0bbfe2

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

@@ -1,9 +1,9 @@
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Subscription } from '../../../../../../types/subscription/dashboard/subscription'
-import { ActiveSubsciption } from './states/active/active'
-import { CanceledSubsciption } from './states/canceled'
-import { ExpiredSubsciption } from './states/expired'
+import { ActiveSubscription } from './states/active/active'
+import { CanceledSubscription } from './states/canceled'
+import { ExpiredSubscription } from './states/expired'
 import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context'
 
 function PastDueSubscriptionAlert({
@@ -30,19 +30,18 @@ function PastDueSubscriptionAlert({
 
 function PersonalSubscriptionStates({
   subscription,
-  state,
 }: {
   subscription: Subscription
-  state?: string
 }) {
   const { t } = useTranslation()
+  const state = subscription?.recurly?.state
 
   if (state === 'active') {
-    return <ActiveSubsciption subscription={subscription} />
+    return <ActiveSubscription subscription={subscription} />
   } else if (state === 'canceled') {
-    return <CanceledSubsciption subscription={subscription} />
+    return <CanceledSubscription subscription={subscription} />
   } else if (state === 'expired') {
-    return <ExpiredSubsciption subscription={subscription} />
+    return <ExpiredSubscription subscription={subscription} />
   } else {
     return <>{t('problem_with_subscription_contact_us')}</>
   }
@@ -56,7 +55,6 @@ function PersonalSubscription({
   const { t } = useTranslation()
   const { recurlyLoadError, setRecurlyLoadError } =
     useSubscriptionDashboardContext()
-  const state = subscription?.recurly?.state
 
   useEffect(() => {
     if (typeof window.recurly === 'undefined' || !window.recurly) {
@@ -71,7 +69,7 @@ function PersonalSubscription({
       {subscription.recurly.account.has_past_due_invoice._ === 'true' && (
         <PastDueSubscriptionAlert subscription={subscription} />
       )}
-      <PersonalSubscriptionStates subscription={subscription} state={state} />
+      <PersonalSubscriptionStates subscription={subscription} />
       {recurlyLoadError && (
         <div className="alert alert-warning" role="alert">
           <strong>{t('payment_provider_unreachable_error')}</strong>

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

@@ -9,7 +9,7 @@ import { PendingPlanChange } from './pending-plan-change'
 import { TrialEnding } from './trial-ending'
 import { ChangePlan } from './change-plan'
 
-export function ActiveSubsciption({
+export function ActiveSubscription({
   subscription,
 }: {
   subscription: Subscription
@@ -66,11 +66,20 @@ export function ActiveSubsciption({
             </button>
           )}
       </p>
-      {subscription.pendingPlan && (
-        <p>{t('want_change_to_apply_before_plan_end')}</p>
-      )}
+      {/* && personalSubscription.pendingPlan.name != personalSubscription.plan.name */}
+      {subscription.pendingPlan &&
+        subscription.pendingPlan.name !== subscription.plan.name && (
+          <p>{t('want_change_to_apply_before_plan_end')}</p>
+        )}
       {/* TODO: groupPlan */}
-      <TrialEnding subscription={subscription} />
+      {subscription.recurly.trial_ends_at &&
+        subscription.recurly.trialEndsAtFormatted && (
+          <TrialEnding
+            trialEndsAt={subscription.recurly.trial_ends_at}
+            trialEndsAtFormatted={subscription.recurly.trialEndsAtFormatted}
+          />
+        )}
+
       <p>
         <Trans
           i18nKey="next_payment_of_x_collectected_on_y"

services/web/frontend/js/features/subscription/components/dashboard/states/active/trial-ending.tsx

@@ -1,21 +1,20 @@
 import { Trans } from 'react-i18next'
-import { Subscription } from '../../../../../../../../types/subscription/dashboard/subscription'
 
-export function TrialEnding({ subscription }: { subscription: Subscription }) {
-  if (
-    !subscription.recurly.trialEndsAtFormatted ||
-    !subscription.recurly.trial_ends_at
-  )
-    return null
-
-  const endDate = new Date(subscription.recurly.trial_ends_at)
+export function TrialEnding({
+  trialEndsAt,
+  trialEndsAtFormatted,
+}: {
+  trialEndsAt: string
+  trialEndsAtFormatted: string
+}) {
+  const endDate = new Date(trialEndsAt)
   if (endDate.getTime() < Date.now()) return null
 
   return (
     <p>
       <Trans
         i18nKey="youre_on_free_trial_which_ends_on"
-        values={{ date: subscription.recurly.trialEndsAtFormatted }}
+        values={{ date: trialEndsAtFormatted }}
         components={[
           // eslint-disable-next-line react/jsx-key
           <strong />,

services/web/frontend/js/features/subscription/components/dashboard/states/canceled.tsx

@@ -2,7 +2,7 @@ import { useTranslation, Trans } from 'react-i18next'
 import { Subscription } from '../../../../../../../types/subscription/dashboard/subscription'
 import PremiumFeaturesLink from '../premium-features-link'
 
-export function CanceledSubsciption({
+export function CanceledSubscription({
   subscription,
 }: {
   subscription: Subscription

services/web/frontend/js/features/subscription/components/dashboard/states/expired.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { Subscription } from '../../../../../../../types/subscription/dashboard/subscription'
 
-export function ExpiredSubsciption({
+export function ExpiredSubscription({
   subscription,
 }: {
   subscription: Subscription

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

@@ -1,7 +1,7 @@
 import { expect } from 'chai'
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as eventTracking from '../../../../../../../frontend/js/infrastructure/event-tracking'
-import { ActiveSubsciption } from '../../../../../../../frontend/js/features/subscription/components/dashboard/states/active/active'
+import { ActiveSubscription } from '../../../../../../../frontend/js/features/subscription/components/dashboard/states/active/active'
 import { SubscriptionDashboardProvider } from '../../../../../../../frontend/js/features/subscription/context/subscription-dashboard-context'
 import { Subscription } from '../../../../../../../types/subscription/dashboard/subscription'
 import {
@@ -61,7 +61,7 @@ describe('<ActiveSubscription />', function () {
   it('renders the dash annual active subscription', function () {
     render(
       <SubscriptionDashboardProvider>
-        <ActiveSubsciption subscription={annualActiveSubscription} />
+        <ActiveSubscription subscription={annualActiveSubscription} />
       </SubscriptionDashboardProvider>
     )
     expectedInActiveSubscription(annualActiveSubscription)
@@ -70,7 +70,7 @@ describe('<ActiveSubscription />', function () {
   it('shows change plan UI when button clicked', function () {
     render(
       <SubscriptionDashboardProvider>
-        <ActiveSubsciption subscription={annualActiveSubscription} />
+        <ActiveSubscription subscription={annualActiveSubscription} />
       </SubscriptionDashboardProvider>
     )
 
@@ -87,7 +87,7 @@ describe('<ActiveSubscription />', function () {
   it('notes when user is changing plan at end of current plan term', function () {
     render(
       <SubscriptionDashboardProvider>
-        <ActiveSubsciption subscription={pendingSubscriptionChange} />
+        <ActiveSubscription subscription={pendingSubscriptionChange} />
       </SubscriptionDashboardProvider>
     )
 
@@ -99,12 +99,16 @@ describe('<ActiveSubscription />', function () {
     screen.getByText(' at the end of the current billing period', {
       exact: false,
     })
+
+    screen.getByText(
+      'If you wish this change to apply before the end of your current billing period, please contact us.'
+    )
   })
 
   it('does not show "Change plan" option for group plans', function () {
     render(
       <SubscriptionDashboardProvider>
-        <ActiveSubsciption subscription={groupActiveSubscription} />
+        <ActiveSubscription subscription={groupActiveSubscription} />
       </SubscriptionDashboardProvider>
     )
 
@@ -123,7 +127,7 @@ describe('<ActiveSubscription />', function () {
 
     render(
       <SubscriptionDashboardProvider>
-        <ActiveSubsciption subscription={activePastDueSubscription} />
+        <ActiveSubscription subscription={activePastDueSubscription} />
       </SubscriptionDashboardProvider>
     )
 
@@ -134,7 +138,7 @@ describe('<ActiveSubscription />', function () {
   it('shows the pending license change message when plan change is pending', function () {
     render(
       <SubscriptionDashboardProvider>
-        <ActiveSubsciption
+        <ActiveSubscription
           subscription={groupActiveSubscriptionWithPendingLicenseChange}
         />
       </SubscriptionDashboardProvider>
@@ -144,29 +148,23 @@ describe('<ActiveSubscription />', function () {
       exact: false,
     })
 
-    if (
-      !groupActiveSubscriptionWithPendingLicenseChange.recurly
-        .pendingAdditionalLicenses
-    ) {
-      throw Error('not expected test data')
-    }
     screen.getByText(
       groupActiveSubscriptionWithPendingLicenseChange.recurly
-        .pendingAdditionalLicenses
+        .pendingAdditionalLicenses!
     )
 
     screen.getByText('additional license(s) for a total of', { exact: false })
 
-    if (
-      !groupActiveSubscriptionWithPendingLicenseChange.recurly
-        .pendingTotalLicenses
-    ) {
-      throw Error('not expected test data')
-    }
     screen.getByText(
       groupActiveSubscriptionWithPendingLicenseChange.recurly
-        .pendingTotalLicenses
+        .pendingTotalLicenses!
     )
+
+    expect(
+      screen.queryByText(
+        'If you wish this change to apply before the end of your current billing period, please contact us.'
+      )
+    ).to.be.null
   })
 
   it('shows the pending license change message when plan change is not pending', function () {
@@ -178,7 +176,7 @@ describe('<ActiveSubscription />', function () {
 
     render(
       <SubscriptionDashboardProvider>
-        <ActiveSubsciption subscription={subscription} />
+        <ActiveSubscription subscription={subscription} />
       </SubscriptionDashboardProvider>
     )
 
@@ -186,9 +184,6 @@ describe('<ActiveSubscription />', function () {
       exact: false,
     })
 
-    if (!subscription.recurly.additionalLicenses) {
-      throw Error('not expected test data')
-    }
     screen.getByText(subscription.recurly.additionalLicenses)
 
     screen.getByText('additional license(s) for a total of', { exact: false })
@@ -199,15 +194,13 @@ describe('<ActiveSubscription />', function () {
   it('shows when trial ends and first payment collected', function () {
     render(
       <SubscriptionDashboardProvider>
-        <ActiveSubsciption subscription={trialSubscription} />
+        <ActiveSubscription subscription={trialSubscription} />
       </SubscriptionDashboardProvider>
     )
     screen.getByText('You’re on a free trial which ends on', { exact: false })
-    if (!trialSubscription.recurly.trialEndsAtFormatted) {
-      throw new Error('not expected test data')
-    }
+
     const endDate = screen.getAllByText(
-      trialSubscription.recurly.trialEndsAtFormatted
+      trialSubscription.recurly.trialEndsAtFormatted!
     )
     expect(endDate.length).to.equal(2)
   })
@@ -215,7 +208,7 @@ describe('<ActiveSubscription />', function () {
   it('shows cancel UI and sends event', function () {
     render(
       <SubscriptionDashboardProvider>
-        <ActiveSubsciption subscription={annualActiveSubscription} />
+        <ActiveSubscription subscription={annualActiveSubscription} />
       </SubscriptionDashboardProvider>
     )
     // before button clicked

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

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react'
-import { ExpiredSubsciption } from '../../../../../../../frontend/js/features/subscription/components/dashboard/states/expired'
+import { ExpiredSubscription } from '../../../../../../../frontend/js/features/subscription/components/dashboard/states/expired'
 import { pastDueExpiredSubscription } from '../../../fixtures/subscriptions'
 
-describe('<ExpiredSubsciption />', function () {
+describe('<ExpiredSubscription />', function () {
   beforeEach(function () {
     window.metaAttributesCache = new Map()
   })
@@ -12,7 +12,7 @@ describe('<ExpiredSubsciption />', function () {
   })
 
   it('renders the invoices link', function () {
-    render(<ExpiredSubsciption subscription={pastDueExpiredSubscription} />)
+    render(<ExpiredSubscription subscription={pastDueExpiredSubscription} />)
 
     screen.getByText('View Your Invoices', {
       exact: false,