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