Bounty email updates (dubinc#3735)

marcusljf · pepeladeira · web-flow · commit 7aa9f0db0461 · 2026-04-10T19:17:11.000-07:00
Co-authored-by: Pedro Ladeira &lt;57876830+pepeladeira@users.noreply.github.com&gt;
diff --git a/apps/web/app/(ee)/api/cron/bounties/notify-partners/route.ts b/apps/web/app/(ee)/api/cron/bounties/notify-partners/route.ts
@@ -154,6 +154,7 @@ export async function POST(req: Request) {
             name: bounty.name,
             type: bounty.type,
             endsAt: bounty.endsAt,
+            rewardAmount: bounty.rewardAmount,
             description: bounty.description,
           },
           program: {
diff --git a/packages/email/src/templates/new-bounty-available.tsx b/packages/email/src/templates/new-bounty-available.tsx
@@ -1,6 +1,7 @@
-import { DUB_WORDMARK, formatDate } from "@dub/utils";
+import { currencyFormatter, DUB_WORDMARK, formatDate } from "@dub/utils";
 import {
   Body,
+  Column,
   Container,
   Head,
   Heading,
@@ -9,19 +10,28 @@ import {
   Link,
   Markdown,
   Preview,
+  Row,
   Section,
   Tailwind,
   Text,
 } from "@react-email/components";
 import { BountyThumbnailImage } from "../components/bounty-thumbnail";
 import { Footer } from "../components/footer";
 
+const ICONS = {
+  calendar: "https://assets.dub.co/cms/icon-calendar-bounty.png",
+  gift: "https://assets.dub.co/cms/icon-gift-bounty.png",
+} as const;
+
+type Icon = keyof typeof ICONS;
+
 export default function NewBountyAvailable({
   bounty = {
     id: "bty_xxx",
     name: "Promote Acme at your campus and earn $500",
     type: "performance",
     endsAt: new Date(),
+    rewardAmount: 10000,
     description:
       "How **does** it work?\n\nGet a group _together_ of at least 15 other people interested in trying out [Acme](https://dub.co). Then, during the event, take a photo of the group using Acme. When submitting, provide any links to the event or photos. Once confirmed, we'll create a one-time commission for you.",
   },
@@ -36,6 +46,7 @@ export default function NewBountyAvailable({
     name: string;
     type: "performance" | "submission";
     endsAt: Date | null;
+    rewardAmount: number | null;
     description: string | null;
   };
   program: {
@@ -44,6 +55,18 @@ export default function NewBountyAvailable({
   };
   email: string;
 }) {
+  const formattedRewardAmount =
+    bounty.rewardAmount != null
+      ? currencyFormatter(bounty.rewardAmount, {
+          trailingZeroDisplay: "stripIfInteger",
+        })
+      : null;
+
+  const iconSizeClassByIcon: Record<Icon, string> = {
+    calendar: "h-4.5 w-4.5",
+    gift: "h-4.5 w-4.5",
+  };
+
   return (
     <Html>
       <Head />
@@ -68,10 +91,41 @@ export default function NewBountyAvailable({
                 <Text className="m-0 p-0 text-base font-semibold text-neutral-900">
                   {bounty.name}
                 </Text>
-                {bounty.endsAt && (
-                  <Text className="m-0 p-0 text-sm font-medium text-neutral-500">
-                    Ends {formatDate(bounty.endsAt)}
-                  </Text>
+                {(bounty.endsAt || formattedRewardAmount) && (
+                  <Section className="pt-2">
+                    {bounty.endsAt && (
+                      <Row>
+                        <Column className="w-5 align-middle">
+                          <Img
+                            src={ICONS.calendar}
+                            className={iconSizeClassByIcon.calendar}
+                            alt=""
+                          />
+                        </Column>
+                        <Column className="pl-2">
+                          <Text className="m-0 text-base font-normal text-neutral-500">
+                            Ends {formatDate(bounty.endsAt)}
+                          </Text>
+                        </Column>
+                      </Row>
+                    )}
+                    {formattedRewardAmount && (
+                      <Row className={bounty.endsAt ? "mt-1" : ""}>
+                        <Column className="w-5 align-middle">
+                          <Img
+                            src={ICONS.gift}
+                            className={iconSizeClassByIcon.gift}
+                            alt=""
+                          />
+                        </Column>
+                        <Column className="pl-2">
+                          <Text className="m-0 text-base font-normal text-neutral-500">
+                            Earn {formattedRewardAmount}
+                          </Text>
+                        </Column>
+                      </Row>
+                    )}
+                  </Section>
                 )}
               </Section>
 
