fix: items

novuhq · scopsy · Dec 4, 2024 · Dec 4, 2024 · Dec 4, 2024 · Dec 4, 2024
commit 63ef9392b01b9afefa02ca7c7e8c5c65afab71d8
diff --git a/apps/api/src/app/insights/usecases/usage-insights/usage-insights.command.ts b/apps/api/src/app/insights/usecases/usage-insights/usage-insights.command.ts
@@ -1,7 +1 @@
-import { IsString } from 'class-validator';
-import { EnvironmentCommand } from '@novu/application-generic';
-
-export class UsageInsightsCommand extends EnvironmentCommand {
-  @IsString()
-  organizationId: string;
-}
+export class UsageInsightsCommand {}
diff --git a/apps/api/src/app/insights/usecases/usage-insights/usage-insights.usecase.ts b/apps/api/src/app/insights/usecases/usage-insights/usage-insights.usecase.ts
@@ -1,6 +1,7 @@
 import { Injectable, Logger } from '@nestjs/common';
 import { CommunityOrganizationRepository } from '@novu/dal';
-import { InstrumentUsecase } from '@novu/application-generic';
+import { InstrumentUsecase, FeatureFlagsService } from '@novu/application-generic';
+import { FeatureFlagsKeysEnum } from '@novu/shared';
 import axios from 'axios';
 import { promises as fs } from 'fs';
 import { join } from 'path';
