From bde8d4801ef00270df1ddcbb277efa03d9183289 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Mon, 22 Jun 2026 12:32:03 -0300
Subject: [PATCH] feat(billing): attach persona to conversion tracking and
 polish annual banner

Send the user's persona on both the server-side subscription.created event and
the client-side checkout.completed/dataLayer purchase event, for ICP analysis.
Hold the processing screen ~5s before redirecting so PostHog and the ad pixels
(Google/Meta via GTM) reliably flush. Sharpen the annual-upgrade banner copy
(lead with '2 months free') and give its check icon a white tile.
---
 .../Controllers/App/BillingController.php     |  1 +
 app/Jobs/PostHog/TrackBilling.php             |  3 +-
 lang/en/billing.php                           |  4 +-
 lang/es/billing.php                           |  4 +-
 lang/pt-BR/billing.php                        |  4 +-
 resources/js/composables/useTracking.ts       |  3 ++
 resources/js/pages/billing/Processing.vue     | 46 ++++++++++++-------
 .../js/pages/settings/account/Billing.vue     |  4 +-
 .../Feature/Jobs/PostHog/TrackBillingTest.php | 14 ++++++
 9 files changed, 58 insertions(+), 25 deletions(-)

diff --git a/app/Http/Controllers/App/BillingController.php b/app/Http/Controllers/App/BillingController.php
index d085906f..e85d36c5 100644
--- a/app/Http/Controllers/App/BillingController.php
+++ b/app/Http/Controllers/App/BillingController.php
@@ -40,6 +40,7 @@ public function processing(Request $request): Response|RedirectResponse
         return Inertia::render('billing/Processing', [
             'subscriptionActive' => $account && $account->subscribed(Account::SUBSCRIPTION_NAME),
             'fromCheckout' => $fromCheckout,
+            'persona' => $request->user()->persona?->value,
             'conversion' => $fromCheckout && $account?->stripe_id
                 ? fn () => $this->buildConversionData($account, $sessionId)
                 : null,
diff --git a/app/Jobs/PostHog/TrackBilling.php b/app/Jobs/PostHog/TrackBilling.php
index 59f2a1a9..5994b0ed 100644
--- a/app/Jobs/PostHog/TrackBilling.php
+++ b/app/Jobs/PostHog/TrackBilling.php
@@ -39,7 +39,7 @@ public function handle(PostHogService $postHog): void
             return;
         }
 
-        $account = Account::with('plan')->find($this->accountId);
+        $account = Account::with(['plan', 'owner'])->find($this->accountId);
 
         if (! $account || ! $account->owner_id) {
             return;
@@ -53,6 +53,7 @@ public function handle(PostHogService $postHog): void
                 'plan' => $account->plan?->name,
                 'plan_slug' => $account->plan?->slug->value,
                 'previous_plan' => $this->previousPlan,
+                'persona' => $account->owner?->persona?->value,
             ],
             $account,
         );
diff --git a/lang/en/billing.php b/lang/en/billing.php
index 196e8e45..ed4ffa1f 100644
--- a/lang/en/billing.php
+++ b/lang/en/billing.php
@@ -10,8 +10,8 @@
     ],
 
     'annual_banner' => [
-        'title' => 'Save 2 months with annual billing',
-        'description' => 'Switch to annual and get 2 months free — pay less every month.',
+        'title' => 'Get 2 months free',
+        'description' => 'Switch to annual billing and pay less every month — same plan, nothing else changes.',
         'cta' => 'Upgrade to annual',
     ],
 
diff --git a/lang/es/billing.php b/lang/es/billing.php
index 9a51050d..deb54eb1 100644
--- a/lang/es/billing.php
+++ b/lang/es/billing.php
@@ -10,8 +10,8 @@
     ],
 
     'annual_banner' => [
-        'title' => 'Ahorra 2 meses con la facturación anual',
-        'description' => 'Cambia al anual y obtén 2 meses gratis — paga menos cada mes.',
+        'title' => 'Consigue 2 meses gratis',
+        'description' => 'Cambia a la facturación anual y paga menos al mes — el mismo plan, sin cambios.',
         'cta' => 'Cambiar a anual',
     ],
 
