From bcd7bc4ea698e99567a445b94b652d335c19930c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Wed, 19 Jul 2023 16:44:07 +0200
Subject: [PATCH] chore: copy adjustments for org-level-billing

---
 .../BillingBreakdown/BillingBreakdown.tsx     |  6 ++--
 .../DeletePaymentMethodModal.tsx              | 11 ++-----
 .../Subscription/DowngradeModal.tsx           | 32 +++++++++----------
 .../MigrateOrganizationBillingButton.tsx      | 14 ++++++--
 4 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/BillingBreakdown/BillingBreakdown.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/BillingBreakdown/BillingBreakdown.tsx
index 3a4ad729d1e..102279e1481 100644
--- a/studio/components/interfaces/Organization/BillingSettingsV2/BillingBreakdown/BillingBreakdown.tsx
+++ b/studio/components/interfaces/Organization/BillingSettingsV2/BillingBreakdown/BillingBreakdown.tsx
@@ -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>
             )}
 
diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/PaymentMethods/DeletePaymentMethodModal.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/PaymentMethods/DeletePaymentMethodModal.tsx
index cc05e5f1b6b..68bc419fa7e 100644
--- a/studio/components/interfaces/Organization/BillingSettingsV2/PaymentMethods/DeletePaymentMethodModal.tsx
+++ b/studio/components/interfaces/Organization/BillingSettingsV2/PaymentMethods/DeletePaymentMethodModal.tsx
@@ -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>
diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/DowngradeModal.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/DowngradeModal.tsx
index 6ea19500782..073d71f5c03 100644
--- a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/DowngradeModal.tsx
+++ b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/DowngradeModal.tsx
@@ -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.
diff --git a/studio/components/interfaces/Organization/GeneralSettings/MigrateOrganizationBillingButton.tsx b/studio/components/interfaces/Organization/GeneralSettings/MigrateOrganizationBillingButton.tsx
index a08dbc29da0..ca259432a49 100644
--- a/studio/components/interfaces/Organization/GeneralSettings/MigrateOrganizationBillingButton.tsx
+++ b/studio/components/interfaces/Organization/GeneralSettings/MigrateOrganizationBillingButton.tsx
@@ -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 />