github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
[web] Continue migration of personal subscription dash to React

GitOrigin-RevId: 412301dad0a04fa6e7b8712ad919c4f67d0bbfe2
This commit is contained in:
Jessica Lawshe 2023-01-31 09:56:34 -06:00 committed by Copybot
parent b7108f7874
commit df532c9737
7 changed files with 60 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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>

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

@ -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"

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

@ -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 />,

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

@ -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

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

@ -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

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

@ -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

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

@ -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,