From d8e44772f29676cf44dad18356f3b5ff173c253c Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Sun, 14 Apr 2024 19:16:18 +0800
Subject: [PATCH] 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       |  1 +
 .../components/current-subscription-card.tsx  | 20 +++++++++++--------
 .../billing-event-handler.service.ts          |  9 ---------
 .../stripe-webhook-handler.service.ts         |  2 +-
 4 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/apps/web/public/locales/en/billing.json b/apps/web/public/locales/en/billing.json
index 76f604173..e2d087566 100644
--- a/apps/web/public/locales/en/billing.json
+++ b/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": {
diff --git a/packages/billing/gateway/src/components/current-subscription-card.tsx b/packages/billing/gateway/src/components/current-subscription-card.tsx
index 0d2779c08..8c65b0dbb 100644
--- a/packages/billing/gateway/src/components/current-subscription-card.tsx
+++ b/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">
-            <span className="font-semibold">
-              <Trans i18nKey="billing:cancelSubscriptionDate" />
-            </span>
+          <Alert variant={'warning'}>
+            <AlertTitle>
+              <Trans i18nKey="billing:subscriptionCancelled" />
+            </AlertTitle>
 
-            <div className={'text-muted-foreground'}>
-              <span>{formatDate(subscription.period_ends_at ?? '', 'P')}</span>
-            </div>
-          </div>
+            <AlertDescription>
+              <Trans i18nKey="billing:cancelSubscriptionDate" />:
+              <span className={'ml-1'}>
+                {formatDate(subscription.period_ends_at ?? '', 'P')}
+              </span>
+            </AlertDescription>
+          </Alert>
         </If>
 
         <div className="flex flex-col space-y-0.5">
diff --git a/packages/billing/gateway/src/server/services/billing-event-handler/billing-event-handler.service.ts b/packages/billing/gateway/src/server/services/billing-event-handler/billing-event-handler.service.ts
index 1701f7257..4e296e7ea 100644
--- a/packages/billing/gateway/src/server/services/billing-event-handler/billing-event-handler.service.ts
+++ b/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);
diff --git a/packages/billing/stripe/src/services/stripe-webhook-handler.service.ts b/packages/billing/stripe/src/services/stripe-webhook-handler.service.ts
index 6fd26675f..d02d5377f 100644
--- a/packages/billing/stripe/src/services/stripe-webhook-handler.service.ts
+++ b/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,