Merge pull request #21699 from overleaf/jdt-hide-cancel-addon-when-cancelled-already

[Web] Handle add-on cancellation states on subscriptions page

GitOrigin-RevId: 2b834df6747560d54b7dc22e3870ee7a7e236498
This commit is contained in:
Jimmy Domagala-Tang 2024-11-13 07:11:55 -08:00 committed by Copybot
parent 1253d36dd3
commit 19dc975e3a

View file

@ -10,10 +10,12 @@ import { ConfirmChangePlanModal } from './change-plan/modals/confirm-change-plan
import { KeepCurrentPlanModal } from './change-plan/modals/keep-current-plan-modal' import { KeepCurrentPlanModal } from './change-plan/modals/keep-current-plan-modal'
import { ChangeToGroupModal } from './change-plan/modals/change-to-group-modal' import { ChangeToGroupModal } from './change-plan/modals/change-to-group-modal'
import { CancelAiAddOnModal } from './change-plan/modals/cancel-ai-add-on-modal' import { CancelAiAddOnModal } from './change-plan/modals/cancel-ai-add-on-modal'
import { PendingRecurlyPlan } from '../../../../../../../../types/subscription/plan'
import { import {
AI_STANDALONE_PLAN_CODE,
ADD_ON_NAME, ADD_ON_NAME,
AI_ADD_ON_CODE,
AI_STANDALONE_PLAN_NAME, AI_STANDALONE_PLAN_NAME,
AI_STANDALONE_PLAN_CODE,
AI_STANDALONE_ANNUAL_PLAN_CODE, AI_STANDALONE_ANNUAL_PLAN_CODE,
} from '../../../../data/add-on-codes' } from '../../../../data/add-on-codes'
import { CancelSubscriptionButton } from './cancel-subscription-button' import { CancelSubscriptionButton } from './cancel-subscription-button'
@ -110,6 +112,7 @@ export function ActiveAiAddonSubscription({
<PlanWithAddonsActions <PlanWithAddonsActions
handlePlanChange={handlePlanChange} handlePlanChange={handlePlanChange}
handleCancelClick={handleCancelClick} handleCancelClick={handleCancelClick}
subscription={subscription}
/> />
)} )}
</p> </p>
@ -155,9 +158,8 @@ function StandaloneAiPlanActions({
<OLButton variant="secondary" onClick={handlePlanChange}> <OLButton variant="secondary" onClick={handlePlanChange}>
{t('upgrade')} {t('upgrade')}
</OLButton> </OLButton>
<OLButton variant="danger-ghost" onClick={handleCancelClick}> <OLButton variant="danger-ghost" onClick={handleCancelClick}>
{t('cancel_add_on')} {t('remove_add_on')}
</OLButton> </OLButton>
</> </>
) )
@ -166,11 +168,25 @@ function StandaloneAiPlanActions({
function PlanWithAddonsActions({ function PlanWithAddonsActions({
handlePlanChange, handlePlanChange,
handleCancelClick, handleCancelClick,
subscription,
}: { }: {
handlePlanChange(): void handlePlanChange(): void
handleCancelClick(): void handleCancelClick(): void
subscription: RecurlySubscription
}) { }) {
const { t } = useTranslation() const { t } = useTranslation()
const pendingPlan = subscription.pendingPlan as PendingRecurlyPlan
const hasAiAddon = subscription.addOns?.some(
addOn => addOn.addOnCode === AI_ADD_ON_CODE
)
const pendingCancellation = Boolean(
hasAiAddon &&
pendingPlan &&
!pendingPlan.addOns?.some(addOn => addOn.add_on_code === AI_ADD_ON_CODE)
)
return ( return (
<> <>
<OLButton variant="secondary" onClick={handlePlanChange}> <OLButton variant="secondary" onClick={handlePlanChange}>
@ -178,9 +194,11 @@ function PlanWithAddonsActions({
</OLButton> </OLButton>
<> <>
{!pendingCancellation && (
<OLButton variant="danger-ghost" onClick={handleCancelClick}> <OLButton variant="danger-ghost" onClick={handleCancelClick}>
{t('remove_add_on')} {t('remove_add_on')}
</OLButton>{' '} </OLButton>
)}
<CancelSubscriptionButton /> <CancelSubscriptionButton />
</> </>
</> </>