Add cancellation alert and refactor subscription handling

Added a 'Subscription Cancelled' alert in the billing component to improve visibility of subscription status. Also, removed an unnecessary check for target_account_id in billing-event-handler service as it lead to early exits. Fixed a typo in stripe-webhook-handler service for better consistency in naming conventions.

apps/web/public/locales/en/billing.json

@@ -46,6 +46,7 @@
   "planCardLabel": "Manage your Plan",
   "planPickerAlertErrorTitle": "Error requesting checkout",
   "planPickerAlertErrorDescription": "There was an error requesting checkout. Please try again later.",
+  "subscriptionCancelled": "Subscription Cancelled",
   "cancelSubscriptionDate": "Your subscription will be cancelled at the end of the period",
   "status": {
     "free": {

packages/billing/gateway/src/components/current-subscription-card.tsx

@@ -3,6 +3,7 @@ import { BadgeCheck } from 'lucide-react';
 
 import { BillingConfig, getProductPlanPairByVariantId } from '@kit/billing';
 import { Database } from '@kit/supabase/database';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import {
   Card,
   CardContent,
@@ -108,15 +109,18 @@ export function CurrentSubscriptionCard({
         </If>
 
         <If condition={subscription.cancel_at_period_end}>
-          <div className="flex flex-col space-y-0.5">
+          <Alert variant={'warning'}>
-            <span className="font-semibold">
+            <AlertTitle>
-              <Trans i18nKey="billing:cancelSubscriptionDate" />
+              <Trans i18nKey="billing:subscriptionCancelled" />
-            </span>
+            </AlertTitle>
 
-            <div className={'text-muted-foreground'}>
+            <AlertDescription>
-              <span>{formatDate(subscription.period_ends_at ?? '', 'P')}</span>
+              <Trans i18nKey="billing:cancelSubscriptionDate" />:
-            </div>
+              <span className={'ml-1'}>
-          </div>
+                {formatDate(subscription.period_ends_at ?? '', 'P')}
+              </span>
+            </AlertDescription>
+          </Alert>
         </If>
 
         <div className="flex flex-col space-y-0.5">

packages/billing/gateway/src/server/services/billing-event-handler/billing-event-handler.service.ts

@@ -68,15 +68,6 @@ export class BillingEventHandlerService {
 
         logger.info(ctx, 'Processing subscription updated event ...');
 
-        if (!subscription.target_account_id) {
-          logger.info(
-            `No account id found in subscription. This event may have arrived before we created a subscription. Exiting...`,
-            subscription,
-          );
-
-          return;
-        }
-
         // Handle the subscription updated event
         // here we update the subscription in the database
         const { error } = await client.rpc('upsert_subscription', subscription);

packages/billing/stripe/src/services/stripe-webhook-handler.service.ts

@@ -231,7 +231,7 @@ export class StripeWebhookHandlerService
   ) {
     const subscription = event.data.object;
     const subscriptionId = subscription.id;
-    const accountId = subscription.metadata.account_id as string;
+    const accountId = subscription.metadata.accountId as string;
 
     const payload = this.buildSubscriptionPayload({
       customerId: subscription.customer as string,