From 84be3315f2a13191688bd3c0fe70e8064c7138dc Mon Sep 17 00:00:00 2001
From: Zach Waterfield <zlwaterfield@gmail.com>
Date: Wed, 11 Sep 2024 15:10:59 -0400
Subject: [PATCH] chore: annual credits improvements (#24918)

---
 frontend/src/scenes/billing/CreditCTAHero.tsx |  5 ++--
 .../scenes/billing/PurchaseCreditsModal.tsx   | 12 ++++++----
 frontend/src/scenes/billing/billingLogic.tsx  | 24 ++++++++++++-------
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/frontend/src/scenes/billing/CreditCTAHero.tsx b/frontend/src/scenes/billing/CreditCTAHero.tsx
index 652698e29465d..b32fb6d29150c 100644
--- a/frontend/src/scenes/billing/CreditCTAHero.tsx
+++ b/frontend/src/scenes/billing/CreditCTAHero.tsx
@@ -29,11 +29,10 @@ export const CreditCTAHero = (): JSX.Element | null => {
                     <>
                         <h1 className="mb-0">We're applying your credits</h1>
                         <p className="mt-2 mb-0 max-w-xl">
-                            Your credits will be ready within 24 hours of payment.
+                            Your credits will be ready within 24 hours of payment.{' '}
                             {selfServeCreditOverview.collection_method === 'send_invoice'
                                 ? "You'll receive an email with a link to pay the invoice. Please make sure to pay that as soon as possible so we can apply the credits to your account."
-                                : "We'll will charge your card on file."}{' '}
-                            We'll let you know if there are any issues!{' '}
+                                : "We'll will charge your card on file and we'll email you if there are any issues!"}
                         </p>
                         {selfServeCreditOverview.invoice_url && (
                             <LemonButton
diff --git a/frontend/src/scenes/billing/PurchaseCreditsModal.tsx b/frontend/src/scenes/billing/PurchaseCreditsModal.tsx
index 8c7f136fce82c..34f30ce80fa34 100644
--- a/frontend/src/scenes/billing/PurchaseCreditsModal.tsx
+++ b/frontend/src/scenes/billing/PurchaseCreditsModal.tsx
@@ -20,7 +20,7 @@ export const PurchaseCreditsModal = (): JSX.Element | null => {
         <LemonModal
             onClose={() => showPurchaseCreditsModal(false)}
             width="max(44vw)"
-            title="Buy credits in advance, get a discount"
+            title="Buy credits in advance and get a discount"
             footer={
                 <>
                     <LemonButton
@@ -72,7 +72,7 @@ export const PurchaseCreditsModal = (): JSX.Element | null => {
                                 }
                             )}
                         </b>{' '}
-                        creditsfor the year.
+                        credits for the year.
                     </p>
 
                     <LemonField
@@ -183,11 +183,15 @@ export const PurchaseCreditsModal = (): JSX.Element | null => {
                                 options={[
                                     {
                                         value: 'charge_automatically',
-                                        label: `Pay with credit card on file (**** ${selfServeCreditOverview.cc_last_four})`,
+                                        label: selfServeCreditOverview.cc_last_four
+                                            ? `Pay with credit card on file (**** ${selfServeCreditOverview.cc_last_four})`
+                                            : 'Pay with credit card on file',
                                     },
                                     {
                                         value: 'send_invoice',
-                                        label: `Send me an invoice to ${selfServeCreditOverview.email}`,
+                                        label: selfServeCreditOverview.email
+                                            ? `Send me an invoice to ${selfServeCreditOverview.email}`
+                                            : 'Send me an invoice',
                                     },
                                 ]}
                             />
diff --git a/frontend/src/scenes/billing/billingLogic.tsx b/frontend/src/scenes/billing/billingLogic.tsx
index 9900eb5924fd4..56d4f549770f1 100644
--- a/frontend/src/scenes/billing/billingLogic.tsx
+++ b/frontend/src/scenes/billing/billingLogic.tsx
@@ -320,7 +320,10 @@ export const billingLogic = kea<billingLogicType>([
                 loadSelfServeCreditEligible: async () => {
                     const response = await api.get('api/billing/credits/overview')
                     if (!values.creditForm.creditInput) {
-                        actions.setCreditFormValue('creditInput', response.estimated_monthly_credit_amount_usd * 12)
+                        actions.setCreditFormValue(
+                            'creditInput',
+                            Math.round(response.estimated_monthly_credit_amount_usd * 12)
+                        )
                     }
                     return response
                 },
@@ -442,10 +445,11 @@ export const billingLogic = kea<billingLogicType>([
                 collectionMethod: 'charge_automatically',
             },
             submit: async ({ creditInput, collectionMethod }) => {
-                await api.create('api/billing/credits/purchase', {
-                    annual_amount_usd: +Math.round(+creditInput - +creditInput * values.creditDiscount),
-                    collection_method: collectionMethod,
-                })
+                values.computedDiscount * 100,
+                    await api.create('api/billing/credits/purchase', {
+                        annual_amount_usd: +Math.round(+creditInput - +creditInput * values.creditDiscount),
+                        collection_method: collectionMethod,
+                    })
 
                 actions.showPurchaseCreditsModal(false)
                 actions.loadSelfServeCreditEligible()
@@ -468,10 +472,12 @@ export const billingLogic = kea<billingLogicType>([
                         ) : (
                             <>
                                 <p>
-                                    Your card will be charged in the next 3 hours and the credits will be applied to
-                                    your account. Please make sure your{' '}
-                                    <Link to={values.billing?.stripe_portal_url}>card on file</Link> is up to date. You
-                                    will receive an email when the credits are applied.
+                                    Your card will be charged soon and the credits will be applied to your account.
+                                    Please make sure your{' '}
+                                    <Link to={values.billing?.stripe_portal_url} target="_blank">
+                                        card on file
+                                    </Link>{' '}
+                                    is up to date. You will receive an email when the credits are applied.
                                 </p>
                             </>
                         ),