chore: copy adjustments for org-level-billing

This commit is contained in:
Kevin Grüneberg committed 2023-07-19 16:44:07 +02:00
1 parent 1088733c6a
commit bcd7bc4ea6
4 files changed
+32 -31

No files matched your search

@@ -91,7 +91,7 @@ const BillingBreakdown = () => {
<Alert
withIcon
variant="danger"
title="Your project's usage has exceeded its included quota"
title="Your organization's usage has exceeded its included quota"
actions={[
<Button key="upgrade-button" type="default" className="ml-8" onClick={() => {}}>
{currentPlan?.id === 'free' ? 'Upgrade plan' : 'Change spend cap'}
@@ -100,8 +100,8 @@ const BillingBreakdown = () => {
>
Your project can become unresponsive or enter read only mode.{' '}
{currentPlan?.id === 'free'
? 'Please upgrade to the Pro plan to ensure that your project remains available.'
: 'Please disable spend cap to ensure that your project remains available.'}
? 'Please upgrade to the Pro plan to ensure that your projects remain available.'
: 'Please disable spend cap to ensure that your projects remain available.'}
</Alert>
)}
@@ -59,15 +59,8 @@ const DeletePaymentMethodModal = ({
>
<div className="py-4">
<Modal.Content>
<Alert
withIcon
variant="warning"
title="This will permanently delete your payment method."
>
<p className="">
Any subscription currently charging this payment method will start charging your
default payment method.
</p>
<Alert withIcon variant="info" title="This will permanently delete your payment method.">
<p>You can re-add the payment method any time.</p>
</Alert>
</Modal.Content>
</div>
@@ -1,4 +1,3 @@
import InformationBox from 'components/ui/InformationBox'
import { OrgSubscription, ProjectAddon } from 'data/subscriptions/org-subscription-query'
import { PricingInformation } from 'shared-data'
import { Alert, IconAlertOctagon, IconMinusCircle, IconPauseCircle, Modal } from 'ui'
@@ -24,8 +23,8 @@ const ProjectDowngradeListItem = ({ projectAddon }: { projectAddon: ProjectAddon
{needsRestart ? (
<>
{' '}
Project will also <span className="text-amber-900">need to be restarted</span> due to
change in compute instance
Project will also <span className="font-bold">need to be restarted</span> due to change in
compute instance
</>
) : (
''
@@ -55,10 +54,10 @@ const DowngradeModal = ({
<Alert
withIcon
variant="warning"
title="Downgrading to the free plan will lead to reductions in your project's capacity"
title="Downgrading to the free plan will lead to reductions in your organization's quota"
>
<p>
If you're already past the limits of the free plan, your project could become
If you're already past the limits of the free plan, your projects could become
unresponsive or enter read only mode.
</p>
</Alert>
@@ -79,23 +78,24 @@ const DowngradeModal = ({
<span>Add ons from all projects under this organization will be removed.</span>
</div>
{(subscription?.project_addons.length ?? 0) > 0 && (
<InformationBox
title={`Warning: A total of ${subscription?.project_addons.length} project(s) will be affected from the downgrade`}
description={
<ul className="space-y-1 max-h-[100px] overflow-y-auto">
{subscription?.project_addons.map((project) => (
<ProjectDowngradeListItem key={project.ref} projectAddon={project} />
))}
</ul>
}
/>
<Alert
title={`A total of ${subscription?.project_addons.length} project(s) will be affected from the downgrade`}
variant="warning"
withIcon
>
<ul className="space-y-1 max-h-[100px] overflow-y-auto">
{subscription?.project_addons.map((project) => (
<ProjectDowngradeListItem key={project.ref} projectAddon={project} />
))}
</ul>
</Alert>
)}
</li>
<li className="flex gap-3">
<IconAlertOctagon w={14} className="flex-shrink-0" />
<div>
<strong>Before you downgrading to the {selectedPlan?.name} plan, consider:</strong>
<strong>Before you downgrade to the {selectedPlan?.name} plan, consider:</strong>
<ul className="space-y-2 mt-2">
<li className="list-disc ml-4">
Your projects no longer require their respective add ons.
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect, useMemo, useState } from 'react'
import { Alert, Button, Form, IconHelpCircle, Listbox, Loading, Modal, Toggle } from 'ui'
import { Alert, Button, IconHelpCircle, Listbox, Loading, Modal, Toggle } from 'ui'
import { SpendCapModal } from 'components/interfaces/BillingV2'
import { useOrganizationBillingMigrationMutation } from 'data/organizations/organization-migrate-billing-mutation'
@@ -118,8 +118,7 @@ const MigrateOrganizationBillingButton = observer(() => {
<div className="text-sm space-y-2">
<p>
Migrating to new organization-level billing combines subscriptions for all
projects in the organization into a single subscription. This cannot be
reversed.{' '}
projects in the organization into a single subscription.
</p>
<p>
@@ -139,6 +138,15 @@ const MigrateOrganizationBillingButton = observer(() => {
</p>
</div>
</Alert>
<Alert title="Irreversible" withIcon variant="danger">
<div className="text-sm">
<p>
Once migrated to the new organization-level billing, you cannot go back to the
old project-level billing.
</p>
</div>
</Alert>
</div>
</Modal.Content>
<Modal.Separator />