diff --git a/lang/pt-BR/billing.php b/lang/pt-BR/billing.php
index f78d5879..52e5e9f7 100644
--- a/lang/pt-BR/billing.php
+++ b/lang/pt-BR/billing.php
@@ -10,8 +10,8 @@
     ],
 
     'annual_banner' => [
-        'title' => 'Economize 2 meses com a cobrança anual',
-        'description' => 'Mude para o anual e ganhe 2 meses grátis — pague menos por mês.',
+        'title' => 'Ganhe 2 meses grátis',
+        'description' => 'Mude para a cobrança anual e pague menos por mês — sem mudar nada do seu plano.',
         'cta' => 'Mudar para anual',
     ],
 
diff --git a/resources/js/composables/useTracking.ts b/resources/js/composables/useTracking.ts
index c12b472a..8384a3ef 100644
--- a/resources/js/composables/useTracking.ts
+++ b/resources/js/composables/useTracking.ts
@@ -33,10 +33,12 @@ export const useTracking = () => ({
     trackPurchase: (
         plan: { name: string; interval: string },
         conversion?: { value: number; currency: string; transaction_id: string } | null,
+        persona?: string | null,
     ) => {
         captureEvent('checkout.completed', {
             plan_name: plan.name,
             interval: plan.interval,
+            ...(persona ? { persona } : {}),
             ...(conversion ? {
                 conversion_value: conversion.value,
                 conversion_currency: conversion.currency,
@@ -48,6 +50,7 @@ export const useTracking = () => ({
             event: 'purchase',
             plan_name: plan.name,
             plan_interval: plan.interval,
+            ...(persona ? { persona } : {}),
             ...(conversion ? {
                 conversion_value: conversion.value,
                 conversion_currency: conversion.currency,
diff --git a/resources/js/pages/billing/Processing.vue b/resources/js/pages/billing/Processing.vue
index 96673402..295acb42 100644
--- a/resources/js/pages/billing/Processing.vue
+++ b/resources/js/pages/billing/Processing.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Head, router, usePage, usePoll } from '@inertiajs/vue3';
 import { IconLoader2 } from '@tabler/icons-vue';
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useTracking } from '@/composables/useTracking';
 import { accounts } from '@/routes/app';
@@ -10,9 +10,15 @@ import type { Auth } from '@/types';
 const props = defineProps<{
     subscriptionActive: boolean;
     fromCheckout: boolean;
+    persona?: string | null;
     conversion?: { value: number; currency: string; transaction_id: string } | null;
 }>();
 
+// Hold on the processing screen after firing the purchase event so PostHog and
+// the ad pixels (Google/Meta via dataLayer → GTM) have time to send before we
+// navigate away — an immediate redirect can cut those requests off.
+const REDIRECT_DELAY_MS = 5000;
+
 const page = usePage();
 
 // Polls `auth` alongside so `auth.plan.interval` is fresh once the Stripe
@@ -25,9 +31,10 @@ const { stop } = usePoll(2000, {
 
 const { trackPurchase } = useTracking();
 
-const tracked = ref(false);
+const finishing = ref(false);
+let redirectTimer: ReturnType<typeof setTimeout> | null = null;
 
-const goToAccounts = () => router.visit(accounts.url({ query: { openDialog: true } }));
+const goToAccounts = () => router.visit(accounts.url());
 
 // Fires `checkout.completed` exactly once for a real checkout. A trial-with-card
 // subscription is already `subscribed()` (status `trialing`) by the time the
@@ -36,24 +43,25 @@ const goToAccounts = () => router.visit(accounts.url({ query: { openDialog: true
 // from whichever path runs first (immediate active state or poll transition),
 // gated on `fromCheckout` so back-button/refresh visits don't over-count.
 const completePurchase = () => {
+    if (finishing.value) {
+        return;
+    }
+    finishing.value = true;
     stop();
 
-    if (! tracked.value && props.fromCheckout) {
-        tracked.value = true;
+    const plan = (page.props.auth as Auth | undefined)?.plan;
 
-        const plan = (page.props.auth as Auth | undefined)?.plan;
-        if (plan) {
-            trackPurchase(
-                {
-                    name: plan.name,
-                    interval: plan.interval,
-                },
-                props.conversion ?? null,
-            );
-        }
+    if (props.fromCheckout && plan) {
+        trackPurchase(
+            { name: plan.name, interval: plan.interval },
+            props.conversion ?? null,
+            props.persona ?? null,
+        );
     }
 
-    goToAccounts();
+    // Always hold for the same window before navigating, so PostHog and the ad
+    // pixels (Google/Meta via dataLayer → GTM) reliably flush.
+    redirectTimer = setTimeout(goToAccounts, REDIRECT_DELAY_MS);
 };
 
 watch(
@@ -70,6 +78,12 @@ onMounted(() => {
         completePurchase();
     }
 });
+
+onUnmounted(() => {
+    if (redirectTimer) {
+        clearTimeout(redirectTimer);
+    }
+});
 </script>
 
 <template>
diff --git a/resources/js/pages/settings/account/Billing.vue b/resources/js/pages/settings/account/Billing.vue
index 2d68f155..81241fb1 100644
--- a/resources/js/pages/settings/account/Billing.vue
+++ b/resources/js/pages/settings/account/Billing.vue
@@ -99,8 +99,8 @@ const upgradeToAnnual = (): void => {
                     v-if="showAnnualBanner"
                     class="flex flex-wrap items-center gap-4 rounded-2xl border-2 border-foreground bg-emerald-100 p-5 shadow-2xs"
                 >
-                    <span class="inline-flex size-12 -rotate-3 items-center justify-center rounded-2xl border-2 border-foreground bg-emerald-300 shadow-2xs">
-                        <IconRosetteDiscountCheck class="size-6 text-foreground" stroke-width="2" />
+                    <span class="inline-flex size-12 -rotate-3 items-center justify-center rounded-2xl border-2 border-foreground bg-card shadow-2xs">
+                        <IconRosetteDiscountCheck class="size-6 text-emerald-600" stroke-width="2.25" />
                     </span>
                     <div class="min-w-0 flex-1">
                         <p class="text-base font-bold text-foreground">
diff --git a/tests/Feature/Jobs/PostHog/TrackBillingTest.php b/tests/Feature/Jobs/PostHog/TrackBillingTest.php
index 5e0e941b..5a6d0ecb 100644
--- a/tests/Feature/Jobs/PostHog/TrackBillingTest.php
+++ b/tests/Feature/Jobs/PostHog/TrackBillingTest.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 use App\Enums\PostHog\BillingEvent;
+use App\Enums\User\Persona;
 use App\Jobs\PostHog\SendEvent;
 use App\Jobs\PostHog\SyncUser;
 use App\Jobs\PostHog\TrackBilling;
@@ -50,6 +51,19 @@
     });
 });
 
+test('handle forwards the owner persona as an event property', function () {
+    $this->user->update(['persona' => Persona::Agency->value]);
+    Queue::fake();
+
+    (new TrackBilling((string) $this->account->id, BillingEvent::Created, $this->payload))
+        ->handle(app(PostHogService::class));
+
+    Queue::assertPushed(
+        SendEvent::class,
+        fn ($job) => ($job->payload['properties']['persona'] ?? null) === Persona::Agency->value,
+    );
+});
+
 test('handle forwards previousPlan as a property when supplied', function () {
     Queue::fake();