From bd808b6fb484e9fb06b0f744096e97372d11ea53 Mon Sep 17 00:00:00 2001
From: Thomas <31189692+ecktoteckto@users.noreply.github.com>
Date: Wed, 10 Jan 2024 12:49:49 +0100
Subject: [PATCH] chore: Improves add-on upgrade pages (#20263)[GEN-7453]

* Display customized billling-related text based on whether billing is done by Supabase or partner

* Add warning to PITR page about cancellation of scheduled subscription change

* Remove outdated code for project-based billing
---
 .../Addons/ComputeInstanceSidePanel.tsx       | 50 +++++++------------
 .../Settings/Addons/CustomDomainSidePanel.tsx | 27 +++++++---
 .../Settings/Addons/PITRSidePanel.tsx         | 39 ++++++++++++---
 3 files changed, 69 insertions(+), 47 deletions(-)

diff --git a/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx
index d23c3aaa614..cb8e22e1db1 100644
--- a/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx
+++ b/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx
@@ -383,38 +383,22 @@ const ComputeInstanceSidePanel = () => {
               </p>
             )}
 
-            {hasChanges &&
-              (selectedCategory !== 'micro' && selectedCompute?.price_interval === 'monthly' ? (
-                // Monthly payment with project-level subscription
-                <p className="text-sm text-foreground-light">
-                  Upon clicking confirm, the amount of{' '}
-                  <span className="text-foreground">
-                    ${selectedCompute?.price.toLocaleString()}
-                  </span>{' '}
-                  will be added to your monthly invoice. Any previous compute addon is prorated and
-                  you're immediately charged for the remaining days of your billing cycle. The addon
-                  is prepaid per month and in case of a downgrade, you get credits for the remaining
-                  time.
-                </p>
-              ) : selectedCategory !== 'micro' ? (
-                // Hourly usage-billing with org-based subscription
-                <p className="text-sm text-foreground-light">
-                  There are no immediate charges when changing compute. Compute Hours are a
-                  usage-based item and you're billed at the end of your billing cycle based on your
-                  compute usage. Read more about{' '}
-                  <Link
-                    href="https://supabase.com/docs/guides/platform/org-based-billing#usage-based-billing-for-compute"
-                    target="_blank"
-                    rel="noreferrer"
-                    className="underline"
-                  >
-                    Compute Billing
-                  </Link>
-                  .
-                </p>
-              ) : (
-                <></>
-              ))}
+            {hasChanges && selectedCategory !== 'micro' && (
+              <p className="text-sm text-foreground-light">
+                There are no immediate charges when changing compute. Compute Hours are a
+                usage-based item and you're billed at the end of your billing cycle based on your
+                compute usage. Read more about{' '}
+                <Link
+                  href="https://supabase.com/docs/guides/platform/org-based-billing#usage-based-billing-for-compute"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="underline"
+                >
+                  Compute Billing
+                </Link>
+                .
+              </p>
+            )}
 
             {hasChanges && !blockMicroDowngradeDueToPitr && (
               <Alert
@@ -453,7 +437,7 @@ const ComputeInstanceSidePanel = () => {
                   <IconAlertTriangle className="h-4 w-4" />
                   <AlertDescription_Shadcn_>
                     You have a scheduled subscription change that will be canceled if you change
-                    your PITR add on.
+                    your Optimized Compute add on.
                   </AlertDescription_Shadcn_>
                 </Alert_Shadcn_>
               )}
diff --git a/apps/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx
index b1567c8d2e5..8d1e8f63e01 100644
--- a/apps/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx
+++ b/apps/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx
@@ -244,19 +244,32 @@ const CustomDomainSidePanel = () => {
             <>
               {selectedOption === 'cd_none' ||
               (selectedCustomDomain?.price ?? 0) < (subscriptionCDOption?.variant.price ?? 0) ? (
-                <p className="text-sm text-foreground-light">
-                  Upon clicking confirm, the amount of that's unused during the current billing
-                  cycle will be returned as credits that can be used for subsequent billing cycles
-                </p>
+                subscription?.billing_via_partner === false && (
+                  <p className="text-sm text-foreground-light">
+                    Upon clicking confirm, the add-on is removed immediately and any unused time in
+                    the current billing cycle is added as prorated credits to your organization and
+                    used in subsequent billing cycles.
+                  </p>
+                )
               ) : (
                 <p className="text-sm text-foreground-light">
                   Upon clicking confirm, the amount of{' '}
                   <span className="text-foreground">
                     ${selectedCustomDomain?.price.toLocaleString()}
                   </span>{' '}
-                  will be added to your monthly invoice. You're immediately charged for the
-                  remaining days of your billing cycle. The addon is prepaid per month and in case
-                  of a downgrade, you get credits for the remaining time.
+                  will be added to your monthly invoice.{' '}
+                  {subscription?.billing_via_partner ? (
+                    <>
+                      For the current billing cycle you'll be charged a prorated amount at the end
+                      of the cycle.{' '}
+                    </>
+                  ) : (
+                    <>
+                      The addon is prepaid per month and in case of a downgrade, you get credits for
+                      the remaining time. For the current billing cycle you're immediately charged a
+                      prorated amount for the remaining days.
+                    </>
+                  )}
                 </p>
               )}
 
diff --git a/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx
index 75a2c7d898c..dbeb42c322d 100644
--- a/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx
+++ b/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx
@@ -23,6 +23,7 @@ import {
   IconExternalLink,
   Radio,
   SidePanel,
+  IconAlertTriangle,
 } from 'ui'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 import { AlertTriangleIcon } from 'lucide-react'
@@ -341,19 +342,43 @@ const PITRSidePanel = () => {
             <>
               {selectedOption === 'pitr_0' ||
               (selectedPitr?.price ?? 0) < (subscriptionPitr?.variant.price ?? 0) ? (
-                <p className="text-sm text-foreground-light">
-                  Upon clicking confirm, the amount of that's unused during the current billing
-                  cycle will be returned as credits that can be used for subsequent billing cycles
-                </p>
+                subscription?.billing_via_partner === false && (
+                  <p className="text-sm text-foreground-light">
+                    Upon clicking confirm, the add-on is removed immediately and any unused time in
+                    the current billing cycle is added as prorated credits to your organization and
+                    used in subsequent billing cycles.
+                  </p>
+                )
               ) : (
                 <p className="text-sm text-foreground-light">
                   Upon clicking confirm, the amount of{' '}
                   <span className="text-foreground">${selectedPitr?.price.toLocaleString()}</span>{' '}
-                  will be added to your monthly invoice. You're immediately charged for the
-                  remaining days of your billing cycle. The addon is prepaid per month and in case
-                  of a downgrade, you get credits for the remaining time.
+                  will be added to your monthly invoice.{' '}
+                  {subscription?.billing_via_partner ? (
+                    <>
+                      For the current billing cycle you'll be charged a prorated amount at the end
+                      of the cycle.{' '}
+                    </>
+                  ) : (
+                    <>
+                      The addon is prepaid per month and in case of a downgrade, you get credits for
+                      the remaining time. For the current billing cycle you're immediately charged a
+                      prorated amount for the remaining days.
+                    </>
+                  )}
                 </p>
               )}
+
+              {subscription?.billing_via_partner &&
+                subscription.scheduled_plan_change?.target_plan !== undefined && (
+                  <Alert_Shadcn_ variant={'warning'} className="mb-2">
+                    <IconAlertTriangle className="h-4 w-4" />
+                    <AlertDescription_Shadcn_>
+                      You have a scheduled subscription change that will be canceled if you change
+                      your PITR add on.
+                    </AlertDescription_Shadcn_>
+                  </Alert_Shadcn_>
+                )}
             </>
           )}
         </div>