feat(dashboard): Billing settings page in dashboard v2

.cspell.json

@@ -710,6 +710,7 @@
     "truncatewords",
     "xmlschema",
     "jsonify",
+    "hsforms",
     "touchpoint",
     "Angularjs",
     "navigatable"

.github/labeler.yml

@@ -4,6 +4,8 @@
   - apps/worker/**/*
 '@novu/web':
   - apps/web/**/*
+'@novu/dashboard':
+  - apps/dashboard/**/*
 '@novu/ws':
   - apps/ws/**/*
 '@novu/inbound-mail':

apps/api/src/app/testing/billing/get-portal-link.e2e-ee.ts

@@ -35,7 +35,7 @@ describe('Get portal link', async () => {
     });
 
     expect(stub.lastCall.args.at(0)).to.deep.equal({
-      return_url: `${process.env.FRONT_BASE_URL}/settings/billing`,
+      return_url: `${process.env.FRONT_BASE_URL}/manage-account/billing`,
       customer: 'customer_id',
     });
 

apps/dashboard/src/components/billing/active-plan-banner.tsx

@@ -0,0 +1,131 @@
+import { Badge } from '@/components/primitives/badge';
+import { Card } from '@/components/primitives/card';
+import { Progress } from '@/components/primitives/progress';
+import { cn } from '../../utils/ui';
+import { CalendarDays } from 'lucide-react';
+import { PlanActionButton } from './plan-action-button';
+import { Skeleton } from '@/components/primitives/skeleton';
+import { useFetchSubscription } from '../../hooks/use-fetch-subscription';
+
+interface ActivePlanBannerProps {
+  selectedBillingInterval: 'month' | 'year';
+}
+
+export function ActivePlanBanner({ selectedBillingInterval }: ActivePlanBannerProps) {
+  const { subscription, daysLeft } = useFetchSubscription();
+
+  const getProgressColor = (current: number, max: number) => {
+    const percentage = (current / max) * 100;
+    if (percentage > 90) return 'text-destructive';
+    if (percentage > 75) return 'text-warning';
+
+    return '';
+  };
+
+  const getProgressBarColor = (current: number, max: number) => {
+    const percentage = (current / max) * 100;
+    if (percentage > 90) return 'bg-gradient-to-r from-red-500 to-red-400';
+    if (percentage > 75) return 'bg-gradient-to-r from-amber-500 to-amber-400';
+
+    return 'bg-gradient-to-r from-emerald-500 to-emerald-400';
+  };
+
+  const formatDate = (date: string | number) => {
+    return new Date(date).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  return (
+    <div className="mt-6 flex space-y-3">
+      <Card className="mx-auto w-full max-w-[500px] overflow-hidden border shadow-none">
+        <div className="space-y-5 p-5">
+          <div className="flex items-start justify-between gap-4">
+            <div className="space-y-1">
+              <div className="flex items-center gap-3">
+                {!subscription ? (
+                  <Skeleton className="h-7 w-24" />
+                ) : (
+                  <h3 className="text-lg font-semibold capitalize">{subscription.apiServiceLevel?.toLowerCase()}</h3>
+                )}
+                {subscription?.trial.isActive && (
+                  <Badge variant="outline" className="font-medium">
+                    Trial
+                  </Badge>
+                )}
+              </div>
+              {subscription?.trial.isActive && (
+                <div className="text-warning text-sm font-medium">{daysLeft} days left for trial</div>
+              )}
+            </div>
+
+            <PlanActionButton
+              selectedBillingInterval={selectedBillingInterval}
+              variant="outline"
+              size="sm"
+              className="shrink-0"
+            />
+          </div>
+
+          <div className="space-y-4">
+            <div className="text-muted-foreground flex items-center gap-2 text-sm">
+              <CalendarDays className="h-4 w-4" />
+              {!subscription ? (
+                <Skeleton className="h-4 w-48" />
+              ) : (
+                <span>
+                  {formatDate(subscription.currentPeriodStart ?? Date.now())} -{' '}
+                  {formatDate(subscription.currentPeriodEnd ?? Date.now())}
+                </span>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between text-sm">
+                {subscription ? (
+                  <>
+                    <div>
+                      <span
+                        className={cn(
+                          'font-medium',
+                          getProgressColor(subscription.events.current ?? 0, subscription.events.included ?? 0)
+                        )}
+                      >
+                        {subscription.events.current?.toLocaleString() ?? 0}
+                      </span>{' '}
+                      <span className="text-muted-foreground">
+                        of {subscription.events.included?.toLocaleString() ?? 0} events
+                      </span>
+                    </div>
+                    <span className="text-muted-foreground text-xs">Updates hourly</span>
+                  </>
+                ) : (
+                  <>
+                    <Skeleton className="h-4 w-36" />
+                    <Skeleton className="h-4 w-24" />
+                  </>
+                )}
+              </div>
+              {subscription ? (
+                <Progress
+                  value={Math.min(
+                    ((subscription.events.current ?? 0) / (subscription.events.included ?? 0)) * 100,
+                    100
+                  )}
+                  className={cn(
+                    'h-1.5 rounded-lg transition-all duration-300',
+                    getProgressBarColor(subscription.events.current ?? 0, subscription.events.included ?? 0)
+                  )}
+                />
+              ) : (
+                <Skeleton className="h-1.5 w-full" />
+              )}
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

apps/dashboard/src/components/billing/contact-sales-button.tsx

@@ -0,0 +1,44 @@
+import { Button } from '@/components/primitives/button';
+import { ApiServiceLevelEnum } from '@novu/shared';
+import { useState } from 'react';
+import { ContactSalesModal } from './contact-sales-modal';
+import { useTelemetry } from '../../hooks/use-telemetry';
+import { TelemetryEvent } from '../../utils/telemetry';
+
+interface ContactSalesButtonProps {
+  className?: string;
+  variant?: 'default' | 'outline';
+}
+
+export function ContactSalesButton({ className, variant = 'outline' }: ContactSalesButtonProps) {
+  const [isContactSalesModalOpen, setIsContactSalesModalOpen] = useState(false);
+  const track = useTelemetry();
+
+  const handleContactSales = () => {
+    track(TelemetryEvent.BILLING_CONTACT_SALES_CLICKED, {
+      intendedPlan: ApiServiceLevelEnum.ENTERPRISE,
+      source: 'billing_page',
+    });
+    setIsContactSalesModalOpen(true);
+  };
+
+  const handleModalClose = () => {
+    track(TelemetryEvent.BILLING_CONTACT_SALES_MODAL_CLOSED, {
+      intendedPlan: ApiServiceLevelEnum.ENTERPRISE,
+    });
+    setIsContactSalesModalOpen(false);
+  };
+
+  return (
+    <>
+      <Button variant={variant} className={className} onClick={handleContactSales}>
+        Contact sales
+      </Button>
+      <ContactSalesModal
+        isOpen={isContactSalesModalOpen}
+        onClose={handleModalClose}
+        intendedApiServiceLevel={ApiServiceLevelEnum.ENTERPRISE}
+      />
+    </>
+  );
+}

apps/dashboard/src/components/billing/contact-sales-modal.tsx

@@ -0,0 +1,47 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/primitives/dialog';
+import { ApiServiceLevelEnum } from '@novu/shared';
+import { HubspotForm } from '../hubspot-form';
+import { HUBSPOT_FORM_IDS } from './utils/hubspot.constants';
+import { useAuth } from '@/context/auth/hooks';
+import { toast } from 'sonner';
+
+interface ContactSalesModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  intendedApiServiceLevel: ApiServiceLevelEnum;
+}
+
+export function ContactSalesModal({ isOpen, onClose, intendedApiServiceLevel }: ContactSalesModalProps) {
+  const { currentUser, currentOrganization } = useAuth();
+
+  if (!isOpen || !currentUser || !currentOrganization) {
+    return null;
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="p-10 sm:max-w-[840px]">
+        <DialogHeader>
+          <DialogTitle>Contact sales</DialogTitle>
+        </DialogHeader>
+        <HubspotForm
+          formId={HUBSPOT_FORM_IDS.UPGRADE_CONTACT_SALES}
+          properties={{
+            firstname: currentUser.firstName || '',
+            lastname: currentUser.lastName || '',
+            email: currentUser.email || '',
+            app_organizationid: currentOrganization._id,
+            'TICKET.subject': `Contact Sales - ${intendedApiServiceLevel}`,
+            'TICKET.content': '',
+          }}
+          readonlyProperties={['email']}
+          focussedProperty="TICKET.content"
+          onFormSubmitted={() => {
+            toast.success('Thank you for contacting us! We will be in touch soon.');
+            onClose();
+          }}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}