feat: productivity email action text (#8966)

frontend/src/component/personalDashboard/ProjectSetupComplete.tsx

@@ -100,7 +100,7 @@ const ProjectHealthMessage: FC<{
                     during the last 4 weeks.
                 </Typography>
                 <Typography>
-                    {avgHealthCurrentWindow && avgHealthCurrentWindow >= 70
+                    {avgHealthCurrentWindow && avgHealthCurrentWindow >= 75
                         ? keepDoingMessage
                         : improveMessage}
                 </Typography>
@@ -116,7 +116,7 @@ const ProjectHealthMessage: FC<{
                     <PercentageScore>{health}%</PercentageScore>.
                 </Typography>
                 <Typography>
-                    {health >= 70 ? keepDoingMessage : improveMessage}
+                    {health >= 75 ? keepDoingMessage : improveMessage}
                 </Typography>
             </>
         );

package.json

@@ -167,7 +167,7 @@
     "stoppable": "^1.1.0",
     "ts-toolbelt": "^9.6.0",
     "type-is": "^1.6.18",
-    "unleash-client": "6.3.0-alpha.0",
+    "unleash-client": "6.3.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {

src/lib/features/productivity-report/productivity-report-view-model.test.ts

@@ -178,4 +178,79 @@ describe('productivityReportViewModel', () => {
             expect(viewModel.productionUpdatedTrendMessage()).toBe(null);
         });
     });
+
+    describe('Action text', () => {
+        it('healthy instance', () => {
+            const metrics: ProductivityReportMetrics = {
+                ...mockMetrics,
+                health: 75,
+                previousMonth: {
+                    ...mockMetrics.previousMonth,
+                    health: 75,
+                },
+            };
+
+            const viewModel = productivityReportViewModel({
+                ...mockData,
+                metrics,
+            });
+
+            expect(viewModel.actionText()).toBe(null);
+        });
+
+        it('health declined', () => {
+            const metrics: ProductivityReportMetrics = {
+                ...mockMetrics,
+                health: 75,
+                previousMonth: {
+                    ...mockMetrics.previousMonth,
+                    health: 76,
+                },
+            };
+
+            const viewModel = productivityReportViewModel({
+                ...mockData,
+                metrics,
+            });
+
+            expect(viewModel.actionText()).toBe(
+                'Remember to archive stale flags to reduce technical debt and keep your project healthy',
+            );
+        });
+
+        it('health improved but below healthy threshold', () => {
+            const metrics: ProductivityReportMetrics = {
+                ...mockMetrics,
+                health: 74,
+                previousMonth: {
+                    ...mockMetrics.previousMonth,
+                    health: 73,
+                },
+            };
+
+            const viewModel = productivityReportViewModel({
+                ...mockData,
+                metrics,
+            });
+
+            expect(viewModel.actionText()).toBe(
+                'Remember to archive stale flags to reduce technical debt and keep your project healthy',
+            );
+        });
+
+        it('healthy with no previous month data', () => {
+            const metrics: ProductivityReportMetrics = {
+                ...mockMetrics,
+                health: 75,
+                previousMonth: null,
+            };
+
+            const viewModel = productivityReportViewModel({
+                ...mockData,
+                metrics,
+            });
+
+            expect(viewModel.actionText()).toBe(null);
+        });
+    });
 });

src/lib/features/productivity-report/productivity-report-view-model.ts

