placementt-core 1.300.751 → 1.300.752

package/src/emailSections.ts

@@ -1,9 +1,13 @@
-import {EmailSectionConfig, EmailSectionRenderProps} from "./typeDefinitions";
+import {where} from "firebase/firestore";
+import FirebaseQuery from "./firebase/firebaseQuery";
+import {convertDate} from "./firebase/util";
+import {EmailSectionConfig, EmailSectionNames, EmailSectionRenderProps, ExternalEvent, ExternalEventAttendee, ExternalEventRequest, ProviderContactData} from "./typeDefinitions";
 
 const PRIMARY_COLOUR = "#397DF2";
 
 type SectionEvent = {
     title: string,
+    description?: string,
     startDate: string,
     endDate?: string,
     activityType: string,
@@ -41,16 +45,129 @@ function sectionStyles(color: string) {
     return {
         container: `margin: 16px 0; font-family: nunito, sans-serif;`,
         title: `font-size: 16px; font-weight: bold; color: #333; margin: 0 0 8px 0; font-family: nunito, sans-serif;`,
-        table: `width: 100%; border-collapse: collapse; margin: 8px 0; font-family: nunito, sans-serif; font-size: 13px;`,
-        th: `background-color: ${color}; color: white; text-align: left; padding: 8px 12px; font-family: nunito, sans-serif; font-size: 13px;`,
-        td: `padding: 8px 12px; border-bottom: 1px solid #f0f0f0; font-family: nunito, sans-serif; font-size: 13px; color: #333;`,
-        tdAlt: `padding: 8px 12px; border-bottom: 1px solid #f0f0f0; background-color: #fafafa; font-family: nunito, sans-serif; font-size: 13px; color: #333;`,
         footer: `font-size: 12px; color: #666; margin: 8px 0 0 0; font-family: nunito, sans-serif;`,
         link: `color: ${color}; text-decoration: none;`,
         emptyText: `font-family: nunito, sans-serif; color: #666; font-size: 13px; margin: 4px 0;`,
     };
 }
 
+export const emailCampaignSectionDataFetcher = async (sectionName: EmailSectionNames, data: {[key: string]: unknown}): Promise<string> => {
+    const firebaseQuery = new FirebaseQuery();
+    const oId = data.oId as string;
+    const primaryColor = data.primaryColor as string | undefined;
+    const today = convertDate(new Date(), "dbstring") as string;
+
+    switch (sectionName) {
+        case "upcomingEventsSection": {
+            const eventsRaw = await firebaseQuery.getDocsWhere(
+                ["externalEvents"],
+                [where("oId", "==", oId), where("startDate", ">=", today)]
+            ) as {[key: string]: ExternalEvent};
+
+            const events: SectionEvent[] = Object.entries(eventsRaw).map(([id, e]) => ({
+                id,
+                title: e.name,
+                description: e.description,
+                startDate: convertDate(e.startDate, "visual") as string || e.startDate || "",
+                endDate: e.endDate ? convertDate(e.endDate, "visual") as string : undefined,
+                activityType: (e as any).activityType || e.activityId || "other",
+                location: e.locality,
+                image: (e as any).image,
+            }));
+
+            return upcomingEventsSection.render({placeholder: false, events: events as any, oId, primaryColor});
+        }
+        case "attendingEventsSection": {
+            const providerContactId = data.providerContactId as string;
+
+            const attendeesRaw = await firebaseQuery.getDocsWhere(
+                ["externalEventAttendees"],
+                [where("providerContactId", "==", providerContactId), where("oId", "==", oId)]
+            ) as {[key: string]: ExternalEventAttendee};
+
+            const events: SectionEvent[] = (await Promise.all(
+                Object.values(attendeesRaw).map(async (attendee) => {
+                    const event = await firebaseQuery.getDocData(["externalEvents", attendee.eventId]) as ExternalEvent | null;
+                    if (!event?.startDate || (event.endDate && event.endDate < today)) return null;
+                    return {
+                        title: event.name,
+                        description: event.description,
+                        startDate: convertDate(event.startDate, "visual") as string || event.startDate,
+                        endDate: event.endDate ? convertDate(event.endDate, "visual") as string : undefined,
+                        activityType: (event as any).activityType || event.activityId || "other",
+                        location: event.locality,
+                    } as SectionEvent;
+                })
+            )).filter(Boolean) as SectionEvent[];
+
+            return attendingEventsSection.render({placeholder: false, events: events as any, primaryColor});
+        }
+        case "sharedOpportunitiesSection": {
+            const providerContactId = data.providerContactId as string;
+
+            const oppsRaw = await firebaseQuery.getDocsWhere(
+                ["externalEventRequests"],
+                [where("providerContactId", "==", providerContactId)]
+            ) as {[key: string]: ExternalEventRequest};
+
+            const opportunities: SectionOpportunity[] = Object.entries(oppsRaw).map(([id, r]) => ({
+                id,
+                title: r.title || "",
+                description: r.description,
+                type: (r as any).activityType,
+                created: r.created,
+            }));
+
+            return sharedOpportunitiesSection.render({placeholder: false, opportunities: opportunities as any, oId, primaryColor});
+        }
+        case "employerDatabaseSummarySection": {
+            const contactsRaw = await firebaseQuery.getDocsWhere(
+                ["providerContacts"],
+                [where(`savedBy.${oId}.exists`, "==", true)]
+            ) as {[key: string]: ProviderContactData};
+
+            const contacts = Object.values(contactsRaw);
+            const sectors = new Set(contacts.map((c) => c.sector).filter(Boolean));
+
+            const consentedActivities: {[activity: string]: number} = {};
+            contacts.forEach((c) => {
+                const saved = c.savedBy?.[oId];
+                if (saved?.activities) {
+                    saved.activities.forEach((activity) => {
+                        consentedActivities[activity] = (consentedActivities[activity] || 0) + 1;
+                    });
+                }
+            });
+
+            const stats: SectionEmployerStats = {
+                totalContacts: contacts.length,
+                sectors: sectors.size,
+                consentedActivities,
+            };
+
+            return employerDatabaseSummarySection.render({placeholder: false, stats, primaryColor});
+        }
+        case "sharedOpportunitiesForSchoolSection": {
+            const oppsRaw = await firebaseQuery.getDocsWhere(
+                ["externalEventRequests"],
+                [where("schools", "array-contains", oId)]
+            ) as {[key: string]: ExternalEventRequest};
+
+            const opportunities: SectionOpportunity[] = Object.entries(oppsRaw).map(([id, r]) => ({
+                id,
+                title: r.title || "",
+                description: r.description,
+                type: (r as any).activityType,
+                created: r.created,
+            }));
+
+            return sharedOpportunitiesForSchoolSection.render({placeholder: false, opportunities: opportunities as any, primaryColor});
+        }
+        default:
+            return "";
+    }
+}
+
 export const upcomingEventsSection: EmailSectionConfig = {
     id: "upcomingEvents",
     title: "Upcoming Events",
@@ -60,11 +177,12 @@ export const upcomingEventsSection: EmailSectionConfig = {
     render: ({placeholder, events, oId, primaryColor: pc}: EmailSectionRenderProps) => {
         const color = (pc as string) || PRIMARY_COLOUR;
         const s = sectionStyles(color);
+        const eventOId = oId as string | undefined;
 
         const displayEvents: SectionEvent[] = placeholder ? [
-            {title: "Mock Interviews Day", startDate: "15 May 2025", activityType: "mockInterviews", location: "School Main Hall"},
-            {title: "Annual Careers Fair", startDate: "22 May 2025", endDate: "23 May 2025", activityType: "workExperience", location: "Town Hall"},
-            {title: "Mentoring Programme", startDate: "5 June 2025", activityType: "mentoring"},
+            {title: "Mock Interviews Day", startDate: "15 May 2025", activityType: "mockInterviews", location: "School Main Hall", description: "Join us for a day of mock interview practice with our Year 11 students."},
+            {title: "Annual Careers Fair", startDate: "22 May 2025", endDate: "23 May 2025", activityType: "workExperience", location: "Town Hall", description: "A two-day careers fair featuring employers from across the region."},
+            {title: "Mentoring Programme", startDate: "5 June 2025", activityType: "mentoring", description: "Support students with one-to-one mentoring sessions over the summer term."},
             {title: "Workplace Visit Day", startDate: "12 June 2025", activityType: "workplaceVisits", location: "City Centre"},
         ] : ((events as SectionEvent[]) || []);
 
@@ -88,17 +206,20 @@ export const upcomingEventsSection: EmailSectionConfig = {
             const dateStr = event.endDate && event.endDate !== event.startDate
                 ? `${event.startDate} – ${event.endDate}`
                 : event.startDate;
-            const eventLink = oId ? `https://careerthread.co.uk/publicEvents/${oId}` : "#";
+            const eventLink = eventOId ? `https://careerthread.co.uk/publicEvents/${eventOId}` : "#";
             const imgStyle = event.image
-                ? `height:140px;background-image:url('${event.image}');background-size:cover;background-position:center;`
-                : `height:140px;background-color:${bgColor};`;
+                ? `height:120px;background-image:url('${event.image}');background-size:cover;background-position:center;`
+                : `height:120px;background-color:${bgColor};`;
 
             return `
                 <div style="border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.12);background:#ffffff;">
                     <div style="${imgStyle}"></div>
                     <div style="padding:12px 14px 14px;">
+                        <p style="font-size:11px;font-weight:bold;color:${color};text-transform:uppercase;letter-spacing:0.5px;margin:0 0 4px 0;font-family:nunito,sans-serif;">${activityTypeLabel(event.activityType)}</p>
                         <p style="font-weight:bold;font-size:14px;margin:0 0 3px 0;font-family:nunito,sans-serif;color:#333;line-height:1.3;">${event.title}</p>
-                        <p style="font-size:12px;color:#888;margin:0 0 12px 0;font-family:nunito,sans-serif;">${dateStr}</p>
+                        <p style="font-size:12px;color:#888;margin:0 0 4px 0;font-family:nunito,sans-serif;">${dateStr}</p>
+                        ${event.location ? `<p style="font-size:12px;color:#888;margin:0 0 4px 0;font-family:nunito,sans-serif;">${event.location}</p>` : ""}
+                        ${event.description ? `<p style="font-size:12px;color:#666;margin:0 0 10px 0;font-family:nunito,sans-serif;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">${event.description}</p>` : `<div style="margin-bottom:10px;"></div>`}
                         <a href="${eventLink}" style="display:block;background-color:${color};color:#ffffff;text-align:center;padding:9px 12px;border-radius:6px;text-decoration:none;font-size:13px;font-family:nunito,sans-serif;font-weight:bold;">View Event</a>
                     </div>
                 </div>`;
@@ -125,7 +246,7 @@ export const upcomingEventsSection: EmailSectionConfig = {
                 <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
                     ${cardRows.join("")}
                 </table>
-                ${oId ? `<p style="${s.footer}"><a href="https://careerthread.co.uk/publicEvents/${oId}" style="${s.link}">View all events and sign up →</a></p>` : ""}
+                ${eventOId ? `<p style="${s.footer}"><a href="https://careerthread.co.uk/publicEvents/${eventOId}" style="${s.link}">View all events and sign up →</a></p>` : ""}
             </div>`;
     },
 };
@@ -141,8 +262,8 @@ export const attendingEventsSection: EmailSectionConfig = {
         const s = sectionStyles(color);
 
         const displayEvents: SectionEvent[] = placeholder ? [
-            {title: "Mock Interviews Day", startDate: "15 May 2025", activityType: "mockInterviews"},
-            {title: "Annual Careers Fair", startDate: "22 May 2025", activityType: "workExperience"},
+            {title: "Mock Interviews Day", startDate: "15 May 2025", activityType: "mockInterviews", description: "Join us for a day of mock interview practice with our Year 11 students."},
+            {title: "Annual Careers Fair", startDate: "22 May 2025", activityType: "workExperience", description: "A two-day careers fair featuring employers from across the region."},
         ] : ((events as SectionEvent[]) || []);
 
         if (!placeholder && !displayEvents.length) {
@@ -153,25 +274,40 @@ export const attendingEventsSection: EmailSectionConfig = {
                 </div>`;
         }
 
-        const rows = displayEvents.map((event, i) => `
-            <tr>
-                <td style="${i % 2 === 1 ? s.tdAlt : s.td}"><strong>${event.title}</strong></td>
-                <td style="${i % 2 === 1 ? s.tdAlt : s.td}">${event.startDate}</td>
-                <td style="${i % 2 === 1 ? s.tdAlt : s.td}">${activityTypeLabel(event.activityType)}</td>
-            </tr>`).join("");
+        const makeCard = (event: SectionEvent) => {
+            const dateStr = event.endDate && event.endDate !== event.startDate
+                ? `${event.startDate} – ${event.endDate}`
+                : event.startDate;
+            return `
+                <div style="border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,0.12);background:#ffffff;padding:16px;">
+                    <p style="font-size:11px;font-weight:bold;color:${color};text-transform:uppercase;letter-spacing:0.5px;margin:0 0 6px 0;font-family:nunito,sans-serif;">${activityTypeLabel(event.activityType)}</p>
+                    <p style="font-weight:bold;font-size:14px;margin:0 0 4px 0;font-family:nunito,sans-serif;color:#333;line-height:1.3;">${event.title}</p>
+                    <p style="font-size:12px;color:#888;margin:0 0 4px 0;font-family:nunito,sans-serif;">${dateStr}</p>
+                    ${event.location ? `<p style="font-size:12px;color:#888;margin:0 0 4px 0;font-family:nunito,sans-serif;">${event.location}</p>` : ""}
+                    ${event.description ? `<p style="font-size:12px;color:#666;margin:0;font-family:nunito,sans-serif;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">${event.description}</p>` : ""}
+                </div>`;
+        };
+
+        const cardRows: string[] = [];
+        for (let i = 0; i < displayEvents.length; i += 2) {
+            const second = displayEvents[i + 1];
+            cardRows.push(`
+                <tr>
+                    <td class="att-col" style="width:50%;vertical-align:top;padding:0 6px 16px 0;">
+                        ${makeCard(displayEvents[i])}
+                    </td>
+                    <td class="att-col" style="width:50%;vertical-align:top;padding:0 0 16px 6px;">
+                        ${second ? makeCard(second) : ""}
+                    </td>
+                </tr>`);
+        }
 
         return `
             <div style="${s.container}">
+                <style>@media(max-width:600px){.att-col{width:100%!important;display:block!important;padding:0 0 12px 0!important;}}</style>
                 <p style="${s.title}">Your Upcoming Events</p>
-                <table style="${s.table}">
-                    <thead>
-                        <tr>
-                            <th style="${s.th}">Event</th>
-                            <th style="${s.th}">Date</th>
-                            <th style="${s.th}">Type</th>
-                        </tr>
-                    </thead>
-                    <tbody>${rows}</tbody>
+                <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
+                    ${cardRows.join("")}
                 </table>
             </div>`;
     },
@@ -186,6 +322,7 @@ export const sharedOpportunitiesSection: EmailSectionConfig = {
     render: ({placeholder, opportunities, oId, primaryColor: pc}: EmailSectionRenderProps) => {
         const color = (pc as string) || PRIMARY_COLOUR;
         const s = sectionStyles(color);
+        const eventOId = oId as string | undefined;
 
         const displayOps: SectionOpportunity[] = placeholder ? [
             {title: "Mock Interview Sessions", description: "Offering 10 mock interview slots for Year 11 students", type: "mockInterviews"},
@@ -198,7 +335,7 @@ export const sharedOpportunitiesSection: EmailSectionConfig = {
                 <div style="${s.container}">
                     <p style="${s.title}">Share an Opportunity</p>
                     <p style="${s.emptyText}">We would love to hear from you! You can share work experience placements, mock interview sessions, workplace visits, and more with our students.</p>
-                    ${oId ? `<p style="font-family:nunito,sans-serif;margin:12px 0 0 0;"><a href="https://careerthread.co.uk/requestEvent/${oId}" style="background-color:${color};color:white;padding:8px 16px;border-radius:20px;text-decoration:none;font-size:14px;font-family:nunito,sans-serif;">Submit an Opportunity</a></p>` : ""}
+                    ${eventOId ? `<p style="font-family:nunito,sans-serif;margin:12px 0 0 0;"><a href="https://careerthread.co.uk/requestEvent/${eventOId}" style="background-color:${color};color:white;padding:8px 16px;border-radius:20px;text-decoration:none;font-size:14px;font-family:nunito,sans-serif;">Submit an Opportunity</a></p>` : ""}
                 </div>`;
         }
 
@@ -206,7 +343,7 @@ export const sharedOpportunitiesSection: EmailSectionConfig = {
             <div style="border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,0.12);background:#ffffff;padding:16px;">
                 <p style="font-size:11px;font-weight:bold;color:${color};text-transform:uppercase;letter-spacing:0.5px;margin:0 0 6px 0;font-family:nunito,sans-serif;">${op.type ? activityTypeLabel(op.type) : "Opportunity"}</p>
                 <p style="font-weight:bold;font-size:14px;margin:0 0 6px 0;font-family:nunito,sans-serif;color:#333;line-height:1.3;">${op.title}</p>
-                <p style="font-size:12px;color:#888;margin:0;font-family:nunito,sans-serif;line-height:1.5;">${op.description || ""}</p>
+                ${op.description ? `<p style="font-size:12px;color:#888;margin:0;font-family:nunito,sans-serif;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">${op.description}</p>` : ""}
             </div>`;
 
         const cardRows: string[] = [];
@@ -231,7 +368,7 @@ export const sharedOpportunitiesSection: EmailSectionConfig = {
                 <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
                     ${cardRows.join("")}
                 </table>
-                ${oId ? `<p style="${s.footer}"><a href="https://careerthread.co.uk/requestEvent/${oId}" style="${s.link}">Submit another opportunity →</a></p>` : ""}
+                ${eventOId ? `<p style="${s.footer}"><a href="https://careerthread.co.uk/requestEvent/${eventOId}" style="${s.link}">Submit another opportunity →</a></p>` : ""}
             </div>`;
     },
 };
@@ -265,38 +402,53 @@ export const employerDatabaseSummarySection: EmailSectionConfig = {
             other: "Other",
         };
 
-        const consentRows = Object.entries(displayStats.consentedActivities).map(([activity, count], i) => `
-            <tr>
-                <td style="${i % 2 === 1 ? s.tdAlt : s.td}">${activityLabels[activity] || activity}</td>
-                <td style="${i % 2 === 1 ? s.tdAlt : s.td}">${count} employer${count !== 1 ? "s" : ""}</td>
-            </tr>`).join("");
+        const activityEntries = Object.entries(displayStats.consentedActivities);
+        const activityCardRows: string[] = [];
+        for (let i = 0; i < activityEntries.length; i += 2) {
+            const [actA, countA] = activityEntries[i];
+            const second = activityEntries[i + 1];
+            activityCardRows.push(`
+                <tr>
+                    <td class="act-col" style="width:50%;vertical-align:top;padding:0 6px 12px 0;">
+                        <div style="border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.10);background:#ffffff;padding:14px 16px;text-align:center;">
+                            <div style="font-size:22px;font-weight:bold;color:${color};font-family:nunito,sans-serif;">${countA}</div>
+                            <div style="font-size:12px;color:#555;font-family:nunito,sans-serif;margin-top:4px;">${activityLabels[actA] || actA}</div>
+                        </div>
+                    </td>
+                    <td class="act-col" style="width:50%;vertical-align:top;padding:0 0 12px 6px;">
+                        ${second ? `
+                        <div style="border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.10);background:#ffffff;padding:14px 16px;text-align:center;">
+                            <div style="font-size:22px;font-weight:bold;color:${color};font-family:nunito,sans-serif;">${second[1]}</div>
+                            <div style="font-size:12px;color:#555;font-family:nunito,sans-serif;margin-top:4px;">${activityLabels[second[0]] || second[0]}</div>
+                        </div>` : ""}
+                    </td>
+                </tr>`);
+        }
 
         return `
             <div style="${s.container}">
+                <style>@media(max-width:600px){.act-col{width:100%!important;display:block!important;padding:0 0 8px 0!important;}}</style>
                 <p style="${s.title}">Your Employer Database</p>
-                <table style="width: 100%; border-collapse: collapse; margin: 8px 0;">
+                <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;margin:8px 0;">
                     <tr>
-                        <td style="padding: 16px; background-color: ${color}; color: white; text-align: center; border-radius: 4px; width: 48%;">
-                            <div style="font-size: 28px; font-weight: bold; font-family: nunito, sans-serif;">${displayStats.totalContacts}</div>
-                            <div style="font-size: 12px; font-family: nunito, sans-serif; opacity: 0.9; margin-top: 4px;">Total Contacts</div>
+                        <td class="act-col" style="width:50%;vertical-align:top;padding:0 6px 12px 0;">
+                            <div style="padding:16px;background-color:${color};color:white;text-align:center;border-radius:10px;">
+                                <div style="font-size:28px;font-weight:bold;font-family:nunito,sans-serif;">${displayStats.totalContacts}</div>
+                                <div style="font-size:12px;font-family:nunito,sans-serif;opacity:0.9;margin-top:4px;">Total Contacts</div>
+                            </div>
                         </td>
-                        <td style="width: 4%;"></td>
-                        <td style="padding: 16px; background-color: ${color}; color: white; text-align: center; border-radius: 4px; width: 48%;">
-                            <div style="font-size: 28px; font-weight: bold; font-family: nunito, sans-serif;">${displayStats.sectors}</div>
-                            <div style="font-size: 12px; font-family: nunito, sans-serif; opacity: 0.9; margin-top: 4px;">Sectors Represented</div>
+                        <td class="act-col" style="width:50%;vertical-align:top;padding:0 0 12px 6px;">
+                            <div style="padding:16px;background-color:${color};color:white;text-align:center;border-radius:10px;">
+                                <div style="font-size:28px;font-weight:bold;font-family:nunito,sans-serif;">${displayStats.sectors}</div>
+                                <div style="font-size:12px;font-family:nunito,sans-serif;opacity:0.9;margin-top:4px;">Sectors Represented</div>
+                            </div>
                         </td>
                     </tr>
                 </table>
-                ${consentRows ? `
-                <p style="font-size: 14px; font-weight: bold; font-family: nunito, sans-serif; margin: 16px 0 4px 0; color: #333;">Consented to Activities</p>
-                <table style="${s.table}">
-                    <thead>
-                        <tr>
-                            <th style="${s.th}">Activity</th>
-                            <th style="${s.th}">Consented Employers</th>
-                        </tr>
-                    </thead>
-                    <tbody>${consentRows}</tbody>
+                ${activityCardRows.length ? `
+                <p style="font-size:14px;font-weight:bold;font-family:nunito,sans-serif;margin:8px 0 4px 0;color:#333;">Consented to Activities</p>
+                <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
+                    ${activityCardRows.join("")}
                 </table>` : ""}
             </div>`;
     },
@@ -305,7 +457,7 @@ export const employerDatabaseSummarySection: EmailSectionConfig = {
 export const sharedOpportunitiesForSchoolSection: EmailSectionConfig = {
     id: "sharedOpportunitiesForSchool",
     title: "Opportunities Shared With Your School",
-    description: "A table of all employer opportunities that have been shared with this school.",
+    description: "A grid of employer opportunities that have been shared with this school.",
     emailInput: [{type: "heading-one", children: [{text: "Employer Opportunities"}]}, {type: "paragraph", children: [{text: "See below the opportunities that employers have shared with your students. Click on an opportunity to see more."}]}],
     forTemplates: ["schoolsEmailCampaign"],
     render: ({placeholder, opportunities, primaryColor: pc}: EmailSectionRenderProps) => {
@@ -313,9 +465,9 @@ export const sharedOpportunitiesForSchoolSection: EmailSectionConfig = {
         const s = sectionStyles(color);
 
         const displayOps: SectionOpportunity[] = placeholder ? [
-            {title: "Mock Interview Day", description: "Financial services firm offering interview practice", type: "mockInterviews"},
-            {title: "Finance Workplace Visit", description: "Tour of a London bank for up to 25 students", type: "workplaceVisits"},
-            {title: "Year 10 Work Experience", description: "1-week placement at a local engineering firm", type: "workExperience"},
+            {title: "Mock Interview Day", description: "Financial services firm offering interview practice for Year 11 students ahead of their GCSEs.", type: "mockInterviews"},
+            {title: "Finance Workplace Visit", description: "Tour of a London bank for up to 25 students, with Q&A from senior staff.", type: "workplaceVisits"},
+            {title: "Year 10 Work Experience", description: "1-week placement at a local engineering firm working alongside qualified engineers.", type: "workExperience"},
         ] : ((opportunities as SectionOpportunity[]) || []);
 
         if (!placeholder && !displayOps.length) {
@@ -326,25 +478,33 @@ export const sharedOpportunitiesForSchoolSection: EmailSectionConfig = {
                 </div>`;
         }
 
-        const rows = displayOps.map((op, i) => `
-            <tr>
-                <td style="${i % 2 === 1 ? s.tdAlt : s.td}"><strong>${op.title}</strong></td>
-                <td style="${i % 2 === 1 ? s.tdAlt : s.td}">${op.description || ""}</td>
-                <td style="${i % 2 === 1 ? s.tdAlt : s.td}">${op.type ? activityTypeLabel(op.type) : ""}</td>
-            </tr>`).join("");
+        const makeCard = (op: SectionOpportunity) => `
+            <div style="border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,0.12);background:#ffffff;padding:16px;">
+                <p style="font-size:11px;font-weight:bold;color:${color};text-transform:uppercase;letter-spacing:0.5px;margin:0 0 6px 0;font-family:nunito,sans-serif;">${op.type ? activityTypeLabel(op.type) : "Opportunity"}</p>
+                <p style="font-weight:bold;font-size:14px;margin:0 0 6px 0;font-family:nunito,sans-serif;color:#333;line-height:1.3;">${op.title}</p>
+                ${op.description ? `<p style="font-size:12px;color:#888;margin:0;font-family:nunito,sans-serif;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">${op.description}</p>` : ""}
+            </div>`;
+
+        const cardRows: string[] = [];
+        for (let i = 0; i < displayOps.length; i += 2) {
+            const second = displayOps[i + 1];
+            cardRows.push(`
+                <tr>
+                    <td class="sch-opp-col" style="width:50%;vertical-align:top;padding:0 6px 16px 0;">
+                        ${makeCard(displayOps[i])}
+                    </td>
+                    <td class="sch-opp-col" style="width:50%;vertical-align:top;padding:0 0 16px 6px;">
+                        ${second ? makeCard(second) : ""}
+                    </td>
+                </tr>`);
+        }
 
         return `
             <div style="${s.container}">
+                <style>@media(max-width:600px){.sch-opp-col{width:100%!important;display:block!important;padding:0 0 12px 0!important;}}</style>
                 <p style="${s.title}">Opportunities Shared With Your School</p>
-                <table style="${s.table}">
-                    <thead>
-                        <tr>
-                            <th style="${s.th}">Opportunity</th>
-                            <th style="${s.th}">Description</th>
-                            <th style="${s.th}">Type</th>
-                        </tr>
-                    </thead>
-                    <tbody>${rows}</tbody>
+                <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
+                    ${cardRows.join("")}
                 </table>
             </div>`;
     },

package/src/typeDefinitions.ts

@@ -757,6 +757,7 @@ export type InstituteData = {
     publicEventPage?: boolean,
     discount?: string,
     package: string,
+    marketingEmails: string[],
     careersHubLinks?: {[oId: string]: {
         exists: boolean,
         invited: string,
@@ -1319,6 +1320,8 @@ export type EmailSectionConfig = {
     render: (props: EmailSectionRenderProps) => string,
 }
 
+export type EmailSectionNames = "upcomingEventsSection"|"attendingEventsSection"|"sharedOpportunitiesSection"|"employerDatabaseSummarySection"|"sharedOpportunitiesForSchoolSection"
+
 export type EmailTemplateConfig = {
         description: string,
         params: string[],
@@ -1326,7 +1329,7 @@ export type EmailTemplateConfig = {
         secondaryButton?: {text: string, link: string},
         optionalButtons?: {text: string, link: string}[],
         type: "workflow"|"feedback"|"event"|"campaign"|"database",
-        sections?: EmailSectionConfig[],
+        sections?: EmailSectionNames[],
 }
 
 export type EmailCampaign = {

package/src/util.ts

@@ -1,6 +1,6 @@
 import {where, WhereFilterOp} from "firebase/firestore";
 import FirebaseQuery from "./firebase/firebaseQuery";
-import {AlumniConversation, CohortData, DataViewerSelectionBackend, DataViewerSelectionWeb, EmailTemplateConfig, ExternalEvent, ExternalEventAttendee, ExternalEventCareersSchool, ExternalEventStudent, FlagCodes, InstituteData, ProviderContactData, StudentPlacementData, UserData, WorkflowStage, YearScoreData} from "./typeDefinitions";
+import {AlumniConversation, CohortData, DataViewerSelectionBackend, DataViewerSelectionWeb, EmailSectionNames, EmailTemplateConfig, ExternalEvent, ExternalEventAttendee, ExternalEventCareersSchool, ExternalEventStudent, FlagCodes, InstituteData, ProviderContactData, StudentPlacementData, UserData, WorkflowStage, YearScoreData} from "./typeDefinitions";
 import {capitalise, convertDate, getDateDiff} from "./firebase/util";
 import {Descendant} from "slate";
 import {PRIMARY_COLOUR} from "./constants";
@@ -204,7 +204,7 @@ export const getMostRecentAlumniMessage = (conversation: AlumniConversation) =>
   };
 
 
-export function buildEmailHTML({preheader, title, salutation, body, primaryColor=PRIMARY_COLOUR, primaryButton, secondaryButton, primaryImage="https://firebasestorage.googleapis.com/v0/b/placementt-dfa17.appspot.com/o/public%2FCareerThreadLogoForEmail.png?alt=media&token=046b5555-cd79-4fc9-bc89-90395e3fa351v", designatedStaffEmail, organisationName, params, data, sectionData}:{preheader: string, title: string, salutation?: string, body: string|Descendant[], primaryColor?: string, primaryButton?: {title: string, url: string}, secondaryButton?: {title: string, url: string}, primaryImage?: string, designatedStaffEmail?: string, organisationName?: string, params?: EmailTemplateConfig, data?: {[key: string]: string|undefined}, sectionData?: {[sectionId: string]: {[key: string]: unknown}}}) {
+export async function buildEmailHTML({preheader, title, salutation, body, primaryColor=PRIMARY_COLOUR, primaryButton, secondaryButton, primaryImage="https://firebasestorage.googleapis.com/v0/b/placementt-dfa17.appspot.com/o/public%2FCareerThreadLogoForEmail.png?alt=media&token=046b5555-cd79-4fc9-bc89-90395e3fa351v", designatedStaffEmail, organisationName, params, data, sectionData, emailSectionRenderer}:{preheader: string, title: string, salutation?: string, body: string|Descendant[], primaryColor?: string, primaryButton?: {title: string, url: string}, secondaryButton?: {title: string, url: string}, primaryImage?: string, designatedStaffEmail?: string, organisationName?: string, params?: EmailTemplateConfig, data?: {[key: string]: string|undefined}, sectionData?: {[sectionId: string]: {[key: string]: unknown}}, emailSectionRenderer?: (sectionName: EmailSectionNames, data: {[key: string]: unknown}) => Promise<string>}) {
     const serialiseSlate = (nodes: Descendant[]) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return nodes.map((n:any) => {
@@ -254,7 +254,7 @@ export function buildEmailHTML({preheader, title, salutation, body, primaryColor
     const makeSecondaryButtonHTML = (url: string, title: string) =>
         `<div style="text-align:center;padding:10px 0;"><a href="${url}" style="display:inline-block;font-weight:normal;color:#aeaeae;text-decoration:none;font-family:nunito,sans-serif;">${title}</a></div>`;
 
-    const getEmailContentFromTemplate = (template: string|Descendant[], params: EmailTemplateConfig, data: {[key: string]: string|undefined}) => {
+    const getEmailContentFromTemplate = async (template: string|Descendant[], params: EmailTemplateConfig, data: {[key: string]: string|undefined}) => {
         let finalBody = typeof template === "string" ? template : serialiseSlate(template);
 
         const allParams = [...params.params, ...Object.keys(data)];
@@ -289,17 +289,23 @@ export function buildEmailHTML({preheader, title, salutation, body, primaryColor
 
         // Resolve sections
         if (params.sections) {
-            const resolveSection = (sectionId: string) => {
-                const section = params.sections!.find((s) => s.id === sectionId);
-                if (!section) return "";
-                const renderProps = sectionData?.[sectionId]
-                    ? {primaryColor, ...sectionData[sectionId]}
-                    : {placeholder: true, primaryColor};
-                return section.render(renderProps);
-            };
+            const sectionIds = new Set<string>();
+            let m: RegExpExecArray | null;
+            const divRe = /<div[^>]*>\s*\{\{section:([^}]+)\}\}\s*<\/div>/g;
+            const inlineRe = /\{\{section:([^}]+)\}\}/g;
+            while ((m = divRe.exec(finalBody)) !== null) sectionIds.add(m[1]);
+            while ((m = inlineRe.exec(finalBody)) !== null) sectionIds.add(m[1]);
+
+            const resolvedMap: {[id: string]: string} = {};
+            await Promise.all([...sectionIds].map(async (id) => {
+                if (emailSectionRenderer) {
+                    resolvedMap[id] = await emailSectionRenderer(id as EmailSectionNames, {...data, primaryColor});
+                }
+            }));
+
             finalBody = finalBody
-                .replace(/<div[^>]*>\s*\{\{section:([^}]+)\}\}\s*<\/div>/g, (_, id) => resolveSection(id))
-                .replace(/\{\{section:([^}]+)\}\}/g, (_, id) => resolveSection(id));
+                .replace(/<div[^>]*>\s*\{\{section:([^}]+)\}\}\s*<\/div>/g, (_, id) => resolvedMap[id] ?? "")
+                .replace(/\{\{section:([^}]+)\}\}/g, (_, id) => resolvedMap[id] ?? "");
         }
 
         return finalBody;
@@ -310,7 +316,7 @@ export function buildEmailHTML({preheader, title, salutation, body, primaryColor
     let formattedSecondaryButton = secondaryButton;
 
     if (params && data) {
-        formattedBody = getEmailContentFromTemplate(body, params, data);
+        formattedBody = await getEmailContentFromTemplate(body, params, data);
     }
 
     const emailHeadAndStylesHTML = `