feat(email-renderer): render countdown images across email targets

packages/email-renderer/src/blocks.ts

@@ -401,6 +401,16 @@ export const socialBlock = leaf(
   ({ node }) => `${String(attrs(node).label)}: ${[["Facebook",attrs(node).facebook],["Instagram",attrs(node).instagram],["LinkedIn",attrs(node).linkedin],["X",attrs(node).x]].filter(([,url])=>url).map(([name,url])=>`${name}: ${url}`).join(" · ")}\n\n`,
 );
 
+const countdownUrl = (node: BlockNode, context: unknown): string | undefined => {
+  const timestamp = Date.parse(String(attrs(node).deadline));
+  if (!Number.isFinite(timestamp)) throw new Error("Countdown deadline must be a valid date.");
+  const endpoint = (context as { countdownImageUrl?: string })?.countdownImageUrl;
+  if (!endpoint) return undefined;
+  const url = new URL(endpoint);
+  url.searchParams.set("deadline", String(timestamp));
+  return html(url.href);
+};
+
 export const countdownBlock = leaf(
   "content.countdown",
   "Countdown",
@@ -411,9 +421,18 @@ export const countdownBlock = leaf(
     fallback: string({ max: 300, default: "This offer has ended." }),
   }) as never,
   {
-    emailHtml: ({ node }) => emailCell(`<p style="font-family:inherit;font-size:20px;font-weight:700;margin:0 0 16px;">${html(attrs(node).label)}: <time datetime="${html(attrs(node).deadline)}">${html(attrs(node).deadline)}</time></p>`, node),
-    ampEmail: ({ node }) => emailCell(`<p>${html(attrs(node).label)}: <time datetime="${html(attrs(node).deadline)}">${html(attrs(node).deadline)}</time></p>`, node),
-    mjml: ({ node }) => `<mj-text font-size="20px" font-weight="700">${html(attrs(node).label)}: ${html(attrs(node).deadline)}</mj-text>`,
+    emailHtml: ({ node, context }) => {
+      const url = countdownUrl(node, context);
+      return emailCell(`<p style="font-family:inherit;font-size:20px;font-weight:700;margin:0 0 16px;">${html(attrs(node).label)}: <time datetime="${html(attrs(node).deadline)}">${html(attrs(node).deadline)}</time></p>${url ? `<img src="${url}" width="320" height="64" alt="${html(attrs(node).label)} — ${html(attrs(node).deadline)}" style="display:block;width:320px;max-width:100%;height:auto;" />` : ""}`, node);
+    },
+    ampEmail: ({ node, context }) => {
+      const url = countdownUrl(node, context);
+      return emailCell(`<p>${html(attrs(node).label)}: <time datetime="${html(attrs(node).deadline)}">${html(attrs(node).deadline)}</time></p>${url ? `<amp-img src="${url}" width="320" height="64" layout="responsive" alt="${html(attrs(node).label)}"></amp-img>` : ""}`, node);
+    },
+    mjml: ({ node, context }) => {
+      const url = countdownUrl(node, context);
+      return `<mj-text font-size="20px" font-weight="700">${html(attrs(node).label)}: ${html(attrs(node).deadline)}</mj-text>${url ? `<mj-image src="${url}" width="320px" alt="${html(attrs(node).label)}" />` : ""}`;
+    },
   },
   ({ node }) => `${String(attrs(node).label)}: ${String(attrs(node).deadline)}\n${String(attrs(node).fallback)}\n\n`,
 );