@@ -38,6 +38,18 @@ export const productivityReportViewModel = ({
                   : GREEN;
         return healthColor;
     },
+    actionText(): string | null {
+        const improveMessage =
+            'Remember to archive stale flags to reduce technical debt and keep your project healthy';
+        const previousHealth = this.previousMonth?.health || 0;
+        if (this.health <= 74) {
+            return improveMessage;
+        }
+        if (this.health < previousHealth) {
+            return improveMessage;
+        }
+        return null;
+    },
     healthTrendMessage() {
         return this.previousMonthText(
             '%',

src/lib/services/email-service.test.ts

@@ -135,14 +135,14 @@ test('Can send productivity report email', async () => {
     );
     expect(content.from).toBe('noreply@getunleash.ai');
     expect(content.subject).toBe('Unleash - productivity report');
-    expect(content.html.includes(`Productivity Report`)).toBe(true);
+    expect(content.html.includes('Productivity Report')).toBe(true);
-    expect(content.html.includes(`localhost/insights`)).toBe(true);
+    expect(content.html.includes('localhost/insights')).toBe(true);
-    expect(content.html.includes(`localhost/profile`)).toBe(true);
+    expect(content.html.includes('localhost/profile')).toBe(true);
     expect(content.html.includes('#68a611')).toBe(true);
-    expect(content.html.includes(`10% more than previous month`)).toBe(true);
+    expect(content.html.includes('10% more than previous month')).toBe(true);
-    expect(content.text.includes(`localhost/insights`)).toBe(true);
+    expect(content.text.includes('localhost/insights')).toBe(true);
-    expect(content.text.includes(`localhost/profile`)).toBe(true);
+    expect(content.text.includes('localhost/profile')).toBe(true);
-    expect(content.text.includes(`localhost/profile`)).toBe(true);
+    expect(content.text.includes('localhost/profile')).toBe(true);
 });
 
 test('Should add optional headers to productivity email', async () => {

src/mailtemplates/productivity-report/productivity-report.html.mustache

@@ -25,11 +25,12 @@
             <div class="big-number"
                 style="font-size: 48px;line-height: 36px;font-weight: bold;color: #333;margin: 20px 0 0 0;text-align: center;">
                 <div class="shaded"
-                    style="margin: 0;padding: 36px 8px;background: #f0f0f5;border-width: 3px;border-color: #ffffff;border-style: solid;">
+                     style="margin: 0;padding: 24px 8px 24px 8px; background: #f0f0f5;border-width: 3px;border-color: #ffffff;border-style: solid;">
                     <div style="padding-top: 12px;">
                         <span style="color: {{healthColor}};">{{health}}%</span><br>
                         <span style="font-size: 16px; color: #1A4049; font-weight: 700">your instance health</span><br>
                         <span style="font-size: 12px; color: #6E6E70; font-weight: 400; line-height: 14px">{{{healthTrendMessage}}}</span>
+                        <div style="font-size: 12px; margin-top: 16px; font-weight: 400; line-height: 14px;">{{actionText}}</div>
                     </div>
                 </div>
             </div>

yarn.lock

@@ -9294,9 +9294,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unleash-client@npm:6.3.0-alpha.0":
+"unleash-client@npm:6.3.0":
-  version: 6.3.0-alpha.0
+  version: 6.3.0
-  resolution: "unleash-client@npm:6.3.0-alpha.0"
+  resolution: "unleash-client@npm:6.3.0"
   dependencies:
     http-proxy-agent: "npm:^7.0.2"
     https-proxy-agent: "npm:^7.0.5"
@@ -9306,7 +9306,7 @@ __metadata:
     murmurhash3js: "npm:^3.0.1"
     proxy-from-env: "npm:^1.1.0"
     semver: "npm:^7.6.2"
-  checksum: 10c0/2646cdc0cc2e2e257342aeeeaab3ad973acc8b48fece25c8a36207c4cadfb1bc08e88789839ebdff4191f0b56806207e66e0863e7144bbd9370fb8256626edab
+  checksum: 10c0/ae2cf8df7f6691fe0c35d873a7abc2c099a10ea520186e7c7dbd70dcc45e6555528b7eda2bd145a9d30b53f009232a485b319354769f67c9505270e50f19e3f3
   languageName: node
   linkType: hard
 
@@ -9421,7 +9421,7 @@ __metadata:
     tsc-watch: "npm:6.2.1"
     type-is: "npm:^1.6.18"
     typescript: "npm:5.4.5"
-    unleash-client: "npm:6.3.0-alpha.0"
+    unleash-client: "npm:6.3.0"
     uuid: "npm:^9.0.0"
     wait-on: "npm:^7.2.0"
   languageName: unknown