Add avatarUrl to new search alerts email

backend/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compass/api",
-  "version": "1.43.0",
+  "version": "1.44.0",
   "private": true,
   "description": "Backend API endpoints",
   "main": "src/serve.ts",

backend/api/src/app.ts

@@ -692,7 +692,7 @@ Object.entries(handlers).forEach(([path, handler]) => {
 // Internal Endpoints
 app.post(pathWithPrefix('/internal/send-search-notifications'), async (req, res) => {
   const apiKey = req.header('x-api-key')
-  if (apiKey !== process.env.COMPASS_API_KEY) {
+  if (!IS_LOCAL && apiKey !== process.env.COMPASS_API_KEY) {
     return res.status(401).json({error: 'Unauthorized'})
   }
 

backend/api/src/send-search-notifications.ts

@@ -70,10 +70,7 @@ export const sendSearchNotifications = async () => {
     matches[row.creator_id].matches.push({
       id: row.creator_id,
       description: {filters: row.search_filters, location: row.location},
-      matches: profiles.map((item: any) => ({
-        name: item.name,
-        username: item.username,
-      })),
+      matches: profiles.map((profile: any) => profile.user),
     })
   }
   debug('matches:', JSON.stringify(matches, null, 2))

backend/email/emails/functions/helpers.tsx

@@ -7,7 +7,7 @@ import {
   getNotificationDestinationsForUser,
   UNSUBSCRIBE_URL,
 } from 'common/user-notification-preferences'
-import NewSearchAlertsEmail from 'email/new-search_alerts'
+import NewSearchAlertsEmail from 'email/new-search-alerts'
 import ShareCompassEmail from 'email/share-compass'
 import WelcomeEmail from 'email/welcome'
 import * as admin from 'firebase-admin'

backend/email/emails/new-search-alerts.tsx

@@ -1,4 +1,14 @@
-import {Body, Container, Head, Html, Link, Preview, Section, Text} from '@react-email/components'
+import {
+  Body,
+  Container,
+  Head,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Section,
+  Text,
+} from '@react-email/components'
 import {DOMAIN} from 'common/envs/constants'
 import {FilterFields} from 'common/filters'
 import {formatFilters, locationType} from 'common/filters-format'
@@ -88,21 +98,38 @@ export const NewSearchAlertsEmail = ({
                         style={{
                           display: 'inline-flex',
                           alignItems: 'center',
-                          flexWrap: 'wrap',
-                          gap: '4px 8px',
+                          gap: '12px',
                           padding: '7px 14px',
                           maxWidth: '100%',
                           boxSizing: 'border-box',
                           backgroundColor: '#faf3e9',
                           border: '1px solid #e8c99e',
                           borderRadius: '14px',
-                          fontSize: '13px',
                           lineHeight: '1.2',
                           textDecoration: 'none',
                         }}
                       >
-                        <span style={{color: '#1e1a14', fontWeight: '600'}}>{p.name}</span>
-                        <span style={{color: '#c17f3e', fontSize: '12px'}}>@{p.username}</span>
+                        {p.avatarUrl && (
+                          <Img
+                            src={p.avatarUrl}
+                            alt={`${p.username} avatar`}
+                            width={40}
+                            height={40}
+                            style={{
+                              width: '40px',
+                              height: '40px',
+                              borderRadius: '9999px',
+                              objectFit: 'cover',
+                              flexShrink: 0,
+                            }}
+                          />
+                        )}
+                        <span style={{display: 'inline-flex', flexDirection: 'column'}}>
+                          <span style={{color: '#1e1a14', fontWeight: '600', fontSize: '14px'}}>
+                            {p.name}
+                          </span>
+                          <span style={{color: '#c17f3e', fontSize: '12px'}}>@{p.username}</span>
+                        </span>
                       </Link>
                     ))}
                   </div>
@@ -164,6 +191,7 @@ const matchSamples = [
       {
         name: 'James Bond Junior',
         username: 'jamesbond',
+        avatarUrl: 'https://ui-avatars.com/api/?name=JB',
       },
       {
         name: 'Lily',

common/src/profiles/bookmarked_searches.ts

@@ -6,6 +6,7 @@ export interface MatchPrivateUser {
 export interface MatchUser {
   name: string
   username: string
+  avatarUrl?: string | null
 }
 
 export interface MatchesType {