Novu•7mo ago

How to send a weekly email with notifications using echo?

The following seems to only show the last notification and not all of the digested. How can I display all of them in the email?

import { Echo } from "@novu/echo";
import { Body, Container, Head, Html, Tailwind, render } from "@react-email/components";

import { env } from "@/env";

export const echo = new Echo({
  apiKey: env.NOVU_API_KEY,
  devModeBypassAuthentication: env.NODE_ENV === "development",
});

function ReactEmail(props: unknown) {
  return (
    <Html>
      <Head />
      <Tailwind>
        <Body className="bg-white my-auto mx-auto font-sans px-2">
          <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]">
            <pre>{JSON.stringify(props, null, 2)}</pre>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function renderEmail(input: any, payload: any) {
  return render(<ReactEmail {...input} {...payload} />);
}


void echo.workflow(
  "weekly-email",
  async ({ step, payload }) => {
    await step.digest("weekly", async () => {
      return {
        amount: 2,
        unit: "minutes",
      };
    });

    await step.email("email", async (inputs) => {
      return {
        subject: "New updates",
        body: renderEmail(inputs, payload),
      };
    });
  },
  {
    payloadSchema: {
      additionalProperties: true,
    },
  },
);

import { Echo } from "@novu/echo";
import { Body, Container, Head, Html, Tailwind, render } from "@react-email/components";

import { env } from "@/env";

export const echo = new Echo({
  apiKey: env.NOVU_API_KEY,
  devModeBypassAuthentication: env.NODE_ENV === "development",
});

function ReactEmail(props: unknown) {
  return (
    <Html>
      <Head />
      <Tailwind>
        <Body className="bg-white my-auto mx-auto font-sans px-2">
          <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]">
            <pre>{JSON.stringify(props, null, 2)}</pre>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function renderEmail(input: any, payload: any) {
  return render(<ReactEmail {...input} {...payload} />);
}


void echo.workflow(
  "weekly-email",
  async ({ step, payload }) => {
    await step.digest("weekly", async () => {
      return {
        amount: 2,
        unit: "minutes",
      };
    });

    await step.email("email", async (inputs) => {
      return {
        subject: "New updates",
        body: renderEmail(inputs, payload),
      };
    });
  },
  {
    payloadSchema: {
      additionalProperties: true,
    },
  },
);

8 Replies

Ask Inkeep•7mo ago

Hi @BrunoLM, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question. ----------------------------- While I generate an answer, here are some sources that might be helpful: * How to send notifications with Nuxt.js and Vuemail * How to send notifications with Next.js and React email * Step Inputs * React E-mail ----------------------------- Answer To send a weekly email with notifications using Echo, and ensure all digested notifications are displayed, the key is to correctly configure the digest step to accumulate events over the week rather than just a short period. From your current configuration, it appears that your digest is set to accumulate over a period of only 2 minutes. This setting should be adjusted to span a week. Here is an updated snippet that configures the digest to accumulate notifications over a week:

import { Echo } from "@novu/echo";
import { Body, Container, Head, Html, Tailwind, render } from "@react-email/components";

import { env } from "@/env";

export const echo = new Echo({
  apiKey: env.NOVU_API_KEY,
  devModeBypassAuthentication: env.NODE_ENV === "development",
});

function ReactEmail(props: unknown) {
  return (
    <Html>
      <Head />
      <Tailwind>
        <Body className="bg-white my-auto mx-auto font-sans px-2">
          <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]">
            <pre>{JSON.stringify(props, null, 2)}</pre>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function renderEmail(input: any, payload: any) {
  return render(<ReactEmail {...input} {...payload} />);
}

void echo.workflow(
  "weekly-email",
  async ({ step, payload }) => {
    await step.digest("weekly", async () => {
      return {
        amount: 1,  // Duration of the digest period
        unit: "week",  // Unit of time for the digest period
      };
    });

    await step.email("email", async (inputs) => {
      return {
        subject: "Weekly updates",
        body: renderEmail(inputs, payload),
      };
    });
  },
  {
    payloadSchema: {
      additionalProperties: true,
    },
  },
);

import { Echo } from "@novu/echo";
import { Body, Container, Head, Html, Tailwind, render } from "@react-email/components";

import { env } from "@/env";

export const echo = new Echo({
  apiKey: env.NOVU_API_KEY,
  devModeBypassAuthentication: env.NODE_ENV === "development",
});

function ReactEmail(props: unknown) {
  return (
    <Html>
      <Head />
      <Tailwind>
        <Body className="bg-white my-auto mx-auto font-sans px-2">
          <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]">
            <pre>{JSON.stringify(props, null, 2)}</pre>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function renderEmail(input: any, payload: any) {
  return render(<ReactEmail {...input} {...payload} />);
}

void echo.workflow(
  "weekly-email",
  async ({ step, payload }) => {
    await step.digest("weekly", async () => {
      return {
        amount: 1,  // Duration of the digest period
        unit: "week",  // Unit of time for the digest period
      };
    });

    await step.email("email", async (inputs) => {
      return {
        subject: "Weekly updates",
        body: renderEmail(inputs, payload),
      };
    });
  },
  {
    payloadSchema: {
      additionalProperties: true,
    },
  },
);

Ask Inkeep•7mo ago

This configuration changes the digest step to accumulate events over a week. The amount is set to 1, and the unit is changed to "week", which should compile all events of the week into your email. Ensure that the workflow configuration in the Novu dashboard or via your Novu API corresponds to this updated setting to effectively capture and send all notifications within the designated timeframe. This approach ensures that the weekly email will contain all notifications accumulated over the week, rather than just the last few moments. For more details on configuring workflows and handling payloads in Novu, consider referring to the official Novu documentation or community examples that might cover similar use cases (1) .

Sources [1] A Code-First Approach to Managing Notification Workflows - Novu

Ask Inkeep•7mo ago

Got it. Tagging @Support for additional help.