chore: remove addon confirm modal and show message instead (#22616)

* Remove addon confirm modal and show message instead * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * Update BillingProductAddon.tsx * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update billing mock date * Update BillingProductAddon.tsx --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Jun 3, 2024 · 5ef5937 · 5ef5937
1 parent 5b20353
commit 5ef5937
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 73 deletions.
diff --git a/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--dark.png b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--dark.png
diff --git a/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--light.png b/frontend/__snapshots__/scenes-other-billing-v2--billing-v-2--light.png
diff --git a/frontend/src/scenes/billing/Billing.stories.tsx b/frontend/src/scenes/billing/Billing.stories.tsx
@@ -17,7 +17,7 @@ const meta: Meta = {
     parameters: {
         layout: 'fullscreen',
         viewMode: 'story',
-        mockDate: '2023-05-25',
+        mockDate: '2024-03-10',
     },
     decorators: [
         mswDecorator({

diff --git a/frontend/src/scenes/billing/BillingProductAddon.tsx b/frontend/src/scenes/billing/BillingProductAddon.tsx
@@ -3,7 +3,7 @@ import { LemonButton, LemonSelectOptions, LemonTag, Link, Tooltip } from '@posth
 import { useActions, useValues } from 'kea'
 import { UNSUBSCRIBE_SURVEY_ID } from 'lib/constants'
 import { More } from 'lib/lemon-ui/LemonButton/More'
-import { useRef } from 'react'
+import { ReactNode, useMemo, useRef } from 'react'
 import { getProductIcon } from 'scenes/products/Products'
 
 import { BillingProductV2AddonType } from '~/types'
@@ -13,16 +13,47 @@ import { billingProductLogic } from './billingProductLogic'
 import { ProductPricingModal } from './ProductPricingModal'
 import { UnsubscribeSurveyModal } from './UnsubscribeSurveyModal'
 
+const formatFlatRate = (flatRate: number, unit: string | null): string | ReactNode => {
+    if (!unit) {
+        return `$${flatRate}`
+    }
+    return (
+        <span className="space-x-0.5">
+            <span>${Number(flatRate)}</span>
+            <span>/</span>
+            <span>{unit}</span>
+        </span>
+    )
+}
+
 export const BillingProductAddon = ({ addon }: { addon: BillingProductV2AddonType }): JSX.Element => {
     const productRef = useRef<HTMLDivElement | null>(null)
-    const { billing, redirectPath, billingError } = useValues(billingLogic)
+    const { billing, redirectPath, billingError, daysTotal, daysRemaining } = useValues(billingLogic)
     const { isPricingModalOpen, currentAndUpgradePlans, surveyID, billingProductLoading } = useValues(
         billingProductLogic({ product: addon, productRef })
     )
     const { toggleIsPricingModalOpen, reportSurveyShown, setSurveyResponse, initiateProductUpgrade } = useActions(
         billingProductLogic({ product: addon })
     )
 
+    const upgradePlan = currentAndUpgradePlans?.upgradePlan
+
+    const prorationAmount = useMemo(
+        () =>
+            upgradePlan?.unit_amount_usd
+                ? (parseInt(upgradePlan?.unit_amount_usd) * ((daysRemaining || 1) / (daysTotal || 1))).toFixed(0)
+                : 0,
+        [upgradePlan, daysRemaining, daysTotal]
+    )
+
+    const isProrated = useMemo(
+        () =>
+            billing?.has_active_subscription && upgradePlan?.unit_amount_usd
+                ? prorationAmount !== parseInt(upgradePlan?.unit_amount_usd || '')
+                : false,
+        [billing?.has_active_subscription, prorationAmount]
+    )
+
     const productType = { plural: `${addon.unit}s`, singular: addon.unit }
     const tierDisplayOptions: LemonSelectOptions<string> = [
         { label: `Per ${productType.singular}`, value: 'individual' },
@@ -81,66 +112,85 @@ export const BillingProductAddon = ({ addon }: { addon: BillingProductV2AddonTyp
                         )}
                     </div>
                 </div>
-                <div className="ml-4 mr-4 mt-2 self-center flex items-center gap-x-3 whitespace-nowrap">
-                    {addon.docs_url && (
-                        <LemonButton icon={<IconDocument />} size="small" to={addon.docs_url} tooltip="Read the docs" />
-                    )}
-                    {addon.subscribed && !addon.inclusion_only ? (
-                        <>
-                            <More
-                                overlay={
-                                    <>
-                                        <LemonButton
-                                            fullWidth
-                                            onClick={() => {
-                                                setSurveyResponse(addon.type, '$survey_response_1')
-                                                reportSurveyShown(UNSUBSCRIBE_SURVEY_ID, addon.type)
-                                            }}
-                                        >
-                                            Remove addon
-                                        </LemonButton>
-                                    </>
-                                }
+                <div>
+                    <div className="ml-4 mt-2 self-center flex items-center gap-x-3 whitespace-nowrap">
+                        {addon.docs_url && (
+                            <LemonButton
+                                icon={<IconDocument />}
+                                size="small"
+                                to={addon.docs_url}
+                                tooltip="Read the docs"
                             />
-                        </>
-                    ) : addon.included_with_main_product ? (
-                        <LemonTag type="completion" icon={<IconCheckCircle />}>
-                            Included with plan
-                        </LemonTag>
-                    ) : (
-                        <>
-                            {currentAndUpgradePlans?.upgradePlan?.flat_rate ? (
-                                <h4 className="leading-5 font-bold mb-0 space-x-0.5">
-                                    <span>${Number(currentAndUpgradePlans?.upgradePlan?.unit_amount_usd)}</span>
-                                    <span>/</span>
-                                    <span>{currentAndUpgradePlans?.upgradePlan?.unit}</span>
-                                </h4>
-                            ) : (
-                                <LemonButton
-                                    type="secondary"
-                                    onClick={() => {
-                                        toggleIsPricingModalOpen()
-                                    }}
-                                >
-                                    View pricing
-                                </LemonButton>
-                            )}
-                            {!addon.inclusion_only && (
-                                <LemonButton
-                                    type="primary"
-                                    icon={<IconPlus />}
-                                    size="small"
-                                    disableClientSideRouting
-                                    disabledReason={billingError && billingError.message}
-                                    loading={billingProductLoading === addon.type}
-                                    onClick={() =>
-                                        initiateProductUpgrade(addon, currentAndUpgradePlans?.upgradePlan, redirectPath)
+                        )}
+                        {addon.subscribed && !addon.inclusion_only ? (
+                            <>
+                                <More
+                                    overlay={
+                                        <>
+                                            <LemonButton
+                                                fullWidth
+                                                onClick={() => {
+                                                    setSurveyResponse(addon.type, '$survey_response_1')
+                                                    reportSurveyShown(UNSUBSCRIBE_SURVEY_ID, addon.type)
+                                                }}
+                                            >
+                                                Remove addon
+                                            </LemonButton>
+                                        </>
                                     }
-                                >
-                                    Add
-                                </LemonButton>
-                            )}
-                        </>
+                                />
+                            </>
+                        ) : addon.included_with_main_product ? (
+                            <LemonTag type="completion" icon={<IconCheckCircle />}>
+                                Included with plan
+                            </LemonTag>
+                        ) : (
+                            <>
+                                {currentAndUpgradePlans?.upgradePlan?.flat_rate ? (
+                                    <h4 className="leading-5 font-bold mb-0 space-x-0.5">
+                                        <span>
+                                            {formatFlatRate(Number(upgradePlan?.unit_amount_usd), upgradePlan?.unit)}
+                                        </span>
+                                    </h4>
+                                ) : (
+                                    <LemonButton
+                                        type="secondary"
+                                        onClick={() => {
+                                            toggleIsPricingModalOpen()
+                                        }}
+                                    >
+                                        View pricing
+                                    </LemonButton>
+                                )}
+                                {!addon.inclusion_only && (
+                                    <LemonButton
+                                        type="primary"
+                                        icon={<IconPlus />}
+                                        size="small"
+                                        disableClientSideRouting
+                                        disabledReason={billingError && billingError.message}
+                                        loading={billingProductLoading === addon.type}
+                                        onClick={() =>
+                                            initiateProductUpgrade(
+                                                addon,
+                                                currentAndUpgradePlans?.upgradePlan,
+                                                redirectPath
+                                            )
+                                        }
+                                    >
+                                        Add
+                                    </LemonButton>
+                                )}
+                            </>
+                        )}
+                    </div>
+                    {!addon.inclusion_only && isProrated && (
+                        <p className="mt-2 text-xs text-muted text-right">
+                            ${prorationAmount} charged today (pro-rated),
+                            <br />
+                            then {formatFlatRate(Number(upgradePlan?.unit_amount_usd), upgradePlan?.unit)} starting next
+                            invoice.
+                        </p>
                     )}
                 </div>
             </div>

diff --git a/frontend/src/scenes/billing/billingProductLogic.ts b/frontend/src/scenes/billing/billingProductLogic.ts
@@ -1,7 +1,6 @@
 import { LemonDialog } from '@posthog/lemon-ui'
 import { actions, connect, events, kea, key, listeners, path, props, reducers, selectors } from 'kea'
 import { forms } from 'kea-forms'
-import { confirmUpgradeModalLogic } from 'lib/components/ConfirmUpgradeModal/confirmUpgradeModalLogic'
 import posthog from 'posthog-js'
 import React from 'react'
 
@@ -37,8 +36,6 @@ export const billingProductLogic = kea<billingProductLogicType>([
                 'setScrollToProductKey',
                 'deactivateProductSuccess',
             ],
-            confirmUpgradeModalLogic,
-            ['showConfirmUpgradeModal'],
         ],
     }),
     actions({
@@ -331,15 +328,7 @@ export const billingProductLogic = kea<billingProductLogicType>([
         },
         initiateProductUpgrade: ({ plan, product, redirectPath }) => {
             actions.setBillingProductLoading(product.type)
-            if (values.currentAndUpgradePlans.upgradePlan?.flat_rate) {
-                actions.showConfirmUpgradeModal(
-                    values.currentAndUpgradePlans.upgradePlan,
-                    () => actions.handleProductUpgrade(product, plan, redirectPath),
-                    () => actions.setBillingProductLoading(null)
-                )
-            } else {
-                actions.handleProductUpgrade(product, plan, redirectPath)
-            }
+            actions.handleProductUpgrade(product, plan, redirectPath)
         },
         handleProductUpgrade: ({ plan, product, redirectPath }) => {
             window.location.href = `/api/billing/activation?products=${product.type}:${plan?.plan_key}${