@@ -106,7 +107,10 @@ export class UsageInsights {
   private readonly INBOX_CACHE_FILE = join(process.cwd(), 'mixpanel-inbox-cache.json');
   private readonly CACHE_TTL = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
 
-  constructor(private organizationRepository: CommunityOrganizationRepository) {
+  constructor(
+    private organizationRepository: CommunityOrganizationRepository,
+    private featureFlagsService: FeatureFlagsService
+  ) {
     Logger.debug('UsageInsights service initialized');
   }
 
@@ -309,7 +313,10 @@ export class UsageInsights {
     return orgMetrics;
   }
 
-  private async logOrganizationMetrics(metrics: ICombinedMetrics, workflowStats: IMixpanelResponse['workflowStats']) {
+  private async sendOrganizationNotification(
+    metrics: ICombinedMetrics,
+    workflowStats: IMixpanelResponse['workflowStats']
+  ) {
     Logger.debug(`Processing metrics for organization: ${metrics.id}`);
     try {
       const organization = await this.organizationRepository.findById(metrics.id);
@@ -327,10 +334,22 @@ export class UsageInsights {
 
       Logger.debug(`Enriched metrics for ${organization.name}:`, enrichedMetrics);
 
+      const isEnabled = await this.featureFlagsService.get(FeatureFlagsKeysEnum.IS_USAGE_INSIGHTS_ENABLED, false, {
+        environmentId: 'system',
+        organizationId: organization._id,
+        userId: 'system',
+      });
+
+      if (!isEnabled) {
+        Logger.log('Skipping notification delivery - usage insights disabled by feature flag', enrichedMetrics);
+
+        return;
+      }
+
       await usageInsightsWorkflow.trigger({
         to: {
           subscriberId: '675fe9bcab6a05bb6dcb7dab_11',
-          email: 'dima@novu.co',
+          email: `dima+testing-${organization._id}@novu.co`,
         },
         payload: {
           period: {
@@ -461,7 +480,7 @@ export class UsageInsights {
         inboxStats.byOrganization[orgId] = defaultInboxMetrics;
       }
 
-      await this.logOrganizationMetrics(metrics, workflowStats);
+      await this.sendOrganizationNotification(metrics, workflowStats);
     }
 
     Logger.debug('UsageInsights execution completed successfully');

diff --git a/libs/notifications/src/workflows/usage-insights/email.tsx b/libs/notifications/src/workflows/usage-insights/email.tsx
@@ -44,18 +44,20 @@ function MetricCard({
   const formatNumber = (num: number) => Math.floor(num).toLocaleString('en-US', { maximumFractionDigits: 0 });
 
   return (
-    <div className="h-[88px] rounded-lg border border-gray-100 bg-gray-50/50 p-2">
+    <div className="h-[75px] rounded-lg border border-gray-100 bg-gray-50/50 p-3">
       <Row className="flex items-start justify-between gap-2">
         <Column align="left" className="w-full">
-          <Text className="mb-0 mt-0 min-h-[28px] text-xs font-medium leading-tight text-gray-600">{title}</Text>
+          <Text className="mb-0 mt-0 min-h-[28px] text-xs font-medium capitalize leading-tight text-gray-600">
+            {title}
+          </Text>
         </Column>
         <Column align="right" className="w-full">
-          <Text className={`whitespace-nowrap text-xs font-medium ${changeColor} mb-0 mt-0`}>
+          <Text className={`whitespace-nowrap text-xs font-medium ${changeColor} mb-0 leading-[14px]`}>
             {isPositive ? '↑' : '↓'} {Math.abs(Math.floor(change))}%
           </Text>
         </Column>
       </Row>
-      <Row className="mt-[10px]">
+      <Row>
         <Column align="left">
           <Text className="mb-0 mt-0 text-lg font-bold leading-none text-gray-900">{formatNumber(current)}</Text>
           <Text className="mb-0 mt-0.5 text-[10px] leading-none text-gray-500">Previous: {formatNumber(previous)}</Text>
@@ -79,7 +81,7 @@ function ChannelBreakdown({ channels }: { channels: IUsageEmailData['channelBrea
       <SectionHeader title="Channel Breakdown" />
       <Row>
         {Object.entries(channels).map(([channel, metrics]) => (
-          <Column key={channel} className="p-2 px-0">
+          <Column key={channel} className="p-2">
             <MetricCard title={channel} current={metrics.current} previous={metrics.previous} change={metrics.change} />
           </Column>
         ))}
@@ -134,12 +136,11 @@ function WorkflowStats({ workflows }: { workflows: IUsageEmailData['workflowStat
         {topWorkflows?.map(([name, metrics], index) => {
           const isPositive = metrics.change > 0;
           const changeColor = isPositive ? 'text-emerald-600' : 'text-rose-600';
-          const isLast = index === topWorkflows.length - 1;
 
           return (
             <Row
               key={index}
-              className={`flex items-center justify-between p-3 px-0 ${!isLast ? 'border-b border-gray-100' : ''}`}
+              className={`mb-2 flex items-center justify-between rounded-lg border border-gray-100 bg-gray-50/50 p-2`}
             >
               <Column align="left" className="w-full">
                 <Text className="mb-0.5 mt-0 text-sm font-medium text-gray-900">{name}</Text>
@@ -206,10 +207,10 @@ function MarketingSection({ config }: { config: IMarketingConfig }) {
 
 export default function UsageInsightsEmail(props: IUsageEmailData & { marketingConfig: IMarketingConfig }) {
   return (
-    <Html>
+    <Html className="bg-gray-50 font-sans">
       <Head />
       <Preview>
-        📊 Usage Insights for {props.organizationName} - {props.period.current}
+        📊 Usage Insights for {props.organizationName} - {formatDate(props.period.current)}
       </Preview>
       <Tailwind>
         <Body className="bg-gray-50 font-sans">
@@ -221,13 +222,13 @@ export default function UsageInsightsEmail(props: IUsageEmailData & { marketingC
             className="mx-auto my-[32px]"
           />
           <Container className="mx-auto w-full max-w-[700px]">
-            <Section className="rounded-t-lg bg-indigo-600 px-6 py-8">
+            <Section className="rounded-t-lg bg-gray-900 px-6 py-8">
               <Heading className="text-center text-2xl font-bold text-white">Usage Insights Report</Heading>
               <Text className="text-center text-sm text-indigo-100">{props.organizationName}</Text>
             </Section>
 
             <div className="rounded-b-lg bg-white px-3 py-3 shadow-sm">
-              <div className="mb-6 rounded-md border border-indigo-100/50 bg-indigo-50/50 p-3 text-center">
+              <div className="mb-6 rounded-md border border-indigo-100/50 bg-indigo-50/50 p-2 text-center">
                 <Text className="text-xs font-medium text-indigo-900">
                   Reporting Period: {formatDate(props.period.current)}
                   <span className="mx-2">•</span>
@@ -236,9 +237,9 @@ export default function UsageInsightsEmail(props: IUsageEmailData & { marketingC
               </div>
 
               <Section className="mb-6">
-                <div className="rounded-lg border-2 border-indigo-100 bg-indigo-50/30 p-3">
+                <div className="rounded-lg border-2 border-indigo-100 bg-indigo-50/30">
                   <MetricCard
-                    title="Total Subscriber Notifications"
+                    title="Total Notification Triggers"
                     current={props.subscriberNotifications.current}
                     previous={props.subscriberNotifications.previous}
                     change={props.subscriberNotifications.change}

diff --git a/packages/shared/src/types/feature-flags.ts b/packages/shared/src/types/feature-flags.ts
@@ -49,4 +49,5 @@ export enum FeatureFlagsKeysEnum {
   IS_NEW_DASHBOARD_ACTIVITY_FEED_ENABLED = 'IS_NEW_DASHBOARD_ACTIVITY_FEED_ENABLED',
   IS_ND_INTEGRATION_STORE_ENABLED = 'IS_ND_INTEGRATION_STORE_ENABLED',
   IS_ND_SMS_CHAT_PUSH_ENABLED = 'IS_ND_SMS_CHAT_PUSH_ENABLED',
+  IS_USAGE_INSIGHTS_ENABLED = 'IS_USAGE_INSIGHTS_ENABLED',